Webtoon PSD

https://github.com/webtoon/psd
Admin
Webtoon PSD is a lightweight Adobe Photoshop .psd/.psb file parser in TypeScript with...
Tokens:50,675
Snippets:606
Trust Score:6.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Installs all project dependencies. This should be run after cloning the repository.

```bash
npm install
```

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

### Access Guides and Slices

Source: https://github.com/webtoon/psd/blob/main/_autodocs/getting-started.md

Iterates through the guides and slices of a PSD file, logging their properties. Guide positions are converted from 32nds of pixels to pixels, and slice dimensions are calculated.

```typescript
// Guides
for (const guide of psdFile.guides) {
  const direction = guide.direction === 0 ? "vertical" : "horizontal";
  const positionPx = guide.position / 32; // Position is in 32nds of pixels
  console.log(`${direction} guide at ${positionPx}px`);
}

// Slices
for (const slice of psdFile.slices) {
  const width = slice.right - slice.left;
  const height = slice.bottom - slice.top;
  console.log(`Slice at (${slice.left}, ${slice.top}): ${width}x${height}`);
}
```

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

### Tree Printing Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Demonstrates how to print the node tree structure.

```javascript
// Tree printing
```

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

### Breadth-First Traversal Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Example of performing a breadth-first traversal of the node tree.

```javascript
// Breadth-first traversal
```

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

### Guide Interface

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Represents a single guide line with its position and direction.

```typescript
interface Guide {
  position: number;
  direction: GuideDirection;
}
```

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

### Type Discrimination Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Demonstrates how to discriminate between different node types.

```javascript
// Type discrimination
```

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

### Install @webtoon/psd

Source: https://github.com/webtoon/psd/blob/main/README.md

Use npm to install the @webtoon/psd package. This package is a zero-dependency parser for Photoshop files.

```bash
$ npm install @webtoon/psd
```

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

### Depth-First Traversal Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Example of performing a depth-first traversal of the node tree.

```javascript
// Depth-first traversal
```

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

### Assertions Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Shows how to use type assertions for ensuring node types.

```javascript
// Assertions
```

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

### Type Guards Example

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Illustrates the usage of type guards for safe type checking.

```javascript
// Type guards
```

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

### Handling InvalidSignature Error

Source: https://github.com/webtoon/psd/blob/main/_autodocs/errors.md

This example demonstrates catching an InvalidSignature error. This error occurs if the file does not start with the expected PSD/PSB signature bytes. It's crucial for verifying the file type.

```typescript
const notAPsdFile = Buffer.from("NOT A PSD FILE");
try {
  Psd.parse(notAPsdFile.buffer);
} catch (error) {
  if (error instanceof InvalidSignature) {
    console.error("File is not a valid PSD or PSB");
  }
}
```

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

### Example: Validate Supported Compression Usage

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Demonstrates how to use validateSupportedCompression within a try-catch block to handle potential errors when dealing with unsupported compression types.

```typescript
import {validateSupportedCompression} from "@webtoon/psd";

try {
  validateSupportedCompression(red.compression);
  // Proceed with decoding
} catch (error) {
  console.error("ZIP compression not supported");
}
```

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

### Access Layer Opacity and Blending

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get the opacity, composed opacity, and blend mode of a layer.

```javascript
const { opacity, composedOpacity, blendMode } = layer;
```

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

### Access Document Metadata

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Retrieve metadata such as guides, slices, and ICC profiles from the `Psd` object.

```javascript
const { guides, slices, icc_profile } = psd;
```

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

### Layer Iteration and Composite

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Shows how to iterate through all layers in a PSD file and get the composite pixel data for a specific layer.

```APIDOC
## Layer Iteration and Composite

### Description
Iterate through the `layers` property of a Psd object to access individual layers. For 'Layer' type nodes, you can retrieve their composite pixel data.

### Method
- `psdFile.layers`: Accesses an array of all layers and groups within the PSD.
- `layer.composite()`: Returns the composite pixel data for a layer.

### Parameters
- **layer.name** (string) - The name of the layer.
- **layer.width** (number) - The width of the layer.
- **layer.height** (number) - The height of the layer.
- **layer.type** (string) - The type of the layer ('Layer', 'Group', etc.).

### Request Example
```typescript
// Assuming psdFile is already parsed
for (const layer of psdFile.layers) {
  console.log(`Layer: ${layer.name}`);
  if (layer.type === "Layer") {
    const pixelData = await layer.composite();
    // Process pixelData
  }
}
```

### Response
#### Success Response (pixelData)
- **pixelData** (Uint8ClampedArray | null) - The composite pixel data for the layer, or null if not applicable.
```

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

### Access Color Information

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get color mode, depth, and channel count from the `Psd` object.

```javascript
const { colorMode, depth, channelCount } = psd;
```

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

### Slice Constructor

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-slice.md

Creates a new Slice object with the given bounds and origin. The origin specifies whether the slice is relative to layers or a guide.

```APIDOC
## Constructor Slice

### Description
Creates a new Slice object with the given bounds and origin.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **origin** (`SliceOrigin`) - Required - Origin type (see [SliceOrigin enum](./types.md#sliceorigin))
- **left** (number) - Required - Left edge position in pixels
- **top** (number) - Required - Top edge position in pixels
- **right** (number) - Required - Right edge position in pixels
- **bottom** (number) - Required - Bottom edge position in pixels

### Request Example
```typescript
import { Slice, SliceOrigin } from '@webtoon/psd';

