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

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

@@ -1,51 +1,177 @@
-import { type Command, type CommandArgs, type NodeConfig } from "@motionscript/sdk";
-import { ItemGrid, type ItemGridProps, type RadialArrangement, type RadialDirection } from "../kit/index.js";
-export interface RadialGridProps extends ItemGridProps {
-    radius: number;
-    startAngle: number;
-    sweep: number;
-    direction: RadialDirection;
-    rotateItems: boolean;
-    spinSpeed: number;
-}
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
+import { ItemGrid } from "../kit/index.js";
 /**
  * Children round a circle, or along an arc of one.
  *
  * A full circle spaces the items evenly with none on top of another; an arc
- * puts one at each end. Angles run clockwise from twelve o'clock, so
- * {@link turnTo} can bring any item to the top like a dial.
+ * puts one at each end. Angles run clockwise from twelve o'clock, so `turnTo`
+ * can bring any item to the top like a dial.
  */
-export declare class RadialGrid extends ItemGrid<RadialGridProps> {
-    radius: number;
-    startAngle: number;
-    sweep: number;
-    direction: RadialDirection;
-    rotateItems: boolean;
-    spinSpeed: number;
-    constructor(props?: NodeConfig<RadialGrid, RadialGridProps>);
-    /** Orbit the items round the centre by `degrees` — `360` is one full turn. */
-    spin(args: CommandArgs<{
-        degrees?: number;
-    }> & {
-        duration: number;
-    }): Command<RadialGridProps>;
-    /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */
-    turnTo(args: CommandArgs<{
-        item?: number;
-    }> & {
-        duration: number;
-    }): Command<RadialGridProps>;
-    radiusTo(args: CommandArgs<{
-        radius: number;
-    }> & {
-        duration: number;
-    }): Command<RadialGridProps>;
-    /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */
-    sweepTo(args: CommandArgs<{
-        sweep: number;
-    }> & {
-        duration: number;
-    }): Command<RadialGridProps>;
-    protected arrangementFor(): RadialArrangement;
-}
+export declare const RadialGrid: import("@motionscript/sdk").Component<"radialGrid", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly startAngle: import("@motionscript/sdk").Type<number, number, false>;
+    readonly sweep: import("@motionscript/sdk").Type<number, number, false>;
+    readonly direction: import("@motionscript/sdk").Type<"clockwise" | "counterclockwise", "clockwise" | "counterclockwise", false>;
+    readonly rotateItems: 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 degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<280 | undefined, 280 | undefined, false>;
+    };
+    readonly sweepTo: {
+        readonly sweep: import("@motionscript/sdk").Type<360 | undefined, 360 | 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 startAngle: import("@motionscript/sdk").Type<number, number, false>;
+    readonly sweep: import("@motionscript/sdk").Type<number, number, false>;
+    readonly direction: import("@motionscript/sdk").Type<"clockwise" | "counterclockwise", "clockwise" | "counterclockwise", false>;
+    readonly rotateItems: 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 startAngle: import("@motionscript/sdk").Type<number, number, false>;
+    readonly sweep: import("@motionscript/sdk").Type<number, number, false>;
+    readonly direction: import("@motionscript/sdk").Type<"clockwise" | "counterclockwise", "clockwise" | "counterclockwise", false>;
+    readonly rotateItems: 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 degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<280 | undefined, 280 | undefined, false>;
+    };
+    readonly sweepTo: {
+        readonly sweep: import("@motionscript/sdk").Type<360 | undefined, 360 | 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 RadialGrid = NodeOf<typeof RadialGrid>;
+/** What a call or a document row may set. */
+export type RadialGridProps = NonNullable<Parameters<typeof RadialGrid>[0]>;
 //# sourceMappingURL=radial-grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radial-grid.d.ts","sourceRoot":"","sources":["../../src/radial-grid/radial-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE5G,OAAO,EACL,QAAQ,EAIR,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,eAAe,CAAA;IAC1B,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED;;;;;;GAMG;AACH,qBAWa,UAAW,SAAQ,QAAQ,CAAC,eAAe,CAAC;IACF,MAAM,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IACK,KAAK,EAAE,MAAM,CAAA;IACJ,SAAS,EAAE,eAAe,CAAA;IAC1E,WAAW,EAAE,OAAO,CAAA;IACF,SAAS,EAAE,MAAM,CAAA;gBAE7D,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,EAAE,eAAe,CAAC;IAI3D,8EAA8E;IAE9E,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAK9F,sGAAsG;IAEtG,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;IAQ7F,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,mFAAmF;IAEnF,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;cAI3E,cAAc,IAAI,iBAAiB;CAWvD"}
+{"version":3,"file":"radial-grid.d.ts","sourceRoot":"","sources":["../../src/radial-grid/radial-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,EAAE,QAAQ,EAA8E,MAAM,QAAQ,CAAA;AA2B7G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgCV,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/radial-grid/radial-grid.js

@@ -1,95 +1,63 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { component2d, Types, } from "@motionscript/sdk";
+import { ItemGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop } from "../kit/index.js";
+const own = {
+    radius: Types.number(200, { min: 0, step: 1 }),
+    startAngle: Types.number(0, { step: 1, unit: "°" }),
+    sweep: Types.number(360, { min: -360, max: 360, step: 1, unit: "°" }),
+    direction: Types.oneOf(RADIAL_DIRECTIONS, { default: "clockwise" }),
+    rotateItems: false,
+    spinSpeed: Types.number(0, { step: 1, unit: "°/s" }),
 };
-import { command, node, property } from "@motionscript/sdk";
-import { ItemGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop, } from "../kit/index.js";
+function arrangement(s) {
+    return {
+        kind: "radial",
+        radius: s.radius,
+        startAngle: s.startAngle,
+        sweep: s.sweep,
+        direction: s.direction,
+        rotateItems: s.rotateItems,
+        spinSpeed: s.spinSpeed,
+    };
+}
+const arranger = { arrangement };
 /**
  * Children round a circle, or along an arc of one.
  *
  * A full circle spaces the items evenly with none on top of another; an arc
- * puts one at each end. Angles run clockwise from twelve o'clock, so
- * {@link turnTo} can bring any item to the top like a dial.
+ * puts one at each end. Angles run clockwise from twelve o'clock, so `turnTo`
+ * can bring any item to the top like a dial.
  */
-let RadialGrid = class RadialGrid extends ItemGrid {
-    constructor(props) {
-        super(props);
-    }
-    /** Orbit the items round the centre by `degrees` — `360` is one full turn. */
-    spin(args) {
-        const degrees = args.data?.degrees ?? 360;
-        return this.to({ data: { startAngle: this.startAngle + degrees }, duration: args.duration, easing: args.easing });
-    }
-    /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */
-    turnTo(args) {
-        const count = this._itemCount();
-        const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0));
-        const turn = slot < 0 ? 0 : radialTurnToTop(this.arrangementFor(), count, slot);
-        return this.to({ data: { startAngle: this.startAngle + turn }, duration: args.duration, easing: args.easing });
-    }
-    radiusTo(args) {
-        return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing });
-    }
-    /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */
-    sweepTo(args) {
-        return this.to({ data: { sweep: args.data?.sweep ?? this.sweep }, duration: args.duration, easing: args.easing });
-    }
-    arrangementFor() {
-        return {
-            kind: "radial",
-            radius: this.radius,
-            startAngle: this.startAngle,
-            sweep: this.sweep,
-            direction: this.direction,
-            rotateItems: this.rotateItems,
-            spinSpeed: this.spinSpeed,
-        };
-    }
-};
-__decorate([
-    property({ default: 200, min: 0, step: 1 })
-], RadialGrid.prototype, "radius", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], RadialGrid.prototype, "startAngle", void 0);
-__decorate([
-    property({ default: 360, min: -360, max: 360, step: 1, unit: "°" })
-], RadialGrid.prototype, "sweep", void 0);
-__decorate([
-    property({ default: "clockwise", kind: "enum", options: RADIAL_DIRECTIONS })
-], RadialGrid.prototype, "direction", void 0);
-__decorate([
-    property({ default: false })
-], RadialGrid.prototype, "rotateItems", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°/s" })
-], RadialGrid.prototype, "spinSpeed", void 0);
-__decorate([
-    command({ args: [{ key: "degrees", step: 15, unit: "°", default: 360 }] })
-], RadialGrid.prototype, "spin", null);
-__decorate([
-    command({ args: [{ key: "item", min: 0, step: 1, default: 0 }] })
-], RadialGrid.prototype, "turnTo", null);
-__decorate([
-    command({ args: [{ key: "radius", min: 0, default: 280 }] })
-], RadialGrid.prototype, "radiusTo", null);
-__decorate([
-    command({ args: [{ key: "sweep", min: -360, max: 360, unit: "°", default: 360 }] })
-], RadialGrid.prototype, "sweepTo", null);
-RadialGrid = __decorate([
-    node({
-        key: "radialGrid",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            acceptsChildren: true,
-            defaultWidthMode: "hug",
-            defaultHeightMode: "hug",
+export const RadialGrid = ItemGrid.define(component2d({
+    key: "radialGrid",
+    state: { ...ItemGrid.state, ...own },
+    defaults: ItemGrid.defaults,
+    commands: {
+        ...ItemGrid.commands,
+        /** Orbit the items round the centre by `degrees` — `360` is one full turn. */
+        spin: {
+            args: { degrees: Types.number(360, { step: 15, unit: "°" }) },
+            run: (timeline, s) => timeline.tween({ startAngle: s.startAngle + (timeline.args.degrees ?? 360) }),
+        },
+        /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */
+        turnTo: {
+            args: { item: Types.number(0, { min: 0, step: 1 }) },
+            run: (timeline, s, children) => {
+                const count = children.length;
+                const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0));
+                const turn = slot < 0 ? 0 : radialTurnToTop(arrangement(s), count, slot);
+                return timeline.tween({ startAngle: s.startAngle + turn });
+            },
+        },
+        radiusTo: {
+            args: { radius: ItemGrid.hinted(280, { min: 0 }) },
+            run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),
+        },
+        /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */
+        sweepTo: {
+            args: { sweep: ItemGrid.hinted(360, { min: -360, max: 360, unit: "°" }) },
+            run: (timeline, s) => timeline.tween({ sweep: timeline.args.sweep ?? s.sweep }),
         },
-    })
-], RadialGrid);
-export { RadialGrid };
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
 //# sourceMappingURL=radial-grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radial-grid.js","sourceRoot":"","sources":["../../src/radial-grid/radial-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  RADIAL_DIRECTIONS,\r\n  radialTurnToTop,\r\n  type ItemGridProps,\r\n  type RadialArrangement,\r\n  type RadialDirection,\r\n} from \"../kit\"\r\n\r\nexport interface RadialGridProps extends ItemGridProps {\r\n  radius: number\r\n  startAngle: number\r\n  sweep: number\r\n  direction: RadialDirection\r\n  rotateItems: boolean\r\n  spinSpeed: number\r\n}\r\n\r\n/**\r\n * Children round a circle, or along an arc of one.\r\n *\r\n * A full circle spaces the items evenly with none on top of another; an arc\r\n * puts one at each end. Angles run clockwise from twelve o'clock, so\r\n * {@link turnTo} can bring any item to the top like a dial.\r\n */\r\n@node({\r\n  key: \"radialGrid\",\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 RadialGrid extends ItemGrid<RadialGridProps> {\r\n  @property({ default: 200, min: 0, step: 1 }) declare radius: number\r\n  @property({ default: 0, step: 1, unit: \"°\" }) declare startAngle: number\r\n  @property({ default: 360, min: -360, max: 360, step: 1, unit: \"°\" }) declare sweep: number\r\n  @property({ default: \"clockwise\", kind: \"enum\", options: RADIAL_DIRECTIONS }) declare direction: RadialDirection\r\n  @property({ default: false }) declare rotateItems: boolean\r\n  @property({ default: 0, step: 1, unit: \"°/s\" }) declare spinSpeed: number\r\n\r\n  constructor(props?: NodeConfig<RadialGrid, RadialGridProps>) {\r\n    super(props)\r\n  }\r\n\r\n  /** Orbit the items round the centre by `degrees` — `360` is one full turn. */\r\n  @command({ args: [{ key: \"degrees\", step: 15, unit: \"°\", default: 360 }] })\r\n  spin(args: CommandArgs<{ degrees?: number }> & { duration: number }): Command<RadialGridProps> {\r\n    const degrees = args.data?.degrees ?? 360\r\n    return this.to({ data: { startAngle: this.startAngle + degrees }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */\r\n  @command({ args: [{ key: \"item\", min: 0, step: 1, default: 0 }] })\r\n  turnTo(args: CommandArgs<{ item?: number }> & { duration: number }): Command<RadialGridProps> {\r\n    const count = this._itemCount()\r\n    const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0))\r\n    const turn = slot < 0 ? 0 : radialTurnToTop(this.arrangementFor(), count, slot)\r\n    return this.to({ data: { startAngle: this.startAngle + turn }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  @command({ args: [{ key: \"radius\", min: 0, default: 280 }] })\r\n  radiusTo(args: CommandArgs<{ radius: number }> & { duration: number }): Command<RadialGridProps> {\r\n    return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */\r\n  @command({ args: [{ key: \"sweep\", min: -360, max: 360, unit: \"°\", default: 360 }] })\r\n  sweepTo(args: CommandArgs<{ sweep: number }> & { duration: number }): Command<RadialGridProps> {\r\n    return this.to({ data: { sweep: args.data?.sweep ?? this.sweep }, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  protected override arrangementFor(): RadialArrangement {\r\n    return {\r\n      kind: \"radial\",\r\n      radius: this.radius,\r\n      startAngle: this.startAngle,\r\n      sweep: this.sweep,\r\n      direction: this.direction,\r\n      rotateItems: this.rotateItems,\r\n      spinSpeed: this.spinSpeed,\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"radial-grid.js","sourceRoot":"","sources":["../../src/radial-grid/radial-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 { ItemGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop, type RadialArrangement } from \"../kit\"\r\n\r\nconst own = {\r\n  radius: Types.number(200, { min: 0, step: 1 }),\r\n  startAngle: Types.number(0, { step: 1, unit: \"°\" }),\r\n  sweep: Types.number(360, { min: -360, max: 360, step: 1, unit: \"°\" }),\r\n  direction: Types.oneOf(RADIAL_DIRECTIONS, { default: \"clockwise\" }),\r\n  rotateItems: 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): RadialArrangement {\r\n  return {\r\n    kind: \"radial\",\r\n    radius: s.radius,\r\n    startAngle: s.startAngle,\r\n    sweep: s.sweep,\r\n    direction: s.direction,\r\n    rotateItems: s.rotateItems,\r\n    spinSpeed: s.spinSpeed,\r\n  }\r\n}\r\n\r\nconst arranger: ItemGrid.Arranger<Own> = { arrangement }\r\n\r\n/**\r\n * Children round a circle, or along an arc of one.\r\n *\r\n * A full circle spaces the items evenly with none on top of another; an arc\r\n * puts one at each end. Angles run clockwise from twelve o'clock, so `turnTo`\r\n * can bring any item to the top like a dial.\r\n */\r\nexport const RadialGrid = ItemGrid.define(component2d({\r\n  key: \"radialGrid\",\r\n  state: { ...ItemGrid.state, ...own },\r\n  defaults: ItemGrid.defaults,\r\n  commands: {\r\n    ...ItemGrid.commands,\r\n    /** Orbit the items round the centre by `degrees` — `360` is one full turn. */\r\n    spin: {\r\n      args: { degrees: Types.number(360, { step: 15, unit: \"°\" }) },\r\n      run: (timeline, s) => timeline.tween({ startAngle: s.startAngle + (timeline.args.degrees ?? 360) }),\r\n    },\r\n    /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */\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        const turn = slot < 0 ? 0 : radialTurnToTop(arrangement(s), count, slot)\r\n        return timeline.tween({ startAngle: s.startAngle + turn })\r\n      },\r\n    },\r\n    radiusTo: {\r\n      args: { radius: ItemGrid.hinted(280, { min: 0 }) },\r\n      run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),\r\n    },\r\n    /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */\r\n    sweepTo: {\r\n      args: { sweep: ItemGrid.hinted(360, { min: -360, max: 360, unit: \"°\" }) },\r\n      run: (timeline, s) => timeline.tween({ sweep: timeline.args.sweep ?? s.sweep }),\r\n    },\r\n  },\r\n  ...ItemGrid.fields(arranger),\r\n}), arranger)\r\n\r\nexport type RadialGrid = NodeOf<typeof RadialGrid>\r\n/** What a call or a document row may set. */\r\nexport type RadialGridProps = NonNullable<Parameters<typeof RadialGrid>[0]>\r\n"]}