@motionscript/grids 0.1.0-alpha.4 → 0.1.0-alpha.6

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

@@ -1,11 +1,31 @@
-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 { command, node, property } from "@motionscript/sdk";
+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
@@ -13,137 +33,70 @@ const AXIS_PROP = { x: "pitch", y: "yaw", z: "roll" };
  * 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. {@link turnTo} brings any item
- * round to the front.
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
+ * to the front.
  */
-let SphereGrid = class SphereGrid extends ItemGrid {
-    constructor(props) {
-        super(props);
-    }
-    /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
-    spin(args) {
-        const key = AXIS_PROP[args.data?.axis ?? "y"] ?? "yaw";
-        const degrees = args.data?.degrees ?? 360;
-        return this.to({ data: { [key]: this[key] + degrees }, duration: args.duration, easing: args.easing });
-    }
-    /** Turn the sphere to a set orientation. */
-    orientTo(args) {
-        return this.to({
-            data: { yaw: args.data?.yaw ?? this.yaw, pitch: args.data?.pitch ?? this.pitch, roll: args.data?.roll ?? this.roll },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */
-    turnTo(args) {
-        const count = this._itemCount();
-        const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0));
-        if (slot < 0)
-            return this.to({ data: {}, duration: args.duration });
-        const facing = sphereFaceForward(count, slot);
-        // The yaw the clock has added is part of where the item is now.
-        const spun = this.spinSpeed * this.time.total;
-        return this.to({
-            data: {
-                yaw: this.yaw + wrapDegrees(facing.yaw - (this.yaw + spun)),
-                pitch: this.pitch + wrapDegrees(facing.pitch - this.pitch),
-                roll: 0,
+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: "°" }),
             },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    radiusTo(args) {
-        return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing });
-    }
-    /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
-    focalLengthTo(args) {
-        return this.to({
-            data: { focalLength: args.data?.focalLength ?? this.focalLength },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    arrangementFor() {
-        return {
-            kind: "sphere",
-            radius: this.radius,
-            yaw: this.yaw,
-            pitch: this.pitch,
-            roll: this.roll,
-            facing: this.facing,
-            focalLength: this.focalLength,
-            depthFade: this.depthFade,
-            cullBackfaces: this.cullBackfaces,
-            spinSpeed: this.spinSpeed,
-        };
-    }
-};
-__decorate([
-    property({ default: 220, min: 0, step: 1 })
-], SphereGrid.prototype, "radius", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "yaw", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "pitch", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "roll", void 0);
-__decorate([
-    property({ default: "outward", kind: "enum", options: SPHERE_FACINGS })
-], SphereGrid.prototype, "facing", void 0);
-__decorate([
-    property({ default: 900, min: 100, step: 10 })
-], SphereGrid.prototype, "focalLength", void 0);
-__decorate([
-    property({ default: 0.5, min: 0, max: 1, step: 0.05 })
-], SphereGrid.prototype, "depthFade", void 0);
-__decorate([
-    property({ default: false })
-], SphereGrid.prototype, "cullBackfaces", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°/s" })
-], SphereGrid.prototype, "spinSpeed", void 0);
-__decorate([
-    command({
-        args: [
-            { key: "axis", kind: "enum", options: SPHERE_AXES, default: "y" },
-            { key: "degrees", step: 15, unit: "°", default: 360 },
-        ],
-    })
-], SphereGrid.prototype, "spin", null);
-__decorate([
-    command({
-        args: [
-            { key: "yaw", unit: "°", default: 45 },
-            { key: "pitch", unit: "°", default: 20 },
-            { key: "roll", unit: "°", default: 0 },
-        ],
-    })
-], SphereGrid.prototype, "orientTo", null);
-__decorate([
-    command({ args: [{ key: "item", min: 0, step: 1, default: 0 }] })
-], SphereGrid.prototype, "turnTo", null);
-__decorate([
-    command({ args: [{ key: "radius", min: 0, default: 300 }] })
-], SphereGrid.prototype, "radiusTo", null);
-__decorate([
-    command({ args: [{ key: "focalLength", min: 100, default: 600 }] })
-], SphereGrid.prototype, "focalLengthTo", null);
-SphereGrid = __decorate([
-    node({
-        key: "sphereGrid",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            acceptsChildren: true,
-            defaultWidthMode: "hug",
-            defaultHeightMode: "hug",
+            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 }),
         },
-    })
-], SphereGrid);
-export { SphereGrid };
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
 //# sourceMappingURL=sphere-grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sphere-grid.js","sourceRoot":"","sources":["../../src/sphere-grid/sphere-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { command, node, property, type Command, type CommandArgs, type NodeConfig } from \"@motionscript/sdk\"\r\n\r\nimport {\r\n  ItemGrid,\r\n  normalizeOrder,\r\n  SPHERE_AXES,\r\n  SPHERE_FACINGS,\r\n  sphereFaceForward,\r\n  wrapDegrees,\r\n  type ItemGridProps,\r\n  type SphereArrangement,\r\n  type SphereAxis,\r\n  type SphereFacing,\r\n} from \"../kit\"\r\n\r\nexport interface SphereGridProps extends ItemGridProps {\r\n  radius: number\r\n  yaw: number\r\n  pitch: number\r\n  roll: number\r\n  facing: SphereFacing\r\n  focalLength: number\r\n  depthFade: number\r\n  cullBackfaces: boolean\r\n  spinSpeed: number\r\n}\r\n\r\nconst AXIS_PROP: Record<SphereAxis, \"yaw\" | \"pitch\" | \"roll\"> = { x: \"pitch\", y: \"yaw\", z: \"roll\" }\r\n\r\n/**\r\n * Children spread over a sphere — a Fibonacci lattice, as even as any number\r\n * of points gets — and seen through a camera of the grid's own, so the far\r\n * side is smaller, drawn first, and hidden where a face turns away.\r\n *\r\n * `outward` lays each item flat on the surface; `billboard` keeps each one\r\n * facing the viewer, like labels on a globe. {@link turnTo} brings any item\r\n * round to the front.\r\n */\r\n@node({\r\n  key: \"sphereGrid\",\r\n  parentKey: \"node\",\r\n  forkable: true,\r\n  layout: {\r\n    children: \"freeform\",\r\n    acceptsChildren: true,\r\n    defaultWidthMode: \"hug\",\r\n    defaultHeightMode: \"hug\",\r\n  },\r\n})\r\nexport class SphereGrid extends ItemGrid<SphereGridProps> {\r\n  @property({ default: 220, min: 0, step: 1 }) declare radius: number\r\n  @property({ default: 0, step: 1, unit: \"°\" }) declare yaw: number\r\n  @property({ default: 0, step: 1, unit: \"°\" }) declare pitch: number\r\n  @property({ default: 0, step: 1, unit: \"°\" }) declare roll: number\r\n  @property({ default: \"outward\", kind: \"enum\", options: SPHERE_FACINGS }) declare facing: SphereFacing\r\n  @property({ default: 900, min: 100, step: 10 }) declare focalLength: number\r\n  @property({ default: 0.5, min: 0, max: 1, step: 0.05 }) declare depthFade: number\r\n  @property({ default: false }) declare cullBackfaces: boolean\r\n  @property({ default: 0, step: 1, unit: \"°/s\" }) declare spinSpeed: number\r\n\r\n  constructor(props?: NodeConfig<SphereGrid, SphereGridProps>) {\r\n    super(props)\r\n  }\r\n\r\n  /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */\r\n  @command({\r\n    args: [\r\n      { key: \"axis\", kind: \"enum\", options: SPHERE_AXES, default: \"y\" },\r\n      { key: \"degrees\", step: 15, unit: \"°\", default: 360 },\r\n    ],\r\n  })\r\n  spin(args: CommandArgs<{ axis?: SphereAxis; degrees?: number }> & { duration: number }): Command<SphereGridProps> {\r\n    const key = AXIS_PROP[args.data?.axis ?? \"y\"] ?? \"yaw\"\r\n    const degrees = args.data?.degrees ?? 360\r\n    return this.to({ data: { [key]: this[key] + degrees }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  /** Turn the sphere to a set orientation. */\r\n  @command({\r\n    args: [\r\n      { key: \"yaw\", unit: \"°\", default: 45 },\r\n      { key: \"pitch\", unit: \"°\", default: 20 },\r\n      { key: \"roll\", unit: \"°\", default: 0 },\r\n    ],\r\n  })\r\n  orientTo(args: CommandArgs<{ yaw?: number; pitch?: number; roll?: number }> & { duration: number }): Command<SphereGridProps> {\r\n    return this.to({\r\n      data: { yaw: args.data?.yaw ?? this.yaw, pitch: args.data?.pitch ?? this.pitch, roll: args.data?.roll ?? this.roll },\r\n      duration: args.duration,\r\n      easing: args.easing,\r\n    })\r\n  }\r\n\r\n  /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */\r\n  @command({ args: [{ key: \"item\", min: 0, step: 1, default: 0 }] })\r\n  turnTo(args: CommandArgs<{ item?: number }> & { duration: number }): Command<SphereGridProps> {\r\n    const count = this._itemCount()\r\n    const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0))\r\n    if (slot < 0) return this.to({ data: {}, duration: args.duration })\r\n    const facing = sphereFaceForward(count, slot)\r\n    // The yaw the clock has added is part of where the item is now.\r\n    const spun = this.spinSpeed * this.time.total\r\n    return this.to({\r\n      data: {\r\n        yaw: this.yaw + wrapDegrees(facing.yaw - (this.yaw + spun)),\r\n        pitch: this.pitch + wrapDegrees(facing.pitch - this.pitch),\r\n        roll: 0,\r\n      },\r\n      duration: args.duration,\r\n      easing: args.easing,\r\n    })\r\n  }\r\n\r\n  @command({ args: [{ key: \"radius\", min: 0, default: 300 }] })\r\n  radiusTo(args: CommandArgs<{ radius: number }> & { duration: number }): Command<SphereGridProps> {\r\n    return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */\r\n  @command({ args: [{ key: \"focalLength\", min: 100, default: 600 }] })\r\n  focalLengthTo(args: CommandArgs<{ focalLength: number }> & { duration: number }): Command<SphereGridProps> {\r\n    return this.to({\r\n      data: { focalLength: args.data?.focalLength ?? this.focalLength },\r\n      duration: args.duration,\r\n      easing: args.easing,\r\n    })\r\n  }\r\n\r\n  protected override arrangementFor(): SphereArrangement {\r\n    return {\r\n      kind: \"sphere\",\r\n      radius: this.radius,\r\n      yaw: this.yaw,\r\n      pitch: this.pitch,\r\n      roll: this.roll,\r\n      facing: this.facing,\r\n      focalLength: this.focalLength,\r\n      depthFade: this.depthFade,\r\n      cullBackfaces: this.cullBackfaces,\r\n      spinSpeed: this.spinSpeed,\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"sphere-grid.js","sourceRoot":"","sources":["../../src/sphere-grid/sphere-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  component2d,\r\n  Types,\r\n  type NodeOf,\r\n  type Values,\r\n  // Named so the emitted declaration reaches these through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Node2DProps as _Node2DProps,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport {\r\n  ItemGrid,\r\n  normalizeOrder,\r\n  SPHERE_AXES,\r\n  SPHERE_FACINGS,\r\n  sphereFaceForward,\r\n  wrapDegrees,\r\n  type SphereArrangement,\r\n  type SphereAxis,\r\n} from \"../kit\"\r\n\r\nconst own = {\r\n  radius: Types.number(220, { min: 0, step: 1 }),\r\n  yaw: Types.number(0, { step: 1, unit: \"°\" }),\r\n  pitch: Types.number(0, { step: 1, unit: \"°\" }),\r\n  roll: Types.number(0, { step: 1, unit: \"°\" }),\r\n  facing: Types.oneOf(SPHERE_FACINGS, { default: \"outward\" }),\r\n  focalLength: Types.number(900, { min: 100, step: 10 }),\r\n  depthFade: Types.number(0.5, { min: 0, max: 1, step: 0.05 }),\r\n  cullBackfaces: false,\r\n  spinSpeed: Types.number(0, { step: 1, unit: \"°/s\" }),\r\n}\r\n\r\ntype Own = Values<typeof own>\r\n\r\nfunction arrangement(s: Own): SphereArrangement {\r\n  return {\r\n    kind: \"sphere\",\r\n    radius: s.radius,\r\n    yaw: s.yaw,\r\n    pitch: s.pitch,\r\n    roll: s.roll,\r\n    facing: s.facing,\r\n    focalLength: s.focalLength,\r\n    depthFade: s.depthFade,\r\n    cullBackfaces: s.cullBackfaces,\r\n    spinSpeed: s.spinSpeed,\r\n  }\r\n}\r\n\r\nconst arranger: ItemGrid.Arranger<Own> = { arrangement }\r\n\r\nconst AXIS_PROP: Record<SphereAxis, \"yaw\" | \"pitch\" | \"roll\"> = { x: \"pitch\", y: \"yaw\", z: \"roll\" }\r\n\r\n/**\r\n * Children spread over a sphere — a Fibonacci lattice, as even as any number\r\n * of points gets — and seen through a camera of the grid's own, so the far\r\n * side is smaller, drawn first, and hidden where a face turns away.\r\n *\r\n * `outward` lays each item flat on the surface; `billboard` keeps each one\r\n * facing the viewer, like labels on a globe. `turnTo` brings any item round\r\n * to the front.\r\n */\r\nexport const SphereGrid = ItemGrid.define(component2d({\r\n  key: \"sphereGrid\",\r\n  state: { ...ItemGrid.state, ...own },\r\n  defaults: ItemGrid.defaults,\r\n  commands: {\r\n    ...ItemGrid.commands,\r\n    /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */\r\n    spin: {\r\n      args: {\r\n        axis: Types.oneOf(SPHERE_AXES, { default: \"y\" }),\r\n        degrees: Types.number(360, { step: 15, unit: \"°\" }),\r\n      },\r\n      run: (timeline, s) => {\r\n        const key = AXIS_PROP[timeline.args.axis ?? \"y\"] ?? \"yaw\"\r\n        return timeline.tween({ [key]: s[key] + (timeline.args.degrees ?? 360) })\r\n      },\r\n    },\r\n    /** Turn the sphere to a set orientation. */\r\n    orientTo: {\r\n      args: {\r\n        yaw: ItemGrid.hinted(45, { unit: \"°\" }),\r\n        pitch: ItemGrid.hinted(20, { unit: \"°\" }),\r\n        roll: ItemGrid.hinted(0, { unit: \"°\" }),\r\n      },\r\n      run: (timeline, s) => timeline.tween({\r\n        yaw: timeline.args.yaw ?? s.yaw,\r\n        pitch: timeline.args.pitch ?? s.pitch,\r\n        roll: timeline.args.roll ?? s.roll,\r\n      }),\r\n    },\r\n    /**\r\n     * Turn the sphere the shorter way until an item (by its place in the layers)\r\n     * faces the viewer. It turns from the orientation the sphere is given: the\r\n     * yaw its `spinSpeed` adds by the time the command runs is not counted, as\r\n     * commands are built against the tree standing at time 0.\r\n     */\r\n    turnTo: {\r\n      args: { item: Types.number(0, { min: 0, step: 1 }) },\r\n      run: (timeline, s, children) => {\r\n        const count = children.length\r\n        const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0))\r\n        if (slot < 0) return timeline.tween({})\r\n        const facing = sphereFaceForward(count, slot)\r\n        return timeline.tween({\r\n          yaw: s.yaw + wrapDegrees(facing.yaw - s.yaw),\r\n          pitch: s.pitch + wrapDegrees(facing.pitch - s.pitch),\r\n          roll: 0,\r\n        })\r\n      },\r\n    },\r\n    radiusTo: {\r\n      args: { radius: ItemGrid.hinted(300, { min: 0 }) },\r\n      run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),\r\n    },\r\n    /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */\r\n    focalLengthTo: {\r\n      args: { focalLength: ItemGrid.hinted(600, { min: 100 }) },\r\n      run: (timeline, s) => timeline.tween({ focalLength: timeline.args.focalLength ?? s.focalLength }),\r\n    },\r\n  },\r\n  ...ItemGrid.fields(arranger),\r\n}), arranger)\r\n\r\nexport type SphereGrid = NodeOf<typeof SphereGrid>\r\n/** What a call or a document row may set. */\r\nexport type SphereGridProps = NonNullable<Parameters<typeof SphereGrid>[0]>\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motionscript/grids",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "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": {
@@ -49,7 +49,7 @@
   ],
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@motionscript/sdk": "^0.1.0-alpha.4"
+    "@motionscript/sdk": "^0.1.0-alpha.6"
   },
   "devDependencies": {
     "@types/node": "^25.6.2",
@@ -60,8 +60,8 @@
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.48.0",
     "vitest": "^4.1.5",
-    "@motionscript/core": "0.1.0-alpha.4",
-    "@motionscript/sdk": "0.1.0-alpha.4"
+    "@motionscript/sdk": "0.1.0-alpha.6",
+    "@motionscript/core": "0.1.0-alpha.6"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths && node ../../../scripts/build-browser.mjs",

package/src/engine.ts

@@ -4,9 +4,9 @@
  *
  * `ms add` writes 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. The engine keys prop machinery to
- * class identity — `@property` installs against the class it was applied with —
- * so a second copy of `ItemGrid` is a second class answering to one name, and
- * a morph from one grid to another only finds grids of the class it knows.
+ * 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/kit/index.ts

@@ -3,4 +3,16 @@ export * from "./stagger"
 export * from "./item-effects"
 export * from "./order"
 export * from "./random"
-export * from "./item-grid"
+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"