taffy-layout 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2480 @@
1
+ /* tslint:disable */
2
+ /* eslint-disable */
3
+
4
+ /**
5
+ * Available space constraint for layout computation.
6
+ *
7
+ * Specifies how much space is available for a node during layout calculation.
8
+ * This is passed to `computeLayout()` to define the container constraints.
9
+ *
10
+ * @remarks
11
+ * - Use `number` when you have a fixed container size
12
+ * - Use `"min-content"` to shrink-wrap to the minimum content size
13
+ * - Use `"max-content"` to expand to fit all content without wrapping
14
+ *
15
+ * @example
16
+ * ```typescript
17
+ * import init, { TaffyTree, Style, type AvailableSpace, type Size } from 'taffy-layout';
18
+ *
19
+ * await init();
20
+ * const tree = new TaffyTree();
21
+ * const root: bigint = tree.newLeaf(new Style());
22
+ *
23
+ * // Fixed size container with type annotation
24
+ * const fixedSpace: Size<AvailableSpace> = {
25
+ * width: 800,
26
+ * height: 600
27
+ * };
28
+ * tree.computeLayout(root, fixedSpace);
29
+ *
30
+ * // Flexible width, fixed height
31
+ * const flexibleSpace: Size<AvailableSpace> = {
32
+ * width: "max-content",
33
+ * height: 400
34
+ * };
35
+ * tree.computeLayout(root, flexibleSpace);
36
+ * ```
37
+ */
38
+ export type AvailableSpace = number | "min-content" | "max-content";
39
+
40
+ /**
41
+ * Generic size type with width and height.
42
+ *
43
+ * A two-dimensional container for width and height values. The type parameter `T`
44
+ * determines what kind of values are stored.
45
+ *
46
+ * @typeParam T - The type of each dimension (e.g., `number`, `Dimension`, `AvailableSpace`)
47
+ *
48
+ * @property width - The horizontal dimension value
49
+ * @property height - The vertical dimension value
50
+ *
51
+ * @example
52
+ * ```typescript
53
+ * import type { Size, Dimension, AvailableSpace } from 'taffy-layout';
54
+ *
55
+ * // Size with explicit type parameters
56
+ * const pixelSize: Size<number> = { width: 200, height: 100 };
57
+ *
58
+ * const dimensionSize: Size<Dimension> = {
59
+ * width: 200,
60
+ * height: "50%"
61
+ * };
62
+ *
63
+ * const availableSize: Size<AvailableSpace> = {
64
+ * width: 800,
65
+ * height: "max-content"
66
+ * };
67
+ * ```
68
+ */
69
+ export type Size<T> = {
70
+ /** The horizontal dimension value */
71
+ width: T;
72
+ /** The vertical dimension value */
73
+ height: T;
74
+ };
75
+
76
+ /**
77
+ * Custom measure function for leaf nodes with text or other dynamic content.
78
+ *
79
+ * This callback is invoked during layout computation for leaf nodes that need
80
+ * custom sizing based on their content (e.g., text nodes that need text measurement).
81
+ *
82
+ * @param knownDimensions - Dimensions already determined by constraints. Each dimension
83
+ * is `number` if known, or `undefined` if needs to be measured.
84
+ * @param availableSpace - The available space constraints for the node. Can be definite
85
+ * pixels, "min-content", or "max-content".
86
+ * @param node - The node ID (`bigint`) of the node being measured
87
+ * @param context - User-provided context attached to the node via `newLeafWithContext()`
88
+ * @param style - The node's current Style configuration
89
+ *
90
+ * @returns - The measured size of the content in pixels
91
+ *
92
+ * @example
93
+ * ```typescript
94
+ * import init, { TaffyTree, Style, type MeasureFunction, type Size } from 'taffy-layout';
95
+ *
96
+ * interface TextContext {
97
+ * text: string;
98
+ * fontSize: number;
99
+ * }
100
+ *
101
+ * await init();
102
+ * const tree = new TaffyTree();
103
+ *
104
+ * const style = new Style();
105
+ * const context: TextContext = { text: "Hello, World!", fontSize: 16 };
106
+ * const textNode: bigint = tree.newLeafWithContext(style, context);
107
+ *
108
+ * // Helper function to measure text width
109
+ * const measureTextWidth = (text: string, fontSize: number) => text.length * fontSize * 0.6;
110
+ *
111
+ * // Typed measure function
112
+ * const measureText: MeasureFunction = (
113
+ * knownDimensions,
114
+ * availableSpace,
115
+ * node,
116
+ * context,
117
+ * style
118
+ * ): Size<number> => {
119
+ * const ctx = context as TextContext | undefined;
120
+ * if (!ctx?.text) return { width: 0, height: 0 };
121
+ *
122
+ * const width = knownDimensions.width ?? measureTextWidth(ctx.text, ctx.fontSize);
123
+ * const height = knownDimensions.height ?? ctx.fontSize * 1.2;
124
+ *
125
+ * return { width, height };
126
+ * };
127
+ *
128
+ * tree.computeLayoutWithMeasure(
129
+ * textNode,
130
+ * { width: 200, height: "max-content" },
131
+ * measureText
132
+ * );
133
+ * ```
134
+ */
135
+ export type MeasureFunction = (
136
+ knownDimensions: Size<number | undefined>,
137
+ availableSpace: Size<AvailableSpace>,
138
+ node: bigint,
139
+ context: any,
140
+ style: Style,
141
+ ) => Size<number>;
142
+
143
+ /**
144
+ * Dimension type supporting length, percentage, or auto values.
145
+ *
146
+ * Used for sizing properties like `width`, `height`, `flexBasis`, etc.
147
+ *
148
+ * @remarks
149
+ * - `number`: Fixed size in pixels
150
+ * - `"{number}%"`: Percentage of parent's size (0-100)
151
+ * - `"auto"`: Size determined by content or layout algorithm
152
+ *
153
+ * @example
154
+ * ```typescript
155
+ * import { Style, type Dimension, type Size } from 'taffy-layout';
156
+ *
157
+ * const style = new Style();
158
+ *
159
+ * // With explicit type annotations
160
+ * const fixedSize: Size<Dimension> = {
161
+ * width: 200,
162
+ * height: 100
163
+ * };
164
+ *
165
+ * const percentSize: Size<Dimension> = {
166
+ * width: "50%",
167
+ * height: "100%"
168
+ * };
169
+ *
170
+ * const autoSize: Size<Dimension> = {
171
+ * width: "auto",
172
+ * height: "auto"
173
+ * };
174
+ *
175
+ * style.size = fixedSize;
176
+ * ```
177
+ */
178
+ export type Dimension = number | `${number}%` | "auto";
179
+
180
+ /**
181
+ * Length or percentage value (no auto support).
182
+ *
183
+ * Used for properties that require explicit values, such as `padding`, `border`, and `gap`.
184
+ *
185
+ * @remarks
186
+ * - `number`: Fixed size in pixels
187
+ * - `"{number}%"`: Percentage of parent's size (0-100)
188
+ *
189
+ * @example
190
+ * ```typescript
191
+ * import { Style, type LengthPercentage, type Rect, type Size } from 'taffy-layout';
192
+ *
193
+ * const style = new Style();
194
+ *
195
+ * const padding: Rect<LengthPercentage> = {
196
+ * left: 10,
197
+ * right: 10,
198
+ * top: 5,
199
+ * bottom: 5
200
+ * };
201
+ *
202
+ * const gap: Size<LengthPercentage> = {
203
+ * width: "5%",
204
+ * height: "5%"
205
+ * };
206
+ *
207
+ * style.padding = padding;
208
+ * style.gap = gap;
209
+ * ```
210
+ */
211
+ export type LengthPercentage = number | `${number}%`;
212
+
213
+ /**
214
+ * Length, percentage, or auto value.
215
+ *
216
+ * Used for properties that support auto values, such as `margin` and `inset`.
217
+ *
218
+ * @remarks
219
+ * - `number`: Fixed size in pixels
220
+ * - `"{number}%"`: Percentage of parent's size (0-100)
221
+ * - `"auto"`: Automatic value (behavior depends on property)
222
+ *
223
+ * @example
224
+ * ```typescript
225
+ * import { Style, type LengthPercentageAuto, type Rect } from 'taffy-layout';
226
+ *
227
+ * const style = new Style();
228
+ *
229
+ * // Auto margins for horizontal centering
230
+ * const centerMargin: Rect<LengthPercentageAuto> = {
231
+ * left: "auto",
232
+ * right: "auto",
233
+ * top: 0,
234
+ * bottom: 0
235
+ * };
236
+ *
237
+ * style.margin = centerMargin;
238
+ * ```
239
+ */
240
+ export type LengthPercentageAuto = number | `${number}%` | "auto";
241
+
242
+ /**
243
+ * Point with x and y coordinates/values.
244
+ *
245
+ * Used for properties that have separate horizontal (x) and vertical (y) values,
246
+ * such as `overflow`.
247
+ *
248
+ * @typeParam T - The type of each coordinate
249
+ *
250
+ * @property x - The horizontal value
251
+ * @property y - The vertical value
252
+ *
253
+ * @example
254
+ * ```typescript
255
+ * import { Style, Overflow, type Point } from 'taffy-layout';
256
+ *
257
+ * const style = new Style();
258
+ *
259
+ * const overflow: Point<typeof Overflow[keyof typeof Overflow]> = {
260
+ * x: Overflow.Hidden,
261
+ * y: Overflow.Scroll
262
+ * };
263
+ *
264
+ * style.overflow = overflow;
265
+ * ```
266
+ */
267
+ export type Point<T> = {
268
+ /** The horizontal (x-axis) value */
269
+ x: T;
270
+ /** The vertical (y-axis) value */
271
+ y: T;
272
+ };
273
+
274
+ /**
275
+ * Rectangle with left, right, top, and bottom values.
276
+ *
277
+ * Used for box model properties like `margin`, `padding`, `border`, and `inset`.
278
+ *
279
+ * @typeParam T - The type of each side value
280
+ *
281
+ * @property left - The left side value
282
+ * @property right - The right side value
283
+ * @property top - The top side value
284
+ * @property bottom - The bottom side value
285
+ *
286
+ * @example
287
+ * ```typescript
288
+ * import { Style, type Rect, type LengthPercentage, type LengthPercentageAuto } from 'taffy-layout';
289
+ *
290
+ * const style = new Style();
291
+ *
292
+ * // Typed padding
293
+ * const padding: Rect<LengthPercentage> = {
294
+ * left: 10,
295
+ * right: 10,
296
+ * top: 10,
297
+ * bottom: 10
298
+ * };
299
+ *
300
+ * // Typed margin with auto
301
+ * const margin: Rect<LengthPercentageAuto> = {
302
+ * left: "auto",
303
+ * right: "auto",
304
+ * top: 10,
305
+ * bottom: 30
306
+ * };
307
+ *
308
+ * style.padding = padding;
309
+ * style.margin = margin;
310
+ * ```
311
+ */
312
+ export type Rect<T> = {
313
+ /** The left side value */
314
+ left: T;
315
+ /** The right side value */
316
+ right: T;
317
+ /** The top side value */
318
+ top: T;
319
+ /** The bottom side value */
320
+ bottom: T;
321
+ };
322
+
323
+ /**
324
+ * Detailed layout information (for grid layouts).
325
+ *
326
+ * Returned by `detailedLayoutInfo()` for nodes using CSS Grid layout.
327
+ * Contains detailed information about grid tracks and item placement.
328
+ *
329
+ * @remarks
330
+ * This is only available when the `detailed_layout_info` feature is enabled.
331
+ *
332
+ * @example
333
+ * ```typescript
334
+ * import { TaffyTree, Style, Display, type DetailedLayoutInfo, type DetailedGridInfo } from 'taffy-layout';
335
+ *
336
+ * const tree = new TaffyTree();
337
+ * const style = new Style();
338
+ * style.display = Display.Grid;
339
+ * const gridNode = tree.newLeaf(style);
340
+ * tree.computeLayout(gridNode, { width: 100, height: 100 });
341
+ *
342
+ * const info: DetailedLayoutInfo = tree.detailedLayoutInfo(gridNode);
343
+ *
344
+ * if (info && typeof info === 'object' && 'Grid' in info) {
345
+ * const grid = info.Grid as DetailedGridInfo;
346
+ * console.log('Rows:', grid.rows.sizes);
347
+ * console.log('Columns:', grid.columns.sizes);
348
+ * }
349
+ * ```
350
+ */
351
+ export type DetailedLayoutInfo = DetailedGridInfo | undefined;
352
+
353
+ /**
354
+ * Detailed information about a grid layout.
355
+ *
356
+ * Contains information about grid rows, columns, and item placement.
357
+ *
358
+ * @property rows - Information about row tracks
359
+ * @property columns - Information about column tracks
360
+ * @property items - Array of item placement information
361
+ */
362
+ export type DetailedGridInfo = {
363
+ /** Information about the grid's row tracks */
364
+ rows: DetailedGridTracksInfo;
365
+ /** Information about the grid's column tracks */
366
+ columns: DetailedGridTracksInfo;
367
+ /** Placement information for each grid item */
368
+ items: DetailedGridItemsInfo[];
369
+ };
370
+
371
+ /**
372
+ * Information about grid tracks (rows or columns).
373
+ *
374
+ * Provides detailed sizing and gutter information for a set of grid tracks.
375
+ *
376
+ * @property negativeImplicitTracks - Number of implicit tracks before explicit tracks
377
+ * @property explicitTracks - Number of explicitly defined tracks
378
+ * @property positiveImplicitTracks - Number of implicit tracks after explicit tracks
379
+ * @property gutters - Array of gutter sizes between tracks (in pixels)
380
+ * @property sizes - Array of track sizes (in pixels)
381
+ */
382
+ export type DetailedGridTracksInfo = {
383
+ /** Number of implicit tracks before explicit tracks (for negative line numbers) */
384
+ negativeImplicitTracks: number;
385
+ /** Number of tracks explicitly defined in grid-template-rows/columns */
386
+ explicitTracks: number;
387
+ /** Number of implicit tracks created after explicit tracks */
388
+ positiveImplicitTracks: number;
389
+ /** Gap sizes between tracks in pixels */
390
+ gutters: number[];
391
+ /** Computed sizes of each track in pixels */
392
+ sizes: number[];
393
+ };
394
+
395
+ /**
396
+ * Information about a grid item's placement.
397
+ *
398
+ * Specifies which grid lines the item spans on both axes.
399
+ * Line numbers are 1-indexed, with 1 being the first line.
400
+ *
401
+ * @property rowStart - Starting row line number (1-indexed)
402
+ * @property rowEnd - Ending row line number (exclusive)
403
+ * @property columnStart - Starting column line number (1-indexed)
404
+ * @property columnEnd - Ending column line number (exclusive)
405
+ */
406
+ export type DetailedGridItemsInfo = {
407
+ /** Starting row line (1-indexed) */
408
+ rowStart: number;
409
+ /** Ending row line (exclusive) */
410
+ rowEnd: number;
411
+ /** Starting column line (1-indexed) */
412
+ columnStart: number;
413
+ /** Ending column line (exclusive) */
414
+ columnEnd: number;
415
+ };
416
+
417
+ /**
418
+ * Grid placement type for positioning grid items.
419
+ *
420
+ * Specifies how an item is placed on a grid track (row or column).
421
+ * Follows CSS `grid-row-start` / `grid-column-start` specification.
422
+ *
423
+ * @remarks
424
+ * - `"auto"`: Auto-placement using the grid's flow algorithm
425
+ * - `number`: Place at a specific line index (1-indexed, can be negative)
426
+ * - `{ span: number }`: Span a specified number of tracks
427
+ *
428
+ * @example
429
+ * ```typescript
430
+ * import type { GridPlacement, Line } from 'taffy-layout';
431
+ *
432
+ * // Line index (CSS: grid-row-start: 2)
433
+ * const lineIndex: GridPlacement = 2;
434
+ *
435
+ * // Auto placement (CSS: grid-row-start: auto)
436
+ * const auto: GridPlacement = "auto";
437
+ *
438
+ * // Span (CSS: grid-row-start: span 3)
439
+ * const span: GridPlacement = { span: 3 };
440
+ *
441
+ * // Named line (CSS: grid-row-start: header 2)
442
+ * const named: GridPlacement = { line: 2, ident: "header" };
443
+ *
444
+ * // Named span (CSS: grid-row-start: span 2 header)
445
+ * const namedSpan: GridPlacement = { span: 2, ident: "header" };
446
+ * ```
447
+ */
448
+ export type GridPlacement = "auto" | number | {line: number; ident: string} | {span: number; ident?: string};
449
+
450
+ /**
451
+ * Line type representing start and end positions.
452
+ *
453
+ * A container for start and end values, used for CSS grid-row and grid-column
454
+ * shorthand properties.
455
+ *
456
+ * @typeParam T - The type of start and end values
457
+ *
458
+ * @property start - The starting line/position
459
+ * @property end - The ending line/position
460
+ *
461
+ * @example
462
+ * ```typescript
463
+ * import { Style, Display, type Line, type GridPlacement } from 'taffy-layout';
464
+ *
465
+ * const style = new Style();
466
+ * style.display = Display.Grid;
467
+ *
468
+ * // CSS: grid-row: 1 / 3
469
+ * style.gridRow = { start: 1, end: 3 };
470
+ *
471
+ * // CSS: grid-column: 1 / span 2
472
+ * style.gridColumn = { start: 1, end: { span: 2 } };
473
+ *
474
+ * // CSS: grid-row: auto / auto
475
+ * style.gridRow = { start: "auto", end: "auto" };
476
+ * ```
477
+ */
478
+ export type Line<T> = {
479
+ /** The starting position (CSS: *-start) */
480
+ start: T;
481
+ /** The ending position (CSS: *-end) */
482
+ end: T;
483
+ }
484
+ /**
485
+ * Grid track repetition parameter.
486
+ *
487
+ * Defines how many times a track pattern should repeat.
488
+ *
489
+ * @remarks
490
+ * - `number`: Exact number of repetitions (e.g. `repeat(3, ...)`).
491
+ * - `"autoFill"`: Fills the container with as many tracks as possible.
492
+ * - `"autoFit"`: Fills the container, collapsing empty tracks.
493
+ */
494
+ export type RepetitionCount = number | "auto-fill" | "auto-fit";
495
+
496
+ /**
497
+ * Minumum track sizing function.
498
+ *
499
+ * Defines the minimum size of a grid track.
500
+ */
501
+ export type MinTrackSizingFunction = number | `${number}%` | "auto" | "min-content" | "max-content";
502
+
503
+ /**
504
+ * Maximum track sizing function.
505
+ *
506
+ * Defines the maximum size of a grid track.
507
+ */
508
+ export type MaxTrackSizingFunction = number | `${number}%` | `${number}fr` | "auto" | "min-content" | "max-content" | "fit-content";
509
+
510
+ /**
511
+ * Track sizing function (min/max pair).
512
+ *
513
+ * Defines the size range for a single grid track.
514
+ */
515
+ export type TrackSizingFunction = {min: MinTrackSizingFunction; max: MaxTrackSizingFunction};
516
+
517
+ /**
518
+ * Grid track repetition definition.
519
+ */
520
+ export type GridTemplateRepetition = {
521
+ count: RepetitionCount;
522
+ tracks: TrackSizingFunction[];
523
+ lineNames?: string[][];
524
+ };
525
+
526
+ /**
527
+ * Grid track sizing definition.
528
+ *
529
+ * Can be a single track sizing function or a repetition of tracks.
530
+ */
531
+ export type GridTemplateComponent = TrackSizingFunction | GridTemplateRepetition;
532
+
533
+ /**
534
+ * Named grid area definition.
535
+ *
536
+ * Defines a named area within the grid and its boundaries.
537
+ */
538
+ export type GridTemplateArea = {
539
+ /** The name of the grid area */
540
+ name: string;
541
+ /** Start row line */
542
+ rowStart: number;
543
+ /** End row line */
544
+ rowEnd: number;
545
+ /** Start column line */
546
+ columnStart: number;
547
+ /** End column line */
548
+ columnEnd: number;
549
+ };
550
+
551
+
552
+
553
+ /**
554
+ * Multi-line content alignment enumeration
555
+ *
556
+ * Controls the distribution of space between and around content items along the cross axis
557
+ * in a multi-line flex container. This corresponds to the CSS `align-content` property.
558
+ *
559
+ * **Note**: This property only has effect when `flex-wrap` is set to `Wrap` or `WrapReverse`.
560
+ *
561
+ * @example
562
+ * ```typescript
563
+ * import { Style, AlignContent, FlexWrap } from 'taffy-layout';
564
+ *
565
+ * const style = new Style();
566
+ * style.flexWrap = FlexWrap.Wrap;
567
+ * style.alignContent = AlignContent.SpaceBetween; // Distribute lines evenly
568
+ * ```
569
+ */
570
+ export enum AlignContent {
571
+ /**
572
+ * Lines packed toward the start of the cross axis
573
+ */
574
+ Start = 0,
575
+ /**
576
+ * Lines packed toward the end of the cross axis
577
+ */
578
+ End = 1,
579
+ /**
580
+ * Lines packed toward the start of the flex container
581
+ */
582
+ FlexStart = 2,
583
+ /**
584
+ * Lines packed toward the end of the flex container
585
+ */
586
+ FlexEnd = 3,
587
+ /**
588
+ * Lines centered within the container
589
+ */
590
+ Center = 4,
591
+ /**
592
+ * Lines stretched to fill the container
593
+ */
594
+ Stretch = 5,
595
+ /**
596
+ * Lines evenly distributed with first/last at edges
597
+ */
598
+ SpaceBetween = 6,
599
+ /**
600
+ * Lines evenly distributed with equal space around each
601
+ */
602
+ SpaceAround = 7,
603
+ /**
604
+ * Lines evenly distributed with equal space between each
605
+ */
606
+ SpaceEvenly = 8,
607
+ }
608
+
609
+ /**
610
+ * Cross-axis alignment enumeration for all children
611
+ *
612
+ * Defines the default alignment for all flex/grid items along the cross axis.
613
+ * This corresponds to the CSS `align-items` property.
614
+ *
615
+ * @example
616
+ * ```typescript
617
+ * import { Style, AlignItems } from 'taffy-layout';
618
+ *
619
+ * const style = new Style();
620
+ * style.alignItems = AlignItems.Center; // Center items on cross axis
621
+ * style.alignItems = AlignItems.Stretch; // Stretch items to fill container
622
+ * ```
623
+ */
624
+ export enum AlignItems {
625
+ /**
626
+ * Items aligned to the start of the cross axis
627
+ */
628
+ Start = 0,
629
+ /**
630
+ * Items aligned to the end of the cross axis
631
+ */
632
+ End = 1,
633
+ /**
634
+ * Items aligned to the start of the flex container
635
+ */
636
+ FlexStart = 2,
637
+ /**
638
+ * Items aligned to the end of the flex container
639
+ */
640
+ FlexEnd = 3,
641
+ /**
642
+ * Items centered along the cross axis
643
+ */
644
+ Center = 4,
645
+ /**
646
+ * Items aligned to their text baselines
647
+ */
648
+ Baseline = 5,
649
+ /**
650
+ * Items stretched to fill the container
651
+ */
652
+ Stretch = 6,
653
+ }
654
+
655
+ /**
656
+ * Cross-axis alignment enumeration for a single element
657
+ *
658
+ * Overrides the parent's `align-items` value for a specific child element.
659
+ * This corresponds to the CSS `align-self` property.
660
+ *
661
+ * @example
662
+ * ```typescript
663
+ * import { Style, AlignSelf } from 'taffy-layout';
664
+ *
665
+ * const style = new Style();
666
+ * style.alignSelf = AlignSelf.Auto; // Use parent's align-items
667
+ * style.alignSelf = AlignSelf.Center; // Override to center this item
668
+ * ```
669
+ */
670
+ export enum AlignSelf {
671
+ /**
672
+ * Inherits the parent container's `align-items` value
673
+ */
674
+ Auto = 0,
675
+ /**
676
+ * Item aligned to the start of the cross axis
677
+ */
678
+ Start = 1,
679
+ /**
680
+ * Item aligned to the end of the cross axis
681
+ */
682
+ End = 2,
683
+ /**
684
+ * Item aligned to the start of the flex container
685
+ */
686
+ FlexStart = 3,
687
+ /**
688
+ * Item aligned to the end of the flex container
689
+ */
690
+ FlexEnd = 4,
691
+ /**
692
+ * Item centered along the cross axis
693
+ */
694
+ Center = 5,
695
+ /**
696
+ * Item aligned to its text baseline
697
+ */
698
+ Baseline = 6,
699
+ /**
700
+ * Item stretched to fill the container
701
+ */
702
+ Stretch = 7,
703
+ }
704
+
705
+ /**
706
+ * Box sizing enumeration
707
+ *
708
+ * Controls how the total width and height of an element is calculated.
709
+ * This corresponds to the CSS `box-sizing` property.
710
+ *
711
+ * @example
712
+ * ```typescript
713
+ * import { Style, BoxSizing } from 'taffy-layout';
714
+ *
715
+ * const style = new Style();
716
+ * style.boxSizing = BoxSizing.BorderBox; // Size includes padding and border
717
+ * style.boxSizing = BoxSizing.ContentBox; // Size is content only
718
+ * ```
719
+ */
720
+ export enum BoxSizing {
721
+ /**
722
+ * The width and height properties include padding and border
723
+ */
724
+ BorderBox = 0,
725
+ /**
726
+ * The width and height properties include only the content
727
+ */
728
+ ContentBox = 1,
729
+ }
730
+
731
+ /**
732
+ * Display mode enumeration
733
+ *
734
+ * Controls the layout algorithm type for an element. This corresponds to the CSS `display` property
735
+ * and determines how an element and its children are laid out.
736
+ *
737
+ * @example
738
+ * ```typescript
739
+ * import { Style, Display } from 'taffy-layout';
740
+ *
741
+ * const style = new Style();
742
+ * style.display = Display.Flex; // Enable flexbox layout
743
+ * style.display = Display.Grid; // Enable grid layout
744
+ * style.display = Display.None; // Hide element from layout
745
+ * ```
746
+ */
747
+ export enum Display {
748
+ /**
749
+ * Block-level layout where element takes the full available width
750
+ */
751
+ Block = 0,
752
+ /**
753
+ * Flexbox layout for one-dimensional item arrangement
754
+ */
755
+ Flex = 1,
756
+ /**
757
+ * CSS Grid layout for two-dimensional item arrangement
758
+ */
759
+ Grid = 2,
760
+ /**
761
+ * Element is removed from layout calculation entirely
762
+ */
763
+ None = 3,
764
+ }
765
+
766
+ /**
767
+ * Flex direction enumeration
768
+ *
769
+ * Defines the main axis direction for flex item layout. This corresponds to the CSS
770
+ * `flex-direction` property and determines how flex items are placed within the container.
771
+ *
772
+ * @example
773
+ * ```typescript
774
+ * import { Style, FlexDirection } from 'taffy-layout';
775
+ *
776
+ * const style = new Style();
777
+ * style.flexDirection = FlexDirection.Row; // Horizontal, left to right
778
+ * style.flexDirection = FlexDirection.Column; // Vertical, top to bottom
779
+ * ```
780
+ */
781
+ export enum FlexDirection {
782
+ /**
783
+ * Main axis runs horizontally from left to right
784
+ */
785
+ Row = 0,
786
+ /**
787
+ * Main axis runs vertically from top to bottom
788
+ */
789
+ Column = 1,
790
+ /**
791
+ * Main axis runs horizontally from right to left
792
+ */
793
+ RowReverse = 2,
794
+ /**
795
+ * Main axis runs vertically from bottom to top
796
+ */
797
+ ColumnReverse = 3,
798
+ }
799
+
800
+ /**
801
+ * Flex wrap mode enumeration
802
+ *
803
+ * Controls whether flex items wrap onto multiple lines when they overflow the container.
804
+ * This corresponds to the CSS `flex-wrap` property.
805
+ *
806
+ * @example
807
+ * ```typescript
808
+ * import { Style, FlexWrap } from 'taffy-layout';
809
+ *
810
+ * const style = new Style();
811
+ * style.flexWrap = FlexWrap.NoWrap; // All items on single line
812
+ * style.flexWrap = FlexWrap.Wrap; // Items wrap to new lines
813
+ * ```
814
+ */
815
+ export enum FlexWrap {
816
+ /**
817
+ * All flex items are placed on a single line
818
+ */
819
+ NoWrap = 0,
820
+ /**
821
+ * Flex items wrap onto multiple lines from top to bottom
822
+ */
823
+ Wrap = 1,
824
+ /**
825
+ * Flex items wrap onto multiple lines from bottom to top
826
+ */
827
+ WrapReverse = 2,
828
+ }
829
+
830
+ /**
831
+ * Grid auto flow enumeration
832
+ *
833
+ * Controls whether grid items are placed row-wise or column-wise, and whether
834
+ * the sparse or dense packing algorithm is used.
835
+ *
836
+ * @example
837
+ * ```typescript
838
+ * import { Style, GridAutoFlow } from 'taffy-layout';
839
+ *
840
+ * const style = new Style();
841
+ * style.gridAutoFlow = GridAutoFlow.Row; // Fill rows first
842
+ * style.gridAutoFlow = GridAutoFlow.Column; // Fill columns first
843
+ * style.gridAutoFlow = GridAutoFlow.RowDense; // Fill rows, pack densely
844
+ * ```
845
+ */
846
+ export enum GridAutoFlow {
847
+ /**
848
+ * Items are placed by filling each row in turn, adding new rows as necessary
849
+ */
850
+ Row = 0,
851
+ /**
852
+ * Items are placed by filling each column in turn, adding new columns as necessary
853
+ */
854
+ Column = 1,
855
+ /**
856
+ * Combines `Row` with the dense packing algorithm
857
+ */
858
+ RowDense = 2,
859
+ /**
860
+ * Combines `Column` with the dense packing algorithm
861
+ */
862
+ ColumnDense = 3,
863
+ }
864
+
865
+ /**
866
+ * Main axis alignment enumeration
867
+ *
868
+ * Defines how flex items are aligned and spaced along the main axis.
869
+ * This corresponds to the CSS `justify-content` property.
870
+ *
871
+ * @example
872
+ * ```typescript
873
+ * import { Style, JustifyContent } from 'taffy-layout';
874
+ *
875
+ * const style = new Style();
876
+ * style.justifyContent = JustifyContent.Center; // Center items
877
+ * style.justifyContent = JustifyContent.SpaceBetween; // Distribute evenly
878
+ * ```
879
+ */
880
+ export enum JustifyContent {
881
+ /**
882
+ * Items packed toward the start of the main axis
883
+ */
884
+ Start = 0,
885
+ /**
886
+ * Items packed toward the end of the main axis
887
+ */
888
+ End = 1,
889
+ /**
890
+ * Items packed toward the start of the flex container
891
+ */
892
+ FlexStart = 2,
893
+ /**
894
+ * Items packed toward the end of the flex container
895
+ */
896
+ FlexEnd = 3,
897
+ /**
898
+ * Items centered along the main axis
899
+ */
900
+ Center = 4,
901
+ /**
902
+ * Items stretched along the main axis
903
+ */
904
+ Stretch = 5,
905
+ /**
906
+ * Items evenly distributed with first/last at edges
907
+ */
908
+ SpaceBetween = 6,
909
+ /**
910
+ * Items evenly distributed with equal space around each
911
+ */
912
+ SpaceAround = 7,
913
+ /**
914
+ * Items evenly distributed with equal space between each
915
+ */
916
+ SpaceEvenly = 8,
917
+ }
918
+
919
+ /**
920
+ * Computed layout result containing position, size, and spacing values for a node.
921
+ *
922
+ * This class wraps the native [`taffy::Layout`] and provides read-only access
923
+ * to all computed layout values. All dimensions are in pixels.
924
+ *
925
+ * @example
926
+ * ```typescript
927
+ * const tree = new TaffyTree();
928
+ * const rootId = tree.newLeaf(new Style());
929
+ * const node = rootId;
930
+ *
931
+ * tree.computeLayout(rootId, { width: 800, height: 600 });
932
+ * const layout = tree.getLayout(node);
933
+ *
934
+ * console.log("Position:", layout.x, layout.y);
935
+ * console.log("Size:", layout.width, layout.height);
936
+ * console.log("Content:", layout.contentWidth, layout.contentHeight);
937
+ * console.log("Padding:", layout.paddingTop, layout.paddingRight, layout.paddingBottom, layout.paddingLeft);
938
+ * console.log("Border:", layout.borderTop, layout.borderRight, layout.borderBottom, layout.borderLeft);
939
+ * console.log("Margin:", layout.marginTop, layout.marginRight, layout.marginBottom, layout.marginLeft);
940
+ * console.log("Scrollbar:", layout.scrollbarWidth, layout.scrollbarHeight);
941
+ * console.log("Order:", layout.order);
942
+ * ```
943
+ */
944
+ export class Layout {
945
+ private constructor();
946
+ free(): void;
947
+ [Symbol.dispose](): void;
948
+ /**
949
+ * Gets the top border width
950
+ *
951
+ * @returns - The computed top border width in pixels
952
+ */
953
+ readonly borderTop: number;
954
+ /**
955
+ * Gets the top margin
956
+ *
957
+ * @returns - The computed top margin in pixels
958
+ */
959
+ readonly marginTop: number;
960
+ /**
961
+ * Gets the left border width
962
+ *
963
+ * @returns - The computed left border width in pixels
964
+ */
965
+ readonly borderLeft: number;
966
+ /**
967
+ * Gets the left margin
968
+ *
969
+ * @returns - The computed left margin in pixels
970
+ */
971
+ readonly marginLeft: number;
972
+ /**
973
+ * Gets the top padding
974
+ *
975
+ * @returns - The computed top padding in pixels
976
+ */
977
+ readonly paddingTop: number;
978
+ /**
979
+ * Gets the right border width
980
+ *
981
+ * @returns - The computed right border width in pixels
982
+ */
983
+ readonly borderRight: number;
984
+ /**
985
+ * Gets the right margin
986
+ *
987
+ * @returns - The computed right margin in pixels
988
+ */
989
+ readonly marginRight: number;
990
+ /**
991
+ * Gets the left padding
992
+ *
993
+ * @returns - The computed left padding in pixels
994
+ */
995
+ readonly paddingLeft: number;
996
+ /**
997
+ * Gets the bottom border width
998
+ *
999
+ * @returns - The computed bottom border width in pixels
1000
+ */
1001
+ readonly borderBottom: number;
1002
+ /**
1003
+ * Gets the width of the scrollable content
1004
+ *
1005
+ * If the node has overflow content, this represents the total
1006
+ * width of all content (may exceed `width`).
1007
+ *
1008
+ * @returns - The content width in pixels
1009
+ */
1010
+ readonly contentWidth: number;
1011
+ /**
1012
+ * Gets the bottom margin
1013
+ *
1014
+ * @returns - The computed bottom margin in pixels
1015
+ */
1016
+ readonly marginBottom: number;
1017
+ /**
1018
+ * Gets the right padding
1019
+ *
1020
+ * @returns - The computed right padding in pixels
1021
+ */
1022
+ readonly paddingRight: number;
1023
+ /**
1024
+ * Gets the height of the scrollable content
1025
+ *
1026
+ * If the node has overflow content, this represents the total
1027
+ * height of all content (may exceed `height`).
1028
+ *
1029
+ * @returns - The content height in pixels
1030
+ */
1031
+ readonly contentHeight: number;
1032
+ /**
1033
+ * Gets the bottom padding
1034
+ *
1035
+ * @returns - The computed bottom padding in pixels
1036
+ */
1037
+ readonly paddingBottom: number;
1038
+ /**
1039
+ * Gets the width of the vertical scrollbar
1040
+ *
1041
+ * When overflow is set to scroll, this indicates the space
1042
+ * reserved for the vertical scrollbar.
1043
+ *
1044
+ * @returns - The scrollbar width in pixels (0 if no scrollbar)
1045
+ */
1046
+ readonly scrollbarWidth: number;
1047
+ /**
1048
+ * Gets the height of the horizontal scrollbar
1049
+ *
1050
+ * When overflow is set to scroll, this indicates the space
1051
+ * reserved for the horizontal scrollbar.
1052
+ *
1053
+ * @returns - The scrollbar height in pixels (0 if no scrollbar)
1054
+ */
1055
+ readonly scrollbarHeight: number;
1056
+ /**
1057
+ * Gets the X coordinate of the node's top-left corner
1058
+ *
1059
+ * This value is relative to the node's parent. For the root node,
1060
+ * this is always 0.
1061
+ *
1062
+ * @returns - The horizontal position in pixels
1063
+ */
1064
+ readonly x: number;
1065
+ /**
1066
+ * Gets the Y coordinate of the node's top-left corner
1067
+ *
1068
+ * This value is relative to the node's parent. For the root node,
1069
+ * this is always 0.
1070
+ *
1071
+ * @returns - The vertical position in pixels
1072
+ */
1073
+ readonly y: number;
1074
+ /**
1075
+ * Gets the rendering order of the node
1076
+ *
1077
+ * This value determines the z-order for overlapping elements.
1078
+ * Lower values are rendered first (behind higher values).
1079
+ *
1080
+ * @returns - The rendering order as an unsigned 32-bit integer
1081
+ */
1082
+ readonly order: number;
1083
+ /**
1084
+ * Gets the computed width of the node
1085
+ *
1086
+ * This is the final width after layout computation, including
1087
+ * any constraints from min/max size or flex properties.
1088
+ *
1089
+ * @returns - The width in pixels
1090
+ */
1091
+ readonly width: number;
1092
+ /**
1093
+ * Gets the computed height of the node
1094
+ *
1095
+ * This is the final height after layout computation, including
1096
+ * any constraints from min/max size or flex properties.
1097
+ *
1098
+ * @returns - The height in pixels
1099
+ */
1100
+ readonly height: number;
1101
+ }
1102
+
1103
+ /**
1104
+ * Overflow handling enumeration
1105
+ *
1106
+ * Defines how content that exceeds the container boundaries is handled.
1107
+ * This corresponds to the CSS `overflow` property.
1108
+ *
1109
+ * @example
1110
+ * ```typescript
1111
+ * import { Style, Overflow } from 'taffy-layout';
1112
+ *
1113
+ * const style = new Style();
1114
+ * style.overflow = { x: Overflow.Hidden, y: Overflow.Scroll };
1115
+ * ```
1116
+ */
1117
+ export enum Overflow {
1118
+ /**
1119
+ * Content is not clipped and may render outside the container
1120
+ */
1121
+ Visible = 0,
1122
+ /**
1123
+ * Content is clipped at the container boundary, but unlike Hidden, this forbids all scrolling
1124
+ */
1125
+ Clip = 1,
1126
+ /**
1127
+ * Content is clipped at the container boundary
1128
+ */
1129
+ Hidden = 2,
1130
+ /**
1131
+ * Always display scrollbars for scrollable content
1132
+ */
1133
+ Scroll = 3,
1134
+ }
1135
+
1136
+ /**
1137
+ * Position mode enumeration
1138
+ *
1139
+ * Controls how an element is positioned within its parent container.
1140
+ * This corresponds to the CSS `position` property.
1141
+ *
1142
+ * @example
1143
+ * ```typescript
1144
+ * import { Style, Position } from 'taffy-layout';
1145
+ *
1146
+ * const style = new Style();
1147
+ * style.position = Position.Relative; // Normal document flow
1148
+ * style.position = Position.Absolute; // Removed from flow, uses inset values
1149
+ * ```
1150
+ */
1151
+ export enum Position {
1152
+ /**
1153
+ * Element participates in normal document flow
1154
+ */
1155
+ Relative = 0,
1156
+ /**
1157
+ * Element is positioned relative to its nearest positioned ancestor
1158
+ */
1159
+ Absolute = 1,
1160
+ }
1161
+
1162
+ /**
1163
+ * CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties.
1164
+ *
1165
+ * This class holds all CSS layout properties for a node. Create an instance with
1166
+ * `new Style()` and configure properties before passing to `TaffyTree.newLeaf()`.
1167
+ *
1168
+ * @defaultValue
1169
+ * When created, all properties are set to their CSS default values:
1170
+ * - `display`: `Display.Block`
1171
+ * - `position`: `Position.Relative`
1172
+ * - `flexDirection`: `FlexDirection.Row`
1173
+ * - `flexWrap`: `FlexWrap.NoWrap`
1174
+ * - `flexGrow`: `0`
1175
+ * - `flexShrink`: `1`
1176
+ * - All alignment properties: `undefined` (use default behavior)
1177
+ * - All dimensions: `"auto"`
1178
+ * - All spacing: `0`
1179
+ *
1180
+ */
1181
+ export class Style {
1182
+ free(): void;
1183
+ [Symbol.dispose](): void;
1184
+ /**
1185
+ * Creates a new Style instance with default values
1186
+ *
1187
+ * @returns - A new `Style` object with all properties set to CSS defaults
1188
+ *
1189
+ * @example
1190
+ * ```typescript
1191
+ * const style = new Style();
1192
+ * console.log(style.display); // Display.Block
1193
+ * ```
1194
+ */
1195
+ constructor();
1196
+ /**
1197
+ * Gets the align-self property
1198
+ *
1199
+ * Overrides the parent's align-items for this specific element.
1200
+ *
1201
+ * @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set)
1202
+ */
1203
+ alignSelf: AlignSelf | undefined;
1204
+ /**
1205
+ * Gets the box sizing mode
1206
+ *
1207
+ * Determines whether padding and border are included in dimensions.
1208
+ *
1209
+ * @returns - The current [`BoxSizing`](JsBoxSizing) value
1210
+ *
1211
+ * @defaultValue `BoxSizing.BorderBox`
1212
+ */
1213
+ boxSizing: BoxSizing;
1214
+ /**
1215
+ * Gets the flex-basis
1216
+ *
1217
+ * The initial size of a flex item before growing/shrinking.
1218
+ *
1219
+ * @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`)
1220
+ */
1221
+ flexBasis: Dimension;
1222
+ /**
1223
+ * Gets the border width
1224
+ *
1225
+ * Width of the element's border on each side.
1226
+ *
1227
+ * @returns - A `Rect<LengthPercentage>` with left, right, top, bottom border widths
1228
+ */
1229
+ border: Rect<LengthPercentage>;
1230
+ /**
1231
+ * Gets the margin
1232
+ *
1233
+ * Outer spacing around the element.
1234
+ *
1235
+ * @returns - A `Rect<LengthPercentageAuto>` with left, right, top, bottom margins
1236
+ */
1237
+ margin: Rect<LengthPercentageAuto>;
1238
+ /**
1239
+ * Gets the text-align property
1240
+ *
1241
+ * Used by block layout to implement legacy text alignment behavior.
1242
+ *
1243
+ * @returns - The current [`TextAlign`](JsTextAlign) value
1244
+ *
1245
+ * @defaultValue - `TextAlign.Auto`
1246
+ */
1247
+ textAlign: TextAlign;
1248
+ /**
1249
+ * Gets the align-items property
1250
+ *
1251
+ * Defines the default alignment for all children on the cross axis.
1252
+ *
1253
+ * @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set
1254
+ */
1255
+ alignItems: AlignItems | undefined;
1256
+ /**
1257
+ * Gets the flex shrink factor
1258
+ *
1259
+ * Determines how much the item shrinks relative to siblings when
1260
+ * there is insufficient space.
1261
+ *
1262
+ * @returns - The flex shrink factor (default: 1)
1263
+ */
1264
+ flexShrink: number;
1265
+ /**
1266
+ * Gets the grid-column property
1267
+ *
1268
+ * Defines which column in the grid the item should start and end at.
1269
+ * Corresponds to CSS `grid-column` shorthand.
1270
+ *
1271
+ * @returns - A `Line<GridPlacement>` with start and end placements
1272
+ */
1273
+ gridColumn: Line<GridPlacement>;
1274
+ /**
1275
+ * Gets the display mode
1276
+ *
1277
+ * Determines the layout algorithm used for this element and its children.
1278
+ *
1279
+ * @returns - The current [`Display`](JsDisplay) value
1280
+ *
1281
+ * @defaultValue - `Display.Block`
1282
+ */
1283
+ display: Display;
1284
+ /**
1285
+ * Gets the padding
1286
+ *
1287
+ * Inner spacing between the element's border and content.
1288
+ *
1289
+ * @returns - A `Rect<LengthPercentage>` with left, right, top, bottom padding
1290
+ */
1291
+ padding: Rect<LengthPercentage>;
1292
+ /**
1293
+ * Gets the aspect ratio
1294
+ *
1295
+ * The ratio of width to height. Used to maintain proportions.
1296
+ *
1297
+ * @returns - The aspect ratio value, or `undefined` if not set
1298
+ */
1299
+ aspectRatio: number | undefined;
1300
+ /**
1301
+ * Gets the justify-self property
1302
+ *
1303
+ * Overrides the parent's justify-items for this specific element in the inline axis.
1304
+ *
1305
+ * @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set)
1306
+ */
1307
+ justifySelf: AlignSelf | undefined;
1308
+ /**
1309
+ * Gets the grid-row property
1310
+ *
1311
+ * Defines which row in the grid the item should start and end at.
1312
+ * Corresponds to CSS `grid-row` shorthand.
1313
+ *
1314
+ * @returns - A `Line<GridPlacement>` with start and end placements
1315
+ */
1316
+ gridRow: Line<GridPlacement>;
1317
+ /**
1318
+ * Gets the maximum size constraints
1319
+ *
1320
+ * @returns - A `Size<Dimension>` object with maximum width and height
1321
+ */
1322
+ maxSize: Size<Dimension>;
1323
+ /**
1324
+ * Gets the minimum size constraints
1325
+ *
1326
+ * @returns - A `Size<Dimension>` object with minimum width and height
1327
+ */
1328
+ minSize: Size<Dimension>;
1329
+ /**
1330
+ * Gets the overflow behavior
1331
+ *
1332
+ * Controls how content that exceeds the container is handled.
1333
+ *
1334
+ * @returns - A `Point<Overflow>` with `x` and `y` overflow settings
1335
+ */
1336
+ overflow: Point<Overflow>;
1337
+ /**
1338
+ * Gets the position mode
1339
+ *
1340
+ * Determines how the element is positioned within its parent.
1341
+ *
1342
+ * @returns - The current [`Position`](JsPosition) value
1343
+ *
1344
+ * @defaultValue - `Position.Relative`
1345
+ */
1346
+ position: Position;
1347
+ /**
1348
+ * Gets the align-content property
1349
+ *
1350
+ * Controls distribution of space between lines in a multi-line flex container.
1351
+ *
1352
+ * @returns - The current [`AlignContent`](JsAlignContent) value, or `undefined` if not set
1353
+ */
1354
+ alignContent: AlignContent | undefined;
1355
+ /**
1356
+ * Gets whether this item is a table
1357
+ *
1358
+ * Table children are handled specially in block layout.
1359
+ *
1360
+ * @returns - Whether the item is treated as a table
1361
+ *
1362
+ * @defaultValue - `false`
1363
+ */
1364
+ itemIsTable: boolean;
1365
+ /**
1366
+ * Gets the justify-items property
1367
+ *
1368
+ * Defines the default justify-self for all children in the inline axis.
1369
+ * This is primarily used for CSS Grid layout.
1370
+ *
1371
+ * @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set
1372
+ */
1373
+ justifyItems: AlignItems | undefined;
1374
+ /**
1375
+ * Gets the flex grow factor
1376
+ *
1377
+ * Determines how much the item grows relative to siblings when
1378
+ * there is extra space available.
1379
+ *
1380
+ * @returns - The flex grow factor (default: 0)
1381
+ */
1382
+ flexGrow: number;
1383
+ /**
1384
+ * Gets the flex wrap mode
1385
+ *
1386
+ * Controls whether flex items wrap to new lines.
1387
+ *
1388
+ * @returns - The current [`FlexWrap`](JsFlexWrap) value
1389
+ *
1390
+ * @defaultValue - `FlexWrap.NoWrap`
1391
+ */
1392
+ flexWrap: FlexWrap;
1393
+ /**
1394
+ * Gets the flex direction
1395
+ *
1396
+ * Defines the main axis direction for flex items.
1397
+ *
1398
+ * @returns - The current [`FlexDirection`](JsFlexDirection) value
1399
+ *
1400
+ * @defaultValue - `FlexDirection.Row`
1401
+ */
1402
+ flexDirection: FlexDirection;
1403
+ /**
1404
+ * Gets the grid-auto-flow property
1405
+ *
1406
+ * Controls how auto-placed items are inserted into the grid.
1407
+ *
1408
+ * @returns - The current [`GridAutoFlow`](JsGridAutoFlow) value
1409
+ *
1410
+ * @defaultValue - `GridAutoFlow.Row`
1411
+ */
1412
+ gridAutoFlow: GridAutoFlow;
1413
+ /**
1414
+ * Gets the grid-auto-rows property
1415
+ *
1416
+ * Defines the size of implicitly created rows.
1417
+ *
1418
+ * @returns - An array of track sizing functions
1419
+ */
1420
+ gridAutoRows: TrackSizingFunction[];
1421
+ /**
1422
+ * Gets the justify-content property
1423
+ *
1424
+ * Defines alignment and spacing of items along the main axis.
1425
+ *
1426
+ * @returns - The current [`JustifyContent`](JsJustifyContent) value, or `undefined` if not set
1427
+ */
1428
+ justifyContent: JustifyContent | undefined;
1429
+ /**
1430
+ * Gets the scrollbar width
1431
+ *
1432
+ * The width of the scrollbar gutter when `overflow` is set to `Scroll`.
1433
+ *
1434
+ * @returns - The scrollbar width in pixels
1435
+ *
1436
+ * @defaultValue - `0`
1437
+ */
1438
+ scrollbarWidth: number;
1439
+ /**
1440
+ * Gets whether this item is a replaced element
1441
+ *
1442
+ * Replaced elements have special sizing behavior (e.g., `<img>`, `<video>`).
1443
+ *
1444
+ * @returns - Whether the item is a replaced element
1445
+ *
1446
+ * @defaultValue - `false`
1447
+ */
1448
+ itemIsReplaced: boolean;
1449
+ /**
1450
+ * Gets the grid-auto-columns property
1451
+ *
1452
+ * Defines the size of implicitly created columns.
1453
+ *
1454
+ * @returns - An array of track sizing functions
1455
+ */
1456
+ gridAutoColumns: TrackSizingFunction[];
1457
+ /**
1458
+ * Gets the grid-template-rows property
1459
+ *
1460
+ * Defines the track sizing functions (heights) of the grid rows.
1461
+ *
1462
+ * @returns - An array of `GridTrack` values
1463
+ */
1464
+ gridTemplateRows: GridTemplateComponent[];
1465
+ /**
1466
+ * Gets the grid-template-areas property
1467
+ *
1468
+ * Defines named grid areas that can be referenced by grid items.
1469
+ *
1470
+ * @returns - An array of `GridArea` values
1471
+ */
1472
+ gridTemplateAreas: GridTemplateArea[];
1473
+ /**
1474
+ * Gets the grid-template-columns property
1475
+ *
1476
+ * Defines the track sizing functions (widths) of the grid columns.
1477
+ *
1478
+ * @returns - An array of `GridTrack` values
1479
+ */
1480
+ gridTemplateColumns: GridTemplateComponent[];
1481
+ /**
1482
+ * Gets the grid-template-row-names property
1483
+ *
1484
+ * Defines the named lines between the rows.
1485
+ *
1486
+ * @returns - An array of arrays of line names
1487
+ */
1488
+ gridTemplateRowNames: string[][];
1489
+ /**
1490
+ * Gets the grid-template-column-names property
1491
+ *
1492
+ * Defines the named lines between the columns.
1493
+ *
1494
+ * @returns - An array of arrays of line names
1495
+ */
1496
+ gridTemplateColumnNames: string[][];
1497
+ /**
1498
+ * Gets the gap
1499
+ *
1500
+ * Spacing between flex/grid items.
1501
+ *
1502
+ * @returns - A `Size<LengthPercentage>` with column (width) and row (height) gaps
1503
+ */
1504
+ gap: Size<LengthPercentage>;
1505
+ /**
1506
+ * Gets the size (width and height)
1507
+ *
1508
+ * @returns - A `Size<Dimension>` object with `width` and `height` properties
1509
+ */
1510
+ size: Size<Dimension>;
1511
+ /**
1512
+ * Gets the inset
1513
+ *
1514
+ * Positioning offsets for absolutely positioned elements.
1515
+ *
1516
+ * @returns - A `Rect<LengthPercentageAuto>` with left, right, top, bottom offsets
1517
+ */
1518
+ inset: Rect<LengthPercentageAuto>;
1519
+ }
1520
+
1521
+ /**
1522
+ * Error class thrown when a Taffy operation fails, containing a human-readable error message.
1523
+ *
1524
+ * This class wraps the native [`taffy::TaffyError`] type and exposes it to JavaScript
1525
+ * with a readable error message. It is thrown as a JavaScript exception on failure.
1526
+ *
1527
+ * @example
1528
+ * ```typescript
1529
+ * try {
1530
+ * const tree = new TaffyTree();
1531
+ * const node = tree.newLeaf(new Style());
1532
+ * tree.remove(node);
1533
+ * } catch (e) {
1534
+ * if (e instanceof TaffyError) {
1535
+ * console.error(e.message);
1536
+ * }
1537
+ * }
1538
+ * ```
1539
+ *
1540
+ * @remarks
1541
+ * The underlying Taffy errors include:
1542
+ * - `InvalidInputNode`: Node ID doesn't exist in the tree
1543
+ * - `InvalidParentNode`: Specified parent node doesn't exist
1544
+ * - `ChildIndexOutOfBounds`: Child index exceeds available children
1545
+ */
1546
+ export class TaffyError {
1547
+ private constructor();
1548
+ free(): void;
1549
+ [Symbol.dispose](): void;
1550
+ /**
1551
+ * Gets the human-readable error message
1552
+ *
1553
+ * @returns - A string describing what went wrong.
1554
+ *
1555
+ * @remarks
1556
+ * Examples:
1557
+ * - "Node with id 1234 is not present in the Taffy tree"
1558
+ * - "Index 5 is out of bounds for node with 3 children"
1559
+ */
1560
+ readonly message: string;
1561
+ }
1562
+
1563
+ /**
1564
+ * The main layout tree class for creating nodes, computing layouts, and managing a tree of styled elements.
1565
+ *
1566
+ * TaffyTree is the entry point for the Taffy layout engine. It manages
1567
+ * a tree of nodes and computes their layouts using CSS Flexbox and Grid algorithms.
1568
+ *
1569
+ */
1570
+ export class TaffyTree {
1571
+ free(): void;
1572
+ [Symbol.dispose](): void;
1573
+ /**
1574
+ * Marks a node as dirty (requiring re-layout)
1575
+ *
1576
+ * Use this when a node's content has changed but its style hasn't.
1577
+ * For example, when text content changes and needs remeasuring.
1578
+ *
1579
+ * @param node - The node ID to mark dirty
1580
+ *
1581
+ * @throws `TaffyError` if the node does not exist
1582
+ *
1583
+ * @example
1584
+ * ```typescript
1585
+ * const tree = new TaffyTree();
1586
+ * const rootId = tree.newLeaf(new Style());
1587
+ * const nodeId = rootId;
1588
+ * const availableSpace = { width: 100, height: 100 };
1589
+ *
1590
+ * // After updating text content
1591
+ * tree.setNodeContext(nodeId, { text: "Updated text" });
1592
+ * tree.markDirty(nodeId);
1593
+ * tree.computeLayout(rootId, availableSpace);
1594
+ * ```
1595
+ */
1596
+ markDirty(node: bigint): void;
1597
+ /**
1598
+ * Prints the tree structure to the console (for debugging)
1599
+ *
1600
+ * Outputs a text representation of the tree structure starting from
1601
+ * the given node. Useful for debugging layout issues.
1602
+ *
1603
+ * @param node - The root node ID to print from
1604
+ *
1605
+ * @example
1606
+ * ```typescript
1607
+ * const tree = new TaffyTree();
1608
+ * const rootId = tree.newLeaf(new Style());
1609
+ * tree.printTree(rootId);
1610
+ * // Output appears in browser console
1611
+ * ```
1612
+ */
1613
+ printTree(node: bigint): void;
1614
+ /**
1615
+ * Gets the number of children of a node
1616
+ *
1617
+ * @param parent - The parent node ID
1618
+ *
1619
+ * @returns - The number of direct children
1620
+ *
1621
+ * @throws `TaffyError` if the node does not exist
1622
+ *
1623
+ * @example
1624
+ * ```typescript
1625
+ * const tree = new TaffyTree();
1626
+ * const parentId = tree.newLeaf(new Style());
1627
+ * const count: number = tree.childCount(parentId);
1628
+ * ```
1629
+ */
1630
+ childCount(parent: bigint): number;
1631
+ /**
1632
+ * Removes a specific child from a parent
1633
+ *
1634
+ * @param parent - The parent node ID
1635
+ * @param child - The child node ID to remove
1636
+ *
1637
+ * @returns - The removed child ID (`bigint`)
1638
+ *
1639
+ * @throws `TaffyError` if the parent or child node does not exist
1640
+ *
1641
+ * @example
1642
+ * ```typescript
1643
+ * const tree = new TaffyTree();
1644
+ * const parentId = tree.newLeaf(new Style());
1645
+ * const childId = tree.newLeaf(new Style());
1646
+ * tree.addChild(parentId, childId);
1647
+ * tree.removeChild(parentId, childId);
1648
+ * ```
1649
+ */
1650
+ removeChild(parent: bigint, child: bigint): bigint;
1651
+ /**
1652
+ * Replaces all children of a node
1653
+ *
1654
+ * Any existing children are removed and replaced with the new array.
1655
+ *
1656
+ * @param parent - The parent node ID
1657
+ * @param children - Array of new child node IDs
1658
+ *
1659
+ * @throws `TaffyError` if the parent node does not exist
1660
+ *
1661
+ * @example
1662
+ * ```typescript
1663
+ * const tree = new TaffyTree();
1664
+ * const parentId = tree.newLeaf(new Style());
1665
+ * const child1 = tree.newLeaf(new Style());
1666
+ * const child2 = tree.newLeaf(new Style());
1667
+ * const child3 = tree.newLeaf(new Style());
1668
+ * const children = BigUint64Array.from([child1, child2, child3]);
1669
+ * tree.setChildren(parentId, children);
1670
+ * ```
1671
+ */
1672
+ setChildren(parent: bigint, children: BigUint64Array): void;
1673
+ /**
1674
+ * Creates a new TaffyTree with pre-allocated capacity
1675
+ *
1676
+ * Use this when you know approximately how many nodes will be in the tree.
1677
+ * This can improve performance by reducing memory reallocations.
1678
+ *
1679
+ * @param capacity - The number of nodes to pre-allocate space for
1680
+ *
1681
+ * @example
1682
+ * ```typescript
1683
+ * const tree: TaffyTree = TaffyTree.withCapacity(1000);
1684
+ * ```
1685
+ */
1686
+ static withCapacity(capacity: number): TaffyTree;
1687
+ /**
1688
+ * Computes the layout for a subtree
1689
+ *
1690
+ * This is the main layout computation method. Call this on the root node
1691
+ * to compute layouts for all nodes in the tree.
1692
+ *
1693
+ * @param node - The root node ID to compute layout for
1694
+ * @param availableSpace - The available space constraints
1695
+ *
1696
+ * @example
1697
+ * ```typescript
1698
+ * const tree = new TaffyTree();
1699
+ * const rootId = tree.newLeaf(new Style());
1700
+ *
1701
+ * // Fixed size container
1702
+ * tree.computeLayout(rootId, { width: 800, height: 600 });
1703
+ *
1704
+ * // Flexible width, fixed height
1705
+ * tree.computeLayout(rootId, { width: "max-content", height: 600 });
1706
+ *
1707
+ * // Minimum content size
1708
+ * tree.computeLayout(rootId, { width: "min-content", height: "min-content" });
1709
+ * ```
1710
+ *
1711
+ * @throws `TaffyError` if the node does not exist or available space is invalid
1712
+ *
1713
+ * @example
1714
+ * ```typescript
1715
+ * const tree = new TaffyTree();
1716
+ * const rootId = tree.newLeaf(new Style());
1717
+ * tree.computeLayout(rootId, { width: 800, height: 600 });
1718
+ * ```
1719
+ */
1720
+ computeLayout(node: bigint, availableSpace: Size<AvailableSpace>): void;
1721
+ /**
1722
+ * Enables rounding of layout values to whole pixels
1723
+ *
1724
+ * When enabled (default), computed layout values like position and size
1725
+ * are rounded to the nearest integer. This prevents sub-pixel rendering
1726
+ * issues in most rendering contexts.
1727
+ *
1728
+ * @example
1729
+ * ```typescript
1730
+ * const tree = new TaffyTree();
1731
+ * tree.enableRounding();
1732
+ * ```
1733
+ */
1734
+ enableRounding(): void;
1735
+ /**
1736
+ * Disables rounding of layout values
1737
+ *
1738
+ * When disabled, computed layout values retain their fractional precision.
1739
+ * Use this when you need sub-pixel accuracy or when performing custom
1740
+ * rounding.
1741
+ *
1742
+ * @example
1743
+ * ```typescript
1744
+ * const tree = new TaffyTree();
1745
+ * const node = tree.newLeaf(new Style());
1746
+ * tree.disableRounding();
1747
+ * const layout = tree.getLayout(node);
1748
+ * console.log(layout.x);
1749
+ * ```
1750
+ */
1751
+ disableRounding(): void;
1752
+ /**
1753
+ * Gets the context value for a node
1754
+ *
1755
+ * @param node - The node ID
1756
+ *
1757
+ * @returns - The attached context value, or `undefined` if none is set
1758
+ *
1759
+ * @example
1760
+ * ```typescript
1761
+ * const tree = new TaffyTree();
1762
+ * const nodeId = tree.newLeaf(new Style());
1763
+ * interface Context { text: string };
1764
+ * const context = tree.getNodeContext(nodeId) as Context | undefined;
1765
+ * if (context) {
1766
+ * console.log(context.text);
1767
+ * }
1768
+ * ```
1769
+ */
1770
+ getNodeContext(node: bigint): any;
1771
+ /**
1772
+ * Sets a context value for a node
1773
+ *
1774
+ * The context can be any JavaScript value and is passed to the measure
1775
+ * function during layout computation.
1776
+ *
1777
+ * @param node - The node ID
1778
+ * @param context - Any JavaScript value to attach
1779
+ *
1780
+ * @throws `TaffyError` if the node does not exist
1781
+ *
1782
+ * @example
1783
+ * ```typescript
1784
+ * const tree = new TaffyTree();
1785
+ * const nodeId = tree.newLeaf(new Style());
1786
+ * interface Context { text: string };
1787
+ * tree.setNodeContext(nodeId, { text: "Updated text" } as Context);
1788
+ * ```
1789
+ */
1790
+ setNodeContext(node: bigint, context: any): void;
1791
+ /**
1792
+ * Gets the total number of nodes in the tree
1793
+ *
1794
+ * @returns - The total count of all nodes
1795
+ *
1796
+ * @example
1797
+ * ```typescript
1798
+ * const tree = new TaffyTree();
1799
+ * const count: number = tree.totalNodeCount();
1800
+ * ```
1801
+ */
1802
+ totalNodeCount(): number;
1803
+ /**
1804
+ * Gets the unrounded (fractional) layout for a node
1805
+ *
1806
+ * Returns the raw computed values before any rounding is applied.
1807
+ * Useful when you need sub-pixel precision.
1808
+ *
1809
+ * @param node - The node ID
1810
+ *
1811
+ * @returns - The unrounded `Layout`
1812
+ *
1813
+ * @example
1814
+ * ```typescript
1815
+ * const tree = new TaffyTree();
1816
+ * const nodeId = tree.newLeaf(new Style());
1817
+ * const layout: Layout = tree.unroundedLayout(nodeId);
1818
+ * console.log(`Exact width: ${layout.width}`);
1819
+ * ```
1820
+ */
1821
+ unroundedLayout(node: bigint): Layout;
1822
+ /**
1823
+ * Creates a new node with the given children
1824
+ *
1825
+ * Use this to create container nodes that have child elements.
1826
+ * The children must already exist in the tree.
1827
+ *
1828
+ * @param style - The style configuration for the node
1829
+ * @param children - Array of child node IDs (as BigUint64Array)
1830
+ *
1831
+ * @returns - The node ID (`bigint`)
1832
+ *
1833
+ * @throws `TaffyError` if the node cannot be created
1834
+ *
1835
+ * @example
1836
+ * ```typescript
1837
+ * const tree = new TaffyTree();
1838
+ * const containerStyle = new Style();
1839
+ * containerStyle.display = Display.Flex;
1840
+ *
1841
+ * const child1: bigint = tree.newLeaf(new Style());
1842
+ * const child2: bigint = tree.newLeaf(new Style());
1843
+ *
1844
+ * const container: bigint = tree.newWithChildren(
1845
+ * containerStyle,
1846
+ * BigUint64Array.from([child1, child2])
1847
+ * );
1848
+ * ```
1849
+ */
1850
+ newWithChildren(style: Style, children: BigUint64Array): bigint;
1851
+ /**
1852
+ * Gets the child at a specific index
1853
+ *
1854
+ * @param parent - The parent node ID
1855
+ * @param index - The index of the child (0-based)
1856
+ *
1857
+ * @returns - The child node ID (`bigint`)
1858
+ *
1859
+ * @throws `TaffyError` if the parent node does not exist or index is out of bounds
1860
+ *
1861
+ * @example
1862
+ * ```typescript
1863
+ * const tree = new TaffyTree();
1864
+ * const parentId = tree.newLeaf(new Style());
1865
+ * const childId = tree.newLeaf(new Style());
1866
+ * tree.addChild(parentId, childId);
1867
+ * const firstChild: bigint = tree.getChildAtIndex(parentId, 0);
1868
+ * ```
1869
+ */
1870
+ getChildAtIndex(parent: bigint, index: number): bigint;
1871
+ /**
1872
+ * Gets detailed layout information for grid layouts
1873
+ *
1874
+ * @note
1875
+ * This method is only available when the `detailed_layout_info`
1876
+ * feature is enabled.
1877
+ *
1878
+ * @param node - The node ID
1879
+ *
1880
+ * @returns - Detailed grid info or "None" for non-grid nodes
1881
+ *
1882
+ * @throws `TaffyError` if the node does not exist
1883
+ */
1884
+ detailedLayoutInfo(node: bigint): any;
1885
+ /**
1886
+ * Gets a mutable reference to the context value for a node
1887
+ *
1888
+ * In JavaScript, this behaves the same as `getNodeContext()` since
1889
+ * JavaScript objects are always passed by reference.
1890
+ *
1891
+ * @param node - The node ID
1892
+ *
1893
+ * @returns - The attached context value, or `undefined` if none is set
1894
+ */
1895
+ getNodeContextMut(node: bigint): any;
1896
+ /**
1897
+ * Inserts a child at a specific index
1898
+ *
1899
+ * @param parent - The parent node ID
1900
+ * @param index - The position to insert at (0-based)
1901
+ * @param child - The child node ID to insert
1902
+ *
1903
+ * @throws `TaffyError` if the parent or child node does not exist, or index is out of bounds
1904
+ *
1905
+ * @example
1906
+ * ```typescript
1907
+ * const tree = new TaffyTree();
1908
+ * const parentId = tree.newLeaf(new Style());
1909
+ * const childId = tree.newLeaf(new Style());
1910
+ * tree.insertChildAtIndex(parentId, 0, childId);
1911
+ * ```
1912
+ */
1913
+ insertChildAtIndex(parent: bigint, index: number, child: bigint): void;
1914
+ /**
1915
+ * Creates a new leaf node with an attached context value
1916
+ *
1917
+ * The context can be any JavaScript value and is passed to the measure
1918
+ * function during layout computation. This is useful for storing
1919
+ * references to text content or other dynamic data.
1920
+ *
1921
+ * @param style - The style configuration for the node
1922
+ * @param context - Any JavaScript value to attach to the node
1923
+ * @returns - The node ID (`bigint`)
1924
+ * @throws `TaffyError` if the node cannot be created
1925
+ *
1926
+ * @example
1927
+ * ```typescript
1928
+ * interface TextContext { text: string; isBold: boolean; }
1929
+ *
1930
+ * const tree = new TaffyTree();
1931
+ * const style = new Style();
1932
+ * const context: TextContext = { text: "Hello, World!", isBold: true };
1933
+ * const nodeId: bigint = tree.newLeafWithContext(style, context);
1934
+ * ```
1935
+ */
1936
+ newLeafWithContext(style: Style, context: any): bigint;
1937
+ /**
1938
+ * Removes a child at a specific index
1939
+ *
1940
+ * @param parent - The parent node ID
1941
+ * @param index - The index of the child to remove (0-based)
1942
+ *
1943
+ * @returns - The removed child ID (`bigint`)
1944
+ *
1945
+ * @throws `TaffyError` if the parent node does not exist or index is out of bounds
1946
+ *
1947
+ * @example
1948
+ * ```typescript
1949
+ * const tree = new TaffyTree();
1950
+ * const parentId = tree.newLeaf(new Style());
1951
+ * const childId = tree.newLeaf(new Style());
1952
+ * tree.addChild(parentId, childId);
1953
+ * const removedId: bigint = tree.removeChildAtIndex(parentId, 0);
1954
+ * ```
1955
+ */
1956
+ removeChildAtIndex(parent: bigint, index: number): bigint;
1957
+ /**
1958
+ * Removes a range of children
1959
+ *
1960
+ * Removes children from `start_index` (inclusive) to `end_index` (exclusive).
1961
+ *
1962
+ * @param parent - The parent node ID
1963
+ * @param startIndex - Start of range (inclusive)
1964
+ * @param endIndex - End of range (exclusive)
1965
+ *
1966
+ * @throws `TaffyError` if the parent node does not exist or range is invalid
1967
+ *
1968
+ * @example
1969
+ * ```typescript
1970
+ * const tree = new TaffyTree();
1971
+ * const parentId = tree.newLeaf(new Style());
1972
+ * const child1 = tree.newLeaf(new Style());
1973
+ * const child2 = tree.newLeaf(new Style());
1974
+ * const child3 = tree.newLeaf(new Style());
1975
+ * tree.setChildren(parentId, BigUint64Array.from([child1, child2, child3]));
1976
+ *
1977
+ * tree.removeChildrenRange(parentId, 1, 3);
1978
+ * ```
1979
+ */
1980
+ removeChildrenRange(parent: bigint, startIndex: number, endIndex: number): void;
1981
+ /**
1982
+ * Replaces a child at a specific index
1983
+ *
1984
+ * @param parent - The parent node ID
1985
+ * @param index - The index of the child to replace (0-based)
1986
+ * @param newChild - The new child node ID
1987
+ *
1988
+ * @returns - The replaced (old) child ID (`bigint`)
1989
+ *
1990
+ * @throws `TaffyError` if the parent node does not exist or index is out of bounds
1991
+ *
1992
+ * @example
1993
+ * ```typescript
1994
+ * const tree = new TaffyTree();
1995
+ * const parentId = tree.newLeaf(new Style());
1996
+ * const oldChild = tree.newLeaf(new Style());
1997
+ * const newChildId = tree.newLeaf(new Style());
1998
+ * tree.addChild(parentId, oldChild);
1999
+ * const child = tree.newLeaf(new Style()); // filler child at index 0 if needed, but index 1 implies 2 children
2000
+ * tree.insertChildAtIndex(parentId, 0, child);
2001
+ *
2002
+ * const oldChildId: bigint = tree.replaceChildAtIndex(parentId, 1, newChildId);
2003
+ * ```
2004
+ */
2005
+ replaceChildAtIndex(parent: bigint, index: number, newChild: bigint): bigint;
2006
+ /**
2007
+ * Computes layout with a custom measure function for leaf nodes
2008
+ *
2009
+ * Use this when you have leaf nodes with dynamic content (like text)
2010
+ * that needs to be measured during layout. The measure function is
2011
+ * called for each leaf node that needs measurement.
2012
+ *
2013
+ * @param node - The root node ID to compute layout for
2014
+ * @param availableSpace - The available space constraints
2015
+ * @param measureFunc - A function that measures leaf node content
2016
+ *
2017
+ * @throws `TaffyError` if the node does not exist or available space is invalid
2018
+ *
2019
+ * @example
2020
+ * ```typescript
2021
+ * const tree = new TaffyTree();
2022
+ * const rootId = tree.newLeaf(new Style());
2023
+ *
2024
+ * const measureText = (text: string, width: number) => ({ width: 0, height: 0 });
2025
+ *
2026
+ * tree.computeLayoutWithMeasure(
2027
+ * rootId,
2028
+ * { width: 800, height: "max-content" },
2029
+ * (known, available, node, context, style) => {
2030
+ * if (context?.text) {
2031
+ * const measured = measureText(context.text, available.width as number);
2032
+ * return { width: measured.width, height: measured.height };
2033
+ * }
2034
+ * return { width: 0, height: 0 };
2035
+ * }
2036
+ * );
2037
+ * ```
2038
+ */
2039
+ computeLayoutWithMeasure(node: bigint, availableSpace: Size<AvailableSpace>, measureFunc: MeasureFunction): void;
2040
+ /**
2041
+ * Gets context values for multiple nodes at once
2042
+ *
2043
+ * This is more efficient than calling `getNodeContext()` multiple times
2044
+ * when you need to access contexts for many nodes.
2045
+ *
2046
+ * @param children - Array of node IDs
2047
+ *
2048
+ * @returns - Array of context values (undefined for nodes without context)
2049
+ *
2050
+ * @example
2051
+ * ```typescript
2052
+ * const tree = new TaffyTree();
2053
+ * const id1 = tree.newLeaf(new Style());
2054
+ * const id2 = tree.newLeaf(new Style());
2055
+ * const nodes = BigUint64Array.from([id1, id2]);
2056
+ * const contexts = tree.getDisjointNodeContextMut(nodes);
2057
+ * ```
2058
+ */
2059
+ getDisjointNodeContextMut(children: BigUint64Array): any[];
2060
+ /**
2061
+ * Creates a new empty TaffyTree
2062
+ *
2063
+ * The tree starts with no nodes. Use `newLeaf()` or `newWithChildren()`
2064
+ * to add nodes.
2065
+ *
2066
+ * @example
2067
+ * ```typescript
2068
+ * const tree: TaffyTree = new TaffyTree();
2069
+ * ```
2070
+ */
2071
+ constructor();
2072
+ /**
2073
+ * Removes all nodes from the tree
2074
+ *
2075
+ * This clears the entire tree, removing all nodes and their relationships.
2076
+ * Use this to reset the tree for reuse.
2077
+ *
2078
+ * @example
2079
+ * ```typescript
2080
+ * const tree = new TaffyTree();
2081
+ * tree.clear();
2082
+ * console.log(tree.totalNodeCount());
2083
+ * ```
2084
+ */
2085
+ clear(): void;
2086
+ /**
2087
+ * Checks if a node is dirty (needs re-layout)
2088
+ *
2089
+ * A node is dirty if its style or content has changed since the last
2090
+ * layout computation.
2091
+ *
2092
+ * @param node - The node ID to check
2093
+ *
2094
+ * @returns - true if dirty, false otherwise
2095
+ *
2096
+ * @throws `TaffyError` if the node does not exist
2097
+ *
2098
+ * @example
2099
+ * ```typescript
2100
+ * const tree = new TaffyTree();
2101
+ * const rootId = tree.newLeaf(new Style());
2102
+ * const nodeId = rootId;
2103
+ * const availableSpace = { width: 100, height: 100 };
2104
+ *
2105
+ * if (tree.dirty(nodeId)) {
2106
+ * tree.computeLayout(rootId, availableSpace);
2107
+ * }
2108
+ * ```
2109
+ */
2110
+ dirty(node: bigint): boolean;
2111
+ /**
2112
+ * Gets the style for a node
2113
+ *
2114
+ * @param node - The node ID
2115
+ *
2116
+ * @returns - The node's `Style`
2117
+ *
2118
+ * @throws `TaffyError` if the node does not exist
2119
+ *
2120
+ * @example
2121
+ * ```typescript
2122
+ * const tree = new TaffyTree();
2123
+ * const nodeId = tree.newLeaf(new Style());
2124
+ * const style: Style = tree.getStyle(nodeId);
2125
+ * console.log('Flex grow:', style.flexGrow);
2126
+ * ```
2127
+ */
2128
+ getStyle(node: bigint): Style;
2129
+ /**
2130
+ * Gets the computed layout for a node
2131
+ *
2132
+ * Call this after `computeLayout()` to retrieve the computed position
2133
+ * and size for a node.
2134
+ *
2135
+ * @param node - The node ID
2136
+ *
2137
+ * @returns - The computed `Layout`
2138
+ *
2139
+ * @throws `TaffyError` if the node does not exist
2140
+ *
2141
+ * @example
2142
+ * ```typescript
2143
+ * const tree = new TaffyTree();
2144
+ * const style = new Style();
2145
+ * style.size = { width: 100, height: 100 };
2146
+ * const rootId = tree.newLeaf(style);
2147
+ * const nodeId = rootId;
2148
+ *
2149
+ * tree.computeLayout(rootId, { width: 800, height: 600 });
2150
+ * const layout: Layout = tree.getLayout(nodeId);
2151
+ * console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
2152
+ * ```
2153
+ */
2154
+ getLayout(node: bigint): Layout;
2155
+ /**
2156
+ * Gets the parent of a node
2157
+ *
2158
+ * @param child - The child node ID
2159
+ *
2160
+ * @returns - The parent node ID, or `undefined` if the node has no parent
2161
+ *
2162
+ * @example
2163
+ * ```typescript
2164
+ * const tree = new TaffyTree();
2165
+ * const parentId = tree.newLeaf(new Style());
2166
+ * const childId = tree.newLeaf(new Style());
2167
+ * tree.addChild(parentId, childId);
2168
+ * const parent: bigint | undefined = tree.parent(childId);
2169
+ * ```
2170
+ */
2171
+ parent(child: bigint): bigint | undefined;
2172
+ /**
2173
+ * Removes a node from the tree
2174
+ *
2175
+ * The node and all its descendants are removed. If the node has a parent,
2176
+ * it is automatically removed from the parent's children.
2177
+ *
2178
+ * @param node - The node ID to remove
2179
+ *
2180
+ * @returns - The removed node ID (`bigint`)
2181
+ *
2182
+ * @throws `TaffyError` if the node does not exist
2183
+ *
2184
+ * @example
2185
+ * ```typescript
2186
+ * const tree = new TaffyTree();
2187
+ * const nodeId = tree.newLeaf(new Style());
2188
+ * try {
2189
+ * const removedId: bigint = tree.remove(nodeId);
2190
+ * } catch (e) {
2191
+ * console.error("Node doesn't exist");
2192
+ * }
2193
+ * ```
2194
+ */
2195
+ remove(node: bigint): bigint;
2196
+ /**
2197
+ * Gets all children of a node
2198
+ *
2199
+ * @param parent - The parent node ID
2200
+ *
2201
+ * @returns - Array of child node IDs (`BigUint64Array`)
2202
+ *
2203
+ * @throws `TaffyError` if the parent node does not exist
2204
+ *
2205
+ * @example
2206
+ * ```typescript
2207
+ * const tree = new TaffyTree();
2208
+ * const parentId = tree.newLeaf(new Style());
2209
+ * const children: BigUint64Array = tree.children(parentId);
2210
+ * ```
2211
+ */
2212
+ children(parent: bigint): BigUint64Array;
2213
+ /**
2214
+ * Creates a new leaf node with the given style
2215
+ *
2216
+ * A leaf node has no children. Use this for elements that contain
2217
+ * content (like text) rather than other elements.
2218
+ *
2219
+ * @param style - The style configuration for the node
2220
+ * @returns - The node ID (`bigint`)
2221
+ * @throws `TaffyError` if the node cannot be created
2222
+ *
2223
+ * @example
2224
+ * ```typescript
2225
+ * const tree = new TaffyTree();
2226
+ * const style = new Style();
2227
+ * style.size = { width: 100, height: 50 };
2228
+ * const nodeId: bigint = tree.newLeaf(style);
2229
+ * ```
2230
+ */
2231
+ newLeaf(style: Style): bigint;
2232
+ /**
2233
+ * Appends a child node to a parent
2234
+ *
2235
+ * The child is added as the last child of the parent.
2236
+ *
2237
+ * @param parent - The parent node ID
2238
+ * @param child - The child node ID to add
2239
+ *
2240
+ * @throws `TaffyError` if the parent or child node does not exist
2241
+ *
2242
+ * @example
2243
+ * ```typescript
2244
+ * const tree = new TaffyTree();
2245
+ * const parentId = tree.newLeaf(new Style());
2246
+ * const childId = tree.newLeaf(new Style());
2247
+ * tree.addChild(parentId, childId);
2248
+ * ```
2249
+ */
2250
+ addChild(parent: bigint, child: bigint): void;
2251
+ /**
2252
+ * Sets the style for an existing node
2253
+ *
2254
+ * This replaces the node's current style with the provided one.
2255
+ * The node will be marked as dirty and require re-layout.
2256
+ *
2257
+ * @param node - The node ID
2258
+ * @param style - The new style configuration
2259
+ *
2260
+ * @throws `TaffyError` if the node does not exist
2261
+ *
2262
+ * @example
2263
+ * ```typescript
2264
+ * const tree = new TaffyTree();
2265
+ * const nodeId = tree.newLeaf(new Style());
2266
+ * const newStyle = new Style();
2267
+ * newStyle.flexGrow = 2;
2268
+ * tree.setStyle(nodeId, newStyle);
2269
+ * ```
2270
+ */
2271
+ setStyle(node: bigint, style: Style): void;
2272
+ }
2273
+
2274
+ /**
2275
+ * Text alignment enumeration (for block layout)
2276
+ *
2277
+ * Used by block layout to implement the legacy behaviour of `<center>` and
2278
+ * `<div align="left | right | center">`.
2279
+ *
2280
+ * @example
2281
+ * ```typescript
2282
+ * import { Style, TextAlign } from 'taffy-layout';
2283
+ *
2284
+ * const style = new Style();
2285
+ * style.textAlign = TextAlign.LegacyCenter; // Center block children
2286
+ * ```
2287
+ */
2288
+ export enum TextAlign {
2289
+ /**
2290
+ * No special legacy text align behaviour
2291
+ */
2292
+ Auto = 0,
2293
+ /**
2294
+ * Corresponds to `-webkit-left` or `-moz-left` in browsers
2295
+ */
2296
+ LegacyLeft = 1,
2297
+ /**
2298
+ * Corresponds to `-webkit-right` or `-moz-right` in browsers
2299
+ */
2300
+ LegacyRight = 2,
2301
+ /**
2302
+ * Corresponds to `-webkit-center` or `-moz-center` in browsers
2303
+ */
2304
+ LegacyCenter = 3,
2305
+ }
2306
+
2307
+ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
2308
+
2309
+ export interface InitOutput {
2310
+ readonly memory: WebAssembly.Memory;
2311
+ readonly __wbg_layout_free: (a: number, b: number) => void;
2312
+ readonly __wbg_style_free: (a: number, b: number) => void;
2313
+ readonly __wbg_taffyerror_free: (a: number, b: number) => void;
2314
+ readonly __wbg_taffytree_free: (a: number, b: number) => void;
2315
+ readonly layout_borderBottom: (a: number) => number;
2316
+ readonly layout_borderLeft: (a: number) => number;
2317
+ readonly layout_borderRight: (a: number) => number;
2318
+ readonly layout_borderTop: (a: number) => number;
2319
+ readonly layout_contentHeight: (a: number) => number;
2320
+ readonly layout_contentWidth: (a: number) => number;
2321
+ readonly layout_height: (a: number) => number;
2322
+ readonly layout_marginBottom: (a: number) => number;
2323
+ readonly layout_marginLeft: (a: number) => number;
2324
+ readonly layout_marginRight: (a: number) => number;
2325
+ readonly layout_marginTop: (a: number) => number;
2326
+ readonly layout_order: (a: number) => number;
2327
+ readonly layout_paddingBottom: (a: number) => number;
2328
+ readonly layout_paddingLeft: (a: number) => number;
2329
+ readonly layout_paddingRight: (a: number) => number;
2330
+ readonly layout_paddingTop: (a: number) => number;
2331
+ readonly layout_scrollbarHeight: (a: number) => number;
2332
+ readonly layout_scrollbarWidth: (a: number) => number;
2333
+ readonly layout_width: (a: number) => number;
2334
+ readonly layout_x: (a: number) => number;
2335
+ readonly layout_y: (a: number) => number;
2336
+ readonly style_alignContent: (a: number) => number;
2337
+ readonly style_alignItems: (a: number) => number;
2338
+ readonly style_alignSelf: (a: number) => number;
2339
+ readonly style_aspectRatio: (a: number) => number;
2340
+ readonly style_border: (a: number) => any;
2341
+ readonly style_boxSizing: (a: number) => number;
2342
+ readonly style_display: (a: number) => number;
2343
+ readonly style_flexBasis: (a: number) => any;
2344
+ readonly style_flexDirection: (a: number) => number;
2345
+ readonly style_flexGrow: (a: number) => number;
2346
+ readonly style_flexShrink: (a: number) => number;
2347
+ readonly style_flexWrap: (a: number) => number;
2348
+ readonly style_gap: (a: number) => any;
2349
+ readonly style_gridAutoColumns: (a: number) => any;
2350
+ readonly style_gridAutoFlow: (a: number) => number;
2351
+ readonly style_gridAutoRows: (a: number) => any;
2352
+ readonly style_gridColumn: (a: number) => any;
2353
+ readonly style_gridRow: (a: number) => any;
2354
+ readonly style_gridTemplateAreas: (a: number) => any;
2355
+ readonly style_gridTemplateColumnNames: (a: number) => any;
2356
+ readonly style_gridTemplateColumns: (a: number) => any;
2357
+ readonly style_gridTemplateRowNames: (a: number) => any;
2358
+ readonly style_gridTemplateRows: (a: number) => any;
2359
+ readonly style_inset: (a: number) => any;
2360
+ readonly style_itemIsReplaced: (a: number) => number;
2361
+ readonly style_itemIsTable: (a: number) => number;
2362
+ readonly style_justifyContent: (a: number) => number;
2363
+ readonly style_justifyItems: (a: number) => number;
2364
+ readonly style_justifySelf: (a: number) => number;
2365
+ readonly style_margin: (a: number) => any;
2366
+ readonly style_maxSize: (a: number) => any;
2367
+ readonly style_minSize: (a: number) => any;
2368
+ readonly style_new: () => number;
2369
+ readonly style_overflow: (a: number) => any;
2370
+ readonly style_padding: (a: number) => any;
2371
+ readonly style_position: (a: number) => number;
2372
+ readonly style_scrollbarWidth: (a: number) => number;
2373
+ readonly style_set_alignContent: (a: number, b: any) => void;
2374
+ readonly style_set_alignItems: (a: number, b: any) => void;
2375
+ readonly style_set_alignSelf: (a: number, b: any) => void;
2376
+ readonly style_set_aspectRatio: (a: number, b: any) => void;
2377
+ readonly style_set_border: (a: number, b: any) => void;
2378
+ readonly style_set_boxSizing: (a: number, b: number) => void;
2379
+ readonly style_set_display: (a: number, b: number) => void;
2380
+ readonly style_set_flexBasis: (a: number, b: any) => void;
2381
+ readonly style_set_flexDirection: (a: number, b: number) => void;
2382
+ readonly style_set_flexGrow: (a: number, b: number) => void;
2383
+ readonly style_set_flexShrink: (a: number, b: number) => void;
2384
+ readonly style_set_flexWrap: (a: number, b: number) => void;
2385
+ readonly style_set_gap: (a: number, b: any) => void;
2386
+ readonly style_set_gridAutoColumns: (a: number, b: any) => void;
2387
+ readonly style_set_gridAutoFlow: (a: number, b: number) => void;
2388
+ readonly style_set_gridAutoRows: (a: number, b: any) => void;
2389
+ readonly style_set_gridColumn: (a: number, b: any) => void;
2390
+ readonly style_set_gridRow: (a: number, b: any) => void;
2391
+ readonly style_set_gridTemplateAreas: (a: number, b: any) => void;
2392
+ readonly style_set_gridTemplateColumnNames: (a: number, b: any) => void;
2393
+ readonly style_set_gridTemplateColumns: (a: number, b: any) => void;
2394
+ readonly style_set_gridTemplateRowNames: (a: number, b: any) => void;
2395
+ readonly style_set_gridTemplateRows: (a: number, b: any) => void;
2396
+ readonly style_set_inset: (a: number, b: any) => void;
2397
+ readonly style_set_itemIsReplaced: (a: number, b: number) => void;
2398
+ readonly style_set_itemIsTable: (a: number, b: number) => void;
2399
+ readonly style_set_justifyContent: (a: number, b: any) => void;
2400
+ readonly style_set_justifyItems: (a: number, b: any) => void;
2401
+ readonly style_set_justifySelf: (a: number, b: any) => void;
2402
+ readonly style_set_margin: (a: number, b: any) => void;
2403
+ readonly style_set_maxSize: (a: number, b: any) => void;
2404
+ readonly style_set_minSize: (a: number, b: any) => void;
2405
+ readonly style_set_overflow: (a: number, b: any) => void;
2406
+ readonly style_set_padding: (a: number, b: any) => void;
2407
+ readonly style_set_position: (a: number, b: number) => void;
2408
+ readonly style_set_scrollbarWidth: (a: number, b: number) => void;
2409
+ readonly style_set_size: (a: number, b: any) => void;
2410
+ readonly style_set_textAlign: (a: number, b: number) => void;
2411
+ readonly style_size: (a: number) => any;
2412
+ readonly style_textAlign: (a: number) => number;
2413
+ readonly taffyerror_message: (a: number) => [number, number];
2414
+ readonly taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
2415
+ readonly taffytree_childCount: (a: number, b: bigint) => number;
2416
+ readonly taffytree_children: (a: number, b: bigint) => [number, number, number, number];
2417
+ readonly taffytree_clear: (a: number) => void;
2418
+ readonly taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
2419
+ readonly taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
2420
+ readonly taffytree_detailedLayoutInfo: (a: number, b: bigint) => [number, number, number];
2421
+ readonly taffytree_dirty: (a: number, b: bigint) => [number, number, number];
2422
+ readonly taffytree_disableRounding: (a: number) => void;
2423
+ readonly taffytree_enableRounding: (a: number) => void;
2424
+ readonly taffytree_getChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
2425
+ readonly taffytree_getDisjointNodeContextMut: (a: number, b: number, c: number) => [number, number, number, number];
2426
+ readonly taffytree_getLayout: (a: number, b: bigint) => [number, number, number];
2427
+ readonly taffytree_getNodeContext: (a: number, b: bigint) => [number, number, number];
2428
+ readonly taffytree_getNodeContextMut: (a: number, b: bigint) => [number, number, number];
2429
+ readonly taffytree_getStyle: (a: number, b: bigint) => [number, number, number];
2430
+ readonly taffytree_insertChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [number, number];
2431
+ readonly taffytree_markDirty: (a: number, b: bigint) => [number, number];
2432
+ readonly taffytree_new: () => number;
2433
+ readonly taffytree_newLeaf: (a: number, b: number) => [bigint, number, number];
2434
+ readonly taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
2435
+ readonly taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
2436
+ readonly taffytree_parent: (a: number, b: bigint) => [number, bigint];
2437
+ readonly taffytree_printTree: (a: number, b: bigint) => void;
2438
+ readonly taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
2439
+ readonly taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint, number, number];
2440
+ readonly taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
2441
+ readonly taffytree_removeChildrenRange: (a: number, b: bigint, c: number, d: number) => [number, number];
2442
+ readonly taffytree_replaceChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [bigint, number, number];
2443
+ readonly taffytree_setChildren: (a: number, b: bigint, c: number, d: number) => [number, number];
2444
+ readonly taffytree_setNodeContext: (a: number, b: bigint, c: any) => [number, number];
2445
+ readonly taffytree_setStyle: (a: number, b: bigint, c: number) => [number, number];
2446
+ readonly taffytree_totalNodeCount: (a: number) => number;
2447
+ readonly taffytree_unroundedLayout: (a: number, b: bigint) => number;
2448
+ readonly taffytree_withCapacity: (a: number) => number;
2449
+ readonly __wbindgen_malloc: (a: number, b: number) => number;
2450
+ readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
2451
+ readonly __wbindgen_exn_store: (a: number) => void;
2452
+ readonly __externref_table_alloc: () => number;
2453
+ readonly __wbindgen_externrefs: WebAssembly.Table;
2454
+ readonly __wbindgen_free: (a: number, b: number, c: number) => void;
2455
+ readonly __externref_table_dealloc: (a: number) => void;
2456
+ readonly __externref_drop_slice: (a: number, b: number) => void;
2457
+ readonly __wbindgen_start: () => void;
2458
+ }
2459
+
2460
+ export type SyncInitInput = BufferSource | WebAssembly.Module;
2461
+
2462
+ /**
2463
+ * Instantiates the given `module`, which can either be bytes or
2464
+ * a precompiled `WebAssembly.Module`.
2465
+ *
2466
+ * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
2467
+ *
2468
+ * @returns {InitOutput}
2469
+ */
2470
+ export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
2471
+
2472
+ /**
2473
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
2474
+ * for everything else, calls `WebAssembly.instantiate` directly.
2475
+ *
2476
+ * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
2477
+ *
2478
+ * @returns {Promise<InitOutput>}
2479
+ */
2480
+ export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;