@svadmin/ui 0.53.0 → 0.53.1

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/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/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/package.json

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