### Install jszpl via npm

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Command to install the library in a Node.js project.

```bash
$ npm i jszpl
```

--------------------------------

### Install JSZPL package

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/INDEX.md

Use npm to install the library in your project.

```typescript
npm install jszpl
```

--------------------------------

### Use SizeType

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/07-enums.md

Examples of initializing Size objects with different SizeType configurations.

```typescript
const absoluteSize = new Size(150, SizeType.Absolute); // 150 dots
const relativeSize = new Size(1, SizeType.Relative);    // 1 unit
const fractionSize = new Size(0.5, SizeType.Fraction);  // 50% of parent
```

--------------------------------

### Size Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Examples demonstrating absolute, relative, and fractional size configurations.

```typescript
// Absolute: fixed 150 dots
const abs = new Size(150, SizeType.Absolute);

// Relative: 2 units (multiplied by unit size)
const rel = new Size(2, SizeType.Relative);
const dots = rel.getValue(100); // Returns 200

// Fraction: 50% of parent
const frac = new Size(0.5, SizeType.Fraction);

// Shorthand: absolute is default
const simple = new Size(100); // Same as Size(100, SizeType.Absolute)
const simpleNum = 100; // Numbers are auto-converted to Size(100, Absolute)
```

--------------------------------

### Create Minimal Label

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

A complete example demonstrating label initialization, property configuration, and ZPL generation.

```typescript
import { Label, Text, FontFamily, PrintDensity } from 'jszpl';

const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;
label.height = 50;

const text = new Text();
text.text = 'Hello';
text.fontFamily = FontFamily.D;
label.content.push(text);

const zpl = label.generateZPL();
```

--------------------------------

### ZPL ^GFA Command Example

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Demonstrates a specific instance of the ^GFA command for a 40x40 pixel image.

```zpl
^GFA,40,40,5,80808080,FFFF
```

--------------------------------

### Example Usage of ImageResizer

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Demonstrates scaling image data using the ImageResizer utility.

```typescript
const resizer = LabelTools.ImageResizer;
const originalData = [1, 0, 1, 0, ...]; // 100x100 pixels
const resized = resizer.resize(200, 200, 100, 100, originalData);
// resized now contains 200x200 pixels (scaled 2x)
```

--------------------------------

### Configure Size properties

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Examples of setting width and column sizes using the Size class and SizeType enum.

```typescript
grid.width = new Size(250, SizeType.Absolute);
grid.columns.push(new Size(1, SizeType.Relative));
```

```typescript
grid.width = 250;
grid.width = new Size(250);
grid.width = new Size(250, SizeType.Absolute);
```

--------------------------------

### BarcodeType Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Examples showing both constructor and static shortcut usage for setting barcode types.

```typescript
// Using constructor
barcode.type = new BarcodeType(BarcodeTypeName.Code128);

// Using static shortcuts (recommended)
barcode.type = BarcodeType.Code128;
barcode.type = BarcodeType.QRCode;
```

--------------------------------

### PrintDensity Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Examples showing both constructor and static shortcut usage for setting print density.

```typescript
// Using constructor
label.printDensity = new PrintDensity(8);

// Using static shortcuts (recommended)
label.printDensity = PrintDensity.dpmm8;
label.printDensity = PrintDensity.dpmm12;
```

--------------------------------

### GridPosition Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Examples of setting grid positions directly or via the constructor.

```typescript
const text = new Text();
text.grid.column = 1; // Place in column 1
text.grid.row = 0;    // Row 0

// Or using constructor
text.grid = new GridPosition(1, 0);
```

--------------------------------

### Barcode ZPL Generation Example

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/03-barcode.md

Demonstrates initializing a barcode object and generating the corresponding ZPL command string.

```typescript
const barcode = new Barcode();
barcode.data = '123456789';
barcode.type = BarcodeType.Code128;
barcode.width = 200;
barcode.height = 100;

const zpl = barcode.generateZPL(10, 10, 780, 200);
// Output includes: ^FO10,10^BCN,100,Y,N,N,N^FD123456789^FS
```

--------------------------------

### Usage Patterns for Serial Numbers

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Examples demonstrating standard incrementing, custom starting points, decrementing, and disabling leading zeroes.

```typescript
const serial = new SerialNumber();
label.content.push(serial);
serial.format = '0001'; // Start at 0001
serial.increment = 1; // Increment by 1
serial.fontFamily = FontFamily.D;

// Each label printed will increment: 0001, 0002, 0003, ...
```

```typescript
const serial = new SerialNumber();
serial.format = '5000'; // Start at 5000
serial.increment = 1;
serial.fontFamily = FontFamily.B;

label.content.push(serial);
// Output: 5000, 5001, 5002, ...
```

```typescript
const serial = new SerialNumber();
serial.format = '0100';
serial.increment = -1; // Decrement
serial.fontFamily = FontFamily.D;

label.content.push(serial);
// Output: 0100, 0099, 0098, ...
```

```typescript
const serial = new SerialNumber();
serial.format = '1';
serial.printLeadingZeroes = false;
serial.increment = 1;

label.content.push(serial);
// Output: 1, 2, 3, 4, ...
```

--------------------------------

### Image with Border

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Example of configuring a graphic with a specific border thickness.

```typescript
const graphic = new Graphic();
graphic.width = 200;
graphic.height = 150;
graphic.border = 3;
graphic.data = new GraphicData(100, 100, pixelArray);

label.content.push(graphic);
```

--------------------------------

