@svadmin/ui 0.51.0 → 0.52.0

package/dist/components/content/AuditTimeline.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+  import type { Status } from './StatusBadge.svelte';
+
+  export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp?: string;
+    actor?: string;
+    status?: Status;
+    tag?: string;
+    meta?: Record<string, unknown>;
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import StatusBadge from './StatusBadge.svelte';
+  import DataState from './DataState.svelte';
+
+  interface Props {
+    items?: TimelineItem[];
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    emptyTitle = 'No timeline events',
+    emptyDescription = 'Activity events and status transitions will appear here.',
+    class: className = '',
+  }: Props = $props();
+
+  const dotClass: Record<Status, string> = {
+    success: 'bg-success border-success/30 text-success',
+    warning: 'bg-warning border-warning/30 text-warning-foreground',
+    danger: 'bg-destructive border-destructive/30 text-destructive',
+    info: 'bg-primary border-primary/30 text-primary',
+    neutral: 'bg-muted-foreground border-border text-muted-foreground',
+  };
+</script>
+
+<div class={cn('space-y-4', className)}>
+  {#if items.length === 0}
+    <DataState state="empty" title={emptyTitle} description={emptyDescription} />
+  {:else}
+    <div class="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-border">
+      {#each items as item (item.id)}
+        {@const statusTone = item.status ?? 'info'}
+        <div class="relative flex flex-col gap-1 text-sm group">
+          <span
+            class={cn(
+              'absolute -left-6 top-1 flex h-4 w-4 items-center justify-center rounded-full border-2 bg-background transition-transform group-hover:scale-110',
+              item.status ? dotClass[statusTone] : 'border-border bg-muted'
+            )}
+            aria-hidden="true"
+          ></span>
+
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-foreground">{item.title}</span>
+              {#if item.actor}
+                <span class="text-xs text-muted-foreground">by {item.actor}</span>
+              {/if}
+              {#if item.status}
+                <StatusBadge status={item.status} label={item.tag ?? item.status} class="text-[11px] py-0 h-4" />
+              {:else if item.tag}
+                <span class="inline-flex items-center rounded border border-border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground bg-muted">
+                  {item.tag}
+                </span>
+              {/if}
+            </div>
+            {#if item.timestamp}
+              <time class="text-xs tabular-nums text-muted-foreground font-mono">{item.timestamp}</time>
+            {/if}
+          </div>
+
+          {#if item.description}
+            <p class="text-xs text-muted-foreground leading-relaxed whitespace-pre-wrap">{item.description}</p>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/content/AuditTimeline.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Status } from './StatusBadge.svelte';
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp?: string;
+    actor?: string;
+    status?: Status;
+    tag?: string;
+    meta?: Record<string, unknown>;
+}
+interface Props {
+    items?: TimelineItem[];
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+}
+declare const AuditTimeline: import("svelte").Component<Props, {}, "">;
+type AuditTimeline = ReturnType<typeof AuditTimeline>;
+export default AuditTimeline;

package/dist/components/content/index.d.ts

@@ -41,3 +41,5 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
+export { default as AuditTimeline } from './AuditTimeline.svelte';
+export type { TimelineItem } from './AuditTimeline.svelte';

package/dist/components/content/index.js

@@ -29,3 +29,4 @@ export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
+export { default as AuditTimeline } from './AuditTimeline.svelte';

package/dist/components/fields/BooleanField.svelte

@@ -1,13 +1,95 @@
+<script module lang="ts">
+  export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
-  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
-  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
+    trueIcon?: string;
+    falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
+  }
+
+  let {
+    value,
+    mode = 'icon',
+    trueIcon = '✓',
+    falseIcon = '✗',
+    trueLabel = 'Yes',
+    falseLabel = 'No',
+    nullLabel = '—',
+    trueTone = 'success',
+    falseTone = 'danger',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<BooleanTone, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
 </script>
-{#if value}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-success/10 text-success">
-    {trueIcon}
+
+{#if value == null}
+  <span class={cn('text-muted-foreground', className)}>{nullLabel}</span>
+{:else if mode === 'badge' || mode === 'tag'}
+  <Badge
+    variant="outline"
+    class={cn(
+      'font-medium text-xs',
+      value ? toneClass[trueTone] : toneClass[falseTone],
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
+  </Badge>
+{:else if mode === 'text'}
+  <span
+    class={cn(
+      'font-medium text-sm',
+      value
+        ? trueTone === 'success'
+          ? 'text-success'
+          : 'text-foreground'
+        : falseTone === 'danger'
+          ? 'text-destructive'
+          : 'text-muted-foreground',
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
   </span>
 {:else}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-destructive/10 text-destructive">
-    {falseIcon}
-  </span>
+  {#if value}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[trueTone],
+        className
+      )}
+    >
+      {trueIcon}
+    </span>
+  {:else}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[falseTone],
+        className
+      )}
+    >
+      {falseIcon}
+    </span>
+  {/if}
 {/if}

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

@@ -1,7 +1,15 @@
+export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
     trueIcon?: string;
     falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
 }
 declare const BooleanField: import("svelte").Component<Props, {}, "">;
 type BooleanField = ReturnType<typeof BooleanField>;

package/dist/components/fields/DateField.svelte

@@ -1,6 +1,76 @@
+<script module lang="ts">
+  export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
+</script>
+
 <script lang="ts">
-  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
-  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | number | Date | null | undefined;
+    locale?: string;
+    format?: DateFieldFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  function formatRelative(date: Date, loc: string): string {
+    const now = Date.now();
+    const diffMs = date.getTime() - now;
+    const diffSec = Math.round(diffMs / 1000);
+    const diffMin = Math.round(diffSec / 60);
+    const diffHour = Math.round(diffMin / 60);
+    const diffDay = Math.round(diffHour / 24);
+
+    try {
+      const rtf = new Intl.RelativeTimeFormat(loc, { numeric: 'auto' });
+      if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second');
+      if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute');
+      if (Math.abs(diffHour) < 24) return rtf.format(diffHour, 'hour');
+      if (Math.abs(diffDay) < 30) return rtf.format(diffDay, 'day');
+    } catch {
+      // Fallback
+    }
+    return new Intl.DateTimeFormat(loc, { dateStyle: 'medium' }).format(date);
+  }
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const d = value instanceof Date ? value : new Date(value);
+    if (isNaN(d.getTime())) return nullLabel;
+
+    if (format === 'iso') return d.toISOString();
+    if (format === 'relative') return formatRelative(d, locale);
+
+    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 fullIsoTitle = $derived.by(() => {
+    if (value == null || value === '') return undefined;
+    const d = value instanceof Date ? value : new Date(value);
+    return isNaN(d.getTime()) ? undefined : d.toISOString();
+  });
 </script>
-<span class="field-date">{formatted}</span>
+
+<span class={cn('field-date text-sm', className)} title={fullIsoTitle}>{formatted}</span>

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

@@ -1,7 +1,11 @@
+export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
 interface Props {
     value: string | number | Date | null | undefined;
     locale?: string;
+    format?: DateFieldFormat;
     options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const DateField: import("svelte").Component<Props, {}, "">;
 type DateField = ReturnType<typeof DateField>;

package/dist/components/fields/NumberField.svelte

@@ -1,6 +1,74 @@
 <script lang="ts">
-  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
-  let { value, locale = 'en-US', options = {} }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: number | string | null | undefined;
+    locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
+    options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    currency,
+    unit,
+    prefix,
+    precision,
+    compact = false,
+    signed = false,
+    tabular = true,
+    options = {},
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const num = Number(value);
+    if (isNaN(num)) return nullLabel;
+
+    const opts: Intl.NumberFormatOptions = { ...options };
+
+    if (currency) {
+      opts.style = 'currency';
+      opts.currency = currency;
+    }
+    if (compact) {
+      opts.notation = 'compact';
+      opts.compactDisplay = 'short';
+    }
+    if (precision != null) {
+      opts.minimumFractionDigits = precision;
+      opts.maximumFractionDigits = precision;
+    }
+    if (signed && num > 0 && !currency) {
+      opts.signDisplay = 'always';
+    }
+
+    try {
+      let result = new Intl.NumberFormat(locale, opts).format(num);
+      if (prefix && !currency) {
+        result = `${prefix}${result}`;
+      }
+      if (unit) {
+        result = `${result} ${unit}`;
+      }
+      return result;
+    } catch {
+      return String(num);
+    }
+  });
 </script>
-<span class="field-number">{formatted}</span>
+
+<span class={cn('field-number text-sm', tabular && 'font-mono tabular-nums', className)}>
+  {formatted}
+</span>

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

@@ -1,7 +1,16 @@
 interface Props {
     value: number | string | null | undefined;
     locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
     options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const NumberField: import("svelte").Component<Props, {}, "">;
 type NumberField = ReturnType<typeof NumberField>;

package/dist/components/fields/TagField.svelte

@@ -1,12 +1,96 @@
+<script module lang="ts">
+  export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
   import { Badge } from '../ui/badge/index.js';
-  interface Props { value: string | string[] | null | undefined }
-  let { value }: Props = $props();
-  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    colorMap,
+    tone,
+    variant = 'secondary',
+    size = 'default',
+    clickable = false,
+    onclick,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<TagTone, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
+
+  const tags = $derived(
+    Array.isArray(value)
+      ? value.filter((t): t is string => t != null && t !== '')
+      : value != null && value !== ''
+        ? [String(value)]
+        : []
+  );
+
+  function resolveTagClass(tag: string): string {
+    const mapped = colorMap?.[tag] ?? tone;
+    if (mapped && mapped in toneClass) {
+      return toneClass[mapped as TagTone];
+    }
+    if (typeof mapped === 'string') {
+      return mapped;
+    }
+    return '';
+  }
 </script>
-<span class="inline-flex flex-wrap gap-1">
+
+<span class={cn('inline-flex flex-wrap gap-1 items-center', className)}>
   {#each tags as tag, _i (_i)}
-    <Badge variant="secondary">{tag}</Badge>
+    {@const customClass = resolveTagClass(tag)}
+    {#if clickable || onclick}
+      <button
+        type="button"
+        onclick={() => onclick?.(tag)}
+        class="focus:outline-none focus:ring-1 focus:ring-ring rounded"
+      >
+        <Badge
+          variant={customClass ? 'outline' : variant}
+          class={cn(
+            'transition-colors cursor-pointer hover:opacity-80',
+            size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+            customClass
+          )}
+        >
+          {tag}
+        </Badge>
+      </button>
+    {:else}
+      <Badge
+        variant={customClass ? 'outline' : variant}
+        class={cn(
+          size === 'sm' ? 'px-1.5 py-0 text-[11px] h-5' : '',
+          customClass
+        )}
+      >
+        {tag}
+      </Badge>
+    {/if}
   {/each}
-  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
+  {#if tags.length === 0}
+    <span class="text-muted-foreground">{nullLabel}</span>
+  {/if}
 </span>

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

@@ -1,5 +1,14 @@
+export type TagTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: string | string[] | null | undefined;
+    colorMap?: Record<string, TagTone | string>;
+    tone?: TagTone;
+    variant?: 'secondary' | 'outline' | 'default' | 'destructive';
+    size?: 'sm' | 'default';
+    clickable?: boolean;
+    onclick?: (tag: string) => void;
+    nullLabel?: string;
+    class?: string;
 }
 declare const TagField: import("svelte").Component<Props, {}, "">;
 type TagField = ReturnType<typeof TagField>;

package/dist/components/fields/UrlField.svelte

@@ -1,14 +1,50 @@
 <script lang="ts">
   import { ExternalLink } from '@lucide/svelte';
-  interface Props { value: string | null | undefined; label?: string }
-  let { value, label }: Props = $props();
-  const display = $derived(label ?? value ?? '');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | null | undefined;
+    label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    label,
+    target = '_blank',
+    maxDisplayLength = 40,
+    showIcon = true,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const display = $derived.by(() => {
+    if (label) return label;
+    if (!value) return '';
+    if (maxDisplayLength && value.length > maxDisplayLength) {
+      return value.slice(0, maxDisplayLength) + '…';
+    }
+    return value;
+  });
 </script>
+
 {#if value}
-  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
-    {display}
-    <ExternalLink class="h-3 w-3 opacity-60" />
+  <a
+    href={value}
+    {target}
+    rel="noopener noreferrer"
+    class={cn('text-primary hover:underline inline-flex items-center gap-1 text-sm font-medium', className)}
+    title={value}
+  >
+    <span>{display}</span>
+    {#if showIcon}
+      <ExternalLink class="h-3 w-3 shrink-0 opacity-60" />
+    {/if}
   </a>
 {:else}
-  <span class="text-muted-foreground">—</span>
+  <span class="text-muted-foreground">{nullLabel}</span>
 {/if}

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

@@ -1,6 +1,11 @@
 interface Props {
     value: string | null | undefined;
     label?: string;
+    target?: string;
+    maxDisplayLength?: number;
+    showIcon?: boolean;
+    nullLabel?: string;
+    class?: string;
 }
 declare const UrlField: import("svelte").Component<Props, {}, "">;
 type UrlField = ReturnType<typeof UrlField>;

package/dist/index.d.ts

@@ -204,3 +204,8 @@ export type { DemoMember, DemoProject, DemoTeam, DemoIntegration, DemoApiKey, De
 export { default as RowActions } from './components/RowActions.svelte';
 export type { RowActionItem } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
+export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+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';

package/dist/index.js

@@ -202,3 +202,4 @@ export { default as SystemErrorState } from './components/content/SystemErrorSta
 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';

package/package.json

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