@rb-games/core 0.1.0

package/dist/layout/Align.d.ts

@@ -0,0 +1,126 @@
+import { Container } from 'pixi.js';
+import { AlignOptions } from './Bounds';
+/**
+ * Alignment utility for positioning PixiJS containers, similar to Photoshop's align tools.
+ *
+ * Provides methods to align multiple containers relative to each other or to a reference point.
+ * All alignment operations modify the position of containers in-place.
+ *
+ * ## Features
+ *
+ * - **Horizontal Alignment**: Left, center, right
+ * - **Vertical Alignment**: Top, center, bottom
+ * - **Flexible Reference**: Align to selection bounds, specific container, or custom rectangle
+ * - **Parent-aware**: Handles coordinate transformations correctly
+ *
+ * ## Alignment Modes
+ *
+ * The alignment reference can be controlled via {@link AlignOptions}:
+ * - `selection` (default): Align to the bounding box of all selected items
+ * - `container`: Align to a specific container's bounds
+ * - `key`: Align to a specific key object
+ * - `rectangle`: Align to a custom rectangle
+ *
+ * @example
+ * ```typescript
+ * import { Align } from '@rb-games/core/layout';
+ * import { Container, Sprite } from 'pixi.js';
+ *
+ * // Create some sprites
+ * const sprite1 = new Sprite();
+ * const sprite2 = new Sprite();
+ * const sprite3 = new Sprite();
+ *
+ * const container = new Container();
+ * container.addChild(sprite1, sprite2, sprite3);
+ *
+ * // Align all sprites to the left edge of their selection
+ * Align.left([sprite1, sprite2, sprite3]);
+ *
+ * // Align horizontally centered
+ * Align.hCenter([sprite1, sprite2, sprite3]);
+ *
+ * // Align to a specific container
+ * const bounds = new Container();
+ * Align.left([sprite1, sprite2, sprite3], { container: bounds });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Align UI elements to screen center
+ * const title = new Text('Game Title');
+ * const button = new Sprite();
+ * const logo = new Sprite();
+ *
+ * // Center all elements horizontally to screen bounds
+ * Align.hCenter([title, button, logo], {
+ *   rect: new Rectangle(0, 0, 1920, 1080)
+ * });
+ *
+ * // Align to top
+ * Align.top([title, button, logo]);
+ * ```
+ *
+ * @category Layout
+ * @public
+ */
+export declare class Align {
+    /**
+     * Aligns containers to the left edge of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     *
+     * @example
+     * ```typescript
+     * // Align to selection bounds (default)
+     * Align.left([sprite1, sprite2, sprite3]);
+     *
+     * // Align to container
+     * Align.left([sprite1, sprite2], { container: bounds });
+     * ```
+     */
+    static left(items: Container[], options?: AlignOptions): void;
+    /**
+     * Aligns containers to the horizontal center of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     *
+     * @example
+     * ```typescript
+     * // Center horizontally within selection
+     * Align.hCenter([sprite1, sprite2, sprite3]);
+     * ```
+     */
+    static hCenter(items: Container[], options?: AlignOptions): void;
+    /**
+     * Aligns containers to the right edge of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     */
+    static right(items: Container[], options?: AlignOptions): void;
+    /**
+     * Aligns containers to the top edge of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     */
+    static top(items: Container[], options?: AlignOptions): void;
+    /**
+     * Aligns containers to the vertical center of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     */
+    static vCenter(items: Container[], options?: AlignOptions): void;
+    /**
+     * Aligns containers to the bottom edge of the reference bounds.
+     *
+     * @param items - Array of containers to align
+     * @param options - Alignment options to control the reference point
+     */
+    static bottom(items: Container[], options?: AlignOptions): void;
+}
+//# sourceMappingURL=Align.d.ts.map

package/dist/layout/Align.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Align.d.ts","sourceRoot":"","sources":["../../layout/Align.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,YAAY,EAA8D,MAAM,UAAU,CAAC;AAEpG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBAAa,KAAK;IAChB;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;IAOtD;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;IAOzD;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;IAOvD;;;;;OAKG;IACH,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;IAOrD;;;;;OAKG;IACH,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;IAOzD;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY;CAOzD"}

package/dist/layout/Bounds.d.ts