### Calculate Component Position Example

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Example usage of getPosition to determine final coordinates and dimensions.

```typescript
const text = new Text();
text.width = 200;
text.height = 50;
text.left = 10;
text.top = 10;
text.margin = new Spacing(5);

const pos = text.getPosition(0, 0, 800, 400);
// pos = { left: 15, top: 15, width: 200, height: 50 }
```

--------------------------------

### Code128 ZPL Output Example

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/03-barcode.md

A concrete example of a Code128 barcode command string.

```zpl
^FO100,50^BCN,80,Y,N,N,N^FD>:ABC123456^FS
```

--------------------------------

### Basic Image Rendering

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Example of setting dimensions and data for a basic graphic element.

```typescript
const graphic = new Graphic();
graphic.width = 200;
graphic.height = 150;

// Assume imageData is obtained from image processing
graphic.data = new GraphicData(imageWidth, imageHeight, binaryPixels);

label.content.push(graphic);
```

--------------------------------

### Generate a ZPL label in browser and Node.js

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Basic setup for creating a label, adding text, and generating ZPL output.

```html
<script src="dist/jszpl.iife.js"></script>

<script type="text/javascript">
  const { Label, PrintDensity, PrintDensityName, Spacing, Text, FontFamily, FontFamilyName } = JSZPL;

  const label = new Label();
  label.printDensity = new PrintDensity(PrintDensityName['8dpmm']);
  label.width = 100;
  label.height = 50;
  label.padding = new Spacing(10);

  const text = new Text();
  label.content.push(text);
  text.fontFamily = new FontFamily(FontFamilyName.D);
  text.text = 'Hello World!';

  const zpl = label.generateZPL();
  //^XA
  //^FO10,10^AD,,,
  //^FB780,1000,0,L,0
  //^FDHello World!^FS
  //^XZ
</script>
```

```typescript
import { Label, PrintDensity, PrintDensityName, Spacing, Text, FontFamily, FontFamilyName } from 'jszpl';

const label = new Label();
label.printDensity = new PrintDensity(PrintDensityName['8dpmm']);
label.width = 100;
label.height = 50;
label.padding = new Spacing(10);

const text = new Text();
label.content.push(text);
text.fontFamily = new FontFamily(FontFamilyName.D);
text.text = 'Hello World!';

const zpl = label.generateZPL();
//^XA
//^FO10,10^AD,,,
//^FB780,1000,0,L,0
//^FDHello World!^FS
//^XZ
```

--------------------------------

### Create Vertical Line

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Example of creating a vertical line from (0,0) to (0,100).

```typescript
const line = new Line();
line.x1 = 0;
line.y1 = 0;
line.x2 = 0;
line.y2 = 100;
line.thickness = 2;

label.content.push(line);
```

--------------------------------

### Get Text Lines

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Retrieves the format string as an array of lines.

```typescript
getTextLines(): string[]
```

--------------------------------

### GraphicData Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Examples of creating GraphicData instances from pixel arrays or empty constructors.

```typescript
// Create from processed image
const pixelArray = [1, 0, 1, 0, ...]; // binary data
const graphicData = new GraphicData(100, 50, pixelArray);

graphic.data = graphicData;

// Empty graphic
const empty = new GraphicData();
```

--------------------------------

### Create Horizontal Line

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Example of creating a horizontal line from (0,0) to (200,0).

```typescript
const line = new Line();
label.content.push(line);
line.x1 = 0;
line.y1 = 0;
line.x2 = 200;
line.y2 = 0;
line.thickness = 2;

// Line goes from (0,0) to (200,0)
```

--------------------------------

### Component Selection Decision Tree

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Use this guide to determine the appropriate component based on the desired output element.

```text
Need text? → Text component
Need barcode? → Barcode component (pick type)
Need box/frame? → Box component
Need layout? → Grid component
Need custom ZPL? → Raw component
Need image/logo? → Graphic component
Need auto-numbers? → SerialNumber component
```

--------------------------------

### ZPL Output Structure Template

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/01-label.md

Standard structure for ZPL output, including start and end commands and optional character set configuration.

```zpl
^XA
[^CI<characterSet> - optional]
[child component ZPL commands]
^XZ
```

--------------------------------

### Generate ZPL commands for Text

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Defines the signature for generating ZPL commands and provides an example of usage for rendering text.

```typescript
generateZPL(
  offsetLeft: number,
  offsetTop: number,
  availableWidth: number,
  availableHeight: number,
  widthUnits?: number,
  heightUnits?: number,
  useLegacyPositioning?: boolean
): string
```

```typescript
const text = new Text();
text.text = 'Hello World!';
text.fontFamily = FontFamily.D;
text.horizontalAlignment = Alignment.Center;

const zpl = text.generateZPL(10, 10, 780, 200);
// Output:
// ^FO10,10^AD,,,
// ^FB780,1000,0,C,0
// ^FDHello World!\&^FS
```

--------------------------------

### Usage of Rotation

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/07-enums.md

Example of assigning a rotation value to a variable.

```typescript
// Future use once rotation is implemented
const rotation = Rotation.Right; // 90 degrees
```

--------------------------------

### Use AlignmentValue

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/07-enums.md

Example of applying alignment values to an Alignment object.

```typescript
const alignment = new Alignment(AlignmentValue.Center);
// Or use Alignment.Center shorthand
```

--------------------------------

### Initialize JSZPL Components

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Construct instances of visual and layout components.