const mySlice = new Slice(SliceOrigin.Layers, 10, 20, 100, 120);
```

### Response
#### Success Response (200)
None (constructor)

#### Response Example
None
```

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

### Access Layer Identification

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get the name, type, and parent of a layer.

```javascript
const { name, type, parent } = layer;
```

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

### Slice Class API Reference

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for the Slice class, detailing its properties and usage examples for accessing and manipulating slices within a PSD document.

```APIDOC
## Slice Class

### Description
Represents a slice within a PSD document, used for defining export regions.

### Properties
- **id** (string) - Unique identifier for the slice.
- **bounds** (object) - Bounding box of the slice.
- **name** (string) - Name of the slice.
- **group** (string) - Group the slice belongs to.
- **url** (string) - URL associated with the slice.
- **message** (string) - Message associated with the slice.
```

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

### Access Group Opacity and Blending

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get the opacity, composed opacity, and blend mode of a layer group.

```javascript
const { opacity, composedOpacity, blendMode } = group;
```

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

### Export PSD Layer Data for File Saving

Source: https://github.com/webtoon/psd/blob/main/_autodocs/INDEX.md

This example demonstrates how to obtain the composite pixel data of a PSD layer, which can then be used with image processing libraries to save as a PNG or other formats. It's intended for Node.js environments.

```typescript
// Node.js: Save as PNG
const data = await layer.composite();
const width = layer.width;
const height = layer.height;
// Use sharp, Canvas, or similar to encode as PNG
```

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

### Type-Safe Traversal of PSD Nodes

Source: https://github.com/webtoon/psd/blob/main/_autodocs/module-structure.md

This example demonstrates how to safely traverse the node structure of a PSD file. It utilizes `isNodeParent` to check for parent nodes and iterates through their children.

```typescript
import Psd, {Node, isNodeParent} from "@webtoon/psd";

function traverse(node: Node) {
  if (isNodeParent(node)) {
    for (const child of node.children) {
      traverse(child);
    }
  }
}
```

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

### Iterate and Check for Non-Empty Groups

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-group.md

Example demonstrating how to iterate through a group's children and check if any child groups are non-empty using the hasChildren() method.

```typescript
for (const child of group.children) {
  if (child.type === "Group") {
    if (child.hasChildren()) {
      console.log(`${child.name} is a non-empty group`);
    }
  }
}
```

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

### Get File Version Specification

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Returns the appropriate parsing specifications based on the PSD or PSB file version. Use this to ensure correct parsing for different file formats. Throws an error for invalid versions.

```typescript
function getFileVersionSpec(fileVersion: PsdVersion): FileVersionSpec
```

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

### matchGuideDirection()

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Converts a numeric value indicating guide direction into its corresponding GuideDirection enum value. It supports 0 for Vertical and 1 for Horizontal.

```APIDOC
## matchGuideDirection()

### Description
Converts a number to a GuideDirection enum value.

### Parameters
#### Path Parameters
- **direction** (number) - Required - Direction value (0 or 1).

### Returns
- **GuideDirection** — The GuideDirection enum value (Vertical for 0, Horizontal for 1).

### Throws
- **InvalidGuideDirection** — If the direction number is not 0 or 1.
```

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

### Get Real User Mask for Layer

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Asynchronously retrieve the actual user mask for a layer.

```javascript
await layer.realUserMask();
```

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

### Iterate and Composite Layers in TypeScript

Source: https://github.com/webtoon/psd/blob/main/_autodocs/README.md

Loop through the layers of a parsed PSD file and asynchronously composite each layer to get its pixel data.

```typescript
for (const layer of psdFile.layers) {
  const pixels = await layer.composite();
}
```

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

### Get Ancestors of a Node

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-node.md

Retrieve an array of all ancestor nodes for a given node, starting from its immediate parent up to the root Psd node. The result is reversed to show the path from root to the node.

```typescript
function getAncestors(node: Node): Node[] {
  const ancestors = [];
  let current = node;
  
  while (current.parent) {
    ancestors.push(current.parent);
    current = current.parent;
  }
  
  ancestors.push(current); // Add root Psd
  return ancestors.reverse();
}

const layer = psdFile.layers[0];
const path = getAncestors(layer);
console.log(`Path: ${path.map(n => n.name).join(" > ")}`);
```

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

### Handle Invalid Guide Direction

Source: https://github.com/webtoon/psd/blob/main/_autodocs/errors.md

Catches errors when a guide direction value is invalid (not 0 or 1). Use this when validating guide data.

```typescript
try {
  matchGuideDirection(2);
} catch (error) {
  if (error instanceof InvalidGuideDirection) {
    console.error("Guide direction must be 0 or 1");
  }
}
```

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

### Run Benchmark Demo with HMR

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Launches the demo benchmark page locally with Hot Module Replacement (HMR) enabled. This command also watches all workspace dependencies.

```bash
npm run start:benchmark
```

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

### Run Browser Demo with HMR

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Launches the demo web page locally with Hot Module Replacement (HMR) enabled. This command also watches all workspace dependencies.

```bash
npm run start:browser
```

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

### Run Unit Tests

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Executes all unit tests for the project. This command should be run to ensure code correctness.

```bash
npm test
```

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

### Access Layer Masks

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get the mask data associated with a layer.

```javascript
const { maskData } = layer;
```

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

### Run Node.js Demo in Watch Mode

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Launches the demo Node.js script in watch mode, allowing for immediate examination of changes. This command also watches all workspace dependencies.

