@clypra/engine 1.0.1 → 1.1.0

package/dist/index.js

@@ -1,3 +1,44 @@
+// 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" },
@@ -17,8 +58,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 {
@@ -65,8 +106,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;
@@ -122,7 +163,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;
@@ -242,29 +283,112 @@ 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;
+  if (typeof document !== "undefined" && canvas.parentNode) {
+    canvas.parentNode.removeChild(canvas);
+  }
+}
+function _resetPlatformCache() {
+  _ctxFilter = null;
+  _roundRect = null;
+  _letterSpacing = null;
+  _offscreenCanvas = null;
+  _webgl2 = null;
+}
+
+// src/engine/procedural/utils.ts
 function getCanvas2DContext(canvas) {
   return canvas.getContext("2d");
 }
@@ -365,8 +489,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",
@@ -621,42 +745,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);
@@ -666,8 +787,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
@@ -879,7 +1000,7 @@ function renderTextEffectCore(ctx, cfg) {
         }
       }
     } else {
-      ctx.roundRect(px, py, pw, ph, panelRadius);
+      drawRoundedRect(ctx, px, py, pw, ph, panelRadius);
     }
     ctx.closePath();
     ctx.fill();
@@ -942,9 +1063,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) {
@@ -985,7 +1106,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;
@@ -1078,7 +1199,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)`);
@@ -1188,7 +1309,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;
@@ -1622,7 +1743,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);
@@ -1751,7 +1872,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);
@@ -1822,7 +1943,7 @@ var defaultConfig = {
   fontFamily: "Poppins",
   fontWeight: 700,
   fontStyle: "normal",
-  fontSize: 80,
+  fontSize: DEFAULT_FONT_SIZE,
   letterSpacing: 4,
   lineHeight: 1.2,
   fillType: "solid",
@@ -1882,8 +2003,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,
@@ -2233,42 +2354,6 @@ function checkFontVariant(variantName) {
   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)}`;
-}
-
 // src/engine/timelineDefaults.ts
 function ensureDefaultTimeline(doc) {
   if (doc.timeline.tracks.length > 0) return doc;
@@ -2927,8 +3012,8 @@ function getCompositor() {
 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 = {
@@ -2944,8 +3029,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);
@@ -2974,10 +3059,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;
     }
   }
@@ -2988,9 +3077,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;
@@ -5947,6 +6036,11 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
 export {
   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,
@@ -5964,6 +6058,7 @@ export {
   TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor,
+  _resetPlatformCache,
   addImageLayer,
   addKeyframeAtTime,
   addOrUpdateKeyframe,
@@ -5975,6 +6070,7 @@ export {
   advanceSceneTime,
   alignToLottieJ,
   applyFillColorToAll,
+  applyLetterSpacing,
   applyMaskReveal,
   applyRecipeToScene,
   applyStyleToLottie,
@@ -6000,6 +6096,7 @@ export {
   computeTextLayout,
   countTextGlyphs,
   createBlankLottie,
+  createCanvas,
   createDefaultRevealTrack,
   createEmptyScene,
   createPulseOpacityTrack,
@@ -6010,6 +6107,7 @@ export {
   downloadPngSequenceZip,
   downloadSceneWebM,
   drawPerCharText,
+  drawRoundedRect,
   duplicateTrackAtPlayhead,
   ease,
   enableKeyframing,
@@ -6057,6 +6155,7 @@ export {
   readLayerScalar,
   readStyleFromLottieLayer,
   reindexLayers,
+  releaseCanvas,
   removeKeyframe,
   removeTrack,
   renderPngSequence,
@@ -6066,6 +6165,7 @@ export {
   resizeCharFillColors,
   resolveAnimatedScalar,
   resolveCustomEngineId,
+  restoreLetterSpacing,
   scanLottieFonts,
   scanTextLayers,
   sceneToConfig,
@@ -6075,6 +6175,11 @@ export {
   shouldUsePerCharFill,
   snapshotScene,
   sortKeyframes,
+  supportsCtxFilter,
+  supportsLetterSpacing,
+  supportsOffscreenCanvas,
+  supportsRoundRect,
+  supportsWebGL2,
   syncCompositorFromScene,
   textEffectConfigToScene,
   trackId,