```typescript
// Root
const label = new Label();

// Visual
const text = new Text();
const barcode = new Barcode();
const box = new Box();
const circle = new Circle();
const line = new Line();
const graphic = new Graphic();
const serial = new SerialNumber();
const raw = new Raw();

// Layout
const grid = new Grid();
```

--------------------------------

### Create Diagonal Line

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Example of creating a diagonal line from (50,50) to (150,150).

```typescript
const line = new Line();
line.x1 = 50;
line.y1 = 50;
line.x2 = 150;
line.y2 = 150;
line.thickness = 3;

label.content.push(line);
```

--------------------------------

### Create a basic Label

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/01-label.md

Instantiate a new Label and configure basic dimensions and content.

```typescript
const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100; // mm
label.height = 50; // mm
label.padding = new Spacing(5);

const text = new Text();
label.content.push(text);
text.text = 'My Label';
text.fontFamily = FontFamily.D;

const zpl = label.generateZPL();
// Send zpl to printer
```

--------------------------------

### Text Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Initializes a new instance of the Text component.

```APIDOC
## Constructor

### Description
Creates a new text element with default properties.

### Signature
`new Text()`
```

--------------------------------

### Create Multiple Lines for Dividers

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Example of adding both horizontal and vertical lines to a label.

```typescript
// Horizontal divider
const hLine = new Line();
hLine.x1 = 0;
hLine.y1 = 50;
hLine.x2 = 300;
hLine.y2 = 50;
hLine.thickness = 1;
label.content.push(hLine);

// Vertical divider
const vLine = new Line();
vLine.x1 = 150;
vLine.y1 = 0;
vLine.x2 = 150;
vLine.y2 = 100;
vLine.thickness = 1;
label.content.push(vLine);
```

--------------------------------

### Importing and using jszpl enums

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/07-enums.md

Demonstrates how to import specific enums or the entire set and apply them to property classes.

```typescript
// Import specific enums
import { AlignmentValue, SizeType } from 'jszpl';

// Or import all from main entry
import { 
  AlignmentValue, 
  SizeType, 
  FontFamilyName, 
  PrintDensityName,
  BarcodeTypeName,
  Rotation
} from 'jszpl';

// Use with property classes
import { Alignment, Size, FontFamily } from 'jszpl';

const align = new Alignment(AlignmentValue.Center);
const size = new Size(100, SizeType.Absolute);
const font = new FontFamily(FontFamilyName.D);
```

--------------------------------

### Initialize Text Component

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Constructor used to instantiate a new text element with default properties.

```typescript
constructor()
```

--------------------------------

### Label Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/01-label.md

Initializes a new instance of the Label class.

```APIDOC
## constructor()

### Description
Creates a new label instance with default properties.

### Usage
```typescript
import { Label } from 'jszpl';
const label = new Label();
```
```

--------------------------------

### Initialize Spacing with Constructor Shortcuts

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/INDEX.md

Use these shorthand constructors to define padding or margin values for label elements.

```typescript
new Spacing()              // all: 0
new Spacing(10)            // all: 10
new Spacing(10, 20)        // h: 10, v: 20
new Spacing(5, 10, 15, 20) // l: 5, t: 10, r: 15, b: 20
```

--------------------------------

### FontFamily Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Demonstrates setting font families and accessing font metrics.

```typescript
// Using constructor
text.fontFamily = new FontFamily(FontFamilyName.D);

// Using static shortcuts (recommended)
text.fontFamily = FontFamily.A;
text.fontFamily = FontFamily.D;

// Accessing font metrics
const def = text.fontFamily.definition;
console.log(def.size.width, def.size.height);
```

--------------------------------

### Grid Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Creates a new instance of the Grid component.

```APIDOC
## constructor()

### Description
Creates a new grid element with default properties.
```

--------------------------------

### Barcode Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/03-barcode.md

Initializes a new instance of the Barcode component.

```APIDOC
## Constructor

### Description
Creates a new barcode element with default properties.

### Signature
`new Barcode()`
```

--------------------------------

### Alignment Class

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Represents text alignment (horizontal or vertical) with support for Start, Center, and End values.

```APIDOC
## Alignment

### Constructor
`new Alignment(value: AlignmentValue)`

### Static Factory Methods
- `Alignment.Start`
- `Alignment.Center`
- `Alignment.End`

### Methods
- `toString(): string` - Returns the alignment name.
```

--------------------------------

### Create a Product Label with Grid Layout

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/10-complete-example.md

Constructs a complex label using a Grid layout to organize product name, barcode, SKU, and price elements.

```typescript
import {
  Label, Text, Barcode, Box, FontFamily, FontFamilyName,
  BarcodeType, PrintDensity, Spacing, Alignment, Size, SizeType,
  Grid
} from 'jszpl';

const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;  // 100mm width
label.height = 80;  // 80mm height
label.padding = new Spacing(5);

// Create a grid with 1 column and 4 rows
const grid = new Grid();
label.content.push(grid);
grid.columns.push(new Size(1, SizeType.Relative));
grid.rows.push(new Size(20, SizeType.Absolute));  // Product name row
grid.rows.push(new Size(40, SizeType.Relative));  // Barcode row
grid.rows.push(new Size(20, SizeType.Absolute));  // SKU row
grid.rows.push(new Size(20, SizeType.Absolute));  // Price row
grid.rowSpacing = 2;

// Product Name
const productName = new Text();
productName.text = 'ACME Widget';
productName.fontFamily = FontFamily.B;
productName.horizontalAlignment = Alignment.Center;
productName.verticalAlignment = Alignment.Center;
grid.content.push(productName);

// Barcode
const barcode = new Barcode();
barcode.type = BarcodeType.Code128;
barcode.data = 'ABC123456789';
barcode.interpretationLine = true;
barcode.grid.row = 1;
grid.content.push(barcode);

// SKU
const sku = new Text();
sku.text = 'SKU: W-001-BLU';
sku.fontFamily = FontFamily.A;
sku.grid.row = 2;
grid.content.push(sku);

// Price
const price = new Text();
price.text = '$19.99';
price.fontFamily = FontFamily.B;
price.grid.row = 3;
grid.content.push(price);

const zpl = label.generateZPL();
```

