@svadmin/ui 0.69.1 → 0.72.0

package/dist/components/buttons/RefreshButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useInvalidate, useTranslation } from '@svadmin/core';
+  import { useTranslation, useInvalidate, useResourceContract, captureAdminContext } from '@svadmin/core';
+  import { definedReactiveOptions } from '@svadmin/core/options';
   import { Button } from '../ui/button/index.js';
   import { RefreshCw } from '@lucide/svelte';
 
@@ -20,19 +21,53 @@
     class?: string;
   }>();
 
-  const invalidate = useInvalidate();
+  const binding = useResourceContract(() => resource);
+  const context = captureAdminContext();
+  const invalidate = useInvalidate(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+  }));
+  const scope = $derived({
+    contract: binding.resource,
+    provider: context.providers?.[binding.dataProviderName],
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    meta: binding.meta,
+  });
   let spinning = $state(false);
-  let spinTimer: ReturnType<typeof setTimeout> | undefined;
+  let failed = $state(false);
+  let active: object | undefined;
+  let previousScope: typeof scope | undefined;
 
   $effect(() => {
-    return () => { if (spinTimer) clearTimeout(spinTimer); };
+    if (previousScope !== scope) {
+      active = undefined;
+      spinning = false;
+      failed = false;
+      previousScope = scope;
+    }
+  });
+  $effect(() => () => {
+    active = undefined;
   });
 
-  function refresh() {
+  async function refresh() {
+    if (spinning) return;
+    const token = {};
+    const capturedScope = scope;
+    previousScope = capturedScope;
+    active = token;
     spinning = true;
-    invalidate({ resource, invalidates: ['list', 'many'] });
-    if (spinTimer) clearTimeout(spinTimer);
-    spinTimer = setTimeout(() => { spinning = false; }, 600);
+    failed = false;
+    try {
+      await invalidate({ invalidates: ['list', 'many'] });
+    } catch {
+      if (active === token && scope === capturedScope) failed = true;
+    } finally {
+      if (active === token && scope === capturedScope) {
+        active = undefined;
+        spinning = false;
+      }
+    }
   }
 
   const displayText = $derived(label ?? i18n.t('common.refresh'));
@@ -43,6 +78,8 @@
   size={hideText ? 'icon' : 'sm'}
   class={className}
   aria-label={hideText ? displayText : undefined}
+  aria-busy={spinning}
+  disabled={spinning}
   onclick={refresh}
 >
   <RefreshCw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 {spinning ? 'svadmin-u-afbdd13a380e' : ''}" />
@@ -56,3 +93,6 @@
     </span>
   {/if}
 </Button>
+{#if failed}
+  <p role="alert">{i18n.t('common.error')}</p>
+{/if}

package/dist/components/buttons/ShowButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
@@ -17,7 +19,7 @@
     accessControl = { enabled: true, hideIfUnauthorized: true },
     onBeforeNavigate,
     class: className = '',
-  } = $props<{
+  }: {
     resource: string;
     recordItemId: string | number;
     label?: string;
@@ -26,7 +28,7 @@
     accessControl?: ButtonAccessControl;
     onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
-  }>();
+  } = $props();
 
   const nav = useNavigation();
   const resourceDefinition = $derived.by(() => {
@@ -36,13 +38,13 @@
       return null;
     }
   });
-  const can = useCan(() => ({
+  const can = useCan(() => (definedOptions({
     resource,
     action: 'show',
     params: withRecordId(accessControl?.params, recordItemId),
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
-  }));
+  })));
   const hidden = $derived(resourceDefinition?.canShow === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   const displayText = $derived(label ?? i18n.t('common.detail'));
 

package/dist/components/content/ApiKeyList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Check, Copy, KeyRound, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Badge } from '../ui/badge/index.js';
@@ -21,7 +23,7 @@
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle} description={stateDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle, description: stateDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each keys as apiKey (apiKey.id)}

package/dist/components/content/ContentPageShell.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import ContentPageHeader from './ContentPageHeader.svelte';
 
@@ -34,6 +36,6 @@
 </script>
 
 <div data-svadmin-content-page={pageId} class={'svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 ' + widthClass + ' svadmin-u-b3542e058833 ' + className}>
