@shelamkoff/rector 1.0.0

package/dist/plugins/image/settings.js

@@ -0,0 +1,347 @@
+import { CSS } from './css.js'
+import { CHEVRON_DOWN, CHECK_ICON } from './icons.js'
+import { refreshInlineStyles } from './styles.js'
+
+/**
+ * @typedef {Object} SettingsDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {(operation: () => void) => void} mutate
+ */
+
+/**
+ * Build the settings dropdown panel: a styled form with width/height,
+ * object fit/position, expand toggle, background toggle/color, and border.
+ *
+ * Mutations write directly into `state.data.styles` (or `state.data.expanded`
+ * etc.) inside the core-owned mutation boundary so undo/save see each
+ * control action immediately.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @param {SettingsDeps} deps
+ * @returns {HTMLElement}
+ */
+export function buildSettingsPanel(wrapper, state, deps) {
+  const panel = document.createElement('div')
+  panel.className = CSS.dropdownPanel
+  panel.addEventListener('click', (e) => e.stopPropagation())
+  panel.appendChild(buildStyleForm(wrapper, state, deps))
+  return panel
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @param {SettingsDeps} deps
+ * @returns {HTMLElement}
+ */
+function buildStyleForm(wrapper, state, deps) {
+  const styles = state.data.styles ||= {}
+  const signal = /** @type {AbortController} */ (state.abortController).signal
+  /** @type {Set<() => void>} */
+  const closeSelects = new Set()
+
+  const form = document.createElement('div')
+  form.className = CSS.styleForm
+  form.addEventListener('click', (e) => e.stopPropagation())
+
+  const onStyleChange = (/** @type {string} */ key, /** @type {string} */ value) => {
+    deps.mutate(() => {
+      if (value) styles[key] = value
+      else delete styles[key]
+      refreshInlineStyles(wrapper, state)
+    })
+  }
+
+  const makeInput = (/** @type {string} */ key, /** @type {string | undefined} */ value) => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.className = CSS.styleInput
+    input.value = value || ''
+    input.addEventListener('input', () => onStyleChange(key, input.value))
+    return input
+  }
+
+  const makeColor = (/** @type {string} */ key, /** @type {string | undefined} */ value) => {
+    const input = document.createElement('input')
+    input.type = 'color'
+    input.className = CSS.styleColor
+    input.value = value || '#000000'
+    input.addEventListener('input', () => onStyleChange(key, input.value))
+    return input
+  }
+
+  const makeSelect = (/** @type {string} */ key, /** @type {string[]} */ options, /** @type {string | undefined} */ value) => {
+    const selectWrapper = document.createElement('div')
+    selectWrapper.className = CSS.customSelect
+
+    const trigger = document.createElement('button')
+    trigger.type = 'button'
+    trigger.className = CSS.customSelectTrigger
+
+    const triggerText = document.createElement('span')
+    const optionLabel = (/** @type {string} */ option) => deps.t(`value.${option || 'none'}`, option || 'None')
+    triggerText.textContent = optionLabel(value || 'none')
+
+    const arrow = document.createElement('span')
+    arrow.className = CSS.customSelectArrow
+    arrow.innerHTML = CHEVRON_DOWN
+
+    trigger.append(triggerText, arrow)
+
+    const optionsList = document.createElement('div')
+    optionsList.className = CSS.customSelectOptions
+    optionsList.setAttribute('role', 'listbox')
+    trigger.setAttribute('aria-haspopup', 'listbox')
+    trigger.setAttribute('aria-expanded', 'false')
+
+    let currentValue = value || ''
+    let isOpen = false
+
+    const closeSelect = () => {
+      isOpen = false
+      selectWrapper.classList.remove(CSS.customSelectOpen)
+      trigger.setAttribute('aria-expanded', 'false')
+    }
+    const openSelect = () => {
+      for (const close of closeSelects) {
+        if (close !== closeSelect) close()
+      }
+      isOpen = true
+      selectWrapper.classList.add(CSS.customSelectOpen)
+      trigger.setAttribute('aria-expanded', 'true')
+    }
+    closeSelects.add(closeSelect)
+
+    const renderOptions = () => {
+      optionsList.innerHTML = ''
+      for (const opt of options) {
+        const optEl = document.createElement('button')
+        optEl.type = 'button'
+        optEl.className = CSS.customSelectOption
+        const isSelected = opt === currentValue
+        if (isSelected) optEl.classList.add(CSS.customSelectOptionSelected)
+        optEl.setAttribute('role', 'option')
+        optEl.setAttribute('aria-selected', String(isSelected))
+
+        const textSpan = document.createElement('span')
+        textSpan.textContent = optionLabel(opt)
+        optEl.appendChild(textSpan)
+
+        if (isSelected) {
+          const checkSpan = document.createElement('span')
+          checkSpan.className = CSS.customSelectCheck
+          checkSpan.innerHTML = CHECK_ICON
+          optEl.appendChild(checkSpan)
+        }
+
+        const selectOption = () => {
+          currentValue = opt
+          triggerText.textContent = optionLabel(opt)
+          onStyleChange(key, opt)
+          closeSelect()
+          renderOptions()
+          trigger.focus()
+        }
+        optEl.addEventListener('mousedown', (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+        })
+        optEl.addEventListener('click', selectOption)
+        optEl.addEventListener('keydown', (event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            closeSelect()
+            trigger.focus()
+          } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault()
+            const siblings = [...optionsList.querySelectorAll('button')]
+            const current = siblings.indexOf(optEl)
+            const direction = event.key === 'ArrowDown' ? 1 : -1
+            siblings[(current + direction + siblings.length) % siblings.length]?.focus()
+          }
+        })
+        optionsList.appendChild(optEl)
+      }
+    }
+    renderOptions()
+
+    trigger.addEventListener('mousedown', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      isOpen ? closeSelect() : openSelect()
+    })
+    trigger.addEventListener('keydown', (event) => {
+      if (!['Enter', ' ', 'ArrowDown'].includes(event.key)) return
+      event.preventDefault()
+      if (!isOpen) openSelect()
+      optionsList.querySelector('button')?.focus()
+    })
+
+    document.addEventListener('mousedown', (e) => {
+      if (isOpen && !selectWrapper.contains(/** @type {Node} */ (e.target))) {
+        closeSelect()
+      }
+    }, { signal })
+
+    selectWrapper.append(trigger, optionsList)
+    return selectWrapper
+  }
+
+  const makeRow = (/** @type {[string, HTMLElement][]} */ ...items) => {
+    const row = document.createElement('div')
+    row.className = CSS.styleRow
+    for (const [labelText, input] of items) {
+      const label = document.createElement('label')
+      label.className = CSS.styleLabel
+      const span = document.createElement('span')
+      span.textContent = labelText
+      label.append(span, input)
+      row.appendChild(label)
+    }
+    return row
+  }
+
+  const makeGroup = (/** @type {string} */ title, /** @type {HTMLElement[]} */ ...rows) => {
+    const group = document.createElement('div')
+    group.className = CSS.styleGroup
+    const titleEl = document.createElement('div')
+    titleEl.className = CSS.styleGroupTitle
+    titleEl.textContent = title
+    group.append(titleEl, ...rows)
+    return group
+  }
+
+  // ── Form content ──
+
+  const widthInput = makeInput('width', styles.width)
+  const minWidthInput = makeInput('minWidth', styles.minWidth)
+  const maxWidthInput = makeInput('maxWidth', styles.maxWidth)
+
+  // Expanded switch (only for landscape images)
+  if (isLandscape(wrapper)) {
+    const expandLabel = deps.t('expand', 'Expand')
+    const expRow = document.createElement('div')
+    expRow.className = CSS.switchRow
+
+    const expLabel = document.createElement('span')
+    expLabel.className = CSS.switchLabel
+    expLabel.textContent = expandLabel
+
+    const expSwitch = document.createElement('button')
+    expSwitch.type = 'button'
+    expSwitch.className = `${CSS.switch}${state.data.expanded ? ` ${CSS.switchActive}` : ''}`
+    expSwitch.setAttribute('aria-label', expandLabel)
+    expSwitch.setAttribute('aria-pressed', String(state.data.expanded))
+    expSwitch.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+    expSwitch.addEventListener('click', () => {
+      deps.mutate(() => {
+        state.data.expanded = !state.data.expanded
+        wrapper.classList.toggle(CSS.expanded, state.data.expanded)
+        expSwitch.classList.toggle(CSS.switchActive, state.data.expanded)
+        expSwitch.setAttribute('aria-pressed', String(state.data.expanded))
+        widthInput.disabled = state.data.expanded
+        minWidthInput.disabled = state.data.expanded
+        maxWidthInput.disabled = state.data.expanded
+        refreshInlineStyles(wrapper, state)
+      })
+    }, { signal })
+
+    expRow.append(expLabel, expSwitch)
+    form.appendChild(expRow)
+  }
+
+  if (state.data.expanded) {
+    widthInput.disabled = true
+    minWidthInput.disabled = true
+    maxWidthInput.disabled = true
+  }
+
+  form.appendChild(makeGroup(deps.t('dimensions', 'Dimensions'),
+    makeRow([deps.t('widthShort', 'W'), widthInput], [deps.t('heightShort', 'H'), makeInput('height', styles.height)]),
+    makeRow([deps.t('minWidth', 'Min W'), minWidthInput], [deps.t('minHeight', 'Min H'), makeInput('minHeight', styles.minHeight)]),
+    makeRow([deps.t('maxWidth', 'Max W'), maxWidthInput], [deps.t('maxHeight', 'Max H'), makeInput('maxHeight', styles.maxHeight)]),
+  ))
+
+  form.appendChild(makeGroup(deps.t('display', 'Display'),
+    makeRow([deps.t('fit', 'Fit'), makeSelect('objectFit', ['none', 'cover', 'contain', 'fill', 'scale-down'], styles.objectFit)]),
+    makeRow([deps.t('position', 'Position'), makeInput('objectPosition', styles.objectPosition)]),
+  ))
+
+  // Background switch
+  const bgLabel = deps.t('background', 'Background')
+  const bgSwitchRow = document.createElement('div')
+  bgSwitchRow.className = CSS.switchRow
+
+  const bgLabelEl = document.createElement('span')
+  bgLabelEl.className = CSS.switchLabel
+  bgLabelEl.textContent = bgLabel
+
+  const bgSwitch = document.createElement('button')
+  bgSwitch.type = 'button'
+  bgSwitch.className = `${CSS.switch}${state.data.withBackground ? ` ${CSS.switchActive}` : ''}`
+  bgSwitch.setAttribute('aria-label', bgLabel)
+  bgSwitch.setAttribute('aria-pressed', String(state.data.withBackground))
+  bgSwitch.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+  bgSwitch.addEventListener('click', () => {
+    deps.mutate(() => {
+      state.data.withBackground = !state.data.withBackground
+      wrapper.classList.toggle(CSS.withBackground, state.data.withBackground)
+      bgSwitch.classList.toggle(CSS.switchActive, state.data.withBackground)
+      bgSwitch.setAttribute('aria-pressed', String(state.data.withBackground))
+      bgColorRow.style.display = state.data.withBackground ? '' : 'none'
+      refreshInlineStyles(wrapper, state)
+    })
+  }, { signal })
+
+  bgSwitchRow.append(bgLabelEl, bgSwitch)
+  form.appendChild(bgSwitchRow)
+
+  const bgColorRow = makeRow([deps.t('color', 'Color'), makeColor('backgroundColor', styles.backgroundColor)])
+  bgColorRow.style.display = state.data.withBackground ? '' : 'none'
+  form.appendChild(bgColorRow)
+
+  // Border section
+  const borderGroup = document.createElement('div')
+  borderGroup.className = CSS.styleGroup
+
+  const borderStyleRow = makeRow([deps.t('border', 'Border'), makeSelect('borderStyle', ['none', 'solid', 'dashed'], styles.borderStyle)])
+  borderGroup.appendChild(borderStyleRow)
+
+  const hasBorder = styles.borderStyle && styles.borderStyle !== 'none'
+  const borderColorRow = makeRow([deps.t('color', 'Color'), makeColor('borderColor', styles.borderColor)])
+  borderColorRow.style.display = hasBorder ? '' : 'none'
+
+  const borderWidthRow = makeRow([deps.t('width', 'Width'), makeInput('borderWidth', styles.borderWidth)])
+  borderWidthRow.style.display = hasBorder ? '' : 'none'
+
+  const borderRadiusRow = makeRow([deps.t('radius', 'Radius'), makeInput('borderRadius', styles.borderRadius)])
+
+  borderGroup.append(borderColorRow, borderWidthRow, borderRadiusRow)
+  form.appendChild(borderGroup)
+
+  // Listen for borderStyle changes to show/hide color+width
+  const borderSelectWrapper = borderStyleRow.querySelector(`.${CSS.customSelect}`)
+  if (borderSelectWrapper) {
+    state.borderObserver?.disconnect()
+    state.borderObserver = new MutationObserver(() => {
+      const val = state.data.styles?.borderStyle
+      const show = val && val !== 'none'
+      borderColorRow.style.display = show ? '' : 'none'
+      borderWidthRow.style.display = show ? '' : 'none'
+    })
+    state.borderObserver.observe(borderSelectWrapper, { attributes: true, attributeFilter: ['class'] })
+  }
+
+  return form
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @returns {boolean}
+ */
+function isLandscape(wrapper) {
+  const img = /** @type {HTMLImageElement | null} */ (wrapper.querySelector(`.${CSS.image}`))
+  if (!img) return false
+  return img.naturalWidth > img.naturalHeight
+}

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

