### PotpackBox Type and Custom Properties

Source: https://context7.com/mapbox/potpack/llms.txt

Illustrates how the PotpackBox type works, emphasizing that required `w` and `h` properties are used for packing, while custom properties are preserved. The example shows packing sprite data and then extracting positioned regions along with original metadata.

```javascript
import potpack from 'potpack';

// Box type definition (TypeScript-style for reference):
// {
//   w: number,      // Required: box width
//   h: number,      // Required: box height
//   x?: number,     // Added by potpack: X coordinate in container
//   y?: number,     // Added by potpack: Y coordinate in container
//   ...any         // Custom properties are preserved
// }

// Example: packing image sprites with metadata
const sprites = [
    { w: 64, h: 64, name: 'player_idle', frames: 4 },
    { w: 32, h: 32, name: 'coin', frames: 8 },
    { w: 128, h: 64, name: 'enemy_walk', frames: 6 },
    { w: 48, h: 48, name: 'explosion', frames: 12 },
    { w: 16, h: 16, name: 'particle', frames: 1 }
];

potpack(sprites);

// Custom properties (name, frames) are preserved
// x, y coordinates are added for positioning
const spriteSheet = sprites.map(sprite => ({
    name: sprite.name,
    region: { x: sprite.x, y: sprite.y, width: sprite.w, height: sprite.h },
    frameCount: sprite.frames
}));

console.log(JSON.stringify(spriteSheet, null, 2));
// Output:
// [
//   { "name": "enemy_walk", "region": { "x": 0, "y": 0, "width": 128, "height": 64 }, "frameCount": 6 },
//   { "name": "player_idle", "region": { "x": 0, "y": 64, "width": 64, "height": 64 }, "frameCount": 4 },
//   { "name": "explosion", "region": { "x": 64, "y": 64, "width": 48, "height": 48 }, "frameCount": 12 },
//   { "name": "coin", "region": { "x": 112, "y": 64, "width": 32, "height": 32 }, "frameCount": 8 },
//   { "name": "particle", "region": { "x": 128, "y": 0, "width": 16, "height": 16 }, "frameCount": 1 }
// ]

```

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

### JavaScript: Pack Rectangles and Get Container Dimensions

Source: https://github.com/mapbox/potpack/blob/main/README.md

Demonstrates how to use the potpack library to pack an array of boxes (rectangles with width and height) into a container. The function mutates the input array by adding 'x' and 'y' coordinates to each box and returns the container's width, height, and space utilization.

```javascript
import potpack from 'potpack';

const boxes = [
    {w: 300, h: 50},
    {w: 100, h: 200},
    ...
];

const {w, h, fill} = potpack(boxes);
// w and h are resulting container's width and height;
// fill is the space utilization value (0 to 1), higher is better

// potpack mutates the boxes array: it's sorted by height,
// and box objects are augmented with x, y coordinates:
boxes[0]; // {w: 300, h: 50,  x: 100, y: 0}
boxes[1]; // {w: 100, h: 200, x: 0,   y: 0}
```

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

### Initialize and Render Box Packing with Potpack

Source: https://github.com/mapbox/potpack/blob/main/index.html

This snippet demonstrates how to use the potpack function to calculate optimal box placement and visualize the results on an HTML5 Canvas. It generates a collection of boxes with random dimensions, processes them through potpack, and renders them with color-coded rectangles.

```javascript
import potpack from './index.js';

function update() {
	let boxes = [];
	// Generate random boxes
	for (let i = Math.random() * 20; i >= 0; i--) boxes.push({w: 100, h: 100});
	// ... (additional box generation logic)

	const {w, h, fill} = potpack(boxes);
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	
	// Rendering logic
	const r = 580 / w;
	for (const box of boxes) {
		ctx.beginPath();
		ctx.fillStyle = `hsl(${Math.random() * 360}, 100%, 70%)`;
		ctx.rect(box.x * r, box.y * r, box.w * r, box.h * r);
		ctx.fill();
		ctx.stroke();
	}
}
```

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

### JavaScript Module: Import Potpack via CDN

Source: https://github.com/mapbox/potpack/blob/main/README.md

Shows how to import the potpack library directly into a web page using a script tag with type 'module' and a CDN link. This method is suitable for modern browsers that support ES modules and excludes older browsers like Internet Explorer.

```html
<script type="module">
import potpack from 'https://cdn.skypack.dev/potpack';
...
</script>
```

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

### Analyze Potpack Return Statistics

Source: https://context7.com/mapbox/potpack/llms.txt

Demonstrates how to interpret the return object from potpack, which includes container dimensions and space utilization efficiency. It calculates the fill ratio to evaluate how effectively the input boxes are packed into the resulting bounding rectangle.