-  {#if title}<ContentPageHeader {title} {eyebrow} {description} {actions} />{/if}
+  {#if title}<ContentPageHeader {title} {...definedOptions({ "eyebrow": eyebrow })} {...definedOptions({ "description": description })} {...definedOptions({ "actions": actions })} />{/if}
   {@render children()}
 </div>

package/dist/components/content/FileList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Download, File, Trash2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
@@ -11,7 +13,7 @@
   const resolvedState = $derived(state ?? (files.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each files as file, index (file.id ?? file.name + '-' + index)}

package/dist/components/content/MemberList.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { MoreHorizontal } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Avatar } from '../ui/avatar/index.js';
@@ -14,7 +16,7 @@
   const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each members as member (member.id)}

package/dist/components/content/NetworkTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="T extends object">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Snippet } from 'svelte';
   import * as Table from '../ui/table/index.js';
   import DataState from './DataState.svelte';
@@ -9,7 +11,7 @@
   const resolvedState = $derived(state ?? (rows.length === 0 ? 'empty' : undefined));
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   <Table.Root data-svadmin-datatable>

package/dist/components/content/SecurityEventTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import * as Table from '../ui/table/index.js';
   import { useTranslation } from '@svadmin/core/i18n';
   import StatusBadge from './StatusBadge.svelte';