@@ -0,0 +1,120 @@
+import { Container, Rectangle } from 'pixi.js';
+/**
+ * Configuration options for alignment operations.
+ *
+ * @example
+ * ```typescript
+ * // Align to selection (default, no options needed)
+ * Align.hCenter([sprite1, sprite2]);
+ *
+ * // Align to container
+ * Align.left([sprite1, sprite2], { container: myContainer });
+ *
+ * // Align to rectangle
+ * Align.hCenter([sprite1], { container: new Rectangle(0, 0, 1920, 1080) });
+ *
+ * // Align to key object
+ * Align.top([sprite1, sprite2], { key: mainSprite });
+ * ```
+ */
+export interface AlignOptions {
+    key?: Container;
+    container?: Container | Rectangle;
+}
+/**
+ * Represents the bounding box of a container with convenient access to edges and center points.
+ *
+ * This interface provides a virtual container that describes the bounds of one or more
+ * PixiJS containers, useful for alignment and layout calculations.
+ *
+ * @example
+ * ```typescript
+ * const bounds: BoundsLike = {
+ *   left: 0,
+ *   right: 100,
+ *   top: 0,
+ *   bottom: 50,
+ *   width: 100,
+ *   height: 50,
+ *   centerX: 50,
+ *   centerY: 25
+ * };
+ * ```
+ */
+export interface BoundsLike {
+    /** Left edge X coordinate */
+    left: number;
+    /** Right edge X coordinate */
+    right: number;
+    /** Top edge Y coordinate */
+    top: number;
+    /** Bottom edge Y coordinate */
+    bottom: number;
+    /** Total width (right - left) */
+    width: number;
+    /** Total height (bottom - top) */
+    height: number;
+    /** Horizontal center X coordinate */
+    centerX: number;
+    /** Vertical center Y coordinate */
+    centerY: number;
+}
+/**
+ * Gets the common parent container of all items.
+ *
+ * All items must share the same parent, otherwise an error is thrown.
+ * This is essential for coordinate transformations in alignment operations.
+ *
+ * @param items - Array of containers to check
+ * @returns The common parent container
+ * @throws {Error} If items don't have a parent or don't share the same parent
+ *
+ * @example
+ * ```typescript
+ * const parent = getCommonParent([sprite1, sprite2, sprite3]);
+ * ```
+ */
+export declare function getCommonParent(items: Container[]): Container;
+/**
+ * Calculates the bounds of a child container in its parent's coordinate space.
+ *
+ * This function handles coordinate transformations correctly, accounting for
+ * rotation, scale, and skew of the child relative to the parent.
+ *
+ * @param child - The child container to measure
+ * @param parent - The parent container (coordinate space reference)
+ * @returns Bounds of the child in parent's local coordinates
+ *
+ * @example
+ * ```typescript
+ * const bounds = getLocalBoundsInParent(sprite, container);
+ * console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
+ * console.log(`Center: (${bounds.centerX}, ${bounds.centerY})`);
+ * ```
+ */
+export declare function getLocalBoundsInParent(child: Container, parent: Container): BoundsLike;
+/**
+ * Calculates the combined bounding box of multiple containers.
+ *
+ * This creates a virtual container that encompasses all provided items,
+ * similar to selecting multiple objects in Photoshop and seeing their combined bounds.
+ *
+ * @param items - Array of containers to measure
+ * @param parent - Optional parent container for coordinate space (defaults to common parent)
+ * @returns Combined bounds of all items
+ *
+ * @example
+ * ```typescript
+ * const bounds = getSelectionBounds([sprite1, sprite2, sprite3]);
+ * console.log(`Selection size: ${bounds.width} x ${bounds.height}`);
+ * console.log(`Selection center: (${bounds.centerX}, ${bounds.centerY})`);
+ * ```
+ */
+export declare function getSelectionBounds(items: Container[], parent?: Container): BoundsLike;
+export declare function getReferenceBounds(items: Container[], options?: AlignOptions): {
+    ref: BoundsLike;
+    parent: Container;
+};
+export declare function nudgeX(child: Container, dx: number): void;
+export declare function nudgeY(child: Container, dy: number): void;
+//# sourceMappingURL=Bounds.d.ts.map

package/dist/layout/Bounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bounds.d.ts","sourceRoot":"","sources":["../../layout/Bounds.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACnC;AAqBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,CAO7D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,GAAG,UAAU,CAoBtF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAyBrF;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,EAAE,EAClB,OAAO,CAAC,EAAE,YAAY,GACrB;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,SAAS,CAAA;CAAE,CAwCxC;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAElD;AACD,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAElD"}

package/dist/layout/Distribute.d.ts

