taffy-js 0.2.10 → 0.2.12

package/pkg/taffy_wasm.js

@@ -245,8 +245,9 @@ const TaffyTreeFinalization = (typeof FinalizationRegistry === 'undefined')
  *
  * @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
  * ```
@@ -299,8 +300,9 @@ export const AlignContent = Object.freeze({
  *
  * @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
  * ```
@@ -345,8 +347,9 @@ export const AlignItems = Object.freeze({
  *
  * @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
  * ```
@@ -395,8 +398,9 @@ export const AlignSelf = Object.freeze({
  *
  * @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
  * ```
@@ -421,8 +425,9 @@ export const BoxSizing = Object.freeze({
  *
  * @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
@@ -456,8 +461,9 @@ export const Display = Object.freeze({
  *
  * @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
  * ```
@@ -490,8 +496,9 @@ export const FlexDirection = Object.freeze({
  *
  * @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
  * ```
@@ -512,6 +519,42 @@ export const FlexWrap = Object.freeze({
     WrapReverse: 2, "2": "WrapReverse",
 });
 
+/**
+ * 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
+ * ```
+ * @enum {0 | 1 | 2 | 3}
+ */
+export const GridAutoFlow = Object.freeze({
+    /**
+     * Items are placed by filling each row in turn, adding new rows as necessary
+     */
+    Row: 0, "0": "Row",
+    /**
+     * Items are placed by filling each column in turn, adding new columns as necessary
+     */
+    Column: 1, "1": "Column",
+    /**
+     * Combines `Row` with the dense packing algorithm
+     */
+    RowDense: 2, "2": "RowDense",
+    /**
+     * Combines `Column` with the dense packing algorithm
+     */
+    ColumnDense: 3, "3": "ColumnDense",
+});
+
 /**
  * Main axis alignment enumeration
  *
@@ -520,8 +563,9 @@ export const FlexWrap = Object.freeze({
  *
  * @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
  * ```
@@ -574,6 +618,11 @@ export const JustifyContent = Object.freeze({
  *
  * @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);
@@ -852,8 +901,9 @@ if (Symbol.dispose) Layout.prototype[Symbol.dispose] = Layout.prototype.free;
  *
  * @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 };
  * ```
  * @enum {0 | 1 | 2 | 3}
@@ -885,8 +935,9 @@ export const Overflow = Object.freeze({
  *
  * @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
  * ```
@@ -984,6 +1035,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.border = { left: 1, right: 1, top: 1, bottom: 1 };
      * ```
      * @param {Rect<LengthPercentage>} val
@@ -998,6 +1050,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.margin = { left: 10, right: 10, top: 5, bottom: 5 };
      * ```
      * @param {Rect<LengthPercentageAuto>} val
@@ -1005,6 +1058,20 @@ export class Style {
     set margin(val) {
         wasm.style_set_margin(this.__wbg_ptr, val);
     }
+    /**
+     * Gets the text-align property
+     *
+     * Used by block layout to implement legacy text alignment behavior.
+     *
+     * @returns - The current [`TextAlign`](JsTextAlign) value
+     *
+     * @defaultValue - `TextAlign.Auto`
+     * @returns {TextAlign}
+     */
+    get textAlign() {
+        const ret = wasm.style_textAlign(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the align-items property
      *
@@ -1030,6 +1097,19 @@ export class Style {
         const ret = wasm.style_flexShrink(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * 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
+     * @returns {Line<GridPlacement>}
+     */
+    get gridColumn() {
+        const ret = wasm.style_gridColumn(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the display mode
      *
@@ -1038,6 +1118,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.display = Display.Flex;
      * ```
      * @param {Display} val
@@ -1052,6 +1133,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.padding = { left: 20, right: 20, top: 10, bottom: 10 };
      * ```
      * @param {Rect<LengthPercentage>} val
@@ -1071,6 +1153,37 @@ export class Style {
         const ret = wasm.style_aspectRatio(this.__wbg_ptr);
         return ret === 0x100000001 ? undefined : ret;
     }
+    /**
+     * 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)
+     * @returns {AlignSelf | undefined}
+     */
+    get justifySelf() {
+        const ret = wasm.style_justifySelf(this.__wbg_ptr);
+        return ret === 8 ? undefined : ret;
+    }
+    /**
+     * Sets the grid-row property
+     *
+     * @param val - A Line object with start and end GridPlacement values
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * // CSS: grid-row: 1 / 3
+     * style.gridRow = { start: 1, end: 3 };
+     * // CSS: grid-row: 2 / span 2
+     * style.gridRow = { start: 2, end: { span: 2 } };
+     * ```
+     * @param {Line<GridPlacement>} val
+     */
+    set gridRow(val) {
+        wasm.style_set_gridRow(this.__wbg_ptr, val);
+    }
     /**
      * Sets the maximum size constraints
      *
@@ -1078,6 +1191,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.maxSize = { width: "auto", height: 500 };
      * ```
      * @param {Size<Dimension>} val
@@ -1092,6 +1206,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.minSize = { width: 100, height: "auto" };
      * ```
      * @param {Size<Dimension>} val
@@ -1106,6 +1221,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.overflow = { x: Overflow.Hidden, y: Overflow.Scroll };
      * ```
      * @param {Point<Overflow>} val
@@ -1121,6 +1237,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.position = Position.Absolute;
      * style.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
      * ```
@@ -1141,6 +1258,33 @@ export class Style {
         const ret = wasm.style_alignContent(this.__wbg_ptr);
         return ret === 9 ? undefined : ret;
     }
+    /**
+     * 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`
+     * @returns {boolean}
+     */
+    get itemIsTable() {
+        const ret = wasm.style_itemIsTable(this.__wbg_ptr);
+        return ret !== 0;
+    }
+    /**
+     * 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
+     * @returns {AlignItems | undefined}
+     */
+    get justifyItems() {
+        const ret = wasm.style_justifyItems(this.__wbg_ptr);
+        return ret === 7 ? undefined : ret;
+    }
     /**
      * Sets the flex grow factor
      *
@@ -1148,6 +1292,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.flexGrow = 2;
      * ```
      * @param {number} val
@@ -1163,6 +1308,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.flexWrap = FlexWrap.Wrap;
      * ```
      * @param {FlexWrap} val
@@ -1184,6 +1330,32 @@ export class Style {
         const ret = wasm.style_flexDirection(this.__wbg_ptr);
         return ret;
     }
+    /**
+     * 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`
+     * @returns {GridAutoFlow}
+     */
+    get gridAutoFlow() {
+        const ret = wasm.style_gridAutoFlow(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Gets the grid-auto-rows property
+     *
+     * Defines the size of implicitly created rows.
+     *
+     * @returns - An array of track sizing functions
+     * @returns {TrackSizingFunction[]}
+     */
+    get gridAutoRows() {
+        const ret = wasm.style_gridAutoRows(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the align-self property
      *
@@ -1191,6 +1363,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.alignSelf = AlignSelf.Stretch;
      * ```
      * @param {AlignSelf | undefined} val
@@ -1205,6 +1378,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.boxSizing = BoxSizing.ContentBox;
      * ```
      * @param {BoxSizing} val
@@ -1219,6 +1393,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.flexBasis = 100;
      * ```
      * @param {Dimension} val
@@ -1226,6 +1401,21 @@ export class Style {
     set flexBasis(val) {
         wasm.style_set_flexBasis(this.__wbg_ptr, val);
     }
+    /**
+     * Sets the text-align property
+     *
+     * @param val - The new text-align value
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.textAlign = TextAlign.LegacyCenter;
+     * ```
+     * @param {TextAlign} val
+     */
+    set textAlign(val) {
+        wasm.style_set_textAlign(this.__wbg_ptr, val);
+    }
     /**
      * Gets the justify-content property
      *
@@ -1238,6 +1428,20 @@ export class Style {
         const ret = wasm.style_justifyContent(this.__wbg_ptr);
         return ret === 9 ? undefined : ret;
     }
+    /**
+     * Gets the scrollbar width
+     *
+     * The width of the scrollbar gutter when `overflow` is set to `Scroll`.
+     *
+     * @returns - The scrollbar width in pixels
+     *
+     * @defaultValue - `0`
+     * @returns {number}
+     */
+    get scrollbarWidth() {
+        const ret = wasm.style_scrollbarWidth(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the align-items property
      *
@@ -1245,6 +1449,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.alignItems = AlignItems.Center;
      * ```
      * @param {AlignItems | undefined} val
@@ -1259,6 +1464,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.flexShrink = 2;
      * ```
      * @param {number} val
@@ -1266,6 +1472,39 @@ export class Style {
     set flexShrink(val) {
         wasm.style_set_flexShrink(this.__wbg_ptr, val);
     }
+    /**
+     * Sets the grid-column property
+     *
+     * @param val - A Line object with start and end GridPlacement values
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * // CSS: grid-column: 1 / 4
+     * style.gridColumn = { start: 1, end: 4 };
+     * // CSS: grid-column: auto / span 3
+     * style.gridColumn = { start: "auto", end: { span: 3 } };
+     * ```
+     * @param {Line<GridPlacement>} val
+     */
+    set gridColumn(val) {
+        wasm.style_set_gridColumn(this.__wbg_ptr, val);
+    }
+    /**
+     * 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`
+     * @returns {boolean}
+     */
+    get itemIsReplaced() {
+        const ret = wasm.style_itemIsReplaced(this.__wbg_ptr);
+        return ret !== 0;
+    }
     /**
      * Sets the aspect ratio
      *
@@ -1273,6 +1512,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.aspectRatio = 16 / 9;
      * ```
      * @param {number | undefined} val
@@ -1280,6 +1520,33 @@ export class Style {
     set aspectRatio(val) {
         wasm.style_set_aspectRatio(this.__wbg_ptr, val);
     }
+    /**
+     * Sets the justify-self property
+     *
+     * @param val - The new justify-self value, or `undefined`/`Auto` to inherit from parent
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.justifySelf = AlignSelf.End;
+     * ```
+     * @param {AlignSelf | undefined} val
+     */
+    set justifySelf(val) {
+        wasm.style_set_justifySelf(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-auto-columns property
+     *
+     * Defines the size of implicitly created columns.
+     *
+     * @returns - An array of track sizing functions
+     * @returns {TrackSizingFunction[]}
+     */
+    get gridAutoColumns() {
+        const ret = wasm.style_gridAutoColumns(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the align-content property
      *
@@ -1287,6 +1554,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.alignContent = AlignContent.SpaceBetween;
      * ```
      * @param {AlignContent | undefined} val
@@ -1294,6 +1562,43 @@ export class Style {
     set alignContent(val) {
         wasm.style_set_alignContent(this.__wbg_ptr, val);
     }
+    /**
+     * Sets whether this item is a table
+     *
+     * @param val - Whether the item should be treated as a table
+     * @param {boolean} val
+     */
+    set itemIsTable(val) {
+        wasm.style_set_itemIsTable(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets the justify-items property
+     *
+     * @param val - The new justify-items value, or `undefined` to use default
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * style.justifyItems = AlignItems.Center;
+     * ```
+     * @param {AlignItems | undefined} val
+     */
+    set justifyItems(val) {
+        wasm.style_set_justifyItems(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-template-rows property
+     *
+     * Defines the track sizing functions (heights) of the grid rows.
+     *
+     * @returns - An array of `GridTrack` values
+     * @returns {GridTemplateComponent[]}
+     */
+    get gridTemplateRows() {
+        const ret = wasm.style_gridTemplateRows(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the flex direction
      *
@@ -1302,6 +1607,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.flexDirection = FlexDirection.Column;
      * ```
      * @param {FlexDirection} val
@@ -1309,6 +1615,50 @@ export class Style {
     set flexDirection(val) {
         wasm.style_set_flexDirection(this.__wbg_ptr, val);
     }
+    /**
+     * Sets the grid-auto-flow property
+     *
+     * @param val - The new grid-auto-flow value
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * style.gridAutoFlow = GridAutoFlow.Column;
+     * ```
+     * @param {GridAutoFlow} val
+     */
+    set gridAutoFlow(val) {
+        wasm.style_set_gridAutoFlow(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets the grid-auto-rows property
+     *
+     * @param val - An array of track sizing functions for implicit rows
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * style.gridAutoRows = [{ min: "auto", max: "auto" }];
+     * ```
+     * @param {TrackSizingFunction[]} val
+     */
+    set gridAutoRows(val) {
+        wasm.style_set_gridAutoRows(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-template-areas property
+     *
+     * Defines named grid areas that can be referenced by grid items.
+     *
+     * @returns - An array of `GridArea` values
+     * @returns {GridTemplateArea[]}
+     */
+    get gridTemplateAreas() {
+        const ret = wasm.style_gridTemplateAreas(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the justify-content property
      *
@@ -1316,6 +1666,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.justifyContent = JustifyContent.Center;
      * ```
      * @param {JustifyContent | undefined} val
@@ -1323,6 +1674,154 @@ export class Style {
     set justifyContent(val) {
         wasm.style_set_justifyContent(this.__wbg_ptr, val);
     }
+    /**
+     * Sets the scrollbar width
+     *
+     * @param val - The scrollbar width in pixels
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.overflow = { x: Overflow.Scroll, y: Overflow.Scroll };
+     * style.scrollbarWidth = 15;
+     * ```
+     * @param {number} val
+     */
+    set scrollbarWidth(val) {
+        wasm.style_set_scrollbarWidth(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets whether this item is a replaced element
+     *
+     * @param val - Whether the item should be treated as a replaced element
+     * @param {boolean} val
+     */
+    set itemIsReplaced(val) {
+        wasm.style_set_itemIsReplaced(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-template-columns property
+     *
+     * Defines the track sizing functions (widths) of the grid columns.
+     *
+     * @returns - An array of `GridTrack` values
+     * @returns {GridTemplateComponent[]}
+     */
+    get gridTemplateColumns() {
+        const ret = wasm.style_gridTemplateColumns(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Sets the grid-auto-columns property
+     *
+     * @param val - An array of track sizing functions for implicit columns
+     * @param {TrackSizingFunction[]} val
+     */
+    set gridAutoColumns(val) {
+        wasm.style_set_gridAutoColumns(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets the grid-template-rows property
+     *
+     * @param val - An array of GridTrack objects
+     * @param {GridTemplateComponent[]} val
+     */
+    set gridTemplateRows(val) {
+        wasm.style_set_gridTemplateRows(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-template-row-names property
+     *
+     * Defines the named lines between the rows.
+     *
+     * @returns - An array of arrays of line names
+     * @returns {string[][]}
+     */
+    get gridTemplateRowNames() {
+        const ret = wasm.style_gridTemplateRowNames(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Sets the grid-template-areas property
+     *
+     * @param val - An array of named grid area definitions
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * style.gridTemplateAreas = [
+     *   { name: "header", rowStart: 1, rowEnd: 2, columnStart: 1, columnEnd: 4 },
+     *   { name: "main", rowStart: 2, rowEnd: 4, columnStart: 2, columnEnd: 4 }
+     * ];
+     * ```
+     * @param {GridTemplateArea[]} val
+     */
+    set gridTemplateAreas(val) {
+        wasm.style_set_gridTemplateAreas(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets the grid-template-columns property
+     *
+     * @param val - An array of GridTrack objects
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.display = Display.Grid;
+     * style.gridTemplateColumns = [
+     *   { min: 200, max: 200 },
+     *   { min: "auto", max: "1fr" },
+     *   { min: "auto", max: "1fr" }
+     * ];
+     * ```
+     * @param {GridTemplateComponent[]} val
+     */
+    set gridTemplateColumns(val) {
+        wasm.style_set_gridTemplateColumns(this.__wbg_ptr, val);
+    }
+    /**
+     * Gets the grid-template-column-names property
+     *
+     * Defines the named lines between the columns.
+     *
+     * @returns - An array of arrays of line names
+     * @returns {string[][]}
+     */
+    get gridTemplateColumnNames() {
+        const ret = wasm.style_gridTemplateColumnNames(this.__wbg_ptr);
+        return ret;
+    }
+    /**
+     * Sets the grid-template-row-names property
+     *
+     * @param val - An array of arrays of line names
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.gridTemplateRowNames = [["header-start"], ["header-end", "main-start"], ["main-end"]];
+     * ```
+     * @param {string[][]} val
+     */
+    set gridTemplateRowNames(val) {
+        wasm.style_set_gridTemplateRowNames(this.__wbg_ptr, val);
+    }
+    /**
+     * Sets the grid-template-column-names property
+     *
+     * @param val - An array of arrays of line names
+     *
+     * @example
+     * ```typescript
+     * const style = new Style();
+     * style.gridTemplateColumnNames = [["sidebar-start"], ["sidebar-end", "main-start"], ["main-end"]];
+     * ```
+     * @param {string[][]} val
+     */
+    set gridTemplateColumnNames(val) {
+        wasm.style_set_gridTemplateColumnNames(this.__wbg_ptr, val);
+    }
     /**
      * Gets the gap
      *
@@ -1431,6 +1930,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.gap = { width: 10, height: 10 };
      * ```
      * @param {Size<LengthPercentage>} val
@@ -1438,6 +1938,19 @@ export class Style {
     set gap(val) {
         wasm.style_set_gap(this.__wbg_ptr, val);
     }
+    /**
+     * 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
+     * @returns {Line<GridPlacement>}
+     */
+    get gridRow() {
+        const ret = wasm.style_gridRow(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Gets the maximum size constraints
      *
@@ -1491,6 +2004,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.size = { width: 200, height: "100%" };
      * ```
      * @param {Size<Dimension>} val
@@ -1532,6 +2046,7 @@ export class Style {
      *
      * @example
      * ```typescript
+     * const style = new Style();
      * style.position = Position.Absolute;
      * style.inset = { left: 0, top: 0, right: "auto", bottom: "auto" };
      * ```
@@ -1552,6 +2067,8 @@ if (Symbol.dispose) Style.prototype[Symbol.dispose] = Style.prototype.free;
  * @example
  * ```typescript
  * try {
+ *  const tree = new TaffyTree();
+ *  const node = tree.newLeaf(new Style());
  *  tree.remove(node);
  * } catch (e) {
  *   if (e instanceof TaffyError) {
@@ -1646,6 +2163,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);
@@ -1669,6 +2191,8 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
+     * const rootId = tree.newLeaf(new Style());
      * tree.printTree(rootId);
      * // Output appears in browser console
      * ```
@@ -1688,6 +2212,8 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
+     * const parentId = tree.newLeaf(new Style());
      * const count: number = tree.childCount(parentId);
      * ```
      * @param {bigint} parent
@@ -1709,6 +2235,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);
      * ```
      * @param {bigint} parent
@@ -1734,6 +2264,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);
      * ```
@@ -1774,31 +2309,36 @@ 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 });
      * ```
      * @param {bigint} node
-     * @param {Size<AvailableSpace>} available_space
+     * @param {Size<AvailableSpace>} availableSpace
      */
-    computeLayout(node, available_space) {
-        const ret = wasm.taffytree_computeLayout(this.__wbg_ptr, node, available_space);
+    computeLayout(node, availableSpace) {
+        const ret = wasm.taffytree_computeLayout(this.__wbg_ptr, node, availableSpace);
         if (ret[1]) {
             throw takeFromExternrefTable0(ret[0]);
         }
@@ -1812,6 +2352,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
      * tree.enableRounding();
      * ```
      */
@@ -1827,6 +2368,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);
@@ -1844,6 +2387,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) {
@@ -1873,6 +2418,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);
      * ```
@@ -1892,6 +2439,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
      * const count: number = tree.totalNodeCount();
      * ```
      * @returns {number}
@@ -1912,6 +2460,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}`);
      * ```
@@ -1937,6 +2487,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
      * const containerStyle = new Style();
      * containerStyle.display = Display.Flex;
      *
@@ -1974,6 +2525,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 firstChild: bigint = tree.getChildAtIndex(parentId, 0);
      * ```
      * @param {bigint} parent
@@ -1987,6 +2542,28 @@ export class TaffyTree {
         }
         return BigInt.asUintN(64, ret[0]);
     }
+    /**
+     * 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
+     * @param {bigint} node
+     * @returns {any}
+     */
+    detailedLayoutInfo(node) {
+        const ret = wasm.taffytree_detailedLayoutInfo(this.__wbg_ptr, node);
+        if (ret[2]) {
+            throw takeFromExternrefTable0(ret[1]);
+        }
+        return takeFromExternrefTable0(ret[0]);
+    }
     /**
      * Gets a mutable reference to the context value for a node
      *
@@ -2017,6 +2594,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);
      * ```
      * @param {bigint} parent
@@ -2045,6 +2625,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);
@@ -2073,6 +2654,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);
      * ```
      * @param {bigint} parent
@@ -2092,21 +2677,28 @@ 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);
      * ```
      * @param {bigint} parent
-     * @param {number} start_index
-     * @param {number} end_index
+     * @param {number} startIndex
+     * @param {number} endIndex
      */
-    removeChildrenRange(parent, start_index, end_index) {
-        const ret = wasm.taffytree_removeChildrenRange(this.__wbg_ptr, parent, start_index, end_index);
+    removeChildrenRange(parent, startIndex, endIndex) {
+        const ret = wasm.taffytree_removeChildrenRange(this.__wbg_ptr, parent, startIndex, endIndex);
         if (ret[1]) {
             throw takeFromExternrefTable0(ret[0]);
         }
@@ -2116,7 +2708,7 @@ export class TaffyTree {
      *
      * @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`)
      *
@@ -2124,15 +2716,23 @@ 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);
      * ```
      * @param {bigint} parent
      * @param {number} index
-     * @param {bigint} new_child
+     * @param {bigint} newChild
      * @returns {bigint}
      */
-    replaceChildAtIndex(parent, index, new_child) {
-        const ret = wasm.taffytree_replaceChildAtIndex(this.__wbg_ptr, parent, index, new_child);
+    replaceChildAtIndex(parent, index, newChild) {
+        const ret = wasm.taffytree_replaceChildAtIndex(this.__wbg_ptr, parent, index, newChild);
         if (ret[2]) {
             throw takeFromExternrefTable0(ret[1]);
         }
@@ -2146,19 +2746,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 };
@@ -2166,11 +2771,11 @@ export class TaffyTree {
      * );
      * ```
      * @param {bigint} node
-     * @param {Size<AvailableSpace>} available_space
-     * @param {MeasureFunction} measure_func
+     * @param {Size<AvailableSpace>} availableSpace
+     * @param {MeasureFunction} measureFunc
      */
-    computeLayoutWithMeasure(node, available_space, measure_func) {
-        const ret = wasm.taffytree_computeLayoutWithMeasure(this.__wbg_ptr, node, available_space, measure_func);
+    computeLayoutWithMeasure(node, availableSpace, measureFunc) {
+        const ret = wasm.taffytree_computeLayoutWithMeasure(this.__wbg_ptr, node, availableSpace, measureFunc);
         if (ret[1]) {
             throw takeFromExternrefTable0(ret[0]);
         }
@@ -2187,6 +2792,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);
      * ```
@@ -2229,6 +2837,7 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
      * tree.clear();
      * console.log(tree.totalNodeCount());
      * ```
@@ -2250,6 +2859,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);
      * }
@@ -2275,6 +2889,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);
      * ```
@@ -2302,6 +2918,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}`);
@@ -2325,7 +2947,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);
      * ```
      * @param {bigint} child
      * @returns {bigint | undefined}
@@ -2348,6 +2974,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) {
@@ -2375,6 +3003,8 @@ export class TaffyTree {
      *
      * @example
      * ```typescript
+     * const tree = new TaffyTree();
+     * const parentId = tree.newLeaf(new Style());
      * const children: BigUint64Array = tree.children(parentId);
      * ```
      * @param {bigint} parent
@@ -2401,6 +3031,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);
@@ -2428,6 +3059,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);
      * ```
      * @param {bigint} parent
@@ -2452,6 +3086,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);
@@ -2469,6 +3105,40 @@ export class TaffyTree {
 }
 if (Symbol.dispose) TaffyTree.prototype[Symbol.dispose] = TaffyTree.prototype.free;
 
+/**
+ * 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
+ * ```
+ * @enum {0 | 1 | 2 | 3}
+ */
+export const TextAlign = Object.freeze({
+    /**
+     * No special legacy text align behaviour
+     */
+    Auto: 0, "0": "Auto",
+    /**
+     * Corresponds to `-webkit-left` or `-moz-left` in browsers
+     */
+    LegacyLeft: 1, "1": "LegacyLeft",
+    /**
+     * Corresponds to `-webkit-right` or `-moz-right` in browsers
+     */
+    LegacyRight: 2, "2": "LegacyRight",
+    /**
+     * Corresponds to `-webkit-center` or `-moz-center` in browsers
+     */
+    LegacyCenter: 3, "3": "LegacyCenter",
+});
+
 const EXPECTED_RESPONSE_TYPES = new Set(['basic', 'cors', 'default']);
 
 async function __wbg_load(module, imports) {
@@ -2595,6 +3265,10 @@ function __wbg_get_imports() {
         const ret = arg0.call(arg1);
         return ret;
     }, arguments) };
+    imports.wbg.__wbg_done_62ea16af4ce34b24 = function(arg0) {
+        const ret = arg0.done;
+        return ret;
+    };
     imports.wbg.__wbg_entries_83c79938054e065f = function(arg0) {
         const ret = Object.entries(arg0);
         return ret;
@@ -2610,6 +3284,10 @@ function __wbg_get_imports() {
             wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
         }
     };
+    imports.wbg.__wbg_get_6b7bd52aca3f9671 = function(arg0, arg1) {
+        const ret = arg0[arg1 >>> 0];
+        return ret;
+    };
     imports.wbg.__wbg_get_af9dab7e9603ea93 = function() { return handleError(function (arg0, arg1) {
         const ret = Reflect.get(arg0, arg1);
         return ret;
@@ -2668,7 +3346,7 @@ function __wbg_get_imports() {
         const ret = arg0.length;
         return ret;
     };
-    imports.wbg.__wbg_log_24bf1f6bcbf6c87b = function(arg0, arg1) {
+    imports.wbg.__wbg_log_725a3bd25b473a36 = function(arg0, arg1) {
         console.log(getStringFromWasm0(arg0, arg1));
     };
     imports.wbg.__wbg_new_1ba21ce319a06297 = function() {
@@ -2691,6 +3369,10 @@ function __wbg_get_imports() {
         const ret = arg0.next;
         return ret;
     };
+    imports.wbg.__wbg_next_3cfe5c0fe2a4cc53 = function() { return handleError(function (arg0) {
+        const ret = arg0.next();
+        return ret;
+    }, arguments) };
     imports.wbg.__wbg_prototypesetcall_dfe9b766cdc1f1fd = function(arg0, arg1, arg2) {
         Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), arg2);
     };
@@ -2701,6 +3383,9 @@ function __wbg_get_imports() {
     imports.wbg.__wbg_set_3f1d0b984ed272ed = function(arg0, arg1, arg2) {
         arg0[arg1] = arg2;
     };
+    imports.wbg.__wbg_set_7df433eea03a5c14 = function(arg0, arg1, arg2) {
+        arg0[arg1 >>> 0] = arg2;
+    };
     imports.wbg.__wbg_stack_0ed75d68575b0f3c = function(arg0, arg1) {
         const ret = arg1.stack;
         const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -2720,6 +3405,10 @@ function __wbg_get_imports() {
         const ret = TaffyError.__wrap(arg0);
         return ret;
     };
+    imports.wbg.__wbg_value_57b7b035e117f7ee = function(arg0) {
+        const ret = arg0.value;
+        return ret;
+    };
     imports.wbg.__wbindgen_cast_2241b6af4c4b2941 = function(arg0, arg1) {
         // Cast intrinsic for `Ref(String) -> Externref`.
         const ret = getStringFromWasm0(arg0, arg1);