@bylqwjc/media-editor-react 1.0.12

package/node_modules/@media-editor/core/dist/browser.js

@@ -0,0 +1,883 @@
+import { outputSize, rotatedSize, fitRects, buildFilterCss, DEG2RAD, findFilterPreset } from './chunk-USY6UDGL.js';
+
+// src/overlay-render.ts
+var DEG2RAD2 = Math.PI / 180;
+function strokeStyle(ctx, color, width) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+}
+function drawArrowHead(ctx, x1, y1, x2, y2, width) {
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  const len = Math.max(12, width * 3.5);
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - len * Math.cos(angle - Math.PI / 7), y2 - len * Math.sin(angle - Math.PI / 7));
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - len * Math.cos(angle + Math.PI / 7), y2 - len * Math.sin(angle + Math.PI / 7));
+  ctx.stroke();
+}
+function normalizeOverlayRotation(deg) {
+  if (!Number.isFinite(deg)) return 0;
+  let next = deg % 360;
+  if (next > 180) next -= 360;
+  if (next < -180) next += 360;
+  return Math.abs(next) < 1e-3 ? 0 : next;
+}
+var EMOJI_STICKER_VISUAL_SCALE = 0.84;
+function emojiStickerDrawBox(o) {
+  const width = Math.max(8, Number(o?.w) || 0);
+  const height = Math.max(8, Number(o?.h) || 0);
+  const size = Math.max(8, Math.min(width, height) * EMOJI_STICKER_VISUAL_SCALE);
+  return {
+    x: (Number(o?.x) || 0) + (width - size) / 2,
+    y: (Number(o?.y) || 0) + (height - size) / 2,
+    size
+  };
+}
+var textMeasureCanvas = null;
+function getTextMeasureContext() {
+  if (typeof document === "undefined") return null;
+  textMeasureCanvas ?? (textMeasureCanvas = document.createElement("canvas"));
+  return textMeasureCanvas.getContext("2d");
+}
+function getTextFontSize(o) {
+  return Math.min(512, Math.max(8, Number(o.fontSize) || 24));
+}
+function getTextPaddingX(o, fontSize) {
+  return Number.isFinite(o.paddingX) ? Math.max(0, o.paddingX) : Math.max(8, Math.round(fontSize * 0.18));
+}
+function getTextPaddingY(o, fontSize) {
+  return Number.isFinite(o.paddingY) ? Math.max(0, o.paddingY) : Math.max(6, Math.round(fontSize * 0.14));
+}
+function getTextLineHeight(o, fontSize) {
+  return (Number.isFinite(o.lineHeight) ? Math.max(0.9, o.lineHeight) : 1.1) * fontSize;
+}
+function getTextAlign(o) {
+  return o.textAlign === "center" || o.textAlign === "right" ? o.textAlign : "left";
+}
+function getTextFont(o) {
+  const fontSize = getTextFontSize(o);
+  const fontStyle = o.fontStyle || "normal";
+  const fontWeight = o.fontWeight || "700";
+  const fontFamily = o.fontFamily || '-apple-system, "PingFang SC", "Microsoft YaHei", sans-serif';
+  return `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+function applyTextTransform(text, textTransform) {
+  const value = text == null ? "" : String(text);
+  switch (textTransform) {
+    case "uppercase":
+      return value.toUpperCase();
+    case "lowercase":
+      return value.toLowerCase();
+    case "capitalize":
+      return value.toLowerCase().replace(/(^|\s)(\S)/g, (match, prefix, char) => `${prefix}${char.toUpperCase()}`);
+    default:
+      return value;
+  }
+}
+function splitTextLines(text, textTransform) {
+  const value = applyTextTransform(text, textTransform);
+  const lines = value.replace(/\r\n/g, "\n").split("\n");
+  return lines.length ? lines : [""];
+}
+function isFiniteOverlayTime(value) {
+  return Number.isFinite(value) && value >= 0;
+}
+function overlayWindow(o) {
+  if (!isRenderableExportOverlay(o)) return null;
+  const startAt = isFiniteOverlayTime(o.startAt) ? Number(o.startAt) : null;
+  const endAt = isFiniteOverlayTime(o.endAt) ? Number(o.endAt) : null;
+  if (startAt == null && endAt == null) return null;
+  const start = Math.max(0, startAt ?? 0);
+  const end = Math.max(start, endAt ?? start);
+  return { start, end };
+}
+function isTimedTextOverlay(o) {
+  const window = overlayWindow(o);
+  return !!window && window.end > window.start;
+}
+function isRenderableExportOverlay(o) {
+  return o?.type === "pen" || o?.type === "line" || o?.type === "arrow" || o?.type === "rect" || o?.type === "ellipse" || o?.type === "text" || o?.type === "sticker";
+}
+function previewOverlayWindow(o) {
+  if (!isRenderableExportOverlay(o) && o?.type !== "filter" && o?.type !== "adjust") return null;
+  const startAt = isFiniteOverlayTime(o.startAt) ? Number(o.startAt) : null;
+  const endAt = isFiniteOverlayTime(o.endAt) ? Number(o.endAt) : null;
+  if (startAt == null && endAt == null) return null;
+  const start = Math.max(0, startAt ?? 0);
+  const end = Math.max(start, endAt ?? start);
+  return { start, end };
+}
+function isOverlayVisibleAtTime(o, time) {
+  const window = previewOverlayWindow(o);
+  if (!window) return true;
+  if (!Number.isFinite(time)) return false;
+  return time >= window.start && time <= window.end;
+}
+function visibleOverlaysAtTime(overlays, time) {
+  if (!overlays?.length) return [];
+  if (!Number.isFinite(time)) return overlays;
+  return overlays.filter((overlay) => isOverlayVisibleAtTime(overlay, time));
+}
+function isTimelinePreviewOverlay(o) {
+  return o?.type === "text" || o?.type === "sticker" || o?.type === "filter" || o?.type === "adjust";
+}
+function getTimelinePreviewTrack(o) {
+  return Number.isFinite(o?.timelineTrack) ? Math.max(0, Math.round(Number(o.timelineTrack))) : 0;
+}
+function getTimelinePreviewStartAt(o) {
+  return isFiniteOverlayTime(o?.startAt) ? Number(o.startAt) : 0;
+}
+function measureTextOverlay(o) {
+  const fontSize = getTextFontSize(o);
+  const paddingX = getTextPaddingX(o, fontSize);
+  const paddingY = getTextPaddingY(o, fontSize);
+  const lineHeight = getTextLineHeight(o, fontSize);
+  const lines = splitTextLines(o.text, o.textTransform);
+  const ctx = getTextMeasureContext();
+  const font = getTextFont(o);
+  if (ctx) ctx.font = font;
+  const widths = lines.map((line) => {
+    const sample = line === "" ? " " : line;
+    return ctx ? ctx.measureText(sample).width : Math.max(1, sample.length) * fontSize * 0.6;
+  });
+  const contentWidth = widths.length ? Math.max(...widths) : fontSize * 0.6;
+  const contentHeight = Math.max(fontSize, lines.length * lineHeight);
+  const boxWidth = Math.max(Number.isFinite(o.width) ? o.width : 0, contentWidth + paddingX * 2);
+  const boxHeight = contentHeight + paddingY * 2;
+  return {
+    font,
+    fontSize,
+    paddingX,
+    paddingY,
+    lineHeight,
+    lines,
+    widths,
+    boxWidth,
+    boxHeight,
+    align: getTextAlign(o)
+  };
+}
+function resolveTextLineX(o, layout, lineWidth) {
+  if (layout.align === "center") return o.x + layout.boxWidth / 2 - lineWidth / 2;
+  if (layout.align === "right") return o.x + layout.boxWidth - layout.paddingX - lineWidth;
+  return o.x + layout.paddingX;
+}
+function drawTextDecorations(ctx, o, layout, x, y, width) {
+  if (!o.textDecoration || width <= 0) return;
+  const fontSize = layout.fontSize;
+  const hasUnderline = String(o.textDecoration).includes("underline");
+  const hasLineThrough = String(o.textDecoration).includes("line-through");
+  if (!hasUnderline && !hasLineThrough) return;
+  ctx.save();
+  ctx.strokeStyle = o.color || "#fff";
+  ctx.lineWidth = Math.max(1, fontSize / 18);
+  if (hasUnderline) {
+    const lineY = y + fontSize + Math.max(1, fontSize * 0.08);
+    ctx.beginPath();
+    ctx.moveTo(x, lineY);
+    ctx.lineTo(x + width, lineY);
+    ctx.stroke();
+  }
+  if (hasLineThrough) {
+    const lineY = y + fontSize * 0.56;
+    ctx.beginPath();
+    ctx.moveTo(x, lineY);
+    ctx.lineTo(x + width, lineY);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function getOverlayRotation(o) {
+  return normalizeOverlayRotation(o.rotation ?? 0);
+}
+function overlayBBox(o) {
+  switch (o.type) {
+    case "pen": {
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (let i = 0; i < o.points.length; i += 2) {
+        minX = Math.min(minX, o.points[i]);
+        maxX = Math.max(maxX, o.points[i]);
+        minY = Math.min(minY, o.points[i + 1]);
+        maxY = Math.max(maxY, o.points[i + 1]);
+      }
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+    case "line":
+    case "arrow":
+      return { x: Math.min(o.x1, o.x2), y: Math.min(o.y1, o.y2), w: Math.abs(o.x2 - o.x1), h: Math.abs(o.y2 - o.y1) };
+    case "rect":
+    case "ellipse":
+    case "sticker":
+      return { x: o.x, y: o.y, w: o.w, h: o.h };
+    case "text": {
+      const layout = measureTextOverlay(o);
+      return { x: o.x, y: o.y, w: layout.boxWidth, h: layout.boxHeight };
+    }
+  }
+}
+function overlayCenter(o) {
+  const b = overlayBBox(o);
+  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+}
+function rotatePoint(x, y, cx, cy, deg) {
+  const rad = deg * DEG2RAD2;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = x - cx;
+  const dy = y - cy;
+  return { x: cx + dx * cos - dy * sin, y: cy + dx * sin + dy * cos };
+}
+function scalePoint(x, y, cx, cy, ratio) {
+  return { x: cx + (x - cx) * ratio, y: cy + (y - cy) * ratio };
+}
+function drawOverlay(ctx, o, imageCache) {
+  const rotation = getOverlayRotation(o);
+  if (rotation) {
+    const c = overlayCenter(o);
+    ctx.save();
+    ctx.translate(c.x, c.y);
+    ctx.rotate(rotation * DEG2RAD2);
+    ctx.translate(-c.x, -c.y);
+    drawOverlayBase(ctx, o, imageCache);
+    ctx.restore();
+    return;
+  }
+  drawOverlayBase(ctx, o, imageCache);
+}
+function drawOverlayBase(ctx, o, imageCache) {
+  switch (o.type) {
+    case "pen": {
+      strokeStyle(ctx, o.color, o.width);
+      ctx.beginPath();
+      ctx.moveTo(o.points[0], o.points[1]);
+      for (let i = 2; i < o.points.length; i += 2) ctx.lineTo(o.points[i], o.points[i + 1]);
+      ctx.stroke();
+      break;
+    }
+    case "line":
+    case "arrow": {
+      strokeStyle(ctx, o.color, o.width);
+      ctx.beginPath();
+      ctx.moveTo(o.x1, o.y1);
+      ctx.lineTo(o.x2, o.y2);
+      ctx.stroke();
+      if (o.type === "arrow") drawArrowHead(ctx, o.x1, o.y1, o.x2, o.y2, o.width);
+      break;
+    }
+    case "rect": {
+      strokeStyle(ctx, o.color, o.width);
+      ctx.strokeRect(o.x, o.y, o.w, o.h);
+      break;
+    }
+    case "ellipse": {
+      strokeStyle(ctx, o.color, o.width);
+      ctx.beginPath();
+      ctx.ellipse(o.x + o.w / 2, o.y + o.h / 2, Math.abs(o.w / 2), Math.abs(o.h / 2), 0, 0, Math.PI * 2);
+      ctx.stroke();
+      break;
+    }
+    case "text": {
+      const layout = measureTextOverlay(o);
+      const opacity = Number.isFinite(o.opacity) ? Math.min(1, Math.max(0, o.opacity / 100)) : 1;
+      const borderWidth = Number.isFinite(o.borderWidth) ? Math.max(0, o.borderWidth) : 0;
+      const autoOutline = o.autoOutline !== false;
+      ctx.save();
+      ctx.globalAlpha *= opacity;
+      if (o.backgroundColor && o.backgroundColor !== "transparent") {
+        ctx.fillStyle = o.backgroundColor;
+        ctx.fillRect(o.x, o.y, layout.boxWidth, layout.boxHeight);
+      }
+      ctx.fillStyle = o.color || "#fff";
+      ctx.font = layout.font;
+      ctx.textBaseline = "top";
+      ctx.lineJoin = "round";
+      const shadow = o.boxShadow;
+      if (shadow) {
+        ctx.shadowColor = shadow.color || "transparent";
+        ctx.shadowOffsetX = shadow.x || 0;
+        ctx.shadowOffsetY = shadow.y || 0;
+        ctx.shadowBlur = shadow.blur || 0;
+      }
+      layout.lines.forEach((line, index) => {
+        const lineWidth = layout.widths[index] ?? 0;
+        const lineX = resolveTextLineX(o, layout, lineWidth);
+        const lineY = o.y + layout.paddingY + index * layout.lineHeight;
+        if (borderWidth > 0 || autoOutline) {
+          ctx.strokeStyle = borderWidth > 0 ? o.borderColor || "#000" : o.strokeColor || "rgba(0,0,0,0.45)";
+          ctx.lineWidth = borderWidth > 0 ? borderWidth : Math.max(1, layout.fontSize / 18);
+          ctx.strokeText(line, lineX, lineY);
+        }
+        ctx.fillText(line, lineX, lineY);
+        drawTextDecorations(ctx, o, layout, lineX, lineY, lineWidth);
+      });
+      ctx.restore();
+      break;
+    }
+    case "sticker": {
+      if (o.emoji) {
+        const box = emojiStickerDrawBox(o);
+        ctx.save();
+        ctx.font = `${box.size}px -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(o.emoji, box.x + box.size / 2, box.y + box.size / 2);
+        ctx.restore();
+      } else if (o.src) {
+        const img = imageCache?.get(o.src);
+        if (img) ctx.drawImage(img, o.x, o.y, o.w, o.h);
+      }
+      break;
+    }
+  }
+}
+function drawOverlays(ctx, overlays, imageCache) {
+  for (const o of overlays) drawOverlay(ctx, o, imageCache);
+}
+async function loadOverlayImages(overlays) {
+  const cache = /* @__PURE__ */ new Map();
+  const srcs = [...new Set(overlays.filter((o) => o.type === "sticker" && o.src).map((o) => o.src))];
+  await Promise.all(
+    srcs.map(
+      (src) => new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          cache.set(src, img);
+          resolve();
+        };
+        img.onerror = () => resolve();
+        img.src = src;
+      })
+    )
+  );
+  return cache;
+}
+async function renderOverlaysToPng(overlays, width, height) {
+  if (!overlays?.length) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const cache = await loadOverlayImages(overlays);
+  drawOverlays(ctx, overlays, cache);
+  return new Promise((resolve) => canvas.toBlob((b) => resolve(b), "image/png"));
+}
+function hitTestOverlay(overlays, x, y, tolerance = 12) {
+  for (let i = overlays.length - 1; i >= 0; i--) {
+    const o = overlays[i];
+    if (hitOne(o, x, y, tolerance)) return i;
+  }
+  return -1;
+}
+function near(px, py, x, y, tol) {
+  return Math.abs(px - x) <= tol && Math.abs(py - y) <= tol;
+}
+function nearSegment(x, y, x1, y1, x2, y2, tol) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len2 = dx * dx + dy * dy || 1;
+  const t = Math.max(0, Math.min(1, ((x - x1) * dx + (y - y1) * dy) / len2));
+  const cx = x1 + t * dx;
+  const cy = y1 + t * dy;
+  return (x - cx) ** 2 + (y - cy) ** 2 <= tol * tol;
+}
+function hitOne(o, x, y, tol) {
+  const rotation = getOverlayRotation(o);
+  if (rotation) {
+    const c = overlayCenter(o);
+    const p = rotatePoint(x, y, c.x, c.y, -rotation);
+    return hitOneBase(o, p.x, p.y, tol);
+  }
+  return hitOneBase(o, x, y, tol);
+}
+function hitOneBase(o, x, y, tol) {
+  switch (o.type) {
+    case "pen": {
+      for (let i = 0; i + 3 < o.points.length; i += 2) {
+        if (nearSegment(x, y, o.points[i], o.points[i + 1], o.points[i + 2], o.points[i + 3], tol + o.width / 2)) return true;
+      }
+      return false;
+    }
+    case "line":
+    case "arrow":
+      return nearSegment(x, y, o.x1, o.y1, o.x2, o.y2, tol + o.width / 2);
+    case "rect":
+    case "ellipse":
+      return x >= o.x - tol && x <= o.x + o.w + tol && y >= o.y - tol && y <= o.y + o.h + tol;
+    case "text": {
+      const layout = measureTextOverlay(o);
+      return x >= o.x - tol && x <= o.x + layout.boxWidth + tol && y >= o.y - tol && y <= o.y + layout.boxHeight + tol;
+    }
+    case "sticker":
+      return near(x, y, o.x + o.w / 2, o.y + o.h / 2, Math.max(o.w, o.h) / 2 + tol);
+  }
+}
+function fitStickerBox(natW, natH, boxSide) {
+  const side = Math.max(8, boxSide);
+  if (!(natW > 0) || !(natH > 0)) return { w: side, h: side };
+  const k = side / Math.max(natW, natH);
+  return { w: Math.max(8, Math.round(natW * k)), h: Math.max(8, Math.round(natH * k)) };
+}
+function scaleOverlay(o, ratio) {
+  const r = Math.max(0.05, ratio);
+  const c = overlayCenter(o);
+  switch (o.type) {
+    case "pen":
+      return { ...o, points: o.points.map((v, i) => i % 2 === 0 ? c.x + (v - c.x) * r : c.y + (v - c.y) * r) };
+    case "line":
+    case "arrow": {
+      const p1 = scalePoint(o.x1, o.y1, c.x, c.y, r);
+      const p2 = scalePoint(o.x2, o.y2, c.x, c.y, r);
+      return { ...o, x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y };
+    }
+    case "rect":
+    case "ellipse":
+    case "sticker":
+      return { ...o, w: Math.max(8, o.w * r), h: Math.max(8, o.h * r) };
+    case "text":
+      return {
+        ...o,
+        fontSize: Math.min(512, Math.max(8, o.fontSize * r)),
+        width: Number.isFinite(o.width) ? Math.max(80, o.width * r) : o.width,
+        paddingX: Number.isFinite(o.paddingX) ? Math.max(0, o.paddingX * r) : o.paddingX,
+        paddingY: Number.isFinite(o.paddingY) ? Math.max(0, o.paddingY * r) : o.paddingY,
+        borderWidth: Number.isFinite(o.borderWidth) ? Math.max(0, o.borderWidth * r) : o.borderWidth,
+        boxShadow: o.boxShadow ? {
+          ...o.boxShadow,
+          x: (o.boxShadow.x || 0) * r,
+          y: (o.boxShadow.y || 0) * r,
+          blur: (o.boxShadow.blur || 0) * r
+        } : o.boxShadow
+      };
+    default:
+      return o;
+  }
+}
+function rotateOverlay(o, deg) {
+  return { ...o, rotation: normalizeOverlayRotation(deg) };
+}
+function translateOverlay(o, dx, dy) {
+  switch (o.type) {
+    case "pen": {
+      const points = o.points.map((v, i) => i % 2 === 0 ? v + dx : v + dy);
+      return { ...o, points };
+    }
+    case "line":
+    case "arrow":
+      return { ...o, x1: o.x1 + dx, y1: o.y1 + dy, x2: o.x2 + dx, y2: o.y2 + dy };
+    case "rect":
+    case "ellipse":
+    case "sticker":
+      return { ...o, x: o.x + dx, y: o.y + dy };
+    case "text":
+      return { ...o, x: o.x + dx, y: o.y + dy };
+  }
+}
+
+// src/export-form.ts
+function evenizeExportDimension(value, fallback) {
+  const normalized = Math.min(8192, Math.max(2, Math.round(Number(value) || fallback)));
+  return normalized % 2 === 0 ? normalized : normalized - 1;
+}
+function getExportOutputSize(state) {
+  const base = outputSize(state.canvas, state);
+  const settings = state?.exportSettings ?? null;
+  if (!settings) return base;
+  const hasWidth = Number.isFinite(Number(settings.width)) && Number(settings.width) > 0;
+  const hasHeight = Number.isFinite(Number(settings.height)) && Number(settings.height) > 0;
+  if (!hasWidth && !hasHeight) return base;
+  const aspect = base.w > 0 && base.h > 0 ? base.w / base.h : 1;
+  if (hasWidth && hasHeight) {
+    return {
+      w: evenizeExportDimension(settings.width, base.w),
+      h: evenizeExportDimension(settings.height, base.h)
+    };
+  }
+  if (hasWidth) {
+    const width = evenizeExportDimension(settings.width, base.w);
+    return {
+      w: width,
+      h: evenizeExportDimension(width / aspect, base.h)
+    };
+  }
+  const height = evenizeExportDimension(settings.height, base.h);
+  return {
+    w: evenizeExportDimension(height * aspect, base.w),
+    h: height
+  };
+}
+async function buildVideoExportFormData(engine, videoFiles, audioFiles = []) {
+  const plan = engine.getExportPlan();
+  const fd = new FormData();
+  plan.videoSrcOrder.forEach((srcIdx, slot) => {
+    const f = videoFiles[srcIdx];
+    if (f) fd.append(`video_${slot}`, f, f.name || `video_${slot}.mp4`);
+  });
+  plan.audioSrcOrder.forEach((srcIdx, slot) => {
+    const f = audioFiles[srcIdx];
+    if (f) fd.append(`audio_${slot}`, f, f.name || `audio_${slot}`);
+  });
+  const out = outputSize(plan.state.canvas, plan.state);
+  const overlays = plan.state.overlays ?? [];
+  const timedTextOverlays = overlays.filter((overlay) => isTimedTextOverlay(overlay));
+  const staticOverlays = overlays.filter((overlay) => !isTimedTextOverlay(overlay) && isRenderableExportOverlay(overlay));
+  const overlay = await renderOverlaysToPng(staticOverlays, out.w, out.h);
+  if (overlay) fd.append("overlay", overlay, "overlay.png");
+  for (let index = 0; index < timedTextOverlays.length; index++) {
+    const image = await renderOverlaysToPng([timedTextOverlays[index]], out.w, out.h);
+    if (image) fd.append(`textOverlay_${index}`, image, `text-overlay-${index}.png`);
+  }
+  fd.append("editState", JSON.stringify(plan.state));
+  return fd;
+}
+
+function clampColorAdjustment(value) {
+  return Math.max(-1, Math.min(1, Number(value) || 0));
+}
+function clampEffectIntensity(value) {
+  return Math.max(0, Math.min(1, Number(value) || 0));
+}
+function clampColorChannel(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function clampColorByte(value) {
+  return Math.max(0, Math.min(255, value));
+}
+function smoothstep(edge0, edge1, value) {
+  if (edge0 === edge1) return value < edge0 ? 0 : 1;
+  const t = Math.max(0, Math.min(1, (value - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+function midtoneWeight(value) {
+  const rise = smoothstep(0.08, 0.4, value);
+  const fall = 1 - smoothstep(0.6, 0.92, value);
+  return clampColorChannel(rise * fall * 2.2);
+}
+function randomGrain(x, y, seed = 0) {
+  const value = Math.sin(x * 12.9898 + y * 78.233 + seed * 37.719) * 43758.5453;
+  return value - Math.floor(value);
+}
+var effectBufferCanvas = null;
+function getEffectBufferCanvas(width, height) {
+  if (typeof document === "undefined") return null;
+  effectBufferCanvas ?? (effectBufferCanvas = document.createElement("canvas"));
+  if (effectBufferCanvas.width !== width) effectBufferCanvas.width = width;
+  if (effectBufferCanvas.height !== height) effectBufferCanvas.height = height;
+  return effectBufferCanvas;
+}
+function applyCanvasCssFilter(ctx, width, height, cssFilter) {
+  if (!cssFilter || cssFilter === "none") return;
+  const buffer = getEffectBufferCanvas(width, height);
+  const bufferCtx = buffer?.getContext("2d");
+  if (!buffer || !bufferCtx) return;
+  bufferCtx.setTransform(1, 0, 0, 1, 0, 0);
+  bufferCtx.clearRect(0, 0, width, height);
+  bufferCtx.drawImage(ctx.canvas, 0, 0, width, height);
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+  ctx.filter = cssFilter;
+  ctx.drawImage(buffer, 0, 0, width, height);
+  ctx.restore();
+  ctx.filter = "none";
+}
+function applyTimelinePreviewFilter(ctx, width, height, overlay) {
+  const presetCss = findFilterPreset(overlay?.filterPreset)?.css ?? "";
+  applyCanvasCssFilter(ctx, width, height, presetCss);
+}
+function applyTimelinePreviewAdjust(ctx, width, height, overlay) {
+  applyCanvasCssFilter(ctx, width, height, buildFilterCss(overlay ?? {}, ""));
+  applyAdvancedColorAdjustments(ctx, width, height, overlay ?? {});
+}
+function hasAdvancedColorAdjustments(filters = {}) {
+  const signedKeys = ["temperature", "tint", "vibrance", "gamma", "highlights", "shadows", "whites", "blacks", "lightSense"];
+  if (signedKeys.some((key) => Math.abs(clampColorAdjustment(filters[key])) > 1e-4)) return true;
+  return ["sharpen", "clarity", "grain", "fade", "vignette"].some((key) => clampEffectIntensity(filters[key]) > 1e-4);
+}
+function applyAdvancedColorAdjustments(ctx, width, height, filters = {}) {
+  if (!hasAdvancedColorAdjustments(filters)) return;
+  let imageData;
+  try {
+    imageData = ctx.getImageData(0, 0, width, height);
+  } catch {
+    return;
+  }
+  const temperature = clampColorAdjustment(filters.temperature);
+  const tint = clampColorAdjustment(filters.tint);
+  const vibrance = clampColorAdjustment(filters.vibrance);
+  const gamma = clampColorAdjustment(filters.gamma);
+  const highlights = clampColorAdjustment(filters.highlights);
+  const shadows = clampColorAdjustment(filters.shadows);
+  const whites = clampColorAdjustment(filters.whites);
+  const blacks = clampColorAdjustment(filters.blacks);
+  const lightSense = clampColorAdjustment(filters.lightSense);
+  const sharpen = clampEffectIntensity(filters.sharpen);
+  const clarity = clampEffectIntensity(filters.clarity);
+  const grain = clampEffectIntensity(filters.grain);
+  const fade = clampEffectIntensity(filters.fade);
+  const vignette = clampEffectIntensity(filters.vignette);
+  const gammaFactor = 1 + gamma * (gamma > 0 ? 1 : 0.5);
+  const gammaExponent = gamma === 0 ? 1 : 1 / Math.max(0.01, gammaFactor);
+  const tempRed = temperature * 0.18;
+  const tempGreen = temperature * 0.02;
+  const tempBlue = -temperature * 0.18;
+  const tintRedBlue = tint * 0.1;
+  const tintGreen = -tint * 0.12;
+  const data = imageData.data;
+  for (let index = 0; index < data.length; index += 4) {
+    let r = data[index] / 255;
+    let g = data[index + 1] / 255;
+    let b = data[index + 2] / 255;
+    if (temperature !== 0 || tint !== 0) {
+      r = clampColorChannel(r + tempRed + tintRedBlue);
+      g = clampColorChannel(g + tempGreen + tintGreen);
+      b = clampColorChannel(b + tempBlue + tintRedBlue);
+    }
+    if (vibrance !== 0) {
+      const max = Math.max(r, g, b);
+      const min = Math.min(r, g, b);
+      const saturation = max - min;
+      const average = (r + g + b) / 3;
+      const boost = vibrance > 0 ? vibrance * (1 - saturation) : vibrance * (0.35 + saturation * 0.65);
+      r = clampColorChannel(average + (r - average) * (1 + boost));
+      g = clampColorChannel(average + (g - average) * (1 + boost));
+      b = clampColorChannel(average + (b - average) * (1 + boost));
+    }
+    if (gamma !== 0) {
+      r = clampColorChannel(Math.pow(r, gammaExponent));
+      g = clampColorChannel(Math.pow(g, gammaExponent));
+      b = clampColorChannel(Math.pow(b, gammaExponent));
+    }
+    if (highlights !== 0 || shadows !== 0 || whites !== 0 || blacks !== 0 || lightSense !== 0 || fade !== 0) {
+      const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      const shadowWeight = 1 - smoothstep(0.18, 0.62, luminance);
+      const blackWeight = 1 - smoothstep(0.04, 0.32, luminance);
+      const highlightWeight = smoothstep(0.38, 0.84, luminance);
+      const whiteWeight = smoothstep(0.7, 0.98, luminance);
+      const midWeight = midtoneWeight(luminance);
+      const luminanceDelta = shadows * shadowWeight * 0.28 + highlights * highlightWeight * 0.24 + blacks * blackWeight * 0.2 + whites * whiteWeight * 0.2 + lightSense * midWeight * 0.18 + fade * (0.12 + shadowWeight * 0.06);
+      r = clampColorChannel(r + luminanceDelta);
+      g = clampColorChannel(g + luminanceDelta);
+      b = clampColorChannel(b + luminanceDelta);
+      if (fade > 0) {
+        const average = (r + g + b) / 3;
+        const fadeMix = fade * 0.16;
+        r = clampColorChannel(r * (1 - fadeMix) + average * fadeMix);
+        g = clampColorChannel(g * (1 - fadeMix) + average * fadeMix);
+        b = clampColorChannel(b * (1 - fadeMix) + average * fadeMix);
+      }
+    }
+    data[index] = Math.round(r * 255);
+    data[index + 1] = Math.round(g * 255);
+    data[index + 2] = Math.round(b * 255);
+  }
+  if (sharpen > 1e-4 || clarity > 1e-4) {
+    const base = new Uint8ClampedArray(data);
+    const rowStride = width * 4;
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const index = y * rowStride + x * 4;
+        const blurR = (base[index - 4] + base[index + 4] + base[index - rowStride] + base[index + rowStride] + base[index] * 4) / 8;
+        const blurG = (base[index - 3] + base[index + 5] + base[index - rowStride + 1] + base[index + rowStride + 1] + base[index + 1] * 4) / 8;
+        const blurB = (base[index - 2] + base[index + 6] + base[index - rowStride + 2] + base[index + rowStride + 2] + base[index + 2] * 4) / 8;
+        const luminance = (0.2126 * base[index] + 0.7152 * base[index + 1] + 0.0722 * base[index + 2]) / 255;
+        const amount = Math.min(1.8, sharpen * 1.45 + clarity * 0.9 * midtoneWeight(luminance));
+        data[index] = clampColorByte(base[index] + (base[index] - blurR) * amount);
+        data[index + 1] = clampColorByte(base[index + 1] + (base[index + 1] - blurG) * amount);
+        data[index + 2] = clampColorByte(base[index + 2] + (base[index + 2] - blurB) * amount);
+      }
+    }
+  }
+  if (grain > 1e-4) {
+    const grainAmount = grain * 26;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const index = (y * width + x) * 4;
+        const luminance = (0.2126 * data[index] + 0.7152 * data[index + 1] + 0.0722 * data[index + 2]) / 255;
+        const weight = 0.4 + midtoneWeight(luminance) * 0.9;
+        const mono = (randomGrain(x, y) - 0.5) * grainAmount * weight;
+        const chroma = (randomGrain(x, y, 1) - 0.5) * grainAmount * 0.22 * grain;
+        data[index] = clampColorByte(data[index] + mono + chroma);
+        data[index + 1] = clampColorByte(data[index + 1] + mono * 0.88);
+        data[index + 2] = clampColorByte(data[index + 2] + mono - chroma);
+      }
+    }
+  }
+  if (vignette > 1e-4) {
+    const centerX = (width - 1) / 2;
+    const centerY = (height - 1) / 2;
+    const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY) || 1;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const index = (y * width + x) * 4;
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy) / maxDistance;
+        const edgeStrength = smoothstep(0.32, 1, distance) * vignette * 0.62;
+        const multiplier = 1 - edgeStrength;
+        data[index] = clampColorByte(data[index] * multiplier);
+        data[index + 1] = clampColorByte(data[index + 1] * multiplier);
+        data[index + 2] = clampColorByte(data[index + 2] * multiplier);
+      }
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+}
+
+// src/frame-compositor.ts
+function drawVideoFrame(canvas, source, srcDims, canvasDims, state, k = 1, imageCache, withOverlays = true) {
+  const out = outputSize(canvasDims, state);
+  canvas.width = Math.max(2, Math.round(out.w * k));
+  canvas.height = Math.max(2, Math.round(out.h * k));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const rb = rotatedSize(canvasDims.w, canvasDims.h, state.rotation);
+  const crop = state.crop ?? { x: 0, y: 0, width: rb.w, height: rb.h };
+  const fit = state.scale?.fit ?? "force";
+  const { src, dst } = fitRects({ width: crop.width, height: crop.height }, out, fit);
+  if (fit === "contain") {
+    ctx.fillStyle = "#000";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  ctx.filter = buildFilterCss(state.filters, state.filterPreset);
+  ctx.save();
+  if (fit === "contain") {
+    ctx.beginPath();
+    ctx.rect(k * dst.x, k * dst.y, k * dst.width, k * dst.height);
+    ctx.clip();
+  }
+  ctx.translate(k * dst.x, k * dst.y);
+  ctx.scale(k * dst.width / src.width, k * dst.height / src.height);
+  ctx.translate(-(crop.x + src.x), -(crop.y + src.y));
+  ctx.translate(rb.w / 2, rb.h / 2);
+  ctx.rotate(state.rotation * DEG2RAD);
+  ctx.scale(state.flipX ? -1 : 1, state.flipY ? -1 : 1);
+  const cov = fitRects({ width: srcDims.w, height: srcDims.h }, { w: canvasDims.w, h: canvasDims.h }, "cover");
+  ctx.drawImage(
+    source,
+    cov.src.x,
+    cov.src.y,
+    cov.src.width,
+    cov.src.height,
+    -canvasDims.w / 2,
+    -canvasDims.h / 2,
+    canvasDims.w,
+    canvasDims.h
+  );
+  ctx.restore();
+  ctx.filter = "none";
+  applyAdvancedColorAdjustments(ctx, canvas.width, canvas.height, state.filters);
+  if (withOverlays && state.overlays?.length) {
+    const overlayTime = Number.isFinite(state?.__mePreviewTimelineTime) ? Number(state.__mePreviewTimelineTime) : null;
+    const visible = overlayTime == null ? state.overlays : visibleOverlaysAtTime(state.overlays, overlayTime);
+    const timelineOverlays = visible.map((overlay, index) => ({ overlay, index })).filter((item) => isTimelinePreviewOverlay(item.overlay)).sort((left, right) => {
+      const trackDelta = getTimelinePreviewTrack(right.overlay) - getTimelinePreviewTrack(left.overlay);
+      if (trackDelta !== 0) return trackDelta;
+      const startDelta = getTimelinePreviewStartAt(left.overlay) - getTimelinePreviewStartAt(right.overlay);
+      if (Math.abs(startDelta) > 1e-6) return startDelta;
+      return left.index - right.index;
+    });
+    const floatingOverlays = visible.filter((overlay) => !isTimelinePreviewOverlay(overlay));
+    ctx.setTransform(k, 0, 0, k, 0, 0);
+    timelineOverlays.forEach((item) => {
+      if (item.overlay?.type === "filter") {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        applyTimelinePreviewFilter(ctx, canvas.width, canvas.height, item.overlay);
+        ctx.setTransform(k, 0, 0, k, 0, 0);
+        return;
+      }
+      if (item.overlay?.type === "adjust") {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        applyTimelinePreviewAdjust(ctx, canvas.width, canvas.height, item.overlay);
+        ctx.setTransform(k, 0, 0, k, 0, 0);
+        return;
+      }
+      drawOverlay(ctx, item.overlay, imageCache);
+    });
+    drawOverlays(ctx, floatingOverlays, imageCache);
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+  }
+}
+function seekVideo(el, t) {
+  return new Promise((resolve) => {
+    const onSeeked = () => {
+      el.removeEventListener("seeked", onSeeked);
+      resolve();
+    };
+    el.addEventListener("seeked", onSeeked);
+    el.currentTime = Math.min(Math.max(0, t), el.duration || t);
+  });
+}
+async function generateThumbnails(videoEl, count, maxW = 160) {
+  const dur = videoEl.duration;
+  if (!dur || !isFinite(dur) || count <= 0) return [];
+  const natW = videoEl.videoWidth || 16;
+  const natH = videoEl.videoHeight || 9;
+  const w = Math.min(maxW, natW);
+  const h = Math.max(1, Math.round(w * natH / natW));
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return [];
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    await seekVideo(videoEl, dur * (i + 0.5) / count);
+    ctx.drawImage(videoEl, 0, 0, w, h);
+    out.push(canvas.toDataURL("image/jpeg", 0.6));
+  }
+  return out;
+}
+
+// src/fullscreen.ts
+function createFullscreenToggle(host, options = {}) {
+  const mode = options.mode ?? "overlay";
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = ["me-fullscreen-toggle", options.className].filter(Boolean).join(" ");
+  btn.dataset.meFullscreenToggle = "true";
+  btn.dataset.mode = mode;
+  btn.title = "\u5168\u5C4F / \u9000\u51FA\u5168\u5C4F";
+  btn.style.cssText = [
+    mode === "overlay" ? "position:absolute;left:8px;bottom:8px;z-index:30;" : "position:static;",
+    "width:32px;height:32px;padding:0;",
+    "display:inline-flex;align-items:center;justify-content:center;",
+    "border:1px solid var(--me-border,#26262b);border-radius:6px;",
+    "background:var(--me-chip,#1c1c20);color:var(--me-fg,#e7e7ee);",
+    "cursor:pointer;font-size:15px;line-height:1;opacity:0.9;font:inherit;"
+  ].join("");
+  host.classList.add("me-fullscreen-host");
+  const sync = () => {
+    const isFullscreen = document.fullscreenElement === host;
+    btn.textContent = isFullscreen ? "\xD7" : "\u26F6";
+    btn.setAttribute("aria-label", isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F");
+    host.classList.toggle("me-is-fullscreen", isFullscreen);
+    host.dataset.meFullscreen = isFullscreen ? "true" : "false";
+  };
+  sync();
+  const onChange = () => sync();
+  const onClick = () => {
+    const action = document.fullscreenElement === host ? document.exitFullscreen?.() : host.requestFullscreen?.();
+    void action?.catch?.(() => {
+    });
+  };
+  btn.addEventListener("click", onClick);
+  document.addEventListener("fullscreenchange", onChange);
+  return {
+    button: btn,
+    dispose: () => {
+      document.removeEventListener("fullscreenchange", onChange);
+      btn.removeEventListener("click", onClick);
+      btn.remove();
+      host.classList.remove("me-fullscreen-host", "me-is-fullscreen");
+      delete host.dataset.meFullscreen;
+    }
+  };
+}
+
+export { buildVideoExportFormData, createFullscreenToggle, drawOverlay, drawOverlays, drawVideoFrame, fitStickerBox, generateThumbnails, getOverlayRotation, hitTestOverlay, loadOverlayImages, overlayBBox, renderOverlaysToPng, rotateOverlay, scaleOverlay, translateOverlay };
+//# sourceMappingURL=browser.js.map
+//# sourceMappingURL=browser.js.map