taffy-js 0.2.10 → 0.2.11

package/pkg/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;