@meframe/core 0.0.29 → 0.0.30-beta

package/dist/stages/compose/text-renderers/basic-text-renderer.js

@@ -0,0 +1,93 @@
+import { formEvenLinesWithWords, wrapText } from "../text-utils/text-wrapper.js";
+import { getLetterCaseText } from "../text-utils/text-metrics.js";
+import { interpolate, springEasing } from "./animation-utils.js";
+import { needsSpaceBetweenWords } from "../text-utils/locale-detector.js";
+function calculateYPosition(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderBasicText(ctx, layer, canvasWidth, canvasHeight, _relativeFrame) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  let lines;
+  if (layer.wordTimings && layer.wordTimings.length > 0) {
+    const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+    const words = text.split(needsSpace ? /\s+/ : "");
+    lines = formEvenLinesWithWords(
+      ctx,
+      words,
+      maxWidth,
+      fontSize,
+      needsSpace,
+      fontFamily,
+      fontWeight
+    );
+  } else {
+    lines = wrapText(ctx, text, maxWidth, fontSize, fontFamily, fontWeight);
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const y = startY + i * fontSize * lineHeight + fontSize / 2;
+    if (stroke && strokeWidth > 0) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(line, canvasWidth / 2, y);
+    }
+    ctx.fillStyle = fill;
+    ctx.fillText(line, canvasWidth / 2, y);
+  }
+  ctx.restore();
+}
+function renderTextWithEntrance(ctx, layer, canvasWidth, canvasHeight, relativeFrame) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const entrance = springEasing(relativeFrame, {
+    damping: 200,
+    mass: 1,
+    stiffness: 300
+  });
+  const opacity = interpolate(entrance, [0, 1], [0, 1]);
+  const scale = interpolate(entrance, [0, 1], [0.9, 1]);
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.translate(canvasWidth / 2, canvasHeight / 2);
+  ctx.scale(scale, scale);
+  ctx.translate(-canvasWidth / 2, -canvasHeight / 2);
+  renderBasicText(ctx, layer, canvasWidth, canvasHeight);
+  ctx.restore();
+}
+export {
+  renderBasicText,
+  renderTextWithEntrance
+};
+//# sourceMappingURL=basic-text-renderer.js.map

