@svadmin/lite 0.10.1 → 0.13.0

package/dist/components/LiteJsonSchemaForm.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
+  interface JsonSchema {
+    type?: string;
+    title?: string;
+    description?: string;
+    properties?: Record<string, JsonSchema>;
+    items?: JsonSchema;
+    enum?: Array<string | number | boolean | null>;
+    default?: unknown;
+    required?: string[];
+  }
+
   interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
@@ -9,94 +20,149 @@
 
   let {
     schema,
-    value = {},
+    value = $bindable({}),
     action = '',
     method = 'POST',
     submitText = 'Submit Form',
   }: Props = $props();
 
-  interface FieldMeta {
-    key: string;
-    title: string;
-    type: string;
-    enum?: Array<string | number>;
-    required?: boolean;
+  function cloneDefault(node: JsonSchema): unknown {
+    if (node.default !== undefined) return structuredClone(node.default);
+    if (node.type === 'object' || node.properties) {
+      return Object.fromEntries(
+        Object.entries(node.properties ?? {})
+          .map(([key, child]) => [key, cloneDefault(child)])
+          .filter(([, child]) => child !== undefined),
+      );
+    }
+    if (node.type === 'array') return [];
+    return undefined;
   }
 
-  const properties = $derived.by<FieldMeta[]>(() => {
-    const propsObj = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
-    const requiredKeys = Array.isArray(schema.required) ? (schema.required as string[]) : [];
+  function mergeDefaults(node: JsonSchema, current: unknown): unknown {
+    if (node.type === 'array') {
+      if (!Array.isArray(current)) return cloneDefault(node);
+      return current.map(item => node.items ? mergeDefaults(node.items, item) : item);
+    }
+    if (node.type !== 'object' && !node.properties) return current ?? cloneDefault(node);
+    const source = current && typeof current === 'object' && !Array.isArray(current)
+      ? current as Record<string, unknown>
+      : {};
+    const result: Record<string, unknown> = { ...source };
+    for (const [key, child] of Object.entries(node.properties ?? {})) {
+      const next = mergeDefaults(child, result[key]);
+      if (next !== undefined) result[key] = next;
+    }
+    return result;
+  }
 
-    return Object.entries(propsObj).map(([key, propDef]) => ({
-      key,
-      title: String(propDef.title ?? key),
-      type: String(propDef.type ?? 'string'),
-      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
-      required: requiredKeys.includes(key),
-    }));
+  $effect(() => {
+    const next = mergeDefaults(schema, value);
+    if (JSON.stringify(next) !== JSON.stringify(value)) value = next as Record<string, unknown>;
   });
+
+  function readPath(path: string[]): unknown {
+    return path.reduce<unknown>((current, key) => (
+      current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined
+    ), value);
+  }
+
+  function writePath(path: string[], nextValue: unknown): void {
+    const next = structuredClone(value);
+    let target: Record<string, unknown> = next;
+    for (const key of path.slice(0, -1)) {
+      const child = target[key];
+      target[key] = child && typeof child === 'object' ? child : {};
+      target = target[key] as Record<string, unknown>;
+    }
+    const lastKey = path[path.length - 1];
+    if (lastKey !== undefined) target[lastKey] = nextValue;
+    value = next;
+  }
+
+  function enumValue(raw: string, options: JsonSchema['enum']): unknown {
+    return options?.find(option => String(option) === raw) ?? raw;
+  }
+
+  function addArrayItem(path: string[], itemSchema: JsonSchema): void {
+    const current = readPath(path);
+    const items = Array.isArray(current) ? current : [];
+    writePath(path, [...items, cloneDefault(itemSchema) ?? (itemSchema.type === 'object' ? {} : '')]);
+  }
+
+  function removeArrayItem(path: string[], index: number): void {
+    const current = readPath(path);
+    if (Array.isArray(current)) writePath(path, current.filter((_, itemIndex) => itemIndex !== index));
+  }
 </script>
 
 <div class="lite-schema-form-card">
-  {#if schema.title}
-    <div class="lite-schema-form-header">
-      <strong>{schema.title}</strong>
-    </div>
-  {/if}
+  {#if schema.title}<div class="lite-schema-form-header"><strong>{schema.title}</strong></div>{/if}
+  {#if schema.description}<p class="lite-schema-description">{schema.description}</p>{/if}
 
   <form {action} {method} class="lite-schema-form">
-    {#each properties as field (field.key)}
-      <div class="lite-schema-field">
-        <label for="lite_json_{field.key}" class="lite-label">
-          {field.title} {#if field.required}<span style="color: #ef4444;">*</span>{/if}
-        </label>
-        {#if field.enum}
-          <select id="lite_json_{field.key}" name={field.key} class="lite-select" required={field.required}>
-            {#each field.enum as option (option)}
-              <option value={String(option)} selected={String(value[field.key]) === String(option)}>
-                {option}
-              </option>
-            {/each}
-          </select>
-        {:else if field.type === 'boolean'}
-          <input id="lite_json_{field.key}" type="checkbox" name={field.key} checked={Boolean(value[field.key])} />
-        {:else if field.type === 'number' || field.type === 'integer'}
-          <input id="lite_json_{field.key}" type="number" name={field.key} value={Number(value[field.key] ?? 0)} class="lite-input" required={field.required} />
-        {:else}
-          <input id="lite_json_{field.key}" type="text" name={field.key} value={String(value[field.key] ?? '')} class="lite-input" required={field.required} />
-        {/if}
-      </div>
-    {/each}
+    {#snippet renderField(node: JsonSchema, path: string[], title: string, required = false)}
+      {@const current = readPath(path)}
+      {@const id = `lite_json_${path.join('_')}`}
+      {#if node.type === 'object' || node.properties}
+        <fieldset class="lite-schema-fieldset">
+          <legend>{title}</legend>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#each Object.entries(node.properties ?? {}) as [key, child] (key)}
+            {@render renderField(child, [...path, key], child.title ?? key, node.required?.includes(key) ?? false)}
+          {/each}
+        </fieldset>
+      {:else if node.type === 'array'}
+        {@const items = Array.isArray(current) ? current : []}
+        <fieldset class="lite-schema-fieldset">
+          <legend>{title}</legend>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#each items as _, index (index)}
+            {@render renderField(node.items ?? { type: 'string' }, [...path, String(index)], `${title} ${index + 1}`)}
+            <button type="button" class="lite-btn lite-btn-sm" onclick={() => removeArrayItem(path, index)}>Remove</button>
+          {:else}
+            <span class="lite-hint">No items</span>
+          {/each}
+          <button type="button" class="lite-btn lite-btn-sm" onclick={() => addArrayItem(path, node.items ?? { type: 'string' })}>Add item</button>
+        </fieldset>
+      {:else}
+        <div class="lite-schema-field">
+          <label for={id} class="lite-label">{title}{#if required}<span aria-hidden="true">*</span>{/if}</label>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#if node.enum}
+            <select id={id} required={required} value={String(current ?? '')} onchange={(event) => writePath(path, enumValue(event.currentTarget.value, node.enum))} class="lite-select">
+              <option value="">Select an option</option>
+              {#each node.enum as option (String(option))}<option value={String(option)}>{String(option)}</option>{/each}
+            </select>
+          {:else if node.type === 'boolean'}
+            <input id={id} type="checkbox" checked={Boolean(current)} onchange={(event) => writePath(path, event.currentTarget.checked)} />
+          {:else if node.type === 'number' || node.type === 'integer'}
+            <input id={id} type="number" required={required} value={current === undefined ? '' : String(current)} oninput={(event) => writePath(path, event.currentTarget.value === '' ? undefined : Number(event.currentTarget.value))} class="lite-input" />
+          {:else}
+            <input id={id} type="text" required={required} value={String(current ?? '')} oninput={(event) => writePath(path, event.currentTarget.value)} class="lite-input" />
+          {/if}
+        </div>
+      {/if}
+    {/snippet}
 
+    {#each Object.entries(schema.properties ?? {}) as [key, node] (key)}
+      {@render renderField(node, [key], node.title ?? key, schema.required?.includes(key) ?? false)}
+    {/each}
     <div class="lite-schema-footer">
-      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
-        {submitText}
-      </button>
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">{submitText}</button>
     </div>
   </form>
 </div>
 
 <style>
-  .lite-schema-form-card {
-    background: #ffffff;
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 16px;
-    margin-bottom: 16px;
-  }
-  .lite-schema-form-header {
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e2e8f0;
-    margin-bottom: 12px;
-    font-size: 14px;
-  }
-  .lite-schema-field {
-    margin-bottom: 12px;
-  }
-  .lite-schema-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 12px;
-    border-top: 1px solid #e2e8f0;
-  }
+  .lite-schema-form-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
+  .lite-schema-form-header { padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; font-size: 14px; }
+  .lite-schema-fieldset { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; margin: 0 0 12px; }
+  .lite-schema-field { margin-bottom: 12px; }
+  .lite-schema-fieldset > .lite-schema-field:last-child { margin-bottom: 0; }
+  .lite-schema-footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e2e8f0; }
+  .lite-label { display: block; font-size: 12px; color: #475569; margin-bottom: 4px; }
+  .lite-schema-description, .lite-hint { font-size: 12px; color: #64748b; }
+  .lite-input, .lite-select { width: 100%; }
+  .lite-btn { margin-right: 6px; }
 </style>

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

@@ -1,10 +1,20 @@
+interface JsonSchema {
+    type?: string;
+    title?: string;
+    description?: string;
+    properties?: Record<string, JsonSchema>;
+    items?: JsonSchema;
+    enum?: Array<string | number | boolean | null>;
+    default?: unknown;
+    required?: string[];
+}
 interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
     submitText?: string;
 }
-declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "">;
+declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "value">;
 type LiteJsonSchemaForm = ReturnType<typeof LiteJsonSchemaForm>;
 export default LiteJsonSchemaForm;

package/dist/components/LiteMasterDetailView.svelte

@@ -33,7 +33,7 @@
         {@const isSelected = String(item[idKey]) === String(activeItem?.[idKey])}
         <li class="lite-master-item {isSelected ? 'lite-master-item-active' : ''}">
           <a href="?selectedId={item[idKey]}" class="lite-master-link">
-            {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+            {item[titleKey] ?? item['name'] ?? `Item #${item[idKey]}`}
           </a>
         </li>
       {/each}
@@ -47,7 +47,7 @@
         {@render detailSnippet(activeItem)}
       {:else}
         <div class="lite-detail-content">
-          <h4 style="margin: 0 0 12px 0;">{activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}</h4>
+          <h4 style="margin: 0 0 12px 0;">{activeItem[titleKey] ?? activeItem['name'] ?? `Item #${activeItem[idKey]}`}</h4>
           <table class="lite-table">
             <tbody>
               {#each Object.entries(activeItem) as [k, v] (k)}

package/dist/components/LiteMediaLibraryModal.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import LiteFileInput from './LiteFileInput.svelte';
+
   interface LiteMediaItem {
     id: string;
     name: string;
@@ -33,9 +36,9 @@
     <!-- Upload Section -->
     <div class="lite-media-upload-row">
       <label for="media_upload_input" class="lite-label">Upload New Media:</label>
-      <input id="media_upload_input" type="file" name="files" multiple={multiple} class="lite-file-input" />
+      <LiteFileInput id="media_upload_input" name="files" multiple={multiple} class="lite-file-input" />
       <button type="submit" name="_media_action" value="upload" class="lite-btn lite-btn-sm lite-btn-outline" style="margin-left: 8px;">
-        Upload File
+        {t('common.uploadFile') || 'Upload File'}
       </button>
     </div>
 

package/dist/components/LiteSensitiveDataMask.svelte

@@ -20,7 +20,8 @@
         return val.length >= 10 ? `${val.slice(0, 6)}********${val.slice(-4)}` : '********';
       case 'email': {
         const parts = val.split('@');
-        return parts.length === 2 ? `${parts[0].slice(0, 1)}***@${parts[1]}` : '***@***.***';
+        const [name, domain] = parts;
+        return parts.length === 2 && name && domain ? `${name.slice(0, 1)}***@${domain}` : '***@***.***';
       }
       default:
         return '••••••••';

package/dist/components/LiteShowField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   /**
    * LiteShowField — SSR-compatible field renderer for detail views.
    * Renders a single field value based on its type definition.
@@ -50,13 +52,13 @@
 {:else if field.type === "avatar"}
   <LiteAvatarField {field} value={value as unknown} mode="show" />
 {:else if field.type === "rating"}
-  <LiteRatingField {field} value={value as string | number | null | undefined} mode="show" />
+  <LiteRatingField {field} {...definedOptions({ "value": value as string | number | null | undefined })} mode="show" />
 {:else if field.type === "code"}
-  <LiteCodeField {field} value={value as string | number | Record<string, unknown> | unknown[] | null | undefined} mode="show" />
+  <LiteCodeField {field} {...definedOptions({ "value": value as string | number | Record<string, unknown> | unknown[] | null | undefined })} mode="show" />
 {:else if field.type === "currency"}
-  <LiteCurrencyField {field} value={value as string | number | null | undefined} mode="show" />
+  <LiteCurrencyField {field} {...definedOptions({ "value": value as string | number | null | undefined })} mode="show" />
 {:else if field.type === "phone"}
-  <LitePhoneField {field} value={value as string | number | null | undefined} mode="show" />
+  <LitePhoneField {field} {...definedOptions({ "value": value as string | number | null | undefined })} mode="show" />
 {:else if field.type === "password"}
   <span>••••••••</span>
 {:else if field.type === "color" && value}

package/dist/components/LiteSignaturePad.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import LiteFileInput from './LiteFileInput.svelte';
+
   interface Props {
     name?: string;
     value?: string;
@@ -36,7 +38,7 @@
 
   <div class="sv-lite-sig-actions">
     <form method="POST" action={formAction} enctype="multipart/form-data">
-      <input type="file" name={name} accept="image/*" {disabled} class="sv-lite-sig-file" />
+      <LiteFileInput name={name} accept="image/*" {disabled} class="sv-lite-sig-file" />
       <button type="submit" {disabled} class="sv-lite-sig-btn">Upload Signature</button>
     </form>
   </div>

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -11,13 +11,13 @@
 
   let { status = 'idle', message }: Props = $props();
 
-  const statusConfig: Record<string, { icon: string; color: string; text: string }> = {
+  const statusConfig: Record<NonNullable<Props['status']>, { icon: string; color: string; text: string }> = {
     idle: { icon: '☁', color: '#64748b', text: 'All changes saved' },
     saved: { icon: '✓', color: '#10b981', text: 'Saved' },
     error: { icon: '✕', color: '#ef4444', text: 'Save failed' },
   };
 
-  const cfg = $derived(statusConfig[status] ?? statusConfig.idle);
+  const cfg = $derived(statusConfig[status] ?? statusConfig['idle']);
 </script>
 
 <span class="lite-inline-sm" style="display: inline-flex; align-items: center; font-size: 13px; color: {cfg.color};">

package/dist/components/advanced/LiteToast.svelte

@@ -13,14 +13,14 @@
 
   let { message, type = 'info', dismissUrl }: Props = $props();
 
-  const colors: Record<string, { bg: string; border: string; text: string }> = {
+  const colors: Record<NonNullable<Props['type']>, { bg: string; border: string; text: string }> = {
     success: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },
     error: { bg: '#fef2f2', border: '#fecaca', text: '#991b1b' },
     warning: { bg: '#fffbeb', border: '#fed7aa', text: '#92400e' },
     info: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
   };
 
-  const style = $derived(colors[type] ?? colors.info);
+  const style = $derived(colors[type] ?? colors['info']);
 </script>
 
 <div

package/dist/components/advanced/LiteVirtualTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   /**
    * SSR VirtualTable — Identical to LiteTable.
    * Virtual scrolling (rendering only visible rows) requires JS.
@@ -37,11 +39,10 @@
 <LiteTable
   {records}
   {resource}
-  {currentSort}
+  {...definedOptions({ "currentSort": currentSort })}
   {currentOrder}
-  {currentSearch}
+  {...definedOptions({ "currentSearch": currentSearch })}
   {basePath}
-  {canShow}
-  {canEdit}
-  {canDelete}
+  {...definedOptions({ "canShow": canShow })}
+  {...definedOptions({ canEdit, canDelete })}
 />

package/dist/components/buttons/LiteCloneButton.svelte

@@ -23,6 +23,9 @@
 
 <a
   href={`${basePath}/${resource}/clone/${recordItemId}`}
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.clone') || 'Clone'}
 >

package/dist/components/buttons/LiteCreateButton.svelte

@@ -21,6 +21,9 @@
 
 <a
   href={`${basePath}/${resource}/create`}
+  data-svadmin-button
+  data-variant="default"
+  data-size={size}
   class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.create') || 'Create'}
 >

package/dist/components/buttons/LiteDeleteButton.svelte

@@ -32,6 +32,9 @@
   <span id={`${confirmationId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
   <a
     href={`#${confirmationId}`}
+    data-svadmin-button
+    data-variant="destructive"
+    data-size={size}
     class="lite-btn lite-btn-danger {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.delete') || 'Delete'}
     aria-controls={confirmationId}

package/dist/components/buttons/LiteEditButton.svelte

@@ -23,6 +23,9 @@
 
 <a
   href={`${basePath}/${resource}/edit/${recordItemId}`}
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.edit') || 'Edit'}
 >

package/dist/components/buttons/LiteExportButton.svelte

@@ -21,6 +21,9 @@
 
 <a
   href={`${basePath}/${resource}?action=export`}
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.export') || 'Export'}
 >

package/dist/components/buttons/LiteImportButton.svelte

@@ -2,6 +2,7 @@
   import { t } from '@svadmin/core/i18n';
   import { Upload } from '@lucide/svelte';
   import { liteFragmentId } from '../../fragment-id';
+  import LiteFileInput from '../LiteFileInput.svelte';
 
   interface Props {
     resource: string;
@@ -28,6 +29,9 @@
   <span id={`${importPanelId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
   <a
     href={`#${importPanelId}`}
+    data-svadmin-button
+    data-variant="outline"
+    data-size={size}
     class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''}"
     title={t('common.import') || 'Import'}
     aria-controls={importPanelId}
@@ -41,7 +45,7 @@
   <div id={importPanelId} class="lite-confirm-panel lite-confirm-target" role="dialog" aria-labelledby={importPanelTitleId} tabindex="-1">
     <p id={importPanelTitleId} style="margin: 0 0 8px; font-size: 13px;">{t('common.importData') || 'Import data (CSV/JSON)'}</p>
     <form method="POST" action={`${basePath}/${resource}?/${resource}_import`} enctype="multipart/form-data" class="lite-stack-sm">
-      <input type="file" name="file" accept=".csv,.json" required style="font-size: 13px;" />
+      <LiteFileInput name="file" accept=".csv,.json" required class="lite-import-file-input" />
       <div class="lite-inline-actions lite-justify-end">
         <a href={`#${importPanelId}-closed`} class="lite-btn lite-btn-sm">
           {t('common.cancel') || 'Cancel'}

package/dist/components/buttons/LiteListButton.svelte

@@ -21,6 +21,9 @@
 
 <a
   href={`${basePath}/${resource}`}
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.list') || 'List'}
 >

package/dist/components/buttons/LiteRefreshButton.svelte

@@ -20,6 +20,9 @@
 <!-- svelte-ignore a11y_invalid_attribute -->
 <a
   href=""
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.refresh') || 'Refresh'}
 >

package/dist/components/buttons/LiteSaveButton.svelte

@@ -17,6 +17,9 @@
 
 <button
   type="submit"
+  data-svadmin-button
+  data-variant="default"
+  data-size={size}
   class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.save') || 'Save'}
 >

package/dist/components/buttons/LiteShowButton.svelte

@@ -23,6 +23,9 @@
 
 <a
   href={`${basePath}/${resource}/show/${recordItemId}`}
+  data-svadmin-button
+  data-variant="ghost"
+  data-size={size}
   class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
   title={t('common.show') || 'Show'}
 >

package/dist/components/compatibility/LiteDirectoryUpload.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import LiteFileInput from '../LiteFileInput.svelte';
+
   interface Props {
     name?: string;
     label?: string;
@@ -26,10 +28,9 @@
   <p class="lite-muted">{helpText}</p>
   <div class="lite-form-group">
     <label for={controlId}>{label}</label>
-    <input
+    <LiteFileInput
       id={controlId}
       class="lite-input"
-      type="file"
       {name}
       {accept}
       {disabled}
@@ -39,6 +40,6 @@
   </div>
   <div class="lite-form-group">
     <label for={`${controlId}-zip`}>ZIP archive fallback</label>
-    <input id={`${controlId}-zip`} class="lite-input" type="file" name={zipName} accept=".zip,application/zip" {disabled} />
+    <LiteFileInput id={`${controlId}-zip`} class="lite-input" name={zipName} accept=".zip,application/zip" {disabled} />
   </div>
 </fieldset>

package/dist/components/fields/LiteAvatarField.svelte

@@ -44,7 +44,7 @@
       return value;
     }
     if (value && typeof value === 'object' && 'src' in (value as Record<string, unknown>)) {
-      return String((value as Record<string, unknown>).src ?? '');
+      return String((value as Record<string, unknown>)['src'] ?? '');
     }
     return null;
   });
@@ -55,7 +55,7 @@
       return value;
     }
     if (value && typeof value === 'object' && 'name' in (value as Record<string, unknown>)) {
-      return String((value as Record<string, unknown>).name ?? '');
+      return String((value as Record<string, unknown>)['name'] ?? '');
     }
     return null;
   });
@@ -65,7 +65,7 @@
     if (!trimmed) return '?';
     const parts = trimmed.split(/\s+/);
     if (parts.length >= 2) {
-      return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+      return `${trimmed.charAt(0)}${parts.at(-1)?.charAt(0) ?? ''}`.toUpperCase();
     }
     return trimmed.slice(0, 2).toUpperCase();
   }

package/dist/components/fields/LiteCascader.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
 
@@ -59,11 +61,11 @@
       if (node.children && node.children.length > 0) {
         paths.push(...generatePaths(node.children, nextValues, nextLabels));
       } else {
-        paths.push({
+        paths.push(definedOptions({
           pathValue: nextValues.join('/'),
           pathLabels: nextLabels,
           disabled: node.disabled,
-        });
+        }));
       }
     }
     return paths;

package/dist/components/fields/LiteDateField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
 
   interface Props {
     field: FieldDefinition;
@@ -9,6 +10,7 @@
   }
 
   let { field, value, error = [], mode = 'show' }: Props = $props();
+  const i18n = useTranslation();
   let hasError = $derived(error.length > 0);
 
   function formatDate(v: unknown): string {
@@ -36,6 +38,7 @@
   <div>
     <input
       type="datetime-local"
+      lang={i18n.locale}
       name={field.key}
       id={field.key}
       value={formatDate(value)}