@jackuait/blok 0.17.0 → 0.19.0

package/src/tools/audio/ui.ts

@@ -0,0 +1,104 @@
+import { IconMusic } from '../../components/icons';
+import type { AudioData } from '../../../types/tools/audio';
+
+export interface NowPlayingOptions {
+  editable: boolean;
+  titlePlaceholder?: string;
+  artistPlaceholder?: string;
+}
+
+export interface NowPlayingElements {
+  figure: HTMLElement;
+  audio: HTMLAudioElement;
+  cover: HTMLElement;
+  body: HTMLElement;
+  waveformMount: HTMLElement;
+  title: HTMLElement;
+  artist: HTMLElement;
+}
+
+function editableLine(role: string, value: string | undefined, editable: boolean, placeholder?: string): HTMLElement {
+  const el = document.createElement('div');
+  el.setAttribute('data-role', role);
+  el.setAttribute('contenteditable', editable ? 'true' : 'false');
+  if (placeholder) el.setAttribute('data-placeholder', placeholder);
+  el.textContent = value ?? '';
+  return el;
+}
+
+export function renderNowPlaying(data: AudioData, opts: NowPlayingOptions): NowPlayingElements {
+  const figure = document.createElement('figure');
+  figure.className = 'blok-audio-inner';
+  figure.setAttribute('data-role', 'audio-figure');
+  figure.style.margin = '0';
+
+  const cover = document.createElement('div');
+  cover.className = 'blok-audio-cover';
+  cover.setAttribute('data-role', 'audio-cover');
+  if (data.coverUrl) {
+    const img = document.createElement('img');
+    img.src = data.coverUrl;
+    img.alt = '';
+    cover.appendChild(img);
+  } else {
+    const placeholder = document.createElement('span');
+    placeholder.className = 'blok-audio-cover__placeholder';
+    placeholder.setAttribute('aria-hidden', 'true');
+    placeholder.innerHTML = IconMusic;
+    cover.appendChild(placeholder);
+  }
+
+  // Decorative "now playing" equalizer — a dark badge of dancing bars pinned to
+  // the cover. CSS reveals + animates it only while the figure is playing
+  // (driven by the [data-playing] attribute the controls toggle).
+  const eq = document.createElement('span');
+  eq.className = 'blok-audio-eq';
+  eq.setAttribute('data-role', 'audio-eq');
+  eq.setAttribute('aria-hidden', 'true');
+  ['a', 'b', 'c'].forEach(() => {
+    const bar = document.createElement('span');
+    bar.className = 'blok-audio-eq__bar';
+    eq.appendChild(bar);
+  });
+  cover.appendChild(eq);
+
+  const title = editableLine('audio-title', data.title, opts.editable, opts.titlePlaceholder);
+  title.className = 'blok-audio-title';
+  const artist = editableLine('audio-artist', data.artist, opts.editable, opts.artistPlaceholder);
+  artist.className = 'blok-audio-artist';
+
+  const waveformMount = document.createElement('div');
+  waveformMount.className = 'blok-audio-waveform';
+  waveformMount.setAttribute('data-role', 'audio-waveform');
+
+  const body = document.createElement('div');
+  body.className = 'blok-audio-body';
+  body.setAttribute('data-role', 'audio-body');
+  body.append(title, artist, waveformMount);
+
+  const audio = document.createElement('audio');
+  audio.setAttribute('data-role', 'audio-media');
+  audio.setAttribute('preload', 'metadata');
+  audio.src = data.url;
+  audio.tabIndex = 0;
+  if (data.loop) audio.loop = true;
+
+  figure.append(cover, body, audio);
+  return { figure, audio, cover, body, waveformMount, title, artist };
+}
+
+export interface CaptionRowOptions {
+  value: string;
+  placeholder: string;
+  editable: boolean;
+}
+
+export function renderCaptionRow(opts: CaptionRowOptions): HTMLElement {
+  const row = document.createElement('div');
+  row.className = 'blok-audio-caption-row';
+  row.setAttribute('data-role', 'audio-caption-row');
+  const cap = editableLine('audio-caption', opts.value, opts.editable, opts.placeholder);
+  cap.className = 'blok-audio-caption';
+  row.appendChild(cap);
+  return row;
+}

package/src/tools/audio/uploader.ts

