@shotstack/shotstack-canvas 2.1.5 → 2.1.7

package/dist/entry.web.d.ts

@@ -271,11 +271,6 @@ declare const richCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
         wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
@@ -356,39 +351,38 @@ declare const richCaptionAssetSchema: z.ZodObject<{
                 "line-through": "line-through";
             }>>;
         }, z.core.$strip>>;
-        stroke: z.ZodOptional<z.ZodObject<{
+        stroke: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             width: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
-        shadow: z.ZodOptional<z.ZodObject<{
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
+        shadow: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             offsetX: z.ZodOptional<z.ZodNumber>;
             offsetY: z.ZodOptional<z.ZodNumber>;
             blur: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
         scale: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
     wordAnimation: z.ZodOptional<z.ZodObject<{
         style: z.ZodDefault<z.ZodEnum<{
             typewriter: "typewriter";
             none: "none";
+            pop: "pop";
             karaoke: "karaoke";
             highlight: "highlight";
-            pop: "pop";
             fade: "fade";
             slide: "slide";
             bounce: "bounce";
         }>>;
-        speed: z.ZodDefault<z.ZodNumber>;
         direction: z.ZodDefault<z.ZodEnum<{
             right: "right";
             left: "left";
             up: "up";
             down: "down";
         }>>;
-    }, z.core.$strict>>;
+    }, z.core.$strip>>;
     pauseThreshold: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
@@ -414,11 +408,6 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
         color: z.ZodDefault<z.ZodString>;
         opacity: z.ZodDefault<z.ZodNumber>;
         background: z.ZodOptional<z.ZodString>;
-        textDecoration: z.ZodDefault<z.ZodEnum<{
-            none: "none";
-            underline: "underline";
-            "line-through": "line-through";
-        }>>;
     }, z.core.$strip>>;
     style: z.ZodOptional<z.ZodObject<{
         wordSpacing: z.ZodDefault<z.ZodOptional<z.ZodUnion<readonly [z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodNumber>, z.ZodString]>>>;
@@ -499,39 +488,38 @@ declare const CanvasRichCaptionAssetSchema: z.ZodObject<{
                 "line-through": "line-through";
             }>>;
         }, z.core.$strip>>;
