taffy-wasm 0.9.8 → 0.9.9

package/README.md

@@ -22,7 +22,7 @@ npm install taffy-js
 
 ## 🚀 Quick Start
 
-```javascript
+```typescript
 import {
   loadTaffy,
   TaffyTree,
@@ -147,26 +147,29 @@ class Style {
   // Layout Mode
   display: Display; // Block, Flex, Grid, None
   position: Position; // Relative, Absolute
+  boxSizing: BoxSizing; // BorderBox, ContentBox
+  overflow: Point<Overflow>; // Overflow handling
 
-  // Flexbox
+  // Flexbox Properties
   flexDirection: FlexDirection; // Row, Column, RowReverse, ColumnReverse
   flexWrap: FlexWrap; // NoWrap, Wrap, WrapReverse
   flexGrow: number; // Growth factor (default: 0)
   flexShrink: number; // Shrink factor (default: 1)
   flexBasis: Dimension; // Initial size
 
-  // Alignment
+  // Alignment Properties
   alignItems: AlignItems | undefined;
   alignSelf: AlignSelf | undefined;
   alignContent: AlignContent | undefined;
   justifyContent: JustifyContent | undefined;
+  justifyItems: AlignItems | undefined; // Grid container default justify
+  justifySelf: AlignSelf | undefined; // Grid item self-justify
 
   // Sizing
   size: Size<Dimension>; // Width and height
   minSize: Size<Dimension>; // Minimum constraints
   maxSize: Size<Dimension>; // Maximum constraints
   aspectRatio: number | undefined; // Width/height ratio
-  boxSizing: BoxSizing; // BorderBox, ContentBox
 
   // Spacing
   margin: Rect<LengthPercentageAuto>;
@@ -175,8 +178,25 @@ class Style {
   gap: Size<LengthPercentage>; // Row and column gap
   inset: Rect<LengthPercentageAuto>; // For absolute positioning
 
-  // Overflow
-  overflow: Point<Overflow>;
+  // Block Layout Properties
+  itemIsTable: boolean; // Is this a table element?
+  itemIsReplaced: boolean; // Is this a replaced element (img, video)?
+  textAlign: TextAlign; // Legacy text alignment
+  scrollbarWidth: number; // Scrollbar gutter width in pixels
+
+  // CSS Grid Container Properties
+  gridAutoFlow: GridAutoFlow; // Row, Column, RowDense, ColumnDense
+  gridTemplateRows: GridTrack[]; // Track sizing for rows
+  gridTemplateColumns: GridTrack[]; // Track sizing for columns
+  gridAutoRows: TrackSizing[]; // Size for implicit rows
+  gridAutoColumns: TrackSizing[]; // Size for implicit columns
+  gridTemplateAreas: GridArea[]; // Named grid areas
+  gridTemplateRowNames: string[][]; // Named lines between rows
+  gridTemplateColumnNames: string[][]; // Named lines between columns
+
+  // CSS Grid Item Properties
+  gridRow: Line<GridPlacement>; // grid-row (start/end)
+  gridColumn: Line<GridPlacement>; // grid-column (start/end)
 }
 ```
 
@@ -290,14 +310,26 @@ enum JustifyContent {
 }
 enum Overflow {
   Visible,
+  Clip,
   Hidden,
   Scroll,
-  Auto,
 }
 enum BoxSizing {
   BorderBox,
   ContentBox,
 }
+enum TextAlign {
+  Auto,
+  LegacyLeft,
+  LegacyRight,
+  LegacyCenter,
+}
+enum GridAutoFlow {
+  Row,
+  Column,
+  RowDense,
+  ColumnDense,
+}
 ```
 
 ### Types
@@ -327,6 +359,24 @@ interface Point<T> {
 // Available space for layout computation
 type AvailableSpace = number | "minContent" | "maxContent";
 
+// Grid Placement (CSS grid-row-start / grid-column-start)
+type GridPlacement = "auto" | number | { span: number };
+
+// Grid Line (CSS grid-row / grid-column shorthand)
+interface Line<T> {
+  start: T;
+  end: T;
+}
+
+// Grid Template Area
+interface GridArea {
+  name: string;
+  row_start: number;
+  row_end: number;
+  column_start: number;
+  column_end: number;
+}
+
 // Measure function for custom content measurement
 type MeasureFunction = (
   knownDimensions: Size<number | undefined>,
@@ -341,7 +391,7 @@ type MeasureFunction = (
 
 For text nodes or other content that needs dynamic measurement:
 
-```javascript
+```typescript
 const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
 
 tree.computeLayoutWithMeasure(
@@ -363,7 +413,7 @@ tree.computeLayoutWithMeasure(
 
 Methods that can fail throw a `TaffyError` as a JavaScript exception. Use try-catch to handle errors:
 
-```javascript
+```typescript
 try {
   const nodeId = tree.newLeaf(style);
   console.log("Created node:", nodeId);
@@ -386,7 +436,7 @@ Taffy-JS works in all modern browsers that support WebAssembly:
 
 ### Flexbox Row Layout
 
-```javascript
+```typescript
 const rowStyle = new Style();
 rowStyle.display = Display.Flex;
 rowStyle.flexDirection = FlexDirection.Row;
@@ -394,9 +444,46 @@ rowStyle.justifyContent = JustifyContent.SpaceBetween;
 rowStyle.gap = { width: 10, height: 0 };
 ```
 
+### CSS Grid Layout
+
+```typescript
+import { Style, Display, GridAutoFlow } from "taffy-js";
+
+const gridStyle = new Style();
+gridStyle.display = Display.Grid;
+gridStyle.gridAutoFlow = GridAutoFlow.Row;
+gridStyle.gap = { width: 10, height: 10 };
+
+// Grid item placement
+const itemStyle = new Style();
+itemStyle.gridRow = { start: 1, end: 3 }; // Spans 2 rows
+itemStyle.gridColumn = { start: 1, end: { span: 2 } }; // Spans 2 columns
+```
+
+### Grid Template Areas
+
+```typescript
+const gridStyle = new Style();
+gridStyle.display = Display.Grid;
+gridStyle.gridTemplateAreas = [
+  { name: "header", row_start: 1, row_end: 2, column_start: 1, column_end: 4 },
+  { name: "sidebar", row_start: 2, row_end: 4, column_start: 1, column_end: 2 },
+  { name: "main", row_start: 2, row_end: 4, column_start: 2, column_end: 4 },
+  { name: "footer", row_start: 4, row_end: 5, column_start: 1, column_end: 4 },
+];
+
+// Named grid lines
+gridStyle.gridTemplateRowNames = [
+  ["header-start"],
+  ["header-end", "content-start"],
+  ["content-end", "footer-start"],
+  ["footer-end"],
+];
+```
+
 ### Absolute Positioning
 
-```javascript
+```typescript
 const absoluteStyle = new Style();
 absoluteStyle.position = Position.Absolute;
 absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
@@ -405,7 +492,7 @@ absoluteStyle.size = { width: 100, height: 50 };
 
 ### Percentage Sizing
 
-```javascript
+```typescript
 const percentStyle = new Style();
 percentStyle.size = {
   width: "50%", // 50% of parent
@@ -413,6 +500,15 @@ percentStyle.size = {
 };
 ```
 
+### Block Layout with Replaced Elements
+
+```typescript
+const imgStyle = new Style();
+imgStyle.itemIsReplaced = true;
+imgStyle.aspectRatio = 16 / 9; // 16:9 aspect ratio
+imgStyle.size = { width: "100%", height: "auto" };
+```
+
 ## 🏗️ Building from Source
 
 ```bash

package/package.json

@@ -5,7 +5,7 @@
     "ByteLandTechnology <github@byteland.app>"
   ],
   "description": "WebAssembly bindings for Taffy layout library",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "license": "MIT",
   "repository": {
     "type": "git",

package/taffy_wasm.d.ts

@@ -405,6 +405,68 @@ export interface DetailedGridItemsInfo {
   column_end: 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 };
+ * ```
+ */
+export type GridPlacement = "auto" | number | { span: number };
+
+/**
+ * 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 interface Line<T> {
+  /** The starting position (CSS: *-start) */
+  start: T;
+  /** The ending position (CSS: *-end) */
+  end: T;
+}
+
 
 
 /**
@@ -677,6 +739,40 @@ 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 { GridAutoFlow } from 'taffy-js';
+ *
+ * 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
  *
@@ -1042,6 +1138,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 +1165,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 +1200,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 +1255,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 +1303,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: any;
   /**
    * Gets the justify-content property
    *
@@ -1160,6 +1329,75 @@ 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: any;
+  /**
+   * 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[];
+  /**
+   * Gets the grid-template-areas property
+   *
+   * Defines named grid areas that can be referenced by grid items.
+   *
+   * @returns - An array of `GridArea` values
+   */
+  gridTemplateAreas: GridArea[];
+  /**
+   * Gets the grid-template-columns property
+   *
+   * Defines the track sizing functions (widths) of the grid columns.
+   *
+   * @returns - An array of `GridTrack` values
+   */
+  gridTemplateColumns: GridTrack[];
+  /**
+   * 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
    *
@@ -1824,6 +2062,38 @@ 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 { TextAlign } from 'taffy-js';
+ *
+ * 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 +2136,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 +2159,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 +2173,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;

package/taffy_wasm.js

@@ -512,6 +512,41 @@ 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 { GridAutoFlow } from 'taffy-js';
+ *
+ * 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
  *
@@ -1005,6 +1040,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 +1079,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
      *
@@ -1071,6 +1133,36 @@ 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
+     * 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
      *
@@ -1141,6 +1233,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
      *
@@ -1184,6 +1303,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 {any}
+     */
+    get gridAutoRows() {
+        const ret = wasm.style_gridAutoRows(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the align-self property
      *
@@ -1226,6 +1371,20 @@ 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
+     * 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 +1397,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
      *
@@ -1266,6 +1439,38 @@ 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
+     * 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
      *
@@ -1280,6 +1485,32 @@ 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
+     * 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 {any}
+     */
+    get gridAutoColumns() {
+        const ret = wasm.style_gridAutoColumns(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the align-content property
      *
@@ -1294,6 +1525,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
+     * 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 Taffy's native serialization format.
+     *
+     * @returns - An array of `GridTrack` values
+     * @returns {GridTrack[]}
+     */
+    get gridTemplateRows() {
+        const ret = wasm.style_gridTemplateRows(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the flex direction
      *
@@ -1309,6 +1577,48 @@ 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
+     * 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
+     * style.display = Display.Grid;
+     * style.gridAutoRows = [{ min: "Auto", max: "Auto" }];
+     * ```
+     * @param {any} 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 {GridArea[]}
+     */
+    get gridTemplateAreas() {
+        const ret = wasm.style_gridTemplateAreas(this.__wbg_ptr);
+        return ret;
+    }
     /**
      * Sets the justify-content property
      *
@@ -1323,6 +1633,159 @@ 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
+     * 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 {GridTrack[]}
+     */
+    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 {any} 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 (Taffy's serde format)
+     *
+     * @example
+     * ```typescript
+     * style.display = Display.Grid;
+     * // Simple: use Taffy's serde format
+     * style.gridTemplateRows = [
+     *   { type: "Single", value: { min: { Length: 100 }, max: { Length: 100 } } },
+     *   { type: "Single", value: { min: "Auto", max: { Fr: 1.0 } } }
+     * ];
+     * ```
+     * @param {GridTrack[]} 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
+     * style.display = Display.Grid;
+     * style.gridTemplateAreas = [
+     *   { name: "header", row_start: 1, row_end: 2, column_start: 1, column_end: 4 },
+     *   { name: "main", row_start: 2, row_end: 4, column_start: 2, column_end: 4 }
+     * ];
+     * ```
+     * @param {GridArea[]} 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
+     * style.display = Display.Grid;
+     * style.gridTemplateColumns = [
+     *   { type: "Single", value: { min: { Length: 200 }, max: { Length: 200 } } },
+     *   { type: "Single", value: { min: "Auto", max: { Fr: 1.0 } } },
+     *   { type: "Single", value: { min: "Auto", max: { Fr: 1.0 } } }
+     * ];
+     * ```
+     * @param {GridTrack[]} 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
+     * 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
+     * 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
      *
@@ -1438,6 +1901,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
      *
@@ -2469,6 +2945,39 @@ 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 { TextAlign } from 'taffy-js';
+ *
+ * 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) {
@@ -2558,6 +3067,10 @@ function __wbg_get_imports() {
         const ret = typeof(val) === 'object' && val !== null;
         return ret;
     };
+    imports.wbg.__wbg___wbindgen_is_string_704ef9c8fc131030 = function(arg0) {
+        const ret = typeof(arg0) === 'string';
+        return ret;
+    };
     imports.wbg.__wbg___wbindgen_is_undefined_f6b95eab589e0269 = function(arg0) {
         const ret = arg0 === undefined;
         return ret;
@@ -2595,6 +3108,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 +3127,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 +3189,7 @@ function __wbg_get_imports() {
         const ret = arg0.length;
         return ret;
     };
-    imports.wbg.__wbg_log_8da1b8a8292d4b69 = function(arg0, arg1) {
+    imports.wbg.__wbg_log_23225a7078e26a12 = function(arg0, arg1) {
         console.log(getStringFromWasm0(arg0, arg1));
     };
     imports.wbg.__wbg_new_1ba21ce319a06297 = function() {
@@ -2687,10 +3208,18 @@ function __wbg_get_imports() {
         const ret = new Error();
         return ret;
     };
+    imports.wbg.__wbg_new_b546ae120718850e = function() {
+        const ret = new Map();
+        return ret;
+    };
     imports.wbg.__wbg_next_138a17bbf04e926c = function(arg0) {
         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 +3230,13 @@ 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_set_efaaf145b9377369 = function(arg0, arg1, arg2) {
+        const ret = arg0.set(arg1, arg2);
+        return ret;
+    };
     imports.wbg.__wbg_stack_0ed75d68575b0f3c = function(arg0, arg1) {
         const ret = arg1.stack;
         const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -2720,6 +3256,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);