--------------------------------

### Full Image Processing Workflow

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Demonstrates the complete process of loading an image, converting it to binary data, and generating ZPL output.

```typescript
import { 
  Graphic, 
  GraphicData, 
  LabelTools, 
  generateHexAscii, 
  encodeHexAscii 
} from 'jszpl';

// 1. Load or obtain image data (platform-specific)
const sourceImage = loadImageFromFile('logo.png'); // Your implementation

// 2. Convert to binary pixel array
const binaryPixels = sourceImage.toBlackAndWhite(); // 0 or 1 per pixel

// 3. Create GraphicData
const graphicData = new GraphicData(
  sourceImage.width,
  sourceImage.height,
  binaryPixels
);

// 4. Create Graphic component
const graphic = new Graphic();
graphic.data = graphicData;
graphic.width = 150;
graphic.height = 100;

// 5. Resizer will automatically scale in generateZPL()
label.content.push(graphic);

// 6. Generate ZPL (includes automatic scaling and encoding)
const zpl = label.generateZPL();

// The Graphic.generateZPL() internally:
// - Resizes image using ImageResizer
// - Converts to hex using generateHexAscii()
// - Encodes using encodeHexAscii()
// - Wraps in ^GFA command
```

--------------------------------

### Create a Label with Text

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Initializes a new label with specific dimensions and print density, then adds a text element to it.

```ts
const label = new Label();
label.printDensity = new PrintDensity(PrintDensityName['8dpmm']);
label.width = 100;
label.height = 50;
label.padding = new Spacing(10);

const text = new Text();
label.content.push(text);
text.fontFamily = new FontFamily(FontFamilyName.D);
text.text = 'Hello World!';

const zpl = label.generateZPL();
//^XA
//^FO0,0^AD,,,
//^FB800,1000,0,L,0
//^FDHello World!^FS
//^XZ
```

--------------------------------

### Use static shorthand access for properties

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Demonstrates the shorthand syntax available for various property classes compared to the longhand constructor approach.

```typescript
// Longhand (still supported)
text.fontFamily = new FontFamily(FontFamilyName.D);
text.verticalAlignment = new Alignment(AlignmentValue.Center);
barcode.type = new BarcodeType(BarcodeTypeName.Code128);
label.printDensity = new PrintDensity(PrintDensityName['8dpmm']);

// Shorthand
text.fontFamily = FontFamily.D;
text.verticalAlignment = Alignment.Center;
text.horizontalAlignment = Alignment.Center;
barcode.type = BarcodeType.Code128;
label.printDensity = PrintDensity.dpmm8;
```

--------------------------------

### Generate ZPL II code

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/01-label.md

Creates a complete ZPL II string starting with ^XA and ending with ^XZ.

```typescript
const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;
label.height = 50;
label.padding = new Spacing(10);

const text = new Text();
label.content.push(text);
text.text = 'Hello World!';
text.fontFamily = FontFamily.D;

const zpl = label.generateZPL();
// Output:
// ^XA
// ^FO10,10^AD,,,
// ^FB780,1000,0,L,0
// ^FDHello World!^FS
// ^XZ
```

--------------------------------

### Initialize Spacing

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Defines margin or padding values using different constructor overloads.

```typescript
new Spacing()              // 0, 0, 0, 0
new Spacing(10)            // 10, 10, 10, 10
new Spacing(10, 20)        // 10, 20, 10, 20
new Spacing(5, 10, 15, 20) // 5, 10, 15, 20 (left, top, right, bottom)
```

--------------------------------

### JSZPL Project File Structure

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/INDEX.md

Overview of the source directory organization for components, properties, enums, and helpers.

```text
src/
├── components/           # Visual elements
│   ├── label.ts
│   ├── text.ts
│   ├── barcode.ts
│   ├── box.ts
│   ├── circle.ts
│   ├── line.ts
│   ├── grid.ts
│   ├── graphic.ts
│   ├── serial-number.ts
│   ├── raw.ts
│   └── base-*.ts         # Abstract base classes
├── properties/           # Configuration objects
│   ├── size.ts
│   ├── spacing.ts
│   ├── alignment.ts
│   ├── font-family.ts
│   ├── barcode-type.ts
│   ├── print-density.ts
│   ├── graphic-data.ts
│   └── grid-position.ts
├── enums/               # Constants and enumerations
│   ├── size-type.ts
│   ├── alignment-value.ts
│   ├── font-family-name.ts
│   ├── barcode-type-name.ts
│   ├── print-density-name.ts
│   └── rotation.ts
├── helpers/             # Utilities
│   ├── label-tools.ts
│   ├── image-processor.ts
│   ├── image-resizer.ts
│   ├── barcode-renderer.ts
│   └── zpl-image-tools.ts
├── b64-fonts.ts         # Embedded font data
└── jszpl.ts             # Main export file
```

