@jackuait/blok 0.16.1 → 0.17.0

package/src/tools/file/constants.ts

@@ -16,4 +16,7 @@ export const PASTE_EXTENSIONS = [
   'mp3', 'wav', 'ogg', 'mp4', 'mov', 'avi', 'mkv',
 ] as const;
 
+/** Default upload ceiling (bytes) when the consumer does not configure `maxSize`. */
+export const DEFAULT_MAX_SIZE = 30 * 1024 * 1024; // 30 MiB
+
 export const DEFAULT_CAPTION_PLACEHOLDER = 'Write a caption…';

package/src/tools/file/index.ts

@@ -11,12 +11,15 @@ import type {
 import type { MenuConfig } from '../../../types/tools/menu-config';
 import type { FileConfig, FileData, FileUploadResult } from '../../../types/tools/file';
 import type { ImageData } from '../../../types/tools/image';
+import type { VideoData } from '../../../types/tools/video';
 import { IconCaption, IconCopy, IconDownload, IconFile, IconReplace } from '../../components/icons';
 import { DEFAULT_CAPTION_PLACEHOLDER, PASTE_EXTENSIONS, PASTE_MIME_TYPES } from './constants';
 import { renderEmptyState, type EmptyStateElement } from './empty-state';
 import { renderUploadingState, type UploadingStateElement } from './uploading-state';
 import { renderCaptionRow, renderFileCard } from './ui';
 import { Uploader } from './uploader';
+import { FileToolError } from './errors';
+import { uploadErrorMessage } from '../../components/utils/upload-error-message';
 import { safeHttpHref } from './url';
 import { isPreviewable } from './preview';
 import { openFilePreview } from './preview-modal';
@@ -26,6 +29,9 @@ type ToolState = 'EMPTY' | 'LOADING' | 'RENDERED' | 'ERROR';
 /** Image filenames/URLs that should auto-convert the File block into an Image. */
 const IMAGE_EXTENSION_RE = /\.(png|jpe?g|gif|webp|svg)(?:[?#]|$)/i;
 
+/** Video filenames/URLs that should auto-convert the File block into a Video. */
+const VIDEO_EXTENSION_RE = /\.(mp4|webm|ogg|mov|m4v)(?:[?#]|$)/i;
+
 export class FileTool implements BlockTool {
   private readonly api: API;
   private readonly block: BlockAPI;
@@ -37,9 +43,12 @@ export class FileTool implements BlockTool {
   private state: ToolState;
   private uploadingEl: UploadingStateElement | null = null;
   private lastFileName: string | null = null;
+  private errorMessage: string | null = null;
   private previewTeardown: (() => void) | null = null;
   /** When the pending upload is an image, the result converts to an Image block. */
   private pendingImageConversion = false;
+  /** When the pending upload is a video, the result converts to a Video block. */
+  private pendingVideoConversion = false;
 
   constructor(options: BlockToolConstructorOptions<FileData, FileConfig>) {
     this.api = options.api;
@@ -153,26 +162,29 @@ export class FileTool implements BlockTool {
   private startUpload(file: File): void {
     this.lastFileName = file.name;
     this.pendingImageConversion = file.type.startsWith('image/') || IMAGE_EXTENSION_RE.test(file.name);
+    this.pendingVideoConversion = file.type.startsWith('video/') || VIDEO_EXTENSION_RE.test(file.name);
     this.state = 'LOADING';
     this.renderState();
     void this.uploader
       .handleFile(file, { onProgress: (p) => this.uploadingEl?.setProgress(p) })
       .then((result) => this.applyResult(result))
-      .catch(() => this.applyError());
+      .catch((err) => this.applyError(err));
   }
 
   private startUrl(url: string): void {
     this.lastFileName = null;
     this.pendingImageConversion = IMAGE_EXTENSION_RE.test(url);
+    this.pendingVideoConversion = VIDEO_EXTENSION_RE.test(url);
     this.state = 'LOADING';
     this.renderState();
     void this.uploader
       .handleUrl(url, { onProgress: (p) => this.uploadingEl?.setProgress(p) })
       .then((result) => this.applyResult(result))
-      .catch(() => this.applyError());
+      .catch((err) => this.applyError(err));
   }
 
   private applyResult(result: FileUploadResult): void {
+    this.errorMessage = null;
     this.data = {
       ...this.data,
       url: result.url,
@@ -180,6 +192,9 @@ export class FileTool implements BlockTool {
       size: result.size ?? this.data.size,
       mimeType: result.mimeType ?? this.data.mimeType,
     };
+    if (this.pendingVideoConversion && this.convertToVideo()) {
+      return;
+    }
     if (this.pendingImageConversion && this.convertToImage()) {
       return;
     }
@@ -207,7 +222,33 @@ export class FileTool implements BlockTool {
     return true;
   }
 
-  private applyError(): void {
+  /**
+   * Swap this File block for a Video block carrying the just-uploaded url.
+   * Mirrors {@link convertToImage}: File and Video declare no conversionConfig,
+   * so we replace in place. Returns false (keep the file card) when the block
+   * can no longer be located.
+   */
+  private convertToVideo(): boolean {
+    const index = this.api.blocks.getBlockIndex(this.block.id);
+    if (index === undefined) {
+      return false;
+    }
+    const videoData: VideoData = { url: this.data.url };
+    if (this.data.fileName !== undefined) videoData.fileName = this.data.fileName;
+    if (this.data.mimeType !== undefined) videoData.mimeType = this.data.mimeType;
+    if ((this.data.caption ?? '') !== '') videoData.caption = this.data.caption;
+    if (this.data.captionVisible !== undefined) videoData.captionVisible = this.data.captionVisible;
+    this.api.blocks.insert('video', videoData, {}, index, false, true);
+    return true;
+  }
+
+  private applyError(err?: unknown): void {
+    this.errorMessage = err instanceof FileToolError
+      ? uploadErrorMessage(err, (key) => this.api.i18n.t(key), {
+        tooLarge: 'tools.file.errorFileTooLarge',
+        generic: 'tools.file.errorUploadFailed',
+      })
+      : null;
     this.state = 'ERROR';
     this.renderState();
   }
@@ -331,7 +372,7 @@ export class FileTool implements BlockTool {
     wrap.setAttribute('data-role', 'file-error');
 
     const message = document.createElement('span');
-    message.textContent = i18n.t('tools.file.errorUploadFailed');
+    message.textContent = this.errorMessage ?? i18n.t('tools.file.errorUploadFailed');
 
     const retry = document.createElement('button');
     retry.type = 'button';

package/src/tools/file/uploader.ts

@@ -1,4 +1,6 @@
 import type { FileConfig, FileUploadResult } from '../../../types/tools/file';
+import { resolveMaxSize } from '../../components/utils/max-size';
+import { DEFAULT_MAX_SIZE } from './constants';
 import { FileToolError } from './errors';
 
 export interface UploadOptions {
@@ -120,12 +122,13 @@ export class Uploader {
   }
 
   private validateFile(file: File): void {
-    const { types, maxSize } = this.config;
+    const { types } = this.config;
+    const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
 
     if (types !== undefined && !types.includes(file.type)) {
       throw new FileToolError('UNSUPPORTED_TYPE', file.type || 'unknown');
     }
-    if (maxSize !== undefined && file.size > maxSize) {
+    if (file.size > maxSize) {
       throw new FileToolError('FILE_TOO_LARGE', `${file.size} > ${maxSize}`);
     }
   }

package/src/tools/image/constants.ts

@@ -6,7 +6,7 @@ export const DEFAULT_MIME_TYPES = [
   'image/svg+xml',
 ] as const;
 
-export const DEFAULT_MAX_SIZE = 10 * 1024 * 1024; // 10 MiB
+export const DEFAULT_MAX_SIZE = 30 * 1024 * 1024; // 30 MiB
 
 export const DEFAULT_CAPTION_PLACEHOLDER = 'Write a caption…';
 

package/src/tools/image/converted-uploader.ts

@@ -0,0 +1,30 @@
+import type { API } from '../../../types';
+import type { ImageConfig } from '../../../types/tools/image';
+
+export type ConvertedUploadFn = (
+  file: File,
+  ctx?: { onProgress?: (percent: number) => void },
+) => Promise<{ url: string; fileName?: string }>;
+
+interface UploaderHolder { uploader?: { uploadByFile?: ConvertedUploadFn } }
+
+function asUploaderHolder(value: unknown): UploaderHolder | undefined {
+  return typeof value === 'object' && value !== null ? (value as UploaderHolder) : undefined;
+}
+
+/**
+ * Resolve which `uploadByFile` to use for a converted WebM file:
+ * the video tool's uploader (if registered under the `video` key), else the
+ * image tool's own uploader, else undefined (caller uses a blob URL).
+ */
+export function resolveConvertedUploader(
+  api: API,
+  imageConfig: ImageConfig,
+): ConvertedUploadFn | undefined {
+  const videoEntry = asUploaderHolder(api.tools.getToolsConfig().tools?.video);
+  // Tool settings carry the config under `.config`; support a flat shape too.
+  const videoConfig = asUploaderHolder((videoEntry as { config?: unknown })?.config) ?? videoEntry;
+  const videoUpload = videoConfig?.uploader?.uploadByFile;
+
+  return videoUpload ?? imageConfig.uploader?.uploadByFile;
+}

package/src/tools/image/gif-to-webm.ts

@@ -0,0 +1,170 @@
+// Minimal structural types for the WebCodecs surface we use (avoids relying on
+// lib.dom types that may not be present in the project's TS target).
+interface DecodedFrame {
+  displayWidth: number;
+  displayHeight: number;
+  duration: number | null;
+  timestamp: number;
+  close(): void;
+}
+
+interface ImageDecoderLike {
+  tracks: { ready: Promise<void>; selectedTrack?: { frameCount: number } };
+  decode(opts: { frameIndex: number }): Promise<{ image: DecodedFrame; complete: boolean }>;
+  close(): void;
+}
+
+interface EncodedChunk { type: string; }
+
+interface VideoEncoderLike {
+  configure(config: Record<string, unknown>): void;
+  encode(frame: DecodedFrame, opts?: { keyFrame?: boolean }): void;
+  flush(): Promise<void>;
+  close(): void;
+}
+
+interface VideoEncoderCtor {
+  new (init: {
+    output: (chunk: EncodedChunk, meta: unknown) => void;
+    error: (err: unknown) => void;
+  }): VideoEncoderLike;
+  isConfigSupported(config: Record<string, unknown>): Promise<{ supported?: boolean }>;
+}
+
+const KEYFRAME_INTERVAL = 30;
+
+function hasWebCodecs(): boolean {
+  const g = globalThis as Record<string, unknown>;
+  return typeof g.ImageDecoder !== 'undefined' && typeof g.VideoEncoder !== 'undefined';
+}
+
+async function pickCodec(
+  Encoder: VideoEncoderCtor,
+  width: number,
+  height: number,
+): Promise<{ encoderCodec: string; muxerCodec: 'V_VP9' | 'V_VP8' } | null> {
+  const candidates: Array<{ encoderCodec: string; muxerCodec: 'V_VP9' | 'V_VP8' }> = [
+    { encoderCodec: 'vp09.00.10.08', muxerCodec: 'V_VP9' },
+    { encoderCodec: 'vp8', muxerCodec: 'V_VP8' },
+  ];
+  for (const c of candidates) {
+    const probe = await Encoder.isConfigSupported({ codec: c.encoderCodec, width, height });
+    if (probe.supported) return c;
+  }
+  return null;
+}
+
+/**
+ * Convert an animated GIF (raw bytes) into a WebM Blob using WebCodecs.
+ * Returns null whenever the caller should keep the original GIF: WebCodecs
+ * unavailable, a static/single-frame GIF, an unsupported codec, or any error.
+ */
+export async function convertGifToWebm(
+  data: ArrayBuffer,
+  opts: { onProgress?: (percent: number) => void } = {},
+): Promise<Blob | null> {
+  if (!hasWebCodecs()) return null;
+
+  const g = globalThis as Record<string, unknown>;
+  const DecoderCtor = g.ImageDecoder as new (init: { data: ArrayBuffer; type: string }) => ImageDecoderLike;
+  const EncoderCtor = g.VideoEncoder as VideoEncoderCtor;
+
+  const resources: { decoder?: ImageDecoderLike; encoder?: VideoEncoderLike } = {};
+  const openFrames: DecodedFrame[] = [];
+
+  try {
+    const decoder = new DecoderCtor({ data, type: 'image/gif' });
+    resources.decoder = decoder;
+    await decoder.tracks.ready;
+    const frameCount = decoder.tracks.selectedTrack?.frameCount ?? 0;
+    if (frameCount <= 1) return null;
+
+    const first = await decoder.decode({ frameIndex: 0 });
+    openFrames.push(first.image);
+    const width = first.image.displayWidth;
+    const height = first.image.displayHeight;
+
+    const codec = await pickCodec(EncoderCtor, width, height);
+    if (!codec) return null;
+
+    const { Muxer, ArrayBufferTarget } = await import('webm-muxer');
+    const target = new ArrayBufferTarget();
+    const muxer = new Muxer({
+      target,
+      video: { codec: codec.muxerCodec, width, height },
+      firstTimestampBehavior: 'offset',
+    });
+
+    const encoder = new EncoderCtor({
+      output: (chunk, meta) => muxer.addVideoChunk(chunk as never, meta as never),
+      error: () => undefined,
+    });
+    resources.encoder = encoder;
+    encoder.configure({
+      codec: codec.encoderCodec,
+      width,
+      height,
+      bitrate: Math.max(200_000, width * height * 4),
+    });
+
+    const indices = Array.from({ length: frameCount }, (_unused, i) => i);
+    // Running timestamp held in a const cursor so each frame is re-stamped to be
+    // monotonic from the accumulated GIF delays (µs) without a mutable `let`.
+    const cursor = { timestamp: 0 };
+    for (const i of indices) {
+      const frame = await getFrame(i, first.image, decoder);
+      cursor.timestamp = encodeFrame(encoder, frame, i, cursor.timestamp);
+      collectFrame(openFrames, frame, i);
+      opts.onProgress?.(Math.round(((i + 1) / frameCount) * 100));
+    }
+
+    await encoder.flush();
+    muxer.finalize();
+    return new Blob([target.buffer], { type: 'video/webm' });
+  } catch {
+    return null;
+  } finally {
+    openFrames.forEach((f) => {
+      try { f.close(); } catch { /* already closed */ }
+    });
+    try { resources.encoder?.close(); } catch { /* noop */ }
+    try { resources.decoder?.close(); } catch { /* noop */ }
+  }
+}
+
+/**
+ * Resolve a decoded frame for the given index. Frame 0 reuses the already
+ * decoded first image; later frames are decoded on demand.
+ */
+async function getFrame(
+  index: number,
+  first: DecodedFrame,
+  decoder: ImageDecoderLike,
+): Promise<DecodedFrame> {
+  if (index === 0) return first;
+  return (await decoder.decode({ frameIndex: index })).image;
+}
+
+/**
+ * Encode one frame at the given timestamp and return the timestamp for the
+ * next frame (current + this frame's GIF delay, in µs).
+ */
+function encodeFrame(
+  encoder: VideoEncoderLike,
+  frame: DecodedFrame,
+  index: number,
+  timestamp: number,
+): number {
+  const stamped = frame as DecodedFrame & { timestamp: number };
+  stamped.timestamp = timestamp;
+  encoder.encode(frame, { keyFrame: index % KEYFRAME_INTERVAL === 0 });
+  return timestamp + (frame.duration ?? 100_000);
+}
+
+/**
+ * Track later frames so they can be closed in the finally block. Frame 0 is
+ * already tracked by the caller.
+ */
+function collectFrame(openFrames: DecodedFrame[], frame: DecodedFrame, index: number): void {
+  if (index !== 0) openFrames.push(frame);
+}

package/src/tools/image/index.ts

@@ -33,6 +33,8 @@ import {
 } from '../../components/icons';
 import { DEFAULT_CAPTION_PLACEHOLDER, URL_PATTERN } from './constants';
 import { renderEmptyState, type EmptyStateElement } from './empty-state';
+import { uploadErrorMessage } from '../../components/utils/upload-error-message';
+import { pickDisplayMaxSize } from '../../components/utils/max-size';
 import { renderErrorState } from './error-state';
 import { ImageError } from './errors';
 import { attachResizeHandle, type ResizeEdge } from './resizer';
@@ -50,6 +52,8 @@ import { openAltPopover } from './alt-popover';
 import { probeImageDimensions } from './probe-dimensions';
 import { renderUploadingState, type UploadingStateElement } from './uploading-state';
 import { Uploader, type UploadResult } from './uploader';
+import { convertGifToWebm } from './gif-to-webm';
+import { resolveConvertedUploader } from './converted-uploader';
 
 type ToolState = 'EMPTY' | 'LOADING' | 'RENDERED' | 'ERROR';
 
@@ -83,6 +87,7 @@ export class ImageTool implements BlockTool {
   private brokenImage = false;
   private retrying = false;
   private reloadAttempts = 0;
+  private converting = false;
 
   constructor(options: BlockToolConstructorOptions<ImageData, ImageConfig>) {
     this.api = options.api;
@@ -153,7 +158,11 @@ export class ImageTool implements BlockTool {
   public onPaste(event: PasteEvent): void {
     if (event.type === 'pattern') {
       const detail = (event as PatternPasteEvent).detail;
-      this.applyResult({ url: detail.data });
+      if (this.shouldConvertGifUrl(detail.data)) {
+        this.startUrl(detail.data);
+      } else {
+        this.applyResult({ url: detail.data });
+      }
       return;
     }
     if (event.type === 'tag') {
@@ -174,6 +183,18 @@ export class ImageTool implements BlockTool {
   };
 
   private startUpload(file: File): void {
+    if (this.shouldConvertGif(file.type)) {
+      void this.convertGifToVideoBlock(file).then((handled) => {
+        if (!handled) this.uploadImageFile(file);
+      });
+      return;
+    }
+    this.uploadImageFile(file);
+  }
+
+  /** Existing upload body, extracted verbatim. */
+  private uploadImageFile(file: File): void {
+    this.converting = false;
     this.lastFileName = file.name;
     this.lastSource = { kind: 'file', file };
     this.state = 'LOADING';
@@ -186,7 +207,67 @@ export class ImageTool implements BlockTool {
       .catch((err) => this.applyError(err));
   }
 
+  private shouldConvertGif(mimeType: string): boolean {
+    return this.config.convertGifToVideo !== false && mimeType === 'image/gif';
+  }
+
+  /**
+   * Try to convert a GIF to a looping WebM video block. Returns true only when
+   * the block was swapped; false means the caller should keep the GIF (image).
+   */
+  private async convertGifToVideoBlock(file: File): Promise<boolean> {
+    this.converting = true;
+    this.state = 'LOADING';
+    this.errorMessage = null;
+    this.brokenImage = false;
+    this.lastFileName = file.name;
+    this.renderState();
+    try {
+      const blob = await convertGifToWebm(await file.arrayBuffer(), { onProgress: this.reportProgress });
+      if (!blob) { this.converting = false; return false; }
+      const webm = new File([blob], file.name.replace(/\.gif$/i, '.webm'), { type: 'video/webm' });
+      const url = await this.uploadConverted(webm);
+      if (url === null) { this.converting = false; return false; }
+      this.converting = false;
+      return this.swapToVideoBlock(url, webm.name);
+    } catch {
+      this.converting = false;
+      return false;
+    }
+  }
+
+  private async uploadConverted(file: File): Promise<string | null> {
+    const upload = resolveConvertedUploader(this.api, this.config);
+    if (upload) {
+      const res = await upload(file, { onProgress: this.reportProgress });
+      return res.url;
+    }
+    return URL.createObjectURL(file);
+  }
+
+  private swapToVideoBlock(url: string, fileName: string): boolean {
+    const index = this.api.blocks.getBlockIndex(this.block.id);
+    if (index === undefined) return false;
+    this.api.blocks.insert(
+      'video',
+      { url, autoplay: true, loop: true, mimeType: 'video/webm', fileName },
+      {}, index, false, true,
+    );
+    return true;
+  }
+
   private startUrl(url: string): void {
+    if (this.shouldConvertGifUrl(url)) {
+      void this.convertGifUrlToVideoBlock(url).then((handled) => {
+        if (!handled) this.loadImageUrl(url);
+      });
+      return;
+    }
+    this.loadImageUrl(url);
+  }
+
+  /** Existing startUrl body, extracted verbatim. */
+  private loadImageUrl(url: string): void {
     this.lastFileName = null;
     this.lastSource = { kind: 'url', url };
     this.state = 'LOADING';
@@ -199,6 +280,41 @@ export class ImageTool implements BlockTool {
       .catch((err) => this.applyError(err));
   }
 
+  private shouldConvertGifUrl(url: string): boolean {
+    return this.config.convertGifToVideo !== false && /\.gif(\?|#|$)/i.test(url);
+  }
+
+  private async convertGifUrlToVideoBlock(url: string): Promise<boolean> {
+    const bytes = await this.fetchGifBytes(url);
+    if (!bytes) return false;
+    this.converting = true;
+    this.state = 'LOADING';
+    this.errorMessage = null;
+    this.renderState();
+    try {
+      const blob = await convertGifToWebm(bytes, { onProgress: this.reportProgress });
+      if (!blob) { this.converting = false; return false; }
+      const webm = new File([blob], 'animation.webm', { type: 'video/webm' });
+      const uploadedUrl = await this.uploadConverted(webm);
+      if (uploadedUrl === null) { this.converting = false; return false; }
+      this.converting = false;
+      return this.swapToVideoBlock(uploadedUrl, webm.name);
+    } catch {
+      this.converting = false;
+      return false;
+    }
+  }
+
+  private async fetchGifBytes(url: string): Promise<ArrayBuffer | null> {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return null;
+      return await res.arrayBuffer();
+    } catch {
+      return null; // CORS / network → keep the GIF as an image URL
+    }
+  }
+
   private retryLastSource(): void {
     const source = this.lastSource;
     if (!source) {
@@ -231,7 +347,12 @@ export class ImageTool implements BlockTool {
 
   private applyError(err: unknown): void {
     this.state = 'ERROR';
-    this.errorMessage = err instanceof Error ? err.message : this.api.i18n.t('tools.image.errorUploadFailed');
+    this.errorMessage = err instanceof ImageError
+      ? uploadErrorMessage(err, (key) => this.api.i18n.t(key), {
+        tooLarge: 'tools.image.errorFileTooLarge',
+        generic: 'tools.image.errorUploadFailed',
+      })
+      : this.api.i18n.t('tools.image.errorUploadFailed');
     this.brokenImage = false;
     this.retrying = false;
     this.renderState();
@@ -565,7 +686,7 @@ export class ImageTool implements BlockTool {
       onFile: (file) => this.startUpload(file),
       onUrl: (url) => this.startUrl(url),
       acceptTypes: this.config.types,
-      maxSize: this.config.maxSize,
+      maxSize: pickDisplayMaxSize(this.config.maxSize),
       i18n: this.api.i18n,
     });
     this.emptyStateEl = el;
@@ -578,6 +699,7 @@ export class ImageTool implements BlockTool {
       fileName: this.lastFileName ?? this.api.i18n.t('tools.image.uploading'),
       onCancel: () => this.transitionToEmpty(),
       i18n: this.api.i18n,
+      ...(this.converting ? { statusLabel: this.api.i18n.t('tools.image.converting') } : {}),
     });
     this.uploadingEl = el;
     this.root.appendChild(el);

package/src/tools/image/resizer.ts

@@ -41,13 +41,26 @@ export function clampPercent(value: number, minPercent: number = MIN_WIDTH_PERCE
   return value;
 }
 
+export interface WidthResult {
+  /** The clamped width as a percent of the container. */
+  percent: number;
+  /**
+   * True when the drag wanted to shrink past the lower floor and was pinned
+   * there — used to surface a "can't go smaller" cue to the user.
+   */
+  clampedToMin: boolean;
+}
+
 /**
  * Pointer follows the dragged edge; width grows around the alignment anchor.
  * Center (frac 0.5) → both edges move → width delta = 2× pointer delta.
  * Edge-anchored (frac 0 or 1) → single side grows → width delta = 1× pointer delta.
+ *
+ * Returns the clamped percent plus whether it hit the lower floor, so callers
+ * can animate a resistance cue when the player refuses to shrink further.
  */
-export function computeWidthPercent(input: ComputeWidthInput): number {
-  if (input.containerWidth <= 0) return clampPercent(0);
+export function computeWidthResult(input: ComputeWidthInput): WidthResult {
+  if (input.containerWidth <= 0) return { percent: clampPercent(0), clampedToMin: true };
   const frac = input.alignFrac ?? 0;
   const denom = input.edge === 'right' ? 1 - frac : frac;
   const multiplier = denom === 0 ? 1 : 1 / denom;
@@ -57,9 +70,23 @@ export function computeWidthPercent(input: ComputeWidthInput): number {
   const minPercent = input.minWidthPx !== undefined
     ? Math.round((input.minWidthPx / input.containerWidth) * 100)
     : MIN_WIDTH_PERCENT;
-  return clampPercent(Math.round((nextWidth / input.containerWidth) * 100), minPercent);
+  const floor = Math.min(Math.max(minPercent, MIN_WIDTH_PERCENT), MAX_WIDTH_PERCENT);
+  const raw = Math.round((nextWidth / input.containerWidth) * 100);
+  return { percent: clampPercent(raw, minPercent), clampedToMin: raw < floor };
 }
 
+export function computeWidthPercent(input: ComputeWidthInput): number {
+  return computeWidthResult(input).percent;
+}
+
+/**
+ * Marker set on the figure while a drag is pinned at the lower floor. Shared
+ * resize-cue CSS keys off it to recoil the player/image/embed and neutralise
+ * the dragged handle, so every resizable tool gets the "can't shrink further"
+ * feedback for free.
+ */
+export const RESIZE_BLOCKED_ATTR = 'data-resize-blocked';
+
 export interface AttachResizeHandleOptions {
   handle: HTMLElement;
   figure: HTMLElement;
@@ -103,7 +130,7 @@ export function attachResizeHandle(opts: AttachResizeHandleOptions): () => void
 
   const onMove = (event: PointerEvent): void => {
     if (!state.active) return;
-    const next = computeWidthPercent({
+    const result = computeWidthResult({
       edge: opts.edge,
       containerWidth: state.containerWidth,
       startWidth: state.startWidth,
@@ -112,13 +139,19 @@ export function attachResizeHandle(opts: AttachResizeHandleOptions): () => void
       alignFrac,
       minWidthPx: opts.minWidthPx,
     });
-    state.lastPercent = next;
-    opts.onPreview(next);
+    state.lastPercent = result.percent;
+    if (result.clampedToMin) {
+      opts.figure.setAttribute(RESIZE_BLOCKED_ATTR, 'true');
+    } else {
+      opts.figure.removeAttribute(RESIZE_BLOCKED_ATTR);
+    }
+    opts.onPreview(result.percent);
   };
 
   const onUp = (event: PointerEvent): void => {
     if (!state.active) return;
     state.active = false;
+    opts.figure.removeAttribute(RESIZE_BLOCKED_ATTR);
     opts.handle.releasePointerCapture(event.pointerId);
     if (state.lastPercent !== undefined) opts.onCommit(state.lastPercent);
   };

package/src/tools/image/uploader.ts

@@ -1,4 +1,5 @@
 import type { ImageConfig } from '../../../types/tools/image';
+import { resolveMaxSize } from '../../components/utils/max-size';
 import { DEFAULT_MAX_SIZE, DEFAULT_MIME_TYPES } from './constants';
 import { ImageError } from './errors';
 
@@ -87,7 +88,7 @@ export class Uploader {
 
   private validateFile(file: File): void {
     const types = this.config.types ?? [...DEFAULT_MIME_TYPES];
-    const maxSize = this.config.maxSize ?? DEFAULT_MAX_SIZE;
+    const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
 
     if (!types.includes(file.type)) {
       throw new ImageError('UNSUPPORTED_TYPE', file.type || 'unknown');

package/src/tools/image/uploading-state.ts

@@ -5,6 +5,7 @@ import { tr } from './i18n';
 export interface UploadingStateOptions {
   fileName: string;
   sizeLabel?: string;
+  statusLabel?: string;
   onCancel?(): void;
   i18n?: I18nInstance;
 }
@@ -33,7 +34,7 @@ export function renderUploadingState(opts: UploadingStateOptions): UploadingStat
 
   const label = document.createElement('span');
   label.className = 'blok-image-uploading__label';
-  label.textContent = tr(opts.i18n, 'tools.image.uploadingLabel');
+  label.textContent = opts.statusLabel ?? tr(opts.i18n, 'tools.image.uploadingLabel');
 
   const name = document.createElement('span');
   name.className = 'blok-image-uploading__filename';