```bash
npm run start:node
```

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

### Access Group Identification

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Get the name, type, and parent of a layer group.

```javascript
const { name, type, parent } = group;
```

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

### Get User Mask for Layer

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Asynchronously retrieve the user mask for a layer.

```javascript
await layer.userMask();
```

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

### Lint and Check Code Style

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Manually runs ESLint and Prettier to lint the code and check for style consistency. This is a prerequisite before committing changes.

```bash
npm run lint
```

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

### Functions

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for over 10 functions, including image generation, opacity manipulation, type conversion, descriptor access, and parsing methods.

```APIDOC
## Functions

### Image Generation Functions
- **generateImage**(options) - Generates an image from PSD data.

### Opacity Manipulation
- **setOpacity**(layer, opacity) - Sets the opacity of a layer.

### Type Conversion Utilities
- **convertToHex**(color) - Converts a color object to its hexadecimal representation.

### Descriptor Access Helpers
- **getDescriptor**(layer, key) - Retrieves a descriptor from a layer by key.

### Parsing Methods
- **parsePsd**(buffer) - Parses a PSD file from a buffer.
```

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

### SliceOrigin Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Defines the origin of a slice, indicating whether it was created from layers or guides.

```typescript
enum SliceOrigin {
  Layers = 0,
  Guide = 1,
}
```

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

### Import Main Psd Class

Source: https://github.com/webtoon/psd/blob/main/_autodocs/module-structure.md

Import the default export, the main Psd document class, from the @webtoon/psd library.

```typescript
import Psd from "@webtoon/psd";
```

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

### Utility Methods

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for utility functions provided by the library for image generation, opacity manipulation, parsing, and descriptor handling.

```APIDOC
## Utility Methods

### Image Generation
- **generateRgba(data: Buffer, width: number, height: number): RGBA** - Decodes channels to RGBA format.
- **decodeRgb(data: Buffer, width: number, height: number): RGB** - Decodes RGB channels.
- **decodeGrayscale(data: Buffer, width: number, height: number): Grayscale** - Decodes grayscale channels.

### Opacity Manipulation
- **applyOpacity(imageData: Buffer, opacity: number): Buffer** - Applies opacity to image data.

### Parsing
- **parse(buffer: Buffer): Psd** - Parses a PSD file from a Buffer.
- **parseEngineData(buffer: Buffer): any** - Parses engine data from a Buffer.

### Descriptor Handling
- **readDescriptor(buffer: Buffer): Descriptor** - Reads a descriptor from a Buffer.
- **getDescriptorValueAsType(descriptor: Descriptor, key: string, type: string): any** - Gets a descriptor value as a specific type.
```

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

### Get Flattened Image

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Retrieves the composite image data for the entire PSD document.

```APIDOC
## psdFile.composite()

### Description
Generates and returns the composite pixel data for the entire PSD document, flattening all layers.

### Method
`psdFile.composite(): Promise<Uint8ClampedArray | null>`

### Response
#### Success Response (compositeImage)
- **compositeImage** (Uint8ClampedArray | null) - The composite pixel data for the entire PSD, or null if an error occurs.
```

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

### SliceOrigin Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Represents the origin of a slice definition, indicating whether it was created from layers or guides.

```APIDOC
## SliceOrigin

### Description
Represents the origin of a slice definition.

### Enum Values
- **Layers** (0): Slice created from layers
- **Guide** (1): Slice created from guides
```

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

### Build Packages

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Builds all packages in the project. This step is necessary to generate TypeScript type definitions for dependent packages.

```bash
npm run build
```

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

### Types and Interfaces

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for over 20 types and interfaces, including enumerations, major interfaces with field descriptions, type unions, and type guards.

```APIDOC
## Types and Interfaces

### Enumerations
- **EnumName** - Description
  - **Value1** (value) - Description
  - **Value2** (value) - Description
  - ... (All enumerations with value tables)

### Major Interfaces
- **InterfaceName**
  - **field1** (type) - Description
  - **field2** (type) - Description
  - ... (All major interfaces with field descriptions)

### Type Unions and Discriminated Unions
- **UnionName** - Description of the union and its members.

### Type Guards and Assertion Functions
- **isTypeName** (input) - Returns boolean indicating if input is of TypeName.
- **assertTypeName** (input) - Asserts that input is of TypeName.
```

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

### Layer Class

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Complete documentation for the Layer class, including its 14 properties and 3 methods.

```APIDOC
## Layer Class

### Description
Complete documentation for the Layer class, which includes 14 properties and 3 methods for managing layer data within a PSD file.

### Properties
- **property1** (type) - Description
- ... (13 more properties)

### Methods
- **method1** (signature) - Description
- **method2** (signature) - Description
- **method3** (signature) - Description
```

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

### Slice Class

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Complete documentation for the Slice class, including its properties and methods.

```APIDOC
## Slice Class

### Description
Complete documentation for the Slice class, detailing its properties and methods for handling slices within a PSD file.

### Properties
[Details of Slice class properties would be listed here.]

### Methods
[Details of Slice class methods would be listed here.]
```

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

### Psd Parsing and Basic Access

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Demonstrates how to parse a PSD file from an ArrayBuffer and access basic document properties like dimensions and color mode.

