@vmz/ui 0.3.6 → 0.3.8

package/src/components/Upload.vmz

@@ -1,1289 +1,1394 @@
-<template>
-    <div data-vmz-ui="upload" :data-vmz-upload-destination="destination" :data-vmz-upload-mode="selectionMode" :data-vmz-upload-directory="directoryAttr" :data-vmz-upload-chunk="chunkAttr" :data-vmz-upload-session="sessionAttr" :data-invalid="invalidAttr" :data-vmz-upload-status="status" :data-progress="progress" :onDragEnter="onDragEnter" :onDragOver="onDragOver" :onDragLeave="onDragLeave" :onDrop="onDrop" :class='"vmz-ui-upload" + (dragOver ? " is-dragover" : "")'>
-        <label v-if="label" :for="controlId" class="vmz-ui-upload__label">
-            {{ label }}
-        </label>
-        <div data-vmz-upload="zone" class="vmz-ui-upload__zone">
-            <input :id="controlId" type="file" :accept="accept" :multiple="multiple" :disabled="inputDisabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :data-vmz-upload-directory="directoryAttr" @change="onPick" class="vmz-ui-upload__control" />
-            <p data-vmz-upload="hint" class="vmz-ui-upload__hint">
-                {{ zoneHint }}
-            </p>
-        </div>
-        <ul v-if="hasItems" data-vmz-upload="queue" class="vmz-ui-upload__queue">
-            <li v-for="item in queue" :key="item.key" :data-vmz-upload-item="item.key" :data-status="item.status" class="vmz-ui-upload__item">
-                <span data-vmz-upload="file" class="vmz-ui-upload__item-name">
-                    {{ item.name }}
-                </span>
-                <span class="vmz-ui-upload__item-meta">
-                    {{ item.meta }}
-                </span>
-                <span v-if="item.showBar" aria-hidden="true" class="vmz-ui-upload__item-bar" :style="item.barStyle" />
-            </li>
-        </ul>
-        <p v-if="emptyHint" data-vmz-upload="empty" class="vmz-ui-upload__empty">
-            {{ emptyText }}
-        </p>
-        <div v-if="showProgress" data-vmz-upload="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="progress" :aria-label="progressLabel" class="vmz-ui-upload__progress">
-            <div class="vmz-ui-upload__bar" :style="progressStyle" />
-            <span data-vmz-upload="pct" class="vmz-ui-upload__pct">
-                {{ progressLabel }}
-            </span>
-        </div>
-        <p v-if="statusText" data-vmz-upload="status" class="vmz-ui-upload__status">
-            {{ statusText }}
-        </p>
-        <p v-if="resultText" data-vmz-upload="result" class="vmz-ui-upload__result">
-            {{ resultText }}
-        </p>
-        <div v-if="showActions" data-vmz-upload="actions" class="vmz-ui-upload__actions">
-            <button v-if="canCancel" type="button" data-vmz-upload="cancel" @click="onCancelClick" class="vmz-ui-upload__cancel">
-                {{ cancelLabel }}
-            </button>
-            <button v-if="canResume" type="button" data-vmz-upload="resume" @click="onResumeClick" class="vmz-ui-upload__resume">
-                {{ resumeLabel }}
-            </button>
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-upload__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-upload__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-upload {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-upload__label {
-    font: inherit;
-    font-weight: 600;
-}
-
-.vmz-ui-upload__zone {
-    position: relative;
-    border: 1px dashed var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-}
-
-.vmz-ui-upload.is-dragover .vmz-ui-upload__zone {
-    border-color: var(--vmz-action-primary-background);
-    background: color-mix(
-        in srgb,
-        var(--vmz-action-primary-background) 8%,
-        var(--vmz-surface-paper)
-    );
-}
-
-.vmz-ui-upload__control {
-    font: inherit;
-    width: 100%;
-    padding: 0.125rem 0;
-    color: inherit;
-    outline: none;
-}
-
-.vmz-ui-upload__control:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-upload__control:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-upload__hint {
-    margin: 0.375rem 0 0;
-    font-size: 0.88rem;
-    color: var(--vmz-text-steel);
-}
-
-.vmz-ui-upload__queue {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-}
-
-.vmz-ui-upload__item {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 0.125rem 0.75rem;
-    padding: 0.375rem 0.5rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-}
-
-.vmz-ui-upload__item-name {
-    font-family: var(--vmz-font-mono);
-    font-size: 0.88rem;
-    color: var(--vmz-text-ink);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.vmz-ui-upload__item-meta {
-    font-size: 0.8rem;
-    color: var(--vmz-text-steel);
-    white-space: nowrap;
-}
-
-.vmz-ui-upload__item-bar {
-    grid-column: 1 / -1;
-    height: 0.35rem;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-action-primary-background);
-    min-width: 0.25rem;
-    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
-}
-
-.vmz-ui-upload[data-invalid="true"] .vmz-ui-upload__label {
-    color: var(--vmz-status-danger-foreground);
-}
-
-.vmz-ui-upload__empty {
-    margin: 0;
-    color: var(--vmz-text-steel);
-    font-size: 0.9em;
-}
-
-.vmz-ui-upload__progress {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0;
-}
-
-.vmz-ui-upload__bar {
-    height: 0.45rem;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-action-primary-background);
-    min-width: 0.25rem;
-    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
-}
-
-.vmz-ui-upload__pct {
-    font-family: var(--vmz-font-mono);
-    font-size: 0.8rem;
-    color: var(--vmz-text-steel);
-    white-space: nowrap;
-}
-
-.vmz-ui-upload__status {
-    margin: 0;
-    font-size: 0.9em;
-    color: var(--vmz-text-steel);
-}
-
-.vmz-ui-upload[data-vmz-upload-status="done"] .vmz-ui-upload__status,
-.vmz-ui-upload[data-vmz-upload-status="done"] .vmz-ui-upload__result {
-    color: var(--vmz-status-success-foreground);
-}
-
-.vmz-ui-upload[data-vmz-upload-status="error"] .vmz-ui-upload__status {
-    color: var(--vmz-status-danger-foreground);
-}
-
-.vmz-ui-upload__result {
-    margin: 0;
-    font-family: var(--vmz-font-mono);
-    font-size: 0.88rem;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-upload__actions {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.vmz-ui-upload__cancel,
-.vmz-ui-upload__resume {
-    font: inherit;
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-upload__cancel:focus-visible,
-.vmz-ui-upload__resume:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-upload__resume {
-    border-color: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-upload__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-upload__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .vmz-ui-upload__bar,
-    .vmz-ui-upload__item-bar {
-        transition: none;
-    }
-}
-</style>
-<script client>
-/**
- * VMZ UI — Upload (all-in-one).
- * Owns selection UI, constraints, queue, progress/cancel, and destination transport
- * (client | server | object). Parent owns result value + destination config only.
- * No useUpload / createUpload; no cloud SDK inside @vmz/ui.
- * destination=server + chunkSize>0 → init / chunk PUT / complete + same-session pause/resume.
- *
- * Only destination config + result callbacks are `public` props.
- * Presentation/queue/xhr state stay private so parent re-renders cannot wipe them.
- */
-export default class Upload {
-    public label: string = "";
-    public description: string = "";
-    /** Form-level validation message from parent. */
-    public error: string = "";
-    public emptyText: string = "No file selected";
-    public accept: string = "";
-    public disabled: boolean = false;
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-upload";
-    public descriptionId: string = "vmz-upload-desc";
-    public errorId: string = "vmz-upload-err";
-    public describedBy: string = "";
-    /** client | server | object */
-    public destination: string = "server";
-    /** ServerRoute / URL for destination=server (multipart) or resumable prefix (chunkSize>0) */
-    public action: string = "";
-    /** multipart field name */
-    public fieldName: string = "file";
-    public multiple: boolean = false;
-    public directory: boolean = false;
-    public maxCount: number = 1;
-    public maxBytes: number = 0;
-    /**
-     * When >0 and destination=server: chunked resumable transport against action prefix
-     * (`/init`, `/chunk`, `/status`, `/complete`). Thin gate is single-file same-session.
-     */
-    public chunkSize: number = 0;
-    /**
-     * object destination: (file) => Promise<{ uploadUrl, headers?, objectKey? }>
-     * Must bind #server-issued short-lived credentials only.
-     */
-    public onPresign:
-        | ((file: File) => Promise<{
-              uploadUrl: string;
-              headers?: Record<string, string>;
-              objectKey?: string;
-          }>)
-        | null = null;
-    /** Parent receives serializable results (no File handles required). */
-    public onValue: ((items: UploadValueItem[]) => void) | null = null;
-    /** Parent mirrors overall status for form fixture / submit gates. */
-    public onStatus: ((status: string) => void) | null = null;
-    public cancelLabel: string = "Cancel upload";
-    public resumeLabel: string = "Resume upload";
-    // presentation (component-owned — NOT public props)
-    status: string = "idle";
-    progress: string = "0";
-    progressLabel: string = "";
-    progressStyle: string = "width:0%";
-    showProgress: boolean = false;
-    statusText: string = "";
-    resultText: string = "";
-    canCancel: boolean = false;
-    canResume: boolean = false;
-    showActions: boolean = false;
-    emptyHint: boolean = true;
-    hasItems: boolean = false;
-    inputDisabled: boolean = false;
-    dragOver: boolean = false;
-    selectionMode: string = "single";
-    directoryAttr: string = "false";
-    chunkAttr: string = "0";
-    sessionAttr: string = "";
-    zoneHint: string = "Choose a file or drop it here";
-    /** @type {{ key: string, name: string, meta: string, status: string, showBar: boolean, barStyle: string }[]} */
-    queue: {
-        key: string;
-        name: string;
-        meta: string;
-        status: string;
-        showBar: boolean;
-        barStyle: string;
-    }[] = [];
-    _seenClearToken = 0;
-    _clearToken = 0;
-    /** Parent increments to clear internal queue (form reset). Binder assignment must clear immediately. */
-    get clearToken() {
-        return this._clearToken;
-    }
-    set clearToken(v) {
-        const n = Number(v) || 0;
-        this._clearToken = n;
-        if (n !== this._seenClearToken) {
-            this._seenClearToken = n;
-            this.clearInternal(true);
-        }
-    }
-    /** @type {XMLHttpRequest | null} */
-    _xhr = null;
-    /** @type {File[]} */
-    _files = [];
-    /** @type {UploadValueItem[]} */
-    _values = [];
-    _gen = 0;
-    /** Resumable session (same File handle / same page). */
-    _uploadId = "";
-    _chunkTotal = 0;
-    /** @type {number[]} */
-    _received = [];
-    _activeChunkSize = 0;
-    onMount() {
-        this.applyDirectoryAttr();
-        this.syncChunkAttr();
-    }
-    onPick(ev) {
-        this.syncClearToken();
-        this.applyDirectoryAttr();
-        const input = ev && ev.target;
-        const list = input && input.files ? input.files : null;
-        // Ignore empty change (including the synthetic event from clearing input.value
-        // after a successful pick) — otherwise in-flight uploads get abort/cleared.
-        if (!list || !list.length) return;
-        this.ingestFileList(list);
-        // Allow re-selecting the same path without retaining the FileList on the input.
-        if (input) input.value = "";
-    }
-    onDragEnter(ev) {
-        if (this.inputDisabled || this.disabled) return;
-        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-        this.dragOver = true;
-    }
-    onDragOver(ev) {
-        if (this.inputDisabled || this.disabled) return;
-        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-        this.dragOver = true;
-    }
-    onDragLeave() {
-        this.dragOver = false;
-    }
-    onDrop(ev) {
-        if (this.inputDisabled || this.disabled) return;
-        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-        this.dragOver = false;
-        const list = ev && ev.dataTransfer ? ev.dataTransfer.files : null;
-        this.ingestFileList(list);
-    }
-    onCancelClick() {
-        this.cancelActive(true);
-    }
-    onResumeClick() {
-        if (this.status !== "paused" || !this._uploadId || !this._files.length) return;
-        this._gen += 1;
-        const gen = this._gen;
-        this.runDestination(gen);
-    }
-    syncClearToken() {
-        const token = Number(this.clearToken) || 0;
-        if (token !== this._seenClearToken) {
-            this._seenClearToken = token;
-            this.clearInternal(false);
-        }
-    }
-    syncChunkAttr() {
-        const n = Math.max(0, Number(this.chunkSize) || 0);
-        this.chunkAttr = String(n);
-        this.sessionAttr = this._uploadId
-            ? `${this._received.length}/${this._chunkTotal || 0}:${this._uploadId}`
-            : "";
-    }
-    applyDirectoryAttr() {
-        this.directoryAttr = this.directory ? "true" : "false";
-        this.selectionMode = this.directory ? "directory" : this.multiple ? "multiple" : "single";
-        this.zoneHint = this.directory
-            ? "Choose a folder or drop files here"
-            : this.multiple
-              ? "Choose files or drop them here"
-              : "Choose a file or drop it here";
-        // Native directory picker (UA-specific).
-        const el = typeof document !== "undefined" ? document.getElementById(this.controlId) : null;
-        if (el && "webkitdirectory" in el) {
-            try {
-                el.webkitdirectory = !!this.directory;
-                el.multiple = !!(this.multiple || this.directory);
-            } catch {}
-        }
-    }
-    /**
-     * @param {FileList | File[] | null} list
-     */
-    ingestFileList(list) {
-        this.syncClearToken();
-        this.applyDirectoryAttr();
-        this.syncChunkAttr();
-        if (this.disabled) return;
-        const files = listToFiles(list);
-        if (!files.length) {
-            this.clearInternal(false);
-            this.emitValue([]);
-            return;
-        }
-        const maxCount = Math.max(1, Number(this.maxCount) || 1);
-        const capped =
-            this.multiple || this.directory ? files.slice(0, maxCount) : files.slice(0, 1);
-        if ((this.multiple || this.directory) && files.length > maxCount) {
-            this.failAll(`At most ${maxCount} file(s)`);
-            return;
-        }
-        const maxBytes = Number(this.maxBytes) || 0;
-        for (const f of capped) {
-            const acceptErr = acceptError(f, this.accept);
-            if (acceptErr) {
-                this.failAll(acceptErr);
-                return;
-            }
-            if (maxBytes > 0 && Number(f.size) > maxBytes) {
-                this.failAll(`File too large (max ${maxBytes} bytes)`);
-                return;
-            }
-        }
-        const chunkSize = Math.max(0, Number(this.chunkSize) || 0);
-        if (chunkSize > 0 && capped.length !== 1) {
-            this.failAll("Resumable chunk upload supports one file per session");
-            return;
-        }
-        this.cancelActive(false);
-        this.resetSession();
-        this._files = capped;
-        this._gen += 1;
-        const gen = this._gen;
-        this._values = [];
-        this.queue = capped.map((f, i) => ({
-            key: `f-${gen}-${i}`,
-            name: String(f.name || `file-${i}`),
-            meta: formatBytes(f.size),
-            status: "pending",
-            showBar: false,
-            barStyle: "width:0%",
-        }));
-        this.hasItems = this.queue.length > 0;
-        this.emptyHint = false;
-        this.inputDisabled = true;
-        this.canResume = false;
-        this.showActions = false;
-        this.runDestination(gen);
-    }
-    /**
-     * @param {number} gen
-     */
-    async runDestination(gen) {
-        const dest = String(this.destination || "server").toLowerCase();
-        if (dest === "client") {
-            await this.runClient(gen);
-            return;
-        }
-        if (dest === "object") {
-            await this.runObject(gen);
-            return;
-        }
-        const chunkSize = Math.max(0, Number(this.chunkSize) || 0);
-        if (chunkSize > 0) {
-            await this.runServerResumable(gen, chunkSize);
-            return;
-        }
-        await this.runServer(gen);
-    }
-    /**
-     * @param {number} gen
-     */
-    async runClient(gen) {
-        if (gen !== this._gen) return;
-        this.setOverall("uploading", "Preparing…", true, false);
-        const values = [];
-        for (let i = 0; i < this._files.length; i++) {
-            if (gen !== this._gen) return;
-            const file = this._files[i];
-            const pct = Math.round(((i + 1) / this._files.length) * 100);
-            this.patchItem(i, {
-                status: "done",
-                showBar: true,
-                barStyle: `width:${pct}%`,
-                meta: `${formatBytes(file.size)} · local`,
-            });
-            this.setProgress(pct);
-            values.push({
-                name: String(file.name || ""),
-                size: Number(file.size) || 0,
-                type: String(file.type || ""),
-                destination: "client",
-                id: `client-${gen}-${i}`,
-                bytes: Number(file.size) || 0,
-                /** Local File handle for in-tab tools (checksum, etc.). Not serialized. */
-                file,
-            });
-        }
-        if (gen !== this._gen) return;
-        this._values = values;
-        this.finishOk(values);
-    }
-    /**
-     * @param {number} gen
-     */
-    async runServer(gen) {
-        if (gen !== this._gen) return;
-        const action = String(this.action || "").trim();
-        if (!action) {
-            this.failAll("Upload action URL required");
-            return;
-        }
-        // Sequential single-XHR for thin gate; multi-file appends all parts then one request.
-        this.setOverall("uploading", "Uploading…", true, true);
-        this.setProgress(0);
-        for (let i = 0; i < this.queue.length; i++) {
-            this.patchItem(i, {
-                status: "uploading",
-                showBar: true,
-                barStyle: "width:0%",
-            });
-        }
-        const form = new FormData();
-        const field = String(this.fieldName || "file");
-        if (this._files.length === 1) {
-            const file = this._files[0];
-            form.append(field, file, file.name);
-            form.append("name", file.name);
-        } else {
-            for (const file of this._files) {
-                form.append(field, file, file.name);
-            }
-        }
-        const xhr = new XMLHttpRequest();
-        this._xhr = xhr;
-        const result = await xhrSend(xhr, "POST", action, form, (pct) => {
-            if (gen !== this._gen) return;
-            this.setProgress(pct);
-            for (let i = 0; i < this.queue.length; i++) {
-                this.patchItem(i, { barStyle: `width:${pct}%` });
-            }
-        });
-        if (gen !== this._gen) return;
-        this._xhr = null;
-        if (result.aborted) {
-            this.markCancelled();
-            return;
-        }
-        if (result.error) {
-            this.failAll(result.error);
-            return;
-        }
-        const body = result.body;
-        if (!(result.status >= 200 && result.status < 300) || !body || !body.ok) {
-            this.failAll((body && body.error) || `Upload failed (${result.status || "network"})`);
-            return;
-        }
-        // Single-file shape { ok, id, bytes, name } or multi { ok, items: [...] }
-        const values = [];
-        if (Array.isArray(body.items)) {
-            for (let i = 0; i < body.items.length; i++) {
-                const it = body.items[i] || {};
-                values.push({
-                    name: String(it.name || (this._files[i] && this._files[i].name) || ""),
-                    size: Number(
-                        it.bytes || it.size || (this._files[i] && this._files[i].size) || 0,
-                    ),
-                    type: String(it.contentType || ""),
-                    destination: "server",
-                    id: String(it.id || ""),
-                    bytes: Number(it.bytes || it.size || 0),
-                    headHex: it.headHex ? String(it.headHex) : "",
-                });
-            }
-        } else {
-            values.push({
-                name: String(body.name || (this._files[0] && this._files[0].name) || ""),
-                size: Number(
-                    body.bytes || body.reportedSize || (this._files[0] && this._files[0].size) || 0,
-                ),
-                type: String(body.contentType || ""),
-                destination: "server",
-                id: String(body.id || ""),
-                bytes: Number(body.bytes || 0),
-                headHex: body.headHex ? String(body.headHex) : "",
-            });
-        }
-        for (let i = 0; i < this.queue.length; i++) {
-            this.patchItem(i, {
-                status: "done",
-                showBar: true,
-                barStyle: "width:100%",
-                meta: `${formatBytes(values[i] && values[i].bytes)} · uploaded`,
-            });
-        }
-        this._values = values;
-        this.finishOk(values);
-    }
-    /**
-     * Chunked server upload: POST init → PUT chunk(s) → POST complete.
-     * Cancel → paused (keeps uploadId + received); Resume continues missing indexes.
-     * @param {number} gen
-     * @param {number} chunkSize
-     */
-    async runServerResumable(gen, chunkSize) {
-        if (gen !== this._gen) return;
-        const base = String(this.action || "")
-            .trim()
-            .replace(/\/+$/, "");
-        if (!base) {
-            this.failAll("Upload action URL required");
-            return;
-        }
-        const file = this._files[0];
-        if (!file) {
-            this.failAll("No file for resumable upload");
-            return;
-        }
-        this._activeChunkSize = chunkSize;
-        this.setOverall("uploading", this._uploadId ? "Resuming…" : "Uploading…", true, true);
-        this.canResume = false;
-        this.showActions = true;
-        this.patchItem(0, {
-            status: "uploading",
-            showBar: true,
-            barStyle: "width:0%",
-        });
-        if (!this._uploadId) {
-            const initXhr = new XMLHttpRequest();
-            this._xhr = initXhr;
-            const initResult = await xhrSendJson(initXhr, "POST", `${base}/init`, {
-                name: String(file.name || ""),
-                size: Number(file.size) || 0,
-                type: String(file.type || ""),
-                chunkSize,
-            });
-            if (gen !== this._gen) return;
-            this._xhr = null;
-            if (initResult.aborted) {
-                this.markPaused();
-                return;
-            }
-            if (
-                initResult.error ||
-                !(initResult.status >= 200 && initResult.status < 300) ||
-                !initResult.body ||
-                !initResult.body.ok
-            ) {
-                this.failAll(
-                    (initResult.body && initResult.body.error) ||
-                        initResult.error ||
-                        `Init failed (${initResult.status || "network"})`,
-                );
-                return;
-            }
-            this._uploadId = String(initResult.body.uploadId || "");
-            this._chunkTotal =
-                Number(initResult.body.chunkTotal) ||
-                Math.ceil((Number(file.size) || 0) / chunkSize) ||
-                1;
-            this._received = [];
-            this.syncChunkAttr();
-            if (!this._uploadId) {
-                this.failAll("Init returned no uploadId");
-                return;
-            }
-        } else {
-            const statusXhr = new XMLHttpRequest();
-            this._xhr = statusXhr;
-            const statusResult = await xhrSendJson(statusXhr, "POST", `${base}/status`, {
-                uploadId: this._uploadId,
-            });
-            if (gen !== this._gen) return;
-            this._xhr = null;
-            if (statusResult.aborted) {
-                this.markPaused();
-                return;
-            }
-            if (
-                statusResult.error ||
-                !(statusResult.status >= 200 && statusResult.status < 300) ||
-                !statusResult.body ||
-                !statusResult.body.ok
-            ) {
-                this.failAll(
-                    (statusResult.body && statusResult.body.error) ||
-                        statusResult.error ||
-                        `Status failed (${statusResult.status || "network"})`,
-                );
-                return;
-            }
-            this._received = Array.isArray(statusResult.body.received)
-                ? statusResult.body.received.map((n) => Number(n)).filter((n) => Number.isFinite(n))
-                : [];
-            this._chunkTotal = Number(statusResult.body.chunkTotal) || this._chunkTotal;
-            this.syncChunkAttr();
-        }
-        const total = Math.max(
-            1,
-            this._chunkTotal || Math.ceil((Number(file.size) || 0) / chunkSize) || 1,
-        );
-        this._chunkTotal = total;
-        const receivedSet = new Set(this._received);
-        this.setProgress(Math.round((receivedSet.size / total) * 100));
-        this.patchItem(0, {
-            barStyle: `width:${Math.round((receivedSet.size / total) * 100)}%`,
-            meta: `${receivedSet.size}/${total} chunks`,
-        });
-        for (let index = 0; index < total; index++) {
-            if (gen !== this._gen) return;
-            if (receivedSet.has(index)) continue;
-            const start = index * chunkSize;
-            const end = Math.min(Number(file.size) || 0, start + chunkSize);
-            const blob = file.slice(start, end);
-            const xhr = new XMLHttpRequest();
-            this._xhr = xhr;
-            const result = await xhrSend(
-                xhr,
-                "PUT",
-                `${base}/chunk`,
-                blob,
-                (pct) => {
-                    if (gen !== this._gen) return;
-                    const overall = Math.round(((receivedSet.size + pct / 100) / total) * 100);
-                    this.setProgress(overall);
-                    this.patchItem(0, { barStyle: `width:${overall}%` });
-                },
-                {
-                    "content-type": "application/octet-stream",
-                    "x-vmz-upload-id": this._uploadId,
-                    "x-vmz-chunk-index": String(index),
-                    "x-vmz-chunk-total": String(total),
-                },
-            );
-            if (gen !== this._gen) return;
-            this._xhr = null;
-            if (result.aborted) {
-                this.markPaused();
-                return;
-            }
-            if (
-                result.error ||
-                !(result.status >= 200 && result.status < 300) ||
-                !result.body ||
-                !result.body.ok
-            ) {
-                this.failAll(
-                    (result.body && result.body.error) ||
-                        result.error ||
-                        `Chunk ${index} failed (${result.status || "network"})`,
-                );
-                return;
-            }
-            this._received = Array.isArray(result.body.received)
-                ? result.body.received.map((n) => Number(n)).filter((n) => Number.isFinite(n))
-                : this._received.concat([index]);
-            receivedSet.add(index);
-            for (const n of this._received) receivedSet.add(n);
-            this.syncChunkAttr();
-            const pct = Math.round((receivedSet.size / total) * 100);
-            this.setProgress(pct);
-            this.patchItem(0, {
-                barStyle: `width:${pct}%`,
-                meta: `${receivedSet.size}/${total} chunks`,
-            });
-        }
-        if (gen !== this._gen) return;
-        const completeXhr = new XMLHttpRequest();
-        this._xhr = completeXhr;
-        const completeResult = await xhrSendJson(completeXhr, "POST", `${base}/complete`, {
-            uploadId: this._uploadId,
-        });
-        if (gen !== this._gen) return;
-        this._xhr = null;
-        if (completeResult.aborted) {
-            this.markPaused();
-            return;
-        }
-        if (
-            completeResult.error ||
-            !(completeResult.status >= 200 && completeResult.status < 300) ||
-            !completeResult.body ||
-            !completeResult.body.ok
-        ) {
-            this.failAll(
-                (completeResult.body && completeResult.body.error) ||
-                    completeResult.error ||
-                    `Complete failed (${completeResult.status || "network"})`,
-            );
-            return;
-        }
-        const body = completeResult.body;
-        const values = [
-            {
-                name: String(body.name || file.name || ""),
-                size: Number(body.bytes || body.size || file.size || 0),
-                type: String(body.contentType || file.type || ""),
-                destination: "server",
-                id: String(body.id || ""),
-                bytes: Number(body.bytes || body.size || 0),
-                headHex: body.headHex ? String(body.headHex) : "",
-                uploadId: this._uploadId,
-                chunks: total,
-            },
-        ];
-        this.patchItem(0, {
-            status: "done",
-            showBar: true,
-            barStyle: "width:100%",
-            meta: `${formatBytes(values[0].bytes)} · ${total} chunks`,
-        });
-        this.resetSession();
-        this._values = values;
-        this.finishOk(values);
-    }
-    /**
-     * @param {number} gen
-     */
-    async runObject(gen) {
-        if (gen !== this._gen) return;
-        if (typeof this.onPresign !== "function") {
-            this.failAll("onPresign callback required for object destination");
-            return;
-        }
-        this.setOverall("uploading", "Uploading…", true, true);
-        const values = [];
-        for (let i = 0; i < this._files.length; i++) {
-            if (gen !== this._gen) return;
-            const file = this._files[i];
-            this.patchItem(i, {
-                status: "uploading",
-                showBar: true,
-                barStyle: "width:0%",
-            });
-            let signed;
-            try {
-                signed = await this.onPresign(file);
-            } catch (err) {
-                this.failAll(err instanceof Error ? err.message : String(err || "presign failed"));
-                return;
-            }
-            if (gen !== this._gen) return;
-            const url = signed && signed.uploadUrl ? String(signed.uploadUrl) : "";
-            if (!url) {
-                this.failAll("presign returned no uploadUrl");
-                return;
-            }
-            const xhr = new XMLHttpRequest();
-            this._xhr = xhr;
-            const headers = (signed && signed.headers) || {};
-            const result = await xhrSend(
-                xhr,
-                "PUT",
-                url,
-                file,
-                (pct) => {
-                    if (gen !== this._gen) return;
-                    const overall = Math.round(((i + pct / 100) / this._files.length) * 100);
-                    this.setProgress(overall);
-                    this.patchItem(i, { barStyle: `width:${pct}%` });
-                },
-                headers,
-            );
-            if (gen !== this._gen) return;
-            this._xhr = null;
-            if (result.aborted) {
-                this.markCancelled();
-                return;
-            }
-            if (result.error || !(result.status >= 200 && result.status < 300)) {
-                this.failAll(
-                    result.error || `Object upload failed (${result.status || "network"})`,
-                );
-                return;
-            }
-            const objectKey = String((signed && signed.objectKey) || file.name || "");
-            values.push({
-                name: String(file.name || ""),
-                size: Number(file.size) || 0,
-                type: String(file.type || ""),
-                destination: "object",
-                id: objectKey,
-                bytes: Number(file.size) || 0,
-                objectKey,
-            });
-            this.patchItem(i, {
-                status: "done",
-                showBar: true,
-                barStyle: "width:100%",
-                meta: `${formatBytes(file.size)} · object`,
-            });
-        }
-        this._values = values;
-        this.finishOk(values);
-    }
-    /**
-     * @param {UploadValueItem[]} values
-     */
-    finishOk(values) {
-        this.setProgress(100);
-        this.status = "done";
-        this.statusText = "Upload complete";
-        this.showProgress = true;
-        this.canCancel = false;
-        this.canResume = false;
-        this.showActions = false;
-        this.inputDisabled = false;
-        const first = values[0];
-        if (values.length === 1 && first) {
-            const prefix =
-                first.destination === "client"
-                    ? "client"
-                    : first.destination === "object"
-                      ? "object"
-                      : "attachment";
-            const head = first.headHex ? ` head:${first.headHex}` : "";
-            const chunkNote = first.chunks ? ` chunks:${first.chunks}` : "";
-            this.resultText = `${prefix}:${first.id} (${first.bytes || 0} bytes)${head}${chunkNote}`;
-        } else {
-            this.resultText = `${values.length} file(s) ready`;
-        }
-        this.emitStatus();
-        this.emitValue(values);
-    }
-    /**
-     * @param {string} message
-     */
-    failAll(message) {
-        this.cancelActive(false);
-        this.resetSession();
-        this.status = "error";
-        this.statusText = message || "Upload failed";
-        this.showProgress = false;
-        this.canCancel = false;
-        this.canResume = false;
-        this.showActions = false;
-        this.inputDisabled = false;
-        this.resultText = "";
-        this._values = [];
-        for (let i = 0; i < this.queue.length; i++) {
-            this.patchItem(i, {
-                status: "error",
-                showBar: false,
-            });
-        }
-        this.emitStatus();
-        this.emitValue([]);
-    }
-    markCancelled() {
-        this.status = "cancelled";
-        this.statusText = "Upload cancelled";
-        this.showProgress = false;
-        this.canCancel = false;
-        this.canResume = false;
-        this.showActions = false;
-        this.inputDisabled = false;
-        this.resultText = "";
-        this._values = [];
-        this.resetSession();
-        this.emitStatus();
-        this.emitValue([]);
-    }
-    markPaused() {
-        this.status = "paused";
-        this.statusText = "Upload paused — resume to continue";
-        this.showProgress = true;
-        this.canCancel = false;
-        this.canResume = !!this._uploadId;
-        this.showActions = this.canResume;
-        this.inputDisabled = false;
-        this.resultText = "";
-        this._values = [];
-        this.syncChunkAttr();
-        this.patchItem(0, {
-            status: "paused",
-            meta: `${this._received.length}/${this._chunkTotal || 0} chunks`,
-        });
-        this.emitStatus();
-        this.emitValue([]);
-    }
-    resetSession() {
-        this._uploadId = "";
-        this._chunkTotal = 0;
-        this._received = [];
-        this._activeChunkSize = 0;
-        this.syncChunkAttr();
-    }
-    /**
-     * @param {boolean} mark
-     */
-    cancelActive(mark) {
-        const xhr = this._xhr;
-        this._xhr = null;
-        this._gen += 1;
-        if (xhr) {
-            try {
-                xhr.abort();
-            } catch {}
-        }
-        if (mark && this.status === "uploading") {
-            if (this._uploadId && this._activeChunkSize > 0) {
-                this.markPaused();
-            } else {
-                this.markCancelled();
-            }
-        }
-    }
-    /**
-     * @param {boolean} emit
-     */
-    clearInternal(emit) {
-        this.cancelActive(false);
-        this.resetSession();
-        this._files = [];
-        this._values = [];
-        this.queue = [];
-        this.hasItems = false;
-        this.emptyHint = true;
-        this.status = "idle";
-        this.statusText = "";
-        this.resultText = "";
-        this.showProgress = false;
-        this.canCancel = false;
-        this.canResume = false;
-        this.showActions = false;
-        this.inputDisabled = !!this.disabled;
-        this.setProgress(0);
-        this.dragOver = false;
-        this.applyDirectoryAttr();
-        this.emitStatus();
-        if (emit) this.emitValue([]);
-    }
-    /**
-     * @param {string} status
-     * @param {string} text
-     * @param {boolean} showProgress
-     * @param {boolean} canCancel
-     */
-    setOverall(status, text, showProgress, canCancel) {
-        this.status = status;
-        this.statusText = text;
-        this.showProgress = showProgress;
-        this.canCancel = canCancel;
-        this.canResume = false;
-        this.showActions = canCancel;
-        this.inputDisabled = status === "uploading" || !!this.disabled;
-        this.emitStatus();
-    }
-    /**
-     * @param {number} pct
-     */
-    setProgress(pct) {
-        const n = Math.max(0, Math.min(100, Number(pct) || 0));
-        this.progress = String(n);
-        this.progressLabel = `${n}%`;
-        this.progressStyle = `width:${n}%`;
-    }
-    /**
-     * @param {number} index
-     * @param {Partial<{ status: string, meta: string, showBar: boolean, barStyle: string }>} patch
-     */
-    patchItem(index, patch) {
-        const cur = this.queue[index];
-        if (!cur) return;
-        const next = Object.assign({}, cur, patch);
-        const copy = this.queue.slice();
-        copy[index] = next;
-        this.queue = copy;
-    }
-    /**
-     * @param {UploadValueItem[]} items
-     */
-    emitValue(items) {
-        if (typeof this.onValue === "function") this.onValue(items);
-    }
-    emitStatus() {
-        if (typeof this.onStatus === "function") this.onStatus(this.status);
-    }
-}
-/**
- * @typedef {{
- *   name: string,
- *   size: number,
- *   type: string,
- *   destination: string,
- *   id: string,
- *   bytes: number,
- *   objectKey?: string,
- *   headHex?: string,
- *   uploadId?: string,
- *   chunks?: number
- * }} UploadValueItem
- */
-/**
- * @param {FileList | File[] | null | undefined} list
- * @returns {File[]}
- */
-function listToFiles(list) {
-    if (!list) return [];
-    if (Array.isArray(list)) return list.filter(Boolean);
-    const out = [];
-    for (let i = 0; i < list.length; i++) out.push(list[i]);
-    return out;
-}
-/**
- * @param {File} file
- * @param {string} accept
- */
-function acceptError(file, accept) {
-    const raw = String(accept || "").trim();
-    if (!raw) return "";
-    const name = String(file.name || "").toLowerCase();
-    const type = String(file.type || "").toLowerCase();
-    const parts = raw
-        .split(",")
-        .map((s) => s.trim().toLowerCase())
-        .filter(Boolean);
-    for (const p of parts) {
-        if (p.startsWith(".")) {
-            if (name.endsWith(p)) return "";
-        } else if (p.endsWith("/*")) {
-            const prefix = p.slice(0, -1);
-            if (type.startsWith(prefix)) return "";
-        } else if (p === type) {
-            return "";
-        }
-    }
-    return `File type not allowed (${raw})`;
-}
-/**
- * @param {number} n
- */
-function formatBytes(n) {
-    const v = Number(n) || 0;
-    if (v < 1024) return `${v} B`;
-    if (v < 1024 * 1024) return `${(v / 1024).toFixed(1)} KB`;
-    return `${(v / (1024 * 1024)).toFixed(1)} MB`;
-}
-/**
- * @param {XMLHttpRequest} xhr
- * @param {string} method
- * @param {string} url
- * @param {FormData | Blob | File} body
- * @param {(pct: number) => void} onProgress
- * @param {Record<string, string>} [headers]
- */
-function xhrSend(xhr, method, url, body, onProgress, headers) {
-    return new Promise((resolve) => {
-        xhr.open(method, url);
-        if (headers) {
-            for (const k of Object.keys(headers)) {
-                try {
-                    xhr.setRequestHeader(k, headers[k]);
-                } catch {}
-            }
-        }
-        xhr.upload.onprogress = (ev) => {
-            if (!ev || !ev.lengthComputable || !ev.total) return;
-            onProgress(Math.round((100 * ev.loaded) / ev.total));
-        };
-        xhr.onabort = () =>
-            resolve({
-                aborted: true,
-                status: 0,
-                body: null,
-                error: "",
-            });
-        xhr.onerror = () =>
-            resolve({
-                aborted: false,
-                status: 0,
-                body: null,
-                error: "Network upload failed",
-            });
-        xhr.onload = () => {
-            let parsed = null;
-            const text = String(xhr.responseText || "");
-            if (text) {
-                try {
-                    parsed = JSON.parse(text);
-                } catch {
-                    parsed = null;
-                }
-            }
-            resolve({
-                aborted: false,
-                status: xhr.status,
-                body: parsed,
-                error: "",
-            });
-        };
-        xhr.send(body);
-    });
-}
-/**
- * @param {XMLHttpRequest} xhr
- * @param {string} method
- * @param {string} url
- * @param {Record<string, unknown>} payload
- */
-function xhrSendJson(xhr, method, url, payload) {
-    return new Promise((resolve) => {
-        xhr.open(method, url);
-        try {
-            xhr.setRequestHeader("content-type", "application/json");
-        } catch {}
-        xhr.onabort = () =>
-            resolve({
-                aborted: true,
-                status: 0,
-                body: null,
-                error: "",
-            });
-        xhr.onerror = () =>
-            resolve({
-                aborted: false,
-                status: 0,
-                body: null,
-                error: "Network upload failed",
-            });
-        xhr.onload = () => {
-            let parsed = null;
-            const text = String(xhr.responseText || "");
-            if (text) {
-                try {
-                    parsed = JSON.parse(text);
-                } catch {
-                    parsed = null;
-                }
-            }
-            resolve({
-                aborted: false,
-                status: xhr.status,
-                body: parsed,
-                error: "",
-            });
-        };
-        xhr.send(JSON.stringify(payload || {}));
-    });
-}
-</script>
+<template>
+    <div data-vmz-ui="upload" :data-vmz-upload-destination="destination" :data-vmz-upload-mode="selectionMode" :data-vmz-upload-directory="directoryAttr" :data-vmz-upload-chunk="chunkAttr" :data-vmz-upload-session="sessionAttr" :data-invalid="invalidAttr" :data-vmz-upload-status="status" :data-progress="progress" :onDragEnter="onDragEnter" :onDragOver="onDragOver" :onDragLeave="onDragLeave" :onDrop="onDrop" :class='"vmz-ui-upload" + (dragOver ? " is-dragover" : "")'>
+        <label v-if="label" :for="controlId" class="vmz-ui-upload__label">
+            {{ label }}
+        </label>
+        <div data-vmz-upload="zone" class="vmz-ui-upload__zone">
+            <input :id="controlId" type="file" :accept="accept" :multiple="multiple" :disabled="inputDisabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :data-vmz-upload-directory="directoryAttr" @change="onPick" class="vmz-ui-upload__control" />
+            <Icon name="action.upload" size="lg" decorative />
+            <p v-if="hint" data-vmz-upload="hint" class="vmz-ui-upload__hint">
+                {{ hint }}
+            </p>
+        </div>
+        <ul v-if="hasItems" data-vmz-upload="queue" class="vmz-ui-upload__queue">
+            <li v-for="item in queue" :key="item.key" :data-vmz-upload-item="item.key" :data-status="item.status" class="vmz-ui-upload__item">
+                <span data-vmz-upload="file" class="vmz-ui-upload__item-name">
+                    {{ item.name }}
+                </span>
+                <span class="vmz-ui-upload__item-meta">
+                    {{ item.meta }}
+                </span>
+                <span v-if="item.showBar" aria-hidden="true" class="vmz-ui-upload__item-bar" :style="item.barStyle" />
+            </li>
+        </ul>
+        <p v-if="emptyHint" data-vmz-upload="empty" class="vmz-ui-upload__empty">
+            {{ emptyText }}
+        </p>
+        <div v-if="showProgress" data-vmz-upload="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="progress" :aria-label="progressLabel" class="vmz-ui-upload__progress">
+            <div class="vmz-ui-upload__track">
+                <div class="vmz-ui-upload__bar" :style="progressStyle" />
+            </div>
+            <span data-vmz-upload="pct" class="vmz-ui-upload__pct">
+                {{ progressLabel }}
+            </span>
+        </div>
+        <p v-if="statusText" data-vmz-upload="status" class="vmz-ui-upload__status">
+            {{ statusText }}
+        </p>
+        <p v-if="resultText" data-vmz-upload="result" class="vmz-ui-upload__result">
+            {{ resultText }}
+        </p>
+        <div v-if="showActions" data-vmz-upload="actions" class="vmz-ui-upload__actions">
+            <button v-if="canCancel" type="button" data-vmz-upload="cancel" :aria-label="cancelLabel" @click="onCancelClick" class="vmz-ui-upload__cancel">
+                <Icon name="action.close" size="sm" decorative />
+                <span v-if="cancelLabel">
+                    {{ cancelLabel }}
+                </span>
+            </button>
+            <button v-if="canResume" type="button" data-vmz-upload="resume" :aria-label="resumeLabel" @click="onResumeClick" class="vmz-ui-upload__resume">
+                <Icon name="action.chevron-right" size="sm" decorative />
+                <span v-if="resumeLabel">
+                    {{ resumeLabel }}
+                </span>
+            </button>
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-upload__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-upload__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    max-width: 28rem;
+}
+
+.vmz-ui-upload__label {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-upload__zone {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-sizing: border-box;
+    min-height: 96px;
+    padding: 20px 24px;
+    border: 1px dashed var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-mist);
+    text-align: center;
+    transition:
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-upload__zone:hover {
+    border-color: var(--vmz-action-primary-background);
+    background: color-mix(
+        in srgb,
+        var(--vmz-action-primary-background) 4%,
+        var(--vmz-surface-paper)
+    );
+}
+
+.vmz-ui-upload__zone:focus-within {
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-upload.is-dragover .vmz-ui-upload__zone {
+    border-color: var(--vmz-action-primary-background);
+    background: color-mix(
+        in srgb,
+        var(--vmz-action-primary-background) 8%,
+        var(--vmz-surface-paper)
+    );
+}
+
+.vmz-ui-upload__control {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-upload__control:disabled {
+    cursor: not-allowed;
+}
+
+.vmz-ui-upload__zone .vmz-ui-icon {
+    color: var(--vmz-text-tertiary);
+    pointer-events: none;
+}
+
+.vmz-ui-upload__hint {
+    margin: 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-steel);
+    pointer-events: none;
+}
+
+.vmz-ui-upload__queue {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--vmz-line-subtle);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    overflow: hidden;
+}
+
+.vmz-ui-upload__item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 2px 12px;
+    min-height: 40px;
+    box-sizing: border-box;
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-upload__item:last-child {
+    border-bottom: none;
+}
+
+.vmz-ui-upload__item-name {
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-upload__item-meta {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--vmz-text-tertiary);
+    white-space: nowrap;
+}
+
+.vmz-ui-upload__item-bar {
+    grid-column: 1 / -1;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--vmz-action-primary-background);
+    min-width: 2px;
+    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-upload[data-invalid="true"] .vmz-ui-upload__label {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-upload[data-vmz-upload-status="error"] .vmz-ui-upload__zone {
+    border-color: var(--vmz-status-danger-accent);
+}
+
+/* The native file input already announces "no file chosen"; keep this node for
+   assistive tech without repeating the same line visually. */
+.vmz-ui-upload__empty {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+.vmz-ui-upload__progress {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+}
+
+.vmz-ui-upload__track {
+    height: 6px;
+    border-radius: 999px;
+    background: var(--vmz-surface-mist);
+    overflow: hidden;
+}
+
+.vmz-ui-upload__bar {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--vmz-action-primary-background);
+    min-width: 2px;
+    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-upload__pct {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--vmz-text-steel);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.vmz-ui-upload__status {
+    margin: 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-upload[data-vmz-upload-status="done"] .vmz-ui-upload__status,
+.vmz-ui-upload[data-vmz-upload-status="done"] .vmz-ui-upload__result {
+    color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-upload[data-vmz-upload-status="error"] .vmz-ui-upload__status {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-upload__result {
+    margin: 0;
+    font-family: var(--vmz-font-mono);
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-upload__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.vmz-ui-upload__cancel,
+.vmz-ui-upload__resume {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: var(--vmz-control-height, 32px);
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 14px;
+    line-height: 22px;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-upload__cancel:hover,
+.vmz-ui-upload__resume:hover {
+    border-color: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-upload__cancel:focus-visible,
+.vmz-ui-upload__resume:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-upload__resume {
+    border-color: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-upload__description {
+    margin: 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-upload__error {
+    margin: 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-status-danger-foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-upload__bar,
+    .vmz-ui-upload__item-bar,
+    .vmz-ui-upload__zone,
+    .vmz-ui-upload__cancel,
+    .vmz-ui-upload__resume {
+        transition: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Upload (all-in-one).
+ * Owns selection UI, constraints, queue, progress/cancel, and destination transport
+ * (client | server | object). Parent owns result value + destination config only.
+ * No useUpload / createUpload; no cloud SDK inside @vmz/ui.
+ * destination=server + chunkSize>0 → init / chunk PUT / complete + same-session pause/resume.
+ *
+ * Only destination config + result callbacks are `public` props.
+ * Presentation/queue/xhr state stay private so parent re-renders cannot wipe them.
+ */
+export default class Upload {
+    public label: string = "";
+    public description: string = "";
+    /** Form-level validation message from parent. */
+    public error: string = "";
+    public emptyText: string = "";
+    public accept: string = "";
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-upload";
+    public descriptionId: string = "vmz-upload-desc";
+    public errorId: string = "vmz-upload-err";
+    public describedBy: string = "";
+    /** client | server | object */
+    public destination: string = "server";
+    /** ServerRoute / URL for destination=server (multipart) or resumable prefix (chunkSize>0) */
+    public action: string = "";
+    /** multipart field name */
+    public fieldName: string = "file";
+    public multiple: boolean = false;
+    public directory: boolean = false;
+    public maxCount: number = 1;
+    public maxBytes: number = 0;
+    /**
+     * When >0 and destination=server: chunked resumable transport against action prefix
+     * (`/init`, `/chunk`, `/status`, `/complete`). Thin gate is single-file same-session.
+     */
+    public chunkSize: number = 0;
+    /**
+     * object destination: (file) => Promise<{ uploadUrl, headers?, objectKey? }>
+     * Must bind #server-issued short-lived credentials only.
+     */
+    public onPresign:
+        | ((file: File) => Promise<{
+              uploadUrl: string;
+              headers?: Record<string, string>;
+              objectKey?: string;
+          }>)
+        | null = null;
+    /** Parent receives serializable results (no File handles required). */
+    public onValue: ((items: UploadValueItem[]) => void) | null = null;
+    /** Parent mirrors overall status for form fixture / submit gates. */
+    public onStatus: ((status: string) => void) | null = null;
+    public cancelLabel: string = "";
+    public resumeLabel: string = "";
+    /** Caller-supplied drop-zone hint; empty hides the hint line. */
+    public hint: string = "";
+    /** Localized status / diagnostic copy. Empty keys hide the status line. */
+    public messages: Record<string, string> = {};
+    /** Suffix for multi-file success (`N <readyText>`); part of the stable result text. */
+    public readyText: string = "file(s) ready";
+    // presentation (component-owned — NOT public props)
+    status: string = "idle";
+    progress: string = "0";
+    progressLabel: string = "";
+    progressStyle: string = "width:0%";
+    showProgress: boolean = false;
+    statusText: string = "";
+    resultText: string = "";
+    canCancel: boolean = false;
+    canResume: boolean = false;
+    showActions: boolean = false;
+    emptyHint: boolean = true;
+    hasItems: boolean = false;
+    inputDisabled: boolean = false;
+    dragOver: boolean = false;
+    selectionMode: string = "single";
+    directoryAttr: string = "false";
+    chunkAttr: string = "0";
+    sessionAttr: string = "";
+    /** @type {{ key: string, name: string, meta: string, status: string, showBar: boolean, barStyle: string }[]} */
+    queue: {
+        key: string;
+        name: string;
+        meta: string;
+        status: string;
+        showBar: boolean;
+        barStyle: string;
+    }[] = [];
+    _seenClearToken = 0;
+    _clearToken = 0;
+    /** Parent increments to clear internal queue (form reset). Binder assignment must clear immediately. */
+    get clearToken() {
+        return this._clearToken;
+    }
+    set clearToken(v) {
+        const n = Number(v) || 0;
+        this._clearToken = n;
+        if (n !== this._seenClearToken) {
+            this._seenClearToken = n;
+            this.clearInternal(true);
+        }
+    }
+    /** @type {XMLHttpRequest | null} */
+    _xhr = null;
+    /** @type {File[]} */
+    _files = [];
+    /** @type {UploadValueItem[]} */
+    _values = [];
+    _gen = 0;
+    /** Resumable session (same File handle / same page). */
+    _uploadId = "";
+    _chunkTotal = 0;
+    /** @type {number[]} */
+    _received = [];
+    _activeChunkSize = 0;
+    onMount() {
+        this.applyDirectoryAttr();
+        this.syncChunkAttr();
+    }
+    msg(key: string) {
+        const messages = this.messages || {};
+        const value = messages[key];
+        return typeof value === "string" ? value : "";
+    }
+    onPick(ev) {
+        this.syncClearToken();
+        this.applyDirectoryAttr();
+        const input = ev && ev.target;
+        const list = input && input.files ? input.files : null;
+        // Ignore empty change (including the synthetic event from clearing input.value
+        // after a successful pick) — otherwise in-flight uploads get abort/cleared.
+        if (!list || !list.length) return;
+        this.ingestFileList(list);
+        // Allow re-selecting the same path without retaining the FileList on the input.
+        if (input) input.value = "";
+    }
+    onDragEnter(ev) {
+        if (this.inputDisabled || this.disabled) return;
+        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+        this.dragOver = true;
+    }
+    onDragOver(ev) {
+        if (this.inputDisabled || this.disabled) return;
+        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+        this.dragOver = true;
+    }
+    onDragLeave() {
+        this.dragOver = false;
+    }
+    onDrop(ev) {
+        if (this.inputDisabled || this.disabled) return;
+        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+        this.dragOver = false;
+        const list = ev && ev.dataTransfer ? ev.dataTransfer.files : null;
+        this.ingestFileList(list);
+    }
+    onCancelClick() {
+        this.cancelActive(true);
+    }
+    onResumeClick() {
+        if (this.status !== "paused" || !this._uploadId || !this._files.length) return;
+        this._gen += 1;
+        const gen = this._gen;
+        this.runDestination(gen);
+    }
+    syncClearToken() {
+        const token = Number(this.clearToken) || 0;
+        if (token !== this._seenClearToken) {
+            this._seenClearToken = token;
+            this.clearInternal(false);
+        }
+    }
+    syncChunkAttr() {
+        const n = Math.max(0, Number(this.chunkSize) || 0);
+        this.chunkAttr = String(n);
+        this.sessionAttr = this._uploadId
+            ? `${this._received.length}/${this._chunkTotal || 0}:${this._uploadId}`
+            : "";
+    }
+    applyDirectoryAttr() {
+        this.directoryAttr = this.directory ? "true" : "false";
+        this.selectionMode = this.directory ? "directory" : this.multiple ? "multiple" : "single";
+        // Native directory picker (UA-specific).
+        const el = typeof document !== "undefined" ? document.getElementById(this.controlId) : null;
+        if (el && "webkitdirectory" in el) {
+            try {
+                el.webkitdirectory = !!this.directory;
+                el.multiple = !!(this.multiple || this.directory);
+            } catch {}
+        }
+    }
+    /**
+     * @param {FileList | File[] | null} list
+     */
+    ingestFileList(list) {
+        this.syncClearToken();
+        this.applyDirectoryAttr();
+        this.syncChunkAttr();
+        if (this.disabled) return;
+        const files = listToFiles(list);
+        if (!files.length) {
+            this.clearInternal(false);
+            this.emitValue([]);
+            return;
+        }
+        const maxCount = Math.max(1, Number(this.maxCount) || 1);
+        const capped =
+            this.multiple || this.directory ? files.slice(0, maxCount) : files.slice(0, 1);
+        if ((this.multiple || this.directory) && files.length > maxCount) {
+            this.failAll(this.msg("tooMany"));
+            return;
+        }
+        const maxBytes = Number(this.maxBytes) || 0;
+        for (const f of capped) {
+            const acceptErr = acceptError(f, this.accept);
+            if (acceptErr) {
+                this.failAll(this.msg("acceptType"));
+                return;
+            }
+            if (maxBytes > 0 && Number(f.size) > maxBytes) {
+                this.failAll(this.msg("fileTooLarge"));
+                return;
+            }
+        }
+        const chunkSize = Math.max(0, Number(this.chunkSize) || 0);
+        if (chunkSize > 0 && capped.length !== 1) {
+            this.failAll(this.msg("singleFileChunk"));
+            return;
+        }
+        this.cancelActive(false);
+        this.resetSession();
+        this._files = capped;
+        this._gen += 1;
+        const gen = this._gen;
+        this._values = [];
+        this.queue = capped.map((f, i) => ({
+            key: `f-${gen}-${i}`,
+            name: String(f.name || `file-${i}`),
+            meta: formatBytes(f.size),
+            status: "pending",
+            showBar: false,
+            barStyle: "width:0%",
+        }));
+        this.hasItems = this.queue.length > 0;
+        this.emptyHint = false;
+        this.inputDisabled = true;
+        this.canResume = false;
+        this.showActions = false;
+        this.runDestination(gen);
+    }
+    /**
+     * @param {number} gen
+     */
+    async runDestination(gen) {
+        const dest = String(this.destination || "server").toLowerCase();
+        if (dest === "client") {
+            await this.runClient(gen);
+            return;
+        }
+        if (dest === "object") {
+            await this.runObject(gen);
+            return;
+        }
+        const chunkSize = Math.max(0, Number(this.chunkSize) || 0);
+        if (chunkSize > 0) {
+            await this.runServerResumable(gen, chunkSize);
+            return;
+        }
+        await this.runServer(gen);
+    }
+    /**
+     * @param {number} gen
+     */
+    async runClient(gen) {
+        if (gen !== this._gen) return;
+        this.setOverall("uploading", this.msg("preparing"), true, false);
+        const values = [];
+        for (let i = 0; i < this._files.length; i++) {
+            if (gen !== this._gen) return;
+            const file = this._files[i];
+            const pct = Math.round(((i + 1) / this._files.length) * 100);
+            this.patchItem(i, {
+                status: "done",
+                showBar: true,
+                barStyle: `width:${pct}%`,
+                meta: formatBytes(file.size),
+            });
+            this.setProgress(pct);
+            values.push({
+                name: String(file.name || ""),
+                size: Number(file.size) || 0,
+                type: String(file.type || ""),
+                destination: "client",
+                id: `client-${gen}-${i}`,
+                bytes: Number(file.size) || 0,
+                /** Local File handle for in-tab tools (checksum, etc.). Not serialized. */
+                file,
+            });
+        }
+        if (gen !== this._gen) return;
+        this._values = values;
+        this.finishOk(values);
+    }
+    /**
+     * @param {number} gen
+     */
+    async runServer(gen) {
+        if (gen !== this._gen) return;
+        const action = String(this.action || "").trim();
+        if (!action) {
+            this.failAll(this.msg("actionRequired"));
+            return;
+        }
+        // Sequential single-XHR for thin gate; multi-file appends all parts then one request.
+        this.setOverall("uploading", this.msg("uploading"), true, true);
+        this.setProgress(0);
+        for (let i = 0; i < this.queue.length; i++) {
+            this.patchItem(i, {
+                status: "uploading",
+                showBar: true,
+                barStyle: "width:0%",
+            });
+        }
+        const form = new FormData();
+        const field = String(this.fieldName || "file");
+        if (this._files.length === 1) {
+            const file = this._files[0];
+            form.append(field, file, file.name);
+            form.append("name", file.name);
+        } else {
+            for (const file of this._files) {
+                form.append(field, file, file.name);
+            }
+        }
+        const xhr = new XMLHttpRequest();
+        this._xhr = xhr;
+        const result = await xhrSend(xhr, "POST", action, form, (pct) => {
+            if (gen !== this._gen) return;
+            this.setProgress(pct);
+            for (let i = 0; i < this.queue.length; i++) {
+                this.patchItem(i, { barStyle: `width:${pct}%` });
+            }
+        });
+        if (gen !== this._gen) return;
+        this._xhr = null;
+        if (result.aborted) {
+            this.markCancelled();
+            return;
+        }
+        if (result.error) {
+            this.failAll(result.error);
+            return;
+        }
+        const body = result.body;
+        if (!(result.status >= 200 && result.status < 300) || !body || !body.ok) {
+            this.failAll((body && body.error) || this.msg("failed"));
+            return;
+        }
+        // Single-file shape { ok, id, bytes, name } or multi { ok, items: [...] }
+        const values = [];
+        if (Array.isArray(body.items)) {
+            for (let i = 0; i < body.items.length; i++) {
+                const it = body.items[i] || {};
+                values.push({
+                    name: String(it.name || (this._files[i] && this._files[i].name) || ""),
+                    size: Number(
+                        it.bytes || it.size || (this._files[i] && this._files[i].size) || 0,
+                    ),
+                    type: String(it.contentType || ""),
+                    destination: "server",
+                    id: String(it.id || ""),
+                    bytes: Number(it.bytes || it.size || 0),
+                    headHex: it.headHex ? String(it.headHex) : "",
+                });
+            }
+        } else {
+            values.push({
+                name: String(body.name || (this._files[0] && this._files[0].name) || ""),
+                size: Number(
+                    body.bytes || body.reportedSize || (this._files[0] && this._files[0].size) || 0,
+                ),
+                type: String(body.contentType || ""),
+                destination: "server",
+                id: String(body.id || ""),
+                bytes: Number(body.bytes || 0),
+                headHex: body.headHex ? String(body.headHex) : "",
+            });
+        }
+        for (let i = 0; i < this.queue.length; i++) {
+            this.patchItem(i, {
+                status: "done",
+                showBar: true,
+                barStyle: "width:100%",
+                meta: formatBytes(values[i] && values[i].bytes),
+            });
+        }
+        this._values = values;
+        this.finishOk(values);
+    }
+    /**
+     * Chunked server upload: POST init → PUT chunk(s) → POST complete.
+     * Cancel → paused (keeps uploadId + received); Resume continues missing indexes.
+     * @param {number} gen
+     * @param {number} chunkSize
+     */
+    async runServerResumable(gen, chunkSize) {
+        if (gen !== this._gen) return;
+        const base = String(this.action || "")
+            .trim()
+            .replace(/\/+$/, "");
+        if (!base) {
+            this.failAll(this.msg("actionRequired"));
+            return;
+        }
+        const file = this._files[0];
+        if (!file) {
+            this.failAll(this.msg("noFile"));
+            return;
+        }
+        this._activeChunkSize = chunkSize;
+        this.setOverall("uploading", this._uploadId ? this.msg("resuming") : this.msg("uploading"), true, true);
+        this.canResume = false;
+        this.showActions = true;
+        this.patchItem(0, {
+            status: "uploading",
+            showBar: true,
+            barStyle: "width:0%",
+        });
+        if (!this._uploadId) {
+            const initXhr = new XMLHttpRequest();
+            this._xhr = initXhr;
+            const initResult = await xhrSendJson(initXhr, "POST", `${base}/init`, {
+                name: String(file.name || ""),
+                size: Number(file.size) || 0,
+                type: String(file.type || ""),
+                chunkSize,
+            });
+            if (gen !== this._gen) return;
+            this._xhr = null;
+            if (initResult.aborted) {
+                this.markPaused();
+                return;
+            }
+            if (
+                initResult.error ||
+                !(initResult.status >= 200 && initResult.status < 300) ||
+                !initResult.body ||
+                !initResult.body.ok
+            ) {
+                this.failAll(
+                    (initResult.body && initResult.body.error) ||
+                        initResult.error ||
+                        this.msg("initFailed"),
+                );
+                return;
+            }
+            this._uploadId = String(initResult.body.uploadId || "");
+            this._chunkTotal =
+                Number(initResult.body.chunkTotal) ||
+                Math.ceil((Number(file.size) || 0) / chunkSize) ||
+                1;
+            this._received = [];
+            this.syncChunkAttr();
+            if (!this._uploadId) {
+                this.failAll(this.msg("uploadIdMissing"));
+                return;
+            }
+        } else {
+            const statusXhr = new XMLHttpRequest();
+            this._xhr = statusXhr;
+            const statusResult = await xhrSendJson(statusXhr, "POST", `${base}/status`, {
+                uploadId: this._uploadId,
+            });
+            if (gen !== this._gen) return;
+            this._xhr = null;
+            if (statusResult.aborted) {
+                this.markPaused();
+                return;
+            }
+            if (
+                statusResult.error ||
+                !(statusResult.status >= 200 && statusResult.status < 300) ||
+                !statusResult.body ||
+                !statusResult.body.ok
+            ) {
+                this.failAll(
+                    (statusResult.body && statusResult.body.error) ||
+                        statusResult.error ||
+                        this.msg("statusFailed"),
+                );
+                return;
+            }
+            this._received = Array.isArray(statusResult.body.received)
+                ? statusResult.body.received.map((n) => Number(n)).filter((n) => Number.isFinite(n))
+                : [];
+            this._chunkTotal = Number(statusResult.body.chunkTotal) || this._chunkTotal;
+            this.syncChunkAttr();
+        }
+        const total = Math.max(
+            1,
+            this._chunkTotal || Math.ceil((Number(file.size) || 0) / chunkSize) || 1,
+        );
+        this._chunkTotal = total;
+        const receivedSet = new Set(this._received);
+        this.setProgress(Math.round((receivedSet.size / total) * 100));
+        this.patchItem(0, {
+            barStyle: `width:${Math.round((receivedSet.size / total) * 100)}%`,
+            meta: `${receivedSet.size}/${total}`,
+        });
+        for (let index = 0; index < total; index++) {
+            if (gen !== this._gen) return;
+            if (receivedSet.has(index)) continue;
+            const start = index * chunkSize;
+            const end = Math.min(Number(file.size) || 0, start + chunkSize);
+            const blob = file.slice(start, end);
+            const xhr = new XMLHttpRequest();
+            this._xhr = xhr;
+            const result = await xhrSend(
+                xhr,
+                "PUT",
+                `${base}/chunk`,
+                blob,
+                (pct) => {
+                    if (gen !== this._gen) return;
+                    const overall = Math.round(((receivedSet.size + pct / 100) / total) * 100);
+                    this.setProgress(overall);
+                    this.patchItem(0, { barStyle: `width:${overall}%` });
+                },
+                {
+                    "content-type": "application/octet-stream",
+                    "x-vmz-upload-id": this._uploadId,
+                    "x-vmz-chunk-index": String(index),
+                    "x-vmz-chunk-total": String(total),
+                },
+            );
+            if (gen !== this._gen) return;
+            this._xhr = null;
+            if (result.aborted) {
+                this.markPaused();
+                return;
+            }
+            if (
+                result.error ||
+                !(result.status >= 200 && result.status < 300) ||
+                !result.body ||
+                !result.body.ok
+            ) {
+                this.failAll(
+                    (result.body && result.body.error) ||
+                        result.error ||
+                        this.msg("chunkFailed"),
+                );
+                return;
+            }
+            this._received = Array.isArray(result.body.received)
+                ? result.body.received.map((n) => Number(n)).filter((n) => Number.isFinite(n))
+                : this._received.concat([index]);
+            receivedSet.add(index);
+            for (const n of this._received) receivedSet.add(n);
+            this.syncChunkAttr();
+            const pct = Math.round((receivedSet.size / total) * 100);
+            this.setProgress(pct);
+            this.patchItem(0, {
+                barStyle: `width:${pct}%`,
+                meta: `${receivedSet.size}/${total}`,
+            });
+        }
+        if (gen !== this._gen) return;
+        const completeXhr = new XMLHttpRequest();
+        this._xhr = completeXhr;
+        const completeResult = await xhrSendJson(completeXhr, "POST", `${base}/complete`, {
+            uploadId: this._uploadId,
+        });
+        if (gen !== this._gen) return;
+        this._xhr = null;
+        if (completeResult.aborted) {
+            this.markPaused();
+            return;
+        }
+        if (
+            completeResult.error ||
+            !(completeResult.status >= 200 && completeResult.status < 300) ||
+            !completeResult.body ||
+            !completeResult.body.ok
+        ) {
+            this.failAll(
+                (completeResult.body && completeResult.body.error) ||
+                    completeResult.error ||
+                    this.msg("completeFailed"),
+            );
+            return;
+        }
+        const body = completeResult.body;
+        const values = [
+            {
+                name: String(body.name || file.name || ""),
+                size: Number(body.bytes || body.size || file.size || 0),
+                type: String(body.contentType || file.type || ""),
+                destination: "server",
+                id: String(body.id || ""),
+                bytes: Number(body.bytes || body.size || 0),
+                headHex: body.headHex ? String(body.headHex) : "",
+                uploadId: this._uploadId,
+                chunks: total,
+            },
+        ];
+        this.patchItem(0, {
+            status: "done",
+            showBar: true,
+            barStyle: "width:100%",
+            meta: `${formatBytes(values[0].bytes)} (${total})`,
+        });
+        this.resetSession();
+        this._values = values;
+        this.finishOk(values);
+    }
+    /**
+     * @param {number} gen
+     */
+    async runObject(gen) {
+        if (gen !== this._gen) return;
+        if (typeof this.onPresign !== "function") {
+            this.failAll(this.msg("presignRequired"));
+            return;
+        }
+        this.setOverall("uploading", this.msg("uploading"), true, true);
+        const values = [];
+        for (let i = 0; i < this._files.length; i++) {
+            if (gen !== this._gen) return;
+            const file = this._files[i];
+            this.patchItem(i, {
+                status: "uploading",
+                showBar: true,
+                barStyle: "width:0%",
+            });
+            let signed;
+            try {
+                signed = await this.onPresign(file);
+            } catch (err) {
+                this.failAll(err instanceof Error ? err.message : String(err || this.msg("presignFailed")));
+                return;
+            }
+            if (gen !== this._gen) return;
+            const url = signed && signed.uploadUrl ? String(signed.uploadUrl) : "";
+            if (!url) {
+                this.failAll(this.msg("presignUrl"));
+                return;
+            }
+            const xhr = new XMLHttpRequest();
+            this._xhr = xhr;
+            const headers = (signed && signed.headers) || {};
+            const result = await xhrSend(
+                xhr,
+                "PUT",
+                url,
+                file,
+                (pct) => {
+                    if (gen !== this._gen) return;
+                    const overall = Math.round(((i + pct / 100) / this._files.length) * 100);
+                    this.setProgress(overall);
+                    this.patchItem(i, { barStyle: `width:${pct}%` });
+                },
+                headers,
+            );
+            if (gen !== this._gen) return;
+            this._xhr = null;
+            if (result.aborted) {
+                this.markCancelled();
+                return;
+            }
+            if (result.error || !(result.status >= 200 && result.status < 300)) {
+                this.failAll(
+                    result.error || this.msg("objectFailed"),
+                );
+                return;
+            }
+            const objectKey = String((signed && signed.objectKey) || file.name || "");
+            values.push({
+                name: String(file.name || ""),
+                size: Number(file.size) || 0,
+                type: String(file.type || ""),
+                destination: "object",
+                id: objectKey,
+                bytes: Number(file.size) || 0,
+                objectKey,
+            });
+            this.patchItem(i, {
+                status: "done",
+                showBar: true,
+                barStyle: "width:100%",
+                meta: formatBytes(file.size),
+            });
+        }
+        this._values = values;
+        this.finishOk(values);
+    }
+    /**
+     * @param {UploadValueItem[]} values
+     */
+    finishOk(values) {
+        this.setProgress(100);
+        this.status = "done";
+        this.statusText = this.msg("complete");
+        this.showProgress = true;
+        this.canCancel = false;
+        this.canResume = false;
+        this.showActions = false;
+        this.inputDisabled = false;
+        const first = values[0];
+        if (values.length === 1 && first) {
+            const prefix =
+                first.destination === "client"
+                    ? "client"
+                    : first.destination === "object"
+                      ? "object"
+                      : "attachment";
+            const head = first.headHex ? ` head:${first.headHex}` : "";
+            const chunkNote = first.chunks ? ` chunks:${first.chunks}` : "";
+            this.resultText = `${prefix}:${first.id} (${first.bytes || 0} bytes)${head}${chunkNote}`;
+        } else {
+            this.resultText = `${values.length} ${this.readyText}`.trim();
+        }
+        this.emitStatus();
+        this.emitValue(values);
+    }
+    /**
+     * @param {string} message
+     */
+    failAll(message) {
+        this.cancelActive(false);
+        this.resetSession();
+        const text = message || this.msg("failed");
+        this.status = "error";
+        this.statusText = text;
+        this.showProgress = false;
+        this.canCancel = false;
+        this.canResume = false;
+        this.showActions = false;
+        this.inputDisabled = false;
+        this.resultText = "";
+        this._values = [];
+        for (let i = 0; i < this.queue.length; i++) {
+            this.patchItem(i, {
+                status: "error",
+                showBar: false,
+            });
+        }
+        this.emitStatus();
+        this.emitValue([]);
+    }
+    markCancelled() {
+        this.status = "cancelled";
+        this.statusText = this.msg("cancelled");
+        this.showProgress = false;
+        this.canCancel = false;
+        this.canResume = false;
+        this.showActions = false;
+        this.inputDisabled = false;
+        this.resultText = "";
+        this._values = [];
+        this.resetSession();
+        this.emitStatus();
+        this.emitValue([]);
+    }
+    markPaused() {
+        this.status = "paused";
+        this.statusText = this.msg("paused");
+        this.showProgress = true;
+        this.canCancel = false;
+        this.canResume = !!this._uploadId;
+        this.showActions = this.canResume;
+        this.inputDisabled = false;
+        this.resultText = "";
+        this._values = [];
+        this.syncChunkAttr();
+        this.patchItem(0, {
+            status: "paused",
+            meta: `${this._received.length}/${this._chunkTotal || 0}`,
+        });
+        this.emitStatus();
+        this.emitValue([]);
+    }
+    resetSession() {
+        this._uploadId = "";
+        this._chunkTotal = 0;
+        this._received = [];
+        this._activeChunkSize = 0;
+        this.syncChunkAttr();
+    }
+    /**
+     * @param {boolean} mark
+     */
+    cancelActive(mark) {
+        const xhr = this._xhr;
+        this._xhr = null;
+        this._gen += 1;
+        if (xhr) {
+            try {
+                xhr.abort();
+            } catch {}
+        }
+        if (mark && this.status === "uploading") {
+            if (this._uploadId && this._activeChunkSize > 0) {
+                this.markPaused();
+            } else {
+                this.markCancelled();
+            }
+        }
+    }
+    /**
+     * @param {boolean} emit
+     */
+    clearInternal(emit) {
+        this.cancelActive(false);
+        this.resetSession();
+        this._files = [];
+        this._values = [];
+        this.queue = [];
+        this.hasItems = false;
+        this.emptyHint = true;
+        this.status = "idle";
+        this.statusText = "";
+        this.resultText = "";
+        this.showProgress = false;
+        this.canCancel = false;
+        this.canResume = false;
+        this.showActions = false;
+        this.inputDisabled = !!this.disabled;
+        this.setProgress(0);
+        this.dragOver = false;
+        this.applyDirectoryAttr();
+        this.emitStatus();
+        if (emit) this.emitValue([]);
+    }
+    /**
+     * @param {string} status
+     * @param {string} text
+     * @param {boolean} showProgress
+     * @param {boolean} canCancel
+     */
+    setOverall(status, text, showProgress, canCancel) {
+        this.status = status;
+        this.statusText = text;
+        this.showProgress = showProgress;
+        this.canCancel = canCancel;
+        this.canResume = false;
+        this.showActions = canCancel;
+        this.inputDisabled = status === "uploading" || !!this.disabled;
+        this.emitStatus();
+    }
+    /**
+     * @param {number} pct
+     */
+    setProgress(pct) {
+        const n = Math.max(0, Math.min(100, Number(pct) || 0));
+        this.progress = String(n);
+        this.progressLabel = `${n}%`;
+        this.progressStyle = `width:${n}%`;
+    }
+    /**
+     * @param {number} index
+     * @param {Partial<{ status: string, meta: string, showBar: boolean, barStyle: string }>} patch
+     */
+    patchItem(index, patch) {
+        const cur = this.queue[index];
+        if (!cur) return;
+        const next = Object.assign({}, cur, patch);
+        const copy = this.queue.slice();
+        copy[index] = next;
+        this.queue = copy;
+    }
+    /**
+     * @param {UploadValueItem[]} items
+     */
+    emitValue(items) {
+        if (typeof this.onValue === "function") this.onValue(items);
+    }
+    emitStatus() {
+        if (typeof this.onStatus === "function") this.onStatus(this.status);
+    }
+}
+/**
+ * @typedef {{
+ *   name: string,
+ *   size: number,
+ *   type: string,
+ *   destination: string,
+ *   id: string,
+ *   bytes: number,
+ *   objectKey?: string,
+ *   headHex?: string,
+ *   uploadId?: string,
+ *   chunks?: number
+ * }} UploadValueItem
+ */
+/**
+ * @param {FileList | File[] | null | undefined} list
+ * @returns {File[]}
+ */
+function listToFiles(list) {
+    if (!list) return [];
+    if (Array.isArray(list)) return list.filter(Boolean);
+    const out = [];
+    for (let i = 0; i < list.length; i++) out.push(list[i]);
+    return out;
+}
+/**
+ * @param {File} file
+ * @param {string} accept
+ */
+function acceptError(file, accept) {
+    const raw = String(accept || "").trim();
+    if (!raw) return "";
+    const name = String(file.name || "").toLowerCase();
+    const type = String(file.type || "").toLowerCase();
+    const parts = raw
+        .split(",")
+        .map((s) => s.trim().toLowerCase())
+        .filter(Boolean);
+    for (const p of parts) {
+        if (p.startsWith(".")) {
+            if (name.endsWith(p)) return "";
+        } else if (p.endsWith("/*")) {
+            const prefix = p.slice(0, -1);
+            if (type.startsWith(prefix)) return "";
+        } else if (p === type) {
+            return "";
+        }
+    }
+    return "accept";
+}
+/**
+ * @param {number} n
+ */
+function formatBytes(n) {
+    const v = Number(n) || 0;
+    if (v < 1024) return `${v} B`;
+    if (v < 1024 * 1024) return `${(v / 1024).toFixed(1)} KB`;
+    return `${(v / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} method
+ * @param {string} url
+ * @param {FormData | Blob | File} body
+ * @param {(pct: number) => void} onProgress
+ * @param {Record<string, string>} [headers]
+ */
+function xhrSend(xhr, method, url, body, onProgress, headers) {
+    return new Promise((resolve) => {
+        xhr.open(method, url);
+        if (headers) {
+            for (const k of Object.keys(headers)) {
+                try {
+                    xhr.setRequestHeader(k, headers[k]);
+                } catch {}
+            }
+        }
+        xhr.upload.onprogress = (ev) => {
+            if (!ev || !ev.lengthComputable || !ev.total) return;
+            onProgress(Math.round((100 * ev.loaded) / ev.total));
+        };
+        xhr.onabort = () =>
+            resolve({
+                aborted: true,
+                status: 0,
+                body: null,
+                error: "",
+            });
+        xhr.onerror = () =>
+            resolve({
+                aborted: false,
+                status: 0,
+                body: null,
+                error: "",
+            });
+        xhr.onload = () => {
+            let parsed = null;
+            const text = String(xhr.responseText || "");
+            if (text) {
+                try {
+                    parsed = JSON.parse(text);
+                } catch {
+                    parsed = null;
+                }
+            }
+            resolve({
+                aborted: false,
+                status: xhr.status,
+                body: parsed,
+                error: "",
+            });
+        };
+        xhr.send(body);
+    });
+}
+/**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} method
+ * @param {string} url
+ * @param {Record<string, unknown>} payload
+ */
+function xhrSendJson(xhr, method, url, payload) {
+    return new Promise((resolve) => {
+        xhr.open(method, url);
+        try {
+            xhr.setRequestHeader("content-type", "application/json");
+        } catch {}
+        xhr.onabort = () =>
+            resolve({
+                aborted: true,
+                status: 0,
+                body: null,
+                error: "",
+            });
+        xhr.onerror = () =>
+            resolve({
+                aborted: false,
+                status: 0,
+                body: null,
+                error: "",
+            });
+        xhr.onload = () => {
+            let parsed = null;
+            const text = String(xhr.responseText || "");
+            if (text) {
+                try {
+                    parsed = JSON.parse(text);
+                } catch {
+                    parsed = null;
+                }
+            }
+            resolve({
+                aborted: false,
+                status: xhr.status,
+                body: parsed,
+                error: "",
+            });
+        };
+        xhr.send(JSON.stringify(payload || {}));
+    });
+}
+</script>