@jjlmoya/utils-tabletop 1.30.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.30.0",
+    "version": "1.32.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/token-stamp-studio/component.astro

@@ -20,7 +20,6 @@ const { ui } = Astro.props as { ui: TokenStampUI };
       <div class="stage-actions">
         <label class="button button-primary" for="token-image-input">{ui.chooseImage}</label>
         <input id="token-image-input" data-image-input type="file" accept="image/png,image/jpeg,image/webp,image/gif" hidden />
-        <button class="button button-quiet" type="button" data-clear-image>{ui.clearImage}</button>
         <button class="button button-quiet" type="button" data-copy>{ui.copy}</button>
         <button class="button button-primary" type="button" data-download>{ui.download}</button>
       </div>

package/src/tool/token-stamp-studio/dom-views.ts

@@ -34,21 +34,6 @@ function drawGeometry(ctx: CanvasRenderingContext2D, frame: FramePreset, size: n
   }
 }
 
-function drawStageGrid(ctx: CanvasRenderingContext2D, size: number): void {
-  ctx.fillStyle = '#111720';
-  ctx.fillRect(0, 0, size, size);
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.035)';
-  ctx.lineWidth = 1;
-  for (let offset = 0; offset <= size; offset += size / 8) {
-    ctx.beginPath();
-    ctx.moveTo(offset, 0);
-    ctx.lineTo(offset, size);
-    ctx.moveTo(0, offset);
-    ctx.lineTo(size, offset);
-    ctx.stroke();
-  }
-}
-
 function drawPlaceholder(ctx: CanvasRenderingContext2D, size: number): void {
   ctx.fillStyle = '#273242';
   ctx.fillRect(size * 0.26, size * 0.28, size * 0.48, size * 0.44);
@@ -89,12 +74,6 @@ function drawTextLayers(ctx: CanvasRenderingContext2D, state: TokenStampState, s
     ctx.textBaseline = 'middle';
     ctx.strokeText(text.text, text.x * size, text.y * size, size * 0.82);
     ctx.fillText(text.text, text.x * size, text.y * size, size * 0.82);
-    if (text.id === state.selectedTextId) {
-      ctx.setLineDash([8, 6]);
-      ctx.strokeStyle = '#fff4d6';
-      ctx.lineWidth = 2;
-      ctx.strokeRect(text.x * size - size * 0.25, text.y * size - text.size * 0.7, size * 0.5, text.size * 1.4);
-    }
     ctx.restore();
   });
 }
@@ -129,27 +108,21 @@ function drawFrameIcon(canvas: HTMLCanvasElement, frame: FramePreset, state: Tok
   drawFrame(ctx, frame, { ...state, borderWidth: 7 }, size);
 }
 
