@react-fabric/utilities 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/types/_format.d.ts

@@ -1,27 +1,98 @@
+/**
+ * Format utility functions for various data types.
+ * This namespace provides methods to format phone numbers, numbers, bytes, percentages, dates, and durations.
+ */
 export declare namespace Format {
-    /** ***************** format phone number using `libphonenumber-js` *******************/
+    /**
+     * Format phone number with country flag or emoji.
+     * It takes a phone number string, a country code, and a boolean to indicate whether to use CSS classes for flags.
+     * If the phone number is empty, less than 6 characters, or does not match the regex for valid phone numbers,
+     * it returns the original value.
+     * If the phone number is valid, it formats the phone number using `libphonenumber-js` and returns it with the country flag or emoji.
+     * The country flag is represented as a CSS class, and the emoji is obtained from the `Countries` module.
+     *
+     * @param {string} value - The phone number to format.
+     * @param {string} country - The country code to use for formatting.
+     * @param {boolean} useCss - Whether to use CSS classes for flags.
+     * @returns {string} The formatted phone number with country flag or emoji.
+     */
     const phone: (value?: string, country?: string, useCss?: boolean) => string | undefined;
-    /** ***************** format whole number using `numeral` *******************/
+    /**
+     * Format number using `numeral`.
+     * It takes a number or string and a format string, and returns the formatted number.
+     * If the number is undefined or null, it returns an empty string.
+     * If the number starts with a '+', it retains the '+' sign in the formatted output.
+     * This function is useful for displaying numbers in a human-readable format,
+     * such as for financial data, statistics, or any numerical representation.
+     *
+     * @param {string | number} number - number or string to format
+     * @param {string} [format] - optional format string, defaults to "0,0[.]00a"
+     * @returns {string} formatted number
+     */
     const number: (number?: string | number, format?: string) => string;
-    /** ***************** format bytes using `numeral` *******************/
+    /**
+     * Format bytes using `numeral`.
+     * It takes a number or string and returns the formatted bytes.
+     * If the number is undefined or null, it returns an empty string.
+     * If the number starts with a '+', it retains the '+' sign in the formatted output.
+     * This function is useful for displaying file sizes or data transfer amounts in a human-readable format.
+     *
+     * @param {string | number} number - number or string to format
+     * @returns {string} formatted bytes
+     */
     const bytes: (number?: string | number) => string;
-    /** ***************** format percentage using `numeral` *******************/
+    /**
+     * Format percentage using `numeral`.
+     * It takes a number or string and returns the formatted percentage.
+     * If the number is undefined or null, it returns an empty string.
+     * If the number starts with a '+', it retains the '+' sign in the formatted output.
+     *
+     * @param {string | number} number - number or string to format
+     * @returns {string} formatted percentage
+     */
     const percent: (number?: string | number) => string;
-    /** ***************** format date using `date-fns` *******************/
-    const date: (date?: Date | string | number, fmt?: string) => string;
+    /**
+     * Format date using `date-fns`.
+     * It takes a date (as a Date object, string, or number) and a format string.
+     * If the date is undefined or null, it returns an empty string.
+     * If the date is a valid date, it formats it using the provided format string.
+     * Format defaults to "d-M-y" if not provided.
+     *
+     * @param {date | string | number} date - Date object, string, or number to format
+     * @typedef {string} format - Optional format string, defaults to "d-M-y"
+     * @returns {string} - Formatted date string
+     */
+    const date: (date?: Date | string | number, format?: string) => string;
     /** ***************** format time duration from total seconds/milliseconds *******************/
     /**
      * Format time duration with milliseconds
-     * @param number
-     * @param isFraction
-     * @returns
+     * This function takes a number or string representing a duration in seconds or milliseconds,
+     * and returns a formatted string in the format "HH:mm:ss.SSS".
+     * If the input is undefined or null, it returns "00:00.000".
+     * If the input is Infinity, it returns "∞".
+     * The function also accepts an optional boolean parameter `isFraction` to indicate whether the input is in seconds (true) or milliseconds (false).
+     * If `isFraction` is true, the input is multiplied by 1000 to convert seconds to milliseconds.
+     * The function uses the `makeDuration` helper function to format the duration.
+     *
+     * @param {string | number} number - The duration to format, can be a string or number.
+     * @param {boolean} isFraction - Optional parameter to indicate if the input is in seconds (true) or milliseconds (false).
+     * @returns {string} - The formatted duration string.
      */
     const duration: (number?: string | number, isFraction?: boolean) => string | undefined;
     /**
-     * Format time duration without milliseconds
-     * @param number
-     * @param isFraction
-     * @returns
+     * Format time duration in seconds
+     * This function takes a number or string representing a duration in seconds,
+     * and returns a formatted string in the format "HH:mm:ss".
+     * If the input is undefined or null, it returns "00:00".
+     * If the input is Infinity, it returns "∞".
+     * The function also accepts an optional boolean parameter `isFraction` to indicate whether the input is in seconds (true) or milliseconds (false).
+     * If `isFraction` is true, the input is multiplied by 1000 to convert seconds to milliseconds.
+     * The function uses the `makeDuration` helper function to format the duration.
+     * This function is useful for displaying durations in a human-readable format, such as for timers or elapsed time.
+     *
+     * @param {string | number} number - The duration to format, can be a string or number.
+     * @param {boolean} isFraction - Optional parameter to indicate if the input is in seconds (true) or milliseconds (false).
+     * @returns {string} - The formatted duration string.
      */
     const durationSeconds: (number?: string | number, isFraction?: boolean) => string | undefined;
 }

