@svadmin/ui 0.53.0 → 0.55.0

package/dist/components/IntegrationsSettings.svelte

@@ -8,24 +8,47 @@
   import StatusBadge from './content/StatusBadge.svelte';
 
   const i18n = useTranslation();
-  interface Integration { id: string; name: string; description: string; connected: boolean; Icon: Component; }
-  let integrations = $state<Integration[]>([
-    { id: 'source-control', name: 'Source Control', description: 'Sync repository metadata, deployments, and commit activity.', connected: true, Icon: FolderGit },
-    { id: 'chatops', name: 'ChatOps', description: 'Send operational alerts and audit summaries to workspace channels.', connected: false, Icon: MessageCircle },
-    { id: 'identity-cloud', name: 'Identity Cloud', description: 'Configure SSO and workspace identity handoff.', connected: true, Icon: Cloud },
-    { id: 'webhooks', name: 'Webhooks', description: 'Register outbound webhooks for internal tools and monitors.', connected: false, Icon: Plug },
+
+  interface Integration {
+    id: string;
+    name: string;
+    description: string;
+    connected?: boolean;
+    Icon: Component;
+  }
+
+  interface Props {
+    integrations?: Integration[];
+    onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
+  }
+
+  let { integrations, onConnectionChange }: Props = $props();
+  const defaultIntegrations = $derived<Integration[]>([
+    { id: 'source-control', name: i18n.t('integrations.sourceControl'), description: i18n.t('integrations.sourceControlDescription'), Icon: FolderGit },
+    { id: 'chatops', name: 'ChatOps', description: i18n.t('integrations.chatOpsDescription'), Icon: MessageCircle },
+    { id: 'identity-cloud', name: i18n.t('integrations.identityCloud'), description: i18n.t('integrations.identityCloudDescription'), Icon: Cloud },
+    { id: 'webhooks', name: 'Webhooks', description: i18n.t('integrations.webhooksDescription'), Icon: Plug },
   ]);
-  function toggleConnection(id: string, connected: boolean) { integrations = integrations.map((item) => item.id === id ? { ...item, connected } : item); }
+  const displayedIntegrations = $derived(integrations ?? defaultIntegrations);
 </script>
 
 <div class="space-y-6">
   <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.integrations')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.integrationsDescription')}</p></div>
   <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')}>
     <div class="divide-y divide-border">
