@masters-union/union-stack 0.3.17 → 0.4.1

package/dist/picker.d.cts

@@ -52,6 +52,7 @@ declare class Picker {
     private addFiles;
     private renderItem;
     private replaceItemFile;
+    private removeItem;
     private openEditor;
     private statusIcon;
     private statusLabel;

package/dist/picker.d.ts

@@ -52,6 +52,7 @@ declare class Picker {
     private addFiles;
     private renderItem;
     private replaceItemFile;
+    private removeItem;
     private openEditor;
     private statusIcon;
     private statusLabel;

package/dist/picker.js

@@ -450,14 +450,56 @@ var BASE_CSS = `
   width: 28px; height: 28px;
   display: inline-flex; align-items: center; justify-content: center;
   color: var(--us-muted); border-radius: 6px;
-  transition: color 100ms, background 0ms;
+  transition: color 100ms, background 0ms, transform 90ms ease;
 }
 .us-file-action:hover { background: var(--us-overlay); color: var(--us-fg); }
 .us-file-action:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 1px; }
+.us-file-action:active { transform: scale(0.92); }
 .us-file-action svg { width: 15px; height: 15px; }
 .us-file-action[data-edited="true"] { color: var(--us-accent); }
 .us-file:not([data-state="queued"]) .us-file-action { display: none; }
 
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 per-row remove button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* Destructive affordance \u2014 reads as danger on hover, not before. */
+.us-file-remove:hover {
+  color: var(--us-danger);
+  background: color-mix(in srgb, var(--us-danger) 12%, transparent);
+}
+/* Rows that failed validation at selection time keep their remove button so
+   the user can clear them (the generic rule above hides non-queued actions). */
+.us-file[data-state="failed"] .us-file-remove { display: inline-flex; }
+/* Once upload starts the batch is locked \u2014 no row removal anywhere. */
+.us-picker[data-uploading="true"] .us-file-remove { display: none; }
+
+/* Row exit: content slips up and fades (130ms), then the emptied slot
+   collapses (190ms, same spring-out curve as the entrance) so neighbors
+   glide into place instead of snapping. Total \u2248240ms \u2014 faster than the
+   280ms entrance, per exit-faster-than-enter. */
+.us-file[data-removing="true"] {
+  animation: none;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+  height: 0 !important;
+  min-height: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important;
+  overflow: hidden;
+  transition:
+    opacity      130ms cubic-bezier(0.4, 0, 1, 1),
+    transform    130ms cubic-bezier(0.4, 0, 1, 1),
+    height       190ms cubic-bezier(0.16, 1, 0.3, 1) 50ms,
+    padding      190ms cubic-bezier(0.16, 1, 0.3, 1) 50ms,
+    margin       190ms cubic-bezier(0.16, 1, 0.3, 1) 50ms,
+    border-width 190ms cubic-bezier(0.16, 1, 0.3, 1) 50ms;
+}
+/* Absorb the flex gap the row leaves behind so the list height lands exactly
+   where it will be once the node is detached \u2014 no end-of-animation snap. */
+.us-file[data-removing="true"]:not(:last-child) { margin-bottom: -8px !important; }
+.us-file[data-removing="true"]:last-child:not(:only-child) { margin-top: -8px !important; }
+
 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 image editor overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .us-editor {
   position: absolute; inset: 0; z-index: 2;
@@ -1251,7 +1293,7 @@ function mergeConfig(server, runtime) {
   return merged;
 }
 var DEFAULT_TITLE = "Upload files";
-var FOOTER_LINK = "https://unionstack.link";
+var FOOTER_LINK = "https://unionstack.in";
 var ICON2 = {
   upload: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
   fileUp: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>`,
@@ -1269,7 +1311,8 @@ var ICON2 = {
   zap: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,
   device: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`,
   link: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"/></svg>`,
-  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`
+  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`
 };
 function iconForMime(mime) {
   if (!mime) return ICON2.file;
@@ -1799,6 +1842,16 @@ var Picker = class {
       row.appendChild(edit);
       item.$edit = edit;
     }
+    if (item.state === "queued" || item.state === "failed") {
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "us-file-action us-file-remove";
+      remove.setAttribute("aria-label", `Remove ${item.file.name}`);
+      remove.title = "Remove file";
+      remove.innerHTML = ICON2.trash;
+      remove.onclick = () => this.removeItem(item);
+      row.appendChild(remove);
+    }
     const status = el2("div", "us-file-status");
     status.setAttribute("aria-label", this.statusLabel(item));
     status.innerHTML = this.statusIcon(item.state);
@@ -1844,6 +1897,57 @@ var Picker = class {
     }
     if (item.$edit) item.$edit.dataset.edited = edited ? "true" : "false";
   }
+  // Drop a file from the batch before upload starts. The row animates out
+  // (content fades, then the slot collapses so neighbors glide up) unless the
+  // user prefers reduced motion. State is pruned synchronously — only the DOM
+  // exit is deferred.
+  removeItem(item) {
+    if (this.uploadStarted) return;
+    const idx = this.items.indexOf(item);
+    if (idx === -1) return;
+    this.items.splice(idx, 1);
+    item.validateSeq = ++this.validateSeqCounter;
+    item.validating = false;
+    if (item.objectUrl) {
+      URL.revokeObjectURL(item.objectUrl);
+      item.objectUrl = void 0;
+    }
+    const row = item.$row;
+    item.$row = void 0;
+    if (row) {
+      if (row.contains(document.activeElement)) {
+        const rows = Array.from(
+          this.$list?.querySelectorAll(".us-file:not([data-removing])") ?? []
+        );
+        const pos = rows.indexOf(row);
+        const neighbor = rows[pos + 1] ?? rows[pos - 1];
+        const target = neighbor?.querySelector(".us-file-remove") ?? this.$panel?.querySelector('.us-source-tab[data-active="true"]') ?? this.$panel;
+        target?.focus();
+      }
+      const reduceMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reduceMotion) {
+        row.remove();
+      } else {
+        row.style.height = `${row.offsetHeight}px`;
+        void row.offsetHeight;
+        row.dataset.removing = "true";
+        let removed = false;
+        const finalize = () => {
+          if (!removed) {
+            removed = true;
+            row.remove();
+          }
+        };
+        row.addEventListener("transitionend", (e) => {
+          if (e.target === row && e.propertyName === "height") finalize();
+        });
+        setTimeout(finalize, 400);
+      }
+    }
+    this.updateSummary();
+    this.refreshConfirm();
+    this.maybeAutoUpload();
+  }
   // Mount the image editor overlay on top of the picker panel for the given
   // queued item. The editor calls back with either an edited File (Apply) or
   // nothing (Cancel/Back).
@@ -2063,6 +2167,7 @@ var Picker = class {
     const queued = this.items.filter((i) => i.state === "queued");
     if (queued.length === 0) return;
     this.uploadStarted = true;
+    this.$panel?.setAttribute("data-uploading", "true");
     if (this.$confirm) {
       this.$confirm.disabled = true;
       this.$confirm.textContent = "Uploading\u2026";