@meonode/canvas 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/esm/canvas/layout.canvas.util.js

@@ -37,7 +37,7 @@ class BoxNode {
     key;
     /**
      * Creates a new BoxNode instance
-     * @param props - Initial box properties and styling
+     * @param props Initial box properties and styling
      */
     constructor(props = {}) {
         const children = (Array.isArray(props?.children) ? props.children : [props.children]).filter(child => child);
@@ -72,7 +72,7 @@ class BoxNode {
     }
     /**
      * Inherits styles from the parent node.
-     * @param {BoxProps & BaseProps} parentProps - Parent node properties to inherit from.
+     * @param {BoxProps & BaseProps} parentProps Parent node properties to inherit from.
      */
     resolveInheritedStyles(parentProps) {
         if (parentProps.key) {
@@ -112,8 +112,8 @@ class BoxNode {
     }
     /**
      * Appends a child node at the specified index.
-     * @param {BoxNode} child - Child node to append.
-     * @param index - Index to insert child at
+     * @param {BoxNode} child Child node to append.
+     * @param index Index to insert child at
      */
     appendChild(child, index) {
         if (!child || !child.node) {
@@ -152,7 +152,7 @@ class BoxNode {
     }
     /**
      * Applies layout properties to the Yoga node.
-     * @param props - Box properties containing layout values
+     * @param props Box properties containing layout values
      */
     setLayout(props) {
         // --- Yoga layout property application ---
@@ -295,9 +295,9 @@ class BoxNode {
     }
     /**
      * Renders the node and its children to the canvas.
-     * @param {CanvasRenderingContext2D} ctx - Canvas rendering context (from skia-canvas).
-     * @param {number} offsetX - X offset for rendering.
-     * @param {number} offsetY - Y offset for rendering.
+     * @param {CanvasRenderingContext2D} ctx Canvas rendering context (from skia-canvas).
+     * @param {number} offsetX X offset for rendering.
+     * @param {number} offsetY Y offset for rendering.
      */
     render(ctx, offsetX = 0, offsetY = 0) {
         const layout = this.node.getComputedLayout();
@@ -322,13 +322,7 @@ class BoxNode {
         try {
             // --- Transformation Setup ---
             const transform = this.props.transform;
-            const needsTransform = transform &&
-                (transform.translateX ||
-                    transform.translateY ||
-                    transform.rotate ||
-                    transform.scale ||
-                    transform.scaleX ||
-                    transform.scaleY);
+            const needsTransform = transform && (transform.translateX || transform.translateY || transform.rotate || transform.scale || transform.scaleX || transform.scaleY);
             let savedContextForTransform = false;
             if (needsTransform) {
                 ctx.save();
@@ -455,12 +449,11 @@ class BoxNode {
     /**
      * Renders the node's visual content including background fills, shadows, and borders.
      * This is an internal method used by the render() pipeline.
-     *
-     * @param ctx - The skia-canvas 2D rendering context to draw into
-     * @param x - The absolute x-coordinate where drawing should begin
-     * @param y - The absolute y-coordinate where drawing should begin
-     * @param width - The width of the content area to render
-     * @param height - The height of the content area to render
+     * @param ctx The skia-canvas 2D rendering context to draw into
+     * @param x The absolute x-coordinate where drawing should begin
+     * @param y The absolute y-coordinate where drawing should begin
+     * @param width The width of the content area to render
+     * @param height The height of the content area to render
      */
     _renderContent(ctx, x, y, width, height) {
         // Calculate border radius values for all corners
@@ -727,7 +720,7 @@ class BoxNode {
 }
 /**
  * Creates a new BoxNode instance.
- * @param {BoxProps} props - Box properties and configuration.
+ * @param {BoxProps} props Box properties and configuration.
  * @returns {BoxNode} New BoxNode instance.
  */
 const Box = (props) => new BoxNode(props);
@@ -748,7 +741,7 @@ class ColumnNode extends BoxNode {
 }
 /**
  * Creates a new ColumnNode instance.
- * @param {BoxProps} props - Column properties and configuration.
+ * @param {BoxProps} props Column properties and configuration.
  * @returns {ColumnNode} New ColumnNode instance.
  */
 const Column = (props) => new ColumnNode(props);
@@ -769,7 +762,7 @@ class RowNode extends BoxNode {
 }
 /**
  * Creates a new RowNode instance.
- * @param {BoxProps} props - Row properties and configuration.
+ * @param {BoxProps} props Row properties and configuration.
  * @returns {RowNode} New RowNode instance.
  */
 const Row = (props) => new RowNode(props);

package/dist/esm/canvas/root.canvas.util.d.ts

@@ -13,11 +13,13 @@ export declare class RootNode extends ColumnNode {
     private ctx;
     /** Target width for the canvas in pixels */
     private readonly targetWidth;
+    /** Target height for the canvas in pixels */
+    private readonly targetHeight;
     /** Scale factor for rendering (e.g. 2 for 2x resolution) */
     private readonly scale;
     /**
      * Creates a new root node for canvas rendering
-     * @param props - Configuration properties for the root node
+     * @param props Configuration properties for the root node
      * @throws Error if width property is not provided
      */
     constructor(props: RootProps & BaseProps);
@@ -35,7 +37,7 @@ export declare class RootNode extends ColumnNode {
 }
 /**
  * Creates and renders a new root node with the given properties
- * @param props - Configuration properties for the root node
+ * @param props Configuration properties for the root node
  * @returns Promise resolving to the rendered Canvas instance
  */
 export declare const Root: (props: RootProps) => Promise<Canvas>;

package/dist/esm/canvas/root.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,UAAU,EAAW,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAUnE,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAsCxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAqChC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAU,OAAO,SAAS,oBAAuC,CAAA"}
+{"version":3,"file":"root.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,UAAU,EAAW,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAUnE,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,6CAA6C;IAC7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IACrC,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAyCxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAqChC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAU,OAAO,SAAS,oBAAuC,CAAA"}

package/dist/esm/canvas/root.canvas.util.js

@@ -18,16 +18,19 @@ class RootNode extends ColumnNode {
     ctx = null;
     /** Target width for the canvas in pixels */
     targetWidth;
+    /** Target height for the canvas in pixels */
+    targetHeight;
     /** Scale factor for rendering (e.g. 2 for 2x resolution) */
     scale;
     /**
      * Creates a new root node for canvas rendering
-     * @param props - Configuration properties for the root node
+     * @param props Configuration properties for the root node
      * @throws Error if width property is not provided
      */
     constructor(props) {
         // Call the parent constructor with root name and props
         super({ name: 'Root', ...props });
+        this.props = props;
         // Validate the required width property
         if (!props.width) {
             throw new Error('Width and height are required for Root');
@@ -51,6 +54,7 @@ class RootNode extends ColumnNode {
         // Set up scale and width
         this.scale = props.scale || 1;
         this.targetWidth = props.width;
+        this.targetHeight = props.height;
         this.node.setWidth(this.targetWidth);
         // Initialize children nodes
         this.processInitialChildren();
@@ -93,7 +97,7 @@ class RootNode extends ColumnNode {
         // Step 4: Create a canvas with calculated dimensions
         const calculatedContentHeight = this.node.getComputedHeight();
         const finalCanvasWidth = Math.ceil(this.targetWidth * this.scale);
-        const finalCanvasHeight = Math.max(1, Math.ceil(calculatedContentHeight * this.scale));
+        const finalCanvasHeight = this.targetHeight ? Math.ceil(this.targetHeight * this.scale) : Math.max(1, Math.ceil(calculatedContentHeight * this.scale));
         // Step 5: Set up canvas context
         this.canvas = new Canvas(finalCanvasWidth, finalCanvasHeight);
         this.ctx = this.canvas.getContext('2d');
@@ -108,7 +112,7 @@ class RootNode extends ColumnNode {
 }
 /**
  * Creates and renders a new root node with the given properties
- * @param props - Configuration properties for the root node
+ * @param props Configuration properties for the root node
  * @returns Promise resolving to the rendered Canvas instance
  */
 const Root = async (props) => await new RootNode(props).render();

package/dist/esm/canvas/text.canvas.util.d.ts

@@ -33,8 +33,7 @@ export declare class TextNode extends BoxNode {
      * - \b - Backspace (removed)
      * - \f - Form feed (treated as newline)
      * - \v - Vertical tab (treated as newline)
-     *
-     * @param input - Raw text string potentially containing escape sequences
+     * @param input Raw text string potentially containing escape sequences
      * @returns Processed string with escape sequences converted
      */
     private processEscapeSequences;
@@ -52,9 +51,8 @@ export declare class TextNode extends BoxNode {
      * <color="red">, <color='red'>, <color=red>
      *
      * Tags can be nested and must be properly closed with </tag>
-     *
-     * @param input - Text string containing markup tags
-     * @param baseStyle - Default style properties to apply to all segments
+     * @param input Text string containing markup tags
+     * @param baseStyle Default style properties to apply to all segments
      * @returns Array of styled text segments with consistent style properties
      */
     private parseRichText;
@@ -69,8 +67,7 @@ export declare class TextNode extends BoxNode {
      * - Style: segment <i> > base fontStyle
      * - Size: segment size > base fontSize
      * - Family: base fontFamily
-     *
-     * @param segmentStyle - Optional TextSegment styling to override base props
+     * @param segmentStyle Optional TextSegment styling to override base props
      * @returns Formatted CSS font string for canvas context
      */
     private getFontString;
@@ -87,33 +84,30 @@ export declare class TextNode extends BoxNode {
      * 2. Otherwise calculating dynamic height based on largest font size per line
      * 3. Adding leading space above/below text content
      * 4. Including specified line gaps between lines
-     *
-     * @param widthConstraint - Maximum allowed width in pixels for text layout
-     * @param widthMode - YogaLayout mode determining how width constraint is applied
+     * @param widthConstraint Maximum allowed width in pixels for text layout
+     * @param widthMode YogaLayout mode determining how width constraint is applied
      * @returns Calculated minimum dimensions required to render text content
-     *   - width: Total width needed for text layout
-     *   - height: Total height including line heights and gaps
+     * - width: Total width needed for text layout
+     * - height: Total height including line heights and gaps
      */
     private measureText;
     /**
      * Wraps text segments into multiple lines while respecting width constraints and preserving styling.
      * Handles rich text attributes (color, weight, size, bold, italic) and proper word wrapping.
      * Also respects explicit newline characters (\n) for forced line breaks.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segments - Array of text segments with styling information
-     * @param maxWidth - Maximum allowed width for each line in pixels
-     * @param parsedWordSpacingPx - Additional spacing to add between words in pixels
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segments Array of text segments with styling information
+     * @param maxWidth Maximum allowed width for each line in pixels
+     * @param parsedWordSpacingPx Additional spacing to add between words in pixels
      * @returns Array of lines, where each line contains styled text segments
      */
     private wrapTextRich;
     /**
      * Breaks a word segment into multiple segments that each fit within the specified width constraint.
      * Maintains all styling properties (color, weight, size, bold, italic) across broken segments.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segmentToBreak - Original text segment to split
-     * @param maxWidth - Maximum width allowed for each resulting segment
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segmentToBreak Original text segment to split
+     * @param maxWidth Maximum width allowed for each resulting segment
      * @returns Array of TextSegments, each fitting maxWidth, or original segment if no breaking needed
      */
     private breakWordRich;
@@ -132,12 +126,11 @@ export declare class TextNode extends BoxNode {
      * - Ellipsis truncation
      * - Rich text styling per segment (color, weight, size, etc)
      * - Performance optimizations (clipping, visibility checks)
-     *
-     * @param ctx - Canvas rendering context
-     * @param x - Content box left position in pixels
-     * @param y - Content box top position in pixels
-     * @param width - Content box total width including padding
-     * @param height - Content box total height including padding
+     * @param ctx Canvas rendering context
+     * @param x Content box left position in pixels
+     * @param y Content box top position in pixels
+     * @param width Content box total width including padding
+     * @param height Content box total height including padding
      */
     protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
 }

package/dist/esm/canvas/text.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAW;IACzC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;cAuB1C,aAAa,IAAI,IAAI;IA+DxC;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,WAAW;IA+OnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,YAAY;IAkLpB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;;OAiBG;cACgB,cAAc,CAC/B,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;CAiWjB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}
+{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;cAuB1C,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA8NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IAuKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CA8UrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}

package/dist/esm/canvas/text.canvas.util.js

@@ -2,6 +2,7 @@ import { Canvas } from 'skia-canvas';
 import { BoxNode } from './layout.canvas.util.js';
 import { Style } from '../constant/common.const.js';
 
+// TODO: Add comprehensive unit tests for this file.
 /**
  * Node for rendering text content with rich text styling support
  * Supports color and weight variations through HTML-like tags
@@ -10,7 +11,7 @@ class TextNode extends BoxNode {
     segments = [];
     lines = [];
     static measurementContext = null;
-    metricsString = 'Ag|\``';
+    metricsString = 'Ag|``';
     lineHeights = [];
     lineAscents = [];
     lineContentHeights = [];
@@ -92,8 +93,7 @@ class TextNode extends BoxNode {
      * - \b - Backspace (removed)
      * - \f - Form feed (treated as newline)
      * - \v - Vertical tab (treated as newline)
-     *
-     * @param input - Raw text string potentially containing escape sequences
+     * @param input Raw text string potentially containing escape sequences
      * @returns Processed string with escape sequences converted
      */
     processEscapeSequences(input) {
@@ -139,9 +139,8 @@ class TextNode extends BoxNode {
      * <color="red">, <color='red'>, <color=red>
      *
      * Tags can be nested and must be properly closed with </tag>
-     *
-     * @param input - Text string containing markup tags
-     * @param baseStyle - Default style properties to apply to all segments
+     * @param input Text string containing markup tags
+     * @param baseStyle Default style properties to apply to all segments
      * @returns Array of styled text segments with consistent style properties
      */
     parseRichText(input, baseStyle) {
@@ -251,8 +250,7 @@ class TextNode extends BoxNode {
      * - Style: segment <i> > base fontStyle
      * - Size: segment size > base fontSize
      * - Family: base fontFamily
-     *
-     * @param segmentStyle - Optional TextSegment styling to override base props
+     * @param segmentStyle Optional TextSegment styling to override base props
      * @returns Formatted CSS font string for canvas context
      */
     getFontString(segmentStyle) {
@@ -303,12 +301,11 @@ class TextNode extends BoxNode {
      * 2. Otherwise calculating dynamic height based on largest font size per line
      * 3. Adding leading space above/below text content
      * 4. Including specified line gaps between lines
-     *
-     * @param widthConstraint - Maximum allowed width in pixels for text layout
-     * @param widthMode - YogaLayout mode determining how width constraint is applied
+     * @param widthConstraint Maximum allowed width in pixels for text layout
+     * @param widthMode YogaLayout mode determining how width constraint is applied
      * @returns Calculated minimum dimensions required to render text content
-     *   - width: Total width needed for text layout
-     *   - height: Total height including line heights and gaps
+     * - width: Total width needed for text layout
+     * - height: Total height including line heights and gaps
      */
     measureText(widthConstraint, widthMode) {
         // Create measurement canvas if not exists
@@ -428,9 +425,7 @@ class TextNode extends BoxNode {
             // Calculate total content height for line
             const actualContentHeight = maxAscent + maxDescent;
             // Determine final line box height with leading
-            const targetLineBoxHeight = typeof this.props.lineHeight === 'number' && this.props.lineHeight > 0
-                ? this.props.lineHeight
-                : maxFontSizeOnLine * defaultLineHeightMultiplier;
+            const targetLineBoxHeight = typeof this.props.lineHeight === 'number' && this.props.lineHeight > 0 ? this.props.lineHeight : maxFontSizeOnLine * defaultLineHeightMultiplier;
             // Use larger of target height or content height to prevent clipping
             const finalLineHeight = Math.max(actualContentHeight, targetLineBoxHeight);
             // Store line metrics for rendering
@@ -534,11 +529,10 @@ class TextNode extends BoxNode {
      * Wraps text segments into multiple lines while respecting width constraints and preserving styling.
      * Handles rich text attributes (color, weight, size, bold, italic) and proper word wrapping.
      * Also respects explicit newline characters (\n) for forced line breaks.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segments - Array of text segments with styling information
-     * @param maxWidth - Maximum allowed width for each line in pixels
-     * @param parsedWordSpacingPx - Additional spacing to add between words in pixels
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segments Array of text segments with styling information
+     * @param maxWidth Maximum allowed width for each line in pixels
+     * @param parsedWordSpacingPx Additional spacing to add between words in pixels
      * @returns Array of lines, where each line contains styled text segments
      */
     wrapTextRich(ctx, segments, maxWidth, parsedWordSpacingPx) {
@@ -552,8 +546,7 @@ class TextNode extends BoxNode {
         const finalizeLine = (forceEmpty = false) => {
             // Remove trailing whitespace segments unless we're forcing an empty line
             if (!forceEmpty) {
-                while (currentLineSegments.length > 0 &&
-                    /^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text)) {
+                while (currentLineSegments.length > 0 && /^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text)) {
                     currentLineSegments.pop();
                 }
             }
@@ -596,8 +589,7 @@ class TextNode extends BoxNode {
                                 wordWidth = ctx.measureText(wordOrSpace).width;
                                 wordSegment = { text: wordOrSpace, ...segmentStyle, width: wordWidth };
                             }
-                            const needsSpace = currentLineSegments.length > 0 &&
-                                !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
+                            const needsSpace = currentLineSegments.length > 0 && !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
                             const spaceToAdd = needsSpace ? spaceWidth + parsedWordSpacingPx : 0;
                             if (currentLineWidth + spaceToAdd + wordWidth <= maxWidth || currentLineSegments.length === 0) {
                                 if (needsSpace) {
@@ -703,10 +695,9 @@ class TextNode extends BoxNode {
     /**
      * Breaks a word segment into multiple segments that each fit within the specified width constraint.
      * Maintains all styling properties (color, weight, size, bold, italic) across broken segments.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segmentToBreak - Original text segment to split
-     * @param maxWidth - Maximum width allowed for each resulting segment
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segmentToBreak Original text segment to split
+     * @param maxWidth Maximum width allowed for each resulting segment
      * @returns Array of TextSegments, each fitting maxWidth, or original segment if no breaking needed
      */
     breakWordRich(ctx, segmentToBreak, maxWidth) {
@@ -789,12 +780,11 @@ class TextNode extends BoxNode {
      * - Ellipsis truncation
      * - Rich text styling per segment (color, weight, size, etc)
      * - Performance optimizations (clipping, visibility checks)
-     *
-     * @param ctx - Canvas rendering context
-     * @param x - Content box left position in pixels
-     * @param y - Content box top position in pixels
-     * @param width - Content box total width including padding
-     * @param height - Content box total height including padding
+     * @param ctx Canvas rendering context
+     * @param x Content box left position in pixels
+     * @param y Content box top position in pixels
+     * @param width Content box total width including padding
+     * @param height Content box total height including padding
      */
     _renderContent(ctx, x, y, width, height) {
         super._renderContent(ctx, x, y, width, height);
@@ -995,11 +985,7 @@ class TextNode extends BoxNode {
                     let applyEllipsisAfter = false;
                     if (isLastRenderedLine && needsEllipsis && !isSpaceSegment) {
                         const currentTotalWidth = accumulatedWidth + spaceToAddBefore + segmentWidth;
-                        const spaceNeededAfter = isLastSegmentOnLine
-                            ? 0
-                            : isJustify
-                                ? spacePerWordGapPlusSpacing
-                                : spaceWidth + parsedWordSpacingPx;
+                        const spaceNeededAfter = isLastSegmentOnLine ? 0 : isJustify ? spacePerWordGapPlusSpacing : spaceWidth + parsedWordSpacingPx;
                         if (currentTotalWidth > contentWidth - spaceNeededAfter) {
                             const availableWidthForSegment = contentWidth - accumulatedWidth - spaceToAddBefore - ellipsisWidth;
                             if (availableWidthForSegment > 0) {
@@ -1033,11 +1019,7 @@ class TextNode extends BoxNode {
                     const remainingRenderWidth = contentX + contentWidth - currentX;
                     if (currentSegmentRenderWidth > 0 && remainingRenderWidth > 0 && !isSpaceSegment) {
                         ctx.textAlign = 'left';
-                        const shadows = this.props.textShadow
-                            ? Array.isArray(this.props.textShadow)
-                                ? this.props.textShadow
-                                : [this.props.textShadow]
-                            : [];
+                        const shadows = this.props.textShadow ? (Array.isArray(this.props.textShadow) ? this.props.textShadow : [this.props.textShadow]) : [];
                         ctx.save();
                         // Draw shadows
                         for (const shadow of shadows) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meonode/canvas",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "A declarative, component-based library for generating high-quality images on a canvas, inspired by the MeoNode UI library for React. It leverages skia-canvas for rendering and yoga-layout for flexible, CSS-like layouts.",
   "keywords": [
     "canvas",
@@ -36,7 +36,8 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^6.0.0",
+    "@eslint/js": "^9.39.1",
+    "@jest/globals": "^30.2.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
@@ -46,17 +47,12 @@
     "@semantic-release/npm": "^13.1.1",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@types/jest": "^30.0.0",
-    "@types/lodash-es": "^4.17.12",
-    "@types/module-alias": "^2.0.4",
     "@types/sharp": "^0.32.0",
-    "@types/skia-canvas": "^0.9.28",
-    "@types/tinycolor2": "^1.4.6",
-    "@types/yoga-layout": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsdoc": "^61.1.12",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-unused-imports": "^4.3.0",
     "husky": "^9.1.7",
@@ -75,7 +71,7 @@
   "dependencies": {
     "file-type": "^21.0.0",
     "lodash-es": "^4.17.21",
-    "module-alias": "^2.2.3",
+    "sharp": "^0.34.5",
     "skia-canvas": "^3.0.8",
     "tinycolor2": "^1.6.0",
     "tslib": "^2.8.1",