--------------------------------

### Create a Basic Text Label

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/10-complete-example.md

Initializes a simple label with defined print density and dimensions, adding a single text element.

```typescript
import { Label, Text, FontFamily, PrintDensity, Spacing } from 'jszpl';

const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;  // mm
label.height = 50;  // mm

const text = new Text();
label.content.push(text);
text.text = 'Hello World!';
text.fontFamily = FontFamily.D;

const zpl = label.generateZPL();
console.log(zpl);
```

--------------------------------

### Serial Number ZPL Command Structure

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Defines the standard ZPL template and a concrete example for serial number generation using the ^SN command.

```zpl
^FO<x>,<y>
^A<font>,<height>,<width>
^FB<fieldWidth>,1000,0,<alignment>,0
^SN<format>,<increment>,<leadingZeroes>
^FS
```

```zpl
^FO10,10^AD,,,
^FB780,1000,0,L,0
^SN0001,1,Y^FS
```

--------------------------------

### Component Constructors

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Instantiate various ZPL components for label design.

```APIDOC
## Component Constructors

### Description
Create instances of ZPL components to be added to a label.

### Constructors
- `new Label()` - Root container for the ZPL label.
- `new Text()` - Text element.
- `new Barcode()` - Barcode element.
- `new Box()` - Box drawing element.
- `new Circle()` - Circle drawing element.
- `new Line()` - Line drawing element.
- `new Graphic()` - Graphic element.
- `new SerialNumber()` - Serial number element.
- `new Raw()` - Raw ZPL command element.
- `new Grid()` - Layout grid container.
```

--------------------------------

### Import BaseComponent

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Shows the standard import path for the BaseComponent class.

```typescript
import { BaseComponent } from 'jszpl'; // Not typically imported directly
```

--------------------------------

### Render basic text in a label

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Initializes a label and adds a simple text element with a specified font family.

```typescript
const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;
label.height = 50;

const text = new Text();
label.content.push(text);
text.text = 'Product Name';
text.fontFamily = FontFamily.D;

const zpl = label.generateZPL();
```

--------------------------------

### Configure Printer Settings

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Use the Raw component to send printer configuration commands.

```typescript
const raw = new Raw();
raw.data = '^MM,E,M\n'; // Monochrome mode, label mode, millimeters

label.content.push(raw);
```

--------------------------------

### Configure Mixed Absolute and Relative Sizing

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Demonstrates combining fixed-width/height absolute sizes with proportional relative sizes for flexible grid layouts.

```typescript
const grid = new Grid();
grid.width = 400;
grid.height = 300;

// First column: 100 dots wide, second column: proportional
grid.columns.push(new Size(100, SizeType.Absolute));
grid.columns.push(new Size(1, SizeType.Relative)); // gets remaining space

// First row: 50 dots tall, second row: proportional
grid.rows.push(new Size(50, SizeType.Absolute));
grid.rows.push(new Size(1, SizeType.Relative));

label.content.push(grid);
```

--------------------------------

### Import JSZPL Components and Helpers

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Import necessary classes, properties, enums, and helper functions from the jszpl package.

```typescript
import {
  // Components
  Label, Text, Barcode, Box, Circle, Line, Grid, Graphic, SerialNumber, Raw,
  
  // Properties
  Size, Spacing, Alignment, FontFamily, BarcodeType, PrintDensity, 
  GraphicData, GridPosition,
  
  // Enums
  SizeType, AlignmentValue, FontFamilyName, PrintDensityName, BarcodeTypeName,
  
  // Helpers
  LabelTools, ImageProcessor, ImageResizer, BarcodeRenderer,
  generateHexAscii, encodeHexAscii
} from 'jszpl';
```

--------------------------------

### Size Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Initializes a new Size instance with a numeric value and a specified size type.

```APIDOC
## constructor(value?: number, sizeType?: SizeType)

### Description
Creates a new Size object to represent a dimension.

### Parameters
- **value** (number) - Optional - The numeric value. Defaults to 0.
- **sizeType** (SizeType) - Optional - How to interpret the value (Absolute, Relative, or Fraction). Defaults to SizeType.Absolute.
```

--------------------------------

### Spacing Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Common patterns for initializing Spacing with different parameter counts.

```typescript
// Uniform spacing
label.padding = new Spacing(10); // 10 all sides

// Horizontal and vertical
box.margin = new Spacing(5, 10); // 5 left/right, 10 top/bottom

// Individual sides
text.margin = new Spacing(5, 10, 15, 20); // left, top, right, bottom

// Zero spacing (default)
const empty = new Spacing();
```

--------------------------------

### Alignment Usage Patterns

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Demonstrates setting horizontal and vertical alignment using constructors or static shortcuts.

```typescript
// Using constructor
text.horizontalAlignment = new Alignment(AlignmentValue.Center);

// Using static shortcuts (recommended)
text.horizontalAlignment = Alignment.Center;
text.verticalAlignment = Alignment.End;
```

--------------------------------

### Generate basic ZPL label

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/INDEX.md

Create a label instance, configure dimensions and density, add text, and generate the ZPL string.

```typescript
import { Label, Text, FontFamily, PrintDensity } from 'jszpl';

const label = new Label();
label.printDensity = PrintDensity.dpmm8;
label.width = 100;  // mm
label.height = 50;  // mm

const text = new Text();
label.content.push(text);
text.text = 'Hello World!';
text.fontFamily = FontFamily.D;

const zpl = label.generateZPL();
// Send zpl to printer or export
```

