@motionscript/grids 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/rectangular-grid/rectangular-grid.d.ts

@@ -1,17 +1,5 @@
-import { type Command, type CommandArgs, type NodeConfig, type Size2D } from "@motionscript/sdk";
-import { ItemGrid, type CellMode, type FillDirection, type ItemGridProps, type LineAlign, type RectangularArrangement, type StaggerArgs } from "../kit/index.js";
-export interface RectangularGridProps extends ItemGridProps {
-    columns: number;
-    fillDirection: FillDirection;
-    cellMode: CellMode;
-    cellWidth: number;
-    cellHeight: number;
-    columnGap: number;
-    rowGap: number;
-    lastLineAlign: LineAlign;
-    rowOffset: number;
-    columnOffset: number;
-}
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
+import { ItemGrid } from "../kit/index.js";
 /**
  * Children in rows and columns — the grid the other three are variations on.
  *
@@ -20,60 +8,205 @@ export interface RectangularGridProps extends ItemGridProps {
  * room a child set to fill grows into. Shift every other row by half a cell
  * for a brick bond or a hex pack.
  */
-export declare class RectangularGrid extends ItemGrid<RectangularGridProps> {
-    columns: number;
-    fillDirection: FillDirection;
-    cellMode: CellMode;
-    cellWidth: number;
-    cellHeight: number;
-    columnGap: number;
-    rowGap: number;
-    lastLineAlign: LineAlign;
-    rowOffset: number;
-    columnOffset: number;
-    constructor(props?: NodeConfig<RectangularGrid, RectangularGridProps>);
-    /** Re-flow the items into `columns` columns, each moving to its new cell. */
-    columnsTo(args: CommandArgs<{
-        columns: number;
-    } & StaggerArgs> & {
-        duration: number;
-    }): Command<RectangularGridProps>;
-    /** Animate the spacing between columns and rows. */
-    gapTo(args: CommandArgs<{
-        columnGap?: number;
-        rowGap?: number;
-    }> & {
-        duration: number;
-    }): Command<RectangularGridProps>;
-    /**
-     * Animate the cell size, from whatever the cells measure now. The grid
-     * switches to `fixed` cells as it starts, since a size of its own is what
-     * `fixed` means.
-     */
-    cellSizeTo(args: CommandArgs<{
-        cellWidth?: number;
-        cellHeight?: number;
-    }> & {
-        duration: number;
-    }): Command<RectangularGridProps>;
-    /** Bring one row (from 0 at the top) forward and push the rest back. */
-    focusRow(args: CommandArgs<{
-        row?: number;
-        dim?: number;
-        grow?: number;
-    }> & {
-        duration: number;
-    }): Command<ItemGridProps>;
-    /** Bring one column (from 0 at the left) forward and push the rest back. */
-    focusColumn(args: CommandArgs<{
-        column?: number;
-        dim?: number;
-        grow?: number;
-    }> & {
-        duration: number;
-    }): Command<ItemGridProps>;
-    protected arrangementFor(): RectangularArrangement;
-    /** A child set to fill takes its cell, where the cell is not simply the largest child. */
-    protected itemSpace(count: number, space: Size2D): Size2D;
-}
+export declare const RectangularGrid: import("@motionscript/sdk").Component<"rectangularGrid", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly columns: import("@motionscript/sdk").Type<number, number, false>;
+    readonly fillDirection: import("@motionscript/sdk").Type<"row" | "column", "row" | "column", false>;
+    readonly cellMode: import("@motionscript/sdk").Type<"fixed" | "fit" | "fill", "fixed" | "fit" | "fill", false>;
+    readonly cellWidth: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cellHeight: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly rowGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly lastLineAlign: import("@motionscript/sdk").Type<"start" | "center" | "end", "start" | "center" | "end", false>;
+    readonly rowOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, {
+    readonly columnsTo: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly columns: import("@motionscript/sdk").Type<4 | undefined, 4 | undefined, false>;
+    };
+    readonly gapTo: {
+        readonly columnGap: import("@motionscript/sdk").Type<48 | undefined, 48 | undefined, false>;
+        readonly rowGap: import("@motionscript/sdk").Type<48 | undefined, 48 | undefined, false>;
+    };
+    readonly cellSizeTo: {
+        readonly cellWidth: import("@motionscript/sdk").Type<160 | undefined, 160 | undefined, false>;
+        readonly cellHeight: import("@motionscript/sdk").Type<160 | undefined, 160 | undefined, false>;
+    };
+    readonly focusRow: {
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<0.1 | undefined, 0.1 | undefined, false>;
+        readonly row: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focusColumn: {
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<0.1 | undefined, 0.1 | undefined, false>;
+        readonly column: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reveal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly conceal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly wave: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"scale" | "fade" | "spin" | "lift", "scale" | "fade" | "spin" | "lift", false>;
+        readonly amount: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focus: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly unfocus: unknown;
+    readonly spreadTo: {
+        readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly shuffle: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly seed: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly swap: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly first: import("@motionscript/sdk").Type<number, number, false>;
+        readonly second: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reorder: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly order: import("@motionscript/sdk").Type<string, string, false>;
+    };
+    readonly morphInto: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly target: import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+    };
+}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly columns: import("@motionscript/sdk").Type<number, number, false>;
+    readonly fillDirection: import("@motionscript/sdk").Type<"row" | "column", "row" | "column", false>;
+    readonly cellMode: import("@motionscript/sdk").Type<"fixed" | "fit" | "fill", "fixed" | "fit" | "fill", false>;
+    readonly cellWidth: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cellHeight: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly rowGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly lastLineAlign: import("@motionscript/sdk").Type<"start" | "center" | "end", "start" | "center" | "end", false>;
+    readonly rowOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly columns: import("@motionscript/sdk").Type<number, number, false>;
+    readonly fillDirection: import("@motionscript/sdk").Type<"row" | "column", "row" | "column", false>;
+    readonly cellMode: import("@motionscript/sdk").Type<"fixed" | "fit" | "fill", "fixed" | "fit" | "fill", false>;
+    readonly cellWidth: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cellHeight: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly rowGap: import("@motionscript/sdk").Type<number, number, false>;
+    readonly lastLineAlign: import("@motionscript/sdk").Type<"start" | "center" | "end", "start" | "center" | "end", false>;
+    readonly rowOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly columnOffset: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, {
+    readonly columnsTo: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly columns: import("@motionscript/sdk").Type<4 | undefined, 4 | undefined, false>;
+    };
+    readonly gapTo: {
+        readonly columnGap: import("@motionscript/sdk").Type<48 | undefined, 48 | undefined, false>;
+        readonly rowGap: import("@motionscript/sdk").Type<48 | undefined, 48 | undefined, false>;
+    };
+    readonly cellSizeTo: {
+        readonly cellWidth: import("@motionscript/sdk").Type<160 | undefined, 160 | undefined, false>;
+        readonly cellHeight: import("@motionscript/sdk").Type<160 | undefined, 160 | undefined, false>;
+    };
+    readonly focusRow: {
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<0.1 | undefined, 0.1 | undefined, false>;
+        readonly row: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focusColumn: {
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<0.1 | undefined, 0.1 | undefined, false>;
+        readonly column: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reveal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly conceal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly wave: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"scale" | "fade" | "spin" | "lift", "scale" | "fade" | "spin" | "lift", false>;
+        readonly amount: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focus: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly unfocus: unknown;
+    readonly spreadTo: {
+        readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly shuffle: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly seed: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly swap: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly first: import("@motionscript/sdk").Type<number, number, false>;
+        readonly second: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reorder: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly order: import("@motionscript/sdk").Type<string, string, false>;
+    };
+    readonly morphInto: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly target: import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+    };
+}, _Node2D<_Node2DProps>>>>;
+export type RectangularGrid = NodeOf<typeof RectangularGrid>;
+/** What a call or a document row may set. */
+export type RectangularGridProps = NonNullable<Parameters<typeof RectangularGrid>[0]>;
 //# sourceMappingURL=rectangular-grid.d.ts.map

