@shelamkoff/rector 1.0.0

package/dist/plugins/gallery/slot.js

@@ -0,0 +1,260 @@
+import { CSS } from './css.js'
+import { setSafeUrlAttribute } from '../../shared/sanitize/sanitizeUrl.js'
+import { isSupportedImageFile } from '../shared/fileInput.js'
+
+/**
+ * @typedef {Object} SlotDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {(index: number) => void} onRemoveImage
+ * @property {(from: number, to: number) => void} onSwapImages
+ * @property {() => void} syncCaptions
+ *   Called before any structural mutation that re-renders — flushes
+ *   in-flight contenteditable text into `state.data`.
+ * @property {() => import('./state.js').GalleryState | undefined} getState
+ *   Indirect access used by drag handlers, since they need the live
+ *   `dragIndex` field on state.
+ */
+
+/**
+ * Build a filled slot with image, caption, remove button, and drag.
+ * `index` is the global image index.
+ *
+ * @param {{ url: string, caption: string }} img
+ * @param {number} index
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createFilledSlot(img, index, signal, deps) {
+  const slot = document.createElement('div')
+  slot.className = `${CSS.slot} ${CSS.slotFilled}`
+  slot.dataset.index = String(index)
+  slot.draggable = !deps.readOnly
+
+  const image = document.createElement('img')
+  image.className = CSS.slotImg
+  setSafeUrlAttribute(image, 'src', img.url, 'media')
+  image.alt = img.caption || ''
+  image.draggable = false
+  image.loading = 'lazy'
+  slot.appendChild(image)
+
+  addCaption(
+    slot,
+    img,
+    () => parseInt(slot.dataset.index || slot.dataset.slot || '0', 10),
+    signal,
+    deps,
+  )
+
+  if (!deps.readOnly) {
+    addRemoveBtn(slot, deps.t('delete', 'Delete'), () => {
+      const i = parseInt(slot.dataset.index || slot.dataset.slot || '0', 10)
+      deps.syncCaptions()
+      deps.onRemoveImage(i)
+    }, signal)
+    attachSlotDrag(slot, index, signal, deps)
+  }
+  return slot
+}
+
+/**
+ * Build an unfilled placeholder for a template slot.
+ *
+ * @param {number} slotIndex
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createEmptySlot(slotIndex, deps) {
+  const slot = document.createElement('div')
+  slot.className = `${CSS.slot} ${CSS.slotEmpty}`
+  slot.dataset.slot = String(slotIndex)
+
+  const ph = document.createElement('div')
+  ph.className = CSS.slotPlaceholder
+  ph.textContent = `${deps.t('slot', 'Slot')} ${slotIndex + 1}`
+  slot.appendChild(ph)
+
+  return slot
+}
+
+/**
+ * Build a draggable image item displayed outside the active template slots.
+ *
+ * @param {{ url: string, caption: string }} img
+ * @param {number} globalIndex
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createOverflowItem(img, globalIndex, signal, deps) {
+  const item = document.createElement('div')
+  item.className = CSS.overflowItem
+  item.dataset.index = String(globalIndex)
+  item.draggable = !deps.readOnly
+
+  const imgEl = document.createElement('img')
+  imgEl.className = CSS.slotImg
+  setSafeUrlAttribute(imgEl, 'src', img.url, 'media')
+  imgEl.alt = img.caption || ''
+  imgEl.loading = 'lazy'
+  imgEl.draggable = false
+  item.appendChild(imgEl)
+
+  if (!deps.readOnly) {
+    addRemoveBtn(item, deps.t('delete', 'Delete'), () => {
+      deps.syncCaptions()
+      deps.onRemoveImage(globalIndex)
+    }, signal)
+    attachSlotDrag(item, globalIndex, signal, deps)
+  }
+  return item
+}
+
+/**
+ * Attach external (file from OS) drop to a container.
+ *
+ * @param {HTMLElement} el
+ * @param {AbortSignal} signal
+ * @param {(files: File[]) => void} onFiles
+ * @returns {void}
+ */
+export function attachExternalDrop(el, signal, onFiles) {
+  el.addEventListener('dragover', (e) => { e.preventDefault() }, { signal })
+  el.addEventListener('drop', (e) => {
+    e.preventDefault()
+    const files = [...(e.dataTransfer?.files || [])].filter(isSupportedImageFile)
+    if (files.length > 0) onFiles(files)
+  }, { signal })
+}
+
+// ── internal helpers ────────────────────────────────────────────────────────
+
+/**
+ * @param {HTMLElement} parent
+ * @param {{ url: string, caption: string }} image
+ * @param {() => number} getIndex
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ */
+function addCaption(parent, image, getIndex, signal, deps) {
+  const captionEl = document.createElement('div')
+  captionEl.className = CSS.slotCaption
+  captionEl.contentEditable = deps.readOnly ? 'false' : 'true'
+  captionEl.dataset.placeholder = deps.t('caption', 'Caption')
+
+  const isEmpty = !image.caption?.trim()
+  if (isEmpty) {
+    captionEl.setAttribute('data-empty', 'true')
+  } else {
+    captionEl.textContent = image.caption
+  }
+
+  if (deps.readOnly) {
+    parent.appendChild(captionEl)
+    return
+  }
+
+  captionEl.addEventListener('input', () => {
+    const state = deps.getState()
+    if (!state) return
+    const idx = getIndex()
+    if (state.data.images[idx]) {
+      const text = captionEl.textContent?.trim()
+      state.data.images[idx].caption = text || ''
+    }
+    captionEl.textContent?.trim()
+      ? captionEl.removeAttribute('data-empty')
+      : captionEl.setAttribute('data-empty', 'true')
+    const imageElement = parent.querySelector(`.${CSS.slotImg}`)
+    if (imageElement instanceof HTMLImageElement) imageElement.alt = captionEl.textContent?.trim() || ''
+  }, { signal })
+  captionEl.addEventListener('focus', () => captionEl.removeAttribute('data-empty'), { signal })
+  captionEl.addEventListener('blur', () => {
+    if (!captionEl.textContent?.trim()) {
+      captionEl.textContent = ''
+      captionEl.setAttribute('data-empty', 'true')
+    }
+  }, { signal })
+  captionEl.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); captionEl.blur(); return }
+    if (e.key === 'Backspace' && !captionEl.textContent?.trim()) {
+      e.preventDefault(); e.stopPropagation(); return
+    }
+    // Let modifier combos (Ctrl+Z, Ctrl+A, etc.) bubble to ShortcutRegistry
+    if (!e.ctrlKey && !e.metaKey) e.stopPropagation()
+  }, { signal })
+
+  parent.appendChild(captionEl)
+}
+
+/**
+ * @param {HTMLElement} parent
+ * @param {string} label
+ * @param {() => void} onRemove
+ * @param {AbortSignal} signal
+ */
+function addRemoveBtn(parent, label, onRemove, signal) {
+  const btn = document.createElement('button')
+  btn.type = 'button'
+  btn.className = CSS.slotRemove
+  btn.innerHTML = '×'
+  btn.setAttribute('aria-label', label)
+  btn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+  btn.addEventListener('click', (e) => { e.stopPropagation(); onRemove() }, { signal })
+  parent.appendChild(btn)
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {number} index
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ */
+function attachSlotDrag(el, index, signal, deps) {
+  const captionEl = el.querySelector(`.${CSS.slotCaption}`)
+
+  el.addEventListener('dragstart', (e) => {
+    if (document.activeElement === captionEl) { e.preventDefault(); return }
+    const state = deps.getState()
+    if (state) state.dragIndex = index
+    el.classList.add(CSS.itemDragging)
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.setData('text/plain', String(index))
+    }
+  }, { signal })
+
+  el.addEventListener('dragend', () => {
+    el.classList.remove(CSS.itemDragging)
+    const state = deps.getState()
+    if (state) state.dragIndex = -1
+    const gallery = el.closest(`.${CSS.wrapper}`) ?? el.parentElement
+    gallery
+      ?.querySelectorAll(`.${CSS.slotOver}, .${CSS.overflowItemOver}`)
+      .forEach((n) => n.classList.remove(CSS.slotOver, CSS.overflowItemOver))
+  }, { signal })
+
+  el.addEventListener('dragover', (e) => {
+    e.preventDefault()
+    const state = deps.getState()
+    if (!state || state.dragIndex === -1 || state.dragIndex === index) return
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+    el.classList.add(el.classList.contains(CSS.overflowItem) ? CSS.overflowItemOver : CSS.slotOver)
+  }, { signal })
+
+  el.addEventListener('dragleave', () => {
+    el.classList.remove(CSS.slotOver, CSS.overflowItemOver)
+  }, { signal })
+
+  el.addEventListener('drop', (e) => {
+    e.preventDefault()
+    el.classList.remove(CSS.slotOver, CSS.overflowItemOver)
+    const state = deps.getState()
+    if (!state || state.dragIndex === -1 || state.dragIndex === index) return
+    deps.syncCaptions()
+    deps.onSwapImages(state.dragIndex, index)
+    state.dragIndex = -1
+  }, { signal })
+}