package/dist/types/_getByPath.d.ts

@@ -1,10 +1,21 @@
 /**
- * get property value by path
- * @internal
+ * Get a value from an object by a given path.
+ * This function allows you to retrieve a value from a nested object structure using a dot-separated path.
+ * If the path does not exist or the object is empty, it returns a default value.
+ * @param {KeyValue} obj - The object from which to retrieve the value.
+ * @param {string} path - The dot-separated path to the value within the object.
+ * @param {any} defaultValue - The value to return if the path does not exist or the object is empty.
+ * @typedef {T} AnyObject - The type of the value to be returned.
+ * @returns {T} The value at the specified path, or the default value if the path does not exist.
  */
 export declare const getByPath: <T = any>(obj: KeyValue, path: string, defaultValue?: any) => T;
 /**
- * get first available value in list
- * @internal
+ * Get the first non-empty value from the provided arguments.
+ * This function is useful for finding a default value or fallback when multiple values are provided.
+ * It checks each argument in order and returns the first one that is not empty.
+ * If all arguments are empty, it returns `undefined`.
+ *
+ * @param {...any} args - The values to check for non-emptiness.
+ * @returns {any} The first non-empty value, or `undefined` if all are empty.
  */
 export declare const getValue: (...args: any[]) => any;

package/dist/types/_hash.d.ts

@@ -1,16 +1,22 @@
 /**
- * calculate hash from string
+ * Generate a hash from a string.
+ * This function computes a simple hash by iterating over each character in the string,
+ * performing bitwise operations to produce a 32-bit integer hash.
  * @param str
- * @internal
+ * @returns {number} A 32-bit integer hash of the input string.
  */
 export declare const hash: (str: string) => number;
 /**
- * generate short hash from current time
- * @internal
+ * Generate a short hash using the current timestamp and a random number.
+ * This function creates a unique identifier by combining the current time in milliseconds
+ * with a random number, and then converting it to a base-36 string.
+ * @returns {string} A short hash string.
  */
 export declare const shortHash: () => string;
 /**
- * generate uuid using `crypto.getRandomValues`
- * @internal
+ * Generate a UUID (Universally Unique Identifier).
+ * This function creates a version 4 UUID by generating random numbers
+ * and formatting them according to the UUID standard.
+ * @returns {string} A UUID string in the format xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.
  */
 export declare const uuid: () => string;

package/dist/types/_interpolate.d.ts

@@ -1,6 +1,21 @@
 /**
- * interpolate string template using model
- * @internal
+ * Interpolate a string with values from a model.
+ * This function replaces placeholders in the format ${key} with corresponding values from the model object.
+ * If the value is not a string or number, it returns an empty string.
+ *
+ * @param {string} str - The string to interpolate.
+ * @param {KeyValue} model - The model object containing key-value pairs for interpolation.
+ * @returns {string} The interpolated string with placeholders replaced by values from the model.
  */
 export declare const interpolate: (str: string, model: KeyValue) => string;