@@ -0,0 +1,103 @@
+import { Container, Rectangle } from 'pixi.js';
+/**
+ * Distribution utility for evenly spacing PixiJS containers, similar to Photoshop's distribute tools.
+ *
+ * Provides methods to distribute multiple containers with equal spacing between them,
+ * either by edges, centers, or with equal gaps. All distribution operations modify
+ * container positions in-place.
+ *
+ * ## Features
+ *
+ * - **Horizontal Distribution**: By left edges, centers, right edges, or spacing
+ * - **Vertical Distribution**: By top edges, centers, bottom edges, or spacing
+ * - **Auto-sorting**: Automatically sorts items before distributing
+ * - **Minimum 3 items**: Requires at least 3 items (first and last act as anchors)
+ *
+ * ## Distribution Types
+ *
+ * ### Edge Distribution
+ * Distributes items so their edges are evenly spaced:
+ * - `hLeft()`, `hRight()`: Horizontal by left/right edges
+ * - `vTop()`, `vBottom()`: Vertical by top/bottom edges
+ *
+ * ### Center Distribution
+ * Distributes items so their centers are evenly spaced:
+ * - `hCenters()`: Horizontal centers
+ * - `vCenters()`: Vertical centers
+ *
+ * ### Spacing Distribution
+ * Distributes items with equal gaps between them:
+ * - `hSpacing()`: Equal horizontal gaps
+ * - `vSpacing()`: Equal vertical gaps
+ *
+ * @example
+ * ```typescript
+ * import { Distribute } from '@rb-games/core/layout';
+ * import { Container, Sprite } from 'pixi.js';
+ *
+ * // Create some sprites
+ * const sprites = [
+ *   new Sprite(),
+ *   new Sprite(),
+ *   new Sprite(),
+ *   new Sprite()
+ * ];
+ *
+ * const container = new Container();
+ * container.addChild(...sprites);
+ *
+ * // Distribute horizontally by centers
+ * Distribute.hCenters(sprites);
+ *
+ * // Distribute vertically with equal spacing
+ * Distribute.vSpacing(sprites);
+ *
+ * // Distribute horizontally by left edges
+ * Distribute.hLeft(sprites);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Distribute UI buttons with equal spacing
+ * const buttons = [button1, button2, button3, button4];
+ *
+ * // Equal horizontal spacing between buttons
+ * Distribute.hSpacing(buttons);
+ *
+ * // Distribute within a specific rectangle
+ * Distribute.hSpacing(buttons, {
+ *   container: new Rectangle(100, 100, 800, 100)
+ * });
+ * ```
+ *
+ * @public
+ */
+export declare class Distribute {
+    static hLeft(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static hCenters(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static hRight(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static vTop(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static vCenters(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static vBottom(items: Container[], options?: {
+        parent?: Container;
+    }): void;
+    static hSpacing(items: Container[], options?: {
+        parent?: Container;
+        container?: Rectangle;
+    }): void;
+    static vSpacing(items: Container[], options?: {
+        parent?: Container;
+        container?: Rectangle;
+    }): void;
+}
+//# sourceMappingURL=Distribute.d.ts.map

package/dist/layout/Distribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Distribute.d.ts","sourceRoot":"","sources":["../../layout/Distribute.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAS/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBAAa,UAAU;IACrB,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAejE,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAgBpE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAelE,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAehE,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAgBpE,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE;IAenE,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IAuB3F,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;CAsB5F"}

package/dist/layout/Flow.d.ts

@@ -0,0 +1,213 @@
+import { Container, Rectangle } from 'pixi.js';
+/**
+ * Flow direction for layout.
+ * - `row`: Horizontal layout (left to right)
+ * - `column`: Vertical layout (top to bottom)
+ */
+export type FlowDirection = 'row' | 'column';
+/**
+ * Wrapping behavior for flow layout.
+ * - `none`: No wrapping, single line/column
+ * - `bounds`: Wrap when reaching bounds width/height
+ * - `count`: Wrap after specific number of items
+ */
+export type FlowWrap = 'none' | 'bounds' | 'count';
+/**
+ * Cross-axis alignment (perpendicular to flow direction).
+ * - `start`: Align to start of line/column
+ * - `center`: Center within line/column
+ * - `end`: Align to end of line/column
+ */
+export type FlowAlign = 'start' | 'center' | 'end';
+/**
+ * Main-axis justification (along flow direction).
+ * - `start`: Pack items to start
+ * - `center`: Center items
+ * - `end`: Pack items to end
+ * - `space-between`: Equal space between items
+ * - `space-around`: Equal space around items
+ * - `space-evenly`: Equal space including edges
+ */
+export type FlowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * Individual item margin configuration.
+ * Supports shorthand notations:
+ * - `x`: Sets both left and right
+ * - `y`: Sets both top and bottom
+ * - Specific values (top, right, bottom, left) override shorthands
+ */
+export interface FlowItemMargin {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    x?: number;
+    y?: number;
+}
+/**
+ * Margin value for a single item.
+ * - `number`: All sides get the same margin
+ * - `FlowItemMargin`: Detailed control with optional shorthands
+ * - `undefined`: No margin (all sides = 0)
+ */
+export type FlowItemMarginValue = number | FlowItemMargin | undefined;
+/**
+ * Configuration options for flow layout.
+ *
+ * @example
+ * ```typescript
+ * const options: FlowOptions = {
+ *   direction: 'row',
+ *   wrap: 'bounds',
+ *   gap: 10,
+ *   justify: 'space-between',
+ *   align: 'center',
+ *   padding: 20,
+ *   margins: [10, 0, { y: 15 }]
+ * };
+ * ```
+ */
+export interface FlowOptions {
+    direction?: FlowDirection;
+    wrap?: FlowWrap;
+    gap?: number | {
+        h: number;
+        v: number;
+    };
+    rowGap?: number;
+    columnGap?: number;
+    justify?: FlowJustify;
+    align?: FlowAlign;
+    padding?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    bounds?: Container | Rectangle;
+    rowCount?: number;
+    columnCount?: number;
+    order?: (a: Container, b: Container) => number;
+    margins?: FlowItemMarginValue[];
+}
+/**
+ * Flexbox-like layout utility for arranging PixiJS containers in rows or columns.
+ *
+ * Flow provides a powerful layout system similar to CSS Flexbox, allowing you to
+ * arrange containers horizontally or vertically with automatic wrapping, spacing,
+ * alignment, and justification.
+ *
+ * ## Features
+ *
+ * - **Flexible Direction**: Row (horizontal) or column (vertical) layouts
+ * - **Smart Wrapping**: No wrap, wrap by bounds, or wrap by count
+ * - **Spacing Control**: Gaps between items, padding around container
+ * - **Alignment**: Start, center, end alignment on cross-axis
+ * - **Justification**: Start, center, end, space-between, space-around, space-evenly
+ * - **Custom Sorting**: Optional custom order function
+ *
+ * ## Layout Modes
+ *
+ * ### Row Layout (Horizontal)
+ * Items flow left to right, wrapping creates new rows below.
+ * - Main axis: Horizontal (justify controls)
+ * - Cross axis: Vertical (align controls)
+ *
+ * ### Column Layout (Vertical)
+ * Items flow top to bottom, wrapping creates new columns to the right.
+ * - Main axis: Vertical (justify controls)
+ * - Cross axis: Horizontal (align controls)
+ *
+ * ## Wrapping Modes
+ *
+ * - **none**: Single line/column, no wrapping
+ * - **bounds**: Wrap when reaching container bounds
+ * - **count**: Wrap after specific number of items (rowCount/columnCount)
+ *
+ * @example
+ * ```typescript
+ * import { Flow } from '@rb-games/core/layout';
+ * import { Container, Sprite } from 'pixi.js';
+ *
+ * // Create inventory grid
+ * const items = Array.from({ length: 20 }, () => new Sprite());
+ * const container = new Container();
+ * container.addChild(...items);
+ *
+ * // Grid layout: 5 columns, wrap by count
+ * Flow.layout(items, {
+ *   direction: 'row',
+ *   wrap: 'count',
+ *   columnCount: 5,
+ *   gap: 10,
+ *   padding: 20
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Responsive horizontal menu with wrapping
+ * const menuItems = [item1, item2, item3, item4, item5];
+ *
+ * Flow.layout(menuItems, {
+ *   direction: 'row',
+ *   wrap: 'bounds',
+ *   bounds: new Rectangle(0, 0, 800, 600),
+ *   gap: 15,
+ *   justify: 'space-between',
+ *   align: 'center',
+ *   padding: { top: 10, right: 20, bottom: 10, left: 20 }
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Vertical button list
+ * const buttons = [btn1, btn2, btn3];
+ *
+ * Flow.layout(buttons, {
+ *   direction: 'column',
+ *   wrap: 'none',
+ *   gap: 10,
+ *   align: 'center',
+ *   justify: 'start'
+ * });
+ * ```
+ *
+ * @public
+ */
+export declare class Flow {
+    /**
+     * Arranges containers in a flexbox-like layout.
+     *
+     * This method modifies container positions in-place to create the desired layout.
+     * Items are sorted (if order function provided) and then arranged according to
+     * direction, wrapping, alignment, and justification settings.
+     *
+     * @param items - Array of containers to layout
+     * @param options - Layout configuration options
+     *
+     * @example
+     * ```typescript
+     * // Simple horizontal row
+     * Flow.layout(items, { direction: 'row', gap: 10 });
+     *
+     * // Grid with 4 columns
+     * Flow.layout(items, {
+     *   direction: 'row',
+     *   wrap: 'count',
+     *   columnCount: 4,
+     *   gap: { h: 10, v: 15 }
+     * });
+     *
+     * // Centered vertical list
+     * Flow.layout(items, {
+     *   direction: 'column',
+     *   align: 'center',
+     *   gap: 20
+     * });
+     * ```
+     */
+    static layout(items: Container[], options?: FlowOptions): void;
+}
+//# sourceMappingURL=Flow.d.ts.map

package/dist/layout/Flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../layout/Flow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAUtD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,GACd,cAAc,CAAC;AAEnB;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,cAAc,GAAG,SAAS,CAAC;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpF,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,KAAK,MAAM,CAAC;IAC/C,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACjC;AAoED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,qBAAa,IAAI;IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW;CAwFxD"}

package/dist/layout/PositionUtils.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Position utility types and functions for CSS-like positioning.
+ * Supports keywords (center, top, bottom, left, right), percentages, and numbers.
+ */
+type PositionKeyword = 'center' | 'top' | 'bottom' | 'left' | 'right';
+type NumberPercent = `${number}%`;
+type NumberString = `${number}`;
+type SinglePositionValue = PositionKeyword | NumberPercent | NumberString;
+type TwoPositionValue = `${string} ${string}`;
+export type PositionValue = SinglePositionValue | TwoPositionValue | number;
+/**
+ * Resolves a single position value to pixels.
+ * Assumes pivot/anchor is at (0, 0).
+ *
+ * @param value - Position value (keyword, percentage, or number)
+ * @param axis - Which axis this value applies to ('x' or 'y')
+ * @param viewportSize - Size of the viewport/container on this axis
+ * @param sourceScaledSize - Size of the source element (after scaling) on this axis
+ * @returns Resolved pixel position
+ */
+export declare function resolvePositionValue(value: string | number, axis: 'x' | 'y', viewportSize: number, sourceScaledSize: number): number;
+/**
+ * Resolves a position string to x, y coordinates.
+ * Supports: "center", "center top", "50%", "50% 0", 0
+ *
+ * @param position - Position value (string or number)
+ * @param viewportWidth - Width of the viewport/container
+ * @param viewportHeight - Height of the viewport/container
+ * @param sourceScaledWidth - Width of the source element (after scaling)
+ * @param sourceScaledHeight - Height of the source element (after scaling)
+ * @returns Object with x and y pixel coordinates
+ *
+ * @example
+ * ```typescript
+ * // Center on both axes
+ * resolvePosition("center", 1920, 1080, 800, 600);
+ * // { x: 560, y: 240 }
+ *
+ * // Center horizontally, top vertically
+ * resolvePosition("center top", 1920, 1080, 800, 600);
+ * // { x: 560, y: 0 }
+ *
+ * // 50% on both axes (same as center for pivot 0,0)
+ * resolvePosition("50%", 1920, 1080, 800, 600);
+ * // { x: 560, y: 240 }
+ *
+ * // Fixed position
+ * resolvePosition(100, 1920, 1080, 800, 600);
+ * // { x: 100, y: 100 }
+ * ```
+ */
+export declare function resolvePosition(position: PositionValue, viewportWidth: number, viewportHeight: number, sourceScaledWidth: number, sourceScaledHeight: number): {
+    x: number;
+    y: number;
+};
+export {};
+//# sourceMappingURL=PositionUtils.d.ts.map

package/dist/layout/PositionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionUtils.d.ts","sourceRoot":"","sources":["../../layout/PositionUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,KAAK,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACtE,KAAK,aAAa,GAAG,GAAG,MAAM,GAAG,CAAC;AAClC,KAAK,YAAY,GAAG,GAAG,MAAM,EAAE,CAAC;AAChC,KAAK,mBAAmB,GAAG,eAAe,GAAG,aAAa,GAAG,YAAY,CAAC;AAC1E,KAAK,gBAAgB,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,MAAM,CAAC;AAE5E;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,IAAI,EAAE,GAAG,GAAG,GAAG,EACf,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,MAAM,GACvB,MAAM,CA+BR;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,aAAa,EACvB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,MAAM,EACzB,kBAAkB,EAAE,MAAM,GACzB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAsB1B"}

package/dist/layout/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Align";
+export * from "./Bounds";
+export * from "./Distribute";
+export * from "./Flow";
+export * from "./PositionUtils";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC"}