@motionscript/layout-grid 0.0.0-stage → 0.1.0-alpha.0

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

@@ -0,0 +1,156 @@
+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, easeInOut, node, property, } from "@motionscript/core";
+import { CELL_MODES, contentBoxOf, FILL_DIRECTIONS, LINE_ALIGNS, LayoutGrid, rectangularCell, staggerArgs, TRANSITION_STAGGER, } 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.
+ */
+let RectangularGrid = class RectangularGrid extends LayoutGrid {
+    constructor(props) {
+        super(props);
+    }
+    /** Re-flow the items into `columns` columns, each moving to its new cell. */
+    columnsTo(args) {
+        const columns = Math.max(1, Math.round(args.data?.columns ?? this.columns));
+        return this._transitionTo({ columns }, args);
+    }
+    /** Animate the spacing between columns and rows. */
+    gapTo(args) {
+        const data = {};
+        if (args.data?.columnGap !== undefined)
+            data.columnGap = args.data.columnGap;
+        if (args.data?.rowGap !== undefined)
+            data.rowGap = args.data.rowGap;
+        return this.to({ data, duration: args.duration, easing: args.easing });
+    }
+    /**
+     * Animate the cell size, from whatever the cells measure now. The grid
+     * switches to `fixed` cells as it starts, since a size of its own is what
+     * `fixed` means.
+     */
+    cellSizeTo(args) {
+        const sizes = this._itemSizes();
+        const from = rectangularCell(this.arrangementFor(), sizes.length, sizes, contentBoxOf(this));
+        const width = args.data?.cellWidth ?? from.width;
+        const height = args.data?.cellHeight ?? from.height;
+        return this.command((t) => ({
+            cellMode: "fixed",
+            cellWidth: from.width + (width - from.width) * t,
+            cellHeight: from.height + (height - from.height) * t,
+        }), args.duration, args.easing ?? easeInOut("cubic"));
+    }
+    /** Bring one row (from 0 at the top) forward and push the rest back. */
+    focusRow(args) {
+        const slots = this._itemSlots();
+        const row = Math.round(args.data?.row ?? 0);
+        return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.row === row, slots.length, args);
+    }
+    /** Bring one column (from 0 at the left) forward and push the rest back. */
+    focusColumn(args) {
+        const slots = this._itemSlots();
+        const column = Math.round(args.data?.column ?? 0);
+        return this._focusOn((i) => slots[i]?.meta.kind === "rectangular" && slots[i].meta.column === column, slots.length, args);
+    }
+    arrangementFor() {
+        return {
+            kind: "rectangular",
+            columns: this.columns,
+            fillDirection: this.fillDirection,
+            cellMode: this.cellMode,
+            cellWidth: this.cellWidth,
+            cellHeight: this.cellHeight,
+            columnGap: this.columnGap,
+            rowGap: this.rowGap,
+            lastLineAlign: this.lastLineAlign,
+            rowOffset: this.rowOffset,
+            columnOffset: this.columnOffset,
+        };
+    }
+    /** A child set to fill takes its cell, where the cell is not simply the largest child. */
+    itemSpace(count, space) {
+        if (this.cellMode === "fit")
+            return space;
+        return rectangularCell(this.arrangementFor(), count, [], space);
+    }
+};
+__decorate([
+    property({ default: 3, min: 1, step: 1 })
+], RectangularGrid.prototype, "columns", void 0);
+__decorate([
+    property({ default: "row", kind: "enum", options: FILL_DIRECTIONS })
+], RectangularGrid.prototype, "fillDirection", void 0);
+__decorate([
+    property({ default: "fit", kind: "enum", options: CELL_MODES })
+], RectangularGrid.prototype, "cellMode", void 0);
+__decorate([
+    property({ default: 120, min: 0, step: 1 })
+], RectangularGrid.prototype, "cellWidth", void 0);
+__decorate([
+    property({ default: 120, min: 0, step: 1 })
+], RectangularGrid.prototype, "cellHeight", void 0);
+__decorate([
+    property({ default: 24, step: 1 })
+], RectangularGrid.prototype, "columnGap", void 0);
+__decorate([
+    property({ default: 24, step: 1 })
+], RectangularGrid.prototype, "rowGap", void 0);
+__decorate([
+    property({ default: "start", kind: "enum", options: LINE_ALIGNS })
+], RectangularGrid.prototype, "lastLineAlign", void 0);
+__decorate([
+    property({ default: 0, min: -1, max: 1, step: 0.05 })
+], RectangularGrid.prototype, "rowOffset", void 0);
+__decorate([
+    property({ default: 0, min: -1, max: 1, step: 0.05 })
+], RectangularGrid.prototype, "columnOffset", void 0);
+__decorate([
+    command({ args: [{ key: "columns", min: 1, step: 1, default: 4 }, ...staggerArgs(TRANSITION_STAGGER)] })
+], RectangularGrid.prototype, "columnsTo", null);
+__decorate([
+    command({ args: [{ key: "columnGap", default: 48 }, { key: "rowGap", default: 48 }] })
+], RectangularGrid.prototype, "gapTo", null);
+__decorate([
+    command({ args: [{ key: "cellWidth", min: 0, default: 160 }, { key: "cellHeight", min: 0, default: 160 }] })
+], RectangularGrid.prototype, "cellSizeTo", null);
+__decorate([
+    command({
+        args: [
+            { key: "row", min: 0, step: 1, default: 0 },
+            { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
+            { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
+        ],
+    })
+], RectangularGrid.prototype, "focusRow", null);
+__decorate([
+    command({
+        args: [
+            { key: "column", min: 0, step: 1, default: 0 },
+            { key: "dim", min: 0, max: 1, step: 0.05, default: 0.7 },
+            { key: "grow", min: 0, max: 1, step: 0.05, default: 0.1 },
+        ],
+    })
+], RectangularGrid.prototype, "focusColumn", null);
+RectangularGrid = __decorate([
+    node({
+        key: "rectangularGrid",
+        parentKey: "node",
+        forkable: true,
+        layout: {
+            children: "grid",
+            acceptsChildren: true,
+            defaultWidthMode: "hug",
+            defaultHeightMode: "hug",
+        },
+    })
+], RectangularGrid);
+export { RectangularGrid };
+//# 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  command,\n  easeInOut,\n  node,\n  property,\n  type Command,\n  type CommandArgs,\n  type NodeConfig,\n  type Size2D,\n} from \"@motionscript/core\"\n\nimport {\n  CELL_MODES,\n  contentBoxOf,\n  FILL_DIRECTIONS,\n  LINE_ALIGNS,\n  LayoutGrid,\n  rectangularCell,\n  staggerArgs,\n  TRANSITION_STAGGER,\n  type CellMode,\n  type FillDirection,\n  type LayoutGridProps,\n  type LineAlign,\n  type RectangularArrangement,\n  type StaggerArgs,\n} from \"../kit\"\n\nexport interface RectangularGridProps extends LayoutGridProps {\n  columns: number\n  fillDirection: FillDirection\n  cellMode: CellMode\n  cellWidth: number\n  cellHeight: number\n  columnGap: number\n  rowGap: number\n  lastLineAlign: LineAlign\n  rowOffset: number\n  columnOffset: number\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 */\n@node({\n  key: \"rectangularGrid\",\n  parentKey: \"node\",\n  forkable: true,\n  layout: {\n    children: \"grid\",\n    acceptsChildren: true,\n    defaultWidthMode: \"hug\",\n    defaultHeightMode: \"hug\",\n  },\n})\nexport class RectangularGrid extends LayoutGrid<RectangularGridProps> {\n  @property({ default: 3, min: 1, step: 1 }) declare columns: number\n  @property({ default: \"row\", kind: \"enum\", options: FILL_DIRECTIONS }) declare fillDirection: FillDirection\n  @property({ default: \"fit\", kind: \"enum\", options: CELL_MODES }) declare cellMode: CellMode\n  @property({ default: 120, min: 0, step: 1 }) declare cellWidth: number\n  @property({ default: 120, min: 0, step: 1 }) declare cellHeight: number\n  @property({ default: 24, step: 1 }) declare columnGap: number\n  @property({ default: 24, step: 1 }) declare rowGap: number\n  @property({ default: \"start\", kind: \"enum\", options: LINE_ALIGNS }) declare lastLineAlign: LineAlign\n  @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare rowOffset: number\n  @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare columnOffset: number\n\n  constructor(props?: NodeConfig<RectangularGrid, RectangularGridProps>) {\n    super(props)\n  }\n\n  /** Re-flow the items into `columns` columns, each moving to its new cell. */\n  @command({ args: [{ key: \"columns\", min: 1, step: 1, default: 4 }, ...staggerArgs(TRANSITION_STAGGER)] })\n  columnsTo(args: CommandArgs<{ columns: number } & StaggerArgs> & { duration: number }): Command<RectangularGridProps> {\n    const columns = Math.max(1, Math.round(args.data?.columns ?? this.columns))\n    return this._transitionTo({ columns }, args)\n  }\n\n  /** Animate the spacing between columns and rows. */\n  @command({ args: [{ key: \"columnGap\", default: 48 }, { key: \"rowGap\", default: 48 }] })\n  gapTo(args: CommandArgs<{ columnGap?: number; rowGap?: number }> & { duration: number }): Command<RectangularGridProps> {\n    const data: Partial<RectangularGridProps> = {}\n    if (args.data?.columnGap !== undefined) data.columnGap = args.data.columnGap\n    if (args.data?.rowGap !== undefined) data.rowGap = args.data.rowGap\n    return this.to({ data, duration: args.duration, easing: args.easing })\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  @command({ args: [{ key: \"cellWidth\", min: 0, default: 160 }, { key: \"cellHeight\", min: 0, default: 160 }] })\n  cellSizeTo(args: CommandArgs<{ cellWidth?: number; cellHeight?: number }> & { duration: number }): Command<RectangularGridProps> {\n    const sizes = this._itemSizes()\n    const from = rectangularCell(this.arrangementFor(), sizes.length, sizes, contentBoxOf(this))\n    const width = args.data?.cellWidth ?? from.width\n    const height = args.data?.cellHeight ?? from.height\n    return this.command<RectangularGridProps>((t) => ({\n      cellMode: \"fixed\",\n      cellWidth: from.width + (width - from.width) * t,\n      cellHeight: from.height + (height - from.height) * t,\n    }), args.duration, args.easing ?? easeInOut(\"cubic\"))\n  }\n\n  /** Bring one row (from 0 at the top) forward and push the rest back. */\n  @command({\n    args: [\n      { key: \"row\", min: 0, step: 1, default: 0 },\n      { key: \"dim\", min: 0, max: 1, step: 0.05, default: 0.7 },\n      { key: \"grow\", min: 0, max: 1, step: 0.05, default: 0.1 },\n    ],\n  })\n  focusRow(args: CommandArgs<{ row?: number; dim?: number; grow?: number }> & { duration: number }): Command<LayoutGridProps> {\n    const slots = this._itemSlots()\n    const row = Math.round(args.data?.row ?? 0)\n    return this._focusOn((i) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.row === row, slots.length, args)\n  }\n\n  /** Bring one column (from 0 at the left) forward and push the rest back. */\n  @command({\n    args: [\n      { key: \"column\", min: 0, step: 1, default: 0 },\n      { key: \"dim\", min: 0, max: 1, step: 0.05, default: 0.7 },\n      { key: \"grow\", min: 0, max: 1, step: 0.05, default: 0.1 },\n    ],\n  })\n  focusColumn(args: CommandArgs<{ column?: number; dim?: number; grow?: number }> & { duration: number }): Command<LayoutGridProps> {\n    const slots = this._itemSlots()\n    const column = Math.round(args.data?.column ?? 0)\n    return this._focusOn((i) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.column === column, slots.length, args)\n  }\n\n  protected override arrangementFor(): RectangularArrangement {\n    return {\n      kind: \"rectangular\",\n      columns: this.columns,\n      fillDirection: this.fillDirection,\n      cellMode: this.cellMode,\n      cellWidth: this.cellWidth,\n      cellHeight: this.cellHeight,\n      columnGap: this.columnGap,\n      rowGap: this.rowGap,\n      lastLineAlign: this.lastLineAlign,\n      rowOffset: this.rowOffset,\n      columnOffset: this.columnOffset,\n    }\n  }\n\n  /** A child set to fill takes its cell, where the cell is not simply the largest child. */\n  protected override itemSpace(count: number, space: Size2D): Size2D {\n    if (this.cellMode === \"fit\") return space\n    return rectangularCell(this.arrangementFor(), count, [], space)\n  }\n}\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"]}

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

@@ -0,0 +1,68 @@
+import { type Command, type CommandArgs, type NodeConfig } from "@motionscript/core";
+import { LayoutGrid, type LayoutGridProps, type SphereArrangement, type SphereAxis, type SphereFacing } from "../kit/index.js";
+export interface SphereGridProps extends LayoutGridProps {
+    radius: number;
+    yaw: number;
+    pitch: number;
+    roll: number;
+    facing: SphereFacing;
+    focalLength: number;
+    depthFade: number;
+    cullBackfaces: boolean;
+    spinSpeed: number;
+}
+/**
+ * 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. {@link turnTo} brings any item
+ * round to the front.
+ */
+export declare class SphereGrid extends LayoutGrid<SphereGridProps> {
+    radius: number;
+    yaw: number;
+    pitch: number;
+    roll: number;
+    facing: SphereFacing;
+    focalLength: number;
+    depthFade: number;
+    cullBackfaces: boolean;
+    spinSpeed: number;
+    constructor(props?: NodeConfig<SphereGrid, SphereGridProps>);
+    /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
+    spin(args: CommandArgs<{
+        axis?: SphereAxis;
+        degrees?: number;
+    }> & {
+        duration: number;
+    }): Command<SphereGridProps>;
+    /** Turn the sphere to a set orientation. */
+    orientTo(args: CommandArgs<{
+        yaw?: number;
+        pitch?: number;
+        roll?: number;
+    }> & {
+        duration: number;
+    }): Command<SphereGridProps>;
+    /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */
+    turnTo(args: CommandArgs<{
+        item?: number;
+    }> & {
+        duration: number;
+    }): Command<SphereGridProps>;
+    radiusTo(args: CommandArgs<{
+        radius: number;
+    }> & {
+        duration: number;
+    }): Command<SphereGridProps>;
+    /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
+    focalLengthTo(args: CommandArgs<{
+        focalLength: number;
+    }> & {
+        duration: number;
+    }): Command<SphereGridProps>;
+    protected arrangementFor(): SphereArrangement;
+}
+//# 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,EAA2B,KAAK,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE7G,OAAO,EACL,UAAU,EAMV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,YAAY,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;CAClB;AAID;;;;;;;;GAQG;AACH,qBAWa,UAAW,SAAQ,UAAU,CAAC,eAAe,CAAC;IACJ,MAAM,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACe,MAAM,EAAE,YAAY,CAAA;IAC7C,WAAW,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IAC3C,aAAa,EAAE,OAAO,CAAA;IACJ,SAAS,EAAE,MAAM,CAAA;gBAE7D,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,EAAE,eAAe,CAAC;IAI3D,8EAA8E;IAO9E,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,IAAI,CAAC,EAAE,UAAU,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAMjH,4CAA4C;IAQ5C,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAQ7H,mGAAmG;IAEnG,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAmB7F,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAIhG,gGAAgG;IAEhG,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;cAQvF,cAAc,IAAI,iBAAiB;CAcvD"}

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

@@ -0,0 +1,149 @@
+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/core";
+import { LayoutGrid, normalizeOrder, SPHERE_AXES, SPHERE_FACINGS, sphereFaceForward, wrapDegrees, } from "../kit/index.js";
+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. {@link turnTo} brings any item
+ * round to the front.
+ */
+let SphereGrid = class SphereGrid extends LayoutGrid {
+    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,
+            },
+            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: "flow",
+            acceptsChildren: true,
+            defaultWidthMode: "hug",
+            defaultHeightMode: "hug",
+        },
+    })
+], SphereGrid);
+export { SphereGrid };
+//# 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 { command, node, property, type Command, type CommandArgs, type NodeConfig } from \"@motionscript/core\"\n\nimport {\n  LayoutGrid,\n  normalizeOrder,\n  SPHERE_AXES,\n  SPHERE_FACINGS,\n  sphereFaceForward,\n  wrapDegrees,\n  type LayoutGridProps,\n  type SphereArrangement,\n  type SphereAxis,\n  type SphereFacing,\n} from \"../kit\"\n\nexport interface SphereGridProps extends LayoutGridProps {\n  radius: number\n  yaw: number\n  pitch: number\n  roll: number\n  facing: SphereFacing\n  focalLength: number\n  depthFade: number\n  cullBackfaces: boolean\n  spinSpeed: number\n}\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. {@link turnTo} brings any item\n * round to the front.\n */\n@node({\n  key: \"sphereGrid\",\n  parentKey: \"node\",\n  forkable: true,\n  layout: {\n    children: \"flow\",\n    acceptsChildren: true,\n    defaultWidthMode: \"hug\",\n    defaultHeightMode: \"hug\",\n  },\n})\nexport class SphereGrid extends LayoutGrid<SphereGridProps> {\n  @property({ default: 220, min: 0, step: 1 }) declare radius: number\n  @property({ default: 0, step: 1, unit: \"°\" }) declare yaw: number\n  @property({ default: 0, step: 1, unit: \"°\" }) declare pitch: number\n  @property({ default: 0, step: 1, unit: \"°\" }) declare roll: number\n  @property({ default: \"outward\", kind: \"enum\", options: SPHERE_FACINGS }) declare facing: SphereFacing\n  @property({ default: 900, min: 100, step: 10 }) declare focalLength: number\n  @property({ default: 0.5, min: 0, max: 1, step: 0.05 }) declare depthFade: number\n  @property({ default: false }) declare cullBackfaces: boolean\n  @property({ default: 0, step: 1, unit: \"°/s\" }) declare spinSpeed: number\n\n  constructor(props?: NodeConfig<SphereGrid, SphereGridProps>) {\n    super(props)\n  }\n\n  /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */\n  @command({\n    args: [\n      { key: \"axis\", kind: \"enum\", options: SPHERE_AXES, default: \"y\" },\n      { key: \"degrees\", step: 15, unit: \"°\", default: 360 },\n    ],\n  })\n  spin(args: CommandArgs<{ axis?: SphereAxis; degrees?: number }> & { duration: number }): Command<SphereGridProps> {\n    const key = AXIS_PROP[args.data?.axis ?? \"y\"] ?? \"yaw\"\n    const degrees = args.data?.degrees ?? 360\n    return this.to({ data: { [key]: this[key] + degrees }, duration: args.duration, easing: args.easing })\n  }\n\n  /** Turn the sphere to a set orientation. */\n  @command({\n    args: [\n      { key: \"yaw\", unit: \"°\", default: 45 },\n      { key: \"pitch\", unit: \"°\", default: 20 },\n      { key: \"roll\", unit: \"°\", default: 0 },\n    ],\n  })\n  orientTo(args: CommandArgs<{ yaw?: number; pitch?: number; roll?: number }> & { duration: number }): Command<SphereGridProps> {\n    return this.to({\n      data: { yaw: args.data?.yaw ?? this.yaw, pitch: args.data?.pitch ?? this.pitch, roll: args.data?.roll ?? this.roll },\n      duration: args.duration,\n      easing: args.easing,\n    })\n  }\n\n  /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */\n  @command({ args: [{ key: \"item\", min: 0, step: 1, default: 0 }] })\n  turnTo(args: CommandArgs<{ item?: number }> & { duration: number }): Command<SphereGridProps> {\n    const count = this._itemCount()\n    const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0))\n    if (slot < 0) return this.to({ data: {}, duration: args.duration })\n    const facing = sphereFaceForward(count, slot)\n    // The yaw the clock has added is part of where the item is now.\n    const spun = this.spinSpeed * this.time.total\n    return this.to({\n      data: {\n        yaw: this.yaw + wrapDegrees(facing.yaw - (this.yaw + spun)),\n        pitch: this.pitch + wrapDegrees(facing.pitch - this.pitch),\n        roll: 0,\n      },\n      duration: args.duration,\n      easing: args.easing,\n    })\n  }\n\n  @command({ args: [{ key: \"radius\", min: 0, default: 300 }] })\n  radiusTo(args: CommandArgs<{ radius: number }> & { duration: number }): Command<SphereGridProps> {\n    return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing })\n  }\n\n  /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */\n  @command({ args: [{ key: \"focalLength\", min: 100, default: 600 }] })\n  focalLengthTo(args: CommandArgs<{ focalLength: number }> & { duration: number }): Command<SphereGridProps> {\n    return this.to({\n      data: { focalLength: args.data?.focalLength ?? this.focalLength },\n      duration: args.duration,\n      easing: args.easing,\n    })\n  }\n\n  protected override arrangementFor(): SphereArrangement {\n    return {\n      kind: \"sphere\",\n      radius: this.radius,\n      yaw: this.yaw,\n      pitch: this.pitch,\n      roll: this.roll,\n      facing: this.facing,\n      focalLength: this.focalLength,\n      depthFade: this.depthFade,\n      cullBackfaces: this.cullBackfaces,\n      spinSpeed: this.spinSpeed,\n    }\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@motionscript/layout-grid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.0",
+  "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/layout-grid"
+  },
+  "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": [
+    "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",
+  "peerDependencies": {
+    "@motionscript/core": "^0.1.0-alpha.0"
+  },
+  "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.0"
+  },
+  "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 --passWithNoTests",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }

package/registry.json

@@ -0,0 +1,32 @@
+{
+  "kit": {
+    "barrel": "src/engine.ts",
+    "specifier": "@motionscript/layout-grid/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 layout grid **kit**: what the four grids share, and what a copied one does
+ * not copy.
+ *
+ * `ms add` writes a grid's own files into your project and rewrites its reach for
+ * these to `@motionscript/layout-grid`, 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 `LayoutGrid` is a second class answering to one name, and
+ * a morph from one grid to another only finds grids of the class it knows.
+ */
+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,6 @@
+export * from "./slots"
+export * from "./stagger"
+export * from "./item-effects"
+export * from "./order"
+export * from "./random"
+export * from "./layout-grid"