@shotstack/shotstack-canvas 1.5.5 → 1.5.7

package/dist/entry.node.cjs

@@ -100,7 +100,8 @@ var fontSchema = import_joi.default.object({
   size: import_joi.default.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: import_joi.default.alternatives().try(import_joi.default.string(), import_joi.default.number()).default("400"),
   color: import_joi.default.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: import_joi.default.number().min(0).max(1).default(1)
+  opacity: import_joi.default.number().min(0).max(1).default(1),
+  background: import_joi.default.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = import_joi.default.object({
   letterSpacing: import_joi.default.number().default(0),
@@ -136,15 +137,11 @@ var borderSchema = import_joi.default.object({
   width: import_joi.default.number().min(0).default(0),
   color: import_joi.default.string().pattern(HEX6).default("#000000"),
   opacity: import_joi.default.number().min(0).max(1).default(1),
-  borderRadius: import_joi.default.number().min(0).optional()
+  radius: import_joi.default.number().min(0).default(0)
 }).unknown(false);
 var backgroundSchema = import_joi.default.object({
   color: import_joi.default.string().pattern(HEX6).optional(),
-  opacity: import_joi.default.number().min(0).max(1).default(1),
-  backgroundRadius: import_joi.default.number().min(0).default(0),
-  borderRadius: import_joi.default.number().min(0).optional(),
-  // Deprecated: use backgroundRadius
-  border: borderSchema.optional()
+  opacity: import_joi.default.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = import_joi.default.alternatives().try(
   import_joi.default.number().min(0).default(0),
@@ -172,6 +169,7 @@ var RichTextAssetSchema = import_joi.default.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -857,7 +855,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -890,6 +888,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -908,6 +907,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -983,43 +996,45 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
-    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
-    if (p.background.color) {
-      const bgInset = halfBorder;
-      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX + bgInset,
-        y: bgY + bgInset,
-        width: bgWidth - bgInset * 2,
-        height: bgHeight - bgInset * 2,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: bgFillRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+    if (p.border && p.border.width > 0) {
       ops.push({
         op: "RectangleStroke",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
         stroke: {
-          width: p.background.border.width,
-          color: p.background.border.color,
-          opacity: p.background.border.opacity
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
         },
-        borderRadius
+        borderRadius: outerRadius
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1147,7 +1162,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1161,7 +1178,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1177,8 +1196,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1237,8 +1258,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1512,7 +1535,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1540,9 +1563,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1558,13 +1583,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2454,7 +2482,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2468,6 +2497,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
@@ -2520,7 +2550,7 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const hasBorderRadius = (asset.border?.radius ?? 0) > 0;
         const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`

package/dist/entry.node.d.cts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;
@@ -63,14 +64,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        backgroundRadius: number;
-        borderRadius?: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-            borderRadius?: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.node.d.ts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;
@@ -63,14 +64,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        backgroundRadius: number;
-        borderRadius?: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-            borderRadius?: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.node.js

@@ -62,7 +62,8 @@ var fontSchema = Joi.object({
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: Joi.number().min(0).max(1).default(1)
+  opacity: Joi.number().min(0).max(1).default(1),
+  background: Joi.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = Joi.object({
   letterSpacing: Joi.number().default(0),
@@ -98,15 +99,11 @@ var borderSchema = Joi.object({
   width: Joi.number().min(0).default(0),
   color: Joi.string().pattern(HEX6).default("#000000"),
   opacity: Joi.number().min(0).max(1).default(1),
-  borderRadius: Joi.number().min(0).optional()
+  radius: Joi.number().min(0).default(0)
 }).unknown(false);
 var backgroundSchema = Joi.object({
   color: Joi.string().pattern(HEX6).optional(),
-  opacity: Joi.number().min(0).max(1).default(1),
-  backgroundRadius: Joi.number().min(0).default(0),
-  borderRadius: Joi.number().min(0).optional(),
-  // Deprecated: use backgroundRadius
-  border: borderSchema.optional()
+  opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
   Joi.number().min(0).default(0),
@@ -134,6 +131,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -818,7 +816,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -851,6 +849,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -869,6 +868,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -944,43 +957,45 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
-    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
-    if (p.background.color) {
-      const bgInset = halfBorder;
-      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX + bgInset,
-        y: bgY + bgInset,
-        width: bgWidth - bgInset * 2,
-        height: bgHeight - bgInset * 2,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: bgFillRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+    if (p.border && p.border.width > 0) {
       ops.push({
         op: "RectangleStroke",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
         stroke: {
-          width: p.background.border.width,
-          color: p.background.border.color,
-          opacity: p.background.border.opacity
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
         },
-        borderRadius
+        borderRadius: outerRadius
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1108,7 +1123,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1122,7 +1139,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1138,8 +1157,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1198,8 +1219,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1473,7 +1496,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1501,9 +1524,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1519,13 +1544,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2415,7 +2443,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2429,6 +2458,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
@@ -2481,7 +2511,7 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const hasBorderRadius = (asset.border?.radius ?? 0) > 0;
         const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`

package/dist/entry.web.d.ts

@@ -33,6 +33,7 @@ type RichTextValidated = Required<{
         weight: string | number;
         color: string;
         opacity: number;
+        background?: string;
     };
     style?: {
         letterSpacing: number;
@@ -63,14 +64,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        backgroundRadius: number;
-        borderRadius?: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-            borderRadius?: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.web.js

@@ -66,7 +66,8 @@ var fontSchema = Joi.object({
   size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
   weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
   color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
-  opacity: Joi.number().min(0).max(1).default(1)
+  opacity: Joi.number().min(0).max(1).default(1),
+  background: Joi.string().pattern(HEX6).optional()
 }).unknown(false);
 var styleSchema = Joi.object({
   letterSpacing: Joi.number().default(0),
@@ -102,15 +103,11 @@ var borderSchema = Joi.object({
   width: Joi.number().min(0).default(0),
   color: Joi.string().pattern(HEX6).default("#000000"),
   opacity: Joi.number().min(0).max(1).default(1),
-  borderRadius: Joi.number().min(0).optional()
+  radius: Joi.number().min(0).default(0)
 }).unknown(false);
 var backgroundSchema = Joi.object({
   color: Joi.string().pattern(HEX6).optional(),
-  opacity: Joi.number().min(0).max(1).default(1),
-  backgroundRadius: Joi.number().min(0).default(0),
-  borderRadius: Joi.number().min(0).optional(),
-  // Deprecated: use backgroundRadius
-  border: borderSchema.optional()
+  opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
   Joi.number().min(0).default(0),
@@ -138,6 +135,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -823,7 +821,7 @@ function normalizePadding(padding) {
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
-  const borderWidth = p.background?.border?.width ?? 0;
+  const borderWidth = p.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
@@ -856,6 +854,7 @@ async function buildDrawOps(p) {
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
+  const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
@@ -874,6 +873,20 @@ async function buildDrawOps(p) {
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
+    if (p.font.background) {
+      const highlightPadding = p.font.size * 0.15;
+      const verticalPadding = p.font.size * 0.12;
+      const highlightHeight = p.font.size * 0.92 + verticalPadding * 2;
+      const highlightY = baselineY - p.font.size * 0.78 - verticalPadding;
+      highlighterOps.push({
+        op: "Rectangle",
+        x: lineX - highlightPadding,
+        y: highlightY,
+        width: line.width + highlightPadding * 2,
+        height: highlightHeight,
+        fill: { kind: "solid", color: p.font.background, opacity: 1 }
+      });
+    }
     for (const glyph of line.glyphs) {
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
@@ -949,43 +962,45 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
-    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
-    if (p.background.color) {
-      const bgInset = halfBorder;
-      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX + bgInset,
-        y: bgY + bgInset,
-        width: bgWidth - bgInset * 2,
-        height: bgHeight - bgInset * 2,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: bgFillRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+    if (p.border && p.border.width > 0) {
       ops.push({
         op: "RectangleStroke",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
         stroke: {
-          width: p.background.border.width,
-          color: p.background.border.color,
-          opacity: p.background.border.opacity
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
         },
-        borderRadius
+        borderRadius: outerRadius
       });
     }
   }
+  ops.push(...highlighterOps);
   ops.push(...textOps);
   return ops;
 }
@@ -1113,7 +1128,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const wordSegments = getWordSegments(lines);
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
-    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleWords === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
@@ -1127,7 +1144,9 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
-    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    if (visibleGlyphs === 0) {
+      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+    }
     const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
@@ -1143,8 +1162,10 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
   const result = [];
   let glyphIndex = 0;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1203,8 +1224,10 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
   if (totalUnits === 0) return ops;
   const result = [];
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
+    }
+    if (op.op === "FillPath" || op.op === "StrokePath") {
       break;
     }
   }
@@ -1478,7 +1501,7 @@ function sliceGlyphOps(ops, maxGlyphs) {
   let glyphCount = 0;
   let foundGlyphs = false;
   for (const op of ops) {
-    if (op.op === "BeginFrame") {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
       result.push(op);
       continue;
     }
@@ -1506,9 +1529,11 @@ function sliceGlyphOps(ops, maxGlyphs) {
   return result;
 }
 function addTypewriterCursor(ops, glyphCount, fontSize, time) {
-  const blinkRate = 2;
+  if (glyphCount === 0) return ops;
+  const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
-  if (!cursorVisible || glyphCount === 0) return ops;
+  const alwaysShowCursor = true;
+  if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
   let count = 0;
   for (const op of ops) {
@@ -1524,13 +1549,16 @@ function addTypewriterCursor(ops, glyphCount, fontSize, time) {
     const color = getTextColorFromOps(ops);
     const cursorX = last.x + fontSize * 0.5;
     const cursorY = last.y;
+    const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
-      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
-      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
-      width: Math.max(2, fontSize / 25),
+      from: { x: cursorX, y: cursorY - fontSize * 0.75 },
+      // Slightly taller
+      to: { x: cursorX, y: cursorY + fontSize * 0.15 },
+      width: cursorWidth,
       color,
-      opacity: 1
+      opacity: alwaysShowCursor ? 1 : cursorVisible ? 1 : 0
+      // Always visible or blink
     };
     return [...ops, cursorOp];
   }
@@ -2139,7 +2167,8 @@ async function createTextEngine(opts = {}) {
               size: main.size,
               weight: `${main.weight}`,
               color: main.color,
-              opacity: main.opacity
+              opacity: main.opacity,
+              background: main.background
             },
             style: {
               lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2153,6 +2182,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",