package/dist/rectangular-grid/rectangular-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rectangular-grid.d.ts","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAKL,QAAQ,EAIR,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,aAAa,CAAA;IAC5B,QAAQ,EAAE,QAAQ,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;GAOG;AACH,qBAWa,eAAgB,SAAQ,QAAQ,CAAC,oBAAoB,CAAC;IACd,OAAO,EAAE,MAAM,CAAA;IACY,aAAa,EAAE,aAAa,CAAA;IACjC,QAAQ,EAAE,QAAQ,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACkB,aAAa,EAAE,SAAS,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;gBAEvE,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,EAAE,oBAAoB,CAAC;IAIrE,6EAA6E;IAE7E,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAKrH,oDAAoD;IAEpD,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAOvH;;;;OAIG;IAEH,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAYhI,wEAAwE;IAQxE,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,aAAa,CAAC;IAMzH,4EAA4E;IAQ5E,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,aAAa,CAAC;cAM5G,cAAc,IAAI,sBAAsB;IAgB3D,0FAA0F;cACvE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;CAInE"}
+{"version":3,"file":"rectangular-grid.d.ts","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,MAAM,EAGX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAGL,QAAQ,EAMT,MAAM,QAAQ,CAAA;AA6Cf;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmEf,CAAA;AAEb,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAA;AAC5D,6CAA6C;AAC7C,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA"}