-      {#each integrations as integration (integration.id)}
+      {#each displayedIntegrations as integration (integration.id)}
         <SettingsFieldRow label={integration.name} description={integration.description}>
           {#snippet control()}
-            <div class="flex items-center gap-3"><StatusBadge status={integration.connected ? 'success' : 'neutral'} label={integration.connected ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')} /><Switch checked={integration.connected} onCheckedChange={(checked) => toggleConnection(integration.id, checked)} aria-label={integration.name} /></div>
+            <div class="flex items-center gap-3">
+              {#if integration.connected !== undefined}
+                <StatusBadge status={integration.connected ? 'success' : 'neutral'} label={integration.connected ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')} />
+                {#if onConnectionChange}
+                  <Switch checked={integration.connected} onCheckedChange={(checked) => onConnectionChange?.(integration.id, checked)} aria-label={integration.name} />
+                {/if}
+              {:else}
+                <span class="text-xs text-muted-foreground">{i18n.t('integrations.statusProvidedByHost')}</span>
+              {/if}
+            </div>
           {/snippet}
         </SettingsFieldRow>
       {/each}

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

@@ -1,4 +1,15 @@
 import type { Component } from 'svelte';
-declare const IntegrationsSettings: Component<Record<string, never>, {}, "">;
+interface Integration {
+    id: string;
+    name: string;
+    description: string;
+    connected?: boolean;
+    Icon: Component;
+}
+interface Props {
+    integrations?: Integration[];
+    onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
+}
+declare const IntegrationsSettings: Component<Props, {}, "">;
 type IntegrationsSettings = ReturnType<typeof IntegrationsSettings>;
 export default IntegrationsSettings;

package/dist/components/content/DescriptionList.svelte

@@ -54,7 +54,7 @@
 {#if bordered}
   <div class={cn('overflow-hidden rounded-lg border border-border bg-card text-foreground', className)}>
     <dl class={cn('grid divide-y divide-border/60 sm:divide-y-0', columnClass)}>
-      {#each items as item (item.label)}
+      {#each items as item, idx (item.label ? `${item.label}-${idx}` : idx)}
         <div
           class={cn(
             'flex flex-col border-b border-r border-border/40 last:border-b-0',
@@ -99,7 +99,7 @@
       className,
     )}
   >
-    {#each items as item (item.label)}
+    {#each items as item, idx (item.label ? `${item.label}-${idx}` : idx)}
       <div
         class={cn(
           'min-w-0',

package/dist/components/fieldComponentMap.js

@@ -3,10 +3,12 @@
 // Used by both ShowPage and FieldRenderer to avoid duplicate if/else chains.
 // Components are lazily resolved by field type at runtime.
 // Pre-import all field display components (tree-shaken by bundler)
+import TextField from './fields/TextField.svelte';
 import BooleanField from './fields/BooleanField.svelte';
 import ImageField from './fields/ImageField.svelte';
 import TagField from './fields/TagField.svelte';
 import DateField from './fields/DateField.svelte';
+import DateRangeField from './fields/DateRangeField.svelte';
 import EmailField from './fields/EmailField.svelte';
 import UrlField from './fields/UrlField.svelte';
 import SelectField from './fields/SelectField.svelte';
@@ -15,17 +17,27 @@ import RelationField from './fields/RelationField.svelte';
 import JsonField from './fields/JsonField.svelte';
 import RichTextField from './fields/RichTextField.svelte';
 import NumberField from './fields/NumberField.svelte';
+import CurrencyField from './fields/CurrencyField.svelte';
+import PhoneField from './fields/PhoneField.svelte';
+import PercentField from './fields/PercentField.svelte';
+import RatingField from './fields/RatingField.svelte';
+import CodeField from './fields/CodeField.svelte';
+import AvatarField from './fields/AvatarField.svelte';
+import CopyField from './fields/CopyField.svelte';
 import FileField from './fields/FileField.svelte';
 /**
  * Built-in display components for show/detail pages.
  * Keys match FieldDefinition.type values.
  */
 export const builtinDisplayComponents = {
+    text: TextField,
+    string: TextField,
     boolean: BooleanField,
     image: ImageField,
     images: ImageField,
     tags: TagField,
     date: DateField,
+    daterange: DateRangeField,
     email: EmailField,
     url: UrlField,
     select: SelectField,
@@ -35,6 +47,13 @@ export const builtinDisplayComponents = {
     richtext: RichTextField,
     textarea: RichTextField,
     number: NumberField,
+    currency: CurrencyField,
+    phone: PhoneField,
+    percent: PercentField,
+    rating: RatingField,
+    code: CodeField,
+    avatar: AvatarField,
+    copy: CopyField,
     file: FileField,
 };
 // ─── Custom component registry ─────────────────────────────────

package/dist/components/fields/CodeField.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -27,6 +28,12 @@
 
   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 '';
@@ -39,20 +46,25 @@
     }
   });
 
-  async function handleCopy() {
+  async function handleCopy(event: MouseEvent) {
+    event.stopPropagation();
     if (!formattedCode || !copyable) return;
+
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (!writeText) return;
+
     try {
-      if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        await navigator.clipboard.writeText(formattedCode);
-      }
+      await writeText.call(globalThis.navigator.clipboard, formattedCode);
     } catch {
-      // Fallback
+      return;
     }
 
+    if (destroyed) return;
     copied = true;
     if (timeoutId) clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
       copied = false;
+      timeoutId = null;
     }, 1500);
   }
 </script>

package/dist/components/fields/CurrencyField.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  export type CurrencyTone = 'auto' | 'success' | 'warning' | 'destructive' | 'neutral';
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: number | string | null | undefined;
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    compact?: boolean;
+    symbol?: string;
+    colored?: boolean;
+    tone?: CurrencyTone;
+    nullLabel?: string;
+    tabular?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    currency = 'USD',
+    locale = 'en-US',
+    precision = 2,
+    compact = false,
+    symbol,
+    colored = false,
+    tone = 'neutral',
+    nullLabel = '—',
+    tabular = true,
+    class: className = '',
+  }: Props = $props();
+
+  const normalizedPrecision = $derived(
+    Number.isFinite(precision) ? Math.min(20, Math.max(0, Math.trunc(precision))) : 2
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const num = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(num) ? num : null;
+  });
+
+  const formatted = $derived.by(() => {
+    if (numericValue === null) return nullLabel;
+
+    const opts: Intl.NumberFormatOptions = {
+      style: symbol ? 'decimal' : 'currency',
+      currency: symbol ? undefined : currency,
+      minimumFractionDigits: normalizedPrecision,
+      maximumFractionDigits: normalizedPrecision,
+    };
+
+    if (compact) {
+      opts.notation = 'compact';
+      opts.compactDisplay = 'short';
+    }
+
+    try {
+      let res = new Intl.NumberFormat(locale, opts).format(numericValue);
+      if (symbol) {
+        res = `${symbol}${res}`;
+      }
+      return res;
+    } catch {
+      return String(numericValue);
+    }
+  });
+
+  const resolvedTone = $derived.by(() => {
+    if (tone !== 'auto' && tone !== 'neutral') return tone;
+    if ((!colored && tone !== 'auto') || numericValue === null) return 'neutral';
+    if (numericValue > 0) return 'success';
+    if (numericValue < 0) return 'destructive';
+    return 'neutral';
+  });
+
+  const toneClasses: Record<CurrencyTone, string> = {
+    auto: '',
+    success: 'text-success font-medium',
+    warning: 'text-warning-foreground font-medium',
+    destructive: 'text-destructive font-medium',
+    neutral: 'text-foreground',
+  };
+</script>
+
+{#if numericValue === null}
+  <span class={cn('field-currency text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <span
+    class={cn(
+      'field-currency inline-flex items-center text-sm',
+      tabular && 'font-mono tabular-nums',
+      toneClasses[resolvedTone],
+      className
+    )}
+  >
+    {formatted}
+  </span>
+{/if}

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

@@ -0,0 +1,17 @@
+export type CurrencyTone = 'auto' | 'success' | 'warning' | 'destructive' | 'neutral';
+interface Props {
+    value?: number | string | null | undefined;
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    compact?: boolean;
+    symbol?: string;
+    colored?: boolean;
+    tone?: CurrencyTone;
+    nullLabel?: string;
+    tabular?: boolean;
+    class?: string;
+}
+declare const CurrencyField: import("svelte").Component<Props, {}, "">;
+type CurrencyField = ReturnType<typeof CurrencyField>;
+export default CurrencyField;

package/dist/components/fields/PercentField.svelte

@@ -25,23 +25,28 @@
     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 || value === '') return null;
-    const num = typeof value === 'number' ? value : Number(value);
-    return isNaN(num) ? null : num;
+    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;
-    return scale === '1' ? numericValue * 100 : numericValue;
+    const scaled = scale === '1' ? numericValue * 100 : numericValue;
+    return Number.isFinite(scaled) ? scaled : null;
   });
 
-  const formatted = $derived.by(() => {
-    if (percentNumber === null) return nullLabel;
-    return `${percentNumber.toFixed(precision)}%`;
-  });
+  const formatted = $derived(
+    percentNumber === null ? nullLabel : `${percentNumber.toFixed(normalizedPrecision)}%`
+  );
 
-  const resolvedTone = $derived.by(() => {
+  const resolvedTone = $derived.by((): PercentTone => {
     if (tone !== 'auto') return tone;
     if (percentNumber === null) return 'neutral';
     if (percentNumber >= 80) return 'success';
@@ -67,13 +72,12 @@
     neutral: 'bg-primary',
   };
 
-  const clampedProgress = $derived.by(() => {
-    if (percentNumber === null) return 0;
-    return Math.min(100, Math.max(0, percentNumber));
-  });
+  const clampedProgress = $derived(
+    percentNumber === null ? 0 : Math.min(100, Math.max(0, percentNumber))
+  );
 </script>
 
-{#if numericValue === null}
+{#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)}>
@@ -81,7 +85,14 @@
       {formatted}
     </span>
     {#if showProgress}
-      <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
+      <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}%"

package/dist/components/fields/PhoneField.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Phone, Copy, Check } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: string | number | null | undefined;
+    href?: string;
+    showIcon?: boolean;
+    clickable?: boolean;
+    copyable?: boolean;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+  }
+
+  let {
+    value,
+    href,
+    showIcon = true,
+    clickable = true,
+    copyable = false,
+    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);
+  });
+
+  const stringValue = $derived.by(() => {
+    if (value == null || value === '') return null;
+    const str = String(value).trim();
+    return str.length > 0 ? str : null;
+  });
+
+  const telHref = $derived.by(() => {
+    if (!stringValue) return undefined;
+    const candidate = (href ?? stringValue).replace(/^tel:/i, '');
+    const normalized = candidate.replace(/[\s().-]/g, '');
+    if (!/^\+?\d+$/.test(normalized)) return undefined;
+    return `tel:${normalized}`;
+  });
+
+  async function handleCopy(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!stringValue || !copyable) return;
+
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (!writeText) return;
+
+    try {
+      await writeText.call(globalThis.navigator.clipboard, stringValue);
+    } catch {
+      return;
+    }
+
+    if (destroyed) return;
+    copied = true;
+    oncopy?.(stringValue);
+
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      copied = false;
+      timeoutId = null;
+    }, 2000);
+  }
+</script>
+
+{#if !stringValue}
+  <span class={cn('field-phone text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-phone inline-flex items-center gap-1.5 text-sm', className)}>
+    {#if showIcon}
+      <Phone class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+    {/if}
+    {#if clickable && telHref}
+      <a
+        href={telHref}
+        class="font-medium text-foreground hover:text-primary transition-colors underline-offset-4 hover:underline"
+      >
+        {stringValue}
+      </a>
+    {:else}
+      <span class="text-foreground">{stringValue}</span>
+    {/if}
+    {#if copyable}
+      <button
+        type="button"
+        onclick={handleCopy}
+        class="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+        aria-label={copied ? 'Copied' : 'Copy phone number'}
+        title={copied ? 'Copied' : 'Copy phone number'}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-success" />
+        {:else}
+          <Copy class="h-3 w-3" />
+        {/if}
+      </button>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string | number | null | undefined;
+    href?: string;
+    showIcon?: boolean;
+    clickable?: boolean;
+    copyable?: boolean;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+}
+declare const PhoneField: import("svelte").Component<Props, {}, "">;
+type PhoneField = ReturnType<typeof PhoneField>;
+export default PhoneField;

package/dist/components/fields/RatingField.svelte

@@ -24,10 +24,16 @@
     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 || value === '') return null;
-    const num = typeof value === 'number' ? value : Number(value);
-    return isNaN(num) ? null : Math.max(0, Math.min(max, num));
+    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 }> = {
@@ -39,10 +45,10 @@
   const stars = $derived.by(() => {
     if (numericValue === null) return [];
     const result: ('full' | 'half' | 'empty')[] = [];
-    for (let i = 1; i <= max; i++) {
-      if (numericValue >= i) {
+    for (let index = 1; index <= normalizedMax; index += 1) {
+      if (numericValue >= index) {
         result.push('full');
-      } else if (numericValue >= i - 0.5) {
+      } else if (numericValue >= index - 0.5) {
         result.push('half');
       } else {
         result.push('empty');
@@ -56,14 +62,18 @@
   <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">
+    <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 class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
         {:else if starType === 'half'}
-          <StarHalf class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+          <StarHalf aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
         {:else}
-          <Star class={cn(sizeClasses[size].icon, 'text-muted-foreground/30')} />
+          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'text-muted-foreground/30')} />
         {/if}
       {/each}
     </div>

package/dist/index.d.ts

@@ -111,6 +111,8 @@ 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 { default as CurrencyField } from './components/fields/CurrencyField.svelte';
+export { default as PhoneField } from './components/fields/PhoneField.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';
@@ -221,3 +223,4 @@ 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';
+export type { CurrencyTone } from './components/fields/CurrencyField.svelte';

package/dist/index.js

@@ -114,6 +114,8 @@ 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 { default as CurrencyField } from './components/fields/CurrencyField.svelte';
+export { default as PhoneField } from './components/fields/PhoneField.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.41.0",
+    "@svadmin/core": "^0.41.1",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",