@motionscript/grids 0.0.0-stage → 0.1.0-alpha.10

package/dist/radial-grid/radial-grid.js

@@ -0,0 +1,63 @@
+import { component2d, Types, } from "@motionscript/sdk";
+import { ItemGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop } from "../kit/index.js";
+const own = {
+    radius: Types.number(200, { min: 0, step: 1 }),
+    startAngle: Types.number(0, { step: 1, unit: "°" }),
+    sweep: Types.number(360, { min: -360, max: 360, step: 1, unit: "°" }),
+    direction: Types.oneOf(RADIAL_DIRECTIONS, { default: "clockwise" }),
+    rotateItems: false,
+    spinSpeed: Types.number(0, { step: 1, unit: "°/s" }),
+};
+function arrangement(s) {
+    return {
+        kind: "radial",
+        radius: s.radius,
+        startAngle: s.startAngle,
+        sweep: s.sweep,
+        direction: s.direction,
+        rotateItems: s.rotateItems,
+        spinSpeed: s.spinSpeed,
+    };
+}
+const arranger = { arrangement };
+/**
+ * Children round a circle, or along an arc of one.
+ *
+ * A full circle spaces the items evenly with none on top of another; an arc
+ * puts one at each end. Angles run clockwise from twelve o'clock, so `turnTo`
+ * can bring any item to the top like a dial.
+ */
+export const RadialGrid = ItemGrid.define(component2d({
+    key: "radialGrid",
+    state: { ...ItemGrid.state, ...own },
+    defaults: ItemGrid.defaults,
+    commands: {
+        ...ItemGrid.commands,
+        /** Orbit the items round the centre by `degrees` — `360` is one full turn. */
+        spin: {
+            args: { degrees: Types.number(360, { step: 15, unit: "°" }) },
+            run: (timeline, s) => timeline.tween({ startAngle: s.startAngle + (timeline.args.degrees ?? 360) }),
+        },
+        /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */
+        turnTo: {
+            args: { item: Types.number(0, { min: 0, step: 1 }) },
+            run: (timeline, s, children) => {
+                const count = children.length;
+                const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0));
+                const turn = slot < 0 ? 0 : radialTurnToTop(arrangement(s), count, slot);
+                return timeline.tween({ startAngle: s.startAngle + turn });
+            },
+        },
+        radiusTo: {
+            args: { radius: ItemGrid.hinted(280, { min: 0 }) },
+            run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),
+        },
+        /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */
+        sweepTo: {
+            args: { sweep: ItemGrid.hinted(360, { min: -360, max: 360, unit: "°" }) },
+            run: (timeline, s) => timeline.tween({ sweep: timeline.args.sweep ?? s.sweep }),
+        },
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
+//# sourceMappingURL=radial-grid.js.map

package/dist/radial-grid/radial-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-grid.js","sourceRoot":"","sources":["../../src/radial-grid/radial-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  component2d,\n  Types,\n  type NodeOf,\n  type Values,\n  // Named so the emitted declaration reaches these through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n} from \"@motionscript/sdk\"\n\nimport { ItemGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop, type RadialArrangement } from \"../kit\"\n\nconst own = {\n  radius: Types.number(200, { min: 0, step: 1 }),\n  startAngle: Types.number(0, { step: 1, unit: \"°\" }),\n  sweep: Types.number(360, { min: -360, max: 360, step: 1, unit: \"°\" }),\n  direction: Types.oneOf(RADIAL_DIRECTIONS, { default: \"clockwise\" }),\n  rotateItems: false,\n  spinSpeed: Types.number(0, { step: 1, unit: \"°/s\" }),\n}\n\ntype Own = Values<typeof own>\n\nfunction arrangement(s: Own): RadialArrangement {\n  return {\n    kind: \"radial\",\n    radius: s.radius,\n    startAngle: s.startAngle,\n    sweep: s.sweep,\n    direction: s.direction,\n    rotateItems: s.rotateItems,\n    spinSpeed: s.spinSpeed,\n  }\n}\n\nconst arranger: ItemGrid.Arranger<Own> = { arrangement }\n\n/**\n * Children round a circle, or along an arc of one.\n *\n * A full circle spaces the items evenly with none on top of another; an arc\n * puts one at each end. Angles run clockwise from twelve o'clock, so `turnTo`\n * can bring any item to the top like a dial.\n */\nexport const RadialGrid = ItemGrid.define(component2d({\n  key: \"radialGrid\",\n  state: { ...ItemGrid.state, ...own },\n  defaults: ItemGrid.defaults,\n  commands: {\n    ...ItemGrid.commands,\n    /** Orbit the items round the centre by `degrees` — `360` is one full turn. */\n    spin: {\n      args: { degrees: Types.number(360, { step: 15, unit: \"°\" }) },\n      run: (timeline, s) => timeline.tween({ startAngle: s.startAngle + (timeline.args.degrees ?? 360) }),\n    },\n    /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */\n    turnTo: {\n      args: { item: Types.number(0, { min: 0, step: 1 }) },\n      run: (timeline, s, children) => {\n        const count = children.length\n        const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0))\n        const turn = slot < 0 ? 0 : radialTurnToTop(arrangement(s), count, slot)\n        return timeline.tween({ startAngle: s.startAngle + turn })\n      },\n    },\n    radiusTo: {\n      args: { radius: ItemGrid.hinted(280, { min: 0 }) },\n      run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),\n    },\n    /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */\n    sweepTo: {\n      args: { sweep: ItemGrid.hinted(360, { min: -360, max: 360, unit: \"°\" }) },\n      run: (timeline, s) => timeline.tween({ sweep: timeline.args.sweep ?? s.sweep }),\n    },\n  },\n  ...ItemGrid.fields(arranger),\n}), arranger)\n\nexport type RadialGrid = NodeOf<typeof RadialGrid>\n/** What a call or a document row may set. */\nexport type RadialGridProps = NonNullable<Parameters<typeof RadialGrid>[0]>\n"]}

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

@@ -0,0 +1,2 @@
+export * from "./rectangular-grid.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rectangular-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/rectangular-grid/index.js

@@ -0,0 +1,2 @@
+export * from "./rectangular-grid.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/rectangular-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA","sourcesContent":["export * from \"./rectangular-grid\"\n"]}

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