@@ -0,0 +1,76 @@
+import type { AudioConfig } from '../../../types/tools/audio';
+import { resolveMaxSize } from '../../components/utils/max-size';
+import { matchesMime } from '../../components/utils/mime-match';
+import { DEFAULT_MAX_SIZE, DEFAULT_MIME_TYPES } from './constants';
+
+export interface UploadResult {
+  url: string;
+  fileName?: string;
+}
+
+export interface UploadOptions {
+  onProgress?: (percent: number) => void;
+}
+
+export class AudioUploadError extends Error {
+  public readonly detail?: string;
+
+  constructor(public readonly code: string, detail?: string) {
+    super(detail ? `${code}: ${detail}` : code);
+    this.name = 'AudioUploadError';
+    this.detail = detail;
+  }
+}
+
+function parseUrl(raw: string): URL | null {
+  try {
+    return new URL(raw);
+  } catch {
+    return null;
+  }
+}
+
+export class Uploader {
+  constructor(private readonly config: AudioConfig) {}
+
+  public async handleUrl(raw: string, options: UploadOptions = {}): Promise<UploadResult> {
+    this.validateUrl(raw);
+    if (this.config.uploader?.uploadByUrl) {
+      return this.config.uploader.uploadByUrl(raw, { onProgress: options.onProgress });
+    }
+
+    return { url: raw };
+  }
+
+  public async handleFile(file: File, options: UploadOptions = {}): Promise<UploadResult> {
+    this.validateFile(file);
+    if (this.config.uploader?.uploadByFile) {
+      return this.config.uploader.uploadByFile(file, { onProgress: options.onProgress });
+    }
+
+    return { url: URL.createObjectURL(file), fileName: file.name };
+  }
+
+  private validateUrl(raw: string): void {
+    const parsed = parseUrl(raw);
+
+    if (!parsed) {
+      throw new AudioUploadError('INVALID_URL', raw);
+    }
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      throw new AudioUploadError('INVALID_URL', parsed.protocol);
+    }
+  }
+
+  private validateFile(file: File): void {
+    const types = this.config.types ?? [...DEFAULT_MIME_TYPES];
+    const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
+
+    if (file.type && !matchesMime(file.type, types)) {
+      throw new AudioUploadError('UNSUPPORTED_TYPE', file.type);
+    }
+    if (file.size > maxSize) {
+      throw new AudioUploadError('FILE_TOO_LARGE', `${file.size} > ${maxSize}`);
+    }
+  }
+}

package/src/tools/audio/waveform.ts

