@myoc/element 0.19.532 → 0.19.533

package/dist/dev/index.js

@@ -14535,7 +14535,11 @@ var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(dragge
 
 // src/image.ts
 init_define_import_meta_env();
-import { MIME_TYPES, SVG_NS } from "@excalidraw/common";
+import {
+  DEFAULT_GIF_AUTO_DECODE_MAX_FILE_SIZE_BYTES,
+  MIME_TYPES,
+  SVG_NS
+} from "@excalidraw/common";
 
 // ../../node_modules/thumbhash/thumbhash.js
 init_define_import_meta_env();
@@ -14689,6 +14693,614 @@ function thumbHashToApproximateAspectRatio(hash) {
   return lx / ly;
 }
 
+// src/gif.ts
+init_define_import_meta_env();
+
+// ../../node_modules/modern-gif/dist/index.mjs
+init_define_import_meta_env();
+var SIGNATURE = "GIF";
+var VERSIONS = ["87a", "89a"];
+var IMAGE_DESCRIPTOR = 44;
+var EXTENSION = 33;
+var EXTENSION_APPLICATION = 255;
+var EXTENSION_APPLICATION_BLOCK_SIZE = 11;
+var EXTENSION_COMMENT = 254;
+var EXTENSION_GRAPHIC_CONTROL = 249;
+var EXTENSION_GRAPHIC_CONTROL_BLOCK_SIZE = 4;
+var EXTENSION_PLAIN_TEXT = 1;
+var EXTENSION_PLAIN_TEXT_BLOCK_SIZE = 1;
+var TRAILER = 59;
+function mergeBuffers(buffers) {
+  const container = new Uint8Array(
+    buffers.reduce((total, array) => total + array.byteLength, 0)
+  );
+  buffers.reduce((offset, array) => {
+    container.set(array, offset);
+    return offset + array.byteLength;
+  }, 0);
+  return container;
+}
+function resovleSource(source, output, options) {
+  let buffer;
+  if (ArrayBuffer.isView(source)) {
+    buffer = source.buffer;
+  } else if (source instanceof ArrayBuffer) {
+    buffer = source;
+  } else {
+    const canvas = document.createElement("canvas");
+    const { width, height } = options || {};
+    const context2d = canvas.getContext("2d");
+    if (!context2d) {
+      throw new Error("Failed to create canvas context2d");
+    }
+    canvas.width = width ?? ("width" in source ? typeof source.width === "number" ? source.width : source.width.baseVal.value : 0);
+    canvas.height = height ?? ("height" in source ? typeof source.height === "number" ? source.height : source.height.baseVal.value : 0);
+    context2d.drawImage(source, 0, 0, canvas.width, canvas.height);
+    buffer = context2d.getImageData(0, 0, canvas.width, canvas.height).data.buffer;
+  }
+  switch (output) {
+    case "uint8Array":
+      return new Uint8Array(buffer);
+    case "uint8ClampedArray":
+      return new Uint8ClampedArray(buffer);
+    case "dataView":
+      return new DataView(buffer);
+    default:
+      throw new Error("Unsupported output format");
+  }
+}
+var Reader = class {
+  _view;
+  offset = 0;
+  constructor(source) {
+    this._view = resovleSource(source, "dataView");
+  }
+  readByte() {
+    return this._view.getUint8(this.offset++);
+  }
+  readBytes(length) {
+    return Array.from({ length }).map(() => this.readByte());
+  }
+  readString(length) {
+    return String.fromCharCode(...this.readBytes(length));
+  }
+  readUnsigned() {
+    return [this._view.getUint16(this.offset, true), this.offset += 2][0];
+  }
+  readBits() {
+    return this._view.getUint8(this.offset++).toString(2).padStart(8, "0").split("").map(Number);
+  }
+  readColorTable(length) {
+    return Array.from({ length }, () => Array.from(this.readBytes(3)));
+  }
+  readSubBlock() {
+    const block = [];
+    while (true) {
+      const val = this.readByte();
+      if (val === 0 && this._view.getUint8(this.offset) !== 0)
+        break;
+      block.push(val);
+    }
+    return block;
+  }
+};
+function decode(source) {
+  const gif = {};
+  const reader = new Reader(source);
+  const createFrame = () => ({ index: 0, delay: 100, disposal: 0 });
+  const signature = reader.readString(3);
+  const version = reader.readString(3);
+  if (signature !== SIGNATURE || !VERSIONS.includes(version)) {
+    throw new Error("This is not a 87a/89a GIF data.");
+  }
+  gif.version = version;
+  gif.width = reader.readUnsigned();
+  gif.height = reader.readUnsigned();
+  const bits = reader.readBits();
+  gif.globalColorTable = Boolean(bits[0]);
+  gif.colorResoluTion = Number.parseInt(bits.slice(1, 4).join(""), 2) + 1;
+  gif.colorTableSorted = Boolean(bits[4]);
+  const colorTableSize = Number.parseInt(bits.slice(5, 8).join(""), 2);
+  gif.colorTableSize = 2 ** (colorTableSize + 1);
+  gif.backgroundColorIndex = reader.readByte();
+  gif.pixelAspectRatio = reader.readByte();
+  if (gif.globalColorTable) {
+    if (gif.colorTableSize) {
+      gif.colorTable = reader.readColorTable(gif.colorTableSize);
+    } else {
+      reader.readSubBlock();
+    }
+  }
+  gif.frames = [];
+  let frame = createFrame();
+  const flags = [];
+  const extensionFlags = [];
+  while (true) {
+    const flag = reader.readByte();
+    flags.push(flag);
+    if (flag === IMAGE_DESCRIPTOR) {
+      frame.left = reader.readUnsigned();
+      frame.top = reader.readUnsigned();
+      frame.width = reader.readUnsigned();
+      frame.height = reader.readUnsigned();
+      const bits2 = reader.readBits();
+      frame.localColorTable = Boolean(bits2[0]);
+      frame.interlaced = Boolean(bits2[1]);
+      frame.colorTableSorted = Boolean(bits2[2]);
+      frame.reserved = Number.parseInt(bits2.slice(3, 5).join(""), 2);
+      const colorTableSize2 = Number.parseInt(bits2.slice(5, 8).join(""), 2);
+      frame.colorTableSize = 2 ** (colorTableSize2 + 1);
+      if (frame.localColorTable) {
+        frame.colorTable = reader.readColorTable(frame.colorTableSize);
+      }
+      frame.lzwMinCodeSize = reader.readByte();
+      frame.dataPositions = [];
+      while (true) {
+        const length = reader.readByte();
+        if (length === 0)
+          break;
+        const offset = reader.offset;
+        frame.dataPositions.push([offset, length]);
+        reader.offset = offset + length;
+      }
+      gif.frames.push(frame);
+      frame = createFrame();
+      frame.index = gif.frames.length;
+      continue;
+    }
+    if (flag === EXTENSION) {
+      const extensionFlag = reader.readByte();
+      extensionFlags.push(extensionFlag);
+      if (extensionFlag === EXTENSION_APPLICATION) {
+        if (reader.readByte() !== EXTENSION_APPLICATION_BLOCK_SIZE)
+          continue;
+        const application = {
+          identifier: reader.readString(8),
+          code: reader.readString(3),
+          data: []
+        };
+        if (`${application.identifier}${application.code}` === "NETSCAPE2.0") {
+          if (reader.readByte() === 3) {
+            gif.looped = Boolean(reader.readByte());
+            gif.loopCount = reader.readUnsigned();
+          }
+        }
+        application.data = reader.readSubBlock();
+        frame.application = application;
+        continue;
+      }
+      if (extensionFlag === EXTENSION_COMMENT) {
+        frame.comment = reader.readSubBlock().map((val) => String.fromCharCode(val)).join("");
+        continue;
+      }
+      if (extensionFlag === EXTENSION_GRAPHIC_CONTROL) {
+        if (reader.readByte() !== EXTENSION_GRAPHIC_CONTROL_BLOCK_SIZE)
+          continue;
+        const bits2 = reader.readBits();
+        const graphicControl = {
+          // ↓ <Packed Fields>
+          reserved: Number.parseInt(bits2.slice(0, 3).join(""), 2),
+          disposal: Number.parseInt(bits2.slice(3, 6).join(""), 2),
+          userInput: Boolean(bits2[6]),
+          transparent: Boolean(bits2[7]),
+          // ↑ <Packed Fields>
+          delayTime: reader.readUnsigned(),
+          transparentIndex: reader.readByte()
+        };
+        reader.readSubBlock();
+        frame.graphicControl = graphicControl;
+        frame.disposal = graphicControl.disposal;
+        frame.delay = (graphicControl.delayTime || 10) * 10;
+        continue;
+      }
+      if (extensionFlag === EXTENSION_PLAIN_TEXT) {
+        if (reader.readByte() !== EXTENSION_PLAIN_TEXT_BLOCK_SIZE)
+          continue;
+        frame.plainText = {
+          left: reader.readUnsigned(),
+          top: reader.readUnsigned(),
+          width: reader.readUnsigned(),
+          height: reader.readUnsigned(),
+          cellWidth: reader.readByte(),
+          cellHeight: reader.readByte(),
+          colorIndex: reader.readByte(),
+          backgroundColorIndex: reader.readByte(),
+          data: reader.readSubBlock()
+        };
+        continue;
+      }
+      console.warn(
+        `Unknown extension block: 0x${extensionFlag.toString(16)}`,
+        flags.slice(0, flags.length - 1).map((val) => `0x${val.toString(16)}`),
+        extensionFlags.slice(0, extensionFlags.length - 1).map((val) => `0x${val.toString(16)}`)
+      );
+      continue;
+    }
+    if (flag === TRAILER)
+      break;
+    console.warn(
+      `Unknown block: 0x${flag.toString(16)}`,
+      flags.slice(0, flags.length - 1).map((val) => `0x${val.toString(16)}`),
+      extensionFlags.slice(0, extensionFlags.length - 1).map((val) => `0x${val.toString(16)}`)
+    );
+  }
+  return gif;
+}
+function createWorker(options) {
+  const callbacks = /* @__PURE__ */ new Map();
+  const { workerUrl } = options;
+  let { workerNumber = 1 } = options;
+  const workers = [...Array.from({ length: workerUrl ? workerNumber : 0 })].map(() => {
+    try {
+      const worker = new Worker(workerUrl);
+      worker.onmessage = onMessage;
+      return worker;
+    } catch (err) {
+      console.warn(err);
+      return null;
+    }
+  }).filter(Boolean);
+  workerNumber = workers.length;
+  function onMessage(event) {
+    const { id, data } = event.data;
+    callbacks.get(id)?.(data);
+    callbacks.delete(id);
+  }
+  const getWorker = /* @__PURE__ */ function() {
+    let id = 0;
+    return (index) => workers[(index ?? id++) % workerNumber];
+  }();
+  const call = /* @__PURE__ */ function() {
+    let id = 0;
+    return (type, data, transfer, index) => {
+      return new Promise((resolve) => {
+        const worker = getWorker(index);
+        if (!worker)
+          return resolve(void 0);
+        callbacks.set(id, resolve);
+        worker.postMessage({ id: id++, type, data }, { transfer });
+      });
+    };
+  }();
+  return {
+    call
+  };
+}
+function deinterlace(pixels, width) {
+  const newPixels = Array.from({ length: pixels.length });
+  const rows = pixels.length / width;
+  const offsets = [0, 4, 2, 1];
+  const steps = [8, 8, 4, 2];
+  let fromRow = 0;
+  for (let pass = 0; pass < 4; pass++) {
+    for (let toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+      newPixels.splice.apply(
+        newPixels,
+        [toRow * width, width].concat(
+          pixels.slice(fromRow * width, (fromRow + 1) * width)
+        )
+      );
+      fromRow++;
+    }
+  }
+  return newPixels;
+}
+function lzwDecode(minCodeSize, data, pixelCount) {
+  const MAX_STACK_SIZE = 4096;
+  const nullCode = -1;
+  const npix = pixelCount;
+  let available, codeMask, codeSize, inCode, oldCode, code, i;
+  const dstPixels = Array.from({ length: pixelCount });
+  const prefix = Array.from({ length: MAX_STACK_SIZE });
+  const suffix = Array.from({ length: MAX_STACK_SIZE });
+  const pixelStack = Array.from({ length: MAX_STACK_SIZE + 1 });
+  const dataSize = minCodeSize;
+  const clear = 1 << dataSize;
+  const endOfInformation = clear + 1;
+  available = clear + 2;
+  oldCode = nullCode;
+  codeSize = dataSize + 1;
+  codeMask = (1 << codeSize) - 1;
+  for (code = 0; code < clear; code++) {
+    prefix[code] = 0;
+    suffix[code] = code;
+  }
+  let datum, bits, first, top, pi, bi;
+  datum = bits = first = top = pi = bi = 0;
+  for (i = 0; i < npix; ) {
+    if (top === 0) {
+      if (bits < codeSize) {
+        datum += data[bi] << bits;
+        bits += 8;
+        bi++;
+        continue;
+      }
+      code = datum & codeMask;
+      datum >>= codeSize;
+      bits -= codeSize;
+      if (code > available || code === endOfInformation) {
+        break;
+      }
+      if (code === clear) {
+        codeSize = dataSize + 1;
+        codeMask = (1 << codeSize) - 1;
+        available = clear + 2;
+        oldCode = nullCode;
+        continue;
+      }
+      if (oldCode === nullCode) {
+        pixelStack[top++] = suffix[code];
+        oldCode = code;
+        first = code;
+        continue;
+      }
+      inCode = code;
+      if (code === available) {
+        pixelStack[top++] = first;
+        code = oldCode;
+      }
+      while (code > clear) {
+        pixelStack[top++] = suffix[code];
+        code = prefix[code];
+      }
+      first = suffix[code] & 255;
+      pixelStack[top++] = first;
+      if (available < MAX_STACK_SIZE) {
+        prefix[available] = oldCode;
+        suffix[available] = first;
+        available++;
+        if ((available & codeMask) === 0 && available < MAX_STACK_SIZE) {
+          codeSize++;
+          codeMask += available;
+        }
+      }
+      oldCode = inCode;
+    }
+    top--;
+    dstPixels[pi++] = pixelStack[top];
+    i++;
+  }
+  for (i = pi; i < npix; i++) {
+    dstPixels[i] = 0;
+  }
+  return dstPixels;
+}
+function decodeFrames(source, options) {
+  const array = resovleSource(source, "uint8Array");
+  if (options?.workerUrl) {
+    return createWorker({ workerUrl: options.workerUrl }).call(
+      "frames:decode",
+      array,
+      [array.buffer]
+    );
+  }
+  const {
+    gif = decode(source),
+    range
+  } = options ?? {};
+  const {
+    width: globalWidth,
+    height: globalHeight,
+    colorTable: globalColorTable,
+    frames: globalFrames
+  } = gif;
+  const frames2 = range ? globalFrames.slice(range[0], range[1] + 1) : globalFrames;
+  const hasDisposal3 = frames2.some((frame) => frame.disposal === 3);
+  let pixels = new Uint8ClampedArray(globalWidth * globalHeight * 4);
+  let previousFrame;
+  let previousPixels = pixels.slice();
+  return frames2.map((frame) => {
+    const {
+      left,
+      top,
+      width,
+      height,
+      interlaced,
+      localColorTable,
+      colorTable,
+      lzwMinCodeSize,
+      dataPositions,
+      graphicControl,
+      delay,
+      disposal
+    } = frame;
+    const previousDisposal = previousFrame?.disposal;
+    const bottom = top + height;
+    const {
+      transparent,
+      transparentIndex: localTransparentIndex
+    } = graphicControl ?? {};
+    const palette2 = localColorTable ? colorTable : globalColorTable;
+    const transparentIndex = transparent ? localTransparentIndex : -1;
+    const compressedData = mergeBuffers(
+      dataPositions.map(
+        ([begin, length]) => array.subarray(begin, begin + length)
+      )
+    );
+    let colorIndexes = lzwDecode(lzwMinCodeSize, compressedData, width * height);
+    if (interlaced) {
+      colorIndexes = deinterlace(colorIndexes, width);
+    }
+    if (previousDisposal === 3) {
+      pixels = previousPixels.slice();
+    } else if (previousDisposal === 2) {
+      const { left: left2, top: top2, width: width2, height: height2 } = previousFrame;
+      const bottom2 = top2 + height2;
+      for (let y = top2; y < bottom2; y++) {
+        const globalOffset = y * globalWidth + left2;
+        for (let x = 0; x < width2; x++) {
+          const index = (globalOffset + x) * 4;
+          pixels[index] = pixels[index + 1] = pixels[index + 2] = pixels[index + 3] = 0;
+        }
+      }
+    }
+    for (let y = top; y < bottom; y++) {
+      const globalOffset = y * globalWidth + left;
+      const localOffset = (y - top) * width;
+      for (let x = 0; x < width; x++) {
+        const colorIndex = colorIndexes[localOffset + x];
+        const index = (globalOffset + x) * 4;
+        if (colorIndex !== transparentIndex) {
+          const [r, g, b2] = palette2?.[colorIndex] ?? [0, 0, 0];
+          pixels[index] = r;
+          pixels[index + 1] = g;
+          pixels[index + 2] = b2;
+          pixels[index + 3] = 255;
+        }
+      }
+    }
+    if (hasDisposal3 && disposal !== 1 && disposal !== 3) {
+      previousPixels = pixels.slice();
+    }
+    previousFrame = frame;
+    return {
+      width: globalWidth,
+      height: globalHeight,
+      delay,
+      data: pixels.slice()
+    };
+  });
+}
+var ditherKernels = {
+  "floyd-steinberg": [
+    [7 / 16, 1, 0],
+    [3 / 16, -1, 1],
+    [5 / 16, 0, 1],
+    [1 / 16, 1, 1]
+  ],
+  "atkinson": [
+    [1 / 8, 1, 0],
+    [1 / 8, 2, 0],
+    [1 / 8, -1, 1],
+    [1 / 8, 0, 1],
+    [1 / 8, 1, 1],
+    [1 / 8, 0, 2]
+  ],
+  "stucki": [
+    [8 / 42, 1, 0],
+    [4 / 42, 2, 0],
+    [2 / 42, -2, 1],
+    [4 / 42, -1, 1],
+    [8 / 42, 0, 1],
+    [4 / 42, 1, 1],
+    [2 / 42, 2, 1],
+    [1 / 42, -2, 2],
+    [2 / 42, -1, 2],
+    [4 / 42, 0, 2],
+    [2 / 42, 1, 2],
+    [1 / 42, 2, 2]
+  ]
+};
+
+// src/gif.ts
+var MAX_CONCURRENT_GIF_DECODES = 5;
+var gifWorkerUrl;
+var configureGifWorkerUrl = (workerUrl) => {
+  gifWorkerUrl = workerUrl;
+};
+var dataURLToArrayBuffer = (dataURL) => {
+  const dataIndexStart = dataURL.indexOf(",");
+  const byteString = atob(dataURL.slice(dataIndexStart + 1));
+  const buffer = new ArrayBuffer(byteString.length);
+  const bytes = new Uint8Array(buffer);
+  for (let index = 0; index < byteString.length; index++) {
+    bytes[index] = byteString.charCodeAt(index);
+  }
+  return buffer;
+};
+var decodeGifFrames = async (dataURL) => {
+  const buffer = dataURLToArrayBuffer(dataURL);
+  const gif = decode(buffer);
+  const decodedFrames = gifWorkerUrl ? await decodeFrames(buffer, { gif, workerUrl: gifWorkerUrl }) : await decodeFrames(buffer, { gif });
+  const frames2 = decodedFrames.map((frame) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = frame.width;
+    canvas.height = frame.height;
+    const context = canvas.getContext("2d");
+    if (context) {
+      const imageData = context.createImageData(frame.width, frame.height);
+      imageData.data.set(frame.data);
+      context.putImageData(imageData, 0, 0);
+    }
+    return canvas;
+  });
+  return {
+    frames: frames2,
+    delays: decodedFrames.map((frame) => Math.max(frame.delay, 16)),
+    width: gif.width,
+    height: gif.height
+  };
+};
+var activeGifDecodeCount = 0;
+var gifDecodeSequence = 0;
+var gifDecodeSchedulePending = false;
+var gifDecodeQueue = [];
+var getDataURLByteLength = (dataURL) => {
+  const dataIndexStart = dataURL.indexOf(",");
+  const encoded = dataURL.slice(dataIndexStart + 1);
+  const padding = encoded.endsWith("==") && 2 || encoded.endsWith("=") && 1 || 0;
+  return Math.floor(encoded.length * 3 / 4) - padding;
+};
+var runGifDecodeTask = (task) => {
+  activeGifDecodeCount++;
+  decodeGifFrames(task.dataURL).then(task.resolve, task.reject).finally(() => {
+    activeGifDecodeCount--;
+    queueGifDecodeScheduler();
+  });
+};
+var scheduleNextGifDecode = () => {
+  gifDecodeSchedulePending = false;
+  while (activeGifDecodeCount < MAX_CONCURRENT_GIF_DECODES && gifDecodeQueue.length) {
+    runGifDecodeTask(gifDecodeQueue.shift());
+  }
+};
+var queueGifDecodeScheduler = () => {
+  if (gifDecodeSchedulePending) {
+    return;
+  }
+  gifDecodeSchedulePending = true;
+  queueMicrotask(scheduleNextGifDecode);
+};
+var decodeGifFramesQueued = (dataURL) => {
+  return new Promise((resolve, reject) => {
+    const task = {
+      dataURL,
+      priority: getDataURLByteLength(dataURL),
+      sequence: gifDecodeSequence++,
+      resolve,
+      reject
+    };
+    const insertionIndex = gifDecodeQueue.findIndex(
+      (queuedTask) => queuedTask.priority > task.priority || queuedTask.priority === task.priority && queuedTask.sequence > task.sequence
+    );
+    if (insertionIndex === -1) {
+      gifDecodeQueue.push(task);
+    } else {
+      gifDecodeQueue.splice(insertionIndex, 0, task);
+    }
+    queueGifDecodeScheduler();
+  });
+};
+var createGifPlaybackMetadata = (opts = {}) => ({
+  frameIndex: 0,
+  speed: 1,
+  playing: opts.playing ?? false
+});
+var getGifRenderFrame = (element, cacheEntry, runtimeFrameIndex) => {
+  const gifFrameIndex = element.gifPlayback?.playing ? runtimeFrameIndex ?? element.gifPlayback.frameIndex : element.gifPlayback?.frameIndex ?? 0;
+  return cacheEntry?.gif?.frames[gifFrameIndex];
+};
+var hasActiveGifDecode = (visibleElements, imageCache) => visibleElements.some((element) => {
+  if (!isInitializedImageElement(element)) {
+    return false;
+  }
+  const cacheEntry = imageCache.get(element.fileId);
+  return cacheEntry?.gifDecodeStatus === "pending" && !cacheEntry.gif?.frames.length;
+});
+var hasPlayableGif = (visibleElements, imageCache) => visibleElements.some(
+  (element) => isInitializedImageElement(element) && element.gifPlayback?.playing && imageCache.get(element.fileId)?.gif?.frames.length
+);
+
 // src/image.ts
 var THUMB_HASH_MAX_DIMENSION = 100;
 var thumbHashCanvasCache = /* @__PURE__ */ new Map();