package/dist/plugins/gallery/state.d.ts

@@ -0,0 +1,67 @@
+/** Create the canonical empty value for a new Gallery block. @returns {GalleryData} */
+export function emptyGalleryData(): GalleryData;
+/**
+ * Normalize arbitrary input into canonical Gallery data.
+ * Unknown layouts and malformed values fall back to documented defaults.
+ * @param {Record<string, unknown>} [data]
+ * @returns {GalleryData}
+ */
+export function normalizeGalleryData(data?: Record<string, unknown>): GalleryData;
+/**
+ * @typedef {{ url: string, caption: string }} GalleryImage
+ *
+ * @typedef {Object} GalleryData
+ * @property {GalleryImage[]} images
+ * @property {string} layout
+ * @property {Record<string, any>} styles
+ * @property {Record<string, any>} options
+ */
+/** Per-block Gallery state and resource ownership. */
+export class GalleryState {
+    /**
+     * @param {GalleryData} data
+     * @param {File[]} [pendingFiles]
+     */
+    constructor(data: GalleryData, pendingFiles?: File[]);
+    /** @type {GalleryData} */
+    data: GalleryData;
+    /** @type {AbortController | null} */
+    abortController: AbortController | null;
+    /** @type {Set<AbortController>} */
+    taskControllers: Set<AbortController>;
+    /** @type {number} -1 when no drag is in progress. */
+    dragIndex: number;
+    /** @type {File[]} */
+    pendingFiles: File[];
+    /** @type {Promise<void> | null} */
+    pendingUpload: Promise<void> | null;
+    /**
+     * Replace the controller for listeners owned by the current rendered view.
+     * Upload/source tasks are independent so re-rendering one completed batch
+     * cannot cancel other batches that the user already started.
+     * @returns {void}
+     */
+    resetTransient(): void;
+    /** Start and register one asynchronous additive source operation. @returns {AbortController} */
+    beginTask(): AbortController;
+    /**
+     * Complete one source operation.
+     * @param {AbortController} controller
+     * @returns {boolean} Whether no source operations remain.
+     */
+    finishTask(controller: AbortController): boolean;
+    /** Cancel every pending upload or application source action. @returns {void} */
+    cancelTasks(): void;
+    /** Dispose listeners and pending transient input owned by this block. @returns {void} */
+    dispose(): void;
+}
+export type GalleryImage = {
+    url: string;
+    caption: string;
+};
+export type GalleryData = {
+    images: GalleryImage[];
+    layout: string;
+    styles: Record<string, any>;
+    options: Record<string, any>;
+};