@@ -0,0 +1,277 @@
+import { WAVEFORM_BUCKETS } from './constants';
+import { liveAmplitude, headColorBlend, entranceEase } from './liveliness';
+
+/**
+ * Reduce raw mono samples to `buckets` peak values normalized to 0..1.
+ * Each bucket holds the max absolute amplitude across its slice; the whole
+ * array is then divided by the global max so the loudest bucket is 1.
+ */
+
+function bucketPeak(channel: Float32Array, start: number, end: number): number {
+  return channel.slice(start, end).reduce((max, v) => Math.max(max, Math.abs(v)), 0);
+}
+
+export function computePeaks(channel: Float32Array, buckets = WAVEFORM_BUCKETS): number[] {
+  if (channel.length === 0) return new Array<number>(buckets).fill(0);
+
+  const step = channel.length / buckets;
+  const out = Array.from({ length: buckets }, (_, b) => {
+    const start = Math.floor(b * step);
+    const end = Math.min(channel.length, Math.floor((b + 1) * step));
+    return bucketPeak(channel, start, end);
+  });
+
+  const globalMax = Math.max(0, ...out);
+  if (globalMax <= 0) return out;
+  return out.map((v) => v / globalMax);
+}
+
+interface ChannelSource {
+  numberOfChannels: number;
+  length: number;
+  getChannelData(ch: number): Float32Array;
+}
+
+/** Average all channels into one mono track, then reduce to peaks. */
+export function peaksFromAudioBuffer(buffer: ChannelSource, buckets = WAVEFORM_BUCKETS): number[] {
+  const { numberOfChannels, length } = buffer;
+  if (numberOfChannels <= 1) return computePeaks(buffer.getChannelData(0), buckets);
+
+  const mono = new Float32Array(length);
+  Array.from({ length: numberOfChannels }, (_, ch) => buffer.getChannelData(ch)).forEach((data) => {
+    data.forEach((v, i) => { mono[i] += v / numberOfChannels; });
+  });
+  return computePeaks(mono, buckets);
+}
+
+export function ratioFromPointer(clientX: number, rect: { left: number; width: number }): number {
+  if (rect.width <= 0) return 0;
+  const r = (clientX - rect.left) / rect.width;
+  return Math.min(1, Math.max(0, r));
+}
+
+type AudioContextCtor = typeof AudioContext;
+
+function getAudioContextCtor(): AudioContextCtor | null {
+  const w = globalThis as unknown as {
+    AudioContext?: AudioContextCtor;
+    webkitAudioContext?: AudioContextCtor;
+  };
+  return w.AudioContext ?? w.webkitAudioContext ?? null;
+}
+
+export interface DecodedAudio {
+  peaks: number[];
+  duration: number;
+}
+
+export async function decodePeaks(file: File): Promise<DecodedAudio | null> {
+  const Ctor = getAudioContextCtor();
+  if (!Ctor) return null;
+  try {
+    const ctx = new Ctor();
+    try {
+      const buffer = await ctx.decodeAudioData(await file.arrayBuffer());
+      return { peaks: peaksFromAudioBuffer(buffer), duration: buffer.duration };
+    } finally {
+      void ctx.close();
+    }
+  } catch {
+    return null;
+  }
+}
+
+export interface WaveformHandle {
+  destroy(): void;
+}
+
+export function attachWaveform(opts: {
+  mount: HTMLElement;
+  media: HTMLAudioElement;
+  peaks: number[];
+}): WaveformHandle {
+  const { mount, media, peaks } = opts;
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('data-role', 'audio-waveform-canvas');
+  canvas.className = 'blok-audio-waveform__canvas';
+  mount.appendChild(canvas);
+
+  const prefersReducedMotion = (): boolean =>
+    globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+
+  // Animation state. `playing` is true between play and pause/ended and pins the
+  // boost energy at full. On pause we keep the loop alive briefly with `settling`
+  // so the bars glide back to their resting peaks (energy ramps 1→0) instead of
+  // snapping. `energy` reflects the current boost multiplier.
+  const SETTLE_MS = 420;
+  // The comet-head colour blooms in over ENTRANCE_MS each time playback starts.
+  const ENTRANCE_MS = 650;
+  const anim = { playing: false, settling: false, settleStart: 0, entranceStart: 0, rafId: 0 };
+
+  const energyAt = (now: number): number => {
+    if (anim.playing) return 1;
+    if (!anim.settling) return 0;
+    return Math.min(1, Math.max(0, 1 - (now - anim.settleStart) / SETTLE_MS));
+  };
+
+  const entranceAt = (now: number): number => entranceEase((now - anim.entranceStart) / ENTRANCE_MS);
+
+  const draw = (now: number): void => {
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const dpr = globalThis.devicePixelRatio || 1;
+    const targetW = Math.round(rect.width * dpr);
+    const targetH = Math.round(rect.height * dpr);
+    // Resizing the backing store clears it; only pay that cost when the box
+    // actually changed (every frame of the loop would otherwise reallocate).
+    if (canvas.width !== targetW || canvas.height !== targetH) {
+      canvas.width = targetW;
+      canvas.height = targetH;
+    }
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, rect.width, rect.height);
+
+    const played = media.duration ? media.currentTime / media.duration : 0;
+    const playheadIndex = played * peaks.length;
+    const reduced = prefersReducedMotion();
+    const timeSeconds = now / 1000;
+    const energy = reduced ? 0 : energyAt(now);
+    const live = energy > 0;
+    const entrance = live ? entranceAt(now) : 0;
+
+    const slot = rect.width / peaks.length;
+    const gap = Math.min(2, slot * 0.34);
+    const barW = Math.max(1, slot - gap);
+    const radius = Math.min(barW / 2, 2);
+    const styles = getComputedStyle(canvas);
+    const playedColor = styles.getPropertyValue('--blok-audio-bar-played').trim() || '#222';
+    const baseColor = styles.getPropertyValue('--blok-audio-bar').trim() || '#ccc';
+    const headColor = styles.getPropertyValue('--blok-audio-bar-head').trim() || playedColor;
+
+    const paintBar = (x: number, y: number, h: number): void => {
+      if (typeof ctx.roundRect === 'function') {
+        ctx.beginPath();
+        ctx.roundRect(x, y, barW, h, radius);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, barW, h);
+      }
+    };
+
+    peaks.forEach((peak, i) => {
+      const amp = live
+        ? liveAmplitude({ basePeak: peak, index: i, playheadIndex, timeSeconds, reduced, energy })
+        : peak;
+      const h = Math.max(2, amp * rect.height * 0.92);
+      const x = i * slot;
+      const y = (rect.height - h) / 2;
+      ctx.fillStyle = i < playheadIndex ? playedColor : baseColor;
+      paintBar(x, y, h);
+
+      // Comet-head colour shift — overlay the head tint, its alpha ramping in
+      // with the entrance and fading out on the settle (energy).
+      if (live) {
+        const blend = headColorBlend({ distance: i - playheadIndex, energy, entrance });
+        if (blend > 0.001) {
+          ctx.save();
+          ctx.globalAlpha = Math.min(1, blend);
+          ctx.fillStyle = headColor;
+          paintBar(x, y, h);
+          ctx.restore();
+        }
+      }
+    });
+  };
+
+  const setSeekVar = (): void => {
+    mount.style.setProperty(
+      '--blok-audio-seek-pct',
+      String(media.duration ? (media.currentTime / media.duration) * 100 : 0),
+    );
+  };
+
+  const loop = (now: number): void => {
+    draw(now);
+    // Keep looping while playing, or while the post-pause settle still has energy.
+    const keepGoing = anim.playing || (anim.settling && energyAt(now) > 0);
+    if (keepGoing) {
+      anim.rafId = requestAnimationFrame(loop);
+    } else {
+      anim.settling = false;
+      anim.rafId = 0;
+    }
+  };
+
+  const onPlay = (): void => {
+    setSeekVar();
+    anim.playing = true;
+    anim.settling = false;
+    // Restart the head-colour entrance so it blooms in on every play.
+    anim.entranceStart = globalThis.performance?.now?.() ?? 0;
+    // No continuous loop under reduced motion — timeupdate alone advances the
+    // played boundary, with no dancing bars.
+    if (!anim.rafId && !prefersReducedMotion()) anim.rafId = requestAnimationFrame(loop);
+  };
+  const onStop = (): void => {
+    // Hand off to the settle ramp so the bars glide down rather than snap. Under
+    // reduced motion there's no loop/boost to settle, so just stop.
+    if (anim.playing && !prefersReducedMotion()) {
+      anim.playing = false;
+      anim.settling = true;
+      anim.settleStart = globalThis.performance?.now?.() ?? 0;
+      if (!anim.rafId) anim.rafId = requestAnimationFrame(loop);
+    } else {
+      anim.playing = false;
+      anim.settling = false;
+      if (anim.rafId) { cancelAnimationFrame(anim.rafId); anim.rafId = 0; }
+      draw(0);
+    }
+  };
+
+  // Keeps the played boundary + seek var current while paused-seeking or when
+  // the continuous loop is off (reduced motion). The loop owns drawing while it
+  // runs, so skip the redundant paint then.
+  const onTime = (): void => {
+    setSeekVar();
+    if (!anim.rafId) draw(0);
+  };
+
+  const seek = (clientX: number): void => {
+    if (!media.duration) return;
+    media.currentTime = ratioFromPointer(clientX, canvas.getBoundingClientRect()) * media.duration;
+    setSeekVar();
+    if (!anim.rafId) draw(0);
+  };
+  const drag = { active: false };
+  const onDown = (e: PointerEvent): void => { drag.active = true; seek(e.clientX); };
+  const onMove = (e: PointerEvent): void => { if (drag.active) seek(e.clientX); };
+  const onUp = (): void => { drag.active = false; };
+
+  canvas.addEventListener('pointerdown', onDown);
+  globalThis.addEventListener('pointermove', onMove);
+  globalThis.addEventListener('pointerup', onUp);
+  media.addEventListener('play', onPlay);
+  media.addEventListener('pause', onStop);
+  media.addEventListener('ended', onStop);
+  media.addEventListener('timeupdate', onTime);
+  media.addEventListener('loadedmetadata', onTime);
+  draw(0);
+
+  return {
+    destroy(): void {
+      if (anim.rafId) cancelAnimationFrame(anim.rafId);
+      anim.playing = false;
+      canvas.removeEventListener('pointerdown', onDown);
+      globalThis.removeEventListener('pointermove', onMove);
+      globalThis.removeEventListener('pointerup', onUp);
+      media.removeEventListener('play', onPlay);
+      media.removeEventListener('pause', onStop);
+      media.removeEventListener('ended', onStop);
+      media.removeEventListener('timeupdate', onTime);
+      media.removeEventListener('loadedmetadata', onTime);
+      canvas.remove();
+    },
+  };
+}