--------------------------------

### Create a Grid with Labels and Values

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Sets up a two-column grid structure to align labels and their corresponding values, useful for form-like data displays.

```typescript
const grid = new Grid();
grid.columns.push(new Size(100, SizeType.Absolute)); // Labels
grid.columns.push(new Size(1, SizeType.Relative)); // Values
grid.rowSpacing = 10;

const label1 = new Text();
label1.text = 'Product:';
label1.fontFamily = FontFamily.D;
grid.content.push(label1);

const value1 = new Text();
value1.text = 'Widget A';
value1.fontFamily = FontFamily.D;
value1.grid.column = 1;
grid.content.push(value1);

const label2 = new Text();
label2.text = 'Quantity:';
label2.fontFamily = FontFamily.D;
label2.grid.row = 1;
grid.content.push(label2);

const value2 = new Text();
value2.text = '1000 pcs';
value2.fontFamily = FontFamily.D;
value2.grid.column = 1;
value2.grid.row = 1;
grid.content.push(value2);

label.content.push(grid);
```

--------------------------------

### Configure Grid Column and Row Sizing

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Define column widths using absolute, relative, or fractional sizing units.

```typescript
// Fixed width column (100 dots)
grid.columns.push(new Size(100, SizeType.Absolute));

// Proportional column (1 unit of remaining space)
grid.columns.push(new Size(1, SizeType.Relative));

// Percentage of parent (50%)
grid.columns.push(new Size(0.5, SizeType.Fraction));

// Multiple relative columns divide space equally
grid.columns.push(new Size(1, SizeType.Relative));
grid.columns.push(new Size(1, SizeType.Relative));
// Each gets 50% of remaining space
```

--------------------------------

### Property Imports

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/MANIFEST.txt

Imports for configuration properties and layout settings.

```typescript
import { Size, Spacing, Alignment, FontFamily, BarcodeType, PrintDensity,
           GraphicData, GridPosition } from 'jszpl';
```

--------------------------------

### Size Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Constructor signature for initializing a new Size instance.

```typescript
constructor(value?: number, sizeType?: SizeType)
```

--------------------------------

### Import LabelTools

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Import the LabelTools registry from the jszpl package.

```typescript
import { LabelTools } from 'jszpl';
```

--------------------------------

### Import ImageResizer

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Import the ImageResizer class from the jszpl package.

```typescript
import { ImageResizer } from 'jszpl';
```

--------------------------------

### Circle Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Initializes a new instance of the Circle component.

```APIDOC
## constructor()

### Description
Creates a new circle element with default properties.
```

--------------------------------

### Import Raw Component

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Import the Raw component from the jszpl package.

```typescript
import { Raw } from 'jszpl';
```

--------------------------------

### Import ImageProcessor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Import the ImageProcessor class from the jszpl package.

```typescript
import { ImageProcessor } from 'jszpl';
```

--------------------------------

### Import BaseVisualComponent

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Standard import statement for the base class.

```typescript
import { BaseVisualComponent } from 'jszpl'; // Not typically imported directly
```

--------------------------------

### getPosition(offsetLeft, offsetTop, availableWidth, availableHeight, widthUnits?, heightUnits?)

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Calculates the component's final position and size in dots based on provided layout parameters and internal component settings.

```APIDOC
## getPosition(offsetLeft, offsetTop, availableWidth, availableHeight, widthUnits?, heightUnits?)

### Description
Calculates the component's position and size based on layout parameters, including margins and parent offsets.

### Parameters
- **offsetLeft** (number) - Required - Parent's left offset.
- **offsetTop** (number) - Required - Parent's top offset.
- **availableWidth** (number) - Required - Available width from parent.
- **availableHeight** (number) - Required - Available height from parent.
- **widthUnits** (number) - Optional - Unit size for relative width.
- **heightUnits** (number) - Optional - Unit size for relative height.

### Returns
- **ComponentPosition** - Object containing calculated left, top, width, and height in dots.
```

--------------------------------

### Property Configuration

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Common property setters for configuring component appearance and layout.

```APIDOC
## Property Configuration

### Description
Configure dimensions, positioning, and specific component attributes.

### Properties
- `label.printDensity` - Set print density (e.g., `PrintDensity.dpmm8`).
- `label.width` / `label.height` - Set label dimensions in mm.
- `component.width` / `component.height` - Set component dimensions in dots.
- `component.left` / `component.top` - Set component position.
- `component.margin` / `container.padding` - Set spacing using `new Spacing(value)`.
- `text.horizontalAlignment` / `text.verticalAlignment` - Set text alignment.
- `barcode.type` / `barcode.data` - Configure barcode type and content.
```

--------------------------------

### Calculate Container Sizing

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Method signature for calculating child layout spacing and unit sizes.

```typescript
calculateSizing(
  availableWidth: number,
  availableHeight: number,
  _widthUnits?: number,
  _heightUnits?: number
): SizingResult
```

--------------------------------

### Enable Legacy Positioning

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Enables v1 compatibility mode where fixed positions are doubled.

```typescript
const label = new Label();
label.useLegacyPositioning = true;  // Doubles fixed positions for v1 compat
```

--------------------------------

### Create Custom Visual Component

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Extends BaseVisualComponent to implement custom ZPL generation and binary rendering.

