taffy-js 0.2.11 → 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,21 @@ 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.
@@ -428,9 +437,15 @@ export interface DetailedGridItemsInfo {
  *
  * // 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 | { span: number };
+export type GridPlacement = "auto" | number | {line: number; ident: string} | {span: number; ident?: string};
 
 /**
  * Line type representing start and end positions.
@@ -460,12 +475,78 @@ export type GridPlacement = "auto" | number | { span: number };
  * style.gridRow = { start: "auto", end: "auto" };
  * ```
  */
-export interface Line<T> {
+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;
+};
 
 
 
@@ -479,8 +560,9 @@ export interface Line<T> {
  *
  * @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
  * ```
@@ -532,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
  * ```
@@ -577,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
  * ```
@@ -626,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
  * ```
@@ -651,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
@@ -685,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
  * ```
@@ -718,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
  * ```
@@ -747,8 +835,9 @@ export enum FlexWrap {
  *
  * @example
  * ```typescript
- * import { GridAutoFlow } from 'taffy-js';
+ * 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
@@ -781,8 +870,9 @@ export enum GridAutoFlow {
  *
  * @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
  * ```
@@ -834,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);
@@ -1013,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 };
  * ```
  */
@@ -1045,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
  * ```
@@ -1320,7 +1417,7 @@ export class Style {
    *
    * @returns - An array of track sizing functions
    */
-  gridAutoRows: any;
+  gridAutoRows: TrackSizingFunction[];
   /**
    * Gets the justify-content property
    *
@@ -1356,16 +1453,15 @@ export class Style {
    *
    * @returns - An array of track sizing functions
    */
-  gridAutoColumns: any;
+  gridAutoColumns: TrackSizingFunction[];
   /**
    * Gets the grid-template-rows property
    *
    * Defines the track sizing functions (heights) of the grid rows.
-   * Returns Taffy's native serialization format.
    *
    * @returns - An array of `GridTrack` values
    */
-  gridTemplateRows: GridTrack[];
+  gridTemplateRows: GridTemplateComponent[];
   /**
    * Gets the grid-template-areas property
    *
@@ -1373,7 +1469,7 @@ export class Style {
    *
    * @returns - An array of `GridArea` values
    */
-  gridTemplateAreas: GridArea[];
+  gridTemplateAreas: GridTemplateArea[];
   /**
    * Gets the grid-template-columns property
    *
@@ -1381,7 +1477,7 @@ export class Style {
    *
    * @returns - An array of `GridTrack` values
    */
-  gridTemplateColumns: GridTrack[];
+  gridTemplateColumns: GridTemplateComponent[];
   /**
    * Gets the grid-template-row-names property
    *
@@ -1431,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) {
@@ -1484,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);
@@ -1501,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
    * ```
@@ -1517,6 +1622,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
    * const count: number = tree.childCount(parentId);
    * ```
    */
@@ -1533,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);
    * ```
    */
@@ -1549,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);
    * ```
@@ -1575,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
    *
@@ -1606,6 +1727,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * tree.enableRounding();
    * ```
    */
@@ -1619,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);
@@ -1634,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) {
@@ -1655,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);
    * ```
@@ -1667,6 +1795,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * const count: number = tree.totalNodeCount();
    * ```
    */
@@ -1683,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}`);
    * ```
@@ -1703,6 +1834,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * const containerStyle = new Style();
    * containerStyle.display = Display.Flex;
    *
@@ -1728,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
    *
@@ -1754,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);
    * ```
    */
@@ -1774,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);
@@ -1792,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);
    * ```
    */
@@ -1802,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`)
    *
@@ -1826,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
    *
@@ -1838,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 };
@@ -1858,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
    *
@@ -1871,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);
    * ```
@@ -1896,6 +2077,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
    * tree.clear();
    * console.log(tree.totalNodeCount());
    * ```
@@ -1915,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);
    * }
@@ -1932,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);
    * ```
@@ -1951,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}`);
@@ -1966,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;
@@ -1984,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) {
@@ -2003,6 +2204,8 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
+   * const tree = new TaffyTree();
+   * const parentId = tree.newLeaf(new Style());
    * const children: BigUint64Array = tree.children(parentId);
    * ```
    */
@@ -2019,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);
@@ -2037,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);
    * ```
    */
@@ -2054,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);
@@ -2070,8 +2279,9 @@ export class TaffyTree {
  *
  * @example
  * ```typescript
- * import { TextAlign } from 'taffy-js';
+ * import { Style, TextAlign } from 'taffy-js';
  *
+ * const style = new Style();
  * style.textAlign = TextAlign.LegacyCenter;  // Center block children
  * ```
  */
@@ -2207,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;