package/src/tools/file/constants.ts

@@ -1,8 +1,7 @@
-/** Non-image MIME prefixes claimed for paste/drop routing. Image files stay with the Image tool. */
+/** Non-image MIME prefixes claimed for paste/drop routing. Image files stay with the Image tool. Audio files route to the Audio tool. */
 export const PASTE_MIME_TYPES = [
   'application/*',
   'text/*',
-  'audio/*',
   'video/*',
   'font/*',
   'model/*',
@@ -13,7 +12,7 @@ export const PASTE_EXTENSIONS = [
   'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
   'zip', 'rar', '7z', 'gz', 'tar',
   'csv', 'txt', 'rtf', 'md', 'json',
-  'mp3', 'wav', 'ogg', 'mp4', 'mov', 'avi', 'mkv',
+  'mp4', 'mov', 'avi', 'mkv',
 ] as const;
 
 /** Default upload ceiling (bytes) when the consumer does not configure `maxSize`. */

package/src/tools/image/constants.ts

@@ -1,10 +1,5 @@
-export const DEFAULT_MIME_TYPES = [
-  'image/jpeg',
-  'image/png',
-  'image/gif',
-  'image/webp',
-  'image/svg+xml',
-] as const;
+// Accept any image type by default; consumers restrict via the `types` config.
+export const DEFAULT_MIME_TYPES = ['image/*'] as const;
 
 export const DEFAULT_MAX_SIZE = 30 * 1024 * 1024; // 30 MiB
 

package/src/tools/image/uploader.ts

@@ -1,5 +1,6 @@
 import type { ImageConfig } from '../../../types/tools/image';
 import { resolveMaxSize } from '../../components/utils/max-size';
+import { matchesMime } from '../../components/utils/mime-match';
 import { DEFAULT_MAX_SIZE, DEFAULT_MIME_TYPES } from './constants';
 import { ImageError } from './errors';
 
@@ -90,7 +91,7 @@ export class Uploader {
     const types = this.config.types ?? [...DEFAULT_MIME_TYPES];
     const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
 
-    if (!types.includes(file.type)) {
+    if (!matchesMime(file.type, types)) {
       throw new ImageError('UNSUPPORTED_TYPE', file.type || 'unknown');
     }
     if (file.size > maxSize) {

package/src/tools/index.ts

@@ -33,6 +33,7 @@ export { Quote } from './quote';
 export { CodeTool as Code } from './code';
 export { ImageTool as Image } from './image';
 export { FileTool as File } from './file';
+export { AudioTool as Audio } from './audio';
 export { VideoTool as Video } from './video';
 export { ColumnList } from './column-list';
 export { Column } from './column';
@@ -66,6 +67,7 @@ export const defaultBlockTools = {
   code: { inlineToolbar: false },
   image: {},
   file: {},
+  audio: {},
   video: {},
   column_list: {},
   column: {},

package/src/tools/video/constants.ts

@@ -1,8 +1,5 @@
-export const DEFAULT_MIME_TYPES = [
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-] as const;
+// Accept any video type by default; consumers restrict via the `types` config.
+export const DEFAULT_MIME_TYPES = ['video/*'] as const;
 
 export const DEFAULT_MAX_SIZE = 100 * 1024 * 1024; // 100 MiB
 

package/src/tools/video/uploader.ts

@@ -1,5 +1,6 @@
 import type { VideoConfig } from '../../../types/tools/video';
 import { resolveMaxSize } from '../../components/utils/max-size';
+import { matchesMime } from '../../components/utils/mime-match';
 import { DEFAULT_MAX_SIZE, DEFAULT_MIME_TYPES } from './constants';
 
 export interface UploadResult {
@@ -65,7 +66,7 @@ export class Uploader {
     const types = this.config.types ?? [...DEFAULT_MIME_TYPES];
     const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
 
-    if (file.type && !types.includes(file.type)) {
+    if (file.type && !matchesMime(file.type, types)) {
       throw new VideoUploadError('UNSUPPORTED_TYPE', file.type);
     }
     if (file.size > maxSize) {

package/types/api/index.d.ts

@@ -18,3 +18,4 @@ export * from './ui';
 export * from './tools';
 
 export * from './theme';
+export * from './width';

package/types/api/width.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Editor content width mode.
+ *
+ * - `'narrow'` — content is constrained to the default `--max-width-content` (the default).
+ * - `'full'`   — content max-width constraint is removed so it fills its container.
+ */
+export type EditorWidth = 'full' | 'narrow';
+
+/**
+ * Describes Blok's width API for controlling the editor content width mode.
+ */
+export interface Width {
+  /**
+   * Returns the current editor content width mode.
+   *
+   * @returns {EditorWidth} the active mode (defaults to `'narrow'`)
+   */
+  get(): EditorWidth;
+
+  /**
+   * Sets the editor content width mode.
+   *
+   * @param {EditorWidth} value - the mode to apply
+   */
+  set(value: EditorWidth): void;
+
+  /**
+   * Toggles the editor content width mode between `'narrow'` and `'full'`.
+   */
+  toggle(): void;
+}

package/types/data-attributes.d.ts

@@ -28,6 +28,7 @@ export const DATA_ATTR: {
 
   // Editor Modes
   readonly rtl: 'data-blok-rtl';
+  readonly width: 'data-blok-width';
 
   // Drag and Drop
   readonly dragging: 'data-blok-dragging';

package/types/index.d.ts

@@ -33,6 +33,7 @@ import {
   Theme,
   ThemeMode,
   ResolvedTheme,
+  Width,
 } from './api';
 
 import { OutputData } from './data-formats';
@@ -129,6 +130,8 @@ export {
   Theme,
   ThemeMode,
   ResolvedTheme,
+  Width,
+  EditorWidth,
 } from './api';
 export {
   BlockMutationType,
@@ -212,6 +215,7 @@ export class Blok {
 
   public blocks: Blocks;
   public caret: Caret;
+  public history: History;
   public sanitizer: Sanitizer;
   public saver: Saver;
   public selection: Selection;
@@ -221,6 +225,7 @@ export class Blok {
   public tooltip: Tooltip;
   public readOnly: ReadOnly;
   public theme: Theme;
+  public width: Width;
   constructor(configuration?: BlokConfig|string);
 
   /**

package/types/tools/audio.d.ts

@@ -0,0 +1,40 @@
+import { BlockToolData } from './block-tool-data';
+import { MaxSizeConfig } from './max-size';
+
+export type AudioAlignment = 'left' | 'center' | 'right';
+
+export interface AudioData extends BlockToolData {
+  url: string;
+  caption?: string;
+  captionVisible?: boolean;
+  title?: string;
+  artist?: string;
+  coverUrl?: string;
+  loop?: boolean;
+  width?: number;
+  alignment?: AudioAlignment;
+  fileName?: string;
+  mimeType?: string;
+  duration?: number;
+  peaks?: number[];
+}
+
+export interface AudioUploadContext {
+  onProgress?(percent: number): void;
+}
+
+export interface AudioUploader {
+  uploadByFile?(file: File, ctx?: AudioUploadContext): Promise<{ url: string; fileName?: string }>;
+  uploadByUrl?(url: string, ctx?: AudioUploadContext): Promise<{ url: string }>;
+}
+
+export interface AudioConfig {
+  uploader?: AudioUploader;
+  /**
+   * Accepted MIME types. Entries may be exact (`audio/mpeg`) or family wildcards
+   * (`audio/*`). Default: `['audio/*']` — any audio type.
+   */
+  types?: string[];
+  maxSize?: MaxSizeConfig;
+  captionPlaceholder?: string;
+}

package/types/tools/image.d.ts

@@ -78,7 +78,10 @@ export interface ImageUploader {
  */
 export interface ImageConfig {
   uploader?: ImageUploader;
-  /** Accepted MIME types. Default: image/jpeg, image/png, image/gif, image/webp, image/svg+xml */
+  /**
+   * Accepted MIME types. Entries may be exact (`image/png`) or family wildcards
+   * (`image/*`). Default: `['image/*']` — any image type.
+   */
   types?: string[];
   /**
    * Max upload size. A number caps every type (bytes); an object caps per MIME