@thi.ng/layout 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2025-07-22T10:52:52Z
+- **Last updated**: 2025-07-26T12:33:06Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -11,6 +11,17 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+# [4.0.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/layout@4.0.0) (2025-07-26)
+
+#### 🛑 Breaking changes
+
+- add support for separate X/Y gaps/gutters ([cdc3385](https://github.com/thi-ng/umbrella/commit/cdc3385))
+- BREAKING CHANGE: update `LayoutBox` and `IGridLayout`, split `gap` into `gapX` and `gapY`
+  - update `LayoutBox`, `IGridLayout`
+  - update `IGridLayout.nest()` to support differing gaps/gutters
+  - update `GridLayout` and `StackedLayout` impls
+  - add/update docs
+
 ## [3.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/layout@3.2.0) (2025-07-22)
 
 #### 🚀 Features

package/README.md

@@ -74,7 +74,7 @@ For Node.js REPL:
 const l = await import("@thi.ng/layout");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 1.21 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 1.22 KB
 
 ## Dependencies
 
@@ -116,9 +116,10 @@ import * as g from "@thi.ng/geom";
 import { gridLayout, type LayoutBox } from "@thi.ng/layout";
 import { writeFileSync } from "node:fs";
 
-// collection of generated layout cells
+// collection of generated layout boxes/cells
 const cells: g.Group[] = [];
 
+// helper function to collect & visualize layout boxes
 const addRect = (id: number, box: LayoutBox, fill: string) => {
     console.log(box);
     const shape = g.rect([box.x, box.y], [box.w, box.h], { fill });
@@ -139,20 +140,20 @@ const layout = gridLayout(10, 10, 1000, 1, 60, 4);
 
 // get next layout box (1st row, by default the column/row span is [1,1])
 addRect(1, layout.next(), "#fec");
-// { x: 10, y: 10, w: 1000, h: 60, cw: 1000, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 10, y: 10, w: 1000, h: 60, cw: 1000, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 // 2nd row
 addRect(2, layout.next(), "#fec");
-// { x: 10, y: 74, w: 1000, h: 60, cw: 1000, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 10, y: 74, w: 1000, h: 60, cw: 1000, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 // create nested 2-column layout (3rd row)
 const twoCols = layout.nest(2);
 
 addRect(3, twoCols.next(), "#cfc");
-// { x: 10, y: 138, w: 498, h: 60, cw: 498, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 10, y: 138, w: 498, h: 60, cw: 498, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 addRect(4, twoCols.next(), "#cfc");
-// { x: 512, y: 138, w: 498, h: 60, cw: 498, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 512, y: 138, w: 498, h: 60, cw: 498, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 // now nest 3-columns in the 1st column of twoCols
 // (i.e. now each column is 1/6th of the main layout's width)
@@ -160,15 +161,15 @@ const inner = twoCols.nest(3);
 
 // allocate with col/rowspan, here 1 column x 4 rows
 addRect(5, inner.next([1, 4]), "#9ff");
-// { x: 10, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gap: 4, span: [ 1, 4 ] }
+// { x: 10, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gapX: 4, gapY: 4, span: [ 1, 4 ] }
 addRect(6, inner.next([1, 4]), "#9ff");
-// { x: 177.33, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gap: 4, span: [ 1, 4 ] }
+// { x: 177.33, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gapX: 4, gapY: 4, span: [ 1, 4 ] }
 addRect(7, inner.next([1, 4]), "#9ff");
-// { x: 344.66, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gap: 4, span: [ 1, 4 ] }
+// { x: 344.66, y: 202, w: 163.33, h: 252, cw: 163.33, ch: 60, gapX: 4, gapY: 4, span: [ 1, 4 ] }
 
 // back to twoCols (2nd column)
 addRect(8, twoCols.next([1, 2]), "#cfc");
-// { x: 512, y: 202, w: 498, h: 124, cw: 498, ch: 60, gap: 4, span: [ 1, 2 ] }
+// { x: 512, y: 202, w: 498, h: 124, cw: 498, ch: 60, gapX: 4, gapY: 4, span: [ 1, 2 ] }
 
 // export as SVG
 writeFileSync(
@@ -212,9 +213,10 @@ import * as g from "@thi.ng/geom";
 import { stackedLayout, type LayoutBox } from "@thi.ng/layout";
 import { writeFileSync } from "node:fs";
 
-// collection of generated layout cells
+// collection of generated layout boxes/cells
 const cells: g.Group[] = [];
 
+// helper function to collect & visualize layout boxes
 const addRect = (id: number, box: LayoutBox, fill: string) => {
     console.log(box);
     const shape = g.rect([box.x, box.y], [box.w, box.h], { fill });
@@ -235,37 +237,37 @@ const layout = stackedLayout(0, 0, 1000, 4, 60, 4);
 
 // get next layout box (1st column)
 addRect(1, layout.next([1, 2]), "#fec");
-// { x: 0, y: 0, w: 247, h: 124, cw: 247, ch: 60, gap: 4, span: [ 1, 2 ] }
+// { x: 0, y: 0, w: 247, h: 124, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 1, 2 ] }
 
 // 2nd column
 addRect(2, layout.next(), "#fec");
-// { x: 251, y: 0, w: 247, h: 60, cw: 247, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 251, y: 0, w: 247, h: 60, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 // 3rd column
 addRect(3, layout.next([1, 4]), "#fec");
-// { x: 502, y: 0, w: 247, h: 252, cw: 247, ch: 60, gap: 4, span: [ 1, 4 ] }
+// { x: 502, y: 0, w: 247, h: 252, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 1, 4 ] }
 
 // 4th column
 addRect(4, layout.next([1, 1]), "#fec");
-// { x: 753, y: 0, w: 247, h: 60, cw: 247, ch: 60, gap: 4, span: [ 1, 1 ] }
+// { x: 753, y: 0, w: 247, h: 60, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 1, 1 ] }
 
 // 2x2 span
 // (note that this will create a gap in the 2nd column)
 addRect(5, layout.next([2, 2]), "#fec");
-// { x: 0, y: 128, w: 498, h: 124, cw: 247, ch: 60, gap: 4, span: [ 2, 2 ] }
+// { x: 0, y: 128, w: 498, h: 124, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 2, 2 ] }
 
 const inner = layout.nest(2);
 
 addRect(6, inner.next([1, 5]), "#cfc");
-// { x: 753, y: 64, w: 121.5, h: 316, cw: 121.5, ch: 60, gap: 4, span: [ 1, 5 ] }
+// { x: 753, y: 64, w: 121.5, h: 316, cw: 121.5, ch: 60, gapX: 4, gapY: 4, span: [ 1, 5 ] }
 addRect(7, inner.next([1, 5]), "#cfc");
-// { x: 878.5, y: 64, w: 121.5, h: 316, cw: 121.5, ch: 60, gap: 4, span: [ 1, 5 ] }
+// { x: 878.5, y: 64, w: 121.5, h: 316, cw: 121.5, ch: 60, gapX: 4, gapY: 4, span: [ 1, 5 ] }
 
 // fill available space in the other columns
 // (depending on situation, this might have to be done multiple times
 // to fill all available space, please consult documentation)
 addRect(8, layout.next(layout.availableSpan()), "#9ff");
-// { x: 0, y: 256, w: 749, h: 124, cw: 247, ch: 60, gap: 4, span: [ 3, 2 ] }
+// { x: 0, y: 256, w: 749, h: 124, cw: 247, ch: 60, gapX: 4, gapY: 4, span: [ 3, 2 ] }
 
 // export as SVG
 writeFileSync(

package/api.d.ts

@@ -27,9 +27,13 @@ export interface LayoutBox {
      */
     ch: number;
     /**
-     * Gutter size.
+     * Horizontal gutter size.
      */
-    gap: number;
+    gapX: number;
+    /**
+     * Vertical gutter size.
+     */
+    gapY: number;
     /**
      *
      */
@@ -39,13 +43,29 @@ export interface ILayout<O, T> {
     next(opts?: O): T;
 }
 export interface IGridLayout<T extends IGridLayout<T>> extends ILayout<CellSpan, LayoutBox> {
+    readonly parent: IGridLayout<T> | null;
+    /** Left coordinate of entire layout */
     readonly x: number;
+    /** Top coordinate of entire layout */
     readonly y: number;
+    /** Configured total width */
     readonly width: number;
+    /** The current total height of the layout */
+    readonly height: number;
+    /** Configured number of columns */
     readonly cols: number;
+    /** Width of single grid cell (without gap) */
     readonly cellW: number;
+    /** Height of single grid cell (without gap) */
     readonly cellH: number;
-    readonly gap: number;
+    /** Width of single grid cell (incl. gap) */
+    readonly cellWG: number;
+    /** Height of single grid cell (incl. gap) */
+    readonly cellHG: number;
+    /** Horizontal gap/gutter between grid cells */
+    readonly gapX: number;
+    /** Vertical gap/gutter between grid cells */
+    readonly gapY: number;
     /**
      * Returns the number of columns for given width.
      *
@@ -74,43 +94,47 @@ export interface IGridLayout<T extends IGridLayout<T>> extends ILayout<CellSpan,
     /**
      * Requests a `spans` sized cell from this layout (via `.next()`) and
      * creates and returns a new child {@link GridLayout} for the returned box /
-     * grid cell. This child layout is configured to use `cols` columns and
-     * shares same `gap` as this (parent) layout. The configured row span only
-     * acts as initial minimum vertical space reseervation, but is allowed to
-     * grow and if needed will propagate the new space requirements to parent
-     * layouts.
+     * grid cell. This child layout is configured to use `cols` columns and (by
+     * default) shares same `gapX` and `gapY` as this (parent) layout. The
+     * configured row span only acts as initial minimum vertical space
+     * reservation, but is allowed to grow and if needed will propagate the new
+     * space requirements to parent layouts.
      *
-     * Note: this size child-parent size propagation ONLY works until the next
-     * cell is requested from any parent. IOW, child layouts MUST be
+     * IMPORTANT: This child-parent size propagation ONLY works until the next
+     * cell is requested from any parent. Ion other words, child layouts MUST be
      * completed/populated first before continuing with siblings/ancestors of
      * this current layout.
      *
-     * ```
+     * ```ts tangle:../export/nest.ts
      * import { gridLayout } from "@thi.ng/layout";
      *
      * // single column layout (default config)
-     * const outer = gridLayout(null, 0, 0, 200, 1, 16, 4);
+     * const outer = gridLayout(0, 0, 200, 1, 16, 4);
      *
-     * // add button (full 1st row)
-     * button(gui, outer, "foo",...);
+     * // obtain a box for entire 1st row
+     * console.log(outer.next());
+     * // { x: 0, y: 0, w: 200, h: 16, cw: 200, ch: 16, gapX: 4, gapY: 4, span: [ 1, 1 ] }
      *
      * // 2-column nested layout (2nd row)
-     * const inner = outer.nest(2)
-     * // these buttons are on same row
-     * button(gui, inner, "bar",...);
-     * button(gui, inner, "baz",...);
+     * const inner = outer.nest(2);
+     *
+     * // these smaller boxes are on same row
+     * console.log(inner.next());
+     * // { x: 0, y: 20, w: 98, h: 16, cw: 98, ch: 16, gapX: 4, gapY: 4, span: [ 1, 1 ] }
      *
-     * // continue with outer, create empty row
-     * outer.next();
+     * console.log(inner.next());
+     * // { x: 102, y: 20, w: 98, h: 16, cw: 98, ch: 16, gapX: 4, gapY: 4, span: [ 1, 1 ] }
      *
-     * // continue with outer (4th row)
-     * button(gui, outer, "bye",...);
+     * // continue with outer (again full row)
+     * console.log(outer.next());
+     * // { x: 0, y: 40, w: 200, h: 16, cw: 200, ch: 16, gapX: 4, gapY: 4, span: [ 1, 1 ] }
      * ```
      *
      * @param cols - columns in nested layout
      * @param spans - default `[1,1]` (i.e. size of single cell)
-     * @param gap - gap for child layout
+     * @param gapX - horizontal gap for child layout
+     * @param gapY - vertical gap for child layout
      */
-    nest(cols: number, spans?: CellSpan, gap?: number): T;
+    nest(cols: number, spans?: CellSpan, gapX?: number, gapY?: number): T;
 }
 //# sourceMappingURL=api.d.ts.map

package/box.d.ts

@@ -1,3 +1,16 @@
 import type { CellSpan, LayoutBox } from "./api.js";
-export declare const layoutBox: (x: number, y: number, w: number, h: number, cw: number, ch: number, gap: number, span?: CellSpan) => LayoutBox;
+/**
+ * Creates a {@link LayoutBox} object with given details.
+ *
+ * @param x
+ * @param y
+ * @param w
+ * @param h
+ * @param cw
+ * @param ch
+ * @param gapX
+ * @param gapY
+ * @param span
+ */
+export declare const layoutBox: (x: number, y: number, w: number, h: number, cw: number, ch: number, gapX: number, gapY?: number, span?: CellSpan) => LayoutBox;
 //# sourceMappingURL=box.d.ts.map

package/box.js

@@ -1,11 +1,12 @@
-const layoutBox = (x, y, w, h, cw, ch, gap, span) => ({
+const layoutBox = (x, y, w, h, cw, ch, gapX, gapY = gapX, span) => ({
   x,
   y,
   w,
   h,
   cw,
   ch,
-  gap,
+  gapX,
+  gapY,
   span: span || [~~(w / cw), ~~(h / ch)]
 });
 export {

package/grid-layout.d.ts

@@ -1,4 +1,4 @@
-import type { CellSpan, IGridLayout, LayoutBox } from "./api.js";
+import type { CellSpan, IGridLayout } from "./api.js";
 /** @internal */
 export declare const __DEFAULT_SPANS: CellSpan;
 export declare class GridLayout implements IGridLayout<GridLayout> {
@@ -11,19 +11,20 @@ export declare class GridLayout implements IGridLayout<GridLayout> {
     readonly cellH: number;
     readonly cellWG: number;
     readonly cellHG: number;
-    readonly gap: number;
+    readonly gapX: number;
+    readonly gapY: number;
     protected currCol: number;
     protected currRow: number;
     protected rows: number;
-    constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gap: number);
+    constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gapX: number, gapY?: number);
     get height(): number;
     colsForWidth(w: number): number;
     rowsForHeight(h: number): number;
     spanForSize(size: ArrayLike<number>): CellSpan;
     spanForSize(w: number, h: number): CellSpan;
-    next(spans?: CellSpan): LayoutBox;
-    nextSquare(): LayoutBox;
-    nest(cols: number, spans?: CellSpan, gap?: number): GridLayout;
+    next(spans?: CellSpan): import("./api.js").LayoutBox;
+    nextSquare(): import("./api.js").LayoutBox;
+    nest(cols: number, spans?: CellSpan, gapX?: number, gapY?: number): GridLayout;
     /**
      * Updates max rows used in this layout and all of its parents.
      *
@@ -40,7 +41,8 @@ export declare class GridLayout implements IGridLayout<GridLayout> {
  * @param width -
  * @param cols -
  * @param rowH -
- * @param gap -
+ * @param gapX -
+ * @param gapY -
  */
-export declare const gridLayout: (x: number, y: number, width: number, cols?: number, rowH?: number, gap?: number) => GridLayout;
+export declare const gridLayout: (x: number, y: number, width: number, cols?: number, rowH?: number, gapX?: number, gapY?: number) => GridLayout;
 //# sourceMappingURL=grid-layout.d.ts.map

package/grid-layout.js

@@ -1,4 +1,5 @@
 import { isNumber } from "@thi.ng/checks/is-number";
+import { layoutBox } from "./box.js";
 const __DEFAULT_SPANS = [1, 1];
 class GridLayout {
   parent;
@@ -10,21 +11,23 @@ class GridLayout {
   cellH;
   cellWG;
   cellHG;
-  gap;
+  gapX;
+  gapY;
   currCol;
   currRow;
   rows;
-  constructor(parent, x, y, width, cols, rowH, gap) {
+  constructor(parent, x, y, width, cols, rowH, gapX, gapY = gapX) {
     this.parent = parent;
     this.cols = cols;
     this.x = x;
     this.y = y;
     this.width = width;
-    this.cellW = (width - (cols - 1) * gap) / cols;
+    this.cellW = (width - (cols - 1) * gapX) / cols;
     this.cellH = rowH;
-    this.cellWG = this.cellW + gap;
-    this.cellHG = rowH + gap;
-    this.gap = gap;
+    this.cellWG = this.cellW + gapX;
+    this.cellHG = rowH + gapY;
+    this.gapX = gapX;
+    this.gapY = gapY;
     this.currCol = 0;
     this.currRow = 0;
     this.rows = 0;
@@ -39,11 +42,11 @@ class GridLayout {
     return Math.ceil(h / this.cellHG);
   }
   spanForSize(w, h) {
-    const size = isNumber(w) ? [w, h] : w;
+    const size = isNumber(w) ? [w, h ?? w] : w;
     return [this.colsForWidth(size[0]), this.rowsForHeight(size[1])];
   }
   next(spans = __DEFAULT_SPANS) {
-    const { cellWG, cellHG, gap, cols } = this;
+    const { cellWG, cellHG, gapX, gapY, cols } = this;
     const cspan = Math.min(spans[0], cols);
     const rspan = spans[1];
     if (this.currCol > 0) {
@@ -54,33 +57,31 @@ class GridLayout {
     } else {
       this.currRow = this.rows;
     }
-    const h = rspan * cellHG - gap;
-    const cell = {
-      x: this.x + this.currCol * cellWG,
-      y: this.y + this.currRow * cellHG,
-      w: cspan * cellWG - gap,
+    const h = rspan * cellHG - gapY;
+    const cell = layoutBox(
+      this.x + this.currCol * cellWG,
+      this.y + this.currRow * cellHG,
+      cspan * cellWG - gapX,
       h,
-      cw: this.cellW,
-      ch: this.cellH,
-      gap,
-      span: [cspan, rspan]
-    };
+      this.cellW,
+      this.cellH,
+      gapX,
+      gapY,
+      [cspan, rspan]
+    );
     this.propagateSize(rspan);
     this.currCol = Math.min(this.currCol + cspan, cols) % cols;
     return cell;
   }
   // TODO add optional colspan arg, fix rounding
   nextSquare() {
-    const box = this.next([
-      1,
-      Math.ceil(this.cellW / (this.cellH + this.gap)) + 1
-    ]);
+    const box = this.next([1, Math.ceil(this.cellW / this.cellHG) + 1]);
     box.h = box.w;
     return box;
   }
-  nest(cols, spans, gap = this.gap) {
+  nest(cols, spans, gapX = this.gapX, gapY = this.gapY) {
     const { x, y, w } = this.next(spans);
-    return new GridLayout(this, x, y, w, cols, this.cellH, gap);
+    return new GridLayout(this, x, y, w, cols, this.cellH, gapX, gapY);
   }
   /**
    * Updates max rows used in this layout and all of its parents.
@@ -88,12 +89,11 @@ class GridLayout {
    * @param rspan -
    */
   propagateSize(rspan) {
-    let rows = this.rows;
-    this.rows = rows = Math.max(rows, this.currRow + rspan);
-    this.parent?.propagateSize(rows);
+    this.rows = Math.max(this.rows, this.currRow + rspan);
+    this.parent?.propagateSize(this.rows);
   }
 }
-const gridLayout = (x, y, width, cols = 1, rowH = 16, gap = 4) => new GridLayout(null, x, y, width, cols, rowH, gap);
+const gridLayout = (x, y, width, cols = 1, rowH = 16, gapX = 4, gapY = gapX) => new GridLayout(null, x, y, width, cols, rowH, gapX, gapY);
 export {
   GridLayout,
   __DEFAULT_SPANS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/layout",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "Configurable nested 2D grid layout generators",
   "type": "module",
   "module": "./index.js",
@@ -98,5 +98,5 @@
     ],
     "year": 2019
   },
-  "gitHead": "802e34c5e0786adcae538011713171232693b031\n"
+  "gitHead": "b138ae2fb8567acfe724cc675654878f60d26631\n"
 }

package/stacked-layout.d.ts

@@ -3,21 +3,23 @@ import { GridLayout } from "./grid-layout.js";
 /**
  * An extension of {@link GridLayout} which tracks individual column-based
  * heights and so can create more complex, irregular, packed, space-filling
- * layout arrangements. This layout algorithm prioritizes the column(s) with the
- * lowest height.
+ * layout arrangements. This layout algorithm prioritizes allocating the
+ * column(s) with the currently lowest height.
  *
  * The class also provides a {@link StackedLayout.availableSpan} method to find
  * available space and help equalize columns and fill/allocate any bottom gaps.
  *
  * **IMPORTANT:** As with {@link GridLayout}, nested layouts MUST be completed
  * first before requesting new cells (aka {@link LayoutBox}es) from a parent,
- * otherwise unintended overlaps will occur.
+ * otherwise unintended overlaps will occur. Also see {@link IGridLayout.nest}
+ * for more details.
  */
 export declare class StackedLayout extends GridLayout {
+    /** Number of rows per column */
     offsets: Uint32Array;
     currSpan: number;
-    constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gap: number);
-    nest(cols: number, spans?: CellSpan, gap?: number): StackedLayout;
+    constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gapX: number, gapY?: number);
+    nest(cols: number, spans?: CellSpan, gapX?: number, gapY?: number): StackedLayout;
     next(spans?: CellSpan): LayoutBox;
     /**
      * Finds the largest available span of free area, such that if it'll be
@@ -50,7 +52,8 @@ export declare class StackedLayout extends GridLayout {
  * @param width -
  * @param cols -
  * @param rowH -
- * @param gap -
+ * @param gapX -
+ * @param gapY -
  */
-export declare const stackedLayout: (x: number, y: number, width: number, cols?: number, rowH?: number, gap?: number) => StackedLayout;
+export declare const stackedLayout: (x: number, y: number, width: number, cols?: number, rowH?: number, gapX?: number, gapY?: number) => StackedLayout;
 //# sourceMappingURL=stacked-layout.d.ts.map

package/stacked-layout.js

@@ -1,18 +1,20 @@
 import { argMax, argMin } from "@thi.ng/arrays/argmin";
+import { layoutBox } from "./box.js";
 import { GridLayout, __DEFAULT_SPANS } from "./grid-layout.js";
 class StackedLayout extends GridLayout {
+  /** Number of rows per column */
   offsets;
   currSpan = 1;
-  constructor(parent, x, y, width, cols, rowH, gap) {
-    super(parent, x, y, width, cols, rowH, gap);
+  constructor(parent, x, y, width, cols, rowH, gapX, gapY = gapX) {
+    super(parent, x, y, width, cols, rowH, gapX, gapY);
     this.offsets = new Uint32Array(cols);
   }
-  nest(cols, spans, gap = this.gap) {
+  nest(cols, spans, gapX = this.gapX, gapY = this.gapY) {
     const { x, y, w } = this.next(spans);
-    return new StackedLayout(this, x, y, w, cols, this.cellH, gap);
+    return new StackedLayout(this, x, y, w, cols, this.cellH, gapX, gapY);
   }
   next(spans = __DEFAULT_SPANS) {
-    const { cellWG, cellHG, gap, cols, offsets } = this;
+    const { cellWG, cellHG, gapX, gapY, cols, offsets } = this;
     const cspan = Math.min(spans[0], cols);
     const rspan = spans[1];
     let minY = Infinity;
@@ -28,22 +30,23 @@ class StackedLayout extends GridLayout {
         column = i;
       }
     }
-    const h = rspan * cellHG - gap;
-    const cell = {
-      x: this.x + column * cellWG,
-      y: this.y + maxY * cellHG,
-      w: cspan * cellWG - gap,
+    const h = rspan * cellHG - gapY;
+    const cell = layoutBox(
+      this.x + column * cellWG,
+      this.y + maxY * cellHG,
+      cspan * cellWG - gapX,
       h,
-      cw: this.cellW,
-      ch: this.cellH,
-      gap,
-      span: [cspan, rspan]
-    };
+      this.cellW,
+      this.cellH,
+      gapX,
+      gapY,
+      [cspan, rspan]
+    );
     this.currRow = maxY;
     this.currCol = column;
     offsets.fill(maxY + rspan, column, column + cspan);
     this.currSpan = cspan;
-    this.parent?.propagateSize(Math.max(...this.offsets));
+    this.parent?.propagateSize(Math.max(...offsets));
     return cell;
   }
   /**
@@ -89,7 +92,7 @@ class StackedLayout extends GridLayout {
     return Math.min(...this.offsets) === Math.max(...this.offsets);
   }
 }
-const stackedLayout = (x, y, width, cols = 4, rowH = 16, gap = 4) => new StackedLayout(null, x, y, width, cols, rowH, gap);
+const stackedLayout = (x, y, width, cols = 4, rowH = 16, gapX = 4, gapY = gapX) => new StackedLayout(null, x, y, width, cols, rowH, gapX, gapY);
 export {
   StackedLayout,
   stackedLayout