@@ -0,0 +1,86 @@
+/**
+ * Construct a fresh `ImageData` from arbitrary user input.
+ * Every field is normalized to its expected type.
+ *
+ * @param {Record<string, unknown>} [data]
+ * @returns {ImageData}
+ */
+export function normalizeImageData(data?: Record<string, unknown>): ImageData;
+/**
+ * Create the canonical empty value used for a new Image block.
+ * @returns {ImageData}
+ */
+export function emptyImageData(): ImageData;
+/**
+ * @typedef {Object} ImageData
+ * @property {{ url: string, width?: number, height?: number }} file
+ * @property {string} caption
+ * @property {boolean} withBorder
+ * @property {boolean} expanded
+ * @property {boolean} withBackground
+ * @property {Record<string, string>} styles
+ */
+/**
+ * Per-block state for an Image instance.
+ * Owns view listeners, the settings observer, paste coordination, and the
+ * latest asynchronous image-source operation.
+ */
+export class ImageState {
+    /**
+     * @param {ImageData} data
+     * @param {File | null} [pendingFile]
+     */
+    constructor(data: ImageData, pendingFile?: File | null);
+    /** @type {ImageData} */
+    data: ImageData;
+    /** @type {AbortController | null} */
+    abortController: AbortController | null;
+    /** @type {MutationObserver | null} */
+    borderObserver: MutationObserver | null;
+    /** @type {File | null} */
+    pendingFile: File | null;
+    /** @type {Promise<void> | null} */
+    pendingUpload: Promise<void> | null;
+    /** @type {AbortController | null} */
+    taskController: AbortController | null;
+    /**
+     * Reset listeners and the observer between empty and filled view renders.
+     * Source operations use a separate controller because rendering a filled
+     * view is part of completing such an operation.
+     * @returns {void}
+     */
+    resetTransient(): void;
+    /**
+     * Start an asynchronous source operation and cancel the previous one.
+     * @returns {AbortController}
+     */
+    beginTask(): AbortController;
+    /**
+     * Mark a source operation as complete if it is still the latest operation.
+     * @param {AbortController} controller
+     * @returns {boolean} Whether the controller was current.
+     */
+    finishTask(controller: AbortController): boolean;
+    /**
+     * Cancel the current upload or custom source action.
+     * @returns {void}
+     */
+    cancelTask(): void;
+    /**
+     * Release all resources after the block was removed from the editor.
+     * @returns {void}
+     */
+    dispose(): void;
+}
+export type ImageData = {
+    file: {
+        url: string;
+        width?: number;
+        height?: number;
+    };
+    caption: string;
+    withBorder: boolean;
+    expanded: boolean;
+    withBackground: boolean;
+    styles: Record<string, string>;
+};