```APIDOC
## Psd.parse()

### Description
Parses an ArrayBuffer containing PSD data into a Psd object.

### Method
`static parse(buffer: ArrayBuffer): Psd`

### Parameters
- **buffer** (ArrayBuffer) - Required - The ArrayBuffer containing the PSD file data.

### Response
#### Success Response (Psd)
- **width** (number) - The width of the PSD document.
- **height** (number) - The height of the PSD document.
- **colorMode** (string) - The color mode of the PSD document.
- **layers** (Array<Layer | Group>) - An array of top-level layers and groups.

### Request Example
```typescript
import Psd from "@webtoon/psd";

const buffer = /* ArrayBuffer of PSD data */;
const psdFile = Psd.parse(buffer);

console.log(`Size: ${psdFile.width}x${psdFile.height}`);
console.log(`Color mode: ${psdFile.colorMode}`);
```
```

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

### GuideDirection Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Represents the direction of a guide line. Used by Guide.direction. Includes a function matchGuideDirection to convert numbers to GuideDirection.

```typescript
enum GuideDirection {
  Vertical = 0,
  Horizontal = 1,
}
```

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

### Get Descendants of a Node

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-node.md

Generate all descendant nodes of a given node, excluding the node itself. This function recursively yields children and their descendants.

```typescript
function* descendants(node: Node): Generator<Node> {
  if (node.type !== "Layer") {
    for (const child of node.children) {
      yield child;
      yield* descendants(child);
    }
  }
}

const group = psdFile.children.find(c => c.type === "Group");
if (group) {
  const allNested = [...descendants(group)];
}
```

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

### Psd Class

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Complete documentation for the Psd class, including its methods and properties.

```APIDOC
## Psd Class

### Description
Complete documentation for the Psd class, detailing its methods and properties for interacting with PSD file data.

### Methods and Properties
[Details of Psd class methods and properties would be listed here, based on the source documentation.]
```

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

### Group Class

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Complete documentation for the Group class, including its 7 properties and 2 methods.

```APIDOC
## Group Class

### Description
Complete documentation for the Group class, which includes 7 properties and 2 methods for managing layer groups within a PSD file.

### Properties
- **property1** (type) - Description
- ... (6 more properties)

### Methods
- **method1** (signature) - Description
- **method2** (signature) - Description
```

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

### AliKey Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Keys for Additional Layer Info (ALI) blocks that can be parsed. These keys are used to identify specific layer properties and settings within PSD files.

```APIDOC
## AliKey

### Description
Keys for Additional Layer Info (ALI) blocks that can be parsed.

### Enum Values
- **SectionDividerSetting** (`lsct`)
- **TypeToolObjectSetting** (`TySh`)
- **UnicodeLayerName** (`luni`)
- **VectorStrokeData** (`vstk`)
- **ObjectBasedEffects** (`lfx2`)
- **MultipleObjectBasedEffects** (`lmfx`)
- **ObjectBasedUndocumented** (`lfxs`)
- **GradientFillSetting** (`GdFl`)
- **SolidColorSheetSetting** (`SoCo`)
- **PatternFillSetting** (`PtFl`)
- **VectorStrokeContentData** (`vscg`)
- **VectorOriginationData** (`vogk`)
- **BlendOptionsCapacity** (`iOpa`)
- **VectorMaskSetting1** (`vmsk`)
- **VectorMaskSetting2** (`vsms`)
- **HueSaturation** (`hue2`)
- **NestedSectionDividerSetting** (`lsdk`)
- **LayerId** (`lyid`)
- **ArtboardData** (`artb`)
- **SmartObjectPlacedLayerData** (`SoLE`)
- **PlacedLayerData** (`SoLd`)
- **LinkedLayer** (`lnkD`)
- **LinkedLayer2** (`lnk2`)
- **LinkedLayer3** (`lnk3`)
- **LayerNameSourceSetting** (`lnsr`)
- **BrightnessAndContrast** (`brit`)
- **Levels** (`levl`)
- **Curves** (`curv`)
- **Exposure** (`expA`)
- **Vibrance** (`vibA`)
- **HueSaturationOld** (`hue `)
- **ColorBalance** (`blnc`)
- **BlackAndWhite** (`blwh`)
- **PhotoFilter** (`phfl`)
- **ChannelMixer** (`mixr`)
- **ColorLookup** (`clrL`)
- **Invert** (`nvrt`)
- **Posterize** (`post`)
- **Threshold** (`thrs`)
- **GradientMapSettings** (`grdm`)
- **SelectiveColor** (`selc`)
- **Pattern1** (`Patt`)
- **Pattern2** (`Pat2`)
- **Pattern3** (`Pat3`)
```

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

### Node Type System

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for the Node type system, including type definitions and functions for safe traversal of the layer tree.

```APIDOC
## Node Type System

### Description
Defines the types for nodes in the PSD layer tree and provides utility functions for type-safe traversal.

### Type Definitions
- **Node**
- **NodeParent**
- **NodeChild**

### Type Guard/Assertion Functions
- `isNode(value: any): value is Node`
- `isNodeParent(value: any): value is NodeParent`
- `isNodeChild(value: any): value is NodeChild`
- `assertNode(value: any): asserts value is Node`

### Traversal Patterns
- Type discrimination
- Type guards
- Assertions
- Depth-first traversal
- Breadth-first traversal
- Tree printing
```

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

### Parse and Use PSD File

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Demonstrates parsing a PSD file from an ArrayBuffer, accessing document properties, iterating through layers, and retrieving pixel data. Requires the `@webtoon/psd` library.