package/dist/stages/compose/text-renderers/basic-text-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-text-renderer.js","sources":["../../../../src/stages/compose/text-renderers/basic-text-renderer.ts"],"sourcesContent":["import type { TextLayer } from '../types';\nimport { wrapText, formEvenLinesWithWords } from '../text-utils/text-wrapper';\nimport { getLetterCaseText } from '../text-utils/text-metrics';\nimport { springEasing, interpolate } from './animation-utils';\nimport { needsSpaceBetweenWords } from '../text-utils/locale-detector';\n\nfunction calculateYPosition(\n  canvasHeight: number,\n  totalHeight: number,\n  globalPosition?: {\n    position?: 'absolute';\n    top?: string;\n    bottom?: string;\n    left?: string;\n    right?: string;\n    display?: string;\n    alignItems?: string;\n    justifyContent?: string;\n  }\n): number {\n  if (!globalPosition) {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  // Handle percentage-based positioning\n  if (globalPosition.top) {\n    const topPercent = parseFloat(globalPosition.top) / 100;\n    return canvasHeight * topPercent;\n  }\n\n  if (globalPosition.bottom) {\n    const bottomPercent = parseFloat(globalPosition.bottom) / 100;\n    return canvasHeight * (1 - bottomPercent) - totalHeight;\n  }\n\n  // Handle center alignment\n  if (globalPosition.justifyContent === 'center' || globalPosition.alignItems === 'center') {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  // Default to center\n  return canvasHeight / 2 - totalHeight / 2;\n}\n\nexport function renderBasicText(\n  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n  layer: TextLayer,\n  canvasWidth: number,\n  canvasHeight: number,\n  _relativeFrame: number\n): void {\n  const fontConfig = layer.fontConfig?.textStyle;\n  if (!fontConfig) return;\n\n  const fontSize = fontConfig.fontSize;\n  const fontFamily = fontConfig.fontFamily;\n  const fontWeight = fontConfig.fontWeight;\n  const fill = fontConfig.fill;\n  const stroke = fontConfig.stroke;\n  const strokeWidth = fontConfig.strokeWidth || 0;\n  const lineHeight = fontConfig.lineHeight || 1.2;\n\n  const maxWidth = canvasWidth * 0.64;\n  const text = getLetterCaseText(layer.text, layer.letterCase);\n\n  let lines: string[];\n  if (layer.wordTimings && layer.wordTimings.length > 0) {\n    const needsSpace = needsSpaceBetweenWords(layer.localeCode || 'en-US', text);\n    const words = text.split(needsSpace ? /\\s+/ : '');\n    lines = formEvenLinesWithWords(\n      ctx,\n      words,\n      maxWidth,\n      fontSize,\n      needsSpace,\n      fontFamily,\n      fontWeight\n    );\n  } else {\n    lines = wrapText(ctx, text, maxWidth, fontSize, fontFamily, fontWeight);\n  }\n\n  ctx.save();\n  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.lineJoin = 'round';\n  ctx.lineCap = 'round';\n\n  const totalHeight = lines.length * fontSize * lineHeight;\n  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);\n\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i]!;\n    const y = startY + i * fontSize * lineHeight + fontSize / 2;\n\n    if (stroke && strokeWidth > 0) {\n      ctx.strokeStyle = stroke;\n      ctx.lineWidth = strokeWidth;\n      ctx.strokeText(line, canvasWidth / 2, y);\n    }\n    ctx.fillStyle = fill;\n    ctx.fillText(line, canvasWidth / 2, y);\n  }\n\n  ctx.restore();\n}\n\nexport function renderTextWithEntrance(\n  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n  layer: TextLayer,\n  canvasWidth: number,\n  canvasHeight: number,\n  relativeFrame: number\n): void {\n  const fontConfig = layer.fontConfig?.textStyle;\n  if (!fontConfig) return;\n\n  const entrance = springEasing(relativeFrame, {\n    damping: 200,\n    mass: 1,\n    stiffness: 300,\n  });\n\n  const opacity = interpolate(entrance, [0, 1], [0, 1]);\n  const scale = interpolate(entrance, [0, 1], [0.9, 1]);\n\n  ctx.save();\n  ctx.globalAlpha = opacity;\n  ctx.translate(canvasWidth / 2, canvasHeight / 2);\n  ctx.scale(scale, scale);\n  ctx.translate(-canvasWidth / 2, -canvasHeight / 2);\n\n  renderBasicText(ctx, layer, canvasWidth, canvasHeight, relativeFrame);\n\n  ctx.restore();\n}\n"],"names":[],"mappings":";;;;AAMA,SAAS,mBACP,cACA,aACA,gBAUQ;AACR,MAAI,CAAC,gBAAgB;AACnB,WAAO,eAAe,IAAI,cAAc;AAAA,EAC1C;AAGA,MAAI,eAAe,KAAK;AACtB,UAAM,aAAa,WAAW,eAAe,GAAG,IAAI;AACpD,WAAO,eAAe;AAAA,EACxB;AAEA,MAAI,eAAe,QAAQ;AACzB,UAAM,gBAAgB,WAAW,eAAe,MAAM,IAAI;AAC1D,WAAO,gBAAgB,IAAI,iBAAiB;AAAA,EAC9C;AAGA,MAAI,eAAe,mBAAmB,YAAY,eAAe,eAAe,UAAU;AACxF,WAAO,eAAe,IAAI,cAAc;AAAA,EAC1C;AAGA,SAAO,eAAe,IAAI,cAAc;AAC1C;AAEO,SAAS,gBACd,KACA,OACA,aACA,cACA,gBACM;AACN,QAAM,aAAa,MAAM,YAAY;AACrC,MAAI,CAAC,WAAY;AAEjB,QAAM,WAAW,WAAW;AAC5B,QAAM,aAAa,WAAW;AAC9B,QAAM,aAAa,WAAW;AAC9B,QAAM,OAAO,WAAW;AACxB,QAAM,SAAS,WAAW;AAC1B,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,aAAa,WAAW,cAAc;AAE5C,QAAM,WAAW,cAAc;AAC/B,QAAM,OAAO,kBAAkB,MAAM,MAAM,MAAM,UAAU;AAE3D,MAAI;AACJ,MAAI,MAAM,eAAe,MAAM,YAAY,SAAS,GAAG;AACrD,UAAM,aAAa,uBAAuB,MAAM,cAAc,SAAS,IAAI;AAC3E,UAAM,QAAQ,KAAK,MAAM,aAAa,QAAQ,EAAE;AAChD,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,OAAO;AACL,YAAQ,SAAS,KAAK,MAAM,UAAU,UAAU,YAAY,UAAU;AAAA,EACxE;AAEA,MAAI,KAAA;AACJ,MAAI,OAAO,GAAG,UAAU,IAAI,QAAQ,MAAM,UAAU;AACpD,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,WAAW;AACf,MAAI,UAAU;AAEd,QAAM,cAAc,MAAM,SAAS,WAAW;AAC9C,QAAM,SAAS,mBAAmB,cAAc,aAAa,MAAM,YAAY,cAAc;AAE7F,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,OAAO,MAAM,CAAC;AACpB,UAAM,IAAI,SAAS,IAAI,WAAW,aAAa,WAAW;AAE1D,QAAI,UAAU,cAAc,GAAG;AAC7B,UAAI,cAAc;AAClB,UAAI,YAAY;AAChB,UAAI,WAAW,MAAM,cAAc,GAAG,CAAC;AAAA,IACzC;AACA,QAAI,YAAY;AAChB,QAAI,SAAS,MAAM,cAAc,GAAG,CAAC;AAAA,EACvC;AAEA,MAAI,QAAA;AACN;AAEO,SAAS,uBACd,KACA,OACA,aACA,cACA,eACM;AACN,QAAM,aAAa,MAAM,YAAY;AACrC,MAAI,CAAC,WAAY;AAEjB,QAAM,WAAW,aAAa,eAAe;AAAA,IAC3C,SAAS;AAAA,IACT,MAAM;AAAA,IACN,WAAW;AAAA,EAAA,CACZ;AAED,QAAM,UAAU,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACpD,QAAM,QAAQ,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAEpD,MAAI,KAAA;AACJ,MAAI,cAAc;AAClB,MAAI,UAAU,cAAc,GAAG,eAAe,CAAC;AAC/C,MAAI,MAAM,OAAO,KAAK;AACtB,MAAI,UAAU,CAAC,cAAc,GAAG,CAAC,eAAe,CAAC;AAEjD,kBAAgB,KAAK,OAAO,aAAa,YAA2B;AAEpE,MAAI,QAAA;AACN;"}

package/dist/stages/compose/text-renderers/character-ktv-renderer.d.ts

@@ -1,4 +1,4 @@
 import { TextLayer } from '../types';
 
-export declare function renderCharacterKTV(ctx: OffscreenCanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
+export declare function renderCharacterKTV(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
 //# sourceMappingURL=character-ktv-renderer.d.ts.map

package/dist/stages/compose/text-renderers/character-ktv-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"character-ktv-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/character-ktv-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkD1C,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CA+HN"}
+{"version":3,"file":"character-ktv-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/character-ktv-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkD1C,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CA+HN"}

package/dist/stages/compose/text-renderers/character-ktv-renderer.js

@@ -0,0 +1,132 @@
+import { wrapText } from "../text-utils/text-wrapper.js";
+import { getLetterCaseText, measureTextWidth } from "../text-utils/text-metrics.js";
+import { needsSpaceBetweenWords } from "../text-utils/locale-detector.js";
+function usToFrame(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderCharacterKTV(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const baseFill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightFill = layer.animation?.highlightTextStyle?.fill || "rgb(255, 215, 0)";
+  const glowColor = layer.animation?.glowColor || "#ffffff";
+  const glowIntensity = layer.animation?.glowIntensity || 3;
+  const transitionFrames = layer.animation?.transitionFrames || 10;
+  const maxWidth = canvasWidth * 0.9;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const characterTimings = [];
+  if (layer.wordTimings && layer.wordTimings.length > 0) {
+    let charIndex = 0;
+    for (let wordIndex = 0; wordIndex < layer.wordTimings.length; wordIndex++) {
+      const word = layer.wordTimings[wordIndex];
+      const wordChars = word.text.split("");
+      const wordStartFrame = usToFrame(word.startUs, fps);
+      const wordEndFrame = usToFrame(word.endUs, fps);
+      const framesPerChar = wordChars.length > 0 ? (wordEndFrame - wordStartFrame) / wordChars.length : 0;
+      for (let i = 0; i < wordChars.length; i++) {
+        const charStartFrame = Math.floor(wordStartFrame + i * framesPerChar);
+        characterTimings.push({
+          char: wordChars[i],
+          index: charIndex,
+          startFrame: charStartFrame
+        });
+        charIndex++;
+      }
+      if (needsSpace && wordIndex < layer.wordTimings.length - 1) {
+        const nextWord = layer.wordTimings[wordIndex + 1];
+        const nextWordFirstChar = nextWord?.text?.[0] || "";
+        const isPunctuation = /[.,!?;:)]/.test(nextWordFirstChar);
+        if (!isPunctuation) {
+          const spaceStartFrame = characterTimings[characterTimings.length - 1]?.startFrame || 0;
+          characterTimings.push({
+            char: " ",
+            index: charIndex,
+            startFrame: spaceStartFrame
+          });
+          charIndex++;
+        }
+      }
+    }
+  } else {
+    const totalFrames = 100;
+    const chars = text.split("");
+    const framesPerChar = chars.length > 0 ? totalFrames / chars.length : 0;
+    for (let i = 0; i < chars.length; i++) {
+      characterTimings.push({
+        char: chars[i],
+        index: i,
+        startFrame: Math.floor(i * framesPerChar)
+      });
+    }
+  }
+  const fullText = characterTimings.map((ct) => ct.char).join("");
+  const fullTextLines = wrapText(ctx, fullText, maxWidth, fontSize, fontFamily, fontWeight);
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  const totalHeight = fullTextLines.length * fontSize * lineHeight;
+  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  let charIndexInText = 0;
+  for (let lineIndex = 0; lineIndex < fullTextLines.length; lineIndex++) {
+    const line = fullTextLines[lineIndex];
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i];
+      const timing = characterTimings[charIndexInText];
+      if (timing) {
+        const hasScanned = relativeFrame >= timing.startFrame;
+        const isCurrentlySinging = hasScanned && relativeFrame < timing.startFrame + transitionFrames;
+        ctx.fillStyle = hasScanned ? highlightFill : baseFill;
+        if (isCurrentlySinging) {
+          ctx.shadowColor = glowColor;
+          ctx.shadowBlur = glowIntensity * 10;
+        } else {
+          ctx.shadowBlur = 0;
+        }
+        if (stroke && strokeWidth > 0) {
+          ctx.strokeStyle = stroke;
+          ctx.lineWidth = strokeWidth;
+          ctx.strokeText(char, currentX, y);
+        }
+        ctx.fillText(char, currentX, y);
+        ctx.shadowBlur = 0;
+      }
+      currentX += measureTextWidth(ctx, char, fontSize, fontFamily, fontWeight);
+      charIndexInText++;
+    }
+  }
+  ctx.restore();
+}
+export {
+  renderCharacterKTV
+};
+//# sourceMappingURL=character-ktv-renderer.js.map

package/dist/stages/compose/text-renderers/character-ktv-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"character-ktv-renderer.js","sources":["../../../../src/stages/compose/text-renderers/character-ktv-renderer.ts"],"sourcesContent":["import type { TextLayer } from '../types';\nimport { wrapText } from '../text-utils/text-wrapper';\nimport { getLetterCaseText, measureTextWidth } from '../text-utils/text-metrics';\nimport { needsSpaceBetweenWords } from '../text-utils/locale-detector';\n\ninterface CharacterTiming {\n  char: string;\n  index: number;\n  startFrame: number;\n}\n\nfunction usToFrame(us: number, fps: number): number {\n  return Math.floor(us / (1000000 / fps));\n}\n\nfunction calculateYPosition(\n  canvasHeight: number,\n  totalHeight: number,\n  globalPosition?: {\n    position?: 'absolute';\n    top?: string;\n    bottom?: string;\n    left?: string;\n    right?: string;\n    display?: string;\n    alignItems?: string;\n    justifyContent?: string;\n  }\n): number {\n  if (!globalPosition) {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  if (globalPosition.top) {\n    const topPercent = parseFloat(globalPosition.top) / 100;\n    return canvasHeight * topPercent;\n  }\n\n  if (globalPosition.bottom) {\n    const bottomPercent = parseFloat(globalPosition.bottom) / 100;\n    return canvasHeight * (1 - bottomPercent) - totalHeight;\n  }\n\n  if (globalPosition.justifyContent === 'center' || globalPosition.alignItems === 'center') {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  return canvasHeight / 2 - totalHeight / 2;\n}\n\nexport function renderCharacterKTV(\n  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n  layer: TextLayer,\n  canvasWidth: number,\n  canvasHeight: number,\n  relativeFrame: number,\n  fps: number = 30\n): void {\n  const fontConfig = layer.fontConfig?.textStyle;\n  if (!fontConfig) return;\n\n  const fontSize = fontConfig.fontSize;\n  const fontFamily = fontConfig.fontFamily;\n  const fontWeight = fontConfig.fontWeight;\n  const baseFill = fontConfig.fill;\n  const stroke = fontConfig.stroke;\n  const strokeWidth = fontConfig.strokeWidth || 0;\n  const lineHeight = fontConfig.lineHeight || 1.2;\n\n  const highlightFill = layer.animation?.highlightTextStyle?.fill || 'rgb(255, 215, 0)';\n  const glowColor = layer.animation?.glowColor || '#ffffff';\n  const glowIntensity = layer.animation?.glowIntensity || 3;\n  const transitionFrames = layer.animation?.transitionFrames || 10;\n\n  const maxWidth = canvasWidth * 0.9;\n  const text = getLetterCaseText(layer.text, layer.letterCase);\n  const needsSpace = needsSpaceBetweenWords(layer.localeCode || 'en-US', text);\n  const characterTimings: CharacterTiming[] = [];\n\n  if (layer.wordTimings && layer.wordTimings.length > 0) {\n    let charIndex = 0;\n\n    for (let wordIndex = 0; wordIndex < layer.wordTimings.length; wordIndex++) {\n      const word = layer.wordTimings[wordIndex]!;\n      const wordChars = word.text.split('');\n      const wordStartFrame = usToFrame(word.startUs, fps);\n      const wordEndFrame = usToFrame(word.endUs, fps);\n      const framesPerChar =\n        wordChars.length > 0 ? (wordEndFrame - wordStartFrame) / wordChars.length : 0;\n\n      for (let i = 0; i < wordChars.length; i++) {\n        const charStartFrame = Math.floor(wordStartFrame + i * framesPerChar);\n        characterTimings.push({\n          char: wordChars[i]!,\n          index: charIndex,\n          startFrame: charStartFrame,\n        });\n        charIndex++;\n      }\n\n      if (needsSpace && wordIndex < layer.wordTimings.length - 1) {\n        const nextWord = layer.wordTimings[wordIndex + 1];\n        const nextWordFirstChar = nextWord?.text?.[0] || '';\n        const isPunctuation = /[.,!?;:)]/.test(nextWordFirstChar);\n\n        if (!isPunctuation) {\n          const spaceStartFrame = characterTimings[characterTimings.length - 1]?.startFrame || 0;\n          characterTimings.push({\n            char: ' ',\n            index: charIndex,\n            startFrame: spaceStartFrame,\n          });\n          charIndex++;\n        }\n      }\n    }\n  } else {\n    const totalFrames = 100;\n    const chars = text.split('');\n    const framesPerChar = chars.length > 0 ? totalFrames / chars.length : 0;\n\n    for (let i = 0; i < chars.length; i++) {\n      characterTimings.push({\n        char: chars[i]!,\n        index: i,\n        startFrame: Math.floor(i * framesPerChar),\n      });\n    }\n  }\n\n  const fullText = characterTimings.map((ct) => ct.char).join('');\n  const fullTextLines = wrapText(ctx, fullText, maxWidth, fontSize, fontFamily, fontWeight);\n\n  ctx.save();\n  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.textAlign = 'left';\n  ctx.textBaseline = 'middle';\n  ctx.lineJoin = 'round';\n  ctx.lineCap = 'round';\n\n  const totalHeight = fullTextLines.length * fontSize * lineHeight;\n  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);\n\n  let charIndexInText = 0;\n\n  for (let lineIndex = 0; lineIndex < fullTextLines.length; lineIndex++) {\n    const line = fullTextLines[lineIndex]!;\n    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;\n    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);\n    let currentX = canvasWidth / 2 - lineWidth / 2;\n\n    for (let i = 0; i < line.length; i++) {\n      const char = line[i]!;\n      const timing = characterTimings[charIndexInText];\n\n      if (timing) {\n        const hasScanned = relativeFrame >= timing.startFrame;\n        const isCurrentlySinging =\n          hasScanned && relativeFrame < timing.startFrame + transitionFrames;\n\n        ctx.fillStyle = hasScanned ? highlightFill : baseFill;\n\n        if (isCurrentlySinging) {\n          ctx.shadowColor = glowColor;\n          ctx.shadowBlur = glowIntensity * 10;\n        } else {\n          ctx.shadowBlur = 0;\n        }\n\n        if (stroke && strokeWidth > 0) {\n          ctx.strokeStyle = stroke;\n          ctx.lineWidth = strokeWidth;\n          ctx.strokeText(char, currentX, y);\n        }\n        ctx.fillText(char, currentX, y);\n        ctx.shadowBlur = 0;\n      }\n\n      currentX += measureTextWidth(ctx, char, fontSize, fontFamily, fontWeight);\n      charIndexInText++;\n    }\n  }\n\n  ctx.restore();\n}\n"],"names":[],"mappings":"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"}