-export function drawTokenCanvas(canvas: HTMLCanvasElement, state: TokenStampState, image: HTMLImageElement | null, includeStageGrid = true): void {
+export function drawTokenCanvas(canvas: HTMLCanvasElement, state: TokenStampState, image: HTMLImageElement | null): void {
   const size = 640;
-  canvas.width = size;
-  canvas.height = size;
+  canvas.width = size; canvas.height = size;
   const ctx = canvas.getContext('2d');
   if (!ctx) return;
   const frame = getFramePreset(state.frameId);
-  if (includeStageGrid) drawStageGrid(ctx, size);
-  else ctx.clearRect(0, 0, size, size);
-  ctx.save();
-  drawGeometry(ctx, frame, size);
-  ctx.clip();
+  ctx.clearRect(0, 0, size, size);
+  ctx.save(); drawGeometry(ctx, frame, size); ctx.clip();
   ctx.fillStyle = state.background;
   ctx.fillRect(0, 0, size, size);
   drawImage(ctx, image, state, size);
   if (state.overlayOpacity > 0) {
-    ctx.fillStyle = hexToRgba(state.overlay, state.overlayOpacity);
-    ctx.fillRect(0, 0, size, size);
+    ctx.fillStyle = hexToRgba(state.overlay, state.overlayOpacity); ctx.fillRect(0, 0, size, size);
   }
-  ctx.restore();
-  drawFrame(ctx, frame, state, size);
+  ctx.restore(); drawFrame(ctx, frame, state, size);
   drawTextLayers(ctx, state, size);
 }
 
@@ -204,7 +177,7 @@ function createMarkerPreview(marker: SavedMarker): HTMLCanvasElement {
   const preview = document.createElement('canvas');
   preview.className = 'marker-card-preview';
   const drawPreview = (image: HTMLImageElement | null) => {
-    if (image?.complete && image.naturalWidth > 0) drawTokenCanvas(preview, marker.state, image, false);
+    if (image?.complete && image.naturalWidth > 0) drawTokenCanvas(preview, marker.state, image);
     else drawFrameIcon(preview, getFramePreset(marker.state.frameId), { ...marker.state, borderWidth: Math.max(5, marker.state.borderWidth / 2) });
   };
   drawPreview(null);

package/src/tool/token-stamp-studio/i18n/de.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Porträttönung',
   stageLabel: 'Live Token Schmiede',
   chooseImage: 'Porträt wählen',
-  clearImage: 'Porträt entfernen',
   positionHint: 'Ziehe das Porträt oder Beschriftungen direkt auf den Token.',
   markerName: 'Marker Name',
   markerNamePlaceholder: 'Marker benennen',

package/src/tool/token-stamp-studio/i18n/en.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Portrait tint',
   stageLabel: 'Live token forge',
   chooseImage: 'Choose portrait',
-  clearImage: 'Clear portrait',
   positionHint: 'Drag the portrait or a label directly on the token.',
   markerName: 'Marker name',
   markerNamePlaceholder: 'Name this marker',

package/src/tool/token-stamp-studio/i18n/es.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Tinte de retrato',
   stageLabel: 'Forja de fichas en vivo',
   chooseImage: 'Elegir retrato',
-  clearImage: 'Quitar retrato',
   positionHint: 'Arrastra el retrato o las etiquetas directamente sobre la ficha.',
   markerName: 'Nombre del marcador',
   markerNamePlaceholder: 'Nombra este marcador',

package/src/tool/token-stamp-studio/i18n/fr.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Teinte du portrait',
   stageLabel: 'Forge de jetons en direct',
   chooseImage: 'Choisir un portrait',
-  clearImage: 'Effacer le portrait',
   positionHint: 'Faites glisser le portrait ou les étiquettes directement sur le jeton.',
   markerName: 'Nom du marqueur',
   markerNamePlaceholder: 'Nommer ce marqueur',

package/src/tool/token-stamp-studio/i18n/id.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Opasitas potret',
   stageLabel: 'Arena pembuat token',
   chooseImage: 'Pilih potret',
-  clearImage: 'Hapus potret',
   positionHint: 'Geser potret atau label langsung di atas token.',
   markerName: 'Nama penanda',
   markerNamePlaceholder: 'Beri nama penanda ini',

package/src/tool/token-stamp-studio/i18n/it.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Tinta ritratto',
   stageLabel: 'Fucina token in tempo reale',
   chooseImage: 'Scegli ritratto',
-  clearImage: 'Rimuovi ritratto',
   positionHint: 'Trascina il ritratto o le etichette direttamente sul token.',
   markerName: 'Nome segnalino',
   markerNamePlaceholder: 'Assegna un nome a questo segnalino',

package/src/tool/token-stamp-studio/i18n/ja.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'ポートレート不透明度',
   stageLabel: 'ライブコマ作成スタジオ',
   chooseImage: '画像を選択',
-  clearImage: '画像をクリア',
   positionHint: 'コマ上で直接画像やラベルをドラッグして移動できます。',
   markerName: 'マーカー名',
   markerNamePlaceholder: 'マーカーの名前を入力',

package/src/tool/token-stamp-studio/i18n/ko.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: '초상화 투명도',
   stageLabel: '실시간 토큰 제작소',
   chooseImage: '초상화 선택',
-  clearImage: '초상화 지우기',
   positionHint: '토큰 위에서 직접 이미지나 라벨을 드래그하여 이동하세요.',
   markerName: '마커 이름',
   markerNamePlaceholder: '마커 이름 입력',

package/src/tool/token-stamp-studio/i18n/nl.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Portrettint',
   stageLabel: 'Live token smederij',
   chooseImage: 'Kies portret',
-  clearImage: 'Portret wissen',
   positionHint: 'Sleep het portret of de labels rechtstreeks op de token.',
   markerName: 'Markernaam',
   markerNamePlaceholder: 'Geef deze marker een naam',

package/src/tool/token-stamp-studio/i18n/pl.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Odcień portretu',
   stageLabel: 'Kuźnia żetonów na żywo',
   chooseImage: 'Wybierz portret',
-  clearImage: 'Usuń portret',
   positionHint: 'Przeciągnij portret lub etykiety bezpośrednio na żetonie.',
   markerName: 'Nazwa znacznika',
   markerNamePlaceholder: 'Nazwij ten znacznik',

package/src/tool/token-stamp-studio/i18n/pt.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Tinta do retrato',
   stageLabel: 'Forja de tokens em tempo real',
   chooseImage: 'Escolher retrato',
-  clearImage: 'Remover retrato',
   positionHint: 'Arraste o retrato ou as etiquetas diretamente sobre o token.',
   markerName: 'Nome do marcador',
   markerNamePlaceholder: 'Dê um nome a este marcador',

package/src/tool/token-stamp-studio/i18n/ru.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Оттенок портрета',
   stageLabel: 'Кузница жетонов',
   chooseImage: 'Выбрать портрет',
-  clearImage: 'Удалить портрет',
   positionHint: 'Перетаскивайте портрет и подписи прямо на жетоне.',
   markerName: 'Название маркера',
   markerNamePlaceholder: 'Назовите этот маркер',

package/src/tool/token-stamp-studio/i18n/sv.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Porträttoning',
   stageLabel: 'Live token-smedja',
   chooseImage: 'Välj porträtt',
-  clearImage: 'Ta bort porträtt',
   positionHint: 'Dra porträttet eller etiketter direkt på din token.',
   markerName: 'Markörnamn',
   markerNamePlaceholder: 'Namnge denna markör',

package/src/tool/token-stamp-studio/i18n/tr.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: 'Portre tonu',
   stageLabel: 'Canlı pul atölyesi',
   chooseImage: 'Portre seçin',
-  clearImage: 'Portreyi kaldır',
   positionHint: 'Portreyi veya etiketleri doğrudan pulun üzerine sürükleyin.',
   markerName: 'İşaretçi adı',
   markerNamePlaceholder: 'Bu işaretçiyi adlandırın',

package/src/tool/token-stamp-studio/i18n/zh.ts

@@ -17,7 +17,6 @@ const ui: TokenStampUI = {
   overlayOpacityLabel: '头像遮罩透明度',
   stageLabel: '实时棋子锻造台',
   chooseImage: '选择头像',
-  clearImage: '清除头像',
   positionHint: '可以直接在棋子上拖动调整头像或文字标签的位置。',
   markerName: '标记名称',
   markerNamePlaceholder: '为此标记命名',

package/src/tool/token-stamp-studio/token-stamp-studio.css

@@ -14,6 +14,9 @@
   --n-stage-text: #b9c5d6;
   --n-stage-highlight: #fff4d6;
   --n-accent-ink: #202a39;
+  --n-action: #9f2f24;
+  --n-action-hover: #7f241c;
+  --n-action-ink: #fff;
 }
 
 .theme-dark {
@@ -32,6 +35,9 @@
   --n-stage-text: #b9c5d6;
   --n-stage-highlight: #fff4d6;
   --n-accent-ink: #202a39;
+  --n-action: #9f2f24;
+  --n-action-hover: #7f241c;
+  --n-action-ink: #fff;
 }
 
 .token-stamp-studio {
@@ -152,7 +158,9 @@
   background: var(--n-success);
 }
 .token-stage {
-  background: var(--n-stage);
+  background-color: var(--n-stage);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
+  background-size: 12.5% 12.5%;
   border: 1px solid var(--n-stage-soft);
   padding: clamp(0.75rem, 4vw, 2.2rem);
   position: relative;
@@ -434,11 +442,17 @@
   text-decoration: none;
 }
 .button-primary {
-  background: var(--n-accent);
-  border-color: var(--n-accent);
-  color: var(--n-accent-ink);
+  background: var(--n-action);
+  border-color: var(--n-action);
+  color: var(--n-action-ink);
   font-weight: 800;
 }
+.button-primary:hover,
+.button-primary:focus-visible {
+  background: var(--n-action-hover);
+  border-color: var(--n-action-hover);
+  color: var(--n-action-ink);
+}
 .button-quiet {
   background: var(--n-card-soft);
   color: var(--n-text);

package/src/tool/token-stamp-studio/ui.ts

@@ -14,7 +14,6 @@ export interface TokenStampUI {
   overlayOpacityLabel: string;
   stageLabel: string;
   chooseImage: string;
-  clearImage: string;
   positionHint: string;
   markerName: string;
   markerNamePlaceholder: string;

package/src/tool/token-stamp-studio/workspace-media.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { zipBlobs } from './workspace-media';
+
+describe('zipBlobs', () => {
+  it('creates a readable zip with every exported png', async () => {
+    const archive = await zipBlobs([
+      { name: 'hero.png', blob: new Blob([new Uint8Array([1, 2, 3])]) },
+      { name: 'mage.png', blob: new Blob([new Uint8Array([4, 5, 6])]) },
+    ]);
+    const bytes = new Uint8Array(await archive.arrayBuffer());
+    const end = new DataView(bytes.buffer, bytes.byteOffset + bytes.byteLength - 22, 22);
+    const content = new TextDecoder().decode(bytes);
+
+    expect(archive.type).toBe('application/zip');
+    expect(bytes.slice(0, 4)).toEqual(new Uint8Array([0x50, 0x4b, 0x03, 0x04]));
+    expect(end.getUint16(8, true)).toBe(2);
+    expect(content).toContain('hero.png');
+    expect(content).toContain('mage.png');
+  });
+});

package/src/tool/token-stamp-studio/workspace-media.ts

@@ -23,14 +23,108 @@ export function downloadCanvas(canvas: HTMLCanvasElement, name: string): void {
   link.click();
 }
 
+export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error('Canvas could not be exported'));
+    }, 'image/png');
+  });
+}
+
+export function downloadBlob(blob: Blob, name: string): void {
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  link.download = name;
+  link.href = url;
+  link.click();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
 export async function copyCanvas(canvas: HTMLCanvasElement): Promise<boolean> {
   if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') return false;
-  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
-  if (!blob) return false;
+  const blob = await canvasToBlob(canvas);
   await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
   return true;
 }
 
+interface ZipEntry {
+  name: string;
+  data: Uint8Array;
+}
+
+const crc32Table = Array.from({ length: 256 }, (_, value) => {
+  let crc = value;
+  for (let bit = 0; bit < 8; bit += 1) crc = crc & 1 ? 0xedb88320 ^ (crc >>> 1) : crc >>> 1;
+  return crc >>> 0;
+});
+
+function crc32(data: Uint8Array): number {
+  let crc = 0xffffffff;
+  data.forEach((value) => { crc = crc32Table[(crc ^ value) & 0xff]! ^ (crc >>> 8); });
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function writeUint16(view: DataView, offset: number, value: number): void {
+  view.setUint16(offset, value, true);
+}
+
+function writeUint32(view: DataView, offset: number, value: number): void {
+  view.setUint32(offset, value, true);
+}
+
+function createLocalEntry(entry: ZipEntry, name: Uint8Array, checksum: number): Uint8Array {
+  const local = new Uint8Array(30 + name.length + entry.data.length);
+  const view = new DataView(local.buffer);
+  writeUint32(view, 0, 0x04034b50); writeUint16(view, 4, 20); writeUint16(view, 6, 0x800);
+  writeUint16(view, 8, 0); writeUint16(view, 10, 0); writeUint16(view, 12, 0);
+  writeUint32(view, 14, checksum); writeUint32(view, 18, entry.data.length); writeUint32(view, 22, entry.data.length);
+  writeUint16(view, 26, name.length); local.set(name, 30); local.set(entry.data, 30 + name.length);
+  return local;
+}
+
+function createCentralEntry(entry: ZipEntry, name: Uint8Array, checksum: number, offset: number): Uint8Array {
+  const central = new Uint8Array(46 + name.length);
+  const view = new DataView(central.buffer);
+  writeUint32(view, 0, 0x02014b50); writeUint16(view, 4, 20); writeUint16(view, 6, 20); writeUint16(view, 8, 0x800);
+  writeUint16(view, 10, 0); writeUint16(view, 12, 0); writeUint16(view, 14, 0); writeUint32(view, 16, checksum);
+  writeUint32(view, 20, entry.data.length); writeUint32(view, 24, entry.data.length); writeUint16(view, 28, name.length);
+  writeUint16(view, 30, 0); writeUint16(view, 32, 0); writeUint16(view, 34, 0); writeUint16(view, 36, 0);
+  writeUint32(view, 38, 0); writeUint32(view, 42, offset); central.set(name, 46);
+  return central;
+}
+
+function createZipEnd(entryCount: number, centralSize: number, offset: number): Uint8Array {
+  const end = new Uint8Array(22);
+  const view = new DataView(end.buffer);
+  writeUint32(view, 0, 0x06054b50); writeUint16(view, 8, entryCount); writeUint16(view, 10, entryCount);
+  writeUint32(view, 12, centralSize); writeUint32(view, 16, offset);
+  return end;
+}
+
+export async function zipBlobs(files: Array<{ name: string; blob: Blob }>): Promise<Blob> {
+  const entries: ZipEntry[] = await Promise.all(files.map(async ({ name, blob }) => ({
+    name,
+    data: new Uint8Array(await blob.arrayBuffer()),
+  })));
+  const encoder = new TextEncoder();
+  const localParts: Uint8Array[] = [];
+  const centralParts: Uint8Array[] = [];
+  let offset = 0;
+
+  entries.forEach((entry) => {
+    const name = encoder.encode(entry.name);
+    const checksum = crc32(entry.data);
+    const local = createLocalEntry(entry, name, checksum);
+    localParts.push(local);
+    centralParts.push(createCentralEntry(entry, name, checksum, offset));
+    offset += local.length;
+  });
+
+  const centralSize = centralParts.reduce((total, part) => total + part.length, 0);
+  return new Blob([...localParts, ...centralParts, createZipEnd(entries.length, centralSize, offset)], { type: 'application/zip' });
+}
+
 export function cleanName(name: string): string {
   return name.replace(/\.[^/.]+$/, '').replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '').toLowerCase() || 'tabletop-token';
 }

package/src/tool/token-stamp-studio/workspace.ts

@@ -1,5 +1,5 @@
 import { drawTokenCanvas } from './dom-views';
-import { loadImage, readFile, cleanName, copyCanvas, downloadCanvas } from './workspace-media';
+import { canvasToBlob, cleanName, copyCanvas, downloadBlob, downloadCanvas, loadImage, readFile, zipBlobs } from './workspace-media';
 import type { StudioElements } from './controller';
 import type { SavedMarker, TokenStampState } from './types';
 import type { TokenStampUI } from './ui';
@@ -16,12 +16,6 @@ export interface WorkspaceContext {
   setImage: (image: HTMLImageElement | null) => void;
 }
 
-function getElement<T extends Element>(root: HTMLElement, selector: string): T {
-  const element = root.querySelector<T>(selector);
-  if (!element) throw new Error(`Token stamp studio element missing: ${selector}`);
-  return element;
-}
-
 function attachLibraryEvents(elements: StudioElements, context: WorkspaceContext): void {
   elements.library.addEventListener('click', (event) => {
     const target = event.target as HTMLElement;
@@ -36,10 +30,9 @@ function attachLibraryEvents(elements: StudioElements, context: WorkspaceContext
 }
 
 export function attachWorkspaceEvents(elements: StudioElements, context: WorkspaceContext): void {
-  getElement<HTMLButtonElement>(elements.root, '[data-clear-image]').addEventListener('click', () => context.setState({ ...context.getState(), imageSrc: null, imageName: '', imageX: 0, imageY: 0 }));
   const exportCanvas = (): HTMLCanvasElement => {
     const canvas = document.createElement('canvas');
-    drawTokenCanvas(canvas, context.getState(), context.getImage(), false);
+    drawTokenCanvas(canvas, context.getState(), context.getImage());
     return canvas;
   };
   elements.download.addEventListener('click', () => downloadCanvas(exportCanvas(), cleanName(context.getState().imageName)));
@@ -62,22 +55,53 @@ async function loadDroppedFile(file: File, context: WorkspaceContext): Promise<H
   return image;
 }
 
-async function exportBatch(files: File[], state: TokenStampState): Promise<void> {
-  for (const file of files) {
-    const source = await readFile(file);
-    const image = await loadImage(source);
-    const canvas = document.createElement('canvas');
-    drawTokenCanvas(canvas, { ...state, imageSrc: source, imageName: file.name }, image, false);
-    downloadCanvas(canvas, cleanName(file.name));
+async function exportBatch(files: File[], state: TokenStampState, onProgress: (current: number) => void): Promise<{ exported: number; failed: number }> {
+  const exports: Array<{ name: string; blob: Blob }> = [];
+  const names = new Set<string>();
+  let failed = 0;
+  for (const [index, file] of files.entries()) {
+    try {
+      const source = await readFile(file);
+      const image = await loadImage(source);
+      const canvas = document.createElement('canvas');
+      drawTokenCanvas(canvas, { ...state, imageSrc: source, imageName: file.name }, image);
+      const baseName = cleanName(file.name);
+      let name = `${baseName}.png`;
+      let suffix = 2;
+      while (names.has(name)) name = `${baseName}-${suffix++}.png`;
+      names.add(name);
+      exports.push({ name, blob: await canvasToBlob(canvas) });
+    } catch {
+      failed += 1;
+    }
+    onProgress(index + 1);
   }
+  if (exports.length > 0) downloadBlob(await zipBlobs(exports), 'tabletop-token-batch.zip');
+  return { exported: exports.length, failed };
 }
 
 export function attachBatchEvents(elements: StudioElements, context: WorkspaceContext): void {
   let files: File[] = [];
+  let busy = false;
   elements.batchInput.addEventListener('change', () => {
     files = Array.from(elements.batchInput.files ?? []);
+    elements.batchInput.value = '';
     elements.batchStatus.textContent = files.length ? context.ui.batchReady.replace('{count}', String(files.length)) : context.ui.batchHint;
     elements.batchDownload.disabled = files.length === 0;
   });
-  elements.batchDownload.addEventListener('click', () => void exportBatch(files, context.getState()));
+  elements.batchDownload.addEventListener('click', () => {
+    if (busy || files.length === 0) return;
+    busy = true;
+    elements.batchDownload.disabled = true;
+    elements.batchDownload.setAttribute('aria-busy', 'true');
+    void exportBatch(files, context.getState(), (current) => {
+      elements.batchStatus.textContent = `${current}/${files.length}`;
+    }).then(({ exported, failed }) => {
+      elements.batchStatus.textContent = failed ? `${exported}/${files.length}` : String(exported);
+    }).finally(() => {
+      busy = false;
+      elements.batchDownload.disabled = files.length === 0;
+      elements.batchDownload.removeAttribute('aria-busy');
+    });
+  });
 }