```typescript
import Psd from "@webtoon/psd";

// Parse a PSD file
const buffer = /* ArrayBuffer of PSD data */;
const psdFile = Psd.parse(buffer);

// Access document properties
console.log(`Size: ${psdFile.width}x${psdFile.height}`);
console.log(`Color mode: ${psdFile.colorMode}`);

// Iterate through layers
for (const layer of psdFile.layers) {
  console.log(`Layer: ${layer.name}`);
  if (layer.type === "Layer") {
    const pixelData = await layer.composite();
  }
}

// Get flattened image
const compositeImage = await psdFile.composite();
```

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

### Handle UnsupportedChannelKindOffset Error in TypeScript

Source: https://github.com/webtoon/psd/blob/main/_autodocs/errors.md

Catch and log an 'UnsupportedChannelKindOffset' error when attempting to get the offset for a channel kind. This occurs for unsupported channel types.

```typescript
try {
  getChannelKindOffset(ChannelKind.UserSuppliedLayerMask);
} catch (error) {
  if (error instanceof UnsupportedChannelKindOffset) {
    console.error("This channel kind cannot be used here");
  }
}
```

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

### Tree Traversal

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Explains how to traverse the hierarchical layer structure of a PSD file using the `children` property.

```APIDOC
## Tree Traversal

### Description
The Psd object and its children form a tree structure. Use the `children` property to traverse this hierarchy.

### Method
`node.children`: Accesses an array of child nodes (layers or groups) for a given node.

### Parameters
- **node.type** (string) - The type of the node ('Psd', 'Group', 'Layer').

### Request Example
```typescript
function traverse(node) {
  if (node.type === "Psd" || node.type === "Group") {
    for (const child of node.children) {
      traverse(child);
    }
  }
}

traverse(psdFile);
```
```

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

### Parsing Methods

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Methods for parsing buffer data.

```APIDOC
## parse(buffer)

### Description
Parses data from a buffer.

### Parameters
- **buffer** (Buffer) - Required - The buffer to parse.

## parseEngineData(data)

### Description
Parses engine-specific data.

### Parameters
- **data** (any) - Required - The data to parse.
```

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

### Apply Opacity and Get Layer Mask

Source: https://github.com/webtoon/psd/blob/main/_autodocs/INDEX.md

Apply a specified opacity level to an extracted layer image. Retrieve the user-defined layer mask associated with a layer.

```typescript
// Apply opacity
const withOpacity = applyOpacity(layerImage, 128); // 50%

// Get layer mask
const mask = await layer.userMask();
```

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

### Depth-First Traversal Generator

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-node.md

Implement a depth-first traversal using a generator function. This yields nodes as they are visited, starting from the root and going as deep as possible before backtracking.

```typescript
function* depthFirst(node: Node): Generator<Node> {
  yield node;
  
  if (node.type !== "Layer") {
    for (const child of node.children) {
      yield* depthFirst(child);
    }
  }
}

const psdFile = Psd.parse(buffer);
for (const node of depthFirst(psdFile)) {
  console.log(node.name);
}
```

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

### Composite Layer Pixel Data

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-layer.md

Decodes layer pixel data with optional effects and composed opacity. Use this to get the final rendered pixel data of a layer.

```typescript
const layer = psdFile.layers[0];

// Get layer with all effects applied
const pixelData = await layer.composite();

// Get layer without effects
const pixelDataNoEffects = await layer.composite(false);

// Get layer with own opacity but not parent opacity
const pixelDataLocalOpacity = await layer.composite(true, false);
```

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

### Basic PSD Parsing

Source: https://github.com/webtoon/psd/blob/main/_autodocs/module-structure.md

Use this snippet to parse a PSD file from a buffer. Ensure the buffer contains valid PSD data.

```typescript
import Psd from "@webtoon/psd";

const psdFile = Psd.parse(buffer);
```

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

### Iterate Through All Layers

Source: https://github.com/webtoon/psd/blob/main/README.md

Access the `layers` property of a parsed `Psd` object to get a flat array of all layers within the image, including nested ones. This is useful for processing each layer individually.

```typescript
for (const layer of psdFile.layers) {
  doSomething(layer);
}
```

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

### Get Channel Kind Offset

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Converts a ChannelKind enum value to its corresponding array index offset (0-3). Useful for accessing channel data. Throws an error for unsupported channel kinds.

```typescript
import {ChannelKind, getChannelKindOffset} from "@webtoon/psd";

const redOffset = getChannelKindOffset(ChannelKind.Red); // 0
const greenOffset = getChannelKindOffset(ChannelKind.Green); // 1
const alphaOffset = getChannelKindOffset(ChannelKind.TransparencyMask); // 3
```

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

### Parse PSD File with TypeScript

Source: https://github.com/webtoon/psd/blob/main/_autodocs/README.md

Import the Psd class and use the static parse method to load a PSD file from a buffer.

```typescript
import Psd from "@webtoon/psd";
const psdFile = Psd.parse(buffer);
```

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

### Get Document Composite Image

Source: https://github.com/webtoon/psd/blob/main/_autodocs/getting-started.md

Generates an HTML canvas containing the composite image of the entire PSD document. Requires the document to be saved with 'Maximize Compatibility'. Logs a warning if the composite data is empty.