package/dist/stages/compose/text-renderers/word-by-word-renderer.d.ts

@@ -1,4 +1,4 @@
 import { TextLayer } from '../types';
 
-export declare function renderWordByWord(ctx: OffscreenCanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
+export declare function renderWordByWord(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
 //# sourceMappingURL=word-by-word-renderer.d.ts.map

package/dist/stages/compose/text-renderers/word-by-word-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"word-by-word-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/word-by-word-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAsD1C,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CAyHN"}
+{"version":3,"file":"word-by-word-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/word-by-word-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAsD1C,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CAyHN"}

package/dist/stages/compose/text-renderers/word-by-word-renderer.js

@@ -0,0 +1,128 @@
+import { formEvenLinesWithWords } from "../text-utils/text-wrapper.js";
+import { getLetterCaseText, measureTextWidth } from "../text-utils/text-metrics.js";
+import { interpolate, interpolateColor } from "./animation-utils.js";
+import { needsSpaceBetweenWords } from "../text-utils/locale-detector.js";
+function usToFrame(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderWordByWord(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightFill = layer.animation?.highlightTextStyle?.fill || "rgb(255, 215, 0)";
+  const highlightStroke = layer.animation?.highlightTextStyle?.stroke || stroke;
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const words = text.split(needsSpace ? /\s+/ : "");
+  const lines = formEvenLinesWithWords(
+    ctx,
+    words,
+    maxWidth,
+    fontSize,
+    needsSpace,
+    fontFamily,
+    fontWeight
+  );
+  const wordPositions = [];
+  let wordIndex = 0;
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const lineWords = line.split(needsSpace ? /\s+/ : "");
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (const word of lineWords) {
+      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+      const wordTimingUs = layer.wordTimings?.[wordIndex];
+      const wordTiming = wordTimingUs ? {
+        startFrame: usToFrame(wordTimingUs.startUs, fps),
+        endFrame: usToFrame(wordTimingUs.endUs, fps)
+      } : void 0;
+      wordPositions.push({
+        text: word,
+        x: currentX + wordWidth / 2,
+        y,
+        lineIndex,
+        wordIndex,
+        timing: wordTiming
+      });
+      currentX += wordWidth + (needsSpace ? measureTextWidth(ctx, " ", fontSize, fontFamily, fontWeight) : 0);
+      wordIndex++;
+    }
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  for (const wordPos of wordPositions) {
+    let currentFill = fill;
+    let currentStroke = stroke;
+    if (wordPos.timing) {
+      const { startFrame, endFrame } = wordPos.timing;
+      if (relativeFrame >= startFrame && relativeFrame <= endFrame) {
+        const transitionProgressIn = interpolate(
+          relativeFrame,
+          [startFrame, startFrame + 3],
+          [0, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          }
+        );
+        currentFill = interpolateColor(fill, highlightFill, transitionProgressIn);
+        if (stroke && highlightStroke) {
+          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressIn);
+        }
+      } else if (relativeFrame > endFrame) {
+        const transitionProgressOut = interpolate(relativeFrame, [endFrame, endFrame + 3], [1, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        currentFill = interpolateColor(fill, highlightFill, transitionProgressOut);
+        if (stroke && highlightStroke) {
+          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressOut);
+        }
+      }
+    }
+    if (currentStroke && strokeWidth > 0) {
+      ctx.strokeStyle = currentStroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);
+    }
+    ctx.fillStyle = currentFill;
+    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);
+  }
+  ctx.restore();
+}
+export {
+  renderWordByWord
+};
+//# sourceMappingURL=word-by-word-renderer.js.map