```javascript
import potpack from 'potpack';

// Generate test boxes of varying sizes
const boxes = [];
for (let i = 1; i <= 50; i++) {
    boxes.push({ w: i * 2, h: i * 2, index: i });
}

const stats = potpack(boxes);

console.log('Container size:', stats.w, 'x', stats.h);
console.log('Total pixels:', stats.w * stats.h);

const totalBoxArea = boxes.reduce((sum, b) => sum + b.w * b.h, 0);
console.log('Used pixels:', totalBoxArea);

console.log('Fill ratio:', stats.fill.toFixed(4));
console.log('Wasted space:', ((1 - stats.fill) * 100).toFixed(1) + '%');
```

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

### JavaScript: Import Potpack in Node.js (ESM)

Source: https://github.com/mapbox/potpack/blob/main/README.md

Illustrates how to import the potpack library in a Node.js environment using the 'import' syntax. This requires an ESM-capable version of Node.js (v12.15+) and does not support the older 'require' method.

```javascript
import potpack from 'potpack';
```

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

### Generate WebGL Texture Atlas

Source: https://context7.com/mapbox/potpack/llms.txt

A practical implementation showing how to use potpack to organize multiple images into a single texture atlas. It calculates the necessary canvas dimensions and generates normalized UV coordinates required for mapping textures in WebGL.

```javascript
import potpack from 'potpack';

async function createTextureAtlas(imageSources) {
    const boxes = imageSources.map((src, index) => ({
        w: src.width,
        h: src.height,
        src: src.url,
        index: index
    }));

    const { w, h, fill } = potpack(boxes);

    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    const uvCoordinates = {};
    for (const box of boxes) {
        uvCoordinates[box.src] = {
            u0: box.x / w,
            v0: box.y / h,
            u1: (box.x + box.w) / w,
            v1: (box.y + box.h) / h
        };
    }

    console.log('Atlas dimensions:', w, 'x', h);
    console.log('Space efficiency:', (fill * 100).toFixed(1) + '%');
    return { canvas, uvCoordinates, fill };
}

const images = [
    { url: 'hero.png', width: 256, height: 256 },
    { url: 'enemy.png', width: 128, height: 128 },
    { url: 'bullet.png', width: 16, height: 16 },
    { url: 'powerup.png', width: 32, height: 32 },
    { url: 'background_tile.png', width: 64, height: 64 }
];

createTextureAtlas(images);
```

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

### Generate CSS Sprite Sheet Coordinates with Potpack (JavaScript)

Source: https://context7.com/mapbox/potpack/llms.txt

This JavaScript function utilizes the potpack library to pack rectangular icon data into a sprite sheet. It takes an array of icon definitions (including width, height, name, and className) and returns the generated CSS for sprite positioning, along with the sprite sheet dimensions and efficiency.

```javascript
import potpack from 'potpack';

function generateSpriteCSS(icons) {
    // Create boxes from icon definitions
    const boxes = icons.map(icon => ({
        w: icon.width,
        h: icon.height,
        name: icon.name,
        className: icon.className
    }));

    // Pack all icons
    const { w, h, fill } = potpack(boxes);

    // Generate CSS
    let css = `/* Sprite sheet: ${w}x${h}px, ${(fill * 100).toFixed(1)}% efficient */\n`;
    css += `.sprite { background-image: url('sprites.png'); background-repeat: no-repeat; }\n\n`;

    for (const box of boxes) {
        css += `.${box.className} {\n`;
        css += `  width: ${box.w}px;\n`;
        css += `  height: ${box.h}px;\n`;
        css += `  background-position: -${box.x}px -${box.y}px;\n`;
        css += `}\n\n`;
    }

    return { css, width: w, height: h };
}

// Example usage
const icons = [
    { name: 'Search', className: 'icon-search', width: 24, height: 24 },
    { name: 'Menu', className: 'icon-menu', width: 24, height: 24 },
    { name: 'Close', className: 'icon-close', width: 16, height: 16 },
    { name: 'Arrow', className: 'icon-arrow', width: 12, height: 12 },
    { name: 'Logo', className: 'icon-logo', width: 48, height: 48 },
    { name: 'Avatar', className: 'icon-avatar', width: 32, height: 32 }
];

const result = generateSpriteCSS(icons);
console.log(result.css);
// Output:
// /* Sprite sheet: 72x72px, 93.8% efficient */
// .sprite { background-image: url('sprites.png'); background-repeat: no-repeat; }
//
// .icon-logo {
//   width: 48px;
//   height: 48px;
//   background-position: -0px -0px;
// }
//
// .icon-avatar {
//   width: 32px;
//   height: 32px;
//   background-position: -48px -0px;
// }
// ...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.