package/dist/rectangular-grid/rectangular-grid.js

@@ -1,11 +1,42 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { component2d, easeInOut, Types, } from "@motionscript/sdk";
+import { CELL_MODES, FILL_DIRECTIONS, ItemGrid, LINE_ALIGNS, rectangularCell, staggerArgs, TRANSITION_STAGGER, } from "../kit/index.js";
+const own = {
+    columns: Types.number(3, { min: 1, step: 1 }),
+    fillDirection: Types.oneOf(FILL_DIRECTIONS, { default: "row" }),
+    cellMode: Types.oneOf(CELL_MODES, { default: "fit" }),
+    cellWidth: Types.number(120, { min: 0, step: 1 }),
+    cellHeight: Types.number(120, { min: 0, step: 1 }),
+    columnGap: Types.number(24, { step: 1 }),
+    rowGap: Types.number(24, { step: 1 }),
+    lastLineAlign: Types.oneOf(LINE_ALIGNS, { default: "start" }),
+    rowOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),
+    columnOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),
+};
+function arrangement(s) {
+    return {
+        kind: "rectangular",
+        columns: s.columns,
+        fillDirection: s.fillDirection,
+        cellMode: s.cellMode,
+        cellWidth: s.cellWidth,
+        cellHeight: s.cellHeight,
+        columnGap: s.columnGap,
+        rowGap: s.rowGap,
+        lastLineAlign: s.lastLineAlign,
+        rowOffset: s.rowOffset,
+        columnOffset: s.columnOffset,
+    };
+}
+const arranger = {
+    arrangement,
+    // A child set to fill takes its cell, where the cell is not simply the largest child.
+    itemSpace: (s, count, space) => (s.cellMode === "fit" ? space : rectangularCell(arrangement(s), count, [], space)),
+};
+/** The focus args of a row or a column: the grow a row leaves out is the shared focus's. */
+const lineFocus = {
+    dim: Types.number(0.7, { min: 0, max: 1, step: 0.05 }),
+    grow: ItemGrid.hinted(0.1, { min: 0, max: 1, step: 0.05 }),
 };
-import { command, easeInOut, node, property, } from "@motionscript/sdk";
-import { CELL_MODES, contentBoxOf, FILL_DIRECTIONS, LINE_ALIGNS, ItemGrid, rectangularCell, staggerArgs, TRANSITION_STAGGER, } from "../kit/index.js";
 /**
  * Children in rows and columns — the grid the other three are variations on.
  *
@@ -14,143 +45,74 @@ import { CELL_MODES, contentBoxOf, FILL_DIRECTIONS, LINE_ALIGNS, ItemGrid, recta
  * room a child set to fill grows into. Shift every other row by half a cell
  * for a brick bond or a hex pack.
  */