```typescript
import { BaseVisualComponent, ComponentPosition } from 'jszpl';

class CustomComponent extends BaseVisualComponent {
  generateZPL(
    offsetLeft: number,
    offsetTop: number,
    availableWidth: number,
    availableHeight: number,
    widthUnits?: number,
    heightUnits?: number
  ): string {
    const position = this.getPosition(
      offsetLeft, offsetTop, availableWidth, availableHeight,
      widthUnits, heightUnits
    );
    
    return `^FO${position.left},${position.top}^AD,,,
^FDCustom^FS
`;
  }
  
  generateBinaryImage(
    binaryBase: (boolean | number)[][],
    offsetLeft: number,
    offsetTop: number,
    availableWidth: number,
    availableHeight: number,
    widthUnits?: number,
    heightUnits?: number
  ): void {
    // Implement binary rendering
  }
}
```

--------------------------------

### Download ZPL File in Browser

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/10-complete-example.md

Create a Blob from the generated ZPL string and trigger a browser download using an anchor element.

```typescript
import { Label, Text, FontFamily, PrintDensity } from 'jszpl';

function downloadLabel() {
  const label = new Label();
  label.printDensity = PrintDensity.dpmm8;
  label.width = 100;
  label.height = 50;

  const text = new Text();
  label.content.push(text);
  text.text = 'Download Test';
  text.fontFamily = FontFamily.D;

  const zpl = label.generateZPL();

  // Create blob and download
  const blob = new Blob([zpl], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'label.zpl';
  link.click();
  URL.revokeObjectURL(url);
}
```

--------------------------------

### Import ZPL Image Tools

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Required imports for accessing image conversion and encoding utilities.

```typescript
import { generateHexAscii, encodeHexAscii } from 'jszpl';
```

--------------------------------

### Enable Legacy Positioning

Source: https://github.com/danieleeuwner/jszpl/blob/master/README.md

Configures the Label object to use v1 positioning logic, which is useful for maintaining compatibility during migration to v2.

```ts
const label = new Label();
label.useLegacyPositioning = true;
```

--------------------------------

### Import BarcodeRenderer

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Import the BarcodeRenderer class from the jszpl package.

```typescript
import { BarcodeRenderer } from 'jszpl';
```

--------------------------------

### Spacing Constructor

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Constructor signature for initializing Spacing objects.

```typescript
constructor(left?: number, top?: number, right?: number, bottom?: number)
```

--------------------------------

### Access LabelTools Utilities

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

Accessing utilities and configuring the optional logger.

```typescript
// Access utilities
const imageProcessor = LabelTools.ImageProcessor;
const imageResizer = LabelTools.ImageResizer;

// Enable logging (optional)
LabelTools.Logger = (msg) => console.log('[JSZPL]', msg);
```

--------------------------------

### LabelTools

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/08-helpers-and-tools.md

A central registry of helper utilities for image and barcode processing.

```APIDOC
## LabelTools

### Description
Central registry of helper utilities for image and barcode processing.

### Properties
- **ImageProcessor** (ImageProcessor) - Singleton for platform-specific image format handling.
- **ImageResizer** (ImageResizer) - Singleton for scaling images to target dimensions.
- **BarcodeRenderer** (BarcodeRenderer) - Singleton for rendering barcode preview images.
- **Logger** ((msg: string) => void) - Optional callback for logging.
```

--------------------------------

### calculateSizing()

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Calculates spacing and unit sizes for child layout.

```APIDOC
## calculateSizing(availableWidth: number, availableHeight: number, widthUnits?: number, heightUnits?: number)

### Description
Calculates spacing and unit sizes for child layout.

### Returns
- **SizingResult** - Object with spacingTop, spacingLeft, width, height, widthUnits, heightUnits.
```

--------------------------------

### Generate QR Code

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/03-barcode.md

Creates a QR code with a specified maximum length, automatically applying the QA prefix.

```typescript
const barcode = new Barcode();
barcode.type = BarcodeType.QRCode;
barcode.data = 'https://example.com';
barcode.maxLength = 20;
barcode.width = 100;
barcode.height = 100;
// Automatically uses QA prefix for QR format

label.content.push(barcode);
```

--------------------------------

### Label Properties

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/01-label.md

Configuration properties for the Label instance.

```APIDOC
## Label Properties

### Properties
- **printDensity** (PrintDensity) - Dot density in dots per millimeter (6, 8, 12, or 24).
- **width** (number) - Width of the label in millimeters.
- **height** (number) - Height of the label in millimeters.
- **padding** (Spacing) - Internal padding applied to child elements.
- **content** (BaseComponent[]) - Array of child components to render.
- **useLegacyPositioning** (boolean) - Enables v1 positioning behavior.
- **characterSet** (number) - Character encoding identifier (e.g., 28 for UTF-8).
```

--------------------------------

### Import SizeType

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/07-enums.md

Import the SizeType enumeration from the jszpl package.

```typescript
import { SizeType } from 'jszpl';
```

--------------------------------

### PrintDensity Static Factory Methods

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Static shortcuts for common printer resolutions.

```typescript
static get dpmm6(): PrintDensity   // 6 dpi
static get dpmm8(): PrintDensity   // 8 dpi (common)
static get dpmm12(): PrintDensity  // 12 dpi (high density)
static get dpmm24(): PrintDensity  // 24 dpi (ultra high)
```

--------------------------------

### Main Component Imports

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/MANIFEST.txt

Standard imports for core jszpl components.

```typescript
import { Label, Text, Barcode, Box, Circle, Line, Grid, Graphic, 
           SerialNumber, Raw } from 'jszpl';
```

