@svadmin/lite 0.10.0 → 0.12.0

package/README.md

@@ -207,24 +207,6 @@ import { createLegacyRedirectHook } from '@svadmin/lite';
 export const handle = createLegacyRedirectHook('/lite');
 ```
 
-### 3b. Optional IE11 polyfill and enhancement
-
-The Lite SSR baseline does not require a polyfill: native links, native forms,
-server actions, and full-page navigation work without browser JavaScript. If
-you enable `enhance.js`, load the small ES5 DOM baseline first:
-
-```html
-<script src="/polyfill.js"></script>
-<script src="/enhance.js"></script>
-```
-
-Copy both assets from the package exports `@svadmin/lite/polyfill.js` and
-`@svadmin/lite/enhance.js` into the application's static directory. The
-published polyfill bundles `core-js/stable` and `whatwg-fetch` for the legacy
-enhancement layer. It does not polyfill WebSocket, WASM, Canvas, or the Svelte
-runtime. Those capabilities must continue to use the documented server
-fallback.
-
 ### 4. Optional legacy-browser metadata
 
 ```html

package/dist/compatibility.js

@@ -14,17 +14,17 @@ function hasFunction(record, key) {
 }
 function supportsCanvas(documentValue, context) {
     const documentRecord = asRecord(documentValue);
-    if (!documentRecord || typeof documentRecord.createElement !== 'function')
+    if (!documentRecord || typeof documentRecord['createElement'] !== 'function')
         return false;
-    const canvas = documentRecord.createElement('canvas');
+    const canvas = documentRecord['createElement']('canvas');
     const canvasRecord = asRecord(canvas);
-    if (!canvasRecord || typeof canvasRecord.getContext !== 'function')
+    if (!canvasRecord || typeof canvasRecord['getContext'] !== 'function')
         return false;
-    return Boolean(canvasRecord.getContext(context));
+    return Boolean(canvasRecord['getContext'](context));
 }
 function supportsDirectoryUpload(environment) {
-    const inputConstructor = asRecord(environment.HTMLInputElement);
-    const prototype = asRecord(inputConstructor?.prototype);
+    const inputConstructor = asRecord(environment['HTMLInputElement']);
+    const prototype = asRecord(inputConstructor?.['prototype']);
     return prototype !== undefined && ('webkitdirectory' in prototype || 'directory' in prototype);
 }
 export const LITE_COMPATIBILITY_CATALOG = [
@@ -56,34 +56,34 @@ export function detectLiteCapabilities(environment) {
     const env = asRecord(explicitEnvironment
         ? environment
         : typeof globalThis === 'undefined' ? undefined : globalThis) ?? {};
-    const navigator = asRecord(env.navigator);
-    const clipboard = asRecord(navigator?.clipboard);
-    const webAssembly = asRecord(env.WebAssembly);
-    const readableStream = asRecord(env.ReadableStream);
+    const navigator = asRecord(env['navigator']);
+    const clipboard = asRecord(navigator?.['clipboard']);
+    const webAssembly = asRecord(env['WebAssembly']);
+    const readableStream = asRecord(env['ReadableStream']);
     return {
-        'canvas-2d': supportsCanvas(env.document, '2d'),
-        webgl: supportsCanvas(env.document, 'webgl'),
+        'canvas-2d': supportsCanvas(env['document'], '2d'),
+        webgl: supportsCanvas(env['document'], 'webgl'),
         wasm: hasFunction(webAssembly, 'instantiate'),
         'wasm-streaming': hasFunction(webAssembly, 'instantiateStreaming'),
-        websocket: typeof env.WebSocket === 'function',
-        'event-source': typeof env.EventSource === 'function',
-        worker: typeof env.Worker === 'function',
+        websocket: typeof env['WebSocket'] === 'function',
+        'event-source': typeof env['EventSource'] === 'function',
+        worker: typeof env['Worker'] === 'function',
         'directory-upload': supportsDirectoryUpload(env),
-        'file-system-access': typeof env.showOpenFilePicker === 'function'
-            || typeof env.showDirectoryPicker === 'function',
+        'file-system-access': typeof env['showOpenFilePicker'] === 'function'
+            || typeof env['showDirectoryPicker'] === 'function',
         clipboard: hasFunction(clipboard, 'writeText'),
-        'broadcast-channel': typeof env.BroadcastChannel === 'function',
-        'intersection-observer': typeof env.IntersectionObserver === 'function',
-        'resize-observer': typeof env.ResizeObserver === 'function',
-        'service-worker': asRecord(navigator?.serviceWorker) !== undefined,
-        'indexed-db': asRecord(env.indexedDB) !== undefined,
-        notifications: typeof env.Notification === 'function',
-        'media-capture': hasFunction(asRecord(navigator?.mediaDevices), 'getUserMedia')
-            || typeof env.MediaRecorder === 'function',
-        'web-rtc': typeof env.RTCPeerConnection === 'function',
-        geolocation: asRecord(navigator?.geolocation) !== undefined,
-        'web-streams': asRecord(env.ReadableStream) !== undefined
-            && (hasFunction(readableStream, 'from') || typeof env.WritableStream === 'function'),
+        'broadcast-channel': typeof env['BroadcastChannel'] === 'function',
+        'intersection-observer': typeof env['IntersectionObserver'] === 'function',
+        'resize-observer': typeof env['ResizeObserver'] === 'function',
+        'service-worker': asRecord(navigator?.['serviceWorker']) !== undefined,
+        'indexed-db': asRecord(env['indexedDB']) !== undefined,
+        notifications: typeof env['Notification'] === 'function',
+        'media-capture': hasFunction(asRecord(navigator?.['mediaDevices']), 'getUserMedia')
+            || typeof env['MediaRecorder'] === 'function',
+        'web-rtc': typeof env['RTCPeerConnection'] === 'function',
+        geolocation: asRecord(navigator?.['geolocation']) !== undefined,
+        'web-streams': asRecord(env['ReadableStream']) !== undefined
+            && (hasFunction(readableStream, 'from') || typeof env['WritableStream'] === 'function'),
     };
 }
 export function resolveLiteCompatibility(capability, support = detectLiteCapabilities()) {

package/dist/components/LiteArrayItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
   import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
+  import LiteFileInput from './LiteFileInput.svelte';
   import { isExplicitBooleanTrue } from '../value-normalization';
 
   interface Props {
@@ -142,10 +143,9 @@
             <input type="hidden" name={fieldName(sub.key)} value={reference} />
           {/each}
         {/if}
-        <input
+        <LiteFileInput
           id={fieldId(sub.key)}
           name={fieldName(sub.key)}
-          type="file"
           class="lite-input"
           required={sub.required
             && !isDraft

package/dist/components/LiteCanvasAnnotation.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import LiteFileInput from './LiteFileInput.svelte';
+
   export interface AnnotationItem {
     id: string;
     type: string;
@@ -50,7 +52,7 @@
   {#if formAction}
     <div class="sv-lite-anno-upload">
       <form method="POST" action={formAction} enctype="multipart/form-data">
-        <input type="file" name="annotatedImage" accept="image/*" class="sv-lite-file-input" />
+        <LiteFileInput name="annotatedImage" accept="image/*" class="sv-lite-file-input" />
         <button type="submit" class="sv-lite-upload-btn">Upload Markup</button>
       </form>
     </div>

package/dist/components/LiteFileInput.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  type Props = Omit<HTMLInputAttributes, 'type' | 'value' | 'files'> & {
+    files?: FileList;
+    label?: string;
+    class?: string;
+    webkitdirectory?: boolean;
+    directory?: boolean;
+  };
+
+  let {
+    files = $bindable(),
+    label,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const selectedFiles = $derived(files ? Array.from(files) : []);
+  const selectedLabel = $derived.by(() => {
+    const firstFile = selectedFiles[0];
+    if (firstFile === undefined) return t('common.noFileChosen') || 'No file chosen';
+    if (selectedFiles.length === 1) return firstFile.name;
+    return t('common.filesSelected', { count: selectedFiles.length }) || `${selectedFiles.length} files selected`;
+  });
+</script>
+
+<span class={`lite-file-picker ${className}`} data-disabled={restProps.disabled ? 'true' : undefined}>
+  <input
+    class="lite-file-picker__native"
+    type="file"
+    bind:files
+    {...restProps}
+  />
+  <span class="lite-file-picker__visual" aria-hidden="true">
+    <span class="lite-file-picker__button">{label ?? (t('common.chooseFile') || 'Choose file')}</span>
+    <span class="lite-file-picker__name">{selectedLabel}</span>
+  </span>
+</span>

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

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type' | 'value' | 'files'> & {
+    files?: FileList;
+    label?: string;
+    class?: string;
+    webkitdirectory?: boolean;
+    directory?: boolean;
+};
+declare const LiteFileInput: import("svelte").Component<Props, {}, "files">;
+type LiteFileInput = ReturnType<typeof LiteFileInput>;
+export default LiteFileInput;

package/dist/components/LiteForm.svelte

@@ -9,6 +9,7 @@
   import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
   import { isExplicitBooleanTrue } from '../value-normalization';
   import LiteArrayField from './LiteArrayField.svelte';
+  import LiteFileInput from './LiteFileInput.svelte';
 
   interface Props {
     fields: FieldDefinition[];
@@ -156,8 +157,7 @@
             {/if}
           </select>
         {:else if inputType === 'file'}
-          <input
-            type="file"
+          <LiteFileInput
             name={field.key}
             id={field.key}
             class="lite-input {hasError ? 'lite-input-error' : ''}"

package/dist/components/LiteImportWizard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
+  import LiteFileInput from './LiteFileInput.svelte';
 
   interface Props {
     resourceName: string;
@@ -25,7 +26,7 @@
   <form {action} {method} enctype="multipart/form-data" class="lite-import-form">
     <div class="lite-file-row">
       <label for="import_file" class="lite-label">Select CSV / JSON file:</label>
-      <input type="file" id="import_file" name="file" accept=".csv,.json" class="lite-input" required />
+      <LiteFileInput id="import_file" name="file" accept=".csv,.json" class="lite-input" required />
     </div>
 
     {#if fields.length > 0}

package/dist/components/LiteJsonSchemaForm.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   interface Props {
     schema: Record<string, unknown>;
     value?: Record<string, unknown>;
@@ -24,23 +26,23 @@
   }
 
   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[]) : [];
+    const propsObj = (schema['properties'] ?? {}) as Record<string, Record<string, unknown>>;
+    const requiredKeys = Array.isArray(schema['required']) ? (schema['required'] as string[]) : [];
 
-    return Object.entries(propsObj).map(([key, propDef]) => ({
+    return Object.entries(propsObj).map(([key, propDef]) => (definedOptions({
       key,
-      title: String(propDef.title ?? key),
-      type: String(propDef.type ?? 'string'),
-      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
+      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),
-    }));
+    })));
   });
 </script>
 
 <div class="lite-schema-form-card">
-  {#if schema.title}
+  {#if schema['title']}
     <div class="lite-schema-form-header">
-      <strong>{schema.title}</strong>
+      <strong>{schema['title']}</strong>
     </div>
   {/if}
 

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;