package/dist/stages/compose/text-renderers/word-by-word-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"word-by-word-renderer.js","sources":["../../../../src/stages/compose/text-renderers/word-by-word-renderer.ts"],"sourcesContent":["import type { TextLayer } from '../types';\nimport { formEvenLinesWithWords } from '../text-utils/text-wrapper';\nimport { getLetterCaseText, measureTextWidth } from '../text-utils/text-metrics';\nimport { interpolate, interpolateColor } from './animation-utils';\nimport { needsSpaceBetweenWords } from '../text-utils/locale-detector';\n\ninterface WordPosition {\n  text: string;\n  x: number;\n  y: number;\n  lineIndex: number;\n  wordIndex: number;\n  timing?: { startFrame: number; endFrame: number };\n}\n\nfunction usToFrame(us: number, fps: number): number {\n  return Math.floor(us / (1000000 / fps));\n}\n\nfunction calculateYPosition(\n  canvasHeight: number,\n  totalHeight: number,\n  globalPosition?: {\n    position?: 'absolute';\n    top?: string;\n    bottom?: string;\n    left?: string;\n    right?: string;\n    display?: string;\n    alignItems?: string;\n    justifyContent?: string;\n  }\n): number {\n  if (!globalPosition) {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  if (globalPosition.top) {\n    const topPercent = parseFloat(globalPosition.top) / 100;\n    return canvasHeight * topPercent;\n  }\n\n  if (globalPosition.bottom) {\n    const bottomPercent = parseFloat(globalPosition.bottom) / 100;\n    return canvasHeight * (1 - bottomPercent) - totalHeight;\n  }\n\n  if (globalPosition.justifyContent === 'center' || globalPosition.alignItems === 'center') {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  return canvasHeight / 2 - totalHeight / 2;\n}\n\nexport function renderWordByWord(\n  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n  layer: TextLayer,\n  canvasWidth: number,\n  canvasHeight: number,\n  relativeFrame: number,\n  fps: number = 30\n): void {\n  const fontConfig = layer.fontConfig?.textStyle;\n  if (!fontConfig) return;\n\n  const fontSize = fontConfig.fontSize;\n  const fontFamily = fontConfig.fontFamily;\n  const fontWeight = fontConfig.fontWeight;\n  const fill = fontConfig.fill;\n  const stroke = fontConfig.stroke;\n  const strokeWidth = fontConfig.strokeWidth || 0;\n  const lineHeight = fontConfig.lineHeight || 1.2;\n\n  const highlightFill = layer.animation?.highlightTextStyle?.fill || 'rgb(255, 215, 0)';\n  const highlightStroke = layer.animation?.highlightTextStyle?.stroke || stroke;\n\n  const maxWidth = canvasWidth * 0.64;\n  const text = getLetterCaseText(layer.text, layer.letterCase);\n  const needsSpace = needsSpaceBetweenWords(layer.localeCode || 'en-US', text);\n  const words = text.split(needsSpace ? /\\s+/ : '');\n  const lines = formEvenLinesWithWords(\n    ctx,\n    words,\n    maxWidth,\n    fontSize,\n    needsSpace,\n    fontFamily,\n    fontWeight\n  );\n\n  const wordPositions: WordPosition[] = [];\n  let wordIndex = 0;\n\n  const totalHeight = lines.length * fontSize * lineHeight;\n  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);\n\n  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {\n    const line = lines[lineIndex]!;\n    const lineWords = line.split(needsSpace ? /\\s+/ : '');\n    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;\n\n    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);\n    let currentX = canvasWidth / 2 - lineWidth / 2;\n\n    for (const word of lineWords) {\n      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);\n      const wordTimingUs = layer.wordTimings?.[wordIndex];\n\n      const wordTiming = wordTimingUs\n        ? {\n            startFrame: usToFrame(wordTimingUs.startUs, fps),\n            endFrame: usToFrame(wordTimingUs.endUs, fps),\n          }\n        : undefined;\n\n      wordPositions.push({\n        text: word,\n        x: currentX + wordWidth / 2,\n        y,\n        lineIndex,\n        wordIndex,\n        timing: wordTiming,\n      });\n\n      currentX +=\n        wordWidth + (needsSpace ? measureTextWidth(ctx, ' ', fontSize, fontFamily, fontWeight) : 0);\n      wordIndex++;\n    }\n  }\n\n  ctx.save();\n  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.lineJoin = 'round';\n  ctx.lineCap = 'round';\n\n  for (const wordPos of wordPositions) {\n    let currentFill = fill;\n    let currentStroke = stroke;\n\n    if (wordPos.timing) {\n      const { startFrame, endFrame } = wordPos.timing;\n\n      if (relativeFrame >= startFrame && relativeFrame <= endFrame) {\n        const transitionProgressIn = interpolate(\n          relativeFrame,\n          [startFrame, startFrame + 3],\n          [0, 1],\n          {\n            extrapolateLeft: 'clamp',\n            extrapolateRight: 'clamp',\n          }\n        );\n\n        currentFill = interpolateColor(fill, highlightFill, transitionProgressIn);\n        if (stroke && highlightStroke) {\n          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressIn);\n        }\n      } else if (relativeFrame > endFrame) {\n        const transitionProgressOut = interpolate(relativeFrame, [endFrame, endFrame + 3], [1, 0], {\n          extrapolateLeft: 'clamp',\n          extrapolateRight: 'clamp',\n        });\n\n        currentFill = interpolateColor(fill, highlightFill, transitionProgressOut);\n        if (stroke && highlightStroke) {\n          currentStroke = interpolateColor(stroke, highlightStroke, transitionProgressOut);\n        }\n      }\n    }\n\n    if (currentStroke && strokeWidth > 0) {\n      ctx.strokeStyle = currentStroke;\n      ctx.lineWidth = strokeWidth;\n      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);\n    }\n    ctx.fillStyle = currentFill;\n    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);\n  }\n\n  ctx.restore();\n}\n"],"names":[],"mappings":"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"}

