@subvo/renderer 1.0.0 → 1.2.1

package/dist/renderer.d.ts

@@ -17,6 +17,8 @@ type RenderLine = {
     id: string;
     startMs: number;
     endMs: number;
+    mode?: RenderMode;
+    breakHints?: string[];
     words: RenderWord[];
 };
 type RenderWord = {
@@ -24,6 +26,7 @@ type RenderWord = {
     text: string;
     startMs: number;
     endMs: number;
+    emphasis?: number;
 };
 type RenderLayoutHints = {
     maxWordsPerLine?: number;
@@ -34,8 +37,9 @@ 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 = {
     fontFamily: string;
     fontSize: number;
@@ -56,6 +60,9 @@ type RenderStyle = {
     offsetY: number;
     fadeInMs: number;
     fadeOutMs: number;
+    highlightBox?: boolean;
+    karaokeFill?: boolean;
+    bounce?: boolean;
     preset: RenderPreset;
 };
 

package/dist/renderer.esm.js

@@ -1,64 +1,212 @@
 // src/layout.ts
+var MAX_ROW_WIDTH_RATIO = 0.72;
+var ONE_ROW_COMFORT_RATIO = 0.66;
+var CLOSING_PUNCTUATION_RE = /["')\]}”’]+$/;
+var STRONG_BOUNDARY_RE = /[.?!:;]$/;
+var SOFT_BOUNDARY_RE = /[,]$/;
+var SOFT_BREAK_WORDS = /* @__PURE__ */ new Set([
+  "and",
+  "because",
+  "but",
+  "now",
+  "ok",
+  "okay",
+  "so",
+  "then",
+  "well"
+]);
 function computeLayout(ctx, renderJob) {
-  const { style } = renderJob;
+  const { style, playRes } = renderJob;
   ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
   ctx.textBaseline = "alphabetic";
   return renderJob.lines.map((line) => {
-    const rows = chunkWords(line.words, style.maxWordsPerLine);
+    const rows = resolveRows(
+      ctx,
+      line.words,
+      line.breakHints,
+      style.maxWordsPerLine,
+      playRes.width
+    );
     return {
       line,
-      rows: rows.map((words) => {
-        let rowWidth = 0;
-        const measuredWords = words.map((word, index) => {
-          const text = index < words.length - 1 ? `${word.text} ` : word.text;
-          const metrics = ctx.measureText(text);
-          const width = metrics.width;
-          rowWidth += width;
-          return {
-            word,
-            text,
-            width
-          };
-        });
-        return {
-          words: measuredWords,
-          width: rowWidth
-        };
-      })
+      rows: rows.map((words) => buildLayoutRow(ctx, words))
     };
   });
 }
-function chunkWords(words, maxPerLine) {
-  if (maxPerLine <= 0) return [words];
-  const rows = [];
-  let current = [];
-  for (const word of words) {
-    current.push(word);
-    if (current.length >= maxPerLine) {
-      rows.push(current);
-      current = [];
+function resolveRows(ctx, words, breakHints, maxWordsPerLine, playWidth) {
+  if (words.length <= 1) {
+    return [words];
+  }
+  const measuredWords = words.map((word) => ({
+    word,
+    width: ctx.measureText(word.text).width
+  }));
+  const spaceWidth = ctx.measureText(" ").width;
+  const hintSet = new Set((breakHints != null ? breakHints : []).map((hint) => String(hint)));
+  const maxRowWidth = playWidth * MAX_ROW_WIDTH_RATIO;
+  const totalWidth = measureRowWidth(measuredWords, spaceWidth);
+  const candidates = [];
+  candidates.push({
+    rows: [measuredWords],
+    score: scoreSingleRowCandidate(
+      [measuredWords],
+      totalWidth,
+      maxRowWidth,
+      hintSet,
+      maxWordsPerLine
+    )
+  });
+  for (let index = 1; index < measuredWords.length; index += 1) {
+    const first = measuredWords.slice(0, index);
+    const second = measuredWords.slice(index);
+    candidates.push({
+      rows: [first, second],
+      score: scoreTwoRowCandidate(
+        [first, second],
+        hintSet,
+        maxRowWidth,
+        maxWordsPerLine,
+        spaceWidth
+      )
+    });
+  }
+  candidates.sort((left, right) => left.score - right.score);
+  return candidates[0].rows.map((row) => row.map((entry) => entry.word));
+}
+function scoreSingleRowCandidate(rows, totalWidth, maxRowWidth, hintSet, maxWordsPerLine) {
+  var _a, _b;
+  let score = 0;
+  score += overflowPenalty(totalWidth, maxRowWidth) * 6;
+  if (totalWidth > maxRowWidth * ONE_ROW_COMFORT_RATIO) {
+    score += (totalWidth - maxRowWidth * ONE_ROW_COMFORT_RATIO) * 0.12;
+  }
+  const wordCount = (_b = (_a = rows[0]) == null ? void 0 : _a.length) != null ? _b : 0;
+  if (wordCount > Math.max(4, maxWordsPerLine + 1)) {
+    score += (wordCount - Math.max(4, maxWordsPerLine + 1)) * 40;
+  }
+  if (hintSet.size > 0) {
+    score += 60;
+  }
+  return score;
+}
+function scoreTwoRowCandidate(rows, hintSet, maxRowWidth, maxWordsPerLine, spaceWidth) {
+  var _a, _b;
+  const [first, second] = rows;
+  const firstWidth = measureRowWidth(first, spaceWidth);
+  const secondWidth = measureRowWidth(second, spaceWidth);
+  let score = 0;
+  score += overflowPenalty(firstWidth, maxRowWidth) * 8;
+  score += overflowPenalty(secondWidth, maxRowWidth) * 8;
+  score += Math.abs(firstWidth - secondWidth) * 0.18;
+  score += Math.abs(first.length - second.length) * 16;
+  if (first.length === 1 || second.length === 1) {
+    score += 320;
+  } else {
+    if (first.length === 2) score += 45;
+    if (second.length === 2) score += 45;
+  }
+  const preferredWordsPerRow = Math.max(3, maxWordsPerLine);
+  if (first.length > preferredWordsPerRow + 2) {
+    score += (first.length - (preferredWordsPerRow + 2)) * 25;
+  }
+  if (second.length > preferredWordsPerRow + 2) {
+    score += (second.length - (preferredWordsPerRow + 2)) * 25;
+  }
+  const nextRowFirstWord = (_a = second[0]) == null ? void 0 : _a.word;
+  if (nextRowFirstWord) {
+    if (hintSet.has(String(nextRowFirstWord.id))) {
+      score -= 70;
+    } else if (hintSet.size > 0) {
+      score += 20;
     }
   }
-  if (current.length > 0) {
-    rows.push(current);
+  const boundaryWord = (_b = first[first.length - 1]) == null ? void 0 : _b.word;
+  if (boundaryWord) {
+    score -= boundaryBonus(boundaryWord.text);
+  }
+  if (nextRowFirstWord) {
+    score -= softBreakWordBonus(nextRowFirstWord.text);
+  }
+  return score;
+}
+function overflowPenalty(width, maxWidth) {
+  return Math.max(0, width - maxWidth);
+}
+function boundaryBonus(text) {
+  const normalized = normalizeBoundaryToken(text);
+  if (!normalized) {
+    return 0;
+  }
+  if (STRONG_BOUNDARY_RE.test(normalized)) {
+    return 55;
+  }
+  if (SOFT_BOUNDARY_RE.test(normalized)) {
+    return 35;
   }
-  return rows;
+  return 0;
+}
+function softBreakWordBonus(text) {
+  return SOFT_BREAK_WORDS.has(normalizeWord(text)) ? 18 : 0;
+}
+function normalizeBoundaryToken(text) {
+  return text.replace(CLOSING_PUNCTUATION_RE, "");
+}
+function normalizeWord(text) {
+  return normalizeBoundaryToken(text).replace(/^[^\w]+|[^\w]+$/g, "").toLowerCase();
+}
+function measureRowWidth(words, spaceWidth) {
+  const wordWidth = words.reduce((total, entry) => total + entry.width, 0);
+  return wordWidth + Math.max(0, words.length - 1) * spaceWidth;
+}
+function buildLayoutRow(ctx, words) {
+  let rowWidth = 0;
+  const measuredWords = words.map((word, index) => {
+    const text = index < words.length - 1 ? `${word.text} ` : word.text;
+    const width = ctx.measureText(text).width;
+    rowWidth += width;
+    return {
+      word,
+      text,
+      width
+    };
+  });
+  return {
+    words: measuredWords,
+    width: rowWidth
+  };
 }
 
 // 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));
 }
-function computeFadeAlpha(style, line, timeMs) {
-  let alpha = 1;
-  if (style.fadeInMs > 0) {
-    alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
-  }
-  if (style.fadeOutMs > 0) {
-    alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
-  }
-  return clamp(alpha);
-}
 function computeWordProgress(word, timeMs) {
   const duration = word.endMs - word.startMs;
   if (duration <= 0) return 0;
@@ -67,78 +215,273 @@ 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) {
-  const invScale = 1 / scaleFactor;
+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 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(scaleFactor, scaleFactor);
+  ctx.scale(effectiveScale, effectiveScale);
   ctx.translate(0, ascent);
-  ctx.fillStyle = fillColor;
-  if (style.outlineWidth > 0) {
-    ctx.lineWidth = style.outlineWidth * invScale;
+  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) {
-    ctx.shadowColor = 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 = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
-  } 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.22;
+var TOP_SAFE_ANCHOR_RATIO = 0.22;
+var CENTER_ANCHOR_RATIO = 0.5;
+var BOTTOM_SAFE_ANCHOR_RATIO = 0.7;
 function renderFrame(ctx, renderJob, timeMs) {
+  var _a;
   const { playRes, style } = renderJob;
   const layout = computeLayout(ctx, renderJob);
-  const active = layout.find(
-    (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
-  );
-  if (!active) return;
+  const transitionMs = resolveTransitionMs(style);
+  const visibleLines = layout.map((entry) => ({
+    entry,
+    alpha: computeLineAlpha(entry.line, timeMs, transitionMs)
+  })).filter((entry) => entry.alpha > 0);
+  if (!visibleLines.length) return;
   const transform = ctx.getTransform();
   const canvasWidth = ctx.canvas.width / (transform.a || 1);
   const canvasHeight = ctx.canvas.height / (transform.d || 1);
   const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
   const offsetX = (canvasWidth - playRes.width * scale) / 2;
   const offsetY = (canvasHeight - playRes.height * scale) / 2;
-  const alpha = computeFadeAlpha(style, active.line, timeMs);
   ctx.save();
   ctx.translate(offsetX, offsetY);
   ctx.scale(scale, scale);
-  ctx.globalAlpha = alpha;
   ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
   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;
-  for (const row of active.rows) {
-    let x = centerX - row.width / 2;
-    for (const { word, text, width } of row.words) {
-      const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-      const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-      const scaleFactor = computePulseScale(style, progress);
-      const fillColor = activeWord ? style.highlightColor : style.baseColor;
-      drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
-      x += width;
+  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;
+    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 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,
+            rowY,
+            style,
+            scaleFactor,
+            ascent,
+            progress,
+            emphasis
+          );
+        }
+        x += width;
+      }
     }
-    y += style.fontSize * style.lineSpacing;
+    ctx.restore();
   }
   ctx.restore();
 }
+function resolveTransitionMs(style) {
+  return clamp(
+    Math.max(DEFAULT_TRANSITION_MS, style.fadeInMs, style.fadeOutMs),
+    MIN_TRANSITION_MS,
+    MAX_TRANSITION_MS
+  );
+}
+function computeLineAlpha(line, timeMs, transitionMs) {
+  const padding = transitionMs / 2;
+  const visibleStart = line.startMs - padding;
+  const visibleEnd = line.endMs + padding;
+  if (timeMs < visibleStart || timeMs > visibleEnd) {
+    return 0;
+  }
+  const fadeIn = clamp((timeMs - visibleStart) / transitionMs);
+  const fadeOut = clamp((visibleEnd - timeMs) / transitionMs);
+  return Math.min(fadeIn, fadeOut);
+}
+function isWordVisible(line, word, timeMs) {
+  if (line.mode !== "progressive_build") {
+    return true;
+  }
+  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.0.0".length > 0 ? "1.0.0" : "dev";
+var injectedVersion = "1.2.1".length > 0 ? "1.2.1" : "dev";
 var VERSION = injectedVersion;
 export {
   VERSION,

package/dist/renderer.iife.js

@@ -26,66 +26,214 @@ var SubvoRenderer = (() => {
   });
 
   // src/layout.ts
+  var MAX_ROW_WIDTH_RATIO = 0.72;
+  var ONE_ROW_COMFORT_RATIO = 0.66;
+  var CLOSING_PUNCTUATION_RE = /["')\]}”’]+$/;
+  var STRONG_BOUNDARY_RE = /[.?!:;]$/;
+  var SOFT_BOUNDARY_RE = /[,]$/;
+  var SOFT_BREAK_WORDS = /* @__PURE__ */ new Set([
+    "and",
+    "because",
+    "but",
+    "now",
+    "ok",
+    "okay",
+    "so",
+    "then",
+    "well"
+  ]);
   function computeLayout(ctx, renderJob) {
-    const { style } = renderJob;
+    const { style, playRes } = renderJob;
     ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
     ctx.textBaseline = "alphabetic";
     return renderJob.lines.map((line) => {
-      const rows = chunkWords(line.words, style.maxWordsPerLine);
+      const rows = resolveRows(
+        ctx,
+        line.words,
+        line.breakHints,
+        style.maxWordsPerLine,
+        playRes.width
+      );
       return {
         line,
-        rows: rows.map((words) => {
-          let rowWidth = 0;
-          const measuredWords = words.map((word, index) => {
-            const text = index < words.length - 1 ? `${word.text} ` : word.text;
-            const metrics = ctx.measureText(text);
-            const width = metrics.width;
-            rowWidth += width;
-            return {
-              word,
-              text,
-              width
-            };
-          });
-          return {
-            words: measuredWords,
-            width: rowWidth
-          };
-        })
+        rows: rows.map((words) => buildLayoutRow(ctx, words))
       };
     });
   }
-  function chunkWords(words, maxPerLine) {
-    if (maxPerLine <= 0) return [words];
-    const rows = [];
-    let current = [];
-    for (const word of words) {
-      current.push(word);
-      if (current.length >= maxPerLine) {
-        rows.push(current);
-        current = [];
+  function resolveRows(ctx, words, breakHints, maxWordsPerLine, playWidth) {
+    if (words.length <= 1) {
+      return [words];
+    }
+    const measuredWords = words.map((word) => ({
+      word,
+      width: ctx.measureText(word.text).width
+    }));
+    const spaceWidth = ctx.measureText(" ").width;
+    const hintSet = new Set((breakHints != null ? breakHints : []).map((hint) => String(hint)));
+    const maxRowWidth = playWidth * MAX_ROW_WIDTH_RATIO;
+    const totalWidth = measureRowWidth(measuredWords, spaceWidth);
+    const candidates = [];
+    candidates.push({
+      rows: [measuredWords],
+      score: scoreSingleRowCandidate(
+        [measuredWords],
+        totalWidth,
+        maxRowWidth,
+        hintSet,
+        maxWordsPerLine
+      )
+    });
+    for (let index = 1; index < measuredWords.length; index += 1) {
+      const first = measuredWords.slice(0, index);
+      const second = measuredWords.slice(index);
+      candidates.push({
+        rows: [first, second],
+        score: scoreTwoRowCandidate(
+          [first, second],
+          hintSet,
+          maxRowWidth,
+          maxWordsPerLine,
+          spaceWidth
+        )
+      });
+    }
+    candidates.sort((left, right) => left.score - right.score);
+    return candidates[0].rows.map((row) => row.map((entry) => entry.word));
+  }
+  function scoreSingleRowCandidate(rows, totalWidth, maxRowWidth, hintSet, maxWordsPerLine) {
+    var _a, _b;
+    let score = 0;
+    score += overflowPenalty(totalWidth, maxRowWidth) * 6;
+    if (totalWidth > maxRowWidth * ONE_ROW_COMFORT_RATIO) {
+      score += (totalWidth - maxRowWidth * ONE_ROW_COMFORT_RATIO) * 0.12;
+    }
+    const wordCount = (_b = (_a = rows[0]) == null ? void 0 : _a.length) != null ? _b : 0;
+    if (wordCount > Math.max(4, maxWordsPerLine + 1)) {
+      score += (wordCount - Math.max(4, maxWordsPerLine + 1)) * 40;
+    }
+    if (hintSet.size > 0) {
+      score += 60;
+    }
+    return score;
+  }
+  function scoreTwoRowCandidate(rows, hintSet, maxRowWidth, maxWordsPerLine, spaceWidth) {
+    var _a, _b;
+    const [first, second] = rows;
+    const firstWidth = measureRowWidth(first, spaceWidth);
+    const secondWidth = measureRowWidth(second, spaceWidth);
+    let score = 0;
+    score += overflowPenalty(firstWidth, maxRowWidth) * 8;
+    score += overflowPenalty(secondWidth, maxRowWidth) * 8;
+    score += Math.abs(firstWidth - secondWidth) * 0.18;
+    score += Math.abs(first.length - second.length) * 16;
+    if (first.length === 1 || second.length === 1) {
+      score += 320;
+    } else {
+      if (first.length === 2) score += 45;
+      if (second.length === 2) score += 45;
+    }
+    const preferredWordsPerRow = Math.max(3, maxWordsPerLine);
+    if (first.length > preferredWordsPerRow + 2) {
+      score += (first.length - (preferredWordsPerRow + 2)) * 25;
+    }
+    if (second.length > preferredWordsPerRow + 2) {
+      score += (second.length - (preferredWordsPerRow + 2)) * 25;
+    }
+    const nextRowFirstWord = (_a = second[0]) == null ? void 0 : _a.word;
+    if (nextRowFirstWord) {
+      if (hintSet.has(String(nextRowFirstWord.id))) {
+        score -= 70;
+      } else if (hintSet.size > 0) {
+        score += 20;
       }
     }
-    if (current.length > 0) {
-      rows.push(current);
+    const boundaryWord = (_b = first[first.length - 1]) == null ? void 0 : _b.word;
+    if (boundaryWord) {
+      score -= boundaryBonus(boundaryWord.text);
+    }
+    if (nextRowFirstWord) {
+      score -= softBreakWordBonus(nextRowFirstWord.text);
+    }
+    return score;
+  }
+  function overflowPenalty(width, maxWidth) {
+    return Math.max(0, width - maxWidth);
+  }
+  function boundaryBonus(text) {
+    const normalized = normalizeBoundaryToken(text);
+    if (!normalized) {
+      return 0;
+    }
+    if (STRONG_BOUNDARY_RE.test(normalized)) {
+      return 55;
+    }
+    if (SOFT_BOUNDARY_RE.test(normalized)) {
+      return 35;
     }
-    return rows;
+    return 0;
+  }
+  function softBreakWordBonus(text) {
+    return SOFT_BREAK_WORDS.has(normalizeWord(text)) ? 18 : 0;
+  }
+  function normalizeBoundaryToken(text) {
+    return text.replace(CLOSING_PUNCTUATION_RE, "");
+  }
+  function normalizeWord(text) {
+    return normalizeBoundaryToken(text).replace(/^[^\w]+|[^\w]+$/g, "").toLowerCase();
+  }
+  function measureRowWidth(words, spaceWidth) {
+    const wordWidth = words.reduce((total, entry) => total + entry.width, 0);
+    return wordWidth + Math.max(0, words.length - 1) * spaceWidth;
+  }
+  function buildLayoutRow(ctx, words) {
+    let rowWidth = 0;
+    const measuredWords = words.map((word, index) => {
+      const text = index < words.length - 1 ? `${word.text} ` : word.text;
+      const width = ctx.measureText(text).width;
+      rowWidth += width;
+      return {
+        word,
+        text,
+        width
+      };
+    });
+    return {
+      words: measuredWords,
+      width: rowWidth
+    };
   }
 
   // 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));
   }
-  function computeFadeAlpha(style, line, timeMs) {
-    let alpha = 1;
-    if (style.fadeInMs > 0) {
-      alpha = Math.min(alpha, (timeMs - line.startMs) / style.fadeInMs);
-    }
-    if (style.fadeOutMs > 0) {
-      alpha = Math.min(alpha, (line.endMs - timeMs) / style.fadeOutMs);
-    }
-    return clamp(alpha);
-  }
   function computeWordProgress(word, timeMs) {
     const duration = word.endMs - word.startMs;
     if (duration <= 0) return 0;
@@ -94,78 +242,273 @@ 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) {
-    const invScale = 1 / scaleFactor;
+  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 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(scaleFactor, scaleFactor);
+    ctx.scale(effectiveScale, effectiveScale);
     ctx.translate(0, ascent);
-    ctx.fillStyle = fillColor;
-    if (style.outlineWidth > 0) {
-      ctx.lineWidth = style.outlineWidth * invScale;
+    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) {
-      ctx.shadowColor = 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 = style.glowIntensity > 0 ? style.fontSize * 0.3 * invScale : 0;
-    } 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.22;
+  var TOP_SAFE_ANCHOR_RATIO = 0.22;
+  var CENTER_ANCHOR_RATIO = 0.5;
+  var BOTTOM_SAFE_ANCHOR_RATIO = 0.7;
   function renderFrame(ctx, renderJob, timeMs) {
+    var _a;
     const { playRes, style } = renderJob;
     const layout = computeLayout(ctx, renderJob);
-    const active = layout.find(
-      (line) => timeMs >= line.line.startMs && timeMs <= line.line.endMs
-    );
-    if (!active) return;
+    const transitionMs = resolveTransitionMs(style);
+    const visibleLines = layout.map((entry) => ({
+      entry,
+      alpha: computeLineAlpha(entry.line, timeMs, transitionMs)
+    })).filter((entry) => entry.alpha > 0);
+    if (!visibleLines.length) return;
     const transform = ctx.getTransform();
     const canvasWidth = ctx.canvas.width / (transform.a || 1);
     const canvasHeight = ctx.canvas.height / (transform.d || 1);
     const scale = Math.max(canvasWidth / playRes.width, canvasHeight / playRes.height);
     const offsetX = (canvasWidth - playRes.width * scale) / 2;
     const offsetY = (canvasHeight - playRes.height * scale) / 2;
-    const alpha = computeFadeAlpha(style, active.line, timeMs);
     ctx.save();
     ctx.translate(offsetX, offsetY);
     ctx.scale(scale, scale);
-    ctx.globalAlpha = alpha;
     ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontFamily}`;
     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;
-    for (const row of active.rows) {
-      let x = centerX - row.width / 2;
-      for (const { word, text, width } of row.words) {
-        const activeWord = timeMs >= word.startMs && timeMs <= word.endMs;
-        const progress = activeWord ? computeWordProgress(word, timeMs) : 0;
-        const scaleFactor = computePulseScale(style, progress);
-        const fillColor = activeWord ? style.highlightColor : style.baseColor;
-        drawWord(ctx, text, x, y, style, scaleFactor, ascent, fillColor);
-        x += width;
+    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;
+      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 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,
+              rowY,
+              style,
+              scaleFactor,
+              ascent,
+              progress,
+              emphasis
+            );
+          }
+          x += width;
+        }
       }
-      y += style.fontSize * style.lineSpacing;
+      ctx.restore();
     }
     ctx.restore();
   }
+  function resolveTransitionMs(style) {
+    return clamp(
+      Math.max(DEFAULT_TRANSITION_MS, style.fadeInMs, style.fadeOutMs),
+      MIN_TRANSITION_MS,
+      MAX_TRANSITION_MS
+    );
+  }
+  function computeLineAlpha(line, timeMs, transitionMs) {
+    const padding = transitionMs / 2;
+    const visibleStart = line.startMs - padding;
+    const visibleEnd = line.endMs + padding;
+    if (timeMs < visibleStart || timeMs > visibleEnd) {
+      return 0;
+    }
+    const fadeIn = clamp((timeMs - visibleStart) / transitionMs);
+    const fadeOut = clamp((visibleEnd - timeMs) / transitionMs);
+    return Math.min(fadeIn, fadeOut);
+  }
+  function isWordVisible(line, word, timeMs) {
+    if (line.mode !== "progressive_build") {
+      return true;
+    }
+    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.0.0".length > 0 ? "1.0.0" : "dev";
+  var injectedVersion = "1.2.1".length > 0 ? "1.2.1" : "dev";
   var VERSION = injectedVersion;
   return __toCommonJS(src_exports);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subvo/renderer",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "./dist/renderer.esm.js",
   "module": "./dist/renderer.esm.js",
@@ -15,11 +15,11 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup"
+  },
   "devDependencies": {
     "tsup": "^8.0.0",
     "typescript": "^5.7.0"
-  },
-  "scripts": {
-    "build": "tsup"
   }
-}
+}