package/dist/plugins/gallery/state.js

@@ -0,0 +1,133 @@
+import { ALL_LAYOUTS } from './layout.js'
+import { sanitizeUrl } from '../../shared/sanitize/sanitizeUrl.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+
+/**
+ * @typedef {{ url: string, caption: string }} GalleryImage
+ *
+ * @typedef {Object} GalleryData
+ * @property {GalleryImage[]} images
+ * @property {string} layout
+ * @property {Record<string, any>} styles
+ * @property {Record<string, any>} options
+ */
+
+/** Per-block Gallery state and resource ownership. */
+export class GalleryState {
+  /** @type {GalleryData} */
+  data
+
+  /** @type {AbortController | null} */
+  abortController = null
+
+  /** @type {Set<AbortController>} */
+  taskControllers = new Set()
+
+  /** @type {number} -1 when no drag is in progress. */
+  dragIndex = -1
+
+  /** @type {File[]} */
+  pendingFiles = []
+
+  /** @type {Promise<void> | null} */
+  pendingUpload = null
+
+  /**
+   * @param {GalleryData} data
+   * @param {File[]} [pendingFiles]
+   */
+  constructor(data, pendingFiles = []) {
+    this.data = data
+    this.pendingFiles = pendingFiles
+  }
+
+  /**
+   * Replace the controller for listeners owned by the current rendered view.
+   * Upload/source tasks are independent so re-rendering one completed batch
+   * cannot cancel other batches that the user already started.
+   * @returns {void}
+   */
+  resetTransient() {
+    this.abortController?.abort()
+    this.abortController = new AbortController()
+  }
+
+  /** Start and register one asynchronous additive source operation. @returns {AbortController} */
+  beginTask() {
+    const controller = new AbortController()
+    this.taskControllers.add(controller)
+    return controller
+  }
+
+  /**
+   * Complete one source operation.
+   * @param {AbortController} controller
+   * @returns {boolean} Whether no source operations remain.
+   */
+  finishTask(controller) {
+    this.taskControllers.delete(controller)
+    return this.taskControllers.size === 0
+  }
+
+  /** Cancel every pending upload or application source action. @returns {void} */
+  cancelTasks() {
+    for (const controller of this.taskControllers) controller.abort()
+    this.taskControllers.clear()
+  }
+
+  /** Dispose listeners and pending transient input owned by this block. @returns {void} */
+  dispose() {
+    this.abortController?.abort()
+    this.cancelTasks()
+    this.abortController = null
+    this.pendingFiles = []
+    this.pendingUpload = null
+  }
+}
+
+/** Create the canonical empty value for a new Gallery block. @returns {GalleryData} */
+export function emptyGalleryData() {
+  return {
+    images: [],
+    layout: 'auto',
+    styles: {},
+    options: { loop: true, zoom: true, navigation: true, captions: true, fullscreen: true, thumbnails: false },
+  }
+}
+
+/**
+ * Normalize arbitrary input into canonical Gallery data.
+ * Unknown layouts and malformed values fall back to documented defaults.
+ * @param {Record<string, unknown>} [data]
+ * @returns {GalleryData}
+ */
+export function normalizeGalleryData(data) {
+  const images = Array.isArray(data?.images)
+    ? data.images.map((img) => ({
+        url: sanitizeUrl(normalizeTextValue(/** @type {any} */ (img)?.url), { policy: 'media', fallback: '' }),
+        caption: normalizeTextValue(/** @type {any} */ (img)?.caption),
+      })).filter(image => image.url)
+    : []
+
+  const requestedLayout = normalizeTextValue(data?.layout)
+  const layout = ALL_LAYOUTS.includes(requestedLayout) ? requestedLayout : 'auto'
+  const rawStyles = data?.styles && typeof data.styles === 'object' && !Array.isArray(data.styles)
+    ? /** @type {Record<string, unknown>} */ (data.styles)
+    : {}
+  const styles = Object.fromEntries(Object.entries(rawStyles).filter(([, value]) => typeof value === 'string'))
+
+  const rawOptions = data?.options && typeof data.options === 'object' && !Array.isArray(data.options)
+    ? /** @type {Record<string, unknown>} */ (data.options)
+    : {}
+  /** @type {Record<string, boolean | number>} */
+  const options = {}
+  const defaults = { loop: true, zoom: true, navigation: true, captions: true, fullscreen: true, thumbnails: false }
+  for (const [key, fallback] of Object.entries(defaults)) {
+    options[key] = typeof rawOptions[key] === 'boolean' ? rawOptions[key] : fallback
+  }
+  if (Number.isFinite(rawOptions.autoplayInterval) && Number(rawOptions.autoplayInterval) > 0) {
+    options.autoplayInterval = Number(rawOptions.autoplayInterval)
+  }
+
+  return { images, layout, styles, options }
+}