@@ -0,0 +1,212 @@
+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.
+ *
+ * Cells are as big as the largest child (`fit`), a size of their own
+ * (`fixed`), or an equal share of the node's box (`fill`), which is also the
+ * 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 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,118 @@
+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 }),
+};
+/**
+ * Children in rows and columns — the grid the other three are variations on.
+ *
+ * Cells are as big as the largest child (`fit`), a size of their own
+ * (`fixed`), or an equal share of the node's box (`fill`), which is also the
+ * 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 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);
+            },
+        },
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
+//# sourceMappingURL=rectangular-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rectangular-grid.js","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  component2d,\n  easeInOut,\n  Types,\n  type NodeOf,\n  type Values,\n  // Named so the emitted declaration reaches these through the sdk, not core.\n  type Node2D as _Node2D,\n  type Node2DProps as _Node2DProps,\n} from \"@motionscript/sdk\"\n\nimport {\n  CELL_MODES,\n  FILL_DIRECTIONS,\n  ItemGrid,\n  LINE_ALIGNS,\n  rectangularCell,\n  staggerArgs,\n  TRANSITION_STAGGER,\n  type RectangularArrangement,\n} from \"../kit\"\n\nconst own = {\n  columns: Types.number(3, { min: 1, step: 1 }),\n  fillDirection: Types.oneOf(FILL_DIRECTIONS, { default: \"row\" }),\n  cellMode: Types.oneOf(CELL_MODES, { default: \"fit\" }),\n  cellWidth: Types.number(120, { min: 0, step: 1 }),\n  cellHeight: Types.number(120, { min: 0, step: 1 }),\n  columnGap: Types.number(24, { step: 1 }),\n  rowGap: Types.number(24, { step: 1 }),\n  lastLineAlign: Types.oneOf(LINE_ALIGNS, { default: \"start\" }),\n  rowOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),\n  columnOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),\n}\n\ntype Own = Values<typeof own>\n\nfunction arrangement(s: Own): RectangularArrangement {\n  return {\n    kind: \"rectangular\",\n    columns: s.columns,\n    fillDirection: s.fillDirection,\n    cellMode: s.cellMode,\n    cellWidth: s.cellWidth,\n    cellHeight: s.cellHeight,\n    columnGap: s.columnGap,\n    rowGap: s.rowGap,\n    lastLineAlign: s.lastLineAlign,\n    rowOffset: s.rowOffset,\n    columnOffset: s.columnOffset,\n  }\n}\n\nconst arranger: ItemGrid.Arranger<Own> = {\n  arrangement,\n  // A child set to fill takes its cell, where the cell is not simply the largest child.\n  itemSpace: (s, count, space) => (s.cellMode === \"fit\" ? space : rectangularCell(arrangement(s), count, [], space)),\n}\n\n/** The focus args of a row or a column: the grow a row leaves out is the shared focus's. */\nconst lineFocus = {\n  dim: Types.number(0.7, { min: 0, max: 1, step: 0.05 }),\n  grow: ItemGrid.hinted(0.1, { min: 0, max: 1, step: 0.05 }),\n}\n\n/**\n * Children in rows and columns — the grid the other three are variations on.\n *\n * Cells are as big as the largest child (`fit`), a size of their own\n * (`fixed`), or an equal share of the node's box (`fill`), which is also the\n * room a child set to fill grows into. Shift every other row by half a cell\n * for a brick bond or a hex pack.\n */\nexport const RectangularGrid = ItemGrid.define(component2d({\n  key: \"rectangularGrid\",\n  state: { ...ItemGrid.state, ...own },\n  defaults: ItemGrid.defaults,\n  commands: {\n    ...ItemGrid.commands,\n    /** Re-flow the items into `columns` columns, each moving to its new cell. */\n    columnsTo: {\n      args: { columns: ItemGrid.hinted(4, { min: 1, step: 1 }), ...staggerArgs(TRANSITION_STAGGER) },\n      run: (timeline, s, children) => {\n        const columns = Math.max(1, Math.round(timeline.args.columns ?? s.columns))\n        return ItemGrid.transitionTo(timeline as never, s, children, { columns })\n      },\n    },\n    /** Animate the spacing between columns and rows. */\n    gapTo: {\n      args: { columnGap: ItemGrid.hinted(48), rowGap: ItemGrid.hinted(48) },\n      run: (timeline) => {\n        const data: { columnGap?: number; rowGap?: number } = {}\n        if (timeline.args.columnGap !== undefined) data.columnGap = timeline.args.columnGap\n        if (timeline.args.rowGap !== undefined) data.rowGap = timeline.args.rowGap\n        return timeline.tween(data)\n      },\n    },\n    /**\n     * Animate the cell size, from whatever the cells measure now. The grid\n     * switches to `fixed` cells as it starts, since a size of its own is what\n     * `fixed` means.\n     */\n    cellSizeTo: {\n      args: { cellWidth: ItemGrid.hinted(160, { min: 0 }), cellHeight: ItemGrid.hinted(160, { min: 0 }) },\n      easing: easeInOut(\"cubic\"),\n      run: (timeline, s, children) => {\n        const sizes = children.map((child) => child.size)\n        const box = ItemGrid.contentBox(timeline.node.size, s.padding)\n        const from = rectangularCell(arrangement(s), sizes.length, sizes, box)\n        const width = timeline.args.cellWidth ?? from.width\n        const height = timeline.args.cellHeight ?? from.height\n        return timeline.animate((t) => ({\n          cellMode: \"fixed\",\n          cellWidth: from.width + (width - from.width) * t,\n          cellHeight: from.height + (height - from.height) * t,\n        }))\n      },\n    },\n    /** Bring one row (from 0 at the top) forward and push the rest back. */\n    focusRow: {\n      args: { row: Types.number(0, { min: 0, step: 1 }), ...lineFocus },\n      run: (timeline, s, children) => {\n        const slots = ItemGrid.itemSlots(timeline as never, s, children)\n        const row = Math.round(timeline.args.row ?? 0)\n        const inRow = (i: number) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.row === row\n        return ItemGrid.focusOn(timeline as never, s, inRow, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)\n      },\n    },\n    /** Bring one column (from 0 at the left) forward and push the rest back. */\n    focusColumn: {\n      args: { column: Types.number(0, { min: 0, step: 1 }), ...lineFocus },\n      run: (timeline, s, children) => {\n        const slots = ItemGrid.itemSlots(timeline as never, s, children)\n        const column = Math.round(timeline.args.column ?? 0)\n        const inColumn = (i: number) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.column === column\n        return ItemGrid.focusOn(timeline as never, s, inColumn, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)\n      },\n    },\n  },\n  ...ItemGrid.fields(arranger),\n}), arranger)\n\nexport type RectangularGrid = NodeOf<typeof RectangularGrid>\n/** What a call or a document row may set. */\nexport type RectangularGridProps = NonNullable<Parameters<typeof RectangularGrid>[0]>\n"]}

package/dist/sphere-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./sphere-grid.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/sphere-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sphere-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/sphere-grid/index.js

@@ -0,0 +1,2 @@
+export * from "./sphere-grid.js";
+//# sourceMappingURL=index.js.map

package/dist/sphere-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/sphere-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from \"./sphere-grid\"\n"]}