@vielzeug/refine 1.5.4 → 1.8.0

package/dist/file-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.cjs","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone, matchesAccept } from '@vielzeug/dnd';\nimport {\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  bind,\n  onCleanup,\n  onElement,\n  onEvent,\n  onMounted,\n  useEmit,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport { createInteraction } from '../../headless';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './file-input.css?inline';\n\nconst formatBytes = (bytes: number) => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n\nconst isFileSizeAllowed = (file: File, maxSize?: number) => !maxSize || file.size <= maxSize;\n\nconst isImageFile = (file: File): boolean => file.type.startsWith('image/');\n\n/** File input component properties */\nexport type OreFileInputProps = {\n  /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n  accept?: string;\n  /** Theme color tint */\n  color?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /**\n   * Render selected files as a grid of image thumbnails/previews instead of the default\n   * single-column list. Non-image files fall back to a generic file icon in the same grid.\n   */\n  gallery?: boolean;\n  /** Helper text displayed below the input */\n  helper?: string;\n  /** Input label text */\n  label?: string;\n  /** Max number of files allowed (only used if multiple is true) */\n  'max-files'?: number;\n  /** Max size of a single file in bytes */\n  'max-size'?: number;\n  /** Allow multiple files selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /**\n   * JS-only callback fired with the inner `<input type=\"file\">` element when it\n   * mounts, and with `null` when it unmounts. Intended for composed components\n   * that need imperative access to the raw element.\n   * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Required field */\n  required?: boolean;\n  /** Field size preset */\n  size?: string;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n  /** Emitted when files are added or removed */\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  /** Emitted when a specific file is removed */\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\n/**\n * A file upload field with drag-and-drop support and built-in validation messaging.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @cssprop --file-input-thumb-size - Gallery thumbnail width/height\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Photos\" accept=\"image/*\" multiple gallery />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps>(FILE_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    accept: prop.string(),\n    color: prop.string(),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    gallery: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'max-files': prop.number(0),\n    'max-size': prop.number(0),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    ref: prop.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    size: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreFileInputEvents>();\n\n    // ============================================\n    // State\n    // ============================================\n\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n    const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n    const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n\n    useField({\n      disabled: isDisabled,\n      toFormValue: (fi: File[]) => {\n        if (fi.length === 0) return null;\n\n        const name = props.name.value || 'file';\n        const fd = new FormData();\n\n        for (const file of fi) fd.append(name, file);\n\n        return fd;\n      },\n      value: files,\n    });\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    bind({\n      attr: {\n        'drag-over': () => (isDragging.value ? true : undefined),\n        invalid: () => (isInvalid.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createStableId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = maxSizeLimit.value;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = maxFilesLimit.value;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (isDisabled.value) return;\n\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter(\n        (f) =>\n          matchesAccept(f, acceptVal ? acceptVal.split(',').map((t) => t.trim()) : []) &&\n          isFileSizeAllowed(f, maxSizeLimit.value),\n      );\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit.value > 0 && updated.length > maxFilesLimit.value) {\n        updated = updated.slice(0, maxFilesLimit.value);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n\n    // ============================================\n    // Gallery Preview URLs\n    // ============================================\n    // Object URLs are created lazily (only while `gallery` is enabled) and revoked as soon\n    // as their file is no longer selected, plus unconditionally on disconnect — otherwise\n    // each preview leaks its backing blob for the life of the page.\n    const previewUrls = new Map<File, string>();\n\n    function getPreviewUrl(file: File): string {\n      let url = previewUrls.get(file);\n\n      if (!url) {\n        url = URL.createObjectURL(file);\n        previewUrls.set(file, url);\n      }\n\n      return url;\n    }\n\n    function revokeStalePreviewUrls(activeFiles: File[]): void {\n      const keep = new Set(activeFiles);\n\n      for (const [file, url] of previewUrls) {\n        if (!keep.has(file)) {\n          URL.revokeObjectURL(url);\n          previewUrls.delete(file);\n        }\n      }\n    }\n\n    watch(files, revokeStalePreviewUrls);\n\n    onCleanup(() => {\n      for (const url of previewUrls.values()) URL.revokeObjectURL(url);\n\n      previewUrls.clear();\n    });\n\n    // ============================================\n    // Mount\n    // ============================================\n    // ============================================\n    // Template\n    // ============================================\n    onElement(inputRef, (inp) => {\n      props.ref.value?.(inp);\n\n      const sub = watch(props.ref, (cb) => {\n        cb?.(inp);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    onMounted(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n      let skipNextClick = false;\n      const pressControl = createInteraction({\n        disabled: isDisabled,\n        onPress: () => {\n          inp.click();\n        },\n      });\n\n      // Native input → add files\n      onEvent(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      onEvent(dz, 'click', (e: MouseEvent) => {\n        if (e.target === inp) return;\n\n        if (skipNextClick) {\n          skipNextClick = false;\n\n          return;\n        }\n\n        if (!isDisabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n        skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n      });\n\n      const dropZone = createDropZone({\n        disabled: isDisabled.value,\n        element: dz,\n        onDrop: (droppedFiles) => addFiles(droppedFiles),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.dispose());\n    });\n\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${props.label}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n          :aria-disabled=\"${() => String(isDisabled.value)}\"\n          :aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n          :aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=\"${props.accept}\"\n            ?multiple=\"${props.multiple}\"\n            ?required=\"${props.required}\"\n            ?disabled=\"${isDisabled}\"\n            :name=\"${props.name}\"\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\">\n              <ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n            </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul\n          class=\"${() => (props.gallery.value ? 'file-grid' : 'file-list')}\"\n          part=\"${() => (props.gallery.value ? 'gallery' : null)}\"\n          role=\"list\"\n          aria-label=\"Selected files\"\n          ?hidden=${() => files.value.length === 0}>\n          ${() =>\n            files.value.map((file: File) =>\n              props.gallery.value\n                ? html`\n                    <li class=\"file-card\">\n                      ${\n                        // Decorative: the file name is already announced via the visible\n                        // `.file-card-name` caption below — repeating it as `alt` text would\n                        // duplicate it (and often trips redundant-alt checks, since real\n                        // filenames commonly contain words like \"photo\" or \"image\").\n                        isImageFile(file)\n                          ? // Object URLs use the `blob:` scheme, which ore's attribute-level\n                            // XSS guard blocks unconditionally on `src` (and other\n                            // URL-accepting attributes) — set it as a DOM property via `ref`\n                            // instead, bypassing that string-based check. Safe here: the value\n                            // comes from `URL.createObjectURL(file)` on a real `File` object we\n                            // control, never from untrusted text.\n                            html`<img\n                              class=\"file-thumb\"\n                              alt=\"\"\n                              ref=\"${(el: HTMLImageElement | null) => {\n                                if (el) el.src = getPreviewUrl(file);\n                              }}\" />`\n                          : html`<span class=\"file-thumb file-thumb-generic\" aria-hidden=\"true\">\n                              <ore-icon name=\"file\" size=\"28\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n                            </span>`\n                      }\n                      <span class=\"file-card-name\" title=\"${file.name}\">${file.name}</span>\n                      <button\n                        class=\"file-card-remove\"\n                        type=\"button\"\n                        aria-label=\"${`Remove ${file.name}`}\"\n                        @click=${(e: Event) => removeFile(file, e)}>\n                        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                      </button>\n                    </li>\n                  `\n                : html`\n                    <li class=\"file-item\">\n                      <span class=\"file-icon\" aria-hidden=\"true\">\n                        <ore-icon name=\"file\" size=\"18\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n                      </span>\n                      <span class=\"file-meta\">\n                        <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                        <span class=\"file-size\">${formatBytes(file.size)}</span>\n                      </span>\n                      <button\n                        class=\"file-remove\"\n                        type=\"button\"\n                        aria-label=\"${`Remove ${file.name}`}\"\n                        @click=${(e: Event) => removeFile(file, e)}>\n                        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                      </button>\n                    </li>\n                  `,\n            )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${props.helper}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value ?? ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"file-input.cjs","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone } from '@vielzeug/dnd';\nimport {\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  bind,\n  onCleanup,\n  onElement,\n  onEvent,\n  onMounted,\n  useEmit,\n  when,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { bindRefCallback, createInteraction } from '../../headless';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { createFileQueue, formatBytes, type FileUploadFn } from './file-input-upload';\nimport componentStyles from './file-input.css?inline';\n\nexport type { FileUploadFn, FileUploadState, FileUploadStatus } from './file-input-upload';\n\nconst isImageFile = (file: File): boolean => file.type.startsWith('image/');\n\n/** File input component properties */\nexport type OreFileInputProps = {\n  /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n  accept?: string;\n  /** Theme color tint */\n  color?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /**\n   * Render selected files as a grid of image thumbnails/previews instead of the default\n   * single-column list. Non-image files fall back to a generic file icon in the same grid.\n   */\n  gallery?: boolean;\n  /** Helper text displayed below the input */\n  helper?: string;\n  /** Input label text */\n  label?: string;\n  /** Max number of files allowed (only used if multiple is true) */\n  'max-files'?: number;\n  /** Max size of a single file in bytes */\n  'max-size'?: number;\n  /** Allow multiple files selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /**\n   * JS-only callback fired with the inner `<input type=\"file\">` element when it\n   * mounts, and with `null` when it unmounts. Intended for composed components\n   * that need imperative access to the raw element.\n   * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Required field */\n  required?: boolean;\n  /** Field size preset */\n  size?: string;\n  /**\n   * JS-only upload transport (see `FileUploadFn`). When set, every newly added file starts\n   * uploading immediately and independently — progress/speed/ETA, retry-on-failure, and a\n   * success confirmation card are all driven from here. Omit it to keep the component in its\n   * original picker-only mode (select files, no upload lifecycle).\n   * Set as a JS property: `fileInput.upload = async (file, { onProgress, signal }) => { ... }`.\n   */\n  upload?: FileUploadFn | null;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n  /** Emitted when files are added or removed */\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  /** Emitted when a specific file is removed */\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n  /** Emitted when `upload` rejects for a file (after a fresh attempt or a retry) */\n  'upload-error': { error: unknown; file: File };\n  /** Emitted whenever `upload`'s `onProgress` reports new bytes for a file */\n  'upload-progress': { file: File; loaded: number; total: number };\n  /** Emitted when `upload` resolves for a file */\n  'upload-success': { file: File };\n};\n\n/**\n * A file upload field with drag-and-drop support, built-in validation messaging, and — once a\n * `upload` transport is wired up — a full per-file upload lifecycle: live progress/speed/ETA,\n * retry-on-failure, a success confirmation card, and fully independent handling of concurrent\n * files (one failing never blocks or cancels the others). Picking files with no `upload` set\n * keeps the original, upload-free selection-only behavior.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n * @fires upload-progress - detail: { file: File, loaded: number, total: number }\n * @fires upload-success - detail: { file: File }\n * @fires upload-error - detail: { file: File, error: unknown }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @cssprop --file-input-thumb-size - Gallery thumbnail width/height\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Photos\" accept=\"image/*\" multiple gallery />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n * ```ts\n * // Wire up a real upload transport — progress/retry/success are then handled automatically.\n * // `XMLHttpRequest` is used here (not `fetch`) because it's the only browser API that reports\n * // upload progress; swap in whatever transport the app already uses.\n * const input = document.querySelector('ore-file-input');\n * input.upload = (file, { onProgress, signal, resumeFrom }) =>\n *   new Promise((resolve, reject) => {\n *     const xhr = new XMLHttpRequest();\n *\n *     xhr.upload.addEventListener('progress', (e) => onProgress(resumeFrom + e.loaded, file.size));\n *     xhr.addEventListener('load', () => (xhr.status < 400 ? resolve() : reject(new Error(xhr.statusText))));\n *     xhr.addEventListener('error', () => reject(new Error('Network error')));\n *     signal.addEventListener('abort', () => xhr.abort());\n *\n *     xhr.open('PUT', '/uploads');\n *     if (resumeFrom > 0) xhr.setRequestHeader('Content-Range', `bytes ${resumeFrom}-/${file.size}`);\n *     xhr.send(file);\n *   });\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps>(FILE_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    accept: prop.string(),\n    color: prop.string(),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    gallery: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'max-files': prop.number(0),\n    'max-size': prop.number(0),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    required: prop.bool(false),\n    size: prop.string(),\n    upload: prop.data<FileUploadFn>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreFileInputEvents>();\n\n    // ============================================\n    // State\n    // ============================================\n\n    const isDragging = signal(false);\n    // Set while a \"Replace\" action is waiting for the (shared) native file input's next\n    // `change` — routes that selection into `queue.replaceFile()` instead of `queue.addFiles()`.\n    const replaceTarget = signal<File | null>(null);\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n    const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n    const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n    // File selection + the opt-in upload lifecycle (progress, retry, replace, per-file\n    // isolation) live in `createFileQueue` — see file-input-upload.ts for why they're one unit.\n    const queue = createFileQueue({\n      accept: props.accept,\n      disabled: isDisabled,\n      maxFiles: maxFilesLimit,\n      maxSize: maxSizeLimit,\n      multiple: computed(() => Boolean(props.multiple.value)),\n      onChange: (changedFiles, originalEvent) =>\n        emit('change', { files: changedFiles, originalEvent, value: changedFiles }),\n      onRemove: (file, remainingFiles, originalEvent) =>\n        emit('remove', { file, files: remainingFiles, originalEvent, value: remainingFiles }),\n      onUploadError: (file, error) => emit('upload-error', { error, file }),\n      onUploadProgress: (file, loaded, total) => emit('upload-progress', { file, loaded, total }),\n      onUploadSuccess: (file) => emit('upload-success', { file }),\n      upload: computed(() => props.upload.value ?? undefined),\n    });\n\n    onCleanup(() => queue.dispose());\n\n    // ============================================\n    // Form Integration\n    // ============================================\n\n    useField({\n      disabled: isDisabled,\n      toFormValue: (fi: File[]) => {\n        if (fi.length === 0) return null;\n\n        const name = props.name.value || 'file';\n        const fd = new FormData();\n\n        for (const file of fi) fd.append(name, file);\n\n        return fd;\n      },\n      value: queue.files,\n    });\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    bind({\n      attr: {\n        'drag-over': () => (isDragging.value ? true : undefined),\n        invalid: () => (isInvalid.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createStableId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = maxSizeLimit.value;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = maxFilesLimit.value;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // Replace (\"swap this one file\" — see file-input-upload.ts's `replaceFile`)\n    // ============================================\n    function beginReplace(file: File): void {\n      replaceTarget.value = file;\n      inputRef.value?.click();\n    }\n\n    // ============================================\n    // Gallery Preview URLs\n    // ============================================\n    // Object URLs are created lazily (only while `gallery` is enabled) and revoked as soon\n    // as their file is no longer selected, plus unconditionally on disconnect — otherwise\n    // each preview leaks its backing blob for the life of the page.\n    const previewUrls = new Map<File, string>();\n\n    function getPreviewUrl(file: File): string {\n      let url = previewUrls.get(file);\n\n      if (!url) {\n        url = URL.createObjectURL(file);\n        previewUrls.set(file, url);\n      }\n\n      return url;\n    }\n\n    function revokeStalePreviewUrls(activeFiles: File[]): void {\n      const keep = new Set(activeFiles);\n\n      for (const [file, url] of previewUrls) {\n        if (!keep.has(file)) {\n          URL.revokeObjectURL(url);\n          previewUrls.delete(file);\n        }\n      }\n    }\n\n    watch(queue.files, revokeStalePreviewUrls);\n\n    onCleanup(() => {\n      for (const url of previewUrls.values()) URL.revokeObjectURL(url);\n\n      previewUrls.clear();\n    });\n\n    // ============================================\n    // Mount\n    // ============================================\n    // ============================================\n    // Template\n    // ============================================\n    onElement(inputRef, (inp) => bindRefCallback(props.ref, inp));\n\n    onMounted(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n      let skipNextClick = false;\n      const pressControl = createInteraction({\n        disabled: isDisabled,\n        onPress: () => {\n          inp.click();\n        },\n      });\n\n      // Native input → add files, or — if a \"Replace\" action opened the picker — swap the one\n      // file it targeted instead of appending a new entry.\n      onEvent(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n        const target = replaceTarget.value;\n\n        replaceTarget.value = null;\n\n        if (target && input.files?.[0]) queue.replaceFile(target, input.files[0], e);\n        else if (input.files?.length) queue.addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      onEvent(dz, 'click', (e: MouseEvent) => {\n        if (e.target === inp) return;\n\n        if (skipNextClick) {\n          skipNextClick = false;\n\n          return;\n        }\n\n        if (!isDisabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n        skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n      });\n\n      // `createDropZone` has no way to update `disabled` after creation — recreate the zone\n      // whenever the prop changes instead of capturing a stale snapshot from this one `onMounted`\n      // run. `watch`'s own returned cleanup (not a second `onCleanup`) disposes the current zone\n      // both on the next toggle and on final teardown.\n      watch(\n        isDisabled,\n        (disabled) => {\n          const dropZone = createDropZone({\n            disabled,\n            element: dz,\n            onDrop: (droppedFiles) => queue.addFiles(droppedFiles),\n            onHoverChange: (hovered) => {\n              isDragging.value = hovered;\n            },\n          });\n\n          return () => dropZone.dispose();\n        },\n        { immediate: true },\n      );\n    });\n\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${props.label}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n          :aria-disabled=\"${() => String(isDisabled.value)}\"\n          :aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n          :aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=\"${props.accept}\"\n            ?multiple=\"${props.multiple}\"\n            ?required=\"${props.required}\"\n            ?disabled=\"${isDisabled}\"\n            :name=\"${props.name}\"\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\" :data-status=\"${() => (isInvalid.value ? 'error' : null)}\">\n              ${() =>\n                isInvalid.value\n                  ? html`<ore-icon name=\"alert-circle\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>`\n                  : html`<ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>`}\n            </span>\n            <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a\n                 static \"Drop files here\" during an active drag reads as if the drop target\n                 hasn't noticed the file yet. -->\n            ${when(\n              () => isDragging.value,\n              () => html`<span class=\"dropzone-title dropzone-title-active\">Release to upload</span>`,\n            )}\n            ${when(\n              () => !isDragging.value,\n              () => html`<span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>`,\n            )}\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul\n          class=\"${() => (props.gallery.value ? 'file-grid' : 'file-list')}\"\n          part=\"${() => (props.gallery.value ? 'gallery' : null)}\"\n          role=\"list\"\n          aria-label=\"Selected files\"\n          ?hidden=${() => queue.files.value.length === 0}>\n          ${() =>\n            queue.files.value.map((file: File) =>\n              props.gallery.value\n                ? html`\n                    <li class=\"file-card\" data-status=${() => queue.fileState(file).status}>\n                      <span class=\"file-thumb-frame\">\n                        ${\n                          // Decorative: the file name is already announced via the visible\n                          // `.file-card-name` caption below — repeating it as `alt` text would\n                          // duplicate it (and often trips redundant-alt checks, since real\n                          // filenames commonly contain words like \"photo\" or \"image\").\n                          isImageFile(file)\n                            ? // Object URLs use the `blob:` scheme, which ore's attribute-level\n                              // XSS guard blocks unconditionally on `src` (and other\n                              // URL-accepting attributes) — set it as a DOM property via `ref`\n                              // instead, bypassing that string-based check. Safe here: the value\n                              // comes from `URL.createObjectURL(file)` on a real `File` object we\n                              // control, never from untrusted text.\n                              html`<img\n                                class=\"file-thumb\"\n                                alt=\"\"\n                                ref=\"${(el: HTMLImageElement | null) => {\n                                  if (el) el.src = getPreviewUrl(file);\n                                }}\" />`\n                            : html`<span class=\"file-thumb file-thumb-generic\" aria-hidden=\"true\">\n                                <ore-icon name=\"file\" size=\"28\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n                              </span>`\n                        }\n                        ${when(\n                          () => queue.fileState(file).status === 'success',\n                          () =>\n                            html`<span class=\"file-status-badge file-status-badge-success\" aria-hidden=\"true\">\n                              <ore-icon name=\"check\" size=\"11\" stroke-width=\"3\" aria-hidden=\"true\"></ore-icon>\n                            </span>`,\n                        )}\n                        ${when(\n                          () => queue.fileState(file).status === 'error',\n                          () =>\n                            html`<span class=\"file-status-badge file-status-badge-error\" aria-hidden=\"true\">\n                              <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                            </span>`,\n                        )}\n                        <span class=\"file-card-actions\">\n                          ${when(\n                            () => queue.fileState(file).status === 'error',\n                            () =>\n                              html`<button\n                                class=\"file-card-action\"\n                                type=\"button\"\n                                aria-label=\"${`Retry uploading ${file.name}`}\"\n                                @click=${() => queue.retryUpload(file)}>\n                                <ore-icon name=\"refresh-cw\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                              </button>`,\n                          )}\n                          ${when(\n                            () =>\n                              queue.fileState(file).status === 'success' &&\n                              Boolean(props.multiple.value) &&\n                              Boolean(props.upload.value),\n                            () =>\n                              html`<button\n                                class=\"file-card-action\"\n                                type=\"button\"\n                                aria-label=\"${`Replace ${file.name}`}\"\n                                @click=${() => beginReplace(file)}>\n                                <ore-icon name=\"upload\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                              </button>`,\n                          )}\n                          <button\n                            class=\"file-card-action file-card-remove\"\n                            type=\"button\"\n                            aria-label=\"${`Remove ${file.name}`}\"\n                            @click=${(e: Event) => queue.removeFile(file, e)}>\n                            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                          </button>\n                        </span>\n                      </span>\n                      <span class=\"file-card-name\" title=\"${file.name}\">${file.name}</span>\n                      ${when(\n                        () => queue.fileState(file).status === 'uploading',\n                        () => html`\n                          <ore-progress\n                            type=\"linear\"\n                            size=\"sm\"\n                            :value=${() => queue.uploadPercent(file)}\n                            label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n                          <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n                        `,\n                      )}\n                      ${when(\n                        () => queue.fileState(file).status === 'error',\n                        () => html`<span class=\"file-error-text\">${() => queue.fileState(file).error}</span>`,\n                      )}\n                    </li>\n                  `\n                : html`\n                    <li class=\"file-item\" data-status=${() => queue.fileState(file).status}>\n                      <span class=\"file-icon\" aria-hidden=\"true\">\n                        <ore-icon\n                          name=${() => queue.statusIconName(file)}\n                          size=\"18\"\n                          stroke-width=\"1.75\"\n                          aria-hidden=\"true\"></ore-icon>\n                      </span>\n                      <span class=\"file-meta\">\n                        <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                        ${when(\n                          () => queue.fileState(file).status === 'uploading',\n                          () => html`\n                            <ore-progress\n                              type=\"linear\"\n                              size=\"sm\"\n                              :value=${() => queue.uploadPercent(file)}\n                              label=${() => `${queue.uploadPercent(file)}%`}></ore-progress>\n                            <span class=\"file-progress-meta\">${() => queue.uploadMetaText(file)}</span>\n                          `,\n                        )}\n                        ${when(\n                          () => queue.fileState(file).status === 'error',\n                          () => html`<span class=\"file-error-text\">${() => queue.fileState(file).error}</span>`,\n                        )}\n                        ${when(\n                          () => queue.fileState(file).status === 'idle' || queue.fileState(file).status === 'success',\n                          () => html`<span class=\"file-size\">${formatBytes(file.size)}</span>`,\n                        )}\n                      </span>\n                      <span class=\"file-actions\">\n                        ${when(\n                          () => queue.fileState(file).status === 'error',\n                          () =>\n                            html`<button\n                              class=\"file-action\"\n                              type=\"button\"\n                              aria-label=\"${`Retry uploading ${file.name}`}\"\n                              @click=${() => queue.retryUpload(file)}>\n                              <ore-icon name=\"refresh-cw\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                            </button>`,\n                        )}\n                        ${when(\n                          () =>\n                            queue.fileState(file).status === 'success' &&\n                            Boolean(props.multiple.value) &&\n                            Boolean(props.upload.value),\n                          () =>\n                            html`<button\n                              class=\"file-action\"\n                              type=\"button\"\n                              aria-label=\"${`Replace ${file.name}`}\"\n                              @click=${() => beginReplace(file)}>\n                              <ore-icon name=\"upload\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                            </button>`,\n                        )}\n                        <button\n                          class=\"file-remove\"\n                          type=\"button\"\n                          aria-label=\"${`Remove ${file.name}`}\"\n                          @click=${(e: Event) => queue.removeFile(file, e)}>\n                          <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                        </button>\n                      </span>\n                    </li>\n                  `,\n            )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${props.helper}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value ?? ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/file-input.js

@@ -2,177 +2,174 @@ import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
 import { forcedColorsFocusMixin as t } from "./styles/mixins/theme.css.js";
 import { fieldMixins as n } from "./styles/index.js";
 import { FILE_INPUT_SIZE_PRESET as r } from "./shared/size-presets.js";
-import { createInteraction as i } from "./headless/keyboard.js";
-import { FORM_CTX as a, useFormContext as o } from "./inputs/shared/form-context.js";
-import s from "./inputs/file-input/file-input.css.js";
-import { bind as c, createStableId as l, define as u, html as d, inject as f, onCleanup as p, onElement as m, onEvent as h, onMounted as g, prop as _, ref as v, useEmit as y } from "@vielzeug/ore";
-import { computed as b, signal as x, watch as S } from "@vielzeug/ripple";
-import { useField as C } from "@vielzeug/ore/forms";
-import { createDropZone as w, matchesAccept as T } from "@vielzeug/dnd";
+import { bindRefCallback as i } from "./headless/ref-callback.js";
+import { createInteraction as a } from "./headless/keyboard.js";
+import { FORM_CTX as o, useFormContext as s } from "./inputs/shared/form-context.js";
+import { createFileQueue as c, formatBytes as l } from "./inputs/file-input/file-input-upload.js";
+import u from "./inputs/file-input/file-input.css.js";
+import { bind as d, createStableId as f, define as p, html as m, inject as h, onCleanup as g, onElement as _, onEvent as v, onMounted as y, prop as b, ref as x, useEmit as S, when as C } from "@vielzeug/ore";
+import { computed as w, signal as T, watch as E } from "@vielzeug/ripple";
+import { useField as D } from "@vielzeug/ore/forms";
+import { createDropZone as O } from "@vielzeug/dnd";
 //#region src/inputs/file-input/file-input.ts
-var E = (e) => {
-	if (e === 0) return "0 B";
-	let t = 1024, n = [
-		"B",
-		"KB",
-		"MB",
-		"GB",
-		"TB"
-	], r = Math.floor(Math.log(e) / Math.log(t));
-	return parseFloat((e / t ** r).toFixed(1)) + " " + n[r];
-}, D = (e, t) => !t || e.size <= t, O = (e) => e.type.startsWith("image/"), k = "ore-file-input";
-u(k, {
+var k = (e) => e.type.startsWith("image/"), A = "ore-file-input";
+p(A, {
 	formAssociated: !0,
 	props: {
-		accept: _.string(),
-		color: _.string(),
-		disabled: _.bool(!1),
-		error: _.string(),
-		gallery: _.bool(!1),
-		helper: _.string(),
-		label: _.string(),
-		"max-files": _.number(0),
-		"max-size": _.number(0),
-		multiple: _.bool(!1),
-		name: _.string(),
-		ref: _.json(void 0),
-		required: _.bool(!1),
-		size: _.string()
+		accept: b.string(),
+		color: b.string(),
+		disabled: b.bool(!1),
+		error: b.string(),
+		gallery: b.bool(!1),
+		helper: b.string(),
+		label: b.string(),
+		"max-files": b.number(0),
+		"max-size": b.number(0),
+		multiple: b.bool(!1),
+		name: b.string(),
+		ref: b.data(),
+		required: b.bool(!1),
+		size: b.string(),
+		upload: b.data()
 	},
 	setup(e) {
-		let t = y(), n = x([]), r = x(!1), s = o(e, f(a)), u = s.disabled, _ = b(() => e["max-files"].value ?? 0), k = b(() => e["max-size"].value ?? 0);
-		C({
-			disabled: u,
+		let t = S(), n = T(!1), r = T(null), u = s(e, h(o)), p = u.disabled, b = w(() => e["max-files"].value ?? 0), A = w(() => e["max-size"].value ?? 0), j = c({
+			accept: e.accept,
+			disabled: p,
+			maxFiles: b,
+			maxSize: A,
+			multiple: w(() => !!e.multiple.value),
+			onChange: (e, n) => t("change", {
+				files: e,
+				originalEvent: n,
+				value: e
+			}),
+			onRemove: (e, n, r) => t("remove", {
+				file: e,
+				files: n,
+				originalEvent: r,
+				value: n
+			}),
+			onUploadError: (e, n) => t("upload-error", {
+				error: n,
+				file: e
+			}),
+			onUploadProgress: (e, n, r) => t("upload-progress", {
+				file: e,
+				loaded: n,
+				total: r
+			}),
+			onUploadSuccess: (e) => t("upload-success", { file: e }),
+			upload: w(() => e.upload.value ?? void 0)
+		});
+		g(() => j.dispose()), D({
+			disabled: p,
 			toFormValue: (t) => {
 				if (t.length === 0) return null;
 				let n = e.name.value || "file", r = new FormData();
 				for (let e of t) r.append(n, e);
 				return r;
 			},
-			value: n
+			value: j.files
 		});
-		let A = b(() => !!e.error.value);
-		c({ attr: {
-			"drag-over": () => r.value ? !0 : void 0,
-			invalid: () => A.value ? !0 : void 0,
-			size: s.size
+		let M = w(() => !!e.error.value);
+		d({ attr: {
+			"drag-over": () => n.value ? !0 : void 0,
+			invalid: () => M.value ? !0 : void 0,
+			size: u.size
 		} });
-		let j = l("file-input"), M = `label-${j}`, N = `helper-${j}`, P = `error-${j}`, F = v(), I = v(), L = b(() => {
+		let N = f("file-input"), P = `label-${N}`, F = `helper-${N}`, I = `error-${N}`, L = x(), R = x(), z = w(() => {
 			let t = [];
 			e.accept.value && t.push(e.accept.value.split(",").map((e) => e.trim()).join(", "));
-			let n = k.value;
-			n > 0 && t.push(`max ${E(n)}`);
-			let r = _.value;
+			let n = A.value;
+			n > 0 && t.push(`max ${l(n)}`);
+			let r = b.value;
 			return r > 0 && t.push(`up to ${r} file${r === 1 ? "" : "s"}`), t.join(" · ");
 		});
-		function R(r, i) {
-			if (u.value) return;
-			let a = e.accept.value, o = !!e.multiple.value, s = Array.from(r);
-			o || (s = s.slice(0, 1)), s = s.filter((e) => T(e, a ? a.split(",").map((e) => e.trim()) : []) && D(e, k.value));
-			let c = o ? [...n.value] : [];
-			for (let e of s) c.includes(e) || c.push(e);
-			_.value > 0 && c.length > _.value && (c = c.slice(0, _.value)), n.value = c, t("change", {
-				files: n.value,
-				originalEvent: i,
-				value: n.value
-			});
-		}
-		function z(e, r) {
-			n.value = n.value.filter((t) => t !== e), t("remove", {
-				file: e,
-				files: n.value,
-				originalEvent: r,
-				value: n.value
-			}), t("change", {
-				files: n.value,
-				originalEvent: r,
-				value: n.value
-			});
-		}
-		let B = /* @__PURE__ */ new Map();
-		function V(e) {
-			let t = B.get(e);
-			return t || (t = URL.createObjectURL(e), B.set(e, t)), t;
+		function B(e) {
+			r.value = e, R.value?.click();
 		}
+		let V = /* @__PURE__ */ new Map();
 		function H(e) {
+			let t = V.get(e);
+			return t || (t = URL.createObjectURL(e), V.set(e, t)), t;
+		}
+		function U(e) {
 			let t = new Set(e);
-			for (let [e, n] of B) t.has(e) || (URL.revokeObjectURL(n), B.delete(e));
+			for (let [e, n] of V) t.has(e) || (URL.revokeObjectURL(n), V.delete(e));
 		}
-		return S(n, H), p(() => {
-			for (let e of B.values()) URL.revokeObjectURL(e);
-			B.clear();
-		}), m(I, (t) => {
-			e.ref.value?.(t);
-			let n = S(e.ref, (e) => {
-				e?.(t);
-			});
-			return () => {
-				n.dispose(), e.ref.value?.(null);
-			};
-		}), g(() => {
-			let e = I.value, t = F.value, n = !1, a = i({
-				disabled: u,
+		return E(j.files, U), g(() => {
+			for (let e of V.values()) URL.revokeObjectURL(e);
+			V.clear();
+		}), _(R, (t) => i(e.ref, t)), y(() => {
+			let e = R.value, t = L.value, i = !1, o = a({
+				disabled: p,
 				onPress: () => {
 					e.click();
 				}
 			});
-			h(e, "change", (e) => {
-				let t = e.target;
-				t.files?.length && R(Array.from(t.files), e), t.value = "";
-			}), h(t, "click", (t) => {
+			v(e, "change", (e) => {
+				let t = e.target, n = r.value;
+				r.value = null, n && t.files?.[0] ? j.replaceFile(n, t.files[0], e) : t.files?.length && j.addFiles(Array.from(t.files), e), t.value = "";
+			}), v(t, "click", (t) => {
 				if (t.target !== e) {
-					if (n) {
-						n = !1;
+					if (i) {
+						i = !1;
 						return;
 					}
-					u.value || e.click();
-				}
-			}), h(t, "keydown", (e) => {
-				n = a.handleKeydown(e) && e.key === "Enter";
-			});
-			let o = w({
-				disabled: u.value,
-				element: t,
-				onDrop: (e) => R(e),
-				onHoverChange: (e) => {
-					r.value = e;
+					p.value || e.click();
 				}
-			});
-			p(() => o.dispose());
-		}), d`
+			}), v(t, "keydown", (e) => {
+				i = o.handleKeydown(e) && e.key === "Enter";
+			}), E(p, (e) => {
+				let r = O({
+					disabled: e,
+					element: t,
+					onDrop: (e) => j.addFiles(e),
+					onHoverChange: (e) => {
+						n.value = e;
+					}
+				});
+				return () => r.dispose();
+			}, { immediate: !0 });
+		}), m`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${M}" part="label" ?hidden=${() => !e.label.value}
+        <label class="label-outside" id="${P}" part="label" ?hidden=${() => !e.label.value}
           >${e.label}</label
         >
         <div
           class="dropzone"
           part="dropzone"
-          ref=${F}
+          ref=${L}
           role="button"
-          :tabindex="${() => u.value ? "-1" : "0"}"
-          :aria-disabled="${() => String(u.value)}"
+          :tabindex="${() => p.value ? "-1" : "0"}"
+          :aria-disabled="${() => String(p.value)}"
           :aria-label="${() => e.label.value ? null : "File upload drop zone"}"
-          :aria-labelledby="${() => e.label.value ? M : null}"
-          aria-describedby="${N}">
+          :aria-labelledby="${() => e.label.value ? P : null}"
+          aria-describedby="${F}">
           <input
             type="file"
-            ref=${I}
+            ref=${R}
             part="input"
-            id="${j}"
+            id="${N}"
             :accept="${e.accept}"
             ?multiple="${e.multiple}"
             ?required="${e.required}"
-            ?disabled="${u}"
+            ?disabled="${p}"
             :name="${e.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true">
-              <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
+            <span class="dropzone-icon" aria-hidden="true" :data-status="${() => M.value ? "error" : null}">
+              ${() => M.value ? m`<ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>` : m`<ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>`}
             </span>
-            <span class="dropzone-title">Drop files here or <u>click to browse</u></span>
-            <span class="dropzone-hint" ?hidden=${() => !L.value}>${L}</span>
+            <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a
+                 static "Drop files here" during an active drag reads as if the drop target
+                 hasn't noticed the file yet. -->
+            ${C(() => n.value, () => m`<span class="dropzone-title dropzone-title-active">Release to upload</span>`)}
+            ${C(() => !n.value, () => m`<span class="dropzone-title">Drop files here or <u>click to browse</u></span>`)}
+            <span class="dropzone-hint" ?hidden=${() => !z.value}>${z}</span>
           </div>
         </div>
         <ul
@@ -180,54 +177,116 @@ u(k, {
           part="${() => e.gallery.value ? "gallery" : null}"
           role="list"
           aria-label="Selected files"
-          ?hidden=${() => n.value.length === 0}>
-          ${() => n.value.map((t) => e.gallery.value ? d`
-                    <li class="file-card">
-                      ${O(t) ? d`<img
-                              class="file-thumb"
-                              alt=""
-                              ref="${(e) => {
-			e && (e.src = V(t));
-		}}" />` : d`<span class="file-thumb file-thumb-generic" aria-hidden="true">
-                              <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
-                            </span>`}
+          ?hidden=${() => j.files.value.length === 0}>
+          ${() => j.files.value.map((t) => e.gallery.value ? m`
+                    <li class="file-card" data-status=${() => j.fileState(t).status}>
+                      <span class="file-thumb-frame">
+                        ${k(t) ? m`<img
+                                class="file-thumb"
+                                alt=""
+                                ref="${(e) => {
+			e && (e.src = H(t));
+		}}" />` : m`<span class="file-thumb file-thumb-generic" aria-hidden="true">
+                                <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
+                              </span>`}
+                        ${C(() => j.fileState(t).status === "success", () => m`<span class="file-status-badge file-status-badge-success" aria-hidden="true">
+                              <ore-icon name="check" size="11" stroke-width="3" aria-hidden="true"></ore-icon>
+                            </span>`)}
+                        ${C(() => j.fileState(t).status === "error", () => m`<span class="file-status-badge file-status-badge-error" aria-hidden="true">
+                              <ore-icon name="alert-circle" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                            </span>`)}
+                        <span class="file-card-actions">
+                          ${C(() => j.fileState(t).status === "error", () => m`<button
+                                class="file-card-action"
+                                type="button"
+                                aria-label="${`Retry uploading ${t.name}`}"
+                                @click=${() => j.retryUpload(t)}>
+                                <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                              </button>`)}
+                          ${C(() => j.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => m`<button
+                                class="file-card-action"
+                                type="button"
+                                aria-label="${`Replace ${t.name}`}"
+                                @click=${() => B(t)}>
+                                <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                              </button>`)}
+                          <button
+                            class="file-card-action file-card-remove"
+                            type="button"
+                            aria-label="${`Remove ${t.name}`}"
+                            @click=${(e) => j.removeFile(t, e)}>
+                            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                          </button>
+                        </span>
+                      </span>
                       <span class="file-card-name" title="${t.name}">${t.name}</span>
-                      <button
-                        class="file-card-remove"
-                        type="button"
-                        aria-label="${`Remove ${t.name}`}"
-                        @click=${(e) => z(t, e)}>
-                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                      </button>
+                      ${C(() => j.fileState(t).status === "uploading", () => m`
+                          <ore-progress
+                            type="linear"
+                            size="sm"
+                            :value=${() => j.uploadPercent(t)}
+                            label=${() => `${j.uploadPercent(t)}%`}></ore-progress>
+                          <span class="file-progress-meta">${() => j.uploadMetaText(t)}</span>
+                        `)}
+                      ${C(() => j.fileState(t).status === "error", () => m`<span class="file-error-text">${() => j.fileState(t).error}</span>`)}
                     </li>
-                  ` : d`
-                    <li class="file-item">
+                  ` : m`
+                    <li class="file-item" data-status=${() => j.fileState(t).status}>
                       <span class="file-icon" aria-hidden="true">
-                        <ore-icon name="file" size="18" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                        <ore-icon
+                          name=${() => j.statusIconName(t)}
+                          size="18"
+                          stroke-width="1.75"
+                          aria-hidden="true"></ore-icon>
                       </span>
                       <span class="file-meta">
                         <span class="file-name" title="${t.name}">${t.name}</span>
-                        <span class="file-size">${E(t.size)}</span>
+                        ${C(() => j.fileState(t).status === "uploading", () => m`
+                            <ore-progress
+                              type="linear"
+                              size="sm"
+                              :value=${() => j.uploadPercent(t)}
+                              label=${() => `${j.uploadPercent(t)}%`}></ore-progress>
+                            <span class="file-progress-meta">${() => j.uploadMetaText(t)}</span>
+                          `)}
+                        ${C(() => j.fileState(t).status === "error", () => m`<span class="file-error-text">${() => j.fileState(t).error}</span>`)}
+                        ${C(() => j.fileState(t).status === "idle" || j.fileState(t).status === "success", () => m`<span class="file-size">${l(t.size)}</span>`)}
+                      </span>
+                      <span class="file-actions">
+                        ${C(() => j.fileState(t).status === "error", () => m`<button
+                              class="file-action"
+                              type="button"
+                              aria-label="${`Retry uploading ${t.name}`}"
+                              @click=${() => j.retryUpload(t)}>
+                              <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                            </button>`)}
+                        ${C(() => j.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => m`<button
+                              class="file-action"
+                              type="button"
+                              aria-label="${`Replace ${t.name}`}"
+                              @click=${() => B(t)}>
+                              <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                            </button>`)}
+                        <button
+                          class="file-remove"
+                          type="button"
+                          aria-label="${`Remove ${t.name}`}"
+                          @click=${(e) => j.removeFile(t, e)}>
+                          <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                        </button>
                       </span>
-                      <button
-                        class="file-remove"
-                        type="button"
-                        aria-label="${`Remove ${t.name}`}"
-                        @click=${(e) => z(t, e)}>
-                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                      </button>
                     </li>
                   `)}
         </ul>
-        <div class="helper-text" id="${N}" part="helper" ?hidden=${() => A.value || !e.helper.value}>
+        <div class="helper-text" id="${F}" part="helper" ?hidden=${() => M.value || !e.helper.value}>
           ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${P}"
+          id="${I}"
           role="alert"
           part="error"
-          ?hidden=${() => !A.value}>
+          ?hidden=${() => !M.value}>
           ${() => e.error.value ?? ""}
         </div>
       </div>
@@ -238,10 +297,10 @@ u(k, {
 		...n,
 		e(r),
 		t(".dropzone"),
-		s
+		u
 	]
 });
 //#endregion
-export { k as FILE_INPUT_TAG };
+export { A as FILE_INPUT_TAG };
 
 //# sourceMappingURL=file-input.js.map