package/dist/stages/compose/text-renderers/word-fancy-renderer.d.ts

@@ -1,4 +1,4 @@
 import { TextLayer } from '../types';
 
-export declare function renderWordByWordFancy(ctx: OffscreenCanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
+export declare function renderWordByWordFancy(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number, fps?: number): void;
 //# sourceMappingURL=word-fancy-renderer.d.ts.map

package/dist/stages/compose/text-renderers/word-fancy-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"word-fancy-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/word-fancy-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAuD1C,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CAkIN"}
+{"version":3,"file":"word-fancy-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/word-fancy-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAuD1C,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,GAAE,MAAW,GACf,IAAI,CAkIN"}

package/dist/stages/compose/text-renderers/word-fancy-renderer.js

@@ -0,0 +1,135 @@
+import { formEvenLinesWithWords } from "../text-utils/text-wrapper.js";
+import { getLetterCaseText, measureTextWidth } from "../text-utils/text-metrics.js";
+import { springEasing, interpolate } from "./animation-utils.js";
+import { needsSpaceBetweenWords } from "../text-utils/locale-detector.js";
+function usToFrame(us, fps) {
+  return Math.floor(us / (1e6 / fps));
+}
+function calculateYPosition(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function renderWordByWordFancy(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps = 30) {
+  const fontConfig = layer.fontConfig?.textStyle;
+  if (!fontConfig) return;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const highlightBackgroundColor = layer.animation?.highlightColor || "rgb(255, 215, 0)";
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+  const words = text.split(needsSpace ? /\s+/ : "");
+  const lines = formEvenLinesWithWords(
+    ctx,
+    words,
+    maxWidth,
+    fontSize,
+    needsSpace,
+    fontFamily,
+    fontWeight
+  );
+  const wordPositions = [];
+  let wordIndex = 0;
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const lineWords = line.split(needsSpace ? /\s+/ : "");
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let currentX = canvasWidth / 2 - lineWidth / 2;
+    for (const word of lineWords) {
+      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);
+      const wordTimingUs = layer.wordTimings?.[wordIndex];
+      const wordTiming = wordTimingUs ? {
+        startFrame: usToFrame(wordTimingUs.startUs, fps),
+        endFrame: usToFrame(wordTimingUs.endUs, fps)
+      } : void 0;
+      wordPositions.push({
+        text: word,
+        x: currentX + wordWidth / 2,
+        y,
+        width: wordWidth,
+        lineIndex,
+        wordIndex,
+        timing: wordTiming
+      });
+      currentX += wordWidth + (needsSpace ? measureTextWidth(ctx, " ", fontSize, fontFamily, fontWeight) : 0);
+      wordIndex++;
+    }
+  }
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  for (const wordPos of wordPositions) {
+    let backgroundOpacity = 0;
+    let backgroundScale = 0.8;
+    if (wordPos.timing) {
+      const { startFrame, endFrame } = wordPos.timing;
+      const preStartFrames = 3;
+      const isActive = relativeFrame >= startFrame && relativeFrame <= endFrame;
+      if (isActive) {
+        const scaleSpringIn = springEasing(relativeFrame - (startFrame - preStartFrames), {
+          damping: 6,
+          mass: 0.35,
+          stiffness: 200,
+          overshootClamping: false
+        });
+        const inProgress = interpolate(relativeFrame, [startFrame, startFrame + 1], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        backgroundOpacity = 0.9 * inProgress;
+        backgroundScale = 0.8 + scaleSpringIn * 0.45;
+      } else if (relativeFrame > endFrame) {
+        backgroundOpacity = 0;
+        backgroundScale = 0.8;
+      }
+      if (backgroundOpacity > 0) {
+        const padding = 8;
+        const bgWidth = (wordPos.width + padding * 2) * backgroundScale;
+        const bgHeight = (fontSize + padding) * backgroundScale;
+        ctx.save();
+        ctx.globalAlpha = backgroundOpacity;
+        ctx.fillStyle = highlightBackgroundColor;
+        ctx.beginPath();
+        ctx.roundRect(wordPos.x - bgWidth / 2, wordPos.y - bgHeight / 2, bgWidth, bgHeight, 8);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+    if (stroke && strokeWidth > 0) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);
+    }
+    ctx.fillStyle = fill;
+    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);
+  }
+  ctx.restore();
+}
+export {
+  renderWordByWordFancy
+};
+//# sourceMappingURL=word-fancy-renderer.js.map

