@remotion/rounded-text-box 4.0.361

package/README.md

@@ -0,0 +1,18 @@
+# @remotion/rounded-text-box
+ 
+Create a TikTok-like multiline text box SVG path with rounded corners
+ 
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/rounded-text-box.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/rounded-text-box?minimal=true)
+ 
+## Installation
+ 
+```bash
+npm install @remotion/rounded-text-box --save-exact
+```
+ 
+When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
+Remove the `^` character from the version number to use the exact version.
+ 
+## Usage
+ 
+See the [documentation](https://www.remotion.dev/docs/rounded-text-box) for more information.

package/bundle.ts

@@ -0,0 +1,15 @@
+import {buildPackage} from '../.monorepo/builder';
+
+await buildPackage({
+	formats: {
+		cjs: 'build',
+		esm: 'build',
+	},
+	external: ['@remotion/layout-utils', '@remotion/paths'],
+	entrypoints: [
+		{
+			path: 'src/index.ts',
+			target: 'node',
+		},
+	],
+});

package/dist/cjs/create-rounded-text-box.d.ts

@@ -0,0 +1,19 @@
+import type { Dimensions } from '@remotion/layout-utils';
+import type { BoundingBox, ReducedInstruction } from '@remotion/paths';
+export type TextAlign = 'left' | 'center' | 'right';
+export type CreateRoundedTextBoxProps = {
+    textMeasurements: Dimensions[];
+    textAlign: TextAlign;
+    horizontalPadding: number;
+    borderRadius: number;
+};
+export type CreateRoundedTextBoxResult = {
+    d: string;
+    boundingBox: BoundingBox;
+    instructions: ReducedInstruction[];
+};
+export declare const createRoundedTextBox: ({ textMeasurements, textAlign, horizontalPadding, borderRadius: unclampedMaxCornerRadius, }: CreateRoundedTextBoxProps) => {
+    d: string;
+    boundingBox: BoundingBox;
+    instructions: ReducedInstruction[];
+};

package/dist/cjs/create-rounded-text-box.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRoundedTextBox = void 0;
+const paths_1 = require("@remotion/paths");
+const clamp = (val, min, max) => {
+    return Math.min(Math.max(val, min), max);
+};
+const createRoundedTextBox = ({ textMeasurements, textAlign, horizontalPadding, borderRadius: unclampedMaxCornerRadius, }) => {
+    const instructions = [];
+    let maxWidth = 0;
+    for (const cornerRounding of textMeasurements) {
+        maxWidth = Math.max(maxWidth, cornerRounding.width + horizontalPadding * 2);
+    }
+    let yOffset = 0;
+    for (let i = 0; i < textMeasurements.length; i++) {
+        const previousLine = textMeasurements[i - 1];
+        const currentLine = textMeasurements[i];
+        const nextLine = textMeasurements[i + 1];
+        let xOffset = 0;
+        if (textAlign === 'center') {
+            xOffset = (maxWidth - (currentLine.width + horizontalPadding * 2)) / 2;
+        }
+        else if (textAlign === 'right') {
+            xOffset = maxWidth - (currentLine.width + horizontalPadding * 2);
+        }
+        const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, currentLine.height / 2);
+        if (i === 0) {
+            instructions.push({
+                type: 'M',
+                x: xOffset + maxCornerRadius,
+                y: yOffset,
+            });
+        }
+        const topRightCornerRadius = clamp(previousLine
+            ? textAlign === 'right'
+                ? 0
+                : textAlign === 'left'
+                    ? (previousLine.width - currentLine.width) / 2
+                    : (previousLine.width - currentLine.width) / 4
+            : -Infinity, -maxCornerRadius, maxCornerRadius);
+        // Top Right Corner
+        if (topRightCornerRadius !== 0) {
+            instructions.push({
+                type: 'L',
+                x: xOffset +
+                    currentLine.width +
+                    horizontalPadding * 2 +
+                    topRightCornerRadius,
+                y: yOffset,
+            });
+            // Arc for rounded corner (top right)
+            instructions.push({
+                type: 'A',
+                rx: Math.abs(topRightCornerRadius),
+                ry: Math.abs(topRightCornerRadius),
+                xAxisRotation: 0,
+                largeArcFlag: false,
+                sweepFlag: topRightCornerRadius < 0,
+                x: xOffset + currentLine.width + horizontalPadding * 2,
+                y: yOffset + Math.abs(topRightCornerRadius),
+            });
+        }
+        else {
+            instructions.push({
+                type: 'L',
+                x: xOffset + currentLine.width + horizontalPadding * 2,
+                y: yOffset,
+            });
+        }
+        const bottomRightCornerRadius = clamp(nextLine
+            ? textAlign === 'right'
+                ? 0
+                : textAlign === 'left'
+                    ? (nextLine.width - currentLine.width) / 2
+                    : (nextLine.width - currentLine.width) / 4
+            : -Infinity, -maxCornerRadius, maxCornerRadius);
+        // Bottom Right Corner
+        if (bottomRightCornerRadius !== 0) {
+            instructions.push({
+                type: 'L',
+                x: xOffset + currentLine.width + horizontalPadding * 2,
+                y: yOffset + currentLine.height - Math.abs(bottomRightCornerRadius),
+            });
+            // Arc for rounded corner (bottom right)
+            instructions.push({
+                type: 'A',
+                rx: Math.abs(bottomRightCornerRadius),
+                ry: Math.abs(bottomRightCornerRadius),
+                xAxisRotation: 0,
+                largeArcFlag: false,
+                sweepFlag: bottomRightCornerRadius < 0,
+                x: xOffset +
+                    currentLine.width +
+                    horizontalPadding * 2 +
+                    bottomRightCornerRadius,
+                y: yOffset + currentLine.height,
+            });
+        }
+        else {
+            instructions.push({
+                type: 'L',
+                x: xOffset + currentLine.width + horizontalPadding * 2,
+                y: yOffset + currentLine.height,
+            });
+        }
+        yOffset += currentLine.height;
+    }
+    for (let i = textMeasurements.length - 1; i >= 0; i--) {
+        const cornerRounding = textMeasurements[i];
+        const prevCornerRounding = textMeasurements[i + 1];
+        const nextCornerRounding = textMeasurements[i - 1];
+        let xOffset = 0;
+        if (textAlign === 'center') {
+            xOffset = (maxWidth - (cornerRounding.width + horizontalPadding * 2)) / 2;
+        }
+        else if (textAlign === 'right') {
+            xOffset = maxWidth - (cornerRounding.width + horizontalPadding * 2);
+        }
+        const bottomLeftWidthDifference = prevCornerRounding
+            ? prevCornerRounding.width - cornerRounding.width
+            : -Infinity;
+        const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, cornerRounding.height / 2);
+        const bottomLeftCornerRadius = clamp(prevCornerRounding
+            ? textAlign === 'left'
+                ? 0
+                : textAlign === 'right'
+                    ? bottomLeftWidthDifference / 2
+                    : bottomLeftWidthDifference / 4
+            : -Infinity, -maxCornerRadius, maxCornerRadius);
+        // Bottom Left Corner
+        if (bottomLeftCornerRadius !== 0) {
+            instructions.push({
+                type: 'L',
+                x: xOffset - bottomLeftCornerRadius,
+                y: yOffset,
+            });
+            // Arc for rounded corner (bottom left)
+            instructions.push({
+                type: 'A',
+                rx: Math.abs(bottomLeftCornerRadius),
+                ry: Math.abs(bottomLeftCornerRadius),
+                xAxisRotation: 0,
+                largeArcFlag: false,
+                sweepFlag: bottomLeftCornerRadius < 0,
+                x: xOffset,
+                y: yOffset - Math.abs(bottomLeftCornerRadius),
+            });
+        }
+        else {
+            instructions.push({
+                type: 'L',
+                x: xOffset,
+                y: yOffset,
+            });
+        }
+        const topLeftWidthDifference = nextCornerRounding
+            ? nextCornerRounding.width - cornerRounding.width
+            : -Infinity;
+        const topLeftCornerRadius = clamp(nextCornerRounding
+            ? textAlign === 'left'
+                ? 0
+                : textAlign === 'right'
+                    ? topLeftWidthDifference / 2
+                    : topLeftWidthDifference / 4
+            : -Infinity, -maxCornerRadius, maxCornerRadius);
+        // Top Left Corner
+        if (topLeftCornerRadius !== 0) {
+            instructions.push({
+                type: 'L',
+                x: xOffset,
+                y: yOffset - cornerRounding.height + Math.abs(topLeftCornerRadius),
+            });
+            // Arc for rounded corner (top left)
+            instructions.push({
+                type: 'A',
+                rx: Math.abs(topLeftCornerRadius),
+                ry: Math.abs(topLeftCornerRadius),
+                xAxisRotation: 0,
+                largeArcFlag: false,
+                sweepFlag: topLeftCornerRadius < 0,
+                x: xOffset - topLeftCornerRadius,
+                y: yOffset - cornerRounding.height,
+            });
+        }
+        else {
+            instructions.push({
+                type: 'L',
+                x: xOffset,
+                y: yOffset - cornerRounding.height,
+            });
+        }
+        yOffset -= cornerRounding.height;
+    }
+    instructions.push({
+        type: 'Z',
+    });
+    const reduced = (0, paths_1.reduceInstructions)(instructions);
+    const boundingBox = paths_1.PathInternals.getBoundingBoxFromInstructions(reduced);
+    return {
+        d: (0, paths_1.serializeInstructions)(reduced),
+        boundingBox,
+        instructions: reduced,
+    };
+};
+exports.createRoundedTextBox = createRoundedTextBox;

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export { createRoundedTextBox, type CreateRoundedTextBoxProps, type CreateRoundedTextBoxResult, type TextAlign, } from './create-rounded-text-box';

