@remotion/rounded-text-box 4.0.369 → 4.0.371

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rounded-text-box"
 	},
 	"name": "@remotion/rounded-text-box",
-	"version": "4.0.369",
+	"version": "4.0.371",
 	"description": "Create a TikTok-like multiline text box SVG path with rounded corners",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -24,11 +24,11 @@
 		}
 	},
 	"dependencies": {
-		"@remotion/layout-utils": "4.0.369",
-		"@remotion/paths": "4.0.369"
+		"@remotion/layout-utils": "4.0.371",
+		"@remotion/paths": "4.0.371"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.369",
+		"@remotion/eslint-config-internal": "4.0.371",
 		"eslint": "9.19.0"
 	},
 	"author": "Jonny Burger <jonny@remotion.dev>",

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

@@ -1,10 +0,0 @@
-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

@@ -1,63 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,67 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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

@@ -1,94 +0,0 @@
-"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;