@@ -12,7 +14,7 @@
   const isZh = $derived(i18n.locale === 'zh-CN');
 </script>
 {#if resolvedState}
-  <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
+  <DataState state={resolvedState} {...definedOptions({ title: stateTitle ?? emptyTitle, description: stateDescription ?? emptyDescription, retry, retryLabel, loadingLabel })} class={className} />
 {:else}
 <div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   <Table.Root data-svadmin-datatable>

package/dist/components/content/StatusTabs.svelte

@@ -63,7 +63,7 @@
 
   const isCompact = $derived(density === 'compact');
 
-  const toneClasses: Record<string, { activeBadge: string; inactiveBadge: string }> = {
+  const toneClasses: Record<NonNullable<StatusTabItem['tone']>, { activeBadge: string; inactiveBadge: string }> = {
     default: {
       activeBadge: 'svadmin-u-6a1572b6bf5a svadmin-u-20aaf08a7ed1',
       inactiveBadge: 'svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748',
@@ -107,7 +107,7 @@
   {#each items as item (item.key)}
     {@const active = value === item.key}
     {@const tone = item.tone ?? 'default'}
-    {@const badgeTone = toneClasses[tone] ?? toneClasses.default}
+    {@const badgeTone = toneClasses[tone] ?? toneClasses['default']}
     <button
       type="button"
       role="tab"

package/dist/components/fieldComponentMap.d.ts

@@ -1,23 +1,28 @@
 import type { Component } from 'svelte';
-export interface FieldComponentMap {
-    [fieldType: string]: Component<any>;
+import type { FieldDefinition } from '@svadmin/core';
+import { type Static, type TSchema } from '@sinclair/typebox';
+import { type SafeSchema } from '@svadmin/core/schema';
+export interface FieldDisplayProps {
+    value: unknown;
+    options?: {
+        label: string;
+        value: string | number;
+    }[] | undefined;
+    resourceName?: string | undefined;
 }
-/**
- * Built-in display components for show/detail pages.
- * Keys match FieldDefinition.type values.
- */
-export declare const builtinDisplayComponents: FieldComponentMap;
-/**
- * Register a custom field display component for a given field type.
- * The component will be used by ShowPage and any other display contexts.
- */
-export declare function registerDisplayComponent(fieldType: string, component: Component<any>): void;
+export type FieldComponentMap = Readonly<Record<string, Component<FieldDisplayProps>>>;
+/** Every dynamic renderer validates its complete projected props before mounting. */
+export declare const builtinDisplayComponents: FieldComponentMap & Readonly<Record<FieldDefinition['type'], Component<FieldDisplayProps>>>;
+/** Custom renderers receive only values proven by their closed schema. */
+export declare function registerDisplayComponent<const S extends TSchema>(fieldType: string, schema: S & SafeSchema<S>, component: Component<{
+    value: Static<NoInfer<S>>;
+}>): void;
 /**
  * Get the display component for a field type.
  * Custom components take precedence over built-in ones.
  * Returns undefined if no component is registered for the type.
  */
-export declare function getDisplayComponent(fieldType: string): Component<any> | undefined;
+export declare function getDisplayComponent(fieldType: string): Component<FieldDisplayProps> | undefined;
 /**
  * Check if a field type has a display component (custom or built-in).
  */

package/dist/components/fieldComponentMap.js

@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Shared field type → display component mapping
-// 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 { Type } from '@sinclair/typebox';
+import { closeContractSchema, createExactSchemaValidator } from '@svadmin/core/schema';
+import { definedOptions } from '@svadmin/core/options';
+import ValidatedField from './ValidatedField.svelte';
 import TextField from './fields/TextField.svelte';
 import BooleanField from './fields/BooleanField.svelte';
 import ImageField from './fields/ImageField.svelte';
+import ImagesField from './fields/ImagesField.svelte';
 import TagField from './fields/TagField.svelte';
 import DateField from './fields/DateField.svelte';
 import DateRangeField from './fields/DateRangeField.svelte';
@@ -26,47 +26,94 @@ 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.
- */
-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,
-    multiselect: MultiSelectField,
-    relation: RelationField,
-    json: JsonField,
-    richtext: RichTextField,
-    textarea: RichTextField,
-    number: NumberField,
-    currency: CurrencyField,
-    phone: PhoneField,
-    percent: PercentField,
-    rating: RatingField,
-    code: CodeField,
-    avatar: AvatarField,
-    copy: CopyField,
-    file: FileField,
-    markdown: MarkdownField,
-};
-// ─── Custom component registry ─────────────────────────────────
-// Users can register custom field display components at runtime
+import { jsonValueSchema } from './fields/json-value';
+import PasswordField from './fields/PasswordField.svelte';
+import ChoiceField from './fields/ChoiceField.svelte';
+function validatedDisplay(schema, component, project = input => ({ value: input.value })) {
+    const validator = createExactSchemaValidator(schema);
+    const resolve = (input) => {
+        const props = project(input);
+        return validator.Check(props) ? { ok: true, props } : { ok: false };
+    };
+    // The host owns the reactive validation; evaluating here would only check mount.
+    return (internals, input) => ValidatedField(internals, { component, resolve, input });
+}
+const nullable = (schema) => Type.Union([schema, Type.Null(), Type.Undefined()]);
+const text = nullable(Type.String());
+const numeric = nullable(Type.Number());
+const scalar = nullable(Type.Union([Type.String(), Type.Number()]));
+const date = nullable(Type.Union([Type.String(), Type.Number(), Type.Date()]));
+const dateProperty = Type.Optional(Type.Union([Type.String(), Type.Number(), Type.Date(), Type.Null()]));
+const choices = Type.Optional(Type.Array(Type.Object({
+    label: Type.String(), value: Type.Union([Type.String(), Type.Number()]),
+}, { additionalProperties: false })));
+const props = (value) => Type.Object({ value }, { additionalProperties: false });
+const choiceProps = (input) => definedOptions({
+    value: input.value,
+    options: input.options?.map(({ label, value }) => ({ label, value })),
+});
+const textDisplay = validatedDisplay(props(text), TextField);
+const multiChoiceDisplay = validatedDisplay(Type.Object({
+    value: nullable(Type.Array(Type.Union([Type.String(), Type.Number()]))), options: choices,
+}), MultiSelectField, choiceProps);
+const treeChoiceDisplay = validatedDisplay(Type.Object({
+    value: nullable(Type.Union([Type.String(), Type.Number(), Type.Array(Type.Union([Type.String(), Type.Number()]))])),
+    options: choices,
+}), ChoiceField, choiceProps);
+const ratingDisplay = validatedDisplay(props(numeric), RatingField);
+/** Every dynamic renderer validates its complete projected props before mounting. */
+export const builtinDisplayComponents = Object.freeze({
+    text: textDisplay,
+    string: textDisplay,
+    boolean: validatedDisplay(props(nullable(Type.Boolean())), BooleanField),
+    image: validatedDisplay(props(text), ImageField),
+    images: validatedDisplay(props(nullable(Type.Array(Type.String()))), ImagesField),
+    tags: validatedDisplay(props(nullable(Type.Union([Type.String(), Type.Array(Type.String())]))), TagField),
+    date: validatedDisplay(props(date), DateField),
+    daterange: validatedDisplay(props(nullable(Type.Union([
+        Type.Tuple([date, date]),
+        Type.Object({ start: dateProperty, end: dateProperty, from: dateProperty, to: dateProperty }, { additionalProperties: false }),
+    ]))), DateRangeField),
+    email: validatedDisplay(props(text), EmailField),
+    url: validatedDisplay(props(text), UrlField),
+    select: validatedDisplay(Type.Object({ value: scalar, options: choices }), SelectField, choiceProps),
+    multiselect: multiChoiceDisplay,
+    'tree-select': treeChoiceDisplay,
+    treeselect: treeChoiceDisplay,
+    cascader: multiChoiceDisplay,
+    transfer: multiChoiceDisplay,
+    relation: validatedDisplay(Type.Object({
+        value: scalar, resourceName: Type.Optional(Type.String()),
+    }), RelationField, input => definedOptions({ value: input.value, resourceName: input.resourceName })),
+    json: validatedDisplay(props(nullable(jsonValueSchema)), JsonField),
+    array: validatedDisplay(props(nullable(Type.Array(jsonValueSchema))), JsonField),
+    color: textDisplay,
+    password: validatedDisplay(props(text), PasswordField),
+    richtext: validatedDisplay(props(text), RichTextField),
+    textarea: validatedDisplay(props(text), RichTextField),
+    number: validatedDisplay(props(numeric), NumberField),
+    currency: validatedDisplay(props(numeric), CurrencyField),
+    phone: validatedDisplay(props(scalar), PhoneField),
+    percent: validatedDisplay(props(numeric), PercentField),
+    rating: ratingDisplay,
+    rate: ratingDisplay,
+    code: validatedDisplay(props(nullable(jsonValueSchema)), CodeField),
+    avatar: validatedDisplay(Type.Object({ src: text }), AvatarField, input => ({ src: input.value })),
+    copy: validatedDisplay(props(scalar), CopyField),
+    file: validatedDisplay(props(text), FileField),
+    markdown: validatedDisplay(props(text), MarkdownField),
+});
 const customDisplayComponents = new Map();
-/**
- * Register a custom field display component for a given field type.
- * The component will be used by ShowPage and any other display contexts.
- */
-export function registerDisplayComponent(fieldType, component) {
-    customDisplayComponents.set(fieldType, component);
+/** Custom renderers receive only values proven by their closed schema. */
+export function registerDisplayComponent(fieldType, schema, component) {
+    if (!fieldType.trim())
+        throw new TypeError('A field type is required');
+    const validator = createExactSchemaValidator(closeContractSchema(schema));
+    const resolve = (input) => {
+        const value = input.value;
+        return validator.Check(value) ? { ok: true, props: { value } } : { ok: false };
+    };
+    customDisplayComponents.set(fieldType, (internals, input) => ValidatedField(internals, { component, resolve, input }));
 }
 /**
  * Get the display component for a field type.
@@ -74,11 +121,12 @@ export function registerDisplayComponent(fieldType, component) {
  * Returns undefined if no component is registered for the type.
  */
 export function getDisplayComponent(fieldType) {
-    return customDisplayComponents.get(fieldType) ?? builtinDisplayComponents[fieldType];
+    return customDisplayComponents.get(fieldType)
+        ?? (Object.hasOwn(builtinDisplayComponents, fieldType) ? builtinDisplayComponents[fieldType] : undefined);
 }
 /**
  * Check if a field type has a display component (custom or built-in).
  */
 export function hasDisplayComponent(fieldType) {
-    return customDisplayComponents.has(fieldType) || fieldType in builtinDisplayComponents;
+    return getDisplayComponent(fieldType) !== undefined;
 }

package/dist/components/fields/AvatarField.svelte

@@ -61,7 +61,7 @@
 
     const parts = trimmed.split(/\s+/);
     if (parts.length >= 2) {
-      return `${parts[0][0]}${parts.at(-1)?.[0] ?? ''}`.toUpperCase();
+      return `${trimmed.charAt(0)}${parts.at(-1)?.charAt(0) ?? ''}`.toUpperCase();
     }
     return trimmed.slice(0, 2).toUpperCase();
   }

package/dist/components/fields/ChoiceField.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+  import SelectField from './SelectField.svelte';
+  import MultiSelectField from './MultiSelectField.svelte';
+
+  let { value, options }: {
+    value: string | number | (string | number)[] | null | undefined;
+    options?: { label: string; value: string | number }[];
+  } = $props();
+</script>
+
+{#if Array.isArray(value)}
+  <MultiSelectField {value} {...definedOptions({ options })} />
+{:else}
+  <SelectField {value} {...definedOptions({ options })} />
+{/if}

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string | number | (string | number)[] | null | undefined;
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+};
+declare const ChoiceField: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChoiceField = ReturnType<typeof ChoiceField>;
+export default ChoiceField;

package/dist/components/fields/CodeField.svelte

@@ -3,9 +3,11 @@
   import { Copy, Check } from '@lucide/svelte';
   import { Badge } from '../ui/badge/index.js';
   import { cn } from '../../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { formatJsonValue } from './json-value';
 
   interface Props {
-    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    value?: string | number | boolean | Record<string, unknown> | unknown[] | null | undefined;
     language?: string;
     copyable?: boolean;
     title?: string;
@@ -29,22 +31,17 @@
   let copied = $state(false);
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let destroyed = false;
+  const i18n = useTranslation();
 
   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);
-    }
-  });
+  const display = $derived(formatJsonValue(value));
+  const formattedCode = $derived(display.status === 'valid'
+    ? typeof value === 'string' ? value : display.formatted
+    : '');
 
   async function handleCopy(event: MouseEvent) {
     event.stopPropagation();
@@ -69,7 +66,9 @@
   }
 </script>
 
-{#if !formattedCode}
+{#if display.status === 'invalid'}
+  <span role="status" data-svadmin-invalid-field>{i18n.t('validation.invalidFormat')}</span>
+{:else if !formattedCode}
   <span class={cn('field-code svadmin-u-bfa603190748 svadmin-u-fc7473ca09eb', className)}>{nullLabel}</span>
 {:else}
   <div class={cn('field-code svadmin-u-d89972fe17d6 group svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-c9ed8c5f79ae svadmin-u-b00f43c30c2b svadmin-u-359090c2d529 svadmin-u-0e65706bcccd', className)}>

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

@@ -1,5 +1,5 @@
 interface Props {
-    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    value?: string | number | boolean | Record<string, unknown> | unknown[] | null | undefined;
     language?: string;
     copyable?: boolean;
     title?: string;

package/dist/components/fields/DateRangeField.svelte

@@ -41,8 +41,7 @@
     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 value.start ?? value.from;
     }
     return undefined;
   });
@@ -51,8 +50,7 @@
     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 value.end ?? value.to;
     }
     return undefined;
   });

package/dist/components/fields/ImageField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import MediaThumbnail from '../content/MediaThumbnail.svelte';
 
   interface Props {
@@ -17,7 +19,7 @@
 
 {#if value}
   <div style={`width: ${width}px; height: ${height}px;`} class="svadmin-u-bb0c4bfc52bd svadmin-u-012fbd121f37">
-    <MediaThumbnail src={value} {alt} {title} size="full" fit="cover" showOverlay={previewable} class={className} />
+    <MediaThumbnail src={value} {alt} {...definedOptions({ "title": title })} size="full" fit="cover" showOverlay={previewable} class={className} />
   </div>
 {:else}
   <MediaThumbnail src={null} {emptyLabel} class={className} />

package/dist/components/fields/ImagesField.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import ImageField from './ImageField.svelte';
+
+  let { value }: { value: string[] | null | undefined } = $props();
+</script>
+
+{#if value?.length}
+  <div class="field-images">
+    {#each value as image, index (index)}
+      <ImageField value={image} />
+    {/each}
+  </div>
+{:else}
+  <ImageField value={null} />
+{/if}
+
+<style>
+  .field-images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: string[] | null | undefined;
+};
+declare const ImagesField: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImagesField = ReturnType<typeof ImagesField>;
+export default ImagesField;