+/**
+ * Render a template string with values from a model.
+ * This function replaces placeholders in the format {{key}} with corresponding values from the model object.
+ * If the value is not a string or number, it returns an empty string.
+ * This is similar to the interpolate function but for handlebar templates.
+ *
+ * @param {string} str - The template string to render.
+ * @param {KeyValue} model - The model object containing key-value pairs for rendering the template.
+ * @returns {string} The rendered template string with placeholders replaced by values from the model.
+ */
 export declare const renderTemplate: (str: string, model: KeyValue) => string;

package/dist/types/_isEqual.d.ts

@@ -1,15 +1,46 @@
 /**
- * check equality of objects
- * @internal
+ * Compare two objects or values for equality.
+ * This function checks if two values are equal, including nested objects and arrays.
+ * It handles various data types such as strings, numbers, booleans, arrays, and objects.
+ * If both values are `null` or `undefined`, they are considered equal.
+ * If both values are primitive types (string, number, boolean), they are compared directly.
+ * If both values are arrays, they are compared element by element.
+ * If both values are objects, they are compared by their keys and values.
+ * If the values are of different types or structures, they are considered not equal.
+ *
+ * @param {unknown} obj - The first value to compare.
+ * @param {unknown} test - The second value to compare against the first.
+ * @returns {boolean} - Returns true if the values are equal, false otherwise.
  */
 export declare const isEqual: (obj: unknown, test: unknown) => boolean;
 /**
- * match strings
- * @internal
+ * Match a string against another string with options for equality.
+ * This function checks if the base string starts with, includes, or is equal to the match string,
+ * based on the specified equality condition.
+ * It normalizes both strings to lowercase and ASCII format before comparison.
+ * This is useful for case-insensitive and ASCII-only comparisons,
+ * such as when filtering or searching through text data.
+ *
+ * @param {string} base - The base string to match against.
+ * @param {string} match - The string to match with the base string.
+ * @param {("start" | boolean)} equality - The type of match to perform:
+ *                   - "start": checks if the base string starts with the match string.
+ *                   - true: checks for exact equality.
+ *                   - false (default): checks if the base string includes the match string.
+ * @returns {boolean} - Returns true if the base string matches the conditions specified by the match string and equality.
  */
 export declare const matchString: (base: string, match: string, equality?: "start" | boolean) => boolean;
 /**
- * compare values
- * @internal
+ * Compare two values for sorting.
+ * This function compares two values based on the specified order (ascending or descending).
+ * If a key is provided, it compares the values of that key in the objects.
+ * It handles various data types such as strings, numbers, booleans, and objects.
+ * It returns a comparison function that can be used with array sorting methods.
+ * * The comparison is done in a case-insensitive manner for strings,
+ *  treating special characters as their ASCII equivalents.
+ *
+ * @param {("asc" | "desc")} order - The order of comparison, either "asc" for ascending or "desc" for descending.
+ * @param {string} key - An optional key to compare values within objects.
+ * @returns {Function} A comparison function that can be used with array sorting methods.
  */
 export declare const compareValues: (order?: "asc" | "desc", key?: string) => (a: unknown, b: unknown) => 0 | 1 | -1;

package/dist/types/_isType.d.ts

@@ -1,14 +1,123 @@
+/**
+ * Check if a value is undefined.
+ * @param value - The value to check.
+ * @returns true if the value is undefined, false otherwise.
+ */
 export declare const isUndefined: (value: AnyObject) => value is undefined;
+/**
+ * Check if a value is null.
+ * @param value - The value to check.
+ * @returns true if the value is null, false otherwise.
+ */
 export declare const isNull: (value: AnyObject) => value is null;
-export declare const isNil: (val: AnyObject) => val is undefined;
+/**
+ * Check if a value is either null or undefined.
+ * @param val - The value to check.
+ * @returns true if the value is null or undefined, false otherwise.
+ */
+export declare const isNil: (val: AnyObject) => val is null | undefined;
+export declare const isDefined: (val: AnyObject) => boolean;
+/**
+ * Check if a value is empty.
+ * A value is considered empty if it is:
+ * - undefined
+ * - null
+ * - an empty string
+ * - an empty array
+ * - an empty object
+ * - an empty Map or Set
+ * - a boolean, number, or bigint (not empty)
+ * @param val - The value to check.
+ * @returns true if the value is empty, false otherwise.
+ */
 export declare const isEmpty: (val: AnyObject) => val is undefined;
