@svadmin/ui 0.55.0 → 0.55.1

package/dist/components/fieldComponentMap.js

@@ -25,6 +25,7 @@ import CodeField from './fields/CodeField.svelte';
 import AvatarField from './fields/AvatarField.svelte';
 import CopyField from './fields/CopyField.svelte';
 import FileField from './fields/FileField.svelte';
+import MarkdownField from './fields/MarkdownField.svelte';
 /**
  * Built-in display components for show/detail pages.
  * Keys match FieldDefinition.type values.
@@ -55,6 +56,7 @@ export const builtinDisplayComponents = {
     avatar: AvatarField,
     copy: CopyField,
     file: FileField,
+    markdown: MarkdownField,
 };
 // ─── Custom component registry ─────────────────────────────────
 // Users can register custom field display components at runtime

package/dist/components/fields/MarkdownField.svelte

@@ -1,17 +1,58 @@
 <script lang="ts">
 /* eslint-disable svelte/no-at-html-tags */
-  import * as DOMPurifyPkg from "isomorphic-dompurify";
-  interface Props { value: string | null | undefined }
-  let { value }: Props = $props();
+  import { onMount } from "svelte";
 
-  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
+  interface Props {
+    value?: string | null | undefined;
+    class?: string;
+  }
 
-  const sanitizedHtml = $derived(
-    value ? DOMPurify.sanitize(value, { USE_PROFILES: { html: true } }) : ''
-  );
+  let { value, class: className = "" }: Props = $props();
+
+  interface DomPurifyLike {
+    sanitize(source: string | Node, config?: Record<string, unknown>): string;
+  }
+  let DOMPurify: DomPurifyLike | null = $state(null);
+
+  onMount(() => {
+    let cancelled = false;
+    import("isomorphic-dompurify")
+      .then((pkg) => {
+        if (!cancelled) {
+          const mod = pkg as unknown as { default?: DomPurifyLike; sanitize?: DomPurifyLike["sanitize"] };
+          const loaded: DomPurifyLike | undefined =
+            mod.default && typeof mod.default.sanitize === "function"
+              ? mod.default
+              : typeof mod.sanitize === "function"
+                ? (mod as DomPurifyLike)
+                : undefined;
+          if (loaded) {
+            DOMPurify = loaded;
+          }
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const sanitizedHtml = $derived.by(() => {
+    if (!value) return "";
+    if (DOMPurify && typeof DOMPurify.sanitize === "function") {
+      return DOMPurify.sanitize(value, { USE_PROFILES: { html: true } });
+    }
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  });
 </script>
-{#if value}
-  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary">{@html sanitizedHtml}</div>
-{:else}
+
+{#if !value}
   <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary {className}">{@html sanitizedHtml}</div>
 {/if}

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

@@ -1,5 +1,6 @@
 interface Props {
-    value: string | null | undefined;
+    value?: string | null | undefined;
+    class?: string;
 }
 declare const MarkdownField: import("svelte").Component<Props, {}, "">;
 type MarkdownField = ReturnType<typeof MarkdownField>;

package/dist/components/fields/NumberField.svelte

@@ -31,10 +31,16 @@
     class: className = '',
   }: Props = $props();
 
+  const normalizedPrecision = $derived(
+    precision != null && Number.isFinite(precision)
+      ? Math.min(20, Math.max(0, Math.trunc(precision)))
+      : undefined
+  );
+
   const formatted = $derived.by(() => {
     if (value == null || value === '') return nullLabel;
     const num = Number(value);
-    if (isNaN(num)) return nullLabel;
+    if (!Number.isFinite(num)) return nullLabel;
 
     const opts: Intl.NumberFormatOptions = { ...options };
 
@@ -46,9 +52,9 @@
       opts.notation = 'compact';
       opts.compactDisplay = 'short';
     }
-    if (precision != null) {
-      opts.minimumFractionDigits = precision;
-      opts.maximumFractionDigits = precision;
+    if (normalizedPrecision !== undefined) {
+      opts.minimumFractionDigits = normalizedPrecision;
+      opts.maximumFractionDigits = normalizedPrecision;
     }
     if (signed && num > 0 && !currency) {
       opts.signDisplay = 'always';

package/package.json

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