--------------------------------

### Helper Imports

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/MANIFEST.txt

Imports for utility functions and label tools.

```typescript
import { LabelTools, generateHexAscii, encodeHexAscii } from 'jszpl';
```

--------------------------------

### Import Alignment

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Import the Alignment class from the jszpl package.

```typescript
import { Alignment } from 'jszpl';
```

--------------------------------

### Import Circle Component

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Import the Circle component from the jszpl library.

```typescript
import { Circle } from 'jszpl';
```

--------------------------------

### generateBinaryImage()

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Renders the text into a binary image array for preview purposes.

```APIDOC
## generateBinaryImage()

### Description
Renders the text into a binary image array for preview purposes.

### Parameters
- **binaryBase** ((boolean | number)[][]) - Required - The binary image buffer.
- **offsetLeft** (number) - Required - Parent's left offset.
- **offsetTop** (number) - Required - Parent's top offset.
- **availableWidth** (number) - Required - Available width.
- **availableHeight** (number) - Required - Available height.
- **widthUnits** (number) - Optional - Unit size for relative width.
- **heightUnits** (number) - Optional - Unit size for relative height.
- **useLegacyPositioning** (boolean) - Optional - If true, applies v1 positioning behavior.
```

--------------------------------

### Import GridPosition

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Import the GridPosition class from the jszpl package.

```typescript
import { GridPosition } from 'jszpl';
```

--------------------------------

### Draw a Box in ZPL

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/04-box-circle-line.md

Uses the ^GB command to create a box with optional inversion and rounding.

```zpl
^FO<x>,<y>
[^FR - optional invert]
^GB<width>,<height>,<thickness>,,<roundingIndex>
^FS
```

--------------------------------

### ZPL Command Reference

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/QUICK-REFERENCE.md

Mapping of common ZPL II commands used by the JSZPL library to their respective functions.

```text
^XA              = Start label
^XZ              = End label
^FO x,y          = Field origin (position)
^A font,h,w      = Font selection
^FB w,h,l,a,o    = Field block
^FD text         = Field data (text)
^FS              = Field separator
^GB w,h,t        = Box
^GC d,t          = Circle
^GE w,h,t        = Ellipse
^GD w,h,t,o      = Line
^GFA b,b,c,data  = Graphic field (image)
^B* ...          = Barcode commands (19 types)
^SN f,i,z        = Serial number
^CI charset      = Character set
```

--------------------------------

### Define Base Component Calculation Methods

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/09-base-components.md

Outlines the required methods for BaseVisualComponent and BaseContainerComponent to handle layout calculations.

```typescript
// All BaseVisualComponent instances have:
getPosition(offsets, available): ComponentPosition
getSize(prop, unitSize): number

// All BaseContainerComponent instances have:
calculateSizing(available): SizingResult
calculateUnits(): { absolute, relative }
```

--------------------------------

### Create a 2x2 Grid with Relative Sizing

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/05-grid-graphic-serial-raw.md

Defines a grid with two equal columns and two equal rows using relative sizing, with content positioned in each cell.

```typescript
const grid = new Grid();
label.content.push(grid);

// Create 2 equal columns
grid.columns.push(new Size(1, SizeType.Relative));
grid.columns.push(new Size(1, SizeType.Relative));

// Create 2 equal rows
grid.rows.push(new Size(1, SizeType.Relative));
grid.rows.push(new Size(1, SizeType.Relative));

grid.border = 2;
grid.rowSpacing = 5;
grid.columnSpacing = 5;

// Add content
const text00 = new Text();
text00.text = '(0, 0)';
text00.fontFamily = FontFamily.D;
text00.horizontalAlignment = Alignment.Center;
text00.verticalAlignment = Alignment.Center;
grid.content.push(text00);

const text10 = new Text();
text10.text = '(1, 0)';
text10.fontFamily = FontFamily.D;
text10.grid.column = 1; // Place in column 1
grid.content.push(text10);

const text01 = new Text();
text01.text = '(0, 1)';
text01.fontFamily = FontFamily.D;
text01.grid.row = 1; // Place in row 1
grid.content.push(text01);

const text11 = new Text();
text11.text = '(1, 1)';
text11.fontFamily = FontFamily.D;
text11.grid.column = 1;
text11.grid.row = 1;
grid.content.push(text11);
```

--------------------------------

### generateZPL()

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/02-text.md

Generates ZPL commands for rendering the text element based on provided layout constraints.

```APIDOC
## generateZPL()

### Description
Generates ZPL commands for rendering the text element. Each line of text generates separate ^FO, ^A, ^FB, and ^FD commands.

### Parameters
- **offsetLeft** (number) - Required - Parent's left offset in dots.
- **offsetTop** (number) - Required - Parent's top offset in dots.
- **availableWidth** (number) - Required - Available width from parent in dots.
- **availableHeight** (number) - Required - Available height from parent in dots.
- **widthUnits** (number) - Optional - Unit size for relative width sizing.
- **heightUnits** (number) - Optional - Unit size for relative height sizing.
- **useLegacyPositioning** (boolean) - Optional - If true, applies v1 positioning behavior.

### Returns
- **string** - ZPL commands for text rendering.
```

--------------------------------

### Import GraphicData

Source: https://github.com/danieleeuwner/jszpl/blob/master/_autodocs/06-properties.md

Import the GraphicData class from the jszpl package.

```typescript
import { GraphicData } from 'jszpl';
```