-export declare const isObject: (val: AnyObject) => val is KeyValue<any>;
-export declare const isArray: <T = any>(val: AnyObject) => val is T[];
+/**
+ * Check if a value is an object.
+ * An object is considered valid if it is:
+ * - not null or undefined
+ * - not a Date instance
+ * - of type 'object'
+ * - not an array
+ * @param val - The value to check.
+ * @returns true if the value is an object, false otherwise.
+ */
+export declare const isObject: (val: AnyObject) => val is KeyValue;
+/**
+ * Check if a value is an array.
+ * An array is considered valid if it is:
+ * - not null or undefined
+ * - an instance of Array
+ * @param val - The value to check.
+ * @returns true if the value is an array, false otherwise.
+ */
+export declare const isArray: <T = AnyObject>(val: AnyObject) => val is T[];
+/**
+ * Check if a value is a string.
+ * A string is considered valid if it is:
+ * - not null or undefined
+ * - of type 'string'
+ * @param value - The value to check.
+ * @returns true if the value is a string, false otherwise.
+ */
 export declare const isString: (value: AnyObject) => value is string;
+/**
+ * Check if a value is a number.
+ * A number is considered valid if it is:
+ * - not null or undefined
+ * - of type 'number'
+ * @param value - The value to check.
+ * @returns true if the value is a number, false otherwise.
+ */
 export declare const isNumber: (value: AnyObject) => value is number;
+/**
+ * Check if a value is a boolean.
+ * A boolean is considered valid if it is:
+ * - not null or undefined
+ * - of type 'boolean'
+ */
 export declare const isBoolean: (value: AnyObject) => value is boolean;
+/**
+ * Check if a value is a true.
+ * A value is considered true if it is:
+ * - strictly equal to true
+ * - equal to 1
+ * - a string that is "yes" or "true" (case insensitive)
+ */
 export declare const isTrue: (value?: AnyObject) => value is true;
+/**
+ * Check if a value is false.
+ * A value is considered false if it is:
+ * - strictly equal to false
+ * - equal to 0
+ * - a string that is "no" or "false" (case insensitive)
+ */
 export declare const isFalse: (value?: AnyObject) => value is false;
+/**
+ * Check if a value is a valid color.
+ * A color is considered valid if it:
+ * - starts with a '#' (hex color)
+ * - starts with 'rgb' (RGB color)
+ * - starts with 'hsl' (HSL color)
+ * - starts with 'lab' (Lab color)
+ * - is equal to 'transparent'
+ * @param color - The value to check.
+ * @returns true if the value is a valid color, false otherwise.
+ */
 export declare const isColor: (color: string) => boolean;
+/**
+ * Check if a value is a valid SVG path.
+ * A valid SVG path is a string that:
+ * - starts with 'M' or 'm' (move to command)
+ * - contains at least one digit or decimal point
+ * - ends with 'Z' or 'z' (close path command)
+ * @param value - The value to check.
+ * @returns true if the value is a valid SVG path, false otherwise.
+ */
 export declare const isSvgPath: (value: AnyObject) => value is string;
+/**
+ * Check if the document is in RTL (Right-to-Left) mode.
+ * This function checks the computed style of the document's root element
+ * to determine if the direction is set to 'rtl'.
+ * @returns true if the document is in RTL mode, false otherwise.
+ */
 export declare const isRtl: () => boolean;

package/dist/types/_lonlat.d.ts