@@ -14774,7 +15386,10 @@ var loadHTMLImageElement = (dataURL) => {
 var updateImageCache = async ({
   fileIds,
   files,
-  imageCache
+  imageCache,
+  onImageCacheUpdate,
+  gifAutoDecodeMaxFileSizeBytes = DEFAULT_GIF_AUTO_DECODE_MAX_FILE_SIZE_BYTES,
+  forceGifDecode = false
 }) => {
   const updatedFiles = /* @__PURE__ */ new Map();
   const erroredFiles = /* @__PURE__ */ new Map();
@@ -14793,20 +15408,72 @@ var updateImageCache = async ({
               const imagePromise = loadHTMLImageElement(fileData.dataURL);
               const data = {
                 image: imagePromise,
-                mimeType: fileData.mimeType
+                mimeType: fileData.mimeType,
+                gifDecodeStatus: fileData.mimeType === MIME_TYPES.gif ? "pending" : void 0
               };
               imageCache.set(fileId, data);
-              const image = await imagePromise;
+              if (data.gifDecodeStatus === "pending") {
+                onImageCacheUpdate?.(fileId);
+              }
+              let image = imagePromise;
+              let gif;
+              let gifDecodeStatus;
+              try {
+                image = await imagePromise;
+                if (fileData.mimeType === MIME_TYPES.gif) {
+                  const decodingData = {
+                    ...data,
+                    image,
+                    gifDecodeStatus: "pending"
+                  };
+                  imageCache.set(fileId, decodingData);
+                  onImageCacheUpdate?.(fileId);
+                }
+                if (fileData.mimeType === MIME_TYPES.gif && !forceGifDecode && getDataURLByteLength(fileData.dataURL) > gifAutoDecodeMaxFileSizeBytes) {
+                  gifDecodeStatus = "deferred";
+                } else {
+                  gif = fileData.mimeType === MIME_TYPES.gif ? await decodeGifFramesQueued(fileData.dataURL) : void 0;
+                  if (fileData.mimeType === MIME_TYPES.gif) {
+                    gifDecodeStatus = "success";
+                  }
+                }
+              } catch (error) {
+                erroredFiles.set(fileId, true);
+                if (fileData.mimeType === MIME_TYPES.gif) {
+                  gifDecodeStatus = "error";
+                }
+              } finally {
+                if (fileData.mimeType === MIME_TYPES.gif) {
+                  imageCache.set(fileId, {
+                    ...data,
+                    image,
+                    gif,
+                    gifDecodeStatus: gifDecodeStatus ?? "error"
+                  });
+                  onImageCacheUpdate?.(fileId);
+                }
+              }
+              if (erroredFiles.has(fileId)) {
+                return;
+              }
               if (previousCacheEntry?.isPlaceholder) {
                 imageCache.set(fileId, {
                   ...data,
                   image,
+                  gif,
+                  gifDecodeStatus: fileData.mimeType === MIME_TYPES.gif ? gifDecodeStatus : void 0,
                   placeholderImage: await previousCacheEntry.image,
                   transitionStart: performance.now()
                 });
               } else {
-                imageCache.set(fileId, { ...data, image });
+                imageCache.set(fileId, {
+                  ...data,
+                  image,
+                  gif,
+                  gifDecodeStatus: fileData.mimeType === MIME_TYPES.gif ? gifDecodeStatus : void 0
+                });
               }
+              onImageCacheUpdate?.(fileId);
             } catch (error) {
               erroredFiles.set(fileId, true);
             }
@@ -14870,6 +15537,52 @@ var normalizeSVG = (SVGString) => {
   }
 };
 
+// src/renderGif.ts
+init_define_import_meta_env();
+var drawGifDecodePlaceholder = (element, context, theme, drawImagePlaceholder2) => {
+  drawImagePlaceholder2(element, context, theme);
+  const pulse = 0.55 + Math.sin(performance.now() / 350) * 0.25;
+  const text = "GIF Decoding";
+  const fontFamily = "Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif";
+  const textX = element.width / 2;
+  const textY = element.height / 2;
+  context.save();
+  context.globalAlpha *= pulse;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.font = `600 100px ${fontFamily}`;
+  const targetTextWidth = element.width * 0.6;
+  const measuredWidth = context.measureText(text).width;
+  const widthFitFontSize = measuredWidth ? 100 * targetTextWidth / measuredWidth : 24;
+  const fontSize = Math.max(
+    12,
+    Math.min(widthFitFontSize, element.height * 0.35)
+  );
+  context.font = `600 ${fontSize}px ${fontFamily}`;
+  const finalFontSize = Number.parseFloat(
+    context.font.match(/\d+(\.\d+)?px/)?.[0] ?? `${fontSize}`
+  );
+  const finalMeasuredWidth = context.measureText(text).width;
+  const paddingX = Math.max(12, finalFontSize * 0.55);
+  const paddingY = Math.max(8, finalFontSize * 0.35);
+  const pillWidth = finalMeasuredWidth + paddingX * 2;
+  const pillHeight = finalFontSize + paddingY * 2;
+  const pillX = textX - pillWidth / 2;
+  const pillY = textY - pillHeight / 2;
+  const radius = Math.min(pillHeight / 2, finalFontSize * 0.25);
+  context.fillStyle = "rgba(0, 0, 0, 0.62)";
+  context.beginPath();
+  if (context.roundRect) {
+    context.roundRect(pillX, pillY, pillWidth, pillHeight, radius);
+  } else {
+    context.rect(pillX, pillY, pillWidth, pillHeight);
+  }
+  context.fill();
+  context.fillStyle = "#fff";
+  context.fillText(text, textX, textY);
+  context.restore();
+};
+
 // src/renderElement.ts
 var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
 var getCanvasPadding = (element) => {
@@ -15039,7 +15752,14 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
       context.save();
       const cacheEntry = element.fileId !== null ? renderConfig.imageCache.get(element.fileId) : null;
       const img = isInitializedImageElement(element) ? cacheEntry?.image : void 0;
-      if (img != null && !(img instanceof Promise)) {
+      if (cacheEntry?.gifDecodeStatus === "pending" && !cacheEntry.gif?.frames.length) {
+        drawGifDecodePlaceholder(
+          element,
+          context,
+          renderConfig.theme,
+          drawImagePlaceholder
+        );
+      } else if (img != null && !(img instanceof Promise)) {
         if (element.roundness && context.roundRect) {
           context.beginPath();
           context.roundRect(
@@ -15080,11 +15800,17 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
             delete cacheEntry.transitionStart;
           }
         }
+        const gifFrame = getGifRenderFrame(
+          element,
+          cacheEntry,
+          renderConfig.getGifFrameIndex?.(element)
+        );
+        const imageForRender = gifFrame ?? img;
         const { x, y, width, height } = element.crop ? element.crop : {
           x: 0,
           y: 0,
-          width: img.naturalWidth,
-          height: img.naturalHeight
+          width: imageForRender instanceof HTMLCanvasElement ? imageForRender.width : imageForRender.naturalWidth,
+          height: imageForRender instanceof HTMLCanvasElement ? imageForRender.height : imageForRender.naturalHeight
         };
         const shouldInvertImage = renderConfig.theme === THEME.DARK && cacheEntry?.mimeType === MIME_TYPES2.svg;
         if (shouldInvertImage && isSafari) {
@@ -15096,7 +15822,7 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
           if (tempContext) {
             tempContext.scale(devicePixelRatio, devicePixelRatio);
             tempContext.drawImage(
-              img,
+              imageForRender,
               x,
               y,
               width,
@@ -15136,7 +15862,7 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
             context.filter = DARK_THEME_FILTER;
           }
           context.drawImage(
-            img,
+            imageForRender,
             x,
             y,
             width,
@@ -18496,7 +19222,8 @@ var newImageElement = (opts) => {
     fileName: opts.fileName ?? null,
     thumbHash: opts.thumbHash ?? null,
     scale: opts.scale ?? [1, 1],
-    crop: opts.crop ?? null
+    crop: opts.crop ?? null,
+    gifPlayback: opts.gifPlayback ?? null
   };
 };
 
@@ -22336,10 +23063,10 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene,
   const elementsToUpdate = new Set(
     selectedElements
   );
-  const frames = selectedElements.filter((e) => isFrameLikeElement(e)).map((f) => f.id);
-  if (frames.length > 0) {
+  const frames2 = selectedElements.filter((e) => isFrameLikeElement(e)).map((f) => f.id);
+  if (frames2.length > 0) {
     for (const element of scene.getNonDeletedElements()) {
-      if (element.frameId !== null && frames.includes(element.frameId)) {
+      if (element.frameId !== null && frames2.includes(element.frameId)) {
         elementsToUpdate.add(element);
       }
     }
@@ -25521,6 +26248,10 @@ var PlusIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var CirclePauseIcon = createIcon(
+  "M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 248C288 234.7 277.3 224 264 224C250.7 224 240 234.7 240 248L240 392C240 405.3 250.7 416 264 416C277.3 416 288 405.3 288 392L288 248zM400 248C400 234.7 389.3 224 376 224C362.7 224 352 234.7 352 248L352 392C352 405.3 362.7 416 376 416C389.3 416 400 405.3 400 392L400 248z",
+  640
+);
 var DotsIcon = createIcon(
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -27364,6 +28095,33 @@ var playerStopFilledIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var prevFrame = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 5v14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 6l-9 6l9 6z" })
+  ] }),
+  tablerIconProps
+);
+var nextFrame = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 5v14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 6l9 6l-9 6z" })
+  ] }),
+  tablerIconProps
+);
+var frames = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 1.25, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 6v12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 6v12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 14h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 10h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 14h4" })
+  ] }),
+  tablerIconProps
+);
 var tablerCheckIcon = createIcon(
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -28947,7 +29705,7 @@ var recognizeShape = (points, previousElement, zoom = 1) => {
   const type = previousElement?.type === "arrow" && recognized !== "arrow" ? "freedraw" : recognized;
   return { type, points, boundingBox };
 };
-var convertToShape = (points, appState, elementsMap, previousElement, frames) => {
+var convertToShape = (points, appState, elementsMap, previousElement, frames2) => {
   const recognizedShape = recognizeShape(
     points,
     previousElement,
@@ -28955,7 +29713,7 @@ var convertToShape = (points, appState, elementsMap, previousElement, frames) =>
   );
   const boundingBox = recognizedShape.boundingBox;
   const [minX, minY, maxX, maxY] = boundingBox;
-  const frameLikeElements = frames ?? getFrameLikeElements([...elementsMap.values()]);
+  const frameLikeElements = frames2 ?? getFrameLikeElements([...elementsMap.values()]);
   const frameId = frameLikeElements.find((frame) => {
     const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords3(frame, elementsMap);
     return fx1 <= minX && fy1 <= minY && fx2 >= maxX && fy2 >= maxY;
@@ -29252,13 +30010,17 @@ export {
   computeBoundTextPosition,
   computeBucketFillPolygon,
   computeContainerDimensionForBoundText,
+  configureGifWorkerUrl,
   containsCJK,
   convertToExcalidrawElements,
   convertToShape,
   convertToShapeHandlePointerMoveFromPointerDown,
+  createGifPlaybackMetadata,
   createPlaceholderEmbeddableLabel,
   createSrcDoc,
   cropElement,
+  decodeGifFrames,
+  decodeGifFramesQueued,
   deconstructDiamondElement,
   deconstructLinearOrFreeDrawElement,
   deconstructRectanguloidElement,
@@ -29271,6 +30033,7 @@ export {
   dragNewElement,
   dragNewTextElement,
   dragSelectedElements,
+  drawGifDecodePlaceholder,
   duplicateElement,
   duplicateElements,
   editGroupForSelectedElement,
@@ -29321,6 +30084,7 @@ export {
   getCornerRadius,
   getCubicBezierCurveBound,
   getCursorForResizingElement,
+  getDataURLByteLength,
   getDefaultFrameName,
   getDefaultRoundnessTypeForElement,
   getDiamondBaseCorners,
@@ -29350,6 +30114,7 @@ export {
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints,
   getFreedrawStrokeCenterPoints,
+  getGifRenderFrame,
   getGlobalFixedPointForBindableElement,
   getGlobalFixedPoints,
   getHeadingForElbowArrowSnap,
@@ -29416,10 +30181,12 @@ export {
   handleFocusPointHover,
   handleFocusPointPointerDown,
   handleFocusPointPointerUp,
+  hasActiveGifDecode,
   hasBackground,
   hasBoundTextElement,
   hasBoundingBox,
   hasFreedrawMode,
+  hasPlayableGif,
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,