package/dist/plugins/gallery/styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Apply gallery-level inline styles (gap, height, slot border-radius)
+ * to the live grid + slot DOM. Idempotent — safe to call after every
+ * style edit in the settings form.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @returns {void}
+ */
+export function applyGalleryStyles(wrapper: HTMLElement, state: import("./state.js").GalleryState): void;

package/dist/plugins/gallery/styles.js

@@ -0,0 +1,24 @@
+import { CSS } from './css.js'
+
+/**
+ * Apply gallery-level inline styles (gap, height, slot border-radius)
+ * to the live grid + slot DOM. Idempotent — safe to call after every
+ * style edit in the settings form.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @returns {void}
+ */
+export function applyGalleryStyles(wrapper, state) {
+  const grid = /** @type {HTMLElement | null} */ (wrapper.querySelector(`.${CSS.grid}`))
+  if (!grid) return
+  const styles = state.data.styles
+
+  grid.style.gap = styles?.gap || ''
+  grid.style.height = styles?.height || ''
+
+  const slots = grid.querySelectorAll(`.${CSS.slot}`)
+  slots.forEach((slotEl) => {
+    /** @type {HTMLElement} */ (slotEl).style.borderRadius = styles?.borderRadius || ''
+  })
+}

package/dist/plugins/gallery/uploader.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<{ url: string, alt?: string }>} UploadFn
+ */
+/**
+ * Resolve a batch of gallery images through a consumer upload callback or
+ * local data URLs. The caller owns loading state and operation lifetime.
+ * Result order always follows input-file order; failed files are omitted.
+ */
+export class GalleryUploader {
+    /** @param {{ uploadFile?: UploadFn }} config */
+    constructor(config: {
+        uploadFile?: UploadFn;
+    });
+    /**
+     * @param {File[]} files
+     * @param {(images: Array<{ url: string, caption: string }>) => void} onAdded
+     * @param {AbortSignal | undefined} signal
+     * @returns {Promise<void>}
+     */
+    handle(files: File[], onAdded: (images: Array<{
+        url: string;
+        caption: string;
+    }>) => void, signal: AbortSignal | undefined): Promise<void>;
+    #private;
+}
+export type UploadFn = (file: File, context: {
+    signal: AbortSignal;
+}) => Promise<{
+    url: string;
+    alt?: string;
+}>;