@@ -0,0 +1,48 @@
+export type LngLatLike = {
+    lng: number;
+    lat: number;
+} | {
+    lon: number;
+    lat: number;
+} | {
+    longitude: number;
+    latitude: number;
+} | [lon: number | string, lat: number | string] | [lon: number | string, lat: number | string, z: number | string] | string;
+export declare const getLatitudeLongitude: (lonLat: LngLatLike) => {
+    latitude: number;
+    longitude: number;
+};
+/**
+ * Convert various formats of longitude and latitude to a tuple of [lon, lat].
+ * This function supports:
+ * - Arrays with two or three elements (e.g., [lon, lat] or [lon, lat, alt])
+ * - Objects with properties `lng`, `lat`, `lon`, or `longitude` and `latitude`
+ * - Strings in the format "lat,lon"
+ * The function will return a tuple of numbers [lon, lat].
+ *
+ * @param {LngLatLike} lonLat - The input longitude and latitude in various formats.
+ * @returns { [lon: number, lat: number] } A tuple of [lon, lat] where lon and lat are numbers.
+ * @throws Error if the input is not a valid format.
+ */
+export declare const convertLatLng: (lonLat: LngLatLike) => [lon: number, lat: number];
+/**
+ * Convert a latitude and longitude to a human-readable text format.
+ * This function takes a latitude and longitude in various formats and
+ * returns a string in the format "degrees˚minutes'seconds" with direction (N/S, E/W).
+ *
+ * This function supports:
+ *
+ * - Objects with properties `lng`, `lat`, `lon`, or `longitude` and `latitude`
+ * - Arrays with two or three elements (e.g., [lon, lat] or [lon, lat, alt])
+ * - Strings in the format "lat,lon"
+ *
+ * @param {LngLatLike} latlon - The latitude and longitude in various formats.
+ * @returns {string} A string representation of the location in DMS format.
+ *
+ * @example
+ * ```jsx
+ * const location = getLocationAsText({ lat: 40.7128, lng: -74.0060 });
+ * console.log(location); // "40˚42'51.36"N, 74˚0'21.60"W"
+ * ```
+ */
+export declare const getLocationAsText: (latlon: LngLatLike) => string;

package/dist/types/_mergeRefs.d.ts

@@ -1 +1,12 @@
+/**
+ * Merge multiple refs into a single ref callback.
+ * This function allows you to combine multiple refs (either callback refs or React refs)
+ * into a single ref callback that can be used in React components.
+ * This is particularly useful when you want to assign a single element to multiple refs,
+ * such as when using third-party libraries that require refs or when you want to share refs between components.
+ * The function iterates over the provided refs and assigns the element to each ref.
+ *
+ * @param {AnyObject[]} refs - An array of refs to merge.
+ * @returns {function} A function that takes an element and assigns it to all provided refs.
+ */
 export declare const mergeRefs: (...refs: AnyObject[]) => (el: AnyObject) => void;

package/dist/types/_tokenize.d.ts

@@ -1,8 +1,20 @@
 /**
- * split text into array of tokens by word boundaries
- * @param str
- * @param keywords
- * @internal
+ * Tokenize a string based on provided keywords.
+ * This function splits the input string into tokens, where each token is an array containing
+ * the substring before the keyword and the keyword itself.
+ * If no keywords are provided, it returns the entire string as a single token.
+ *
+ * @param {string} str - The string to tokenize.
+ * @param {string | string[]} keywords - A string or an array of strings to use as keywords for tokenization.
+ * @returns {Array<[string, string]>} An array of tokens, where each token is an array of [substring, keyword].
  */
 export declare const tokenize: (str: string, keywords?: string | string[]) => string[][];
+/**
+ * Generate a token from a string.
+ * This function creates a token by taking the first letter of the first word and the first letter of the last word,
+ * or the first two letters of the first word if there is no last word.
+ *
+ * @param {string} str - The string to tokenize.
+ * @returns {string} A string token consisting of the first letters of the first and last words, or the first two letters of the first word.
+ */
 export declare const iconToken: (str: string) => string;

package/dist/types/getImageColorset.d.ts

@@ -1 +1,16 @@
+/**
+ * Get the color set of an image element.
+ * This function analyzes the pixel data of an image to determine if it is predominantly light or dark.
+ * It returns "light", "dark", or "light_transparent"/"dark_transparent" based on the pixel analysis.
+ * It uses a canvas to draw the image and extract pixel data for analysis.
+ * * The function calculates the brightness of each pixel using the formula:
+ *  brightness = 0.2126 * R + 0.7152 * G + 0.0722 * B
+ * * It counts the number of light and dark pixels, and determines the overall color set based on the ratio of light to dark pixels.
+ * * If the image has transparent pixels, it appends "_transparent" to the result.
+ * * This function is useful for determining the color scheme of an image, which can be helpful for UI design,
+ *   theming, and accessibility considerations.
+ *
+ * @param {HTMLImageElement} el - The HTMLImageElement to analyze.
+ * @returns {string} A string indicating the color set of the image.
+ */
 export declare const getImageColorset: (el: HTMLImageElement) => string;

package/dist/types/index.d.ts