package/dist/plugins/image/state.js

@@ -0,0 +1,151 @@
+import { sanitizeUrl } from '../../shared/sanitize/sanitizeUrl.js'
+import { normalizeTextValue } from '../../shared/textFormat.js'
+
+/**
+ * @typedef {Object} ImageData
+ * @property {{ url: string, width?: number, height?: number }} file
+ * @property {string} caption
+ * @property {boolean} withBorder
+ * @property {boolean} expanded
+ * @property {boolean} withBackground
+ * @property {Record<string, string>} styles
+ */
+
+/**
+ * Per-block state for an Image instance.
+ * Owns view listeners, the settings observer, paste coordination, and the
+ * latest asynchronous image-source operation.
+ */
+export class ImageState {
+  /** @type {ImageData} */
+  data
+
+  /** @type {AbortController | null} */
+  abortController = null
+
+  /** @type {MutationObserver | null} */
+  borderObserver = null
+
+  /** @type {File | null} */
+  pendingFile = null
+
+  /** @type {Promise<void> | null} */
+  pendingUpload = null
+
+  /** @type {AbortController | null} */
+  taskController = null
+
+  /**
+   * @param {ImageData} data
+   * @param {File | null} [pendingFile]
+   */
+  constructor(data, pendingFile = null) {
+    this.data = data
+    this.pendingFile = pendingFile
+  }
+
+  /**
+   * Reset listeners and the observer between empty and filled view renders.
+   * Source operations use a separate controller because rendering a filled
+   * view is part of completing such an operation.
+   * @returns {void}
+   */
+  resetTransient() {
+    this.abortController?.abort()
+    this.abortController = new AbortController()
+    this.borderObserver?.disconnect()
+    this.borderObserver = null
+  }
+
+  /**
+   * Start an asynchronous source operation and cancel the previous one.
+   * @returns {AbortController}
+   */
+  beginTask() {
+    this.taskController?.abort()
+    this.taskController = new AbortController()
+    return this.taskController
+  }
+
+  /**
+   * Mark a source operation as complete if it is still the latest operation.
+   * @param {AbortController} controller
+   * @returns {boolean} Whether the controller was current.
+   */
+  finishTask(controller) {
+    if (this.taskController !== controller) return false
+    this.taskController = null
+    return true
+  }
+
+  /**
+   * Cancel the current upload or custom source action.
+   * @returns {void}
+   */
+  cancelTask() {
+    this.taskController?.abort()
+    this.taskController = null
+  }
+
+  /**
+   * Release all resources after the block was removed from the editor.
+   * @returns {void}
+   */
+  dispose() {
+    this.abortController?.abort()
+    this.borderObserver?.disconnect()
+    this.cancelTask()
+    this.abortController = null
+    this.borderObserver = null
+    this.pendingFile = null
+    this.pendingUpload = null
+  }
+}
+
+/**
+ * Construct a fresh `ImageData` from arbitrary user input.
+ * Every field is normalized to its expected type.
+ *
+ * @param {Record<string, unknown>} [data]
+ * @returns {ImageData}
+ */
+export function normalizeImageData(data) {
+  const fileObj = /** @type {any} */ (data?.file)
+  /** @type {{ url: string, width?: number, height?: number }} */
+  const file = {
+    url: sanitizeUrl(normalizeTextValue(fileObj?.url), { policy: 'media', fallback: '' }),
+  }
+  if (Number.isFinite(fileObj?.width) && fileObj.width > 0) file.width = Number(fileObj.width)
+  if (Number.isFinite(fileObj?.height) && fileObj.height > 0) file.height = Number(fileObj.height)
+  const rawStyles = data?.styles && typeof data.styles === 'object' && !Array.isArray(data.styles)
+    ? /** @type {Record<string, unknown>} */ (data.styles)
+    : {}
+  /** @type {Record<string, string>} */
+  const styles = {}
+  for (const [name, value] of Object.entries(rawStyles)) {
+    if (typeof value === 'string') styles[name] = value
+  }
+  return {
+    file,
+    caption: normalizeTextValue(data?.caption),
+    withBorder: data?.withBorder === true,
+    expanded: data?.expanded === true,
+    withBackground: data?.withBackground === true,
+    styles,
+  }
+}
+
+/**
+ * Create the canonical empty value used for a new Image block.
+ * @returns {ImageData}
+ */
+export function emptyImageData() {
+  return {
+    file: { url: '' },
+    caption: '',
+    withBorder: false,
+    expanded: false,
+    withBackground: false,
+    styles: {},
+  }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Apply per-block style overrides from `state.data.styles` onto the live
+ * `<img>` and its container. Skips width-related styles when the block is
+ * in expanded mode (full-width takes precedence over user width).
+ *
+ * @param {import('./state.js').ImageState} state
+ * @param {HTMLImageElement} img
+ * @param {HTMLElement} container
+ * @returns {void}
+ */
+export function applyInlineStyles(state: import("./state.js").ImageState, img: HTMLImageElement, container: HTMLElement): void;
+/**
+ * Re-apply inline styles to an already-mounted image. Used when the
+ * settings form mutates `state.data.styles` and needs the live preview
+ * to reflect the change.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @returns {void}
+ */
+export function refreshInlineStyles(wrapper: HTMLElement, state: import("./state.js").ImageState): void;

package/dist/plugins/image/styles.js

@@ -0,0 +1,58 @@
+import { CSS } from './css.js'
+
+/**
+ * Apply per-block style overrides from `state.data.styles` onto the live
+ * `<img>` and its container. Skips width-related styles when the block is
+ * in expanded mode (full-width takes precedence over user width).
+ *
+ * @param {import('./state.js').ImageState} state
+ * @param {HTMLImageElement} img
+ * @param {HTMLElement} container
+ * @returns {void}
+ */
+export function applyInlineStyles(state, img, container) {
+  const styles = state.data.styles
+  if (!styles) return
+
+  if (styles.objectFit) img.style.objectFit = styles.objectFit
+  if (styles.objectPosition) img.style.objectPosition = styles.objectPosition
+  if (styles.height) img.style.height = styles.height
+  if (styles.maxHeight) img.style.maxHeight = styles.maxHeight
+  if (styles.minHeight) img.style.minHeight = styles.minHeight
+
+  if (!state.data.expanded) {
+    if (styles.width) img.style.width = styles.width
+    if (styles.maxWidth) img.style.maxWidth = styles.maxWidth
+    if (styles.minWidth) img.style.minWidth = styles.minWidth
+  }
+
+  if (styles.borderStyle && styles.borderStyle !== 'none') {
+    img.style.borderStyle = styles.borderStyle
+    img.style.borderWidth = styles.borderWidth || '1px'
+    img.style.borderColor = styles.borderColor || '#2e2e35'
+  }
+  if (styles.borderRadius) img.style.borderRadius = styles.borderRadius
+
+  if (styles.backgroundColor && state.data.withBackground) {
+    container.style.backgroundColor = styles.backgroundColor
+  }
+}
+
+/**
+ * Re-apply inline styles to an already-mounted image. Used when the
+ * settings form mutates `state.data.styles` and needs the live preview
+ * to reflect the change.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').ImageState} state
+ * @returns {void}
+ */
+export function refreshInlineStyles(wrapper, state) {
+  const img = /** @type {HTMLImageElement | null} */ (wrapper.querySelector(`.${CSS.image}`))
+  const container = /** @type {HTMLElement | null} */ (wrapper.querySelector(`.${CSS.imageContainer}`))
+  if (!img || !container) return
+
+  img.style.cssText = ''
+  container.style.cssText = ''
+  applyInlineStyles(state, img, container)
+}

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

@@ -0,0 +1,31 @@
+/**
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<{ url: string, alt?: string }>} UploadFn
+ */
+/**
+ * Resolve an image file through the consumer upload callback or a local data
+ * URL fallback. The caller owns visual loading state so an older operation
+ * cannot clear the indicator for a newer one. Failures leave data unchanged.
+ */
+export class ImageUploader {
+    /** @param {{ uploadFile?: UploadFn }} config */
+    constructor(config: {
+        uploadFile?: UploadFn;
+    });
+    /**
+     * @param {File} file
+     * @param {(result: { url: string, alt?: string }) => void} onResolve
+     * @param {AbortSignal | undefined} signal
+     * @returns {Promise<void>}
+     */
+    handle(file: File, onResolve: (result: {
+        url: string;
+        alt?: string;
+    }) => void, signal: AbortSignal | undefined): Promise<void>;
+    #private;
+}
+export type UploadFn = (file: File, context: {
+    signal: AbortSignal;
+}) => Promise<{
+    url: string;
+    alt?: string;
+}>;