```typescript
async function getDocumentImage(psdFile) {
  // Note: Requires document to be saved with "Maximize Compatibility"
  const pixelData = await psdFile.composite();
  
  if (!pixelData || pixelData.length === 0) {
    console.warn("Document composite is empty");
    return null;
  }
  
  const canvas = document.createElement("canvas");
  canvas.width = psdFile.width;
  canvas.height = psdFile.height;
  
  const ctx = canvas.getContext("2d");
  const imageData = new ImageData(pixelData, psdFile.width, psdFile.height);
  ctx.putImageData(imageData, 0, 0);
  
  return canvas;
}
```

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

### Psd Class API Reference

Source: https://github.com/webtoon/psd/blob/main/_autodocs/COMPLETION_SUMMARY.md

Documentation for the Psd class, including its static parse method, properties, and methods for accessing document information and composite rendering.

```APIDOC
## Psd Class

### Description
Provides access to the parsed PSD file's properties and methods for rendering.

### Methods
#### static parse(buffer: Buffer): Psd
Parses a PSD file from a Buffer.

### Properties
- **dimensions** (object) - Document dimensions.
- **colorInfo** (object) - Document color information.
- **content** (object) - Document content details.
- **metadata** (object) - Document metadata.

### Methods
- **composite(): Buffer** - Renders the document composite.
- **decodePattern(): any** - Decodes patterns within the document.
```

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

### Type Conversion Functions

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Utility functions for matching and converting various types.

```APIDOC
## matchBlendMode(mode)

### Description
Matches a blend mode value.

### Parameters
- **mode** (any) - Required - The blend mode to match.

## matchClipping(mode)

### Description
Matches a clipping mode value.

### Parameters
- **mode** (any) - Required - The clipping mode to match.

## matchChannelCompression(compression)

### Description
Matches a channel compression type.

### Parameters
- **compression** (any) - Required - The compression type to match.

## matchGuideDirection(direction)

### Description
Matches a guide direction value.

### Parameters
- **direction** (any) - Required - The direction to match.

## getChannelKindOffset(channelKind)

### Description
Gets the offset for a given channel kind.

### Parameters
- **channelKind** (string) - Required - The channel kind.

## getFileVersionSpec(fileVersion)

### Description
Retrieves the file version specification.

### Parameters
- **fileVersion** (string) - Required - The file version.

## validateSupportedCompression(compression)

### Description
Validates if a compression type is supported.

### Parameters
- **compression** (string) - Required - The compression type to validate.
```

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

### readDescriptor()

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Parses descriptor structures from binary data. It takes a DataView, an offset, and a FileVersionSpec to interpret the binary data and returns the parsed Descriptor along with the new offset in the buffer.

```APIDOC
## readDescriptor()

### Description
Internal method to parse descriptor structures from binary data.

### Parameters
#### Path Parameters
- **buffer** (DataView) - Required - The binary data buffer.
- **offset** (number) - Required - The starting offset in the buffer.
- **spec** (FileVersionSpec) - Required - The file version specification for parsing.

### Returns
- **[Descriptor, number]** - A tuple containing the parsed Descriptor object and the new offset in the buffer.
```

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

### Get Descriptor Value as Type

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Provides a type-safe way to retrieve values from a descriptor object. Use when the expected type of the descriptor value is known. Throws errors if the key is missing or the value type does not match.

```typescript
import {getDescriptorValueAsType, DescriptorValueType} from "@webtoon/psd";

const descriptor = layer.additionalProperties.SoCo?.descriptor;
if (descriptor) {
  const colorValue = getDescriptorValueAsType(
    descriptor,
    "Clr ",
    DescriptorValueType.Descriptor
  );
  console.log("Color descriptor:", colorValue);
}
```

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

### Match Guide Direction Number to Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Converts a numeric value (0 or 1) to its corresponding GuideDirection enum value. 0 represents Vertical and 1 represents Horizontal. Throws an error if the input is not 0 or 1.

```typescript
function matchGuideDirection(direction: number): GuideDirection
```

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

### Parse PSD Buffer

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Use the static `parse` method on the `Psd` class to load a PSD file from a buffer.

```javascript
const psd = await Psd.parse(buffer);
```

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

### Statistics Generator in TypeScript

Source: https://github.com/webtoon/psd/blob/main/_autodocs/advanced-patterns.md

Generate a comprehensive statistics object for a given PSD file, including document dimensions, color mode, layer counts (total, groups, visible, text, masks, effects), guide and slice counts, average layer opacity, and maximum layer dimensions.

```typescript
function generateStatistics(psdFile: Psd) {
  return {
    document: {
      dimensions: {width: psdFile.width, height: psdFile.height},
      colorMode: psdFile.colorMode,
      depth: psdFile.depth,
      channelCount: psdFile.channelCount
    },
    layers: {
      total: psdFile.layers.length,
      groups: psdFile.children.filter(c => c.type === "Group").length,
      visible: psdFile.layers.filter(l => !l.isHidden).length,
      withText: psdFile.layers.filter(l => l.text !== undefined).length,
      withMasks: psdFile.layers.filter(l => l.maskData !== undefined).length,
      withEffects: psdFile.layers.filter(
        l => Object.keys(l.additionalProperties).length > 0
      ).length
    },
    guides: psdFile.guides.length,
    slices: psdFile.slices.length,
    averageOpacity:
      psdFile.layers.reduce((sum, l) => sum + l.opacity, 0) /
      psdFile.layers.length,
    maxSize: {
      width: Math.max(...psdFile.layers.map(l => l.width)),
      height: Math.max(...psdFile.layers.map(l => l.height))
    }
  };
}
```

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

### AliKey Enum

Source: https://github.com/webtoon/psd/blob/main/_autodocs/types.md