package/dist/stages/compose/text-renderers/word-fancy-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"word-fancy-renderer.js","sources":["../../../../src/stages/compose/text-renderers/word-fancy-renderer.ts"],"sourcesContent":["import type { TextLayer } from '../types';\nimport { formEvenLinesWithWords } from '../text-utils/text-wrapper';\nimport { getLetterCaseText, measureTextWidth } from '../text-utils/text-metrics';\nimport { springEasing, interpolate } from './animation-utils';\nimport { needsSpaceBetweenWords } from '../text-utils/locale-detector';\n\ninterface WordPosition {\n  text: string;\n  x: number;\n  y: number;\n  width: number;\n  lineIndex: number;\n  wordIndex: number;\n  timing?: { startFrame: number; endFrame: number };\n}\n\nfunction usToFrame(us: number, fps: number): number {\n  return Math.floor(us / (1000000 / fps));\n}\n\nfunction calculateYPosition(\n  canvasHeight: number,\n  totalHeight: number,\n  globalPosition?: {\n    position?: 'absolute';\n    top?: string;\n    bottom?: string;\n    left?: string;\n    right?: string;\n    display?: string;\n    alignItems?: string;\n    justifyContent?: string;\n  }\n): number {\n  if (!globalPosition) {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  if (globalPosition.top) {\n    const topPercent = parseFloat(globalPosition.top) / 100;\n    return canvasHeight * topPercent;\n  }\n\n  if (globalPosition.bottom) {\n    const bottomPercent = parseFloat(globalPosition.bottom) / 100;\n    return canvasHeight * (1 - bottomPercent) - totalHeight;\n  }\n\n  if (globalPosition.justifyContent === 'center' || globalPosition.alignItems === 'center') {\n    return canvasHeight / 2 - totalHeight / 2;\n  }\n\n  return canvasHeight / 2 - totalHeight / 2;\n}\n\nexport function renderWordByWordFancy(\n  ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n  layer: TextLayer,\n  canvasWidth: number,\n  canvasHeight: number,\n  relativeFrame: number,\n  fps: number = 30\n): void {\n  const fontConfig = layer.fontConfig?.textStyle;\n  if (!fontConfig) return;\n\n  const fontSize = fontConfig.fontSize;\n  const fontFamily = fontConfig.fontFamily;\n  const fontWeight = fontConfig.fontWeight;\n  const fill = fontConfig.fill;\n  const stroke = fontConfig.stroke;\n  const strokeWidth = fontConfig.strokeWidth || 0;\n  const lineHeight = fontConfig.lineHeight || 1.2;\n\n  const highlightBackgroundColor = layer.animation?.highlightColor || 'rgb(255, 215, 0)';\n\n  const maxWidth = canvasWidth * 0.64;\n  const text = getLetterCaseText(layer.text, layer.letterCase);\n  const needsSpace = needsSpaceBetweenWords(layer.localeCode || 'en-US', text);\n  const words = text.split(needsSpace ? /\\s+/ : '');\n  const lines = formEvenLinesWithWords(\n    ctx,\n    words,\n    maxWidth,\n    fontSize,\n    needsSpace,\n    fontFamily,\n    fontWeight\n  );\n\n  const wordPositions: WordPosition[] = [];\n  let wordIndex = 0;\n\n  const totalHeight = lines.length * fontSize * lineHeight;\n  const startY = calculateYPosition(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);\n\n  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {\n    const line = lines[lineIndex]!;\n    const lineWords = line.split(needsSpace ? /\\s+/ : '');\n    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;\n\n    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);\n    let currentX = canvasWidth / 2 - lineWidth / 2;\n\n    for (const word of lineWords) {\n      const wordWidth = measureTextWidth(ctx, word, fontSize, fontFamily, fontWeight);\n      const wordTimingUs = layer.wordTimings?.[wordIndex];\n\n      const wordTiming = wordTimingUs\n        ? {\n            startFrame: usToFrame(wordTimingUs.startUs, fps),\n            endFrame: usToFrame(wordTimingUs.endUs, fps),\n          }\n        : undefined;\n\n      wordPositions.push({\n        text: word,\n        x: currentX + wordWidth / 2,\n        y,\n        width: wordWidth,\n        lineIndex,\n        wordIndex,\n        timing: wordTiming,\n      });\n\n      currentX +=\n        wordWidth + (needsSpace ? measureTextWidth(ctx, ' ', fontSize, fontFamily, fontWeight) : 0);\n      wordIndex++;\n    }\n  }\n\n  ctx.save();\n  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.lineJoin = 'round';\n  ctx.lineCap = 'round';\n\n  for (const wordPos of wordPositions) {\n    let backgroundOpacity = 0;\n    let backgroundScale = 0.8;\n\n    if (wordPos.timing) {\n      const { startFrame, endFrame } = wordPos.timing;\n      const preStartFrames = 3;\n      const isActive = relativeFrame >= startFrame && relativeFrame <= endFrame;\n\n      if (isActive) {\n        const scaleSpringIn = springEasing(relativeFrame - (startFrame - preStartFrames), {\n          damping: 6,\n          mass: 0.35,\n          stiffness: 200,\n          overshootClamping: false,\n        });\n\n        const inProgress = interpolate(relativeFrame, [startFrame, startFrame + 1], [0, 1], {\n          extrapolateLeft: 'clamp',\n          extrapolateRight: 'clamp',\n        });\n\n        backgroundOpacity = 0.9 * inProgress;\n        backgroundScale = 0.8 + scaleSpringIn * 0.45;\n      } else if (relativeFrame > endFrame) {\n        backgroundOpacity = 0;\n        backgroundScale = 0.8;\n      }\n\n      if (backgroundOpacity > 0) {\n        const padding = 8;\n        const bgWidth = (wordPos.width + padding * 2) * backgroundScale;\n        const bgHeight = (fontSize + padding) * backgroundScale;\n\n        ctx.save();\n        ctx.globalAlpha = backgroundOpacity;\n        ctx.fillStyle = highlightBackgroundColor;\n        ctx.beginPath();\n        ctx.roundRect(wordPos.x - bgWidth / 2, wordPos.y - bgHeight / 2, bgWidth, bgHeight, 8);\n        ctx.fill();\n        ctx.restore();\n      }\n    }\n\n    if (stroke && strokeWidth > 0) {\n      ctx.strokeStyle = stroke;\n      ctx.lineWidth = strokeWidth;\n      ctx.strokeText(wordPos.text, wordPos.x, wordPos.y);\n    }\n    ctx.fillStyle = fill;\n    ctx.fillText(wordPos.text, wordPos.x, wordPos.y);\n  }\n\n  ctx.restore();\n}\n"],"names":[],"mappings":"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"}