package/dist/cjs/index.js

@@ -0,0 +1,194 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  createRoundedTextBox: () => createRoundedTextBox
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/create-rounded-text-box.ts
+var import_paths = require("@remotion/paths");
+var clamp = (val, min, max) => {
+  return Math.min(Math.max(val, min), max);
+};
+var createRoundedTextBox = ({
+  textMeasurements,
+  textAlign,
+  horizontalPadding,
+  borderRadius: unclampedMaxCornerRadius
+}) => {
+  const instructions = [];
+  let maxWidth = 0;
+  for (const cornerRounding of textMeasurements) {
+    maxWidth = Math.max(maxWidth, cornerRounding.width + horizontalPadding * 2);
+  }
+  let yOffset = 0;
+  for (let i = 0;i < textMeasurements.length; i++) {
+    const previousLine = textMeasurements[i - 1];
+    const currentLine = textMeasurements[i];
+    const nextLine = textMeasurements[i + 1];
+    let xOffset = 0;
+    if (textAlign === "center") {
+      xOffset = (maxWidth - (currentLine.width + horizontalPadding * 2)) / 2;
+    } else if (textAlign === "right") {
+      xOffset = maxWidth - (currentLine.width + horizontalPadding * 2);
+    }
+    const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, currentLine.height / 2);
+    if (i === 0) {
+      instructions.push({
+        type: "M",
+        x: xOffset + maxCornerRadius,
+        y: yOffset
+      });
+    }
+    const topRightCornerRadius = clamp(previousLine ? textAlign === "right" ? 0 : textAlign === "left" ? (previousLine.width - currentLine.width) / 2 : (previousLine.width - currentLine.width) / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (topRightCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2 + topRightCornerRadius,
+        y: yOffset
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(topRightCornerRadius),
+        ry: Math.abs(topRightCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: topRightCornerRadius < 0,
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + Math.abs(topRightCornerRadius)
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset
+      });
+    }
+    const bottomRightCornerRadius = clamp(nextLine ? textAlign === "right" ? 0 : textAlign === "left" ? (nextLine.width - currentLine.width) / 2 : (nextLine.width - currentLine.width) / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (bottomRightCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + currentLine.height - Math.abs(bottomRightCornerRadius)
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(bottomRightCornerRadius),
+        ry: Math.abs(bottomRightCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: bottomRightCornerRadius < 0,
+        x: xOffset + currentLine.width + horizontalPadding * 2 + bottomRightCornerRadius,
+        y: yOffset + currentLine.height
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + currentLine.height
+      });
+    }
+    yOffset += currentLine.height;
+  }
+  for (let i = textMeasurements.length - 1;i >= 0; i--) {
+    const cornerRounding = textMeasurements[i];
+    const prevCornerRounding = textMeasurements[i + 1];
+    const nextCornerRounding = textMeasurements[i - 1];
+    let xOffset = 0;
+    if (textAlign === "center") {
+      xOffset = (maxWidth - (cornerRounding.width + horizontalPadding * 2)) / 2;
+    } else if (textAlign === "right") {
+      xOffset = maxWidth - (cornerRounding.width + horizontalPadding * 2);
+    }
+    const bottomLeftWidthDifference = prevCornerRounding ? prevCornerRounding.width - cornerRounding.width : -Infinity;
+    const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, cornerRounding.height / 2);
+    const bottomLeftCornerRadius = clamp(prevCornerRounding ? textAlign === "left" ? 0 : textAlign === "right" ? bottomLeftWidthDifference / 2 : bottomLeftWidthDifference / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (bottomLeftCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset - bottomLeftCornerRadius,
+        y: yOffset
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(bottomLeftCornerRadius),
+        ry: Math.abs(bottomLeftCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: bottomLeftCornerRadius < 0,
+        x: xOffset,
+        y: yOffset - Math.abs(bottomLeftCornerRadius)
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset
+      });
+    }
+    const topLeftWidthDifference = nextCornerRounding ? nextCornerRounding.width - cornerRounding.width : -Infinity;
+    const topLeftCornerRadius = clamp(nextCornerRounding ? textAlign === "left" ? 0 : textAlign === "right" ? topLeftWidthDifference / 2 : topLeftWidthDifference / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (topLeftCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset - cornerRounding.height + Math.abs(topLeftCornerRadius)
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(topLeftCornerRadius),
+        ry: Math.abs(topLeftCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: topLeftCornerRadius < 0,
+        x: xOffset - topLeftCornerRadius,
+        y: yOffset - cornerRounding.height
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset - cornerRounding.height
+      });
+    }
+    yOffset -= cornerRounding.height;
+  }
+  instructions.push({
+    type: "Z"
+  });
+  const reduced = import_paths.reduceInstructions(instructions);
+  const boundingBox = import_paths.PathInternals.getBoundingBoxFromInstructions(reduced);
+  return {
+    d: import_paths.serializeInstructions(reduced),
+    boundingBox,
+    instructions: reduced
+  };
+};