-        stroke: z.ZodOptional<z.ZodObject<{
+        stroke: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             width: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
-        shadow: z.ZodOptional<z.ZodObject<{
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
+        shadow: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             offsetX: z.ZodOptional<z.ZodNumber>;
             offsetY: z.ZodOptional<z.ZodNumber>;
             blur: z.ZodOptional<z.ZodNumber>;
             color: z.ZodOptional<z.ZodString>;
             opacity: z.ZodOptional<z.ZodNumber>;
-        }, z.core.$strip>>;
+        }, z.core.$strip>, z.ZodLiteral<"none">]>>;
         scale: z.ZodDefault<z.ZodNumber>;
     }, z.core.$strict>>;
     wordAnimation: z.ZodOptional<z.ZodObject<{
         style: z.ZodDefault<z.ZodEnum<{
             typewriter: "typewriter";
             none: "none";
+            pop: "pop";
             karaoke: "karaoke";
             highlight: "highlight";
-            pop: "pop";
             fade: "fade";
             slide: "slide";
             bounce: "bounce";
         }>>;
-        speed: z.ZodDefault<z.ZodNumber>;
         direction: z.ZodDefault<z.ZodEnum<{
             right: "right";
             left: "left";
             up: "up";
             down: "down";
         }>>;
-    }, z.core.$strict>>;
+    }, z.core.$strip>>;
     pauseThreshold: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
     customFonts: z.ZodOptional<z.ZodArray<z.ZodObject<{
         src: z.ZodString;
@@ -663,7 +651,6 @@ interface CaptionLayoutConfig {
     fontFamily: string;
     fontWeight: string | number;
     letterSpacing: number;
-    wordSpacing: number;
     lineHeight: number;
     textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
     pauseThreshold: number;
@@ -745,7 +732,6 @@ type AnimationStyle = "karaoke" | "highlight" | "pop" | "fade" | "slide" | "boun
 type AnimationDirection = "left" | "right" | "up" | "down";
 interface WordAnimationConfig {
     style: AnimationStyle;
-    speed: number;
     direction: AnimationDirection;
 }
 interface WordAnimationState {
@@ -1163,7 +1149,7 @@ interface FrameSchedule {
     uniqueFrameCount: number;
     skipRatio: number;
 }
-declare function createFrameSchedule(layout: CaptionLayout, durationMs: number, fps: number, animationStyle?: AnimationStyle, speed?: number): FrameSchedule;
+declare function createFrameSchedule(layout: CaptionLayout, durationMs: number, fps: number, animationStyle?: AnimationStyle): FrameSchedule;
 
 interface RichCaptionRendererOptions {
     width: number;

package/dist/entry.web.js

@@ -17896,8 +17896,7 @@ import {
   svgShadowSchema,
   svgTransformSchema,
   svgGradientStopSchema,
-  richCaptionActiveSchema as baseCaptionActiveSchema,
-  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema
+  richCaptionActiveSchema as baseCaptionActiveSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -18066,8 +18065,7 @@ var richCaptionFontSchema = external_exports.object({
   weight: external_exports.union([external_exports.string(), external_exports.number()]).default("400"),
   color: external_exports.string().regex(HEX6).default("#ffffff"),
   opacity: external_exports.number().min(0).max(1).default(1),
-  background: external_exports.string().regex(HEX6).optional(),
-  textDecoration: external_exports.enum(["none", "underline", "line-through"]).default("none")
+  background: external_exports.string().regex(HEX6).optional()
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: external_exports.object({
@@ -18076,23 +18074,28 @@ var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
     opacity: external_exports.number().min(0).max(1).optional(),
     textDecoration: external_exports.enum(["none", "underline", "line-through"]).optional()
   }).optional(),
-  stroke: external_exports.object({
-    width: external_exports.number().min(0).optional(),
-    color: external_exports.string().regex(HEX6).optional(),
-    opacity: external_exports.number().min(0).max(1).optional()
-  }).optional(),
-  shadow: external_exports.object({
-    offsetX: external_exports.number().optional(),
-    offsetY: external_exports.number().optional(),
-    blur: external_exports.number().min(0).optional(),
-    color: external_exports.string().regex(HEX6).optional(),
-    opacity: external_exports.number().min(0).max(1).optional()
-  }).optional(),
+  stroke: external_exports.union([
+    external_exports.object({
+      width: external_exports.number().min(0).optional(),
+      color: external_exports.string().regex(HEX6).optional(),
+      opacity: external_exports.number().min(0).max(1).optional()
+    }),
+    external_exports.literal("none")
+  ]).optional(),
+  shadow: external_exports.union([
+    external_exports.object({
+      offsetX: external_exports.number().optional(),
+      offsetY: external_exports.number().optional(),
+      blur: external_exports.number().min(0).optional(),
+      color: external_exports.string().regex(HEX6).optional(),
+      opacity: external_exports.number().min(0).max(1).optional()
+    }),
+    external_exports.literal("none")
+  ]).optional(),
   scale: external_exports.number().min(0.5).max(2).default(1)
 });
-var richCaptionWordAnimationSchema = baseCaptionWordAnimationSchema.extend({
+var richCaptionWordAnimationSchema = external_exports.object({
   style: external_exports.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
-  speed: external_exports.number().min(0.5).max(2).default(1),
   direction: external_exports.enum(["left", "right", "up", "down"]).default("up")
 });
 var richCaptionAssetSchema = external_exports.object({
@@ -33166,7 +33169,7 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
+      const { textTransform, desc, fontSize, letterSpacing, wordSpacing = 0, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
@@ -33196,9 +33199,10 @@ var LayoutEngine = class {
             char = String.fromCodePoint(codePoint);
           }
         }
+        const isSpace = char === " ";
         return {
           id: g.g,
-          xAdvance: g.ax * scale + letterSpacing,
+          xAdvance: g.ax * scale + letterSpacing + (isSpace ? wordSpacing : 0),
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
@@ -35033,10 +35037,10 @@ var CaptionLayoutEngine = class {
     let spaceWidth;
     if (config2.measureTextWidth) {
       const fontString = `${config2.fontWeight} ${config2.fontSize}px "${config2.fontFamily}"`;
-      spaceWidth = config2.measureTextWidth(" ", fontString) + config2.wordSpacing;
+      spaceWidth = config2.measureTextWidth(" ", fontString);
     } else {
       const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config2.wordSpacing;
+      spaceWidth = spaceWord.width;
     }
     const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
@@ -35235,12 +35239,8 @@ function calculateWordProgress(ctx) {
 function isWordActive(ctx) {
   return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
 }
-function calculateKaraokeState(ctx, speed) {
+function calculateKaraokeState(ctx) {
   const isActive = isWordActive(ctx);
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
   if (ctx.currentTime < ctx.wordStart) {
     return {
       fillProgress: 0,
@@ -35248,7 +35248,7 @@ function calculateKaraokeState(ctx, speed) {
       opacity: 1
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       fillProgress: 1,
       isActive: false,
@@ -35256,7 +35256,7 @@ function calculateKaraokeState(ctx, speed) {
     };
   }
   return {
-    fillProgress: calculateWordProgress(adjustedCtx),
+    fillProgress: calculateWordProgress(ctx),
     isActive,
     opacity: 1
   };
@@ -35269,7 +35269,7 @@ function calculateHighlightState(ctx) {
     opacity: 1
   };
 }
-function calculatePopState(ctx, activeScale, speed) {
+function calculatePopState(ctx, activeScale) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       scale: 0.5,
@@ -35278,9 +35278,7 @@ function calculatePopState(ctx, activeScale, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
   const isActive = isWordActive(ctx);
@@ -35293,7 +35291,7 @@ function calculatePopState(ctx, activeScale, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateFadeState(ctx, speed) {
+function calculateFadeState(ctx) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
@@ -35301,9 +35299,7 @@ function calculateFadeState(ctx, speed) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeInOutQuad(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -35312,7 +35308,7 @@ function calculateFadeState(ctx, speed) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateSlideState(ctx, direction, speed, fontSize) {
+function calculateSlideState(ctx, direction, fontSize) {
   const slideDistance = fontSize * 1.5;
   if (ctx.currentTime < ctx.wordStart) {
     const offset2 = getDirectionOffset(direction, slideDistance);
@@ -35324,9 +35320,7 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutCirc(progress);
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
@@ -35352,7 +35346,7 @@ function getDirectionOffset(direction, distance) {
       return { x: 0, y: -distance };
   }
 }
-function calculateBounceState(ctx, speed, fontSize) {
+function calculateBounceState(ctx, fontSize) {
   const bounceDistance = fontSize * 0.8;
   if (ctx.currentTime < ctx.wordStart) {
     return {
@@ -35362,9 +35356,7 @@ function calculateBounceState(ctx, speed, fontSize) {
       fillProgress: 0
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
+  const progress = calculateAnimationProgress(ctx);
   const easedProgress = easeOutBounce(progress);
   const isActive = isWordActive(ctx);
   return {
@@ -35374,11 +35366,7 @@ function calculateBounceState(ctx, speed, fontSize) {
     fillProgress: isActive ? 1 : 0
   };
 }
-function calculateTypewriterState(ctx, charCount, speed) {
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
+function calculateTypewriterState(ctx, charCount) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       visibleCharacters: 0,
@@ -35387,7 +35375,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  if (ctx.currentTime >= ctx.wordEnd) {
     return {
       visibleCharacters: charCount,
       opacity: 1,
@@ -35395,7 +35383,7 @@ function calculateTypewriterState(ctx, charCount, speed) {
       fillProgress: 0
     };
   }
-  const progress = calculateWordProgress(adjustedCtx);
+  const progress = calculateWordProgress(ctx);
   const visibleCharacters = Math.ceil(progress * charCount);
   const isActive = isWordActive(ctx);
   return {
@@ -35413,7 +35401,6 @@ function calculateNoneState(_ctx) {
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
-  const safeSpeed = config2.speed > 0 ? config2.speed : 1;
   const ctx = {
     wordStart,
     wordEnd,
@@ -35424,27 +35411,27 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, a
   let partialState;
   switch (config2.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, safeSpeed);
+      partialState = calculateKaraokeState(ctx);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, safeSpeed);
+      partialState = calculatePopState(ctx, activeScale);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, safeSpeed);
+      partialState = calculateFadeState(ctx);
       break;
     case "slide": {
       const slideDir = mirrorAnimationDirection(config2.direction, isRTL);
-      partialState = calculateSlideState(ctx, slideDir, config2.speed, fontSize);
+      partialState = calculateSlideState(ctx, slideDir, fontSize);
       break;
     }
     case "bounce":
-      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
+      partialState = calculateBounceState(ctx, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
+      partialState = calculateTypewriterState(ctx, charCount);
       break;
     case "none":
     default:
@@ -35477,7 +35464,6 @@ function calculateAnimationStatesForGroup(words, currentTime, config2, activeSca
 function getDefaultAnimationConfig() {
   return {
     style: "highlight",
-    speed: 1,
     direction: "up"
   };
 }
@@ -35518,18 +35504,17 @@ function extractFontConfig(asset) {
 function extractStrokeConfig(asset, isActive) {
   const baseStroke = asset.stroke;
   const activeStroke = asset.active?.stroke;
-  if (!baseStroke && !activeStroke) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeStroke) {
+    if (activeStroke === "none") {
       return void 0;
     }
-    return {
-      width: activeStroke.width ?? baseStroke?.width ?? 0,
-      color: activeStroke.color ?? baseStroke?.color ?? "#000000",
-      opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
-    };
+    if (activeStroke && typeof activeStroke === "object") {
+      return {
+        width: activeStroke.width ?? baseStroke?.width ?? 0,
+        color: activeStroke.color ?? baseStroke?.color ?? "#000000",
+        opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
+      };
+    }
   }
   if (baseStroke) {
     return {
@@ -35543,20 +35528,19 @@ function extractStrokeConfig(asset, isActive) {
 function extractShadowConfig(asset, isActive) {
   const baseShadow = asset.shadow;
   const activeShadow = asset.active?.shadow;
-  if (!baseShadow && !activeShadow) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeShadow) {
+    if (activeShadow === "none") {
       return void 0;
     }
-    return {
-      offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
-      offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
-      blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
-      color: activeShadow.color ?? baseShadow?.color ?? "#000000",
-      opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
-    };
+    if (activeShadow && typeof activeShadow === "object") {
+      return {
+        offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
+        offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
+        blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
+        color: activeShadow.color ?? baseShadow?.color ?? "#000000",
+        opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
+      };
+    }
   }
   if (baseShadow) {
     return {
@@ -35572,7 +35556,12 @@ function extractShadowConfig(asset, isActive) {
 function extractBackgroundConfig(asset, isActive, fontSize) {
   const fontBackground = asset.font?.background;
   const activeBackground = asset.active?.font?.background;
-  const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
+  let bgColor;
+  if (isActive) {
+    bgColor = activeBackground ?? fontBackground;
+  } else {
+    bgColor = fontBackground;
+  }
   if (!bgColor) {
     return void 0;
   }
@@ -35623,7 +35612,7 @@ function extractCaptionBorder(asset) {
   };
 }
 function extractTextDecoration(asset, isActive) {
-  const baseDecoration = asset.font?.textDecoration;
+  const baseDecoration = asset.style?.textDecoration;
   const activeDecoration = asset.active?.font?.textDecoration;
   if (isActive && activeDecoration !== void 0) {
     return activeDecoration === "none" ? void 0 : activeDecoration;
@@ -35640,7 +35629,6 @@ function extractAnimationConfig(asset) {
   }
   return {
     style: wordAnim.style ?? "highlight",
-    speed: wordAnim.speed ?? 1,
     direction: wordAnim.direction ?? "up"
   };
 }
@@ -37849,7 +37837,7 @@ function findActiveWordIndex(store, groupWordIndices, timeMs) {
   }
   return -1;
 }
-function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
+function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle) {
   if (groupWordIndices.length === 0) {
     return "idle";
   }
@@ -37866,7 +37854,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
     return "after";
   }
   if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
-    const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
+    const transitionDurationMs = ANIMATION_DURATION_MS[animationStyle] ?? 200;
     for (const idx of groupWordIndices) {
       const wordStart = store.startTimes[idx];
       if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
@@ -37888,7 +37876,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
   }
   return "before";
 }
-function computeStateSignature(layout, timeMs, animationStyle, speed) {
+function computeStateSignature(layout, timeMs, animationStyle) {
   const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
   if (groupIndex === -1) {
     return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
@@ -37899,21 +37887,20 @@ function computeStateSignature(layout, timeMs, animationStyle, speed) {
     layout.store,
     group.wordIndices,
     timeMs,
-    animationStyle,
-    speed
+    animationStyle
   );
   return { groupIndex, activeWordIndex, animationPhase };
 }
 function signaturesMatch(a, b) {
   return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
 }
-function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
+function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight") {
   const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
   const renderFrames = [];
   let previousSignature = null;
   for (let frame = 0; frame < totalFrames; frame++) {
     const timeMs = frame / (totalFrames - 1) * durationMs;
-    const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
+    const signature = computeStateSignature(layout, timeMs, animationStyle);
     const isAnimating = signature.animationPhase === "animating";
     if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
       renderFrames.push({
@@ -38128,6 +38115,7 @@ async function createTextEngine(opts = {}) {
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
+            wordSpacing: typeof asset.style?.wordSpacing === "number" ? asset.style.wordSpacing : 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
     "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "1.9.0",
+    "@shotstack/schemas": "1.9.2",
     "bidi-js": "^1.0.3",
     "canvas": "npm:@napi-rs/canvas@^0.1.54",
     "ffmpeg-static": "^5.2.0",