Lists keys for Additional Layer Info (ALI) blocks, used for parsing layer properties like blend options, effects, and color adjustments.

```typescript
enum AliKey {
  SectionDividerSetting = "lsct",
  TypeToolObjectSetting = "TySh",
  UnicodeLayerName = "luni",
  VectorStrokeData = "vstk",
  ObjectBasedEffects = "lfx2",
  MultipleObjectBasedEffects = "lmfx",
  ObjectBasedUndocumented = "lfxs",
  GradientFillSetting = "GdFl",
  SolidColorSheetSetting = "SoCo",
  PatternFillSetting = "PtFl",
  VectorStrokeContentData = "vscg",
  VectorOriginationData = "vogk",
  BlendOptionsCapacity = "iOpa",
  VectorMaskSetting1 = "vmsk",
  VectorMaskSetting2 = "vsms",
  HueSaturation = "hue2",
  NestedSectionDividerSetting = "lsdk",
  LayerId = "lyid",
  ArtboardData = "artb",
  SmartObjectPlacedLayerData = "SoLE",
  PlacedLayerData = "SoLd",
  LinkedLayer = "lnkD",
  LinkedLayer2 = "lnk2",
  LinkedLayer3 = "lnk3",
  LayerNameSourceSetting = "lnsr",
  BrightnessAndContrast = "brit",
  Levels = "levl",
  Curves = "curv",
  Exposure = "expA",
  Vibrance = "vibA",
  HueSaturationOld = "hue ",
  ColorBalance = "blnc",
  BlackAndWhite = "blwh",
  PhotoFilter = "phfl",
  ChannelMixer = "mixr",
  ColorLookup = "clrL",
  Invert = "nvrt",
  Posterize = "post",
  Threshold = "thrs",
  GradientMapSettings = "grdm",
  SelectiveColor = "selc",
  Pattern1 = "Patt",
  Pattern2 = "Pat2",
  Pattern3 = "Pat3",
}
```

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

### Build Asset Pipeline for PSD Layers

Source: https://github.com/webtoon/psd/blob/main/_autodocs/advanced-patterns.md

Construct a pipeline to collect, filter, decode, and export assets from a PSD file. This pattern is useful for batch processing layers and extracting specific information or image data.

```typescript
interface AssetInfo {
  name: string;
  path: string;
  width: number;
  height: number;
  pixels?: Uint8ClampedArray;
  metadata: Record<string, any>;
}

class AssetPipeline {
  private assets: AssetInfo[] = [];
  
  collect(psdFile: Psd): this {
    function traverse(node: Node, path: string[] = []) {
      if (node.type === "Layer" && node.width > 0 && node.height > 0) {
        this.assets.push({
          name: node.name,
          path: [...path, node.name].join("/"),
          width: node.width,
          height: node.height,
          metadata: {
            opacity: node.opacity,
            blendMode: node.blendMode,
            isHidden: node.isHidden,
            text: node.text
          }
        });
      }
      
      if (node.type !== "Layer") {
        node.children.forEach(child => 
          traverse(child, [...path, node.name])
        );
      }
    }
    
    traverse(psdFile);
    return this;
  }
  
  async decode(): Promise<this> {
    await Promise.all(
      this.assets.map(async (asset) => {
        const layer = psdFile.layers.find(l => l.name === asset.name);
        if (layer) {
          asset.pixels = await layer.composite();
        }
      })
    );
    return this;
  }
  
  filter(predicate: (asset: AssetInfo) => boolean): this {
    this.assets = this.assets.filter(predicate);
    return this;
  }
  
  async export(exporter: (asset: AssetInfo) => Promise<void>): Promise<void> {
    for (const asset of this.assets) {
      await exporter(asset);
    }
  }
}

// Usage
const pipeline = new AssetPipeline();
pipeline
  .collect(psdFile)
  .filter(asset => asset.width > 100)
  .filter(asset => !asset.metadata.isHidden)
  .decode()
  .then(() => pipeline.export(exportAsset));
```

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

### matchChannelCompression()

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Converts a numeric code representing a channel compression method into its corresponding ChannelCompression enum value. It handles compression types from 0 to 3.

```APIDOC
## matchChannelCompression()

### Description
Converts a number to a ChannelCompression enum value.

### Parameters
#### Path Parameters
- **compression** (number) - Required - Compression method (0-3).

### Returns
- **ChannelCompression** — The matched ChannelCompression enum value.

### Throws
- **InvalidCompression** — If the number is not within the range of 0-3.
```

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

### Pre-validation and Specific Error Handling for Compositing

Source: https://github.com/webtoon/psd/blob/main/_autodocs/errors.md

Ensures the PSD document is in RGB color mode before attempting to composite, and handles MissingColorChannel errors during the process.

```typescript
async function safeComposite(psdFile) {
  if (psdFile.colorMode !== ColorMode.Rgb) {
    throw new Error("Only RGB documents are supported");
  }
  
  try {
    return await psdFile.composite();
  } catch (error) {
    if (error instanceof MissingColorChannel) {
      console.error("Document is missing color data");
    }
    throw error;
  }
}
```

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

### Iterate Through PSD Layers

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-layer.md

Access all layers in a PSD file and log their basic properties like name, position, size, opacity, blend mode, and hidden status. Requires the Psd library to be imported and a PSD file to be parsed.