-let RectangularGrid = class RectangularGrid extends ItemGrid {
-    constructor(props) {
-        super(props);
-    }
-    /** Re-flow the items into `columns` columns, each moving to its new cell. */
-    columnsTo(args) {
-        const columns = Math.max(1, Math.round(args.data?.columns ?? this.columns));
-        return this._transitionTo({ columns }, args);
-    }
-    /** Animate the spacing between columns and rows. */
-    gapTo(args) {
-        const data = {};
-        if (args.data?.columnGap !== undefined)
-            data.columnGap = args.data.columnGap;
-        if (args.data?.rowGap !== undefined)
-            data.rowGap = args.data.rowGap;
-        return this.to({ data, duration: args.duration, easing: args.easing });
-    }
-    /**
-     * Animate the cell size, from whatever the cells measure now. The grid
-     * switches to `fixed` cells as it starts, since a size of its own is what
-     * `fixed` means.
-     */
-    cellSizeTo(args) {
-        const sizes = this._itemSizes();
-        const from = rectangularCell(this.arrangementFor(), sizes.length, sizes, contentBoxOf(this));
-        const width = args.data?.cellWidth ?? from.width;
-        const height = args.data?.cellHeight ?? from.height;
-        return this.command((t) => ({
-            cellMode: "fixed",
-            cellWidth: from.width + (width - from.width) * t,
-            cellHeight: from.height + (height - from.height) * t,
-        }), args.duration, args.easing ?? easeInOut("cubic"));
-    }
-    /** Bring one row (from 0 at the top) forward and push the rest back. */
-    focusRow(args) {
-        const slots = this._itemSlots();
-        const row = Math.round(args.data?.row ?? 0);
-        return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.row === row, slots.length, args);
-    }
-    /** Bring one column (from 0 at the left) forward and push the rest back. */
-    focusColumn(args) {
-        const slots = this._itemSlots();
-        const column = Math.round(args.data?.column ?? 0);
-        return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.column === column, slots.length, args);
-    }
-    arrangementFor() {
-        return {
-            kind: "rectangular",
-            columns: this.columns,
-            fillDirection: this.fillDirection,
-            cellMode: this.cellMode,
-            cellWidth: this.cellWidth,
-            cellHeight: this.cellHeight,
-            columnGap: this.columnGap,
-            rowGap: this.rowGap,
-            lastLineAlign: this.lastLineAlign,
-            rowOffset: this.rowOffset,
-            columnOffset: this.columnOffset,
-        };
-    }
-    /** A child set to fill takes its cell, where the cell is not simply the largest child. */
-    itemSpace(count, space) {
-        if (this.cellMode === "fit")
-            return space;
-        return rectangularCell(this.arrangementFor(), count, [], space);
-    }
-};
-__decorate([
-    property({ default: 3, min: 1, step: 1 })
-], RectangularGrid.prototype, "columns", void 0);
-__decorate([
-    property({ default: "row", kind: "enum", options: FILL_DIRECTIONS })
-], RectangularGrid.prototype, "fillDirection", void 0);
-__decorate([
-    property({ default: "fit", kind: "enum", options: CELL_MODES })
-], RectangularGrid.prototype, "cellMode", void 0);
-__decorate([
-    property({ default: 120, min: 0, step: 1 })
-], RectangularGrid.prototype, "cellWidth", void 0);
-__decorate([
-    property({ default: 120, min: 0, step: 1 })
-], RectangularGrid.prototype, "cellHeight", void 0);
-__decorate([
-    property({ default: 24, step: 1 })
-], RectangularGrid.prototype, "columnGap", void 0);
-__decorate([
-    property({ default: 24, step: 1 })
-], RectangularGrid.prototype, "rowGap", void 0);
-__decorate([
-    property({ default: "start", kind: "enum", options: LINE_ALIGNS })
-], RectangularGrid.prototype, "lastLineAlign", void 0);
-__decorate([
-    property({ default: 0, min: -1, max: 1, step: 0.05 })
-], RectangularGrid.prototype, "rowOffset", void 0);
-__decorate([
-    property({ default: 0, min: -1, max: 1, step: 0.05 })
-], RectangularGrid.prototype, "columnOffset", void 0);
-__decorate([
-    command({ args: [{ key: "columns", min: 1, step: 1, default: 4 }, ...staggerArgs(TRANSITION_STAGGER)] })
-], RectangularGrid.prototype, "columnsTo", null);
-__decorate([
-    command({ args: [{ key: "columnGap", default: 48 }, { key: "rowGap", default: 48 }] })
-], RectangularGrid.prototype, "gapTo", null);
-__decorate([
-    command({ args: [{ key: "cellWidth", min: 0, default: 160 }, { key: "cellHeight", min: 0, default: 160 }] })
-], RectangularGrid.prototype, "cellSizeTo", null);
-__decorate([
-    command({
-        args: [
-            { key: "row", min: 0, step: 1, default: 0 },
-            { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
-            { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
-        ],
-    })
-], RectangularGrid.prototype, "focusRow", null);
-__decorate([
-    command({
-        args: [
-            { key: "column", min: 0, step: 1, default: 0 },
-            { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
-            { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
-        ],
-    })
-], RectangularGrid.prototype, "focusColumn", null);
-RectangularGrid = __decorate([
-    node({
-        key: "rectangularGrid",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            acceptsChildren: true,
-            defaultWidthMode: "hug",
-            defaultHeightMode: "hug",
+export const RectangularGrid = ItemGrid.define(component2d({
+    key: "rectangularGrid",
+    state: { ...ItemGrid.state, ...own },
+    defaults: ItemGrid.defaults,
+    commands: {
+        ...ItemGrid.commands,
+        /** Re-flow the items into `columns` columns, each moving to its new cell. */
+        columnsTo: {
+            args: { columns: ItemGrid.hinted(4, { min: 1, step: 1 }), ...staggerArgs(TRANSITION_STAGGER) },
+            run: (timeline, s, children) => {
+                const columns = Math.max(1, Math.round(timeline.args.columns ?? s.columns));
+                return ItemGrid.transitionTo(timeline, s, children, { columns });
+            },
+        },
+        /** Animate the spacing between columns and rows. */
+        gapTo: {
+            args: { columnGap: ItemGrid.hinted(48), rowGap: ItemGrid.hinted(48) },
+            run: (timeline) => {
+                const data = {};
+                if (timeline.args.columnGap !== undefined)
+                    data.columnGap = timeline.args.columnGap;
+                if (timeline.args.rowGap !== undefined)
+                    data.rowGap = timeline.args.rowGap;
+                return timeline.tween(data);
+            },
+        },
+        /**
+         * Animate the cell size, from whatever the cells measure now. The grid
+         * switches to `fixed` cells as it starts, since a size of its own is what
+         * `fixed` means.
+         */
+        cellSizeTo: {
+            args: { cellWidth: ItemGrid.hinted(160, { min: 0 }), cellHeight: ItemGrid.hinted(160, { min: 0 }) },
+            easing: easeInOut("cubic"),
+            run: (timeline, s, children) => {
+                const sizes = children.map((child) => child.size);
+                const box = ItemGrid.contentBox(timeline.node.size, s.padding);
+                const from = rectangularCell(arrangement(s), sizes.length, sizes, box);
+                const width = timeline.args.cellWidth ?? from.width;
+                const height = timeline.args.cellHeight ?? from.height;
+                return timeline.animate((t) => ({
+                    cellMode: "fixed",
+                    cellWidth: from.width + (width - from.width) * t,
+                    cellHeight: from.height + (height - from.height) * t,
+                }));
+            },
+        },
+        /** Bring one row (from 0 at the top) forward and push the rest back. */
+        focusRow: {
+            args: { row: Types.number(0, { min: 0, step: 1 }), ...lineFocus },
+            run: (timeline, s, children) => {
+                const slots = ItemGrid.itemSlots(timeline, s, children);
+                const row = Math.round(timeline.args.row ?? 0);
+                const inRow = (i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.row === row;
+                return ItemGrid.focusOn(timeline, s, inRow, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15);
+            },
+        },
+        /** Bring one column (from 0 at the left) forward and push the rest back. */
+        focusColumn: {
+            args: { column: Types.number(0, { min: 0, step: 1 }), ...lineFocus },
+            run: (timeline, s, children) => {
+                const slots = ItemGrid.itemSlots(timeline, s, children);
+                const column = Math.round(timeline.args.column ?? 0);
+                const inColumn = (i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.column === column;
+                return ItemGrid.focusOn(timeline, s, inColumn, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15);
+            },
         },
-    })
-], RectangularGrid);
-export { RectangularGrid };
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
 //# sourceMappingURL=rectangular-grid.js.map