package/dist/plugins/gallery/uploader.js

@@ -0,0 +1,111 @@
+import { sanitizeMediaUrl } from '../../shared/sanitize/sanitizeUrl.js'
+
+/**
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<{ url: string, alt?: string }>} UploadFn
+ */
+
+/**
+ * Resolve a batch of gallery images through a consumer upload callback or
+ * local data URLs. The caller owns loading state and operation lifetime.
+ * Result order always follows input-file order; failed files are omitted.
+ */
+export class GalleryUploader {
+  /** @type {UploadFn | undefined} */
+  #uploadFn
+
+  /** @param {{ uploadFile?: UploadFn }} config */
+  constructor(config) {
+    this.#uploadFn = config.uploadFile
+  }
+
+  /**
+   * @param {File[]} files
+   * @param {(images: Array<{ url: string, caption: string }>) => void} onAdded
+   * @param {AbortSignal | undefined} signal
+   * @returns {Promise<void>}
+   */
+  async handle(files, onAdded, signal) {
+    if (signal?.aborted || files.length === 0) return
+    if (this.#uploadFn) {
+      await this.#uploadRemote(files, onAdded, signal)
+    } else {
+      await this.#readDataUrls(files, onAdded, signal)
+    }
+  }
+
+  /**
+   * Upload sequentially so consumers do not receive an uncontrolled request
+   * burst and the resulting image order stays deterministic.
+   * @param {File[]} files
+   * @param {(images: Array<{ url: string, caption: string }>) => void} onAdded
+   * @param {AbortSignal | undefined} signal
+   * @returns {Promise<void>}
+   */
+  async #uploadRemote(files, onAdded, signal) {
+    if (!this.#uploadFn) return
+    /** @type {Array<{ url: string, caption: string }>} */
+    const added = []
+    for (const file of files) {
+      if (signal?.aborted) break
+      try {
+        const result = await this.#uploadFn(file, { signal: signal ?? new AbortController().signal })
+        const url = sanitizeMediaUrl(result?.url || '')
+        if (!signal?.aborted && url) {
+          added.push({ url, caption: typeof result?.alt === 'string' ? result.alt : '' })
+        }
+      } catch {
+        // Skip a failed file and continue the same batch.
+      }
+    }
+    if (!signal?.aborted && added.length > 0) onAdded(added)
+  }
+
+  /**
+   * @param {File[]} files
+   * @param {(images: Array<{ url: string, caption: string }>) => void} onAdded
+   * @param {AbortSignal | undefined} signal
+   * @returns {Promise<void>}
+   */
+  #readDataUrls(files, onAdded, signal) {
+    return new Promise((resolve) => {
+      /** @type {Array<{ url: string, caption: string } | null>} */
+      const results = files.map(() => null)
+      let remaining = files.length
+      let settled = false
+
+      const finish = () => {
+        if (settled) return
+        settled = true
+        const added = results.filter((item) => item !== null)
+        if (!signal?.aborted && added.length > 0) onAdded(added)
+        resolve(undefined)
+      }
+
+      files.forEach((file, index) => {
+        const reader = new FileReader()
+        let readerComplete = false
+        const completeReader = () => {
+          if (readerComplete) return
+          readerComplete = true
+          signal?.removeEventListener('abort', abort)
+          remaining--
+          if (remaining === 0) finish()
+        }
+        const abort = () => reader.abort()
+        signal?.addEventListener('abort', abort, { once: true })
+        reader.onload = () => {
+          const url = typeof reader.result === 'string' ? sanitizeMediaUrl(reader.result) : ''
+          if (!signal?.aborted && url) results[index] = { url, caption: '' }
+          completeReader()
+        }
+        reader.onerror = completeReader
+        reader.onabort = completeReader
+        try {
+          reader.readAsDataURL(file)
+        } catch {
+          completeReader()
+        }
+      })
+    })
+  }
+}

package/dist/plugins/gallery/view-empty.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @typedef {Object} EmptyViewDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {() => void} onUploadClick
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} customActions
+ * @property {(handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>) => Promise<void>} runCustomAction
+ * @property {(files: File[]) => void} onFilesDropped
+ */
+/**
+ * Render the empty-state dropzone for the Gallery plugin.
+ * Replaces wrapper contents and removes the `filled` class.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {EmptyViewDeps} deps
+ * @returns {void}
+ */
+export function renderEmptyView(wrapper: HTMLElement, state: import("./state.js").GalleryState, deps: EmptyViewDeps): void;
+export type EmptyViewDeps = {
+    t: (key: string, fallback: string) => string;
+    readOnly: boolean;
+    onUploadClick: () => void;
+    customActions: Array<{
+        icon?: string;
+        label: string;
+        handler: (context: {
+            signal: AbortSignal;
+        }) => Promise<Array<{
+            url: string;
+            alt?: string;
+        }> | null>;
+    }>;
+    runCustomAction: (handler: (context: {
+        signal: AbortSignal;
+    }) => Promise<Array<{
+        url: string;
+        alt?: string;
+    }> | null>) => Promise<void>;
+    onFilesDropped: (files: File[]) => void;
+};