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

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

@@ -0,0 +1,200 @@
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
+import { ItemGrid } from "../kit/index.js";
+/**
+ * Children spread over a sphere — a Fibonacci lattice, as even as any number
+ * of points gets — and seen through a camera of the grid's own, so the far
+ * side is smaller, drawn first, and hidden where a face turns away.
+ *
+ * `outward` lays each item flat on the surface; `billboard` keeps each one
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
+ * to the front.
+ */
+export declare const SphereGrid: import("@motionscript/sdk").Component<"sphereGrid", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: 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 spin: {
+        readonly axis: import("@motionscript/sdk").Type<"x" | "y" | "z", "x" | "y" | "z", false>;
+        readonly degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly orientTo: {
+        readonly yaw: import("@motionscript/sdk").Type<45 | undefined, 45 | undefined, false>;
+        readonly pitch: import("@motionscript/sdk").Type<20 | undefined, 20 | undefined, false>;
+        readonly roll: import("@motionscript/sdk").Type<0 | undefined, 0 | undefined, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<300 | undefined, 300 | undefined, false>;
+    };
+    readonly focalLengthTo: {
+        readonly focalLength: import("@motionscript/sdk").Type<600 | undefined, 600 | undefined, 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 radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: 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 radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: 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 spin: {
+        readonly axis: import("@motionscript/sdk").Type<"x" | "y" | "z", "x" | "y" | "z", false>;
+        readonly degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly orientTo: {
+        readonly yaw: import("@motionscript/sdk").Type<45 | undefined, 45 | undefined, false>;
+        readonly pitch: import("@motionscript/sdk").Type<20 | undefined, 20 | undefined, false>;
+        readonly roll: import("@motionscript/sdk").Type<0 | undefined, 0 | undefined, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<300 | undefined, 300 | undefined, false>;
+    };
+    readonly focalLengthTo: {
+        readonly focalLength: import("@motionscript/sdk").Type<600 | undefined, 600 | undefined, 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 SphereGrid = NodeOf<typeof SphereGrid>;
+/** What a call or a document row may set. */
+export type SphereGridProps = NonNullable<Parameters<typeof SphereGrid>[0]>;
+//# sourceMappingURL=sphere-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sphere-grid.d.ts","sourceRoot":"","sources":["../../src/sphere-grid/sphere-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,MAAM,EAGX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EACL,QAAQ,EAQT,MAAM,QAAQ,CAAA;AAmCf;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6DV,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,UAAU,CAAC,CAAA;AAClD,6CAA6C;AAC7C,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,102 @@
+import { component2d, Types, } from "@motionscript/sdk";
+import { ItemGrid, normalizeOrder, SPHERE_AXES, SPHERE_FACINGS, sphereFaceForward, wrapDegrees, } from "../kit/index.js";
+const own = {
+    radius: Types.number(220, { min: 0, step: 1 }),
+    yaw: Types.number(0, { step: 1, unit: "°" }),
+    pitch: Types.number(0, { step: 1, unit: "°" }),
+    roll: Types.number(0, { step: 1, unit: "°" }),
+    facing: Types.oneOf(SPHERE_FACINGS, { default: "outward" }),
+    focalLength: Types.number(900, { min: 100, step: 10 }),
+    depthFade: Types.number(0.5, { min: 0, max: 1, step: 0.05 }),
+    cullBackfaces: false,
+    spinSpeed: Types.number(0, { step: 1, unit: "°/s" }),
+};
+function arrangement(s) {
+    return {
+        kind: "sphere",
+        radius: s.radius,
+        yaw: s.yaw,
+        pitch: s.pitch,
+        roll: s.roll,
+        facing: s.facing,
+        focalLength: s.focalLength,
+        depthFade: s.depthFade,
+        cullBackfaces: s.cullBackfaces,
+        spinSpeed: s.spinSpeed,
+    };
+}
+const arranger = { arrangement };
+const AXIS_PROP = { x: "pitch", y: "yaw", z: "roll" };
+/**
+ * Children spread over a sphere — a Fibonacci lattice, as even as any number
+ * of points gets — and seen through a camera of the grid's own, so the far
+ * side is smaller, drawn first, and hidden where a face turns away.
+ *
+ * `outward` lays each item flat on the surface; `billboard` keeps each one
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
+ * to the front.
+ */
+export const SphereGrid = ItemGrid.define(component2d({
+    key: "sphereGrid",
+    state: { ...ItemGrid.state, ...own },
+    defaults: ItemGrid.defaults,
+    commands: {
+        ...ItemGrid.commands,
+        /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
+        spin: {
+            args: {
+                axis: Types.oneOf(SPHERE_AXES, { default: "y" }),
+                degrees: Types.number(360, { step: 15, unit: "°" }),
+            },
+            run: (timeline, s) => {
+                const key = AXIS_PROP[timeline.args.axis ?? "y"] ?? "yaw";
+                return timeline.tween({ [key]: s[key] + (timeline.args.degrees ?? 360) });
+            },
+        },
+        /** Turn the sphere to a set orientation. */
+        orientTo: {
+            args: {
+                yaw: ItemGrid.hinted(45, { unit: "°" }),
+                pitch: ItemGrid.hinted(20, { unit: "°" }),
+                roll: ItemGrid.hinted(0, { unit: "°" }),
+            },
+            run: (timeline, s) => timeline.tween({
+                yaw: timeline.args.yaw ?? s.yaw,
+                pitch: timeline.args.pitch ?? s.pitch,
+                roll: timeline.args.roll ?? s.roll,
+            }),
+        },
+        /**
+         * Turn the sphere the shorter way until an item (by its place in the layers)
+         * faces the viewer. It turns from the orientation the sphere is given: the
+         * yaw its `spinSpeed` adds by the time the command runs is not counted, as
+         * commands are built against the tree standing at time 0.
+         */
+        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));
+                if (slot < 0)
+                    return timeline.tween({});
+                const facing = sphereFaceForward(count, slot);
+                return timeline.tween({
+                    yaw: s.yaw + wrapDegrees(facing.yaw - s.yaw),
+                    pitch: s.pitch + wrapDegrees(facing.pitch - s.pitch),
+                    roll: 0,
+                });
+            },
+        },
+        radiusTo: {
+            args: { radius: ItemGrid.hinted(300, { min: 0 }) },
+            run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),
+        },
+        /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
+        focalLengthTo: {
+            args: { focalLength: ItemGrid.hinted(600, { min: 100 }) },
+            run: (timeline, s) => timeline.tween({ focalLength: timeline.args.focalLength ?? s.focalLength }),
+        },
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
+//# sourceMappingURL=sphere-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sphere-grid.js","sourceRoot":"","sources":["../../src/sphere-grid/sphere-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 {\n  ItemGrid,\n  normalizeOrder,\n  SPHERE_AXES,\n  SPHERE_FACINGS,\n  sphereFaceForward,\n  wrapDegrees,\n  type SphereArrangement,\n  type SphereAxis,\n} from \"../kit\"\n\nconst own = {\n  radius: Types.number(220, { min: 0, step: 1 }),\n  yaw: Types.number(0, { step: 1, unit: \"°\" }),\n  pitch: Types.number(0, { step: 1, unit: \"°\" }),\n  roll: Types.number(0, { step: 1, unit: \"°\" }),\n  facing: Types.oneOf(SPHERE_FACINGS, { default: \"outward\" }),\n  focalLength: Types.number(900, { min: 100, step: 10 }),\n  depthFade: Types.number(0.5, { min: 0, max: 1, step: 0.05 }),\n  cullBackfaces: false,\n  spinSpeed: Types.number(0, { step: 1, unit: \"°/s\" }),\n}\n\ntype Own = Values<typeof own>\n\nfunction arrangement(s: Own): SphereArrangement {\n  return {\n    kind: \"sphere\",\n    radius: s.radius,\n    yaw: s.yaw,\n    pitch: s.pitch,\n    roll: s.roll,\n    facing: s.facing,\n    focalLength: s.focalLength,\n    depthFade: s.depthFade,\n    cullBackfaces: s.cullBackfaces,\n    spinSpeed: s.spinSpeed,\n  }\n}\n\nconst arranger: ItemGrid.Arranger<Own> = { arrangement }\n\nconst AXIS_PROP: Record<SphereAxis, \"yaw\" | \"pitch\" | \"roll\"> = { x: \"pitch\", y: \"yaw\", z: \"roll\" }\n\n/**\n * Children spread over a sphere — a Fibonacci lattice, as even as any number\n * of points gets — and seen through a camera of the grid's own, so the far\n * side is smaller, drawn first, and hidden where a face turns away.\n *\n * `outward` lays each item flat on the surface; `billboard` keeps each one\n * facing the viewer, like labels on a globe. `turnTo` brings any item round\n * to the front.\n */\nexport const SphereGrid = ItemGrid.define(component2d({\n  key: \"sphereGrid\",\n  state: { ...ItemGrid.state, ...own },\n  defaults: ItemGrid.defaults,\n  commands: {\n    ...ItemGrid.commands,\n    /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */\n    spin: {\n      args: {\n        axis: Types.oneOf(SPHERE_AXES, { default: \"y\" }),\n        degrees: Types.number(360, { step: 15, unit: \"°\" }),\n      },\n      run: (timeline, s) => {\n        const key = AXIS_PROP[timeline.args.axis ?? \"y\"] ?? \"yaw\"\n        return timeline.tween({ [key]: s[key] + (timeline.args.degrees ?? 360) })\n      },\n    },\n    /** Turn the sphere to a set orientation. */\n    orientTo: {\n      args: {\n        yaw: ItemGrid.hinted(45, { unit: \"°\" }),\n        pitch: ItemGrid.hinted(20, { unit: \"°\" }),\n        roll: ItemGrid.hinted(0, { unit: \"°\" }),\n      },\n      run: (timeline, s) => timeline.tween({\n        yaw: timeline.args.yaw ?? s.yaw,\n        pitch: timeline.args.pitch ?? s.pitch,\n        roll: timeline.args.roll ?? s.roll,\n      }),\n    },\n    /**\n     * Turn the sphere the shorter way until an item (by its place in the layers)\n     * faces the viewer. It turns from the orientation the sphere is given: the\n     * yaw its `spinSpeed` adds by the time the command runs is not counted, as\n     * commands are built against the tree standing at time 0.\n     */\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        if (slot < 0) return timeline.tween({})\n        const facing = sphereFaceForward(count, slot)\n        return timeline.tween({\n          yaw: s.yaw + wrapDegrees(facing.yaw - s.yaw),\n          pitch: s.pitch + wrapDegrees(facing.pitch - s.pitch),\n          roll: 0,\n        })\n      },\n    },\n    radiusTo: {\n      args: { radius: ItemGrid.hinted(300, { min: 0 }) },\n      run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),\n    },\n    /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */\n    focalLengthTo: {\n      args: { focalLength: ItemGrid.hinted(600, { min: 100 }) },\n      run: (timeline, s) => timeline.tween({ focalLength: timeline.args.focalLength ?? s.focalLength }),\n    },\n  },\n  ...ItemGrid.fields(arranger),\n}), arranger)\n\nexport type SphereGrid = NodeOf<typeof SphereGrid>\n/** What a call or a document row may set. */\nexport type SphereGridProps = NonNullable<Parameters<typeof SphereGrid>[0]>\n"]}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@motionscript/grids",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.10",
+  "type": "module",
+  "description": "Grid layouts for Motion Script: rectangular, radial, path and spherical arrangements of a node's children, with staggered reveals, waves, focus and morphs between them.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/motionscript-dev/motionscript.git",
+    "directory": "packages/components/grids"
+  },
+  "homepage": "https://motionscript.dev",
+  "bugs": {
+    "url": "https://github.com/motionscript-dev/motionscript/issues"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "NOTICE",
+    "dist",
+    "src",
+    "registry.json",
+    "CHANGELOG.md",
+    "!dist/**/*.tsbuildinfo",
+    "!src/**/tests/**",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.fixtures.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./kit": {
+      "types": "./dist/engine.d.ts",
+      "default": "./dist/engine.js"
+    }
+  },
+  "keywords": [
+    "motion-script",
+    "motion script",
+    "grid",
+    "layout",
+    "animation"
+  ],
+  "license": "Apache-2.0",
+  "author": "Motionscript",
+  "peerDependencies": {
+    "@motionscript/sdk": "^0.1.0-alpha.10"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.2",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.48.0",
+    "vitest": "^4.1.5",
+    "@motionscript/core": "0.1.0-alpha.10",
+    "@motionscript/sdk": "0.1.0-alpha.10"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths && node ../../../scripts/build-browser.mjs",
+    "dev": "tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --resolve-full-paths -w",
+    "clean": "rimraf --glob dist .turbo *.tsbuildinfo",
+    "test": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }

package/registry.json

@@ -0,0 +1,32 @@
+{
+  "kit": {
+    "barrel": "src/engine.ts",
+    "specifier": "@motionscript/grids/kit"
+  },
+  "items": [
+    {
+      "name": "rectangular-grid",
+      "description": "Children in rows and columns, with brick offsets and cells that fit, fix or fill.",
+      "root": "src/rectangular-grid",
+      "files": ["index.ts", "rectangular-grid.ts"]
+    },
+    {
+      "name": "radial-grid",
+      "description": "Children round a circle or along an arc, turned to face out if you like.",
+      "root": "src/radial-grid",
+      "files": ["index.ts", "radial-grid.ts"]
+    },
+    {
+      "name": "path-grid",
+      "description": "Children spaced along a template, a path of their own, or a Path node in the scene.",
+      "root": "src/path-grid",
+      "files": ["index.ts", "path-grid.ts"]
+    },
+    {
+      "name": "sphere-grid",
+      "description": "Children spread evenly over a sphere, seen through a camera of its own.",
+      "root": "src/sphere-grid",
+      "files": ["index.ts", "sphere-grid.ts"]
+    }
+  ]
+}

package/src/engine.ts

@@ -0,0 +1,12 @@
+/**
+ * The item grid **kit**: what the four grids share, and what a copied one does
+ * not copy.
+ *
+ * A copy takes a grid's own files into your project and rewrites its reach for
+ * these to `@motionscript/grids`, so the shared parts stay a real
+ * dependency. That is not a size decision. `ItemGrid` keeps the register of
+ * grids a morph looks another grid's arrangement up in, so a second copy of it
+ * would be a second register, and a morph from one grid to another would only
+ * find the grids its own copy was told of.
+ */
+export * from "./kit"

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./rectangular-grid"
+export * from "./radial-grid"
+export * from "./path-grid"
+export * from "./sphere-grid"
+export * from "./engine"
+export { NODES } from "./nodes"

package/src/kit/index.ts

@@ -0,0 +1,18 @@
+export * from "./slots"
+export * from "./stagger"
+export * from "./item-effects"
+export * from "./order"
+export * from "./random"
+export * as ItemGrid from "./item-grid"
+export {
+  contentBoxOf,
+  ITEM_GRID_TYPES,
+  staggerArgs,
+  TRANSITION_STAGGER,
+  type GridSnapshot,
+  type GridTransition,
+  type StaggerArgs,
+} from "./item-grid"
+
+// Once this kit's own; kept on its barrel for whoever imports them from it.
+export { findNode2D, frameIn } from "@motionscript/sdk"

package/src/kit/item-effects.ts

@@ -0,0 +1,114 @@
+import type { Size2D } from "@motionscript/sdk"
+
+import type { Slot } from "./slots"
+
+/**
+ * What an item does on its way in (or out): grow from nothing, fade, fly out of
+ * the grid's centre, rise into place, flip up, or spin in.
+ */
+export const REVEAL_STYLES = ["scale", "fade", "center", "rise", "flip", "spin"] as const
+export type RevealStyle = (typeof REVEAL_STYLES)[number]
+
+/** What a wave does to each item as it passes. */
+export const WAVE_STYLES = ["scale", "lift", "fade", "spin"] as const
+export type WaveStyle = (typeof WAVE_STYLES)[number]
+
+/**
+ * How far into view each item is, `1` shown and `0` gone — past `1` on the
+ * way to it under an overshooting ease. Absent means every item is shown.
+ */
+export interface RevealState {
+  style: RevealStyle
+  values: readonly number[]
+}
+
+/** Each item's share of the wave passing through it, `0` at rest and `1` at the crest. */
+export interface WaveState {
+  style: WaveStyle
+  /** How big the crest is — a share of the item's size, opacity or a turn, by style. */
+  amount: number
+  values: readonly number[]
+}
+
+/** Each item's emphasis: `1` the focus, `-1` pushed back, `0` untouched. */
+export interface FocusState {
+  /** How far the others fade, `0..1`. */
+  dim: number
+  /** How much the focus grows, as a share of its size; the others shrink by half that. */
+  grow: number
+  values: readonly number[]
+}
+
+/** Layer item `i`'s reveal, wave and focus onto its slot, in place. */
+export function applyItemEffects(
+  s: Slot,
+  i: number,
+  size: Size2D,
+  reveal: RevealState | null | undefined,
+  wave: WaveState | null | undefined,
+  focus: FocusState | null | undefined,
+): void {
+  if (reveal) applyReveal(s, reveal.style, reveal.values[i] ?? 1, size)
+  if (wave) applyWave(s, wave, wave.values[i] ?? 0, size)
+  if (focus) applyFocus(s, focus, focus.values[i] ?? 0)
+}
+
+function applyReveal(s: Slot, style: RevealStyle, v: number, size: Size2D): void {
+  if (v === 1) return
+  const shown = clamp01(v)
+  switch (style) {
+    case "fade":
+      s.opacity *= shown
+      break
+    case "center":
+      s.x *= v
+      s.y *= v
+      s.depth *= v
+      s.opacity *= clamp01(v * 4)
+      break
+    case "rise":
+      s.y -= (1 - v) * Math.max(40, size.height)
+      s.opacity *= shown
+      break
+    case "flip":
+      s.rotationX += (1 - v) * 90
+      break
+    case "spin":
+      s.rotation -= (1 - v) * 180
+      s.scale *= Math.max(0, v)
+      break
+    default:
+      s.scale *= Math.max(0, v)
+  }
+}
+
+function applyWave(s: Slot, wave: WaveState, w: number, size: Size2D): void {
+  if (w === 0) return
+  switch (wave.style) {
+    case "lift":
+      s.y += wave.amount * w * Math.max(40, size.height)
+      break
+    case "fade":
+      s.opacity *= clamp01(1 - wave.amount * w)
+      break
+    case "spin":
+      s.rotation += wave.amount * w * 360
+      break
+    default:
+      s.scale *= 1 + wave.amount * w
+  }
+}
+
+function applyFocus(s: Slot, focus: FocusState, f: number): void {
+  if (f === 0) return
+  if (f > 0) {
+    s.scale *= 1 + focus.grow * f
+    return
+  }
+  s.opacity *= clamp01(1 - focus.dim * -f)
+  s.scale *= Math.max(0, 1 + focus.grow * 0.5 * f)
+}
+
+function clamp01(v: number): number {
+  return v < 0 ? 0 : v > 1 ? 1 : v
+}