@@ -13,6 +13,7 @@ export * from "./_hash";
 export * from "./_interpolate";
 export * from "./_isEqual";
 export * from "./_isType";
+export * from "./_lonlat";
 export * from "./_mergeRefs";
 export * from "./_tokenize";
 export { getImageColorset } from "./getImageColorset";

package/dist/types/useLogger.d.ts

@@ -5,7 +5,15 @@ interface LogDetail {
     totalTime?: number;
 }
 /**
- * @internal
+ * useLogger is a custom hook that provides logging functionality.
+ * It allows you to log messages with different levels (log, debug, info, error, warning)
+ * and also provides a timer function to measure the duration of processes.
+ * The logs can include additional details such as the module name, process name, duration, and total time.
+ * It is designed to work in both Node.js and browser environments, adapting the log format accordingly.
+ * It uses ANSI escape codes for terminal colors in Node.js and CSS styles for console logs in the browser.
+ *
+ * @param mod - Optional module name to include in the log details.
+ * @returns An object with methods for logging messages and a timer function.
  */
 export declare const useLogger: (mod?: string) => {
     timer(process: string): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/utilities",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.61",
   "description": "RUF: Utility package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -32,17 +32,18 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "date-fns": "^4.0.0",
-    "libphonenumber-js": "^1.11.8",
-    "numeral": "^2.0.6",
-    "yup": "^1.4.0"
+    "date-fns": "~4.1.0",
+    "libphonenumber-js": "~1.12.25",
+    "numeral": "~2.0.6",
+    "world-countries": "~5.1.0",
+    "yup": "~1.7.1"
   },
   "devDependencies": {
-    "@types/numeral": "^2.0.2"
+    "@types/numeral": "~2.0.5"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "21167df13cedeae8b365e87b9bab6d7401298cb6"
+  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
 }

package/src/_ascii.ts

@@ -80,14 +80,19 @@ const conversions = {
 };
 
 /**
- * latin to ascii converter for convenient searching
- * @internal
+ * Converts a string to its ASCII representation by replacing
+ * special characters with their ASCII equivalents.
+ * This function is useful for normalizing strings for search or display purposes.
+ * It replaces characters like "Ä" with "Ae", "ß" with "ss", etc.
+ *
+ * @param {string} str - The input string to be converted.
+ * @returns {string} - The ASCII representation of the input string.
  */
 export const ascii = (str: string) => {
   if (isEmpty(str)) return "";
-  Object.entries(conversions).forEach(([a, l]) => {
-    const re = new RegExp(l, "g");
-    str = `${str}`.replace(re, a);
+  Object.entries(conversions).forEach((entry) => {
+    const re = new RegExp(entry[1], "g");
+    str = `${str}`.replace(re, entry[0]);
   });
   return str;
 };

package/src/_boundingBox.ts

@@ -38,8 +38,13 @@ const _getBox = (
 };
 
 /**
- * box "x,y,w,h" | [x,y,w,h]
- * returns canvas box [x,y,w,h]
+ * Get bounding box from a string or array.
+ * The box can be in the format "x,y,w,h" or [x,y,w,h].
+ * The box is adjusted to ensure that x and y are non-negative.
+ * The width and height are adjusted accordingly.
+ *
+ * @param box "x,y,w,h" | [x,y,w,h]
+ * @returns canvas box [x,y,w,h]
  */
 export const getBox = (
   box: string | [number, number, number, number] = "0,0,0,0",
@@ -55,8 +60,15 @@ export const getBox = (
 };
 
 /**
- * box "x1,y1,x2,y2" | [x1,y1,x2,y2]
- * returns canvas box [x,y,w,h]
+ * Get bounding box from a string or array.
+ * The box can be in the format "x1,y1,x2,y2" or [x1,y1,x2,y2].
+ * The box is adjusted to ensure that x1 and y1 are non-negative.
+ * The width and height are calculated as x2 - x1 and y2 - y1 respectively.
+ * If x1 or y1 are negative, they are set to 0 and the width and height are adjusted accordingly.
+ * This is useful for ensuring that the bounding box is always within the canvas area.
+ *
+ * @param box "x1,y1,x2,y2" | [x1,y1,x2,y2]
+ * @returns canvas box [x,y,w,h]
  */
 export const getBoundingBox = (
   box: string | [number, number, number, number] = "0,0,0,0",