@svadmin/lite 0.10.1 → 0.13.0

package/README.md

@@ -13,7 +13,7 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 **What Lite is:**
 - A **Zero-JS SSR-first admin component suite** designed with an IE11-safe CSS baseline.
 - 100% interoperable with `@svadmin/core` — sharing the same `DataProvider`, `AuthProvider`, `Resource`, and `FieldDefinition` contracts.
-- An architectural companion to `@svadmin/ui` achieving **100% component parity (103/103 components)** through 1:1 server-rendered matches, deliberate semantic fallbacks, or explicit SPA-only classification.
+- An architectural companion to `@svadmin/ui` with tracked server-rendered mappings, semantic fallbacks, and explicit SPA-only classifications in `PARITY.md`. Coverage measures the listed mappings, not a complete public-export inventory or verified behavioral equivalence.
 - **Not** a generic Tailwind-to-IE11 compiler or a full client-side port of shadcn-svelte (which depends on modern browser JS runtimes and CSS custom properties).
 
 `@svadmin/lite` provides a server-rendered fallback that **shares the same DataProvider, AuthProvider, and Resource definitions** — only the rendering layer is different.
@@ -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/LiteFileUpload.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    label: string;
+    id?: string;
+    form?: string;
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** Explicit undefined clears a previously displayed server error. */
+    error?: string | undefined;
+    class?: string;
+  }
+
+  let {
+    name,
+    label,
+    id,
+    form,
+    accept,
+    multiple = false,
+    required = false,
+    disabled = false,
+    error,
+    class: className = '',
+  }: Props = $props();
+
+  const generatedId = $props.id();
+  const controlId = $derived(id ?? generatedId);
+</script>
+
+<div class={`lite-form-group ${className}`}>
+  <label for={controlId}>{label}</label>
+  <!-- 保留可见原生控件，无客户端脚本时仍可显示浏览器选择状态。 -->
+  <input
+    type="file"
+    id={controlId}
+    {name}
+    {form}
+    {accept}
+    {multiple}
+    {required}
+    {disabled}
+    class:lite-input-error={!!error}
+    class="lite-input"
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={error ? `${controlId}-error` : undefined}
+  />
+  {#if error}
+    <p id={`${controlId}-error`} class="lite-error-text" role="alert">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,16 @@
+interface Props {
+    name: string;
+    label: string;
+    id?: string;
+    form?: string;
+    accept?: string;
+    multiple?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** Explicit undefined clears a previously displayed server error. */
+    error?: string | undefined;
+    class?: string;
+}
+declare const LiteFileUpload: import("svelte").Component<Props, {}, "">;
+type LiteFileUpload = ReturnType<typeof LiteFileUpload>;
+export default LiteFileUpload;

package/dist/components/LiteFilterBuilder.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { readFilterForm } from '../filter-form.js';
   import { t } from '@svadmin/core/i18n';
 
   export interface FilterRuleItem {
@@ -9,10 +10,13 @@
     value: unknown;
   }
 
+  type FilterNode =
+    | { kind: 'group'; id: string; operator: 'and' | 'or'; children: FilterNode[] }
+    | { kind: 'rule'; id: string; field: string; operator: CrudOperator; value: unknown };
+
   interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
-    logicalOperator?: 'and' | 'or';
     action?: string;
     method?: 'GET' | 'POST';
     disabled?: boolean;
@@ -22,11 +26,28 @@
   let {
     fields = [],
     filters = [],
-    logicalOperator = 'and',
     action = '',
+    method = 'GET',
     disabled = false,
+    onApply,
   }: Props = $props();
 
+  const formId = $props.id();
+  let formError = $state('');
+
+  function handleSubmit(event: SubmitEvent): void {
+    if (disabled) { event.preventDefault(); return; }
+    // 无回调时保留原生 GET/POST；添加/删除规则仍交给原生服务端 action。
+    if (!onApply || (event.submitter instanceof HTMLButtonElement && event.submitter.name === '_action')) return;
+    event.preventDefault();
+    if (!(event.currentTarget instanceof HTMLFormElement)) return;
+    let next: Filter[];
+    try { next = readFilterForm(filters, availableFields, new FormData(event.currentTarget)); }
+    catch { formError = '筛选条件无效，请检查字段、运算符和值。'; return; }
+    formError = '';
+    onApply(next);
+  }
+
   const operatorOptions: { value: CrudOperator; label: string }[] = [
     { value: 'eq', label: '= 等于' },
     { value: 'ne', label: '!= 不等于' },
@@ -36,170 +57,103 @@
     { value: 'gte', label: '>= 大于等于' },
     { value: 'lt', label: '< 小于' },
     { value: 'lte', label: '<= 小于等于' },
-    { value: 'null', label: '为空 (null)' },
+    { value: 'null', label: '为空' },
     { value: 'nnull', label: '不为空' },
   ];
 
-  // Flatten initial filters or fallback to 1 empty rule
-  const initialRules = $derived.by(() => {
-    if (filters.length > 0) {
-      return filters.map((f, i) => ({
-        id: `rule_${i}`,
-        field: 'field' in f ? String(f.field) : (fields[0]?.key ?? ''),
-        operator: ('operator' in f ? f.operator : 'eq') as CrudOperator,
-        value: 'value' in f ? f.value : '',
-      }));
+  const availableFields = $derived(fields.filter(field => field.filterable !== false));
+
+  function nodeFromFilter(filter: Filter, path: string): FilterNode {
+    if ('field' in filter) {
+      return { kind: 'rule', id: `rule-${path}`, field: filter.field, operator: filter.operator, value: filter.value };
     }
-    return [
-      {
-        id: 'rule_0',
-        field: fields[0]?.key ?? '',
-        operator: 'eq' as CrudOperator,
-        value: '',
-      },
-    ];
-  });
+    return {
+      kind: 'group',
+      id: `group-${path}`,
+      operator: filter.operator,
+      children: filter.value.map((child, index) => nodeFromFilter(child, `${path}-${index}`)),
+    };
+  }
+
+  const nodes = $derived(filters.map((filter, index) => nodeFromFilter(filter, String(index))));
+
+  function readValue(node: FilterNode): unknown {
+    return node.kind === 'rule' ? node.value : undefined;
+  }
+
 </script>
 
 <div class="lite-filter-builder lite-form-group">
   <div class="lite-filter-header">
-    <div class="lite-filter-title">
-      <strong>{t('common.filters') || '高级多条件筛选'}</strong>
-      <select
-        name="logical_op"
-        class="lite-select lite-select-sm"
-        style="width: 120px; display: inline-block; margin-left: 8px;"
-        value={logicalOperator}
-        {disabled}
-      >
-        <option value="and">符合全部 (AND)</option>
-        <option value="or">符合任一 (OR)</option>
-      </select>
-    </div>
-    <div>
-      <button type="submit" name="_action" value="add_filter_rule" class="lite-btn lite-btn-sm" {disabled}>
-        + 添加条件
-      </button>
-    </div>
+    <strong>{t('common.filters') || '高级多条件筛选'}</strong>
+    <button type="submit" form={formId} class="lite-btn lite-btn-primary lite-btn-sm" disabled={disabled}>
+      应用筛选
+    </button>
   </div>
 
-  <div class="lite-filter-rules">
-    {#each initialRules as rule, idx (rule.id)}
-      <div class="lite-filter-row">
-        <!-- Field select -->
-        <select
-          name="filter_field_{idx}"
-          class="lite-select lite-filter-field"
-          value={rule.field}
-          {disabled}
-        >
-          {#each fields as fld (fld.key)}
-            <option value={fld.key}>{fld.label || fld.key}</option>
-          {/each}
-        </select>
-
-        <!-- Operator select -->
-        <select
-          name="filter_op_{idx}"
-          class="lite-select lite-filter-op"
-          value={rule.operator}
-          {disabled}
-        >
-          {#each operatorOptions as op (op.value)}
-            <option value={op.value}>{op.label}</option>
+  {#if formError}<p role="alert">{formError}</p>{/if}
+  <form id={formId} {action} {method} onsubmit={handleSubmit} class="lite-filter-form">
+    {#snippet renderNode(node: FilterNode, path: string, isRoot = false)}
+      {#if node.kind === 'group'}
+        <fieldset class="lite-filter-group" data-testid={isRoot ? 'lite-filter-root' : 'lite-filter-group'}>
+          <legend>
+            <label>
+              逻辑组
+              <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
+                <option value="and">AND (且)</option>
+                <option value="or">OR (或)</option>
+              </select>
+            </label>
+          </legend>
+          {#each node.children as child, index (child.id)}
+            {@render renderNode(child, `${path}.value.${index}`)}
+          {:else}
+            <p class="lite-hint">暂无筛选条件</p>
           {/each}
-        </select>
-
-        <!-- Value input -->
-        {#if rule.operator !== 'null' && rule.operator !== 'nnull'}
-          <input
-            type="text"
-            name="filter_val_{idx}"
-            class="lite-input lite-filter-val"
-            value={String(rule.value ?? '')}
-            placeholder="输入筛选值..."
-            {disabled}
-          />
-        {/if}
-
-        <!-- Remove row button -->
-        <button
-          type="submit"
-          name="_action"
-          value="remove_filter_rule_{idx}"
-          class="lite-btn lite-btn-sm lite-btn-danger"
-          {disabled}
-          title="删除此行条件"
-        >
-          ✕
-        </button>
-      </div>
-    {/each}
-  </div>
+          <button type="submit" name="_action" value={`add_filter_rule:${path}`} class="lite-btn lite-btn-sm" {disabled}>添加条件</button>
+          <button type="submit" name="_action" value={`add_filter_group:${path}`} class="lite-btn lite-btn-sm" {disabled}>添加条件组</button>
+        </fieldset>
+      {:else}
+        <div class="lite-filter-row" data-testid="lite-filter-rule">
+          <select name={`filters[${path}][field]`} value={node.field} {disabled}>
+            {#each availableFields as field (field.key)}<option value={field.key}>{field.label || field.key}</option>{/each}
+          </select>
+          <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
+            {#each operatorOptions as operator (operator.value)}<option value={operator.value}>{operator.label}</option>{/each}
+          </select>
+          {#if node.operator !== 'null' && node.operator !== 'nnull'}
+            {#if availableFields.find(field => field.key === node.field)?.type === 'boolean'}
+              <select name={`filters[${path}][value]`} value={String(readValue(node) ?? '')} {disabled}>
+                <option value="">请选择</option><option value="true">是</option><option value="false">否</option>
+              </select>
+            {:else}
+              <input name={`filters[${path}][value]`} type={availableFields.find(field => field.key === node.field)?.type === 'number' ? 'number' : 'text'} value={String(readValue(node) ?? '')} {disabled} />
+            {/if}
+          {/if}
+          <button type="submit" name="_action" value={`remove_filter_rule:${path}`} class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="删除此行条件">删除</button>
+        </div>
+      {/if}
+    {/snippet}
 
-  <div class="lite-filter-footer">
-    <button type="submit" class="lite-btn lite-btn-primary">
-      应用筛选
-    </button>
-    <a href={action || '?'} class="lite-btn" style="margin-left: 8px;">
-      重置
-    </a>
-  </div>
+    {#if nodes.length === 0}
+      <p class="lite-hint">暂无筛选条件，请先添加规则。</p>
+      <button type="submit" name="_action" value="add_filter_rule:root" class="lite-btn lite-btn-sm" {disabled}>添加条件</button>
+    {:else}
+      {#each nodes as node, index (node.id)}
+        {@render renderNode(node, String(index), node.kind === 'group' && nodes.length === 1)}
+      {/each}
+    {/if}
+  </form>
 </div>
 
 <style>
-  .lite-filter-builder {
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 14px;
-    background: #f8fafc;
-    margin-bottom: 16px;
-  }
-  .lite-filter-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-  .lite-filter-rules {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 12px;
-  }
-  .lite-filter-row {
-    display: flex;
-    align-items: center;
-    background: #ffffff;
-    padding: 8px;
-    border: 1px solid #e2e8f0;
-    border-radius: 4px;
-    margin-bottom: 8px;
-  }
-  .lite-filter-row:last-child {
-    margin-bottom: 0;
-  }
-  .lite-filter-row > * {
-    margin-right: 8px;
-  }
-  .lite-filter-row > *:last-child {
-    margin-right: 0;
-  }
-  .lite-filter-field {
-    flex: 2;
-    min-width: 130px;
-  }
-  .lite-filter-op {
-    flex: 2;
-    min-width: 120px;
-  }
-  .lite-filter-val {
-    flex: 3;
-    min-width: 140px;
-  }
-  .lite-filter-footer {
-    display: flex;
-    align-items: center;
-    border-top: 1px solid #e2e8f0;
-    padding-top: 10px;
-  }
+  .lite-filter-builder { border: 1px solid #cbd5e1; border-radius: 6px; padding: 14px; background: #f8fafc; margin-bottom: 16px; }
+  .lite-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+  .lite-filter-group { border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px; margin-bottom: 8px; background: #fff; }
+  .lite-filter-row { display: flex; align-items: center; padding: 8px; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 8px; background: #fff; }
+  .lite-filter-row > * { min-width: 120px; flex: 1; }
+  .lite-filter-row > * + * { margin-left: 8px; }
+  .lite-filter-row .lite-btn { flex: 0 0 auto; }
+  .lite-hint { color: #64748b; font-size: 12px; }
+  .lite-btn { margin-right: 6px; }
 </style>

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

@@ -8,7 +8,6 @@ export interface FilterRuleItem {
 interface Props {
     fields?: FieldDefinition[];
     filters?: Filter[];
-    logicalOperator?: 'and' | 'or';
     action?: string;
     method?: 'GET' | 'POST';
     disabled?: boolean;

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}