@clypra/engine 1.0.2 → 1.1.1

package/dist/index.cjs

@@ -21,6 +21,11 @@ var index_exports = {};
 __export(index_exports, {
   COMPOSITION_PRESETS: () => COMPOSITION_PRESETS,
   CUSTOM_ENGINE_IDS: () => CUSTOM_ENGINE_IDS,
+  DEFAULT_CANVAS_HEIGHT: () => DEFAULT_CANVAS_HEIGHT,
+  DEFAULT_CANVAS_WIDTH: () => DEFAULT_CANVAS_WIDTH,
+  DEFAULT_DURATION: () => DEFAULT_DURATION,
+  DEFAULT_FONT_SIZE: () => DEFAULT_FONT_SIZE,
+  DEFAULT_FPS: () => DEFAULT_FPS,
   DEFAULT_TEXT_STYLE: () => DEFAULT_TEXT_STYLE,
   EMPHASIS_PRESETS: () => EMPHASIS_PRESETS,
   ENGINE_ID_TO_LEGACY: () => ENGINE_ID_TO_LEGACY,
@@ -38,6 +43,7 @@ __export(index_exports, {
   TextEffectRenderer: () => TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES: () => WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor: () => WebGLCompositor,
+  _resetPlatformCache: () => _resetPlatformCache,
   addImageLayer: () => addImageLayer,
   addKeyframeAtTime: () => addKeyframeAtTime,
   addOrUpdateKeyframe: () => addOrUpdateKeyframe,
@@ -49,6 +55,7 @@ __export(index_exports, {
   advanceSceneTime: () => advanceSceneTime,
   alignToLottieJ: () => alignToLottieJ,
   applyFillColorToAll: () => applyFillColorToAll,
+  applyLetterSpacing: () => applyLetterSpacing,
   applyMaskReveal: () => applyMaskReveal,
   applyRecipeToScene: () => applyRecipeToScene,
   applyStyleToLottie: () => applyStyleToLottie,
@@ -74,16 +81,19 @@ __export(index_exports, {
   computeTextLayout: () => computeTextLayout,
   countTextGlyphs: () => countTextGlyphs,
   createBlankLottie: () => createBlankLottie,
+  createCanvas: () => createCanvas,
   createDefaultRevealTrack: () => createDefaultRevealTrack,
   createEmptyScene: () => createEmptyScene,
   createPulseOpacityTrack: () => createPulseOpacityTrack,
   defaultConfig: () => defaultConfig,
   deleteKeyframe: () => deleteKeyframe,
+  disposeSharedCompositor: () => disposeSharedCompositor,
   downloadDotLottie: () => downloadDotLottie,
   downloadLottieJson: () => downloadLottieJson,
   downloadPngSequenceZip: () => downloadPngSequenceZip,
   downloadSceneWebM: () => downloadSceneWebM,
   drawPerCharText: () => drawPerCharText,
+  drawRoundedRect: () => drawRoundedRect,
   duplicateTrackAtPlayhead: () => duplicateTrackAtPlayhead,
   ease: () => ease,
   enableKeyframing: () => enableKeyframing,
@@ -131,6 +141,7 @@ __export(index_exports, {
   readLayerScalar: () => readLayerScalar,
   readStyleFromLottieLayer: () => readStyleFromLottieLayer,
   reindexLayers: () => reindexLayers,
+  releaseCanvas: () => releaseCanvas,
   removeKeyframe: () => removeKeyframe,
   removeTrack: () => removeTrack,
   renderPngSequence: () => renderPngSequence,
@@ -140,6 +151,7 @@ __export(index_exports, {
   resizeCharFillColors: () => resizeCharFillColors,
   resolveAnimatedScalar: () => resolveAnimatedScalar,
   resolveCustomEngineId: () => resolveCustomEngineId,
+  restoreLetterSpacing: () => restoreLetterSpacing,
   scanLottieFonts: () => scanLottieFonts,
   scanTextLayers: () => scanTextLayers,
   sceneToConfig: () => sceneToConfig,
@@ -149,6 +161,11 @@ __export(index_exports, {
   shouldUsePerCharFill: () => shouldUsePerCharFill,
   snapshotScene: () => snapshotScene,
   sortKeyframes: () => sortKeyframes,
+  supportsCtxFilter: () => supportsCtxFilter,
+  supportsLetterSpacing: () => supportsLetterSpacing,
+  supportsOffscreenCanvas: () => supportsOffscreenCanvas,
+  supportsRoundRect: () => supportsRoundRect,
+  supportsWebGL2: () => supportsWebGL2,
   syncCompositorFromScene: () => syncCompositorFromScene,
   textEffectConfigToScene: () => textEffectConfigToScene,
   trackId: () => trackId,
@@ -163,6 +180,47 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/engine/schema.ts
+var SCENE_VERSION = 1;
+var DEFAULT_CANVAS_WIDTH = 800;
+var DEFAULT_CANVAS_HEIGHT = 200;
+var DEFAULT_FONT_SIZE = 80;
+var DEFAULT_FPS = 30;
+var DEFAULT_DURATION = 2;
+var CUSTOM_ENGINE_IDS = ["ink"];
+var LEGACY_RENDERER_MAP = {
+  InkBrushEngine: "ink"
+};
+var ENGINE_ID_TO_LEGACY = {
+  ink: "InkBrushEngine"
+};
+function createEmptyScene(overrides) {
+  return {
+    version: SCENE_VERSION,
+    effectName: "My Effect",
+    canvas: { width: DEFAULT_CANVAS_WIDTH, height: DEFAULT_CANVAS_HEIGHT, background: "transparent" },
+    text: {
+      content: "CLYPRA",
+      fontFamily: "Poppins",
+      fontWeight: 700,
+      fontStyle: "normal",
+      fontSize: DEFAULT_FONT_SIZE,
+      letterSpacing: 4,
+      lineHeight: 1.2,
+      textPosX: "center",
+      textPosY: "middle"
+    },
+    effectLayers: [],
+    customEngineId: null,
+    compositor: { blur: 0, bloom: 0, bloomThreshold: 0.6 },
+    timeline: { duration: DEFAULT_DURATION, fps: DEFAULT_FPS, loop: true, tracks: [] },
+    ...overrides
+  };
+}
+function newLayerId() {
+  return `layer-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
 // src/engine/textLayout.ts
 var COMPOSITION_PRESETS = [
   { id: "banner", label: "Banner", width: 800, height: 200, description: "Lower third / title bar" },
@@ -182,8 +240,8 @@ function measureLine(ctx, line, letterSpacing) {
   return w;
 }
 function getSafeRect(cfg) {
-  const w = cfg.canvasWidth || 800;
-  const h = cfg.canvasHeight || 200;
+  const w = cfg.canvasWidth || DEFAULT_CANVAS_WIDTH;
+  const h = cfg.canvasHeight || DEFAULT_CANVAS_HEIGHT;
   const marginX = cfg.panelEnabled ? (cfg.panelPaddingX ?? 40) + 16 : Math.min(48, w * 0.06);
   const marginY = cfg.panelEnabled ? (cfg.panelPaddingY ?? 20) + 16 : Math.min(40, h * 0.1);
   return {
@@ -230,8 +288,8 @@ function wrapTextToWidth(ctx, text, maxWidth, letterSpacing) {
   return lines.length > 0 ? lines : [""];
 }
 function layoutWithFontSize(ctx, cfg, fontSize, lines) {
-  const cWidth = cfg.canvasWidth || 800;
-  const cHeight = cfg.canvasHeight || 200;
+  const cWidth = cfg.canvasWidth || DEFAULT_CANVAS_WIDTH;
+  const cHeight = cfg.canvasHeight || DEFAULT_CANVAS_HEIGHT;
   const safe = getSafeRect(cfg);
   const lineHeight = cfg.lineHeight ?? 1.2;
   const letterSpacing = cfg.letterSpacing ?? 0;
@@ -239,7 +297,7 @@ function layoutWithFontSize(ctx, cfg, fontSize, lines) {
   ctx.font = fontStr;
   const lineWidths = lines.map((line) => measureLine(ctx, line, letterSpacing));
   const maxLineWidth = Math.max(...lineWidths, 1);
-  const textBlockHeight = fontSize + (lines.length - 1) * fontSize * lineHeight;
+  const textBlockHeight = lines.length === 1 ? fontSize : (lines.length - 1) * fontSize * lineHeight + fontSize;
   let align = "center";
   let startX = cWidth / 2;
   if (cfg.textPosX === "left") {
@@ -287,7 +345,7 @@ function measureTextFits(ctx, cfg, fontSize, lines) {
   return layout.bounds.maxLineWidth <= safe.width + 1 && layout.bounds.textBlockHeight <= safe.height + 1;
 }
 function computeAutoFitFontSize(ctx, cfg, wrappedLines) {
-  const max = Math.min(cfg.fontSize || 80, 200);
+  const max = Math.min(cfg.fontSize || DEFAULT_FONT_SIZE, 200);
   let lo = 12;
   let hi = max;
   let best = 12;
@@ -407,29 +465,111 @@ function shouldUsePerCharFill(cfg) {
   return !!cfg.perCharFillEnabled && cfg.fillType === "solid" && !cfg.customRenderer && (cfg.charFillColors?.length ?? 0) > 0;
 }
 
-// src/engine/procedural/utils.ts
-function createCanvas(w, h) {
-  if (typeof document !== "undefined") {
+// src/platform.ts
+var _ctxFilter = null;
+var _roundRect = null;
+var _letterSpacing = null;
+var _offscreenCanvas = null;
+var _webgl2 = null;
+function probe2d() {
+  if (typeof document === "undefined") return null;
+  try {
+    return document.createElement("canvas").getContext("2d");
+  } catch {
+    return null;
+  }
+}
+function supportsCtxFilter() {
+  if (_ctxFilter !== null) return _ctxFilter;
+  const ctx = probe2d();
+  if (!ctx) {
+    _ctxFilter = false;
+    return false;
+  }
+  try {
+    ctx.filter = "blur(4px)";
+    _ctxFilter = typeof ctx.filter === "string" && ctx.filter.includes("blur");
+  } catch {
+    _ctxFilter = false;
+  }
+  return _ctxFilter;
+}
+function supportsRoundRect() {
+  if (_roundRect !== null) return _roundRect;
+  const ctx = probe2d();
+  _roundRect = !!ctx && typeof ctx.roundRect === "function";
+  return _roundRect;
+}
+function supportsLetterSpacing() {
+  if (_letterSpacing !== null) return _letterSpacing;
+  const ctx = probe2d();
+  if (!ctx) {
+    _letterSpacing = false;
+    return false;
+  }
+  try {
+    ctx.letterSpacing = "2px";
+    _letterSpacing = typeof ctx.letterSpacing === "string" && ctx.letterSpacing === "2px";
+  } catch {
+    _letterSpacing = false;
+  }
+  return _letterSpacing;
+}
+function supportsOffscreenCanvas() {
+  if (_offscreenCanvas !== null) return _offscreenCanvas;
+  _offscreenCanvas = typeof globalThis !== "undefined" && typeof globalThis.OffscreenCanvas === "function";
+  return _offscreenCanvas;
+}
+function supportsWebGL2() {
+  if (_webgl2 !== null) return _webgl2;
+  if (typeof document === "undefined") {
+    _webgl2 = false;
+    return false;
+  }
+  try {
     const canvas = document.createElement("canvas");
-    canvas.width = w;
-    canvas.height = h;
-    return canvas;
+    canvas.width = 1;
+    canvas.height = 1;
+    _webgl2 = !!canvas.getContext("webgl2");
+  } catch {
+    _webgl2 = false;
   }
-  if (typeof OffscreenCanvas !== "undefined") {
-    return new OffscreenCanvas(w, h);
+  return _webgl2;
+}
+function createCanvas(width, height) {
+  if (supportsOffscreenCanvas()) {
+    return new OffscreenCanvas(width, height);
   }
-  const runtimeCanvasFactory = globalThis.__clypraCreateCanvas;
-  if (runtimeCanvasFactory) {
-    return runtimeCanvasFactory(w, h);
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
   }
+  const factory = globalThis.__clypraCreateCanvas;
+  if (factory) return factory(width, height);
   try {
     const nodeRequire = (0, eval)("require");
     const nodeCanvas = nodeRequire("@napi-rs/canvas");
-    return nodeCanvas.createCanvas(w, h);
+    return nodeCanvas.createCanvas(width, height);
   } catch {
-    throw new Error("No canvas implementation found in this environment.");
+    throw new Error("[clypra/engine] No canvas implementation available in this environment. Set globalThis.__clypraCreateCanvas or install @napi-rs/canvas.");
   }
 }
+function releaseCanvas(canvas) {
+  if (canvas instanceof OffscreenCanvas) return;
+  canvas.width = 0;
+  canvas.height = 0;
+}
+function _resetPlatformCache() {
+  _ctxFilter = null;
+  _roundRect = null;
+  _letterSpacing = null;
+  _offscreenCanvas = null;
+  _webgl2 = null;
+}
+
+// src/engine/procedural/utils.ts
 function getCanvas2DContext(canvas) {
   return canvas.getContext("2d");
 }
@@ -530,8 +670,8 @@ var InkBrushEngine = class {
       panelStrokeEnabled: false,
       panelStrokeColor: "#2A2A38",
       panelStrokeWidth: 2,
-      canvasWidth: 800,
-      canvasHeight: 200,
+      canvasWidth: DEFAULT_CANVAS_WIDTH,
+      canvasHeight: DEFAULT_CANVAS_HEIGHT,
       textPosX: "center",
       textPosY: "middle",
       inkColor: "#FFFFFF",
@@ -786,42 +926,39 @@ var InkBrushEngine = class {
   }
 };
 
-// src/renderer.ts
-function createCanvas2(w, h) {
-  if (typeof document !== "undefined") {
-    const canvas = document.createElement("canvas");
-    canvas.width = w;
-    canvas.height = h;
-    return canvas;
-  }
-  if (typeof OffscreenCanvas !== "undefined") {
-    return new OffscreenCanvas(w, h);
-  }
-  const runtimeCanvasFactory = globalThis.__clypraCreateCanvas;
-  if (runtimeCanvasFactory) {
-    return runtimeCanvasFactory(w, h);
+// src/canvas-utils.ts
+function drawRoundedRect(ctx, x, y, w, h, r) {
+  const radius = Math.max(0, Math.min(r, Math.min(w, h) / 2));
+  ctx.beginPath();
+  if (supportsRoundRect()) {
+    ctx.roundRect(x, y, w, h, radius);
+  } else {
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + w - radius, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+    ctx.lineTo(x + w, y + h - radius);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+    ctx.lineTo(x + radius, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
   }
-  try {
-    const nodeRequire = (0, eval)("require");
-    const nodeCanvas = nodeRequire("@napi-rs/canvas");
-    return nodeCanvas.createCanvas(w, h);
-  } catch {
-    throw new Error("No canvas implementation found in this environment.");
+}
+function applyLetterSpacing(ctx, value) {
+  const prev = ctx.letterSpacing ?? "0px";
+  if (value !== 0) {
+    ctx.letterSpacing = `${value}px`;
   }
+  return prev;
+}
+function restoreLetterSpacing(ctx, saved) {
+  ctx.letterSpacing = saved;
 }
+
+// src/renderer.ts
 function getCanvas2DContext2(canvas) {
   return canvas.getContext("2d");
 }
-function hexToRgb2(hex) {
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const fullHex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : { r: 255, g: 255, b: 255 };
-}
 function renderTextEffectCore(ctx, cfg) {
   if (cfg.customRenderer === "InkBrushEngine") {
     const engine = new InkBrushEngine(cfg);
@@ -831,8 +968,8 @@ function renderTextEffectCore(ctx, cfg) {
   const { text, fontFamily, fontWeight, fontStyle, fontSize, letterSpacing, lineHeight, fillType, fillColor, fillGradientAngle, fillGradientStops, patternType, strokeEnabled, strokeColor, strokeWidth, strokePosition, strokeOpacity, strokeLineJoin, strokeBlur, strokeType, strokeColorSecondary, strokeWidthSecondary, strokeFadeRange, glowLayers, shadowEnabled, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowOpacity, shadowType, bevelEnabled, bevelDepth, bevelHighlight, bevelShadow, bevelDirection, bevelCoreColor, bevelEdgeColor, bevelEdgeWidth, bevelBlur, bevelBlurColor, bevelPerspectiveEnabled, bevelVanishingPointX, bevelVanishingPointY, bevelFocalLength, stackEnabled, stackCount, stackOffsetX, stackOffsetY, stackOpacityDecay, stackColor1, stackColor2, stackColor3, stackColor4, panelEnabled, panelColor, panelOpacity, panelRadius, panelPaddingX, panelPaddingY, panelStrokeEnabled, panelStrokeColor, panelStrokeWidth, canvasWidth, canvasHeight, textPosX, textPosY } = cfg;
   ctx.imageSmoothingEnabled = true;
   ctx.lineJoin = strokeLineJoin;
-  const cWidth = canvasWidth || 800;
-  const cHeight = canvasHeight || 200;
+  const cWidth = canvasWidth || DEFAULT_CANVAS_WIDTH;
+  const cHeight = canvasHeight || DEFAULT_CANVAS_HEIGHT;
   const layout = computeTextLayout(ctx, cfg, {
     wrap: cfg.wrapText !== false,
     autoFit: !!cfg.autoFitText
@@ -1044,7 +1181,7 @@ function renderTextEffectCore(ctx, cfg) {
         }
       }
     } else {
-      ctx.roundRect(px, py, pw, ph, panelRadius);
+      drawRoundedRect(ctx, px, py, pw, ph, panelRadius);
     }
     ctx.closePath();
     ctx.fill();
@@ -1107,9 +1244,9 @@ function renderTextEffectCore(ctx, cfg) {
     ctx.restore();
   }
   if (bevelEnabled && bevelDepth > 0) {
-    const shadowRgb = hexToRgb2(bevelShadow || "#1A0A00");
-    const coreRgb = hexToRgb2(bevelCoreColor || bevelShadow || "#3A1A00");
-    const highlightRgb = hexToRgb2(bevelHighlight || "#FFFFFF");
+    const shadowRgb = hexToRgb(bevelShadow || "#1A0A00");
+    const coreRgb = hexToRgb(bevelCoreColor || bevelShadow || "#3A1A00");
+    const highlightRgb = hexToRgb(bevelHighlight || "#FFFFFF");
     const shadeForDepth = (t) => {
       const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
       if (eased <= 0.5) {
@@ -1150,7 +1287,7 @@ function renderTextEffectCore(ctx, cfg) {
         const t = 1 - (i - 1) / Math.max(1, bevelDepth - 1);
         const aoFactor = 0.35 + 0.65 * (1 - (i - 1) / Math.max(1, bevelDepth));
         const baseColor = shadeForDepth(t);
-        const bRgb = hexToRgb2(baseColor.startsWith("#") ? baseColor : "#000000");
+        const bRgb = hexToRgb(baseColor.startsWith("#") ? baseColor : "#000000");
         const baseRgbParsed = (() => {
           const m = baseColor.match(/rgb\((\d+),(\d+),(\d+)\)/);
           return m ? { r: +m[1], g: +m[2], b: +m[3] } : bRgb;
@@ -1243,7 +1380,7 @@ function renderTextEffectCore(ctx, cfg) {
     let customStrokeStyle = strokeColor;
     if (sFadeRange > 0) {
       const grad = ctx.createLinearGradient(0, yMin, 0, yMax);
-      const rgb = hexToRgb2(strokeColor);
+      const rgb = hexToRgb(strokeColor);
       grad.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${strokeOpacity / 100})`);
       const fadeLimit = Math.min(1, sFadeRange / 100);
       grad.addColorStop(fadeLimit, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
@@ -1353,7 +1490,7 @@ function renderTextEffectCore(ctx, cfg) {
   } else if (fillType === "pattern") {
     const pType = patternType || "chalk";
     const patColor = fillColor || "#ffffff";
-    const patCanvas = createCanvas2(128, 128);
+    const patCanvas = createCanvas(128, 128);
     if (pType === "carbon") {
       patCanvas.width = 8;
       patCanvas.height = 8;
@@ -1787,7 +1924,7 @@ function renderTextEffectCore(ctx, cfg) {
   };
   const isInkStyle = cfg.effectName.toLowerCase().includes("ink") || cfg.fontFamily.toLowerCase().includes("brush") || cfg.effectName.toLowerCase().includes("grunge") || cfg.effectName.toLowerCase().includes("scratch") || cfg.fontFamily === "Permanent Marker";
   if (isInkStyle) {
-    const tCanvas = createCanvas2(cWidth, cHeight);
+    const tCanvas = createCanvas(cWidth, cHeight);
     tCanvas.width = cWidth;
     tCanvas.height = cHeight;
     const tCtx = getCanvas2DContext2(tCanvas);
@@ -1916,7 +2053,7 @@ function renderTextEffectCore(ctx, cfg) {
       }
       tCtx.letterSpacing = originalLSpacing;
       ctx.save();
-      const tintCanvas = createCanvas2(cWidth, cHeight);
+      const tintCanvas = createCanvas(cWidth, cHeight);
       tintCanvas.width = cWidth;
       tintCanvas.height = cHeight;
       const tintCtx = getCanvas2DContext2(tintCanvas);
@@ -1949,7 +2086,7 @@ function renderTextEffectCore(ctx, cfg) {
       ctx.globalCompositeOperation = "source-atop";
       const renderCount = Math.max(1, Math.min(20, layer2.strength ?? 1));
       for (let i = 0; i < renderCount; i++) {
-        renderWithShadowTrick("fill", layer2.color, layer2.blur, 0, 0, layer2.opacity, "transparent", layer2.spread ?? 0);
+        renderWithShadowTrick("fill", layer2.color, layer2.blur, 0, 0, layer2.opacity, "#000000", layer2.spread ?? 0);
       }
       ctx.restore();
     }
@@ -1957,7 +2094,7 @@ function renderTextEffectCore(ctx, cfg) {
   if (shadowEnabled && shadowType === "inner" && shadowOpacity > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "source-atop";
-    renderWithShadowTrick("fill", shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowOpacity, "transparent");
+    renderWithShadowTrick("fill", shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowOpacity, "#000000");
     ctx.restore();
   }
   if (isGlitch) {
@@ -1987,7 +2124,7 @@ var defaultConfig = {
   fontFamily: "Poppins",
   fontWeight: 700,
   fontStyle: "normal",
-  fontSize: 80,
+  fontSize: DEFAULT_FONT_SIZE,
   letterSpacing: 4,
   lineHeight: 1.2,
   fillType: "solid",
@@ -2047,8 +2184,8 @@ var defaultConfig = {
   panelStrokeEnabled: false,
   panelStrokeColor: "#2A2A38",
   panelStrokeWidth: 2,
-  canvasWidth: 800,
-  canvasHeight: 200,
+  canvasWidth: DEFAULT_CANVAS_WIDTH,
+  canvasHeight: DEFAULT_CANVAS_HEIGHT,
   textPosX: "center",
   textPosY: "middle",
   wrapText: true,
@@ -2390,48 +2527,8 @@ async function initializeFontSystem() {
   }
 }
 function checkFontVariant(variantName) {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return false;
-  ctx.font = `16px "${variantName}"`;
-  const metrics = ctx.measureText("Test");
-  return metrics.width > 0;
-}
-
-// src/engine/schema.ts
-var SCENE_VERSION = 1;
-var CUSTOM_ENGINE_IDS = ["ink"];
-var LEGACY_RENDERER_MAP = {
-  InkBrushEngine: "ink"
-};
-var ENGINE_ID_TO_LEGACY = {
-  ink: "InkBrushEngine"
-};
-function createEmptyScene(overrides) {
-  return {
-    version: SCENE_VERSION,
-    effectName: "My Effect",
-    canvas: { width: 800, height: 200, background: "transparent" },
-    text: {
-      content: "CLYPRA",
-      fontFamily: "Poppins",
-      fontWeight: 700,
-      fontStyle: "normal",
-      fontSize: 80,
-      letterSpacing: 4,
-      lineHeight: 1.2,
-      textPosX: "center",
-      textPosY: "middle"
-    },
-    effectLayers: [],
-    customEngineId: null,
-    compositor: { blur: 0, bloom: 0, bloomThreshold: 0.6 },
-    timeline: { duration: 2, fps: 30, loop: true, tracks: [] },
-    ...overrides
-  };
-}
-function newLayerId() {
-  return `layer-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+  if (typeof document === "undefined" || !document.fonts) return false;
+  return document.fonts.check(`16px "${variantName}"`);
 }
 
 // src/engine/timelineDefaults.ts
@@ -3089,11 +3186,15 @@ function getCompositor() {
   }
   return sharedCompositor;
 }
+function disposeSharedCompositor() {
+  sharedCompositor?.dispose();
+  sharedCompositor = null;
+}
 function evaluateScene(doc, time, ctx, options = {}) {
   const animated = applyTimelineAtTime(doc, time);
   const cfg = sceneToConfig(animated);
-  const w = cfg.canvasWidth || 800;
-  const h = cfg.canvasHeight || 200;
+  const w = cfg.canvasWidth || DEFAULT_CANVAS_WIDTH;
+  const h = cfg.canvasHeight || DEFAULT_CANVAS_HEIGHT;
   const filterLayers = animated.effectLayers.filter((l) => l.type === "filter" && l.enabled);
   const lastFilter = filterLayers[filterLayers.length - 1]?.params;
   const comp = {
@@ -3109,8 +3210,8 @@ function evaluateScene(doc, time, ctx, options = {}) {
     finishFrame();
     return;
   }
-  const off = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(w, h) : null;
-  if (off) {
+  if (supportsOffscreenCanvas()) {
+    const off = new OffscreenCanvas(w, h);
     const offCtx = off.getContext("2d");
     if (!offCtx) {
       renderTextEffectCore(ctx, cfg);
@@ -3139,10 +3240,14 @@ function evaluateScene(doc, time, ctx, options = {}) {
       const compositor = options.compositor ?? getCompositor();
       if (compositor?.isSupported) {
         compositor.renderToContext(ctx, temp, comp);
+        temp.width = 0;
+        temp.height = 0;
         return;
       }
       ctx.clearRect(0, 0, w, h);
       ctx.drawImage(temp, 0, 0);
+      temp.width = 0;
+      temp.height = 0;
       return;
     }
   }
@@ -3153,9 +3258,9 @@ function evaluateConfig(cfg, time, ctx, options) {
   evaluateScene(textEffectConfigToScene(cfg), time, ctx, options);
 }
 function advanceSceneTime(doc, steps) {
-  const dt = 1 / (doc.timeline.fps || 30);
+  const dt = 1 / (doc.timeline.fps || DEFAULT_FPS);
   const next = doc._time ?? 0;
-  const duration = doc.timeline.duration || 2;
+  const duration = doc.timeline.duration || DEFAULT_DURATION;
   let t = next + steps * dt;
   if (doc.timeline.loop) {
     t = duration > 0 ? t % duration : t;
@@ -6113,6 +6218,11 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
 0 && (module.exports = {
   COMPOSITION_PRESETS,
   CUSTOM_ENGINE_IDS,
+  DEFAULT_CANVAS_HEIGHT,
+  DEFAULT_CANVAS_WIDTH,
+  DEFAULT_DURATION,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_FPS,
   DEFAULT_TEXT_STYLE,
   EMPHASIS_PRESETS,
   ENGINE_ID_TO_LEGACY,
@@ -6130,6 +6240,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor,
+  _resetPlatformCache,
   addImageLayer,
   addKeyframeAtTime,
   addOrUpdateKeyframe,
@@ -6141,6 +6252,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   advanceSceneTime,
   alignToLottieJ,
   applyFillColorToAll,
+  applyLetterSpacing,
   applyMaskReveal,
   applyRecipeToScene,
   applyStyleToLottie,
@@ -6166,16 +6278,19 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   computeTextLayout,
   countTextGlyphs,
   createBlankLottie,
+  createCanvas,
   createDefaultRevealTrack,
   createEmptyScene,
   createPulseOpacityTrack,
   defaultConfig,
   deleteKeyframe,
+  disposeSharedCompositor,
   downloadDotLottie,
   downloadLottieJson,
   downloadPngSequenceZip,
   downloadSceneWebM,
   drawPerCharText,
+  drawRoundedRect,
   duplicateTrackAtPlayhead,
   ease,
   enableKeyframing,
@@ -6223,6 +6338,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   readLayerScalar,
   readStyleFromLottieLayer,
   reindexLayers,
+  releaseCanvas,
   removeKeyframe,
   removeTrack,
   renderPngSequence,
@@ -6232,6 +6348,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   resizeCharFillColors,
   resolveAnimatedScalar,
   resolveCustomEngineId,
+  restoreLetterSpacing,
   scanLottieFonts,
   scanTextLayers,
   sceneToConfig,
@@ -6241,6 +6358,11 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
   shouldUsePerCharFill,
   snapshotScene,
   sortKeyframes,
+  supportsCtxFilter,
+  supportsLetterSpacing,
+  supportsOffscreenCanvas,
+  supportsRoundRect,
+  supportsWebGL2,
   syncCompositorFromScene,
   textEffectConfigToScene,
   trackId,