@subvo/renderer 1.2.0 → 1.2.2

package/dist/renderer.d.ts

@@ -37,7 +37,7 @@ type RenderMetadata = {
     createdAt?: string;
     tags?: string[];
 };
-type RenderPosition = "bottom_safe" | "center";
+type RenderPosition = "top_safe" | "center" | "bottom_safe";
 type RenderPreset = "fire" | "clean" | "luxury" | "pop" | "ghost";
 type RenderMode = "phrase_highlight" | "progressive_build";
 type RenderStyle = {
@@ -60,6 +60,9 @@ type RenderStyle = {
     offsetY: number;
     fadeInMs: number;
     fadeOutMs: number;
+    highlightBox?: boolean;
+    karaokeFill?: boolean;
+    bounce?: boolean;
     preset: RenderPreset;
 };
 

package/dist/renderer.esm.js

@@ -177,6 +177,33 @@ function buildLayoutRow(ctx, words) {
 }
 
 // src/effects.ts
+var PRESET_FEATURE_DEFAULTS = {
+  fire: {
+    highlightBox: true,
+    karaokeFill: true,
+    bounce: true
+  },
+  clean: {
+    highlightBox: false,
+    karaokeFill: true,
+    bounce: false
+  },
+  luxury: {
+    highlightBox: true,
+    karaokeFill: false,
+    bounce: false
+  },
+  pop: {
+    highlightBox: false,
+    karaokeFill: true,
+    bounce: true
+  },
+  ghost: {
+    highlightBox: false,
+    karaokeFill: false,
+    bounce: false
+  }
+};
 function clamp(value, min = 0, max = 1) {
   return Math.min(max, Math.max(min, value));
 }
@@ -188,46 +215,142 @@ function computeWordProgress(word, timeMs) {
 function computePulseScale(style, progress) {
   return 1 + (style.pulse - 1) * progress * style.highlightStrength;
 }
+function computeImpactProgress(word, timeMs, durationMs = 150) {
+  if (durationMs <= 0) return 0;
+  return clamp((timeMs - word.startMs) / durationMs);
+}
+function computeImpactScale(progress) {
+  const clampedProgress = clamp(progress);
+  if (clampedProgress <= 0 || clampedProgress >= 1) {
+    return 1;
+  }
+  if (clampedProgress < 0.3) {
+    return 1 + clampedProgress * 0.8;
+  }
+  return Math.max(1, 1.25 - (clampedProgress - 0.3) * 0.35);
+}
+function resolveStyleFlag(style, key) {
+  const value = style[key];
+  if (typeof value === "boolean") {
+    return value;
+  }
+  return PRESET_FEATURE_DEFAULTS[style.preset][key];
+}
 
 // src/drawText.ts
-function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor, emphasis = 0) {
+var BOX_PADDING_X = 12;
+var BOX_PADDING_Y = 6;
+var BOX_RADIUS = 8;
+function drawWord(ctx, rawText, text, x, y, style, scaleFactor, ascent, progress = 0, emphasis = 0) {
+  const activeProgress = Math.max(0, Math.min(1, progress));
   const emphasisBoost = emphasis > 0.6 ? Math.min(1, (emphasis - 0.6) / 0.4) : 0;
   const effectiveScale = scaleFactor * (1 + emphasisBoost * 0.06);
   const invScale = 1 / effectiveScale;
-  const strokeWidth = style.outlineWidth + emphasisBoost * 1.2;
-  const baseBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
-  const emphasisBlur = style.fontSize * 0.12 * emphasisBoost * invScale;
+  const outlineMultiplier = emphasis >= 0.6 ? 1.4 : 1;
+  const strokeWidth = style.outlineWidth * outlineMultiplier + emphasisBoost * 1.2;
+  const glowIntensity = style.glowIntensity + (emphasis >= 0.75 ? 0.4 : 0);
+  const isActive = activeProgress > 0;
+  const highlightBoxActive = resolveStyleFlag(style, "highlightBox") && isActive && emphasis >= 0.7;
+  const karaokeFillActive = resolveStyleFlag(style, "karaokeFill") && isActive && activeProgress < 1;
+  const inactiveFillColor = !resolveStyleFlag(style, "karaokeFill") && style.preset !== "ghost" && emphasis >= 0.75 ? style.highlightColor : style.baseColor;
+  const baseFillColor = highlightBoxActive ? style.baseColor : isActive && karaokeFillActive ? style.baseColor : inactiveFillColor;
+  const activeFillColor = highlightBoxActive ? style.baseColor : style.highlightColor;
+  const textBounds = measureTextBounds(ctx, rawText, ascent);
   ctx.save();
   ctx.translate(x, y);
   ctx.translate(0, -ascent);
   ctx.scale(effectiveScale, effectiveScale);
   ctx.translate(0, ascent);
-  ctx.fillStyle = fillColor;
+  if (highlightBoxActive) {
+    resetShadow(ctx);
+    drawHighlightBox(ctx, textBounds, style.highlightColor);
+  }
+  resetShadow(ctx);
   if (strokeWidth > 0) {
     ctx.lineWidth = strokeWidth * invScale;
     ctx.strokeStyle = style.outlineColor;
     ctx.strokeText(text, 0, 0);
   }
-  if (style.shadow || style.glowIntensity > 0 || emphasisBoost > 0) {
-    ctx.shadowColor = emphasisBoost > 0 ? fillColor : style.outlineColor;
+  applyTextEffects(
+    ctx,
+    style,
+    invScale,
+    glowIntensity,
+    emphasis >= 0.75 ? style.highlightColor : style.outlineColor
+  );
+  ctx.fillStyle = isActive && !karaokeFillActive ? activeFillColor : baseFillColor;
+  ctx.fillText(text, 0, 0);
+  if (karaokeFillActive) {
+    ctx.save();
+    applyTextEffects(ctx, style, invScale, glowIntensity, style.highlightColor);
+    ctx.beginPath();
+    ctx.rect(
+      textBounds.left - 1 * invScale,
+      textBounds.top - 2 * invScale,
+      (textBounds.width + 2 * invScale) * activeProgress,
+      textBounds.height + 4 * invScale
+    );
+    ctx.clip();
+    ctx.fillStyle = style.highlightColor;
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function measureTextBounds(ctx, rawText, fallbackAscent) {
+  const metrics = ctx.measureText(rawText);
+  const left = -metrics.actualBoundingBoxLeft;
+  const width = Math.max(
+    metrics.width,
+    metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight
+  );
+  const ascent = metrics.actualBoundingBoxAscent || fallbackAscent;
+  const descent = metrics.actualBoundingBoxDescent || Math.max(4, fallbackAscent * 0.28);
+  return {
+    left,
+    top: -ascent,
+    width,
+    height: ascent + descent
+  };
+}
+function drawHighlightBox(ctx, textBounds, color) {
+  const boxX = textBounds.left - BOX_PADDING_X;
+  const boxY = textBounds.top - BOX_PADDING_Y;
+  const boxWidth = textBounds.width + BOX_PADDING_X * 2;
+  const boxHeight = textBounds.height + BOX_PADDING_Y * 2;
+  ctx.beginPath();
+  ctx.roundRect(boxX, boxY, boxWidth, boxHeight, BOX_RADIUS);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+function applyTextEffects(ctx, style, invScale, glowIntensity, shadowColor) {
+  if (style.shadow || glowIntensity > 0) {
+    ctx.shadowColor = shadowColor;
     ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
     ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
-    ctx.shadowBlur = baseBlur + emphasisBlur;
-  } else {
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = style.fontSize * glowIntensity * invScale;
+    return;
   }
-  ctx.fillText(text, 0, 0);
-  ctx.restore();
+  resetShadow(ctx);
+}
+function resetShadow(ctx) {
+  ctx.shadowColor = "transparent";
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
 }
 
 // src/renderFrame.ts
 var DEFAULT_TRANSITION_MS = 150;
 var MIN_TRANSITION_MS = 120;
 var MAX_TRANSITION_MS = 180;
+var TOP_UNSAFE_RATIO = 0.14;
+var BOTTOM_UNSAFE_RATIO = 0.24;
+var TOP_SAFE_ANCHOR_RATIO = 0.22;
+var CENTER_ANCHOR_RATIO = 0.5;
+var BOTTOM_SAFE_ANCHOR_RATIO = 0.68;
 function renderFrame(ctx, renderJob, timeMs) {
+  var _a;
   const { playRes, style } = renderJob;
   const layout = computeLayout(ctx, renderJob);
   const transitionMs = resolveTransitionMs(style);
@@ -249,36 +372,52 @@ function renderFrame(ctx, renderJob, timeMs) {
   ctx.textBaseline = "alphabetic";
   const metrics = ctx.measureText("Mg");
   const ascent = metrics.actualBoundingBoxAscent;
+  const descent = metrics.actualBoundingBoxDescent || Math.max(4, style.fontSize * 0.28);
   const centerX = playRes.width / 2;
-  let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
+  const lineStep = style.fontSize * style.lineSpacing;
+  const safeTop = playRes.height * TOP_UNSAFE_RATIO;
+  const safeBottom = playRes.height * (1 - BOTTOM_UNSAFE_RATIO);
+  const anchorY = resolveAnchorY(playRes.height, style.position) + style.offsetY;
   for (const { entry, alpha } of visibleLines) {
     ctx.save();
     ctx.globalAlpha = alpha;
-    let lineY = y;
-    for (const row of entry.rows) {
+    const baselineY = clampBaselineY(
+      anchorY,
+      entry.rows.length,
+      ascent,
+      descent,
+      lineStep,
+      safeTop,
+      safeBottom
+    );
+    for (const [rowIndex, row] of entry.rows.entries()) {
       let x = centerX - row.width / 2;
+      const rowY = baselineY + rowIndex * lineStep;
       for (const { word, text, width } of row.words) {
         const visibleWord = isWordVisible(entry.line, word, timeMs);
         if (visibleWord) {
           const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+          const emphasis = (_a = word.emphasis) != null ? _a : 0;
           const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-          const scaleFactor = computePulseScale(style, progress);
-          const fillColor = activeWord ? style.highlightColor : style.baseColor;
+          const impactProgress = activeWord ? computeImpactProgress(word, timeMs) : 0;
+          const pulseScale = computePulseScale(style, progress);
+          const bounceScale = shouldBounceWord(style, emphasis) ? computeImpactScale(impactProgress) : 1;
+          const scaleFactor = pulseScale * bounceScale;
           drawWord(
             ctx,
+            word.text,
             text,
             x,
-            lineY,
+            rowY,
             style,
             scaleFactor,
             ascent,
-            fillColor,
-            word.emphasis
+            progress,
+            emphasis
           );
         }
         x += width;
       }
-      lineY += style.fontSize * style.lineSpacing;
     }
     ctx.restore();
   }
@@ -292,9 +431,8 @@ function resolveTransitionMs(style) {
   );
 }
 function computeLineAlpha(line, timeMs, transitionMs) {
-  const padding = transitionMs / 2;
-  const visibleStart = line.startMs - padding;
-  const visibleEnd = line.endMs + padding;
+  const visibleStart = line.startMs;
+  const visibleEnd = line.endMs;
   if (timeMs < visibleStart || timeMs > visibleEnd) {
     return 0;
   }
@@ -308,9 +446,41 @@ function isWordVisible(line, word, timeMs) {
   }
   return timeMs >= word.startMs;
 }
+function shouldBounceWord(style, emphasis) {
+  if (style.preset === "ghost") {
+    return false;
+  }
+  if (resolveStyleFlag(style, "bounce")) {
+    return true;
+  }
+  return emphasis >= 0.85;
+}
+function resolveAnchorY(playHeight, position) {
+  if (position === "top_safe") {
+    return playHeight * TOP_SAFE_ANCHOR_RATIO;
+  }
+  if (position === "center") {
+    return playHeight * CENTER_ANCHOR_RATIO;
+  }
+  return playHeight * BOTTOM_SAFE_ANCHOR_RATIO;
+}
+function clampBaselineY(baselineY, rowCount, ascent, descent, lineStep, safeTop, safeBottom) {
+  const rows = Math.max(1, rowCount);
+  const blockTop = baselineY - ascent;
+  const blockBottom = baselineY + (rows - 1) * lineStep + descent;
+  if (blockTop < safeTop) {
+    baselineY += safeTop - blockTop;
+  }
+  if (blockBottom > safeBottom) {
+    baselineY -= blockBottom - safeBottom;
+  }
+  const minBaselineY = safeTop + ascent;
+  const maxBaselineY = safeBottom - descent - (rows - 1) * lineStep;
+  return clamp(baselineY, minBaselineY, Math.max(minBaselineY, maxBaselineY));
+}
 
 // src/index.ts
-var injectedVersion = "1.2.0".length > 0 ? "1.2.0" : "dev";
+var injectedVersion = "1.2.2".length > 0 ? "1.2.2" : "dev";
 var VERSION = injectedVersion;
 export {
   VERSION,

package/dist/renderer.iife.js

@@ -204,6 +204,33 @@ var SubvoRenderer = (() => {
   }
 
   // src/effects.ts
+  var PRESET_FEATURE_DEFAULTS = {
+    fire: {
+      highlightBox: true,
+      karaokeFill: true,
+      bounce: true
+    },
+    clean: {
+      highlightBox: false,
+      karaokeFill: true,
+      bounce: false
+    },
+    luxury: {
+      highlightBox: true,
+      karaokeFill: false,
+      bounce: false
+    },
+    pop: {
+      highlightBox: false,
+      karaokeFill: true,
+      bounce: true
+    },
+    ghost: {
+      highlightBox: false,
+      karaokeFill: false,
+      bounce: false
+    }
+  };
   function clamp(value, min = 0, max = 1) {
     return Math.min(max, Math.max(min, value));
   }
@@ -215,46 +242,142 @@ var SubvoRenderer = (() => {
   function computePulseScale(style, progress) {
     return 1 + (style.pulse - 1) * progress * style.highlightStrength;
   }
+  function computeImpactProgress(word, timeMs, durationMs = 150) {
+    if (durationMs <= 0) return 0;
+    return clamp((timeMs - word.startMs) / durationMs);
+  }
+  function computeImpactScale(progress) {
+    const clampedProgress = clamp(progress);
+    if (clampedProgress <= 0 || clampedProgress >= 1) {
+      return 1;
+    }
+    if (clampedProgress < 0.3) {
+      return 1 + clampedProgress * 0.8;
+    }
+    return Math.max(1, 1.25 - (clampedProgress - 0.3) * 0.35);
+  }
+  function resolveStyleFlag(style, key) {
+    const value = style[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+    return PRESET_FEATURE_DEFAULTS[style.preset][key];
+  }
 
   // src/drawText.ts
-  function drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor, emphasis = 0) {
+  var BOX_PADDING_X = 12;
+  var BOX_PADDING_Y = 6;
+  var BOX_RADIUS = 8;
+  function drawWord(ctx, rawText, text, x, y, style, scaleFactor, ascent, progress = 0, emphasis = 0) {
+    const activeProgress = Math.max(0, Math.min(1, progress));
     const emphasisBoost = emphasis > 0.6 ? Math.min(1, (emphasis - 0.6) / 0.4) : 0;
     const effectiveScale = scaleFactor * (1 + emphasisBoost * 0.06);
     const invScale = 1 / effectiveScale;
-    const strokeWidth = style.outlineWidth + emphasisBoost * 1.2;
-    const baseBlur = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
-    const emphasisBlur = style.fontSize * 0.12 * emphasisBoost * invScale;
+    const outlineMultiplier = emphasis >= 0.6 ? 1.4 : 1;
+    const strokeWidth = style.outlineWidth * outlineMultiplier + emphasisBoost * 1.2;
+    const glowIntensity = style.glowIntensity + (emphasis >= 0.75 ? 0.4 : 0);
+    const isActive = activeProgress > 0;
+    const highlightBoxActive = resolveStyleFlag(style, "highlightBox") && isActive && emphasis >= 0.7;
+    const karaokeFillActive = resolveStyleFlag(style, "karaokeFill") && isActive && activeProgress < 1;
+    const inactiveFillColor = !resolveStyleFlag(style, "karaokeFill") && style.preset !== "ghost" && emphasis >= 0.75 ? style.highlightColor : style.baseColor;
+    const baseFillColor = highlightBoxActive ? style.baseColor : isActive && karaokeFillActive ? style.baseColor : inactiveFillColor;
+    const activeFillColor = highlightBoxActive ? style.baseColor : style.highlightColor;
+    const textBounds = measureTextBounds(ctx, rawText, ascent);
     ctx.save();
     ctx.translate(x, y);
     ctx.translate(0, -ascent);
     ctx.scale(effectiveScale, effectiveScale);
     ctx.translate(0, ascent);
-    ctx.fillStyle = fillColor;
+    if (highlightBoxActive) {
+      resetShadow(ctx);
+      drawHighlightBox(ctx, textBounds, style.highlightColor);
+    }
+    resetShadow(ctx);
     if (strokeWidth > 0) {
       ctx.lineWidth = strokeWidth * invScale;
       ctx.strokeStyle = style.outlineColor;
       ctx.strokeText(text, 0, 0);
     }
-    if (style.shadow || style.glowIntensity > 0 || emphasisBoost > 0) {
-      ctx.shadowColor = emphasisBoost > 0 ? fillColor : style.outlineColor;
+    applyTextEffects(
+      ctx,
+      style,
+      invScale,
+      glowIntensity,
+      emphasis >= 0.75 ? style.highlightColor : style.outlineColor
+    );
+    ctx.fillStyle = isActive && !karaokeFillActive ? activeFillColor : baseFillColor;
+    ctx.fillText(text, 0, 0);
+    if (karaokeFillActive) {
+      ctx.save();
+      applyTextEffects(ctx, style, invScale, glowIntensity, style.highlightColor);
+      ctx.beginPath();
+      ctx.rect(
+        textBounds.left - 1 * invScale,
+        textBounds.top - 2 * invScale,
+        (textBounds.width + 2 * invScale) * activeProgress,
+        textBounds.height + 4 * invScale
+      );
+      ctx.clip();
+      ctx.fillStyle = style.highlightColor;
+      ctx.fillText(text, 0, 0);
+      ctx.restore();
+    }
+    ctx.restore();
+  }
+  function measureTextBounds(ctx, rawText, fallbackAscent) {
+    const metrics = ctx.measureText(rawText);
+    const left = -metrics.actualBoundingBoxLeft;
+    const width = Math.max(
+      metrics.width,
+      metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight
+    );
+    const ascent = metrics.actualBoundingBoxAscent || fallbackAscent;
+    const descent = metrics.actualBoundingBoxDescent || Math.max(4, fallbackAscent * 0.28);
+    return {
+      left,
+      top: -ascent,
+      width,
+      height: ascent + descent
+    };
+  }
+  function drawHighlightBox(ctx, textBounds, color) {
+    const boxX = textBounds.left - BOX_PADDING_X;
+    const boxY = textBounds.top - BOX_PADDING_Y;
+    const boxWidth = textBounds.width + BOX_PADDING_X * 2;
+    const boxHeight = textBounds.height + BOX_PADDING_Y * 2;
+    ctx.beginPath();
+    ctx.roundRect(boxX, boxY, boxWidth, boxHeight, BOX_RADIUS);
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+  function applyTextEffects(ctx, style, invScale, glowIntensity, shadowColor) {
+    if (style.shadow || glowIntensity > 0) {
+      ctx.shadowColor = shadowColor;
       ctx.shadowOffsetX = style.shadow ? style.shadowDepth * invScale : 0;
       ctx.shadowOffsetY = style.shadow ? style.shadowDepth * invScale : 0;
-      ctx.shadowBlur = baseBlur + emphasisBlur;
-    } else {
-      ctx.shadowColor = "transparent";
-      ctx.shadowBlur = 0;
-      ctx.shadowOffsetX = 0;
-      ctx.shadowOffsetY = 0;
+      ctx.shadowBlur = style.fontSize * glowIntensity * invScale;
+      return;
     }
-    ctx.fillText(text, 0, 0);
-    ctx.restore();
+    resetShadow(ctx);
+  }
+  function resetShadow(ctx) {
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
   }
 
   // src/renderFrame.ts
   var DEFAULT_TRANSITION_MS = 150;
   var MIN_TRANSITION_MS = 120;
   var MAX_TRANSITION_MS = 180;
+  var TOP_UNSAFE_RATIO = 0.14;
+  var BOTTOM_UNSAFE_RATIO = 0.24;
+  var TOP_SAFE_ANCHOR_RATIO = 0.22;
+  var CENTER_ANCHOR_RATIO = 0.5;
+  var BOTTOM_SAFE_ANCHOR_RATIO = 0.68;
   function renderFrame(ctx, renderJob, timeMs) {
+    var _a;
     const { playRes, style } = renderJob;
     const layout = computeLayout(ctx, renderJob);
     const transitionMs = resolveTransitionMs(style);
@@ -276,36 +399,52 @@ var SubvoRenderer = (() => {
     ctx.textBaseline = "alphabetic";
     const metrics = ctx.measureText("Mg");
     const ascent = metrics.actualBoundingBoxAscent;
+    const descent = metrics.actualBoundingBoxDescent || Math.max(4, style.fontSize * 0.28);
     const centerX = playRes.width / 2;
-    let y = style.position === "center" ? playRes.height / 2 + style.offsetY : playRes.height * 0.92 + style.offsetY;
+    const lineStep = style.fontSize * style.lineSpacing;
+    const safeTop = playRes.height * TOP_UNSAFE_RATIO;
+    const safeBottom = playRes.height * (1 - BOTTOM_UNSAFE_RATIO);
+    const anchorY = resolveAnchorY(playRes.height, style.position) + style.offsetY;
     for (const { entry, alpha } of visibleLines) {
       ctx.save();
       ctx.globalAlpha = alpha;
-      let lineY = y;
-      for (const row of entry.rows) {
+      const baselineY = clampBaselineY(
+        anchorY,
+        entry.rows.length,
+        ascent,
+        descent,
+        lineStep,
+        safeTop,
+        safeBottom
+      );
+      for (const [rowIndex, row] of entry.rows.entries()) {
         let x = centerX - row.width / 2;
+        const rowY = baselineY + rowIndex * lineStep;
         for (const { word, text, width } of row.words) {
           const visibleWord = isWordVisible(entry.line, word, timeMs);
           if (visibleWord) {
             const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
+            const emphasis = (_a = word.emphasis) != null ? _a : 0;
             const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-            const scaleFactor = computePulseScale(style, progress);
-            const fillColor = activeWord ? style.highlightColor : style.baseColor;
+            const impactProgress = activeWord ? computeImpactProgress(word, timeMs) : 0;
+            const pulseScale = computePulseScale(style, progress);
+            const bounceScale = shouldBounceWord(style, emphasis) ? computeImpactScale(impactProgress) : 1;
+            const scaleFactor = pulseScale * bounceScale;
             drawWord(
               ctx,
+              word.text,
               text,
               x,
-              lineY,
+              rowY,
               style,
               scaleFactor,
               ascent,
-              fillColor,
-              word.emphasis
+              progress,
+              emphasis
             );
           }
           x += width;
         }
-        lineY += style.fontSize * style.lineSpacing;
       }
       ctx.restore();
     }
@@ -319,9 +458,8 @@ var SubvoRenderer = (() => {
     );
   }
   function computeLineAlpha(line, timeMs, transitionMs) {
-    const padding = transitionMs / 2;
-    const visibleStart = line.startMs - padding;
-    const visibleEnd = line.endMs + padding;
+    const visibleStart = line.startMs;
+    const visibleEnd = line.endMs;
     if (timeMs < visibleStart || timeMs > visibleEnd) {
       return 0;
     }
@@ -335,9 +473,41 @@ var SubvoRenderer = (() => {
     }
     return timeMs >= word.startMs;
   }
+  function shouldBounceWord(style, emphasis) {
+    if (style.preset === "ghost") {
+      return false;
+    }
+    if (resolveStyleFlag(style, "bounce")) {
+      return true;
+    }
+    return emphasis >= 0.85;
+  }
+  function resolveAnchorY(playHeight, position) {
+    if (position === "top_safe") {
+      return playHeight * TOP_SAFE_ANCHOR_RATIO;
+    }
+    if (position === "center") {
+      return playHeight * CENTER_ANCHOR_RATIO;
+    }
+    return playHeight * BOTTOM_SAFE_ANCHOR_RATIO;
+  }
+  function clampBaselineY(baselineY, rowCount, ascent, descent, lineStep, safeTop, safeBottom) {
+    const rows = Math.max(1, rowCount);
+    const blockTop = baselineY - ascent;
+    const blockBottom = baselineY + (rows - 1) * lineStep + descent;
+    if (blockTop < safeTop) {
+      baselineY += safeTop - blockTop;
+    }
+    if (blockBottom > safeBottom) {
+      baselineY -= blockBottom - safeBottom;
+    }
+    const minBaselineY = safeTop + ascent;
+    const maxBaselineY = safeBottom - descent - (rows - 1) * lineStep;
+    return clamp(baselineY, minBaselineY, Math.max(minBaselineY, maxBaselineY));
+  }
 
   // src/index.ts
-  var injectedVersion = "1.2.0".length > 0 ? "1.2.0" : "dev";
+  var injectedVersion = "1.2.2".length > 0 ? "1.2.2" : "dev";
   var VERSION = injectedVersion;
   return __toCommonJS(src_exports);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subvo/renderer",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "main": "./dist/renderer.esm.js",
   "module": "./dist/renderer.esm.js",