taffy-js 0.2.10 → 0.2.12

package/pkg/taffy_wasm.d.ts

@@ -9,8 +9,8 @@
  *
  * @remarks
  * - Use `number` when you have a fixed container size
- * - Use `"minContent"` to shrink-wrap to the minimum content size
- * - Use `"maxContent"` to expand to fit all content without wrapping
+ * - Use `"min-content"` to shrink-wrap to the minimum content size
+ * - Use `"max-content"` to expand to fit all content without wrapping
  *
  * @example
  * ```typescript
@@ -29,13 +29,13 @@
  *
  * // Flexible width, fixed height
  * const flexibleSpace: Size<AvailableSpace> = {
- *   width: "maxContent",
+ *   width: "max-content",
  *   height: 400
  * };
  * tree.computeLayout(root, flexibleSpace);
  * ```
  */
-export type AvailableSpace = number | "minContent" | "maxContent";
+export type AvailableSpace = number | "min-content" | "max-content";
 
 /**
  * Generic size type with width and height.
@@ -62,16 +62,16 @@ export type AvailableSpace = number | "minContent" | "maxContent";
  *
  * const availableSize: Size<AvailableSpace> = {
  *   width: 800,
- *   height: "maxContent"
+ *   height: "max-content"
  * };
  * ```
  */
-export interface Size<T> {
+export type Size<T> = {
   /** The horizontal dimension value */
   width: T;
   /** The vertical dimension value */
   height: T;
-}
+};
 
 /**
  * Custom measure function for leaf nodes with text or other dynamic content.
@@ -82,7 +82,7 @@ export interface Size<T> {
  * @param knownDimensions - Dimensions already determined by constraints. Each dimension
  *                          is `number` if known, or `undefined` if needs to be measured.
  * @param availableSpace - The available space constraints for the node. Can be definite
- *                         pixels, "minContent", or "maxContent".
+ *                         pixels, "min-content", or "max-content".
  * @param node - The node ID (`bigint`) of the node being measured
  * @param context - User-provided context attached to the node via `newLeafWithContext()`
  * @param style - The node's current Style configuration
@@ -105,6 +105,9 @@ export interface Size<T> {
  * const context: TextContext = { text: "Hello, World!", fontSize: 16 };
  * const textNode: bigint = tree.newLeafWithContext(style, context);
  *
+ * // Helper function to measure text width
+ * const measureTextWidth = (text: string, fontSize: number) => text.length * fontSize * 0.6;
+ *
  * // Typed measure function
  * const measureText: MeasureFunction = (
  *   knownDimensions,
@@ -124,7 +127,7 @@ export interface Size<T> {
  *
  * tree.computeLayoutWithMeasure(
  *   textNode,
- *   { width: 200, height: "maxContent" },
+ *   { width: 200, height: "max-content" },
  *   measureText
  * );
  * ```
@@ -261,12 +264,12 @@ export type LengthPercentageAuto = number | `${number}%` | "auto";
  * style.overflow = overflow;
  * ```
  */
-export interface Point<T> {
+export type Point<T> = {
   /** The horizontal (x-axis) value */
   x: T;
   /** The vertical (y-axis) value */
   y: T;
-}
+};
 
 /**
  * Rectangle with left, right, top, and bottom values.
@@ -306,7 +309,7 @@ export interface Point<T> {
  * style.margin = margin;
  * ```
  */