package/dist/stages/compose/text-utils/locale-detector.js

@@ -0,0 +1,16 @@
+const CJK_REGEX = /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\u3400-\u4dbf\uac00-\ud7af]/g;
+function needsSpaceBetweenWords(locale, text) {
+  if (text) {
+    const cjkMatches = text.match(CJK_REGEX);
+    const cjkCount = cjkMatches ? cjkMatches.length : 0;
+    if (cjkCount > 0 && cjkCount / text.length >= 0.6) {
+      return false;
+    }
+    return true;
+  }
+  return !["zh-CN", "ja-JP", "ko-KR"].includes(locale);
+}
+export {
+  needsSpaceBetweenWords
+};
+//# sourceMappingURL=locale-detector.js.map

package/dist/stages/compose/text-utils/locale-detector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-detector.js","sources":["../../../../src/stages/compose/text-utils/locale-detector.ts"],"sourcesContent":["import type { LocaleCode } from '../font-system/types';\n\nconst CJK_REGEX = /[\\u4e00-\\u9fff\\u3040-\\u309f\\u30a0-\\u30ff\\u3400-\\u4dbf\\uac00-\\ud7af]/g;\n\nexport function needsSpaceBetweenWords(locale: LocaleCode | string, text?: string): boolean {\n  if (text) {\n    const cjkMatches = text.match(CJK_REGEX);\n    const cjkCount = cjkMatches ? cjkMatches.length : 0;\n\n    if (cjkCount > 0 && cjkCount / text.length >= 0.6) {\n      return false;\n    }\n    return true;\n  }\n\n  return !['zh-CN', 'ja-JP', 'ko-KR'].includes(locale);\n}\n\nexport function detectLocaleFromText(text: string): LocaleCode {\n  const cjkMatches = text.match(CJK_REGEX);\n  const cjkCount = cjkMatches ? cjkMatches.length : 0;\n\n  if (cjkCount > 0 && cjkCount / text.length >= 0.6) {\n    const chineseCount = (text.match(/[\\u4e00-\\u9fff]/g) || []).length;\n    const japaneseCount = (text.match(/[\\u3040-\\u309f\\u30a0-\\u30ff]/g) || []).length;\n    const koreanCount = (text.match(/[\\uac00-\\ud7af]/g) || []).length;\n\n    if (chineseCount >= japaneseCount && chineseCount >= koreanCount) {\n      return 'zh-CN';\n    }\n    if (japaneseCount >= koreanCount) {\n      return 'ja-JP';\n    }\n    return 'ko-KR';\n  }\n\n  const arabicCount = (text.match(/[\\u0600-\\u06FF]/g) || []).length;\n  if (arabicCount > 0 && arabicCount / text.length >= 0.5) {\n    return 'ar-SA';\n  }\n\n  return 'en-US';\n}\n"],"names":[],"mappings":"AAEA,MAAM,YAAY;AAEX,SAAS,uBAAuB,QAA6B,MAAwB;AAC1F,MAAI,MAAM;AACR,UAAM,aAAa,KAAK,MAAM,SAAS;AACvC,UAAM,WAAW,aAAa,WAAW,SAAS;AAElD,QAAI,WAAW,KAAK,WAAW,KAAK,UAAU,KAAK;AACjD,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,CAAC,SAAS,SAAS,OAAO,EAAE,SAAS,MAAM;AACrD;"}