```typescript
import Psd from "@webtoon/psd";

const psdFile = Psd.parse(buffer);

// Access all layers
for (const layer of psdFile.layers) {
  console.log(`Layer: ${layer.name}`);
  console.log(`  Position: (${layer.left}, ${layer.top})`);
  console.log(`  Size: ${layer.width}x${layer.height}`);
  console.log(`  Opacity: ${layer.opacity}/255`);
  console.log(`  Blend Mode: ${layer.blendMode}`);
  console.log(`  Hidden: ${layer.isHidden}`);
}
```

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

### patterns

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-psd.md

Retrieves all patterns defined in the document (from Patt, Pat2, Pat3 blocks).

```APIDOC
## patterns

### Description
Retrieves all patterns defined in the document (from Patt, Pat2, Pat3 blocks).

### Method Signature
```typescript
get patterns(): Pattern[]
```

### Returns
- **Pattern[]** — Array of pattern definitions.
```

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

### Organizing Slices by Grid Layout

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-slice.md

Arranges slices into a grid structure based on their top and left positions. Slices are grouped by their vertical position (top) and then sorted horizontally (left).

```typescript
function gridSlices(psdFile) {
  const slices = psdFile.slices;
  const rows = new Map();
  
  // Group slices by top position
  for (const slice of slices) {
    if (!rows.has(slice.top)) {
      rows.set(slice.top, []);
    }
    rows.get(slice.top).push(slice);
  }
  
  // Sort each row by left position
  for (const row of rows.values()) {
    row.sort((a, b) => a.left - b.left);
  }
  
  // Sort rows by top position
  return [...rows.entries()]
    .sort((a, b) => a[0] - b[0])
    .map(([_, row]) => row);
}
```

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

### validateSupportedCompression

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Assertion function that validates only supported compressions are used. Throws an error if ZIP compression is detected, as it is not supported.

```APIDOC
## validateSupportedCompression()

### Description
Assertion function that validates only supported compressions are used.

### Parameters
#### Path Parameters
- **compression** (ChannelCompression) - Required - Compression to validate

### Throws
- **UnsupportedCompression** — ZIP compression is not supported

### Example
```typescript
import {validateSupportedCompression} from "@webtoon/psd";

try {
  validateSupportedCompression(red.compression);
  // Proceed with decoding
} catch (error) {
  console.error("ZIP compression not supported");
}
```
```

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

### Display PSD Layers in a React Component

Source: https://github.com/webtoon/psd/blob/main/_autodocs/INDEX.md

This React component demonstrates how to parse a PSD file from a buffer and display its layers. It uses the `useState` and `useEffect` hooks for managing the PSD file state and parsing.

```typescript
function PsdPreview({buffer}) {
  const [psdFile, setPsdFile] = useState(null);
  
  useEffect(() => {
    setPsdFile(Psd.parse(buffer));
  }, [buffer]);
  
  return (
    <div>
      {psdFile?.layers.map(layer => (
        <Layer key={layer.name} layer={layer} />
      ))}
    </div>
  );
}
```

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

### Access Layer Dimensions and Position

Source: https://github.com/webtoon/psd/blob/main/_autodocs/FILE_MANIFEST.txt

Retrieve the width, height, top, and left position of a layer.

```javascript
const { width, height, top, left } = layer;
```

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

### matchClipping()

Source: https://github.com/webtoon/psd/blob/main/_autodocs/api-reference-methods.md

Converts a numeric value representing clipping information into its corresponding Clipping enum value. It supports values 0 for Base and 1 for NonBase.

```APIDOC
## matchClipping()

### Description
Converts a number to a Clipping enum value.

### Parameters
#### Path Parameters
- **mode** (number) - Required - Clipping value (0 or 1).

### Returns
- **Clipping** — The Clipping enum value (Base for 0, NonBase for 1).

### Throws
- **InvalidClipping** — If the mode is not 0 or 1.
```

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

### Traversing Layers

Source: https://github.com/webtoon/psd/blob/main/README.md

Navigate the layer and group structure within a parsed Psd object.

```APIDOC
## Traversing Layers

### Description
A `Psd` object contains a tree of `Layer` and `Group` objects. You can traverse this tree using the `children` property available on `Psd`, `Group`, and `Layer` objects. The `Psd` object also provides a flattened `layers` property.

### Properties
- **`children`** (Array<Node>): An array of top-level `Layer`s and `Group`s for `Psd` and `Group` objects. For `Layer` objects, this property is typically empty.
- **`layers`** (Array<Layer>): A flattened array of all `Layer` objects within the PSD file, including nested layers.
- **`type`** (string): Discriminates between 'Psd', 'Group', and 'Layer' types.

### Usage Example (Recursive Traversal)
```ts
import Psd, {Node} from "@webtoon/psd";

function traverseNode(node: Node) {
  if (node.type === "Layer") {
    // Do something with Layer
  } else if (node.type === "Group") {
    // Do something with Group
  } else if (node.type === "Psd") {
    // Do something with Psd
  } else {
    throw new Error("Invalid node type");
  }

  node.children?.forEach((child) => traverseNode(child));
}

traverseNode(psdFile);
```

### Usage Example (Iterating all layers)
```ts
for (const layer of psdFile.layers) {
  doSomething(layer);
}
```
```

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

### Fix Code Style Issues

Source: https://github.com/webtoon/psd/blob/main/CONTRIBUTING.md

Automatically applies fixes for linting and code style issues using ESLint and Prettier. This command helps ensure code adheres to project standards.

```bash
npm run fix
```
Tokens:
Raw