-export interface Rect<T> {
+export type Rect<T> = {
   /** The left side value */
   left: T;
   /** The right side value */
@@ -315,7 +318,7 @@ export interface Rect<T> {
   top: T;
   /** The bottom side value */
   bottom: T;
-}
+};
 
 /**
  * Detailed layout information (for grid layouts).
@@ -328,18 +331,24 @@ export interface Rect<T> {
  *
  * @example
  * ```typescript
- * import type { DetailedLayoutInfo, DetailedGridInfo } from 'taffy-js';
+ * import { TaffyTree, Style, Display, type DetailedLayoutInfo, type DetailedGridInfo } from 'taffy-js';
+ *
+ * const tree = new TaffyTree();
+ * const style = new Style();
+ * style.display = Display.Grid;
+ * const gridNode = tree.newLeaf(style);
+ * tree.computeLayout(gridNode, { width: 100, height: 100 });
  *
  * const info: DetailedLayoutInfo = tree.detailedLayoutInfo(gridNode);
  *
- * if (info !== "None" && typeof info === 'object' && 'Grid' in info) {
- *   const grid: DetailedGridInfo = info.Grid;
+ * if (info && typeof info === 'object' && 'Grid' in info) {
+ *   const grid = info.Grid as DetailedGridInfo;
  *   console.log('Rows:', grid.rows.sizes);
  *   console.log('Columns:', grid.columns.sizes);
  * }
  * ```
  */
-export type DetailedLayoutInfo = DetailedGridInfo | null;
+export type DetailedLayoutInfo = DetailedGridInfo | undefined;
 
 /**
  * Detailed information about a grid layout.
@@ -350,38 +359,38 @@ export type DetailedLayoutInfo = DetailedGridInfo | null;
  * @property columns - Information about column tracks
  * @property items - Array of item placement information
  */
-export interface DetailedGridInfo {
+export type DetailedGridInfo = {
   /** Information about the grid's row tracks */
   rows: DetailedGridTracksInfo;
   /** Information about the grid's column tracks */
   columns: DetailedGridTracksInfo;
   /** Placement information for each grid item */
   items: DetailedGridItemsInfo[];
-}
+};
 
 /**
  * Information about grid tracks (rows or columns).
  *
  * Provides detailed sizing and gutter information for a set of grid tracks.
  *
- * @property negative_implicit_tracks - Number of implicit tracks before explicit tracks
- * @property explicit_tracks - Number of explicitly defined tracks
- * @property positive_implicit_tracks - Number of implicit tracks after explicit tracks
+ * @property negativeImplicitTracks - Number of implicit tracks before explicit tracks
+ * @property explicitTracks - Number of explicitly defined tracks
+ * @property positiveImplicitTracks - Number of implicit tracks after explicit tracks
  * @property gutters - Array of gutter sizes between tracks (in pixels)
  * @property sizes - Array of track sizes (in pixels)
  */
-export interface DetailedGridTracksInfo {
+export type DetailedGridTracksInfo = {
   /** Number of implicit tracks before explicit tracks (for negative line numbers) */
-  negative_implicit_tracks: number;
+  negativeImplicitTracks: number;
   /** Number of tracks explicitly defined in grid-template-rows/columns */
-  explicit_tracks: number;
+  explicitTracks: number;
   /** Number of implicit tracks created after explicit tracks */
-  positive_implicit_tracks: number;
+  positiveImplicitTracks: number;
   /** Gap sizes between tracks in pixels */
   gutters: number[];
   /** Computed sizes of each track in pixels */
   sizes: number[];
-}
+};
 
 /**
  * Information about a grid item's placement.
@@ -389,21 +398,155 @@ export interface DetailedGridTracksInfo {
  * Specifies which grid lines the item spans on both axes.
  * Line numbers are 1-indexed, with 1 being the first line.
  *
- * @property row_start - Starting row line number (1-indexed)
- * @property row_end - Ending row line number (exclusive)
- * @property column_start - Starting column line number (1-indexed)
- * @property column_end - Ending column line number (exclusive)
+ * @property rowStart - Starting row line number (1-indexed)
+ * @property rowEnd - Ending row line number (exclusive)
+ * @property columnStart - Starting column line number (1-indexed)
+ * @property columnEnd - Ending column line number (exclusive)
  */
-export interface DetailedGridItemsInfo {
+export type DetailedGridItemsInfo = {
   /** Starting row line (1-indexed) */
-  row_start: number;
+  rowStart: number;
   /** Ending row line (exclusive) */
-  row_end: number;
+  rowEnd: number;
   /** Starting column line (1-indexed) */
-  column_start: number;
+  columnStart: number;
   /** Ending column line (exclusive) */
-  column_end: number;
+  columnEnd: number;
+};
+
+/**
+ * Grid placement type for positioning grid items.
+ *
+ * Specifies how an item is placed on a grid track (row or column).
+ * Follows CSS `grid-row-start` / `grid-column-start` specification.
+ *
+ * @remarks
+ * - `"auto"`: Auto-placement using the grid's flow algorithm
+ * - `number`: Place at a specific line index (1-indexed, can be negative)
+ * - `{ span: number }`: Span a specified number of tracks
+ *
+ * @example
+ * ```typescript
+ * import type { GridPlacement, Line } from 'taffy-js';
+ *
+ * // Line index (CSS: grid-row-start: 2)
+ * const lineIndex: GridPlacement = 2;
+ *
+ * // Auto placement (CSS: grid-row-start: auto)
+ * const auto: GridPlacement = "auto";
+ *
+ * // Span (CSS: grid-row-start: span 3)
+ * const span: GridPlacement = { span: 3 };
+ *
+ * // Named line (CSS: grid-row-start: header 2)
+ * const named: GridPlacement = { line: 2, ident: "header" };
+ *
+ * // Named span (CSS: grid-row-start: span 2 header)
+ * const namedSpan: GridPlacement = { span: 2, ident: "header" };
+ * ```
+ */
+export type GridPlacement = "auto" | number | {line: number; ident: string} | {span: number; ident?: string};
+
+/**
+ * Line type representing start and end positions.
+ *
+ * A container for start and end values, used for CSS grid-row and grid-column
+ * shorthand properties.
+ *
+ * @typeParam T - The type of start and end values
+ *
+ * @property start - The starting line/position
+ * @property end - The ending line/position
+ *
+ * @example
+ * ```typescript
+ * import { Style, Display, type Line, type GridPlacement } from 'taffy-js';
+ *
+ * const style = new Style();
+ * style.display = Display.Grid;
+ *
+ * // CSS: grid-row: 1 / 3
+ * style.gridRow = { start: 1, end: 3 };
+ *
+ * // CSS: grid-column: 1 / span 2
+ * style.gridColumn = { start: 1, end: { span: 2 } };
+ *
+ * // CSS: grid-row: auto / auto
+ * style.gridRow = { start: "auto", end: "auto" };
+ * ```
+ */
+export type Line<T> = {
+  /** The starting position (CSS: *-start) */
+  start: T;
+  /** The ending position (CSS: *-end) */
+  end: T;
 }
+/**
+ * Grid track repetition parameter.
+ *
+ * Defines how many times a track pattern should repeat.
+ *
+ * @remarks
+ * - `number`: Exact number of repetitions (e.g. `repeat(3, ...)`).
+ * - `"autoFill"`: Fills the container with as many tracks as possible.
+ * - `"autoFit"`: Fills the container, collapsing empty tracks.
+ */
+export type RepetitionCount = number | "auto-fill" | "auto-fit";
+
+/**
+ * Minumum track sizing function.
+ *
+ * Defines the minimum size of a grid track.
+ */
+export type MinTrackSizingFunction = number | `${number}%` | "auto" | "min-content" | "max-content";
+
+/**
+ * Maximum track sizing function.
+ *
+ * Defines the maximum size of a grid track.
+ */
+export type MaxTrackSizingFunction = number | `${number}%` | `${number}fr` | "auto" | "min-content" | "max-content" | "fit-content";
+
+/**
+ * Track sizing function (min/max pair).
+ *
+ * Defines the size range for a single grid track.
+ */
+export type TrackSizingFunction = {min: MinTrackSizingFunction; max: MaxTrackSizingFunction};
+
+/**
+ * Grid track repetition definition.
+ */
+export type GridTemplateRepetition = {
+  count: RepetitionCount;
+  tracks: TrackSizingFunction[];
+  lineNames?: string[][];
+};
+
+/**
+ * Grid track sizing definition.
+ *
+ * Can be a single track sizing function or a repetition of tracks.
+ */
+export type GridTemplateComponent = TrackSizingFunction | GridTemplateRepetition;
+
+/**
+ * Named grid area definition.
+ * 
+ * Defines a named area within the grid and its boundaries.
+ */
+export type GridTemplateArea = {
+  /** The name of the grid area */
+  name: string;
+  /** Start row line */
+  rowStart: number;
+  /** End row line */
+  rowEnd: number;
+  /** Start column line */
+  columnStart: number;
+  /** End column line */
+  columnEnd: number;
+};
 
 
 
@@ -417,8 +560,9 @@ export interface DetailedGridItemsInfo {
  *
  * @example
  * ```typescript
- * import { AlignContent, FlexWrap } from 'taffy-js';
+ * import { Style, AlignContent, FlexWrap } from 'taffy-js';
  *
+ * const style = new Style();
  * style.flexWrap = FlexWrap.Wrap;
  * style.alignContent = AlignContent.SpaceBetween;  // Distribute lines evenly
  * ```
@@ -470,8 +614,9 @@ export enum AlignContent {
  *
  * @example
  * ```typescript
- * import { AlignItems } from 'taffy-js';
+ * import { Style, AlignItems } from 'taffy-js';
  *
+ * const style = new Style();
  * style.alignItems = AlignItems.Center;   // Center items on cross axis
  * style.alignItems = AlignItems.Stretch;  // Stretch items to fill container
  * ```
@@ -515,8 +660,9 @@ export enum AlignItems {
  *
  * @example
  * ```typescript
- * import { AlignSelf } from 'taffy-js';
+ * import { Style, AlignSelf } from 'taffy-js';
  *
+ * const style = new Style();
  * style.alignSelf = AlignSelf.Auto;    // Use parent's align-items
  * style.alignSelf = AlignSelf.Center;  // Override to center this item
  * ```
@@ -564,8 +710,9 @@ export enum AlignSelf {
  *
  * @example
  * ```typescript
- * import { BoxSizing } from 'taffy-js';
+ * import { Style, BoxSizing } from 'taffy-js';
  *
+ * const style = new Style();
  * style.boxSizing = BoxSizing.BorderBox;   // Size includes padding and border
  * style.boxSizing = BoxSizing.ContentBox;  // Size is content only
  * ```
@@ -589,8 +736,9 @@ export enum BoxSizing {
  *
  * @example
  * ```typescript
- * import { Display } from 'taffy-js';
+ * import { Style, Display } from 'taffy-js';
  *
+ * const style = new Style();
  * style.display = Display.Flex;  // Enable flexbox layout
  * style.display = Display.Grid;  // Enable grid layout
  * style.display = Display.None;  // Hide element from layout
@@ -623,8 +771,9 @@ export enum Display {
  *
  * @example
  * ```typescript
- * import { FlexDirection } from 'taffy-js';
+ * import { Style, FlexDirection } from 'taffy-js';
  *
+ * const style = new Style();
  * style.flexDirection = FlexDirection.Row;     // Horizontal, left to right
  * style.flexDirection = FlexDirection.Column;  // Vertical, top to bottom
  * ```
@@ -656,8 +805,9 @@ export enum FlexDirection {
  *
  * @example
  * ```typescript
- * import { FlexWrap } from 'taffy-js';
+ * import { Style, FlexWrap } from 'taffy-js';
  *
+ * const style = new Style();
  * style.flexWrap = FlexWrap.NoWrap;  // All items on single line
  * style.flexWrap = FlexWrap.Wrap;    // Items wrap to new lines
  * ```
@@ -677,6 +827,41 @@ export enum FlexWrap {
   WrapReverse = 2,
 }
 
+/**
+ * Grid auto flow enumeration
+ *
+ * Controls whether grid items are placed row-wise or column-wise, and whether
+ * the sparse or dense packing algorithm is used.
+ *
+ * @example
+ * ```typescript
+ * import { Style, GridAutoFlow } from 'taffy-js';
+ *
+ * const style = new Style();
+ * style.gridAutoFlow = GridAutoFlow.Row;       // Fill rows first
+ * style.gridAutoFlow = GridAutoFlow.Column;    // Fill columns first
+ * style.gridAutoFlow = GridAutoFlow.RowDense;  // Fill rows, pack densely
+ * ```
+ */
+export enum GridAutoFlow {
+  /**
+   * Items are placed by filling each row in turn, adding new rows as necessary
+   */
+  Row = 0,
+  /**
+   * Items are placed by filling each column in turn, adding new columns as necessary
+   */
+  Column = 1,
+  /**
+   * Combines `Row` with the dense packing algorithm
+   */
+  RowDense = 2,
+  /**
+   * Combines `Column` with the dense packing algorithm
+   */
+  ColumnDense = 3,
+}
+
 /**
  * Main axis alignment enumeration
  *
@@ -685,8 +870,9 @@ export enum FlexWrap {
  *
  * @example
  * ```typescript
- * import { JustifyContent } from 'taffy-js';
+ * import { Style, JustifyContent } from 'taffy-js';
  *
+ * const style = new Style();
  * style.justifyContent = JustifyContent.Center;        // Center items
  * style.justifyContent = JustifyContent.SpaceBetween;  // Distribute evenly
  * ```
@@ -738,6 +924,11 @@ export enum JustifyContent {
  * 
  * @example
  * ```typescript
+ * const tree = new TaffyTree();
+ * const rootId = tree.newLeaf(new Style());
+ * const node = rootId;
+ * 
+ * tree.computeLayout(rootId, { width: 800, height: 600 });
  * const layout = tree.getLayout(node);
  * 
  * console.log("Position:", layout.x, layout.y);
@@ -917,8 +1108,9 @@ export class Layout {
  *
  * @example
  * ```typescript
- * import { Overflow } from 'taffy-js';
+ * import { Style, Overflow } from 'taffy-js';
  *
+ * const style = new Style();
  * style.overflow = { x: Overflow.Hidden, y: Overflow.Scroll };
  * ```
  */
@@ -949,8 +1141,9 @@ export enum Overflow {
  *
  * @example
  * ```typescript
- * import { Position } from 'taffy-js';
+ * import { Style, Position } from 'taffy-js';
  *
+ * const style = new Style();
  * style.position = Position.Relative;  // Normal document flow
  * style.position = Position.Absolute;  // Removed from flow, uses inset values
  * ```
@@ -1042,6 +1235,16 @@ export class Style {
    * @returns - A `Rect<LengthPercentageAuto>` with left, right, top, bottom margins
    */
   margin: Rect<LengthPercentageAuto>;
+  /**
+   * Gets the text-align property
+   *
+   * Used by block layout to implement legacy text alignment behavior.
+   *
+   * @returns - The current [`TextAlign`](JsTextAlign) value
+   *
+   * @defaultValue - `TextAlign.Auto`
+   */
+  textAlign: TextAlign;
   /**
    * Gets the align-items property
    *
@@ -1059,6 +1262,15 @@ export class Style {
    * @returns - The flex shrink factor (default: 1)
    */
   flexShrink: number;
+  /**
+   * Gets the grid-column property
+   *
+   * Defines which column in the grid the item should start and end at.
+   * Corresponds to CSS `grid-column` shorthand.
+   *
+   * @returns - A `Line<GridPlacement>` with start and end placements
+   */
+  gridColumn: Line<GridPlacement>;
   /**
    * Gets the display mode
    *
@@ -1085,6 +1297,23 @@ export class Style {
    * @returns - The aspect ratio value, or `undefined` if not set
    */
   aspectRatio: number | undefined;
+  /**
+   * Gets the justify-self property
+   *
+   * Overrides the parent's justify-items for this specific element in the inline axis.
+   *
+   * @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set)
+   */
+  justifySelf: AlignSelf | undefined;
+  /**
+   * Gets the grid-row property
+   *
+   * Defines which row in the grid the item should start and end at.
+   * Corresponds to CSS `grid-row` shorthand.
+   *
+   * @returns - A `Line<GridPlacement>` with start and end placements
+   */
+  gridRow: Line<GridPlacement>;
   /**
    * Gets the maximum size constraints
    *
@@ -1123,6 +1352,25 @@ export class Style {
    * @returns - The current [`AlignContent`](JsAlignContent) value, or `undefined` if not set
    */
   alignContent: AlignContent | undefined;
+  /**
+   * Gets whether this item is a table
+   *
+   * Table children are handled specially in block layout.
+   *
+   * @returns - Whether the item is treated as a table
+   *
+   * @defaultValue - `false`
+   */
+  itemIsTable: boolean;
+  /**
+   * Gets the justify-items property
+   *
+   * Defines the default justify-self for all children in the inline axis.
+   * This is primarily used for CSS Grid layout.
+   *
+   * @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set
+   */
+  justifyItems: AlignItems | undefined;
   /**
    * Gets the flex grow factor
    *
@@ -1152,6 +1400,24 @@ export class Style {
    * @defaultValue - `FlexDirection.Row`
    */
   flexDirection: FlexDirection;
+  /**
+   * Gets the grid-auto-flow property
+   *
+   * Controls how auto-placed items are inserted into the grid.
+   *
+   * @returns - The current [`GridAutoFlow`](JsGridAutoFlow) value
+   *
+   * @defaultValue - `GridAutoFlow.Row`
+   */
+  gridAutoFlow: GridAutoFlow;
+  /**
+   * Gets the grid-auto-rows property
+   *
+   * Defines the size of implicitly created rows.
+   *
+   * @returns - An array of track sizing functions
+   */
+  gridAutoRows: TrackSizingFunction[];
   /**
    * Gets the justify-content property
    *
@@ -1160,6 +1426,74 @@ export class Style {
    * @returns - The current [`JustifyContent`](JsJustifyContent) value, or `undefined` if not set
    */
   justifyContent: JustifyContent | undefined;
+  /**
+   * Gets the scrollbar width
+   *
+   * The width of the scrollbar gutter when `overflow` is set to `Scroll`.
+   *
+   * @returns - The scrollbar width in pixels
+   *
+   * @defaultValue - `0`
+   */
+  scrollbarWidth: number;
+  /**
+   * Gets whether this item is a replaced element
+   *
+   * Replaced elements have special sizing behavior (e.g., `<img>`, `<video>`).
+   *
+   * @returns - Whether the item is a replaced element
+   *
+   * @defaultValue - `false`
+   */
+  itemIsReplaced: boolean;
+  /**
+   * Gets the grid-auto-columns property
+   *
+   * Defines the size of implicitly created columns.
+   *
+   * @returns - An array of track sizing functions
+   */
+  gridAutoColumns: TrackSizingFunction[];
+  /**
+   * Gets the grid-template-rows property
+   *
+   * Defines the track sizing functions (heights) of the grid rows.
+   *
+   * @returns - An array of `GridTrack` values
+   */
+  gridTemplateRows: GridTemplateComponent[];
+  /**
+   * Gets the grid-template-areas property
+   *
+   * Defines named grid areas that can be referenced by grid items.
+   *
+   * @returns - An array of `GridArea` values
+   */
+  gridTemplateAreas: GridTemplateArea[];
+  /**
+   * Gets the grid-template-columns property
+   *
+   * Defines the track sizing functions (widths) of the grid columns.
+   *
+   * @returns - An array of `GridTrack` values
+   */
+  gridTemplateColumns: GridTemplateComponent[];
+  /**
+   * Gets the grid-template-row-names property
+   *
+   * Defines the named lines between the rows.
+   *
+   * @returns - An array of arrays of line names
+   */
+  gridTemplateRowNames: string[][];
+  /**
+   * Gets the grid-template-column-names property
+   *
+   * Defines the named lines between the columns.
+   *
+   * @returns - An array of arrays of line names
+   */
+  gridTemplateColumnNames: string[][];
   /**
    * Gets the gap
    *
@@ -1193,6 +1527,8 @@ export class Style {
  * @example
  * ```typescript
  * try {
+ *  const tree = new TaffyTree();
+ *  const node = tree.newLeaf(new Style());
  *  tree.remove(node);
  * } catch (e) {
  *   if (e instanceof TaffyError) {
@@ -1246,6 +1582,11 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
+   * const nodeId = rootId;
+   * const availableSpace = { width: 100, height: 100 };
+   *
    * // After updating text content
    * tree.setNodeContext(nodeId, { text: "Updated text" });
    * tree.markDirty(nodeId);
@@ -1263,6 +1604,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
    * tree.printTree(rootId);
    * // Output appears in browser console
    * ```
@@ -1279,6 +1622,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
    * const count: number = tree.childCount(parentId);
    * ```
    */
@@ -1295,6 +1640,10 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
+   * tree.addChild(parentId, childId);
    * tree.removeChild(parentId, childId);
    * ```
    */
@@ -1311,6 +1660,11 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const child1 = tree.newLeaf(new Style());
+   * const child2 = tree.newLeaf(new Style());
+   * const child3 = tree.newLeaf(new Style());
    * const children = BigUint64Array.from([child1, child2, child3]);
    * tree.setChildren(parentId, children);
    * ```
@@ -1337,28 +1691,33 @@ export class TaffyTree {
    * to compute layouts for all nodes in the tree.
    *
    * @param node - The root node ID to compute layout for
-   * @param available_space - The available space constraints
+   * @param availableSpace - The available space constraints
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
+   *
    * // Fixed size container
-   * { width: 800, height: 600 }
+   * tree.computeLayout(rootId, { width: 800, height: 600 });
    *
    * // Flexible width, fixed height
-   * { width: "maxContent", height: 600 }
+   * tree.computeLayout(rootId, { width: "max-content", height: 600 });
    *
    * // Minimum content size
-   * { width: "minContent", height: "minContent" }
+   * tree.computeLayout(rootId, { width: "min-content", height: "min-content" });
    * ```
    *
    * @throws `TaffyError` if the node does not exist or available space is invalid
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
    * tree.computeLayout(rootId, { width: 800, height: 600 });
    * ```
    */
-  computeLayout(node: bigint, available_space: Size<AvailableSpace>): void;
+  computeLayout(node: bigint, availableSpace: Size<AvailableSpace>): void;
   /**
    * Enables rounding of layout values to whole pixels
    *
@@ -1368,6 +1727,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * tree.enableRounding();
    * ```
    */
@@ -1381,6 +1741,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const node = tree.newLeaf(new Style());
    * tree.disableRounding();
    * const layout = tree.getLayout(node);
    * console.log(layout.x);
@@ -1396,6 +1758,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * interface Context { text: string };
    * const context = tree.getNodeContext(nodeId) as Context | undefined;
    * if (context) {
@@ -1417,6 +1781,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * interface Context { text: string };
    * tree.setNodeContext(nodeId, { text: "Updated text" } as Context);
    * ```
@@ -1429,6 +1795,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * const count: number = tree.totalNodeCount();
    * ```
    */
@@ -1445,6 +1812,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * const layout: Layout = tree.unroundedLayout(nodeId);
    * console.log(`Exact width: ${layout.width}`);
    * ```
@@ -1465,6 +1834,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * const containerStyle = new Style();
    * containerStyle.display = Display.Flex;
    *
@@ -1490,10 +1860,28 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
+   * tree.addChild(parentId, childId);
    * const firstChild: bigint = tree.getChildAtIndex(parentId, 0);
    * ```
    */
   getChildAtIndex(parent: bigint, index: number): bigint;
+  /**
+   * Gets detailed layout information for grid layouts
+   *
+   * @note
+   * This method is only available when the `detailed_layout_info`
+   * feature is enabled.
+   *
+   * @param node - The node ID
+   *
+   * @returns - Detailed grid info or "None" for non-grid nodes
+   *
+   * @throws `TaffyError` if the node does not exist
+   */
+  detailedLayoutInfo(node: bigint): any;
   /**
    * Gets a mutable reference to the context value for a node
    *
@@ -1516,6 +1904,9 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
    * tree.insertChildAtIndex(parentId, 0, childId);
    * ```
    */
@@ -1536,6 +1927,7 @@ export class TaffyTree {
    * ```typescript
    * interface TextContext { text: string; isBold: boolean; }
    *
+   * const tree = new TaffyTree();
    * const style = new Style();
    * const context: TextContext = { text: "Hello, World!", isBold: true };
    * const nodeId: bigint = tree.newLeafWithContext(style, context);
@@ -1554,6 +1946,10 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
+   * tree.addChild(parentId, childId);
    * const removedId: bigint = tree.removeChildAtIndex(parentId, 0);
    * ```
    */
@@ -1564,23 +1960,30 @@ export class TaffyTree {
    * Removes children from `start_index` (inclusive) to `end_index` (exclusive).
    *
    * @param parent - The parent node ID
-   * @param start_index - Start of range (inclusive)
-   * @param end_index - End of range (exclusive)
+   * @param startIndex - Start of range (inclusive)
+   * @param endIndex - End of range (exclusive)
    *
    * @throws `TaffyError` if the parent node does not exist or range is invalid
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const child1 = tree.newLeaf(new Style());
+   * const child2 = tree.newLeaf(new Style());
+   * const child3 = tree.newLeaf(new Style());
+   * tree.setChildren(parentId, BigUint64Array.from([child1, child2, child3]));
+   *
    * tree.removeChildrenRange(parentId, 1, 3);
    * ```
    */
-  removeChildrenRange(parent: bigint, start_index: number, end_index: number): void;
+  removeChildrenRange(parent: bigint, startIndex: number, endIndex: number): void;
   /**
    * Replaces a child at a specific index
    *
    * @param parent - The parent node ID
    * @param index - The index of the child to replace (0-based)
-   * @param new_child - The new child node ID
+   * @param newChild - The new child node ID
    *
    * @returns - The replaced (old) child ID (`bigint`)
    *
@@ -1588,10 +1991,18 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const oldChild = tree.newLeaf(new Style());
+   * const newChildId = tree.newLeaf(new Style());
+   * tree.addChild(parentId, oldChild);
+   * const child = tree.newLeaf(new Style()); // filler child at index 0 if needed, but index 1 implies 2 children
+   * tree.insertChildAtIndex(parentId, 0, child);
+   *
    * const oldChildId: bigint = tree.replaceChildAtIndex(parentId, 1, newChildId);
    * ```
    */
-  replaceChildAtIndex(parent: bigint, index: number, new_child: bigint): bigint;
+  replaceChildAtIndex(parent: bigint, index: number, newChild: bigint): bigint;
   /**
    * Computes layout with a custom measure function for leaf nodes
    *
@@ -1600,19 +2011,24 @@ export class TaffyTree {
    * called for each leaf node that needs measurement.
    *
    * @param node - The root node ID to compute layout for
-   * @param available_space - The available space constraints
-   * @param measure_func - A function that measures leaf node content
+   * @param availableSpace - The available space constraints
+   * @param measureFunc - A function that measures leaf node content
    *
    * @throws `TaffyError` if the node does not exist or available space is invalid
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
+   *
+   * const measureText = (text: string, width: number) => ({ width: 0, height: 0 });
+   *
    * tree.computeLayoutWithMeasure(
    *   rootId,
-   *   { width: 800, height: "maxContent" },
+   *   { width: 800, height: "max-content" },
    *   (known, available, node, context, style) => {
    *     if (context?.text) {
-   *       const measured = measureText(context.text, available.width);
+   *       const measured = measureText(context.text, available.width as number);
    *       return { width: measured.width, height: measured.height };
    *     }
    *     return { width: 0, height: 0 };
@@ -1620,7 +2036,7 @@ export class TaffyTree {
    * );
    * ```
    */
-  computeLayoutWithMeasure(node: bigint, available_space: Size<AvailableSpace>, measure_func: MeasureFunction): void;
+  computeLayoutWithMeasure(node: bigint, availableSpace: Size<AvailableSpace>, measureFunc: MeasureFunction): void;
   /**
    * Gets context values for multiple nodes at once
    *
@@ -1633,6 +2049,9 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const id1 = tree.newLeaf(new Style());
+   * const id2 = tree.newLeaf(new Style());
    * const nodes = BigUint64Array.from([id1, id2]);
    * const contexts = tree.getDisjointNodeContextMut(nodes);
    * ```
@@ -1658,6 +2077,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * tree.clear();
    * console.log(tree.totalNodeCount());
    * ```
@@ -1677,6 +2097,11 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const rootId = tree.newLeaf(new Style());
+   * const nodeId = rootId;
+   * const availableSpace = { width: 100, height: 100 };
+   *
    * if (tree.dirty(nodeId)) {
    *   tree.computeLayout(rootId, availableSpace);
    * }
@@ -1694,6 +2119,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * const style: Style = tree.getStyle(nodeId);
    * console.log('Flex grow:', style.flexGrow);
    * ```
@@ -1713,6 +2140,12 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const style = new Style();
+   * style.size = { width: 100, height: 100 };
+   * const rootId = tree.newLeaf(style);
+   * const nodeId = rootId;
+   *
    * tree.computeLayout(rootId, { width: 800, height: 600 });
    * const layout: Layout = tree.getLayout(nodeId);
    * console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
@@ -1728,7 +2161,11 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
-   * const parentId: bigint | undefined = tree.parent(childId);
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
+   * tree.addChild(parentId, childId);
+   * const parent: bigint | undefined = tree.parent(childId);
    * ```
    */
   parent(child: bigint): bigint | undefined;
@@ -1746,6 +2183,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * try {
    *   const removedId: bigint = tree.remove(nodeId);
    * } catch (e) {
@@ -1765,6 +2204,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
    * const children: BigUint64Array = tree.children(parentId);
    * ```
    */
@@ -1781,6 +2222,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * const style = new Style();
    * style.size = { width: 100, height: 50 };
    * const nodeId: bigint = tree.newLeaf(style);
@@ -1799,6 +2241,9 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
+   * const childId = tree.newLeaf(new Style());
    * tree.addChild(parentId, childId);
    * ```
    */
@@ -1816,6 +2261,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const nodeId = tree.newLeaf(new Style());
    * const newStyle = new Style();
    * newStyle.flexGrow = 2;
    * tree.setStyle(nodeId, newStyle);
@@ -1824,6 +2271,39 @@ export class TaffyTree {
   setStyle(node: bigint, style: Style): void;
 }
 
+/**
+ * Text alignment enumeration (for block layout)
+ *
+ * Used by block layout to implement the legacy behaviour of `<center>` and
+ * `<div align="left | right | center">`.
+ *
+ * @example
+ * ```typescript
+ * import { Style, TextAlign } from 'taffy-js';
+ *
+ * const style = new Style();
+ * style.textAlign = TextAlign.LegacyCenter;  // Center block children
+ * ```
+ */
+export enum TextAlign {
+  /**
+   * No special legacy text align behaviour
+   */
+  Auto = 0,
+  /**
+   * Corresponds to `-webkit-left` or `-moz-left` in browsers
+   */
+  LegacyLeft = 1,
+  /**
+   * Corresponds to `-webkit-right` or `-moz-right` in browsers
+   */
+  LegacyRight = 2,
+  /**
+   * Corresponds to `-webkit-center` or `-moz-center` in browsers
+   */
+  LegacyCenter = 3,
+}
+
 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
 
 export interface InitOutput {
@@ -1866,8 +2346,22 @@ export interface InitOutput {
   readonly style_flexShrink: (a: number) => number;
   readonly style_flexWrap: (a: number) => number;
   readonly style_gap: (a: number) => any;
+  readonly style_gridAutoColumns: (a: number) => any;
+  readonly style_gridAutoFlow: (a: number) => number;
+  readonly style_gridAutoRows: (a: number) => any;
+  readonly style_gridColumn: (a: number) => any;
+  readonly style_gridRow: (a: number) => any;
+  readonly style_gridTemplateAreas: (a: number) => any;
+  readonly style_gridTemplateColumnNames: (a: number) => any;
+  readonly style_gridTemplateColumns: (a: number) => any;
+  readonly style_gridTemplateRowNames: (a: number) => any;
+  readonly style_gridTemplateRows: (a: number) => any;
   readonly style_inset: (a: number) => any;
+  readonly style_itemIsReplaced: (a: number) => number;
+  readonly style_itemIsTable: (a: number) => number;
   readonly style_justifyContent: (a: number) => number;
+  readonly style_justifyItems: (a: number) => number;
+  readonly style_justifySelf: (a: number) => number;
   readonly style_margin: (a: number) => any;
   readonly style_maxSize: (a: number) => any;
   readonly style_minSize: (a: number) => any;
@@ -1875,6 +2369,7 @@ export interface InitOutput {
   readonly style_overflow: (a: number) => any;
   readonly style_padding: (a: number) => any;
   readonly style_position: (a: number) => number;
+  readonly style_scrollbarWidth: (a: number) => number;
   readonly style_set_alignContent: (a: number, b: any) => void;
   readonly style_set_alignItems: (a: number, b: any) => void;
   readonly style_set_alignSelf: (a: number, b: any) => void;
@@ -1888,16 +2383,33 @@ export interface InitOutput {
   readonly style_set_flexShrink: (a: number, b: number) => void;
   readonly style_set_flexWrap: (a: number, b: number) => void;
   readonly style_set_gap: (a: number, b: any) => void;
+  readonly style_set_gridAutoColumns: (a: number, b: any) => void;
+  readonly style_set_gridAutoFlow: (a: number, b: number) => void;
+  readonly style_set_gridAutoRows: (a: number, b: any) => void;
+  readonly style_set_gridColumn: (a: number, b: any) => void;
+  readonly style_set_gridRow: (a: number, b: any) => void;
+  readonly style_set_gridTemplateAreas: (a: number, b: any) => void;
+  readonly style_set_gridTemplateColumnNames: (a: number, b: any) => void;
+  readonly style_set_gridTemplateColumns: (a: number, b: any) => void;
+  readonly style_set_gridTemplateRowNames: (a: number, b: any) => void;
+  readonly style_set_gridTemplateRows: (a: number, b: any) => void;
   readonly style_set_inset: (a: number, b: any) => void;
+  readonly style_set_itemIsReplaced: (a: number, b: number) => void;
+  readonly style_set_itemIsTable: (a: number, b: number) => void;
   readonly style_set_justifyContent: (a: number, b: any) => void;
+  readonly style_set_justifyItems: (a: number, b: any) => void;
+  readonly style_set_justifySelf: (a: number, b: any) => void;
   readonly style_set_margin: (a: number, b: any) => void;
   readonly style_set_maxSize: (a: number, b: any) => void;
   readonly style_set_minSize: (a: number, b: any) => void;
   readonly style_set_overflow: (a: number, b: any) => void;
   readonly style_set_padding: (a: number, b: any) => void;
   readonly style_set_position: (a: number, b: number) => void;
+  readonly style_set_scrollbarWidth: (a: number, b: number) => void;
   readonly style_set_size: (a: number, b: any) => void;
+  readonly style_set_textAlign: (a: number, b: number) => void;
   readonly style_size: (a: number) => any;
+  readonly style_textAlign: (a: number) => number;
   readonly taffyerror_message: (a: number) => [number, number];
   readonly taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
   readonly taffytree_childCount: (a: number, b: bigint) => number;
@@ -1905,6 +2417,7 @@ export interface InitOutput {
   readonly taffytree_clear: (a: number) => void;
   readonly taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
   readonly taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
+  readonly taffytree_detailedLayoutInfo: (a: number, b: bigint) => [number, number, number];
   readonly taffytree_dirty: (a: number, b: bigint) => [number, number, number];
   readonly taffytree_disableRounding: (a: number) => void;
   readonly taffytree_enableRounding: (a: number) => void;