package/dist/cjs/layouts/fill-text-box.d.ts

@@ -0,0 +1,10 @@
+import { type Word } from './measure-text';
+export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
+    maxBoxWidth: number;
+    maxLines: number;
+}) => {
+    add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }: Word) => {
+        exceedsBox: boolean;
+        newLine: boolean;
+    };
+};

package/dist/cjs/layouts/fill-text-box.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fillTextBox = void 0;
+const measure_text_1 = require("./measure-text");
+const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
+    const lines = new Array(maxLines).fill(0).map(() => []);
+    return {
+        add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }) => {
+            const lastLineIndex = lines.reduceRight((acc, curr, index) => {
+                if (acc === -1 && curr.length > 0) {
+                    return index;
+                }
+                return acc;
+            }, -1);
+            const currentlyAt = lastLineIndex === -1 ? 0 : lastLineIndex;
+            const lineToUse = lines[currentlyAt];
+            const lineWithWord = [
+                ...lineToUse,
+                {
+                    text,
+                    fontFamily,
+                    fontWeight,
+                    fontSize,
+                    letterSpacing,
+                    fontVariantNumeric,
+                    validateFontIsLoaded,
+                    textTransform,
+                    additionalStyles,
+                },
+            ];
+            const widths = lineWithWord.map((w) => (0, measure_text_1.measureText)(w).width);
+            const lineWidthWithWordAdded = widths.reduce((a, b) => a + b, 0);
+            if (Math.ceil(lineWidthWithWordAdded) < maxBoxWidth) {
+                lines[currentlyAt].push({
+                    text: lines[currentlyAt].length === 0 ? text.trimStart() : text,
+                    fontFamily,
+                    fontWeight,
+                    fontSize,
+                    letterSpacing,
+                    textTransform,
+                    fontVariantNumeric,
+                });
+                return { exceedsBox: false, newLine: false };
+            }
+            if (currentlyAt === maxLines - 1) {
+                return { exceedsBox: true, newLine: false };
+            }
+            lines[currentlyAt + 1] = [
+                {
+                    text: text.trimStart(),
+                    fontFamily,
+                    fontWeight,
+                    fontSize,
+                    letterSpacing,
+                    textTransform,
+                    fontVariantNumeric,
+                },
+            ];
+            return { exceedsBox: false, newLine: true };
+        },
+    };
+};
+exports.fillTextBox = fillTextBox;

package/dist/cjs/layouts/fit-text-on-n-lines.d.ts

@@ -0,0 +1,19 @@
+import type { TextTransform } from './measure-text';
+type FitTextOnNLinesProps = {
+    text: string;
+    maxLines: number;
+    maxBoxWidth: number;
+    fontFamily: string;
+    fontWeight?: number | string;
+    letterSpacing?: string;
+    fontVariantNumeric?: string;
+    validateFontIsLoaded?: boolean;
+    textTransform?: TextTransform;
+    additionalStyles?: Record<string, string>;
+    maxFontSize?: number;
+};
+export declare const fitTextOnNLines: ({ text, maxLines, maxBoxWidth, fontFamily, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, maxFontSize, }: FitTextOnNLinesProps) => {
+    fontSize: number;
+    lines: string[];
+};
+export {};

package/dist/cjs/layouts/fit-text-on-n-lines.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitTextOnNLines = void 0;
+const fill_text_box_1 = require("./fill-text-box");
+const PRECISION = 100;
+const fitTextOnNLines = ({ text, maxLines, maxBoxWidth, fontFamily, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, maxFontSize, }) => {
+    // Fixed max font size since we are using binary search a
+    const minFontSize = 0.1;
+    // Binary search to find the optimal font size
+    let left = Math.floor(minFontSize * PRECISION);
+    let right = Math.floor((maxFontSize !== null && maxFontSize !== void 0 ? maxFontSize : 2000) * PRECISION);
+    let optimalFontSize = minFontSize;
+    let optimalLines = [];
+    while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        const fontSize = mid / PRECISION;
+        // Create a text box with current font size
+        const textBox = (0, fill_text_box_1.fillTextBox)({
+            maxBoxWidth,
+            maxLines,
+        });
+        // Split text into words and try to fit them
+        const words = text.split(' ');
+        let exceedsBox = false;
+        let currentLine = 0;
+        const lines = [''];
+        for (const word of words) {
+            const result = textBox.add({
+                text: lines[currentLine].length === 0 ? word : ' ' + word,
+                fontFamily,
+                fontWeight,
+                fontSize,
+                letterSpacing,
+                fontVariantNumeric,
+                validateFontIsLoaded,
+                textTransform,
+                additionalStyles,
+            });
+            if (result.exceedsBox) {
+                exceedsBox = true;
+                break;
+            }
+            if (result.newLine) {
+                lines.push('');
+                currentLine++;
+            }
+            lines[currentLine] += word + ' ';
+        }
+        // If text fits within the box and number of lines
+        if (!exceedsBox && currentLine < maxLines) {
+            optimalFontSize = fontSize;
+            optimalLines = lines;
+            left = mid + 1;
+        }
+        else {
+            right = mid - 1;
+        }
+    }
+    for (let i = 0; i < optimalLines.length; i++) {
+        optimalLines[i] = optimalLines[i].trimEnd();
+    }
+    return {
+        fontSize: optimalFontSize,
+        lines: optimalLines,
+    };
+};
+exports.fitTextOnNLines = fitTextOnNLines;

package/dist/cjs/layouts/fit-text.d.ts

@@ -0,0 +1,14 @@
+import type { ModifyableCSSProperties, TextTransform } from '../layouts/measure-text';
+export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }: {
+    text: string;
+    withinWidth: number;
+    fontFamily: string;
+    fontWeight?: number | string;
+    letterSpacing?: string;
+    fontVariantNumeric?: string;
+    validateFontIsLoaded?: boolean;
+    textTransform?: TextTransform;
+    additionalStyles?: ModifyableCSSProperties;
+}) => {
+    fontSize: number;
+};

package/dist/cjs/layouts/fit-text.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitText = void 0;
+const measure_text_1 = require("../layouts/measure-text");
+const sampleSize = 100;
+/*
+ * @description Calculates the font size needed to fit text into a specified width container.
+ * @see [Documentation](https://remotion.dev/docs/layout-utils/fit-text)
+ */
+const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }) => {
+    const estimate = (0, measure_text_1.measureText)({
+        text,
+        fontFamily,
+        fontSize: sampleSize,
+        fontWeight,
+        fontVariantNumeric,
+        letterSpacing,
+        validateFontIsLoaded,
+        textTransform,
+        additionalStyles,
+    });
+    return { fontSize: (withinWidth / estimate.width) * sampleSize };
+};
+exports.fitText = fitText;

package/dist/cjs/layouts/measure-text.d.ts

@@ -0,0 +1,23 @@
+export type Dimensions = {
+    width: number;
+    height: number;
+};
+export type ModifyableCSSProperties<T = Partial<CSSStyleDeclaration>> = {
+    [P in keyof T as P extends 'length' ? never : P extends keyof CSSPropertiesOnWord ? never : T[P] extends string | number ? P : never]: T[P];
+};
+export type TextTransform = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset' | 'none' | 'capitalize' | 'full-size-kana' | 'full-width' | 'lowercase' | 'uppercase';
+type CSSPropertiesOnWord = {
+    fontFamily: string;
+    fontSize: number | string;
+    fontWeight?: number | string;
+    letterSpacing?: string;
+    fontVariantNumeric?: string;
+    textTransform?: TextTransform;
+};
+export type Word = {
+    text: string;
+    validateFontIsLoaded?: boolean;
+    additionalStyles?: ModifyableCSSProperties;
+} & CSSPropertiesOnWord;
+export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, textTransform, }: Word) => Dimensions;
+export {};

package/dist/cjs/layouts/measure-text.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureText = void 0;
+const wordCache = new Map();
+const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, additionalStyles, textTransform, }) => {
+    if (typeof document === 'undefined') {
+        throw new Error('measureText() can only be called in a browser.');
+    }
+    const node = document.createElement('span');
+    if (fontFamily) {
+        node.style.fontFamily = fontFamily;
+    }
+    node.style.display = 'inline-block';
+    node.style.position = 'absolute';
+    node.style.top = `-10000px`;
+    node.style.whiteSpace = 'pre';
+    node.style.fontSize =
+        typeof fontSize === 'string' ? fontSize : `${fontSize}px`;
+    if (additionalStyles) {
+        for (const key of Object.keys(additionalStyles)) {
+            node.style[key] = additionalStyles[key];
+        }
+    }
+    if (fontWeight) {
+        node.style.fontWeight = fontWeight.toString();
+    }
+    if (letterSpacing) {
+        node.style.letterSpacing = letterSpacing;
+    }
+    if (fontVariantNumeric) {
+        node.style.fontVariantNumeric = fontVariantNumeric;
+    }
+    if (textTransform) {
+        node.style.textTransform = textTransform;
+    }
+    node.innerText = text;
+    document.body.appendChild(node);
+    const computedFontFamily = window.getComputedStyle(node).fontFamily;
+    const boundingBox = node.getBoundingClientRect();
+    document.body.removeChild(node);
+    return {
+        boundingBox,
+        computedFontFamily,
+    };
+};
+/*
+ * @description Calculates the width and height of specified text to be used for layout calculations. Only works in the browser, not in Node.js or Bun.
+ * @see [Documentation](https://remotion.dev/docs/layout-utils/measure-text)
+ */
+const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, textTransform, }) => {
+    const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}-${textTransform}-${JSON.stringify(additionalStyles)}`;
+    if (wordCache.has(key)) {
+        return wordCache.get(key);
+    }
+    const { boundingBox, computedFontFamily } = takeMeasurement({
+        fontFamily,
+        fontSize,
+        text,
+        fontVariantNumeric,
+        fontWeight,
+        letterSpacing,
+        additionalStyles,
+        textTransform,
+    });
+    if (validateFontIsLoaded && text.trim().length > 0) {
+        const { boundingBox: boundingBoxOfFallbackFont, computedFontFamily: computedFallback, } = takeMeasurement({
+            fontFamily: null,
+            fontSize,
+            text,
+            fontVariantNumeric,
+            fontWeight,
+            letterSpacing,
+            additionalStyles,
+            textTransform,
+        });
+        const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
+            boundingBox.width === boundingBoxOfFallbackFont.width;
+        // Ensure there are at least 4 unique characters, with just a few, there is more likely to be a false positive
+        if (sameAsFallbackFont &&
+            computedFallback !== computedFontFamily &&
+            new Set(text).size > 4) {
+            const err = [
+                `Called measureText() with "fontFamily": ${JSON.stringify(fontFamily)} but it looks like the font is not loaded at the time of calling.`,
+                `A measurement with the fallback font ${computedFallback} was taken and had the same dimensions, indicating that the browser used the fallback font.`,
+                'See https://remotion.dev/docs/layout-utils/best-practices for best practices.',
+            ];
+            throw new Error(err.join('\n'));
+        }
+    }
+    const result = { height: boundingBox.height, width: boundingBox.width };
+    wordCache.set(key, result);
+    return result;
+};
+exports.measureText = measureText;

package/dist/esm/index.mjs

@@ -0,0 +1,166 @@
+// src/create-rounded-text-box.ts
+import {
+  PathInternals,
+  reduceInstructions,
+  serializeInstructions
+} from "@remotion/paths";
+var clamp = (val, min, max) => {
+  return Math.min(Math.max(val, min), max);
+};
+var createRoundedTextBox = ({
+  textMeasurements,
+  textAlign,
+  horizontalPadding,
+  borderRadius: unclampedMaxCornerRadius
+}) => {
+  const instructions = [];
+  let maxWidth = 0;
+  for (const cornerRounding of textMeasurements) {
+    maxWidth = Math.max(maxWidth, cornerRounding.width + horizontalPadding * 2);
+  }
+  let yOffset = 0;
+  for (let i = 0;i < textMeasurements.length; i++) {
+    const previousLine = textMeasurements[i - 1];
+    const currentLine = textMeasurements[i];
+    const nextLine = textMeasurements[i + 1];
+    let xOffset = 0;
+    if (textAlign === "center") {
+      xOffset = (maxWidth - (currentLine.width + horizontalPadding * 2)) / 2;
+    } else if (textAlign === "right") {
+      xOffset = maxWidth - (currentLine.width + horizontalPadding * 2);
+    }
+    const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, currentLine.height / 2);
+    if (i === 0) {
+      instructions.push({
+        type: "M",
+        x: xOffset + maxCornerRadius,
+        y: yOffset
+      });
+    }
+    const topRightCornerRadius = clamp(previousLine ? textAlign === "right" ? 0 : textAlign === "left" ? (previousLine.width - currentLine.width) / 2 : (previousLine.width - currentLine.width) / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (topRightCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2 + topRightCornerRadius,
+        y: yOffset
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(topRightCornerRadius),
+        ry: Math.abs(topRightCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: topRightCornerRadius < 0,
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + Math.abs(topRightCornerRadius)
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset
+      });
+    }
+    const bottomRightCornerRadius = clamp(nextLine ? textAlign === "right" ? 0 : textAlign === "left" ? (nextLine.width - currentLine.width) / 2 : (nextLine.width - currentLine.width) / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (bottomRightCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + currentLine.height - Math.abs(bottomRightCornerRadius)
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(bottomRightCornerRadius),
+        ry: Math.abs(bottomRightCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: bottomRightCornerRadius < 0,
+        x: xOffset + currentLine.width + horizontalPadding * 2 + bottomRightCornerRadius,
+        y: yOffset + currentLine.height
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset + currentLine.width + horizontalPadding * 2,
+        y: yOffset + currentLine.height
+      });
+    }
+    yOffset += currentLine.height;
+  }
+  for (let i = textMeasurements.length - 1;i >= 0; i--) {
+    const cornerRounding = textMeasurements[i];
+    const prevCornerRounding = textMeasurements[i + 1];
+    const nextCornerRounding = textMeasurements[i - 1];
+    let xOffset = 0;
+    if (textAlign === "center") {
+      xOffset = (maxWidth - (cornerRounding.width + horizontalPadding * 2)) / 2;
+    } else if (textAlign === "right") {
+      xOffset = maxWidth - (cornerRounding.width + horizontalPadding * 2);
+    }
+    const bottomLeftWidthDifference = prevCornerRounding ? prevCornerRounding.width - cornerRounding.width : -Infinity;
+    const maxCornerRadius = clamp(unclampedMaxCornerRadius, 0, cornerRounding.height / 2);
+    const bottomLeftCornerRadius = clamp(prevCornerRounding ? textAlign === "left" ? 0 : textAlign === "right" ? bottomLeftWidthDifference / 2 : bottomLeftWidthDifference / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (bottomLeftCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset - bottomLeftCornerRadius,
+        y: yOffset
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(bottomLeftCornerRadius),
+        ry: Math.abs(bottomLeftCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: bottomLeftCornerRadius < 0,
+        x: xOffset,
+        y: yOffset - Math.abs(bottomLeftCornerRadius)
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset
+      });
+    }
+    const topLeftWidthDifference = nextCornerRounding ? nextCornerRounding.width - cornerRounding.width : -Infinity;
+    const topLeftCornerRadius = clamp(nextCornerRounding ? textAlign === "left" ? 0 : textAlign === "right" ? topLeftWidthDifference / 2 : topLeftWidthDifference / 4 : -Infinity, -maxCornerRadius, maxCornerRadius);
+    if (topLeftCornerRadius !== 0) {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset - cornerRounding.height + Math.abs(topLeftCornerRadius)
+      });
+      instructions.push({
+        type: "A",
+        rx: Math.abs(topLeftCornerRadius),
+        ry: Math.abs(topLeftCornerRadius),
+        xAxisRotation: 0,
+        largeArcFlag: false,
+        sweepFlag: topLeftCornerRadius < 0,
+        x: xOffset - topLeftCornerRadius,
+        y: yOffset - cornerRounding.height
+      });
+    } else {
+      instructions.push({
+        type: "L",
+        x: xOffset,
+        y: yOffset - cornerRounding.height
+      });
+    }
+    yOffset -= cornerRounding.height;
+  }
+  instructions.push({
+    type: "Z"
+  });
+  const reduced = reduceInstructions(instructions);
+  const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
+  return {
+    d: serializeInstructions(reduced),
+    boundingBox,
+    instructions: reduced
+  };
+};
+export {
+  createRoundedTextBox
+};

package/eslint.config.mjs

@@ -0,0 +1,7 @@
+import {remotionFlatConfig} from '@remotion/eslint-config-internal';
+
+const config = remotionFlatConfig({react: false});
+
+export default {
+	...config,
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rounded-text-box"
+	},
+	"name": "@remotion/rounded-text-box",
+	"version": "4.0.361",
+	"description": "Create a TikTok-like multiline text box SVG path with rounded corners",
+	"main": "dist/cjs/index.js",
+	"types": "dist/cjs/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"sideEffects": false,
+	"scripts": {
+		"formatting": "prettier --experimental-cli src --check",
+		"lint": "eslint src",
+		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"types": "./dist/cjs/index.d.ts",
+			"require": "./dist/cjs/index.js",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		}
+	},
+	"dependencies": {
+		"@remotion/layout-utils": "4.0.361",
+		"@remotion/paths": "4.0.361"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "4.0.361",
+		"eslint": "9.19.0"
+	},
+	"author": "Jonny Burger <jonny@remotion.dev>",
+	"maintainers": [
+		"Jonny Burger <jonny@remotion.dev>"
+	],
+	"contributors": [],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"keywords": [
+		"remotion",
+		"svg"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.remotion.dev/docs/rounded-text-box"
+}