@reliability-design/web 1.4.5 → 1.4.7

package/dist/components/rel-upload/rel-upload.ts

@@ -1,943 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-alert/rel-alert";
-import "../rel-progress/rel-progress";
-
-/** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
-export type UploadStatus = "ready" | "uploading" | "success" | "error";
-
-/**
- * Aggregate state, derived from `files` — never set directly. Drives the list
- * heading, the alert, and the footer button in `<rel-upload-actions>`, and
- * corresponds to the Figma "Upload Modal" variants.
- */
-export type UploadPhase =
-  | "empty"      // Zero state
-  | "selected"   // Single upload / Multi upload
-  | "uploading"  // Loading
-  | "delayed"    // Delay
-  | "failed";    // Failure
-
-export interface UploadFile {
-  /** Stable identity for keyed rendering and remove/retry targeting. */
-  id: string;
-  name: string;
-  /** Size in bytes. */
-  size: number;
-  status: UploadStatus;
-  /** 0–100, present while uploading and after success. */
-  progress?: number;
-  /** Bytes transferred so far. */
-  loaded?: number;
-  /** Human-readable failure reason, e.g. "file exceeds the 10 MB limit". */
-  error?: string;
-  /** The underlying File. Absent when the app supplies `files` itself. */
-  file?: File;
-}
-
-export interface UploadRejection {
-  name: string;
-  reason: "format" | "size";
-  message: string;
-}
-
-export interface UploaderContext {
-  /** The entry being uploaded. */
-  file: UploadFile;
-  /** Aborted when `cancel()` is called. */
-  signal: AbortSignal;
-  /** Report bytes transferred. `total` defaults to the file size. */
-  onProgress: (loaded: number, total?: number) => void;
-}
-
-/** Supply this to let `<rel-upload>` drive the whole lifecycle itself. */
-export type Uploader = (file: File, ctx: UploaderContext) => Promise<void>;
-
-/** Snapshot handed to `<rel-upload-actions>` on every `rel-state` event. */
-export interface UploadState {
-  phase: UploadPhase;
-  total: number;
-  failed: number;
-  canUpload: boolean;
-  primaryLabel: string;
-}
-
-let uid = 0;
-
-/**
- * `<rel-upload>` — dropzone plus per-file upload list.
- *
- * Two modes, chosen by whether `uploader` is set:
- *
- * - **Controlled** (default): the component picks and validates files, then
- *   emits intents (`rel-upload`, `rel-retry`, `rel-cancel`, `rel-remove`). The
- *   app performs the transfer and writes progress back onto `files`.
- * - **Self-driving**: with an `uploader` function the component runs the whole
- *   batch itself — concurrency, progress, the delay warning, abort and retry.
- *
- * The Cancel / Upload buttons are NOT rendered here. They live in
- * `<rel-upload-actions>` so they can sit in `<rel-modal>`'s footer slot and
- * stay pinned while this body scrolls.
- *
- * Emits (bubbling + composed):
- *   - `rel-files-added`  — `{ added: UploadFile[], rejected: UploadRejection[] }`
- *   - `rel-invalid`      — `{ rejected: UploadRejection[] }`
- *   - `rel-change`       — selection changed; `{ files: UploadFile[] }`
- *   - `rel-remove`       — row removed; `{ id, file }`
- *   - `rel-upload`       — Upload pressed; `{ files: UploadFile[] }`
- *   - `rel-retry`        — Retry pressed; `{ files: UploadFile[] }`
- *   - `rel-cancel`       — Cancel pressed
- *   - `rel-progress`     — `{ id, progress, loaded, total }`
- *   - `rel-file-complete`— `{ id, file }`
- *   - `rel-file-error`   — `{ id, file, error }`
- *   - `rel-complete`     — batch settled; `{ succeeded, failed }`
- *   - `rel-state`        — derived snapshot changed; `detail: UploadState`
- *
- * @element rel-upload
- */
-@customElement("rel-upload")
-export class RelUpload extends LitElement {
-  /** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
-  @property({ type: String }) accept = "";
-
-  /** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
-  @property({ type: String, attribute: "max-size" }) maxSize = "";
-
-  /** Allow more than one file. */
-  @property({ type: Boolean }) multiple = false;
-
-  /** Disables the whole control. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
-  @property({ type: String }) hint = "";
-
-  /** Dropzone headline. */
-  @property({ type: String, attribute: "dropzone-title" })
-  dropzoneTitle = "Drag and drop your files here";
-
-  /** Browse button label. */
-  @property({ type: String, attribute: "browse-label" }) browseLabel = "Browse files";
-
-  /**
-   * The file list. Set it to drive the component in controlled mode; the
-   * component also maintains it itself as files are added and removed.
-   */
-  @property({ attribute: false }) files: UploadFile[] = [];
-
-  /** Supply to run uploads internally. See {@link Uploader}. */
-  @property({ attribute: false }) uploader?: Uploader;
-
-  /** Max files transferred at once in self-driving mode. */
-  @property({ type: Number }) concurrency = 3;
-
-  /** ms of continuous uploading before the "taking longer than usual" alert. */
-  @property({ type: Number, attribute: "delay-threshold" }) delayThreshold = 15000;
-
-  @state() private dragOver = false;
-  @state() private delayed = false;
-
-  @query(".file-input") private inputEl!: HTMLInputElement;
-
-  private aborter?: AbortController;
-  private delayTimer?: ReturnType<typeof setTimeout>;
-  private lastSignature = "";
-
-  static styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      color: var(--rel-text-default);
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-    }
-
-    :host([disabled]) .body {
-      pointer-events: none;
-    }
-
-    .body {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-lg, 20px);
-    }
-
-    /* ── Dropzone ─────────────────────────────────────────────────────────── */
-
-    .dropzone {
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--rel-spacing-md, 16px);
-      padding: var(--rel-spacing-2xl, 32px) var(--rel-spacing-xl, 24px);
-      background: var(--rel-bg-surface);
-      border: 1px dashed var(--rel-border-accent);
-      border-radius: var(--rel-border-radius-md, 16px);
-      text-align: center;
-      cursor: pointer;
-      transition: border-color 0.15s ease, background 0.15s ease;
-    }
-
-    /* Design gap: no drag-over frame exists in Figma. */
-    .dropzone.dragover {
-      border-style: solid;
-      border-color: var(--rel-border-brand);
-      background: color-mix(in srgb, var(--rel-bg-brand) 8%, var(--rel-bg-surface));
-    }
-
-    .icon-badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--rel-spacing-sm, 12px);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-subtle);
-      border-radius: var(--rel-border-radius-full-rounded, 1000px);
-    }
-
-    .dz-copy {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--rel-spacing-2xs, 4px);
-    }
-
-    .dz-title {
-      margin: 0;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-lg-medium-font-family);
-      font-weight: var(--rel-body-lg-medium-font-weight);
-      font-size: var(--rel-body-lg-medium-font-size);
-      line-height: var(--rel-body-lg-medium-line-height);
-    }
-
-    .dz-hint {
-      margin: 0;
-      color: var(--rel-text-caption);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-    }
-
-    /* The dropzone is a mouse affordance only — the Browse button is the sole
-       focusable control, so there are no nested interactive elements. */
-    .browse {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
-      background: transparent;
-      color: var(--rel-text-default);
-      border: 1px solid var(--rel-action-neutral-border-outline, var(--rel-border-accent));
-      border-radius: var(--rel-border-radius-full-rounded, 1000px);
-      cursor: pointer;
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-    }
-
-    .browse:hover:not(:disabled) {
-      background: var(--rel-action-neutral-outline-hover, var(--rel-bg-surface-elevated));
-    }
-
-    .browse:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .browse:disabled {
-      cursor: not-allowed;
-    }
-
-    /* ── File list ────────────────────────────────────────────────────────── */
-
-    .file-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-sm, 12px);
-    }
-
-    .list-heading {
-      margin: 0;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-    }
-
-    .rows {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-
-    .row {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-sm, 12px);
-      box-sizing: border-box;
-      padding: var(--rel-spacing-sm, 12px) var(--rel-spacing-md, 16px);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-    }
-
-    .row.error {
-      background: var(--rel-bg-danger-light);
-      border-color: var(--rel-border-danger);
-    }
-
-    .row > rel-icon {
-      flex-shrink: 0;
-    }
-
-    .row-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-3xs, 2px);
-      flex: 1;
-      min-width: 0;
-    }
-
-    .row.uploading .row-content {
-      gap: var(--rel-spacing-2xs, 4px);
-    }
-
-    .row-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-    }
-
-    .row-meta {
-      color: var(--rel-text-caption);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-    }
-
-    .row.success .row-meta {
-      color: var(--rel-text-success);
-    }
-
-    .row.error .row-meta {
-      color: var(--rel-text-danger);
-    }
-
-    /* Figma's 4px rounded track; rel-progress ships a 6px square one. */
-    rel-progress::part(track) {
-      height: 4px;
-      border-radius: var(--rel-border-radius-full-rounded, 1000px);
-    }
-
-    rel-progress::part(indicator) {
-      background: var(--rel-bg-success);
-      border-radius: var(--rel-border-radius-full-rounded, 1000px);
-    }
-
-    .row-trailing {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-sm, 12px);
-      flex-shrink: 0;
-    }
-
-    .status-success {
-      color: var(--rel-text-success);
-    }
-
-    .status-error {
-      color: var(--rel-text-danger);
-    }
-
-    .remove {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--rel-text-default);
-    }
-
-    .remove:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs, 4px);
-    }
-
-    .file-input {
-      display: none;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .dropzone {
-        transition: none;
-      }
-    }
-  `;
-
-  // ── derived ───────────────────────────────────────────────────────────────
-
-  /**
-   * Aggregate state. Read-only; corresponds to the Figma modal variants.
-   *
-   * `failed` means there is nothing left to send AND something errored — while
-   * any row is still `ready` the primary action is Upload, not Retry.
-   */
-  get phase(): UploadPhase {
-    if (this.files.length === 0) return "empty";
-    if (this.files.some((f) => f.status === "uploading")) {
-      return this.delayed ? "delayed" : "uploading";
-    }
-    if (this.pending.length > 0) return "selected";
-    if (this.files.some((f) => f.status === "error")) return "failed";
-    return "selected";
-  }
-
-  /** Files still eligible to be sent. */
-  private get pending(): UploadFile[] {
-    return this.files.filter((f) => f.status === "ready");
-  }
-
-  private get failedFiles(): UploadFile[] {
-    return this.files.filter((f) => f.status === "error");
-  }
-
-  /**
-   * Failed rows worth sending again. A file rejected by `accept`/`max-size`
-   * will fail validation every time, so retrying it is pointless — re-check
-   * rather than re-queueing it blindly.
-   */
-  private get retryable(): UploadFile[] {
-    const maxBytes = this.parseMaxBytes();
-    return this.failedFiles.filter(
-      (f) => !!f.file && this.matchesAccept(f.file) && f.file.size <= maxBytes
-    );
-  }
-
-  get canUpload(): boolean {
-    if (this.disabled) return false;
-    const phase = this.phase;
-    if (phase === "uploading" || phase === "delayed") return false;
-    if (phase === "failed") return this.retryable.length > 0;
-    return this.pending.length > 0;
-  }
-
-  /** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
-  get primaryLabel(): string {
-    if (this.phase === "failed") return "Retry upload";
-    const n = this.files.length;
-    return n > 1 ? `Upload ${n} files` : "Upload";
-  }
-
-  /** The snapshot `<rel-upload-actions>` renders from. */
-  get state(): UploadState {
-    return {
-      phase: this.phase,
-      total: this.files.length,
-      failed: this.failedFiles.length,
-      canUpload: this.canUpload,
-      primaryLabel: this.primaryLabel,
-    };
-  }
-
-  private get listHeading(): string {
-    const n = this.files.length;
-    switch (this.phase) {
-      case "uploading":
-      case "delayed":
-        return `Uploading ${n} ${n === 1 ? "file" : "files"}`;
-      case "failed":
-        return `${n} ${n === 1 ? "file" : "files"} - ${this.failedFiles.length} failed`;
-      default:
-        return n === 1 ? "Selected file (1)" : `Selected files (${n})`;
-    }
-  }
-
-  private get hintText(): string {
-    if (this.hint) return this.hint;
-    const formats = this.acceptDisplay;
-    const size = this.maxSize ? ` - up to ${this.maxSize} per file` : "";
-    return `${formats}${size}`;
-  }
-
-  private get acceptDisplay(): string {
-    const tokens = this.accept
-      .split(",")
-      .map((s) => s.trim())
-      .filter(Boolean)
-      .map((tok) => {
-        if (tok.startsWith(".")) return tok.slice(1).toUpperCase();
-        if (tok.endsWith("/*")) return tok.slice(0, -2).toUpperCase();
-        return (tok.split("/").pop() ?? tok).toUpperCase();
-      });
-    if (tokens.length === 0) return "Any file type";
-    if (tokens.length === 1) return tokens[0];
-    return `${tokens.slice(0, -1).join(", ")} or ${tokens[tokens.length - 1]}`;
-  }
-
-  private get alertContent(): { type: "warning" | "error"; message1: string; message2: string } | null {
-    if (this.phase === "delayed") {
-      return {
-        type: "warning",
-        message1: "This is taking longer than usual",
-        message2:
-          "Large files can take a few minutes on a slow connection. You can leave this open or come back later.",
-      };
-    }
-    const failed = this.failedFiles.length;
-    if (failed > 0 && this.phase !== "uploading") {
-      const limit = this.maxSize ? `under ${this.maxSize} and ` : "";
-      return {
-        type: "error",
-        message1:
-          failed === 1 && this.files.length === 1
-            ? "We couldn't upload your file"
-            : `We couldn't upload ${failed} of your files`,
-        message2: `Check that each file is ${limit}in a supported format, then try again.`,
-      };
-    }
-    return null;
-  }
-
-  // ── validation ────────────────────────────────────────────────────────────
-
-  private parseMaxBytes(): number {
-    const s = this.maxSize.trim().toLowerCase();
-    if (!s) return Infinity;
-    const m = s.match(/^([\d.]+)\s*(b|kb|mb|gb)?$/);
-    if (!m) return Infinity;
-    const n = parseFloat(m[1]);
-    const unit = m[2] || "b";
-    const mult = unit === "gb" ? 1e9 : unit === "mb" ? 1e6 : unit === "kb" ? 1e3 : 1;
-    return n * mult;
-  }
-
-  private matchesAccept(file: File): boolean {
-    const raw = this.accept.trim();
-    if (!raw) return true;
-    const tokens = raw
-      .split(",")
-      .map((s) => s.trim().toLowerCase())
-      .filter(Boolean);
-    const name = file.name.toLowerCase();
-    const type = (file.type || "").toLowerCase();
-    return tokens.some((tok) => {
-      if (tok.startsWith(".")) return name.endsWith(tok);
-      if (tok.endsWith("/*")) return type.startsWith(tok.slice(0, -1));
-      return type === tok;
-    });
-  }
-
-  static fmtSize(bytes: number): string {
-    if (bytes < 1000) return `${bytes} B`;
-    if (bytes < 1e6) return `${(bytes / 1e3).toFixed(0)} KB`;
-    return `${(bytes / 1e6).toFixed(1)} MB`;
-  }
-
-  private static ext(name: string): string {
-    const i = name.lastIndexOf(".");
-    return i > -1 ? name.slice(i + 1).toUpperCase() : "FILE";
-  }
-
-  /**
-   * Validate and append. Invalid files are kept as `error` rows rather than
-   * dropped — that is how the Figma Failure state surfaces them.
-   */
-  private ingest(list: FileList | null) {
-    if (!list || list.length === 0) return;
-    const maxBytes = this.parseMaxBytes();
-    const incoming = this.multiple ? Array.from(list) : Array.from(list).slice(0, 1);
-
-    const added: UploadFile[] = [];
-    const rejected: UploadRejection[] = [];
-
-    for (const f of incoming) {
-      const entry: UploadFile = {
-        id: `rel-upload-${++uid}`,
-        name: f.name,
-        size: f.size,
-        status: "ready",
-        file: f,
-      };
-      if (!this.matchesAccept(f)) {
-        entry.status = "error";
-        entry.error = "unsupported file type";
-        rejected.push({ name: f.name, reason: "format", message: `${f.name}: unsupported file type` });
-      } else if (f.size > maxBytes) {
-        entry.status = "error";
-        entry.error = `file exceeds the ${this.maxSize} limit`;
-        rejected.push({
-          name: f.name,
-          reason: "size",
-          message: `${f.name}: exceeds ${this.maxSize}`,
-        });
-      }
-      added.push(entry);
-    }
-
-    // Replace same-named entries instead of duplicating them.
-    const names = new Set(added.map((f) => f.name));
-    const kept = this.multiple ? this.files.filter((f) => !names.has(f.name)) : [];
-    this.files = [...kept, ...added];
-
-    if (rejected.length) this.emit("rel-invalid", { rejected });
-    this.emit("rel-files-added", { added, rejected });
-    this.emit("rel-change", { files: this.files });
-    this.notify();
-  }
-
-  // ── upload orchestration (self-driving mode) ──────────────────────────────
-
-  private patch(id: string, partial: Partial<UploadFile>) {
-    this.files = this.files.map((f) => (f.id === id ? { ...f, ...partial } : f));
-    this.notify();
-  }
-
-  private startDelayTimer() {
-    this.stopDelayTimer();
-    if (this.delayThreshold <= 0) return;
-    this.delayTimer = setTimeout(() => {
-      if (this.files.some((f) => f.status === "uploading")) {
-        this.delayed = true;
-        this.notify();
-      }
-    }, this.delayThreshold);
-  }
-
-  private stopDelayTimer() {
-    if (this.delayTimer) clearTimeout(this.delayTimer);
-    this.delayTimer = undefined;
-  }
-
-  private async runBatch(targets: UploadFile[]) {
-    const uploader = this.uploader;
-    if (!uploader || targets.length === 0) return;
-
-    this.aborter = new AbortController();
-    const signal = this.aborter.signal;
-    this.startDelayTimer();
-
-    const queue = [...targets];
-    const workers = Array.from({ length: Math.max(1, this.concurrency) }, async () => {
-      while (queue.length) {
-        if (signal.aborted) return;
-        const item = queue.shift();
-        if (!item || !item.file) continue;
-
-        this.patch(item.id, { status: "uploading", progress: 0, loaded: 0, error: undefined });
-        try {
-          await uploader(item.file, {
-            file: item,
-            signal,
-            onProgress: (loaded, total) => {
-              const t = total ?? item.size;
-              const progress = t > 0 ? Math.min(100, Math.round((loaded / t) * 100)) : 0;
-              this.patch(item.id, { loaded, progress });
-              this.emit("rel-progress", { id: item.id, progress, loaded, total: t });
-            },
-          });
-          if (signal.aborted) {
-            this.patch(item.id, { status: "ready", progress: undefined, loaded: undefined });
-            return;
-          }
-          this.patch(item.id, { status: "success", progress: 100, loaded: item.size });
-          this.emit("rel-file-complete", { id: item.id, file: item.file });
-        } catch (err) {
-          if (signal.aborted) {
-            this.patch(item.id, { status: "ready", progress: undefined, loaded: undefined });
-            return;
-          }
-          const message = err instanceof Error ? err.message : String(err);
-          this.patch(item.id, { status: "error", error: message, progress: undefined });
-          this.emit("rel-file-error", { id: item.id, file: item.file, error: message });
-        }
-      }
-    });
-
-    await Promise.all(workers);
-
-    this.stopDelayTimer();
-    this.delayed = false;
-    this.aborter = undefined;
-
-    if (!signal.aborted) {
-      this.emit("rel-complete", {
-        succeeded: this.files.filter((f) => f.status === "success"),
-        failed: this.failedFiles,
-      });
-    }
-    this.notify();
-  }
-
-  // ── public API ────────────────────────────────────────────────────────────
-
-  /** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
-  upload() {
-    if (!this.canUpload) return;
-    const targets = this.pending;
-    this.emit("rel-upload", { files: targets });
-    if (this.uploader) void this.runBatch(targets);
-    else this.notify();
-  }
-
-  /** Re-queue every retryable failed row and send again. */
-  retry() {
-    const targets = this.retryable;
-    if (targets.length === 0) return;
-    const ids = new Set(targets.map((f) => f.id));
-    this.files = this.files.map((f) =>
-      ids.has(f.id) ? { ...f, status: "ready" as const, error: undefined, progress: undefined } : f
-    );
-    const requeued = this.files.filter((f) => ids.has(f.id));
-    this.emit("rel-retry", { files: requeued });
-    if (this.uploader) void this.runBatch(requeued);
-    else this.notify();
-  }
-
-  /** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
-  cancel() {
-    this.aborter?.abort();
-    this.stopDelayTimer();
-    this.delayed = false;
-    this.emit("rel-cancel");
-    this.notify();
-  }
-
-  /** Remove one row by id. */
-  removeFile(id: string) {
-    const target = this.files.find((f) => f.id === id);
-    this.files = this.files.filter((f) => f.id !== id);
-    this.emit("rel-remove", { id, file: target?.file });
-    this.emit("rel-change", { files: this.files });
-    this.notify();
-  }
-
-  /** Clear everything and abort in-flight transfers. */
-  reset() {
-    this.aborter?.abort();
-    this.stopDelayTimer();
-    this.files = [];
-    this.delayed = false;
-    if (this.inputEl) this.inputEl.value = "";
-    this.emit("rel-change", { files: this.files });
-    this.notify();
-  }
-
-  // ── events ────────────────────────────────────────────────────────────────
-
-  private emit(type: string, detail?: unknown) {
-    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
-  }
-
-  /**
-   * Emit `rel-state` only when the derived snapshot actually changes, so
-   * progress ticks don't spam `<rel-upload-actions>`.
-   */
-  private notify() {
-    const s = this.state;
-    const signature = `${s.phase}|${s.total}|${s.failed}|${s.canUpload}|${s.primaryLabel}`;
-    if (signature === this.lastSignature) return;
-    this.lastSignature = signature;
-    this.emit("rel-state", s);
-  }
-
-  private openPicker = () => {
-    if (this.disabled) return;
-    this.inputEl?.click();
-  };
-
-  private onInputChange = (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    this.ingest(input.files);
-    // Reset so re-picking the same file still fires change.
-    input.value = "";
-  };
-
-  private onDragOver = (e: DragEvent) => {
-    if (this.disabled) return;
-    e.preventDefault();
-    this.dragOver = true;
-  };
-
-  private onDragLeave = (e: DragEvent) => {
-    e.preventDefault();
-    this.dragOver = false;
-  };
-
-  private onDrop = (e: DragEvent) => {
-    e.preventDefault();
-    this.dragOver = false;
-    if (this.disabled) return;
-    this.ingest(e.dataTransfer?.files ?? null);
-  };
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Let a late-connecting <rel-upload-actions> pick up the initial state.
-    queueMicrotask(() => this.emit("rel-state", this.state));
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopDelayTimer();
-    this.aborter?.abort();
-  }
-
-  updated() {
-    this.notify();
-  }
-
-  // ── render ────────────────────────────────────────────────────────────────
-
-  private rowMeta(f: UploadFile): string {
-    switch (f.status) {
-      case "uploading": {
-        const pct = f.progress ?? 0;
-        const loaded = RelUpload.fmtSize(f.loaded ?? 0);
-        return `${pct}% - ${loaded} of ${RelUpload.fmtSize(f.size)}`;
-      }
-      case "success":
-        return `${RelUpload.ext(f.name)} - ${RelUpload.fmtSize(f.size)} - Uploaded`;
-      case "error":
-        return `Upload failed - ${f.error ?? "please try again"}`;
-      default: {
-        const base = `${RelUpload.ext(f.name)} - ${RelUpload.fmtSize(f.size)}`;
-        const busy = this.phase === "uploading" || this.phase === "delayed";
-        return busy ? `${base} - Waiting` : base;
-      }
-    }
-  }
-
-  private renderRow(f: UploadFile) {
-    return html`
-      <div class="row ${f.status}">
-        <rel-icon name="document" size="md"></rel-icon>
-
-        <div class="row-content">
-          <span class="row-name" title=${f.name}>${f.name}</span>
-          ${f.status === "uploading"
-            ? html`<rel-progress
-                mode="linear-determinate"
-                .value=${f.progress ?? 0}
-              ></rel-progress>`
-            : nothing}
-          <span class="row-meta">${this.rowMeta(f)}</span>
-        </div>
-
-        <div class="row-trailing">
-          ${f.status === "success"
-            ? html`<rel-icon
-                class="status-success"
-                name="check-circle"
-                size="md"
-                role="img"
-                aria-label="Uploaded"
-              ></rel-icon>`
-            : nothing}
-          ${f.status === "error"
-            ? html`<rel-icon
-                class="status-error"
-                name="error"
-                size="md"
-                role="img"
-                aria-label="Failed"
-              ></rel-icon>`
-            : nothing}
-          <button
-            class="remove"
-            aria-label="Remove ${f.name}"
-            ?disabled=${this.disabled}
-            @click=${() => this.removeFile(f.id)}
-          >
-            <rel-icon name="delete" size="md"></rel-icon>
-          </button>
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    const alert = this.alertContent;
-
-    return html`
-      <div class="body">
-        ${alert
-          ? html`<rel-alert
-              type=${alert.type}
-              appearance="subtle"
-              message1=${alert.message1}
-              message2=${alert.message2}
-            ></rel-alert>`
-          : nothing}
-
-        <div
-          class="dropzone ${this.dragOver ? "dragover" : ""}"
-          @click=${this.openPicker}
-          @dragover=${this.onDragOver}
-          @dragleave=${this.onDragLeave}
-          @drop=${this.onDrop}
-        >
-          <span class="icon-badge">
-            <rel-icon name="upload" size="md"></rel-icon>
-          </span>
-
-          <div class="dz-copy">
-            <p class="dz-title">${this.dropzoneTitle}</p>
-            <p class="dz-hint">${this.hintText}</p>
-          </div>
-
-          <button
-            class="browse"
-            type="button"
-            ?disabled=${this.disabled}
-            @click=${(e: Event) => {
-              e.stopPropagation();
-              this.openPicker();
-            }}
-          >
-            ${this.browseLabel}
-          </button>
-        </div>
-
-        ${this.files.length
-          ? html`<div class="file-list">
-              <p class="list-heading">${this.listHeading}</p>
-              <div class="rows" role="list">${this.files.map((f) => this.renderRow(f))}</div>
-            </div>`
-          : nothing}
-
-        <input
-          class="file-input"
-          type="file"
-          ?multiple=${this.multiple}
-          accept=${this.accept || nothing}
-          @change=${this.onInputChange}
-        />
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-upload": RelUpload;
-  }
-}