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

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

@@ -0,0 +1,82 @@
+import { type Command, type CommandArgs, type NodeConfig, type PathData, type Size2D } from "@motionscript/sdk";
+import { LayoutGrid, type LayoutGridProps, type PathArrangement, type PathSpacing, type StaggerArgs } from "../kit/index.js";
+/** A template, or `custom` for the grid's own {@link PathGrid.path}. */
+export declare const PATH_GRID_SHAPES: readonly ["circle", "square", "star", "heart", "infinity", "wave", "spiral", "arc", "line", "custom"];
+export type PathGridShape = (typeof PATH_GRID_SHAPES)[number];
+export interface PathGridProps extends LayoutGridProps {
+    shape: PathGridShape;
+    path: PathData;
+    pathNode: string;
+    spacing: PathSpacing;
+    spacingDistance: number;
+    offset: number;
+    flowSpeed: number;
+    trimStart: number;
+    trimEnd: number;
+    alignToPath: boolean;
+}
+/**
+ * Children along a path: one of the templates drawn to fill the node's box,
+ * a path of the grid's own, or a `Path` node elsewhere in the scene, followed
+ * wherever it is.
+ *
+ * Items are spaced by distance along the curve, so they sit evenly on a tight
+ * bend and a straight alike. Animating {@link offset} moves them along it — on
+ * a closed path they come round again, which is a conveyor belt for free.
+ */
+export declare class PathGrid extends LayoutGrid<PathGridProps> {
+    shape: PathGridShape;
+    /** Used when {@link shape} is `custom`: an SVG path, y-down as SVG writes one, centred on its own bounds. */
+    path: PathData;
+    /** A path node to follow instead, by id — the items track it wherever it goes. */
+    pathNode: string;
+    spacing: PathSpacing;
+    spacingDistance: number;
+    /** Share of the path the items are moved along — `1` is once round. */
+    offset: number;
+    /** Share of the path per second the items travel on their own. */
+    flowSpeed: number;
+    trimStart: number;
+    trimEnd: number;
+    alignToPath: boolean;
+    constructor(props?: NodeConfig<PathGrid, PathGridProps>);
+    /** Move the items along the path by `loops` — `1` is once round, and they keep their spacing. */
+    flow(args: CommandArgs<{
+        loops?: number;
+    }> & {
+        duration: number;
+    }): Command<PathGridProps>;
+    /** Squeeze the items into part of the path, between two shares of its length. */
+    trimTo(args: CommandArgs<{
+        trimStart?: number;
+        trimEnd?: number;
+    }> & {
+        duration: number;
+    }): Command<PathGridProps>;
+    /**
+     * Move the items onto another path — a template, or a `Path` node in the
+     * scene. Each item travels from its place on the old path to its place on the
+     * new one; the path itself is not morphed.
+     */
+    setPath(args: CommandArgs<{
+        shape?: PathGridShape;
+        pathNode?: string;
+    } & StaggerArgs> & {
+        duration: number;
+    }): Command<PathGridProps>;
+    protected arrangementFor(box: Size2D): PathArrangement;
+    protected applyDefaultSize(props?: {
+        readonly width?: unknown;
+        readonly height?: unknown;
+    }): void;
+    private _linked;
+    /** The path the items follow, and where its coordinates land in this grid's frame. */
+    private _pathIn;
+    /**
+     * A path node's geometry as it draws it: stored in its unit box, y-down, and
+     * scaled to its laid-out size — kept while neither changes, so the path's
+     * measurement is kept with it.
+     */
+    private _unitPath;
+}
+//# sourceMappingURL=path-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path-grid.d.ts","sourceRoot":"","sources":["../../src/path-grid/path-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,QAAQ,EACb,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAGL,UAAU,EAMV,KAAK,eAAe,EACpB,KAAK,eAAe,EAEpB,KAAK,WAAW,EAEhB,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAA;AAEf,wEAAwE;AACxE,eAAO,MAAM,gBAAgB,uGAAyC,CAAA;AACtE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,KAAK,EAAE,aAAa,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,WAAW,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;CACrB;AAOD;;;;;;;;GAQG;AACH,qBAca,QAAS,SAAQ,UAAU,CAAC,aAAa,CAAC;IAC6B,KAAK,EAAE,aAAa,CAAA;IACtG,6GAA6G;IACrF,IAAI,EAAE,QAAQ,CAAA;IACtC,kFAAkF;IACU,QAAQ,EAAE,MAAM,CAAA;IACzB,OAAO,EAAE,WAAW,CAAA;IACnD,eAAe,EAAE,MAAM,CAAA;IAC3E,uEAAuE;IACzB,MAAM,EAAE,MAAM,CAAA;IAC5D,kEAAkE;IACR,SAAS,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACxC,WAAW,EAAE,OAAO,CAAA;gBAE7C,KAAK,CAAC,EAAE,UAAU,CAAC,QAAQ,EAAE,aAAa,CAAC;IAIvD,iGAAiG;IAEjG,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,aAAa,CAAC;IAK1F,iFAAiF;IAOjF,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,aAAa,CAAC;IAQlH;;;;OAIG;IAQH,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,KAAK,CAAC,EAAE,aAAa,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,aAAa,CAAC;cAMlH,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe;cAkB5C,gBAAgB,CAAC,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IAK1G,OAAO,CAAC,OAAO,CAAiF;IAEhG,sFAAsF;IACtF,OAAO,CAAC,OAAO;IAoCf;;;;OAIG;IACH,OAAO,CAAC,SAAS;CAQlB"}

package/dist/path-grid/path-grid.js

@@ -0,0 +1,192 @@
+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, Path, pathOps, PathShape, pathProperty, property, } from "@motionscript/sdk";
+import { findNode2D, frameIn, LayoutGrid, PATH_SPACINGS, PATH_TEMPLATES, staggerArgs, TRANSITION_STAGGER, templatePath, } from "../kit/index.js";
+/** A template, or `custom` for the grid's own {@link PathGrid.path}. */
+export const PATH_GRID_SHAPES = [...PATH_TEMPLATES, "custom"];
+const AT_ORIGIN = { originX: 0, originY: 0, x: 0, y: 0, rotation: 0, scale: 1 };
+/** The size a path grid is placed at when nothing says otherwise, since a template is drawn to fill it. */
+const DEFAULT_SIZE = { width: 640, height: 400 };
+/**
+ * Children along a path: one of the templates drawn to fill the node's box,
+ * a path of the grid's own, or a `Path` node elsewhere in the scene, followed
+ * wherever it is.
+ *
+ * Items are spaced by distance along the curve, so they sit evenly on a tight
+ * bend and a straight alike. Animating {@link offset} moves them along it — on
+ * a closed path they come round again, which is a conveyor belt for free.
+ */
+let PathGrid = class PathGrid extends LayoutGrid {
+    constructor(props) {
+        super(props);
+    }
+    /** Move the items along the path by `loops` — `1` is once round, and they keep their spacing. */
+    flow(args) {
+        const loops = args.data?.loops ?? 1;
+        return this.to({ data: { offset: this.offset + loops }, duration: args.duration, easing: args.easing });
+    }
+    /** Squeeze the items into part of the path, between two shares of its length. */
+    trimTo(args) {
+        return this.to({
+            data: { trimStart: args.data?.trimStart ?? this.trimStart, trimEnd: args.data?.trimEnd ?? this.trimEnd },
+            duration: args.duration,
+            easing: args.easing,
+        });
+    }
+    /**
+     * Move the items onto another path — a template, or a `Path` node in the
+     * scene. Each item travels from its place on the old path to its place on the
+     * new one; the path itself is not morphed.
+     */
+    setPath(args) {
+        const pathNode = args.data?.pathNode ?? "";
+        const changes = pathNode ? { pathNode } : { shape: args.data?.shape ?? this.shape, pathNode: "" };
+        return this._transitionTo(changes, args);
+    }
+    arrangementFor(box) {
+        const { path, placement } = this._pathIn(box);
+        return {
+            kind: "path",
+            path,
+            placement,
+            spacing: this.spacing,
+            spacingDistance: this.spacingDistance,
+            offset: this.offset,
+            flowSpeed: this.flowSpeed,
+            trimStart: this.trimStart,
+            trimEnd: this.trimEnd,
+            alignToPath: this.alignToPath,
+        };
+    }
+    // A template is drawn to fill the box, so a path grid needs one of its own
+    // rather than hugging items whose places depend on it.
+    applyDefaultSize(props) {
+        if (!props || props.width === undefined)
+            this.applyProp("width", DEFAULT_SIZE.width);
+        if (!props || props.height === undefined)
+            this.applyProp("height", DEFAULT_SIZE.height);
+    }
+    _linked = null;
+    /** The path the items follow, and where its coordinates land in this grid's frame. */
+    _pathIn(box) {
+        const linked = this.pathNode ? findNode2D(this, this.pathNode) : null;
+        if (linked instanceof PathShape) {
+            return { path: this._unitPath(linked), placement: { ...AT_ORIGIN, ...frameIn(this, linked) } };
+        }
+        if (linked instanceof Path && pathOps.bounds(linked.data)) {
+            // A `Path` draws its data centred on the data's own bounds, at its own position.
+            const bounds = pathOps.bounds(linked.data);
+            const frame = frameIn(this, linked);
+            return {
+                path: linked.data,
+                placement: {
+                    originX: (bounds.minX + bounds.maxX) / 2,
+                    originY: (bounds.minY + bounds.maxY) / 2,
+                    ...frame,
+                },
+            };
+        }
+        if (this.shape === "custom") {
+            const bounds = pathOps.bounds(this.path);
+            if (bounds) {
+                return {
+                    path: this.path,
+                    placement: {
+                        ...AT_ORIGIN,
+                        originX: (bounds.minX + bounds.maxX) / 2,
+                        originY: (bounds.minY + bounds.maxY) / 2,
+                        flipY: true,
+                    },
+                };
+            }
+        }
+        const template = this.shape === "custom" ? "circle" : this.shape;
+        return { path: templatePath(template, box), placement: AT_ORIGIN };
+    }
+    /**
+     * A path node's geometry as it draws it: stored in its unit box, y-down, and
+     * scaled to its laid-out size — kept while neither changes, so the path's
+     * measurement is kept with it.
+     */
+    _unitPath(shape) {
+        const { width, height } = shape.layoutBounds;
+        const cached = this._linked;
+        if (cached && cached.data === shape.data && cached.width === width && cached.height === height)
+            return cached.path;
+        const path = pathOps.anchorCommands(pathOps.anchors(shape.data), (p) => ({ x: p.x * width, y: -p.y * height }));
+        this._linked = { data: shape.data, width, height, path };
+        return path;
+    }
+};
+__decorate([
+    property({ default: "circle", kind: "enum", options: PATH_GRID_SHAPES })
+], PathGrid.prototype, "shape", void 0);
+__decorate([
+    pathProperty()
+], PathGrid.prototype, "path", void 0);
+__decorate([
+    property({ default: "", kind: "nodeRef", nodeTypes: ["path"], animatable: false })
+], PathGrid.prototype, "pathNode", void 0);
+__decorate([
+    property({ default: "distribute", kind: "enum", options: PATH_SPACINGS })
+], PathGrid.prototype, "spacing", void 0);
+__decorate([
+    property({ default: 80, min: 0, step: 1 })
+], PathGrid.prototype, "spacingDistance", void 0);
+__decorate([
+    property({ default: 0, step: 0.01 })
+], PathGrid.prototype, "offset", void 0);
+__decorate([
+    property({ default: 0, step: 0.01, unit: "/s" })
+], PathGrid.prototype, "flowSpeed", void 0);
+__decorate([
+    property({ default: 0, min: 0, max: 1, step: 0.01 })
+], PathGrid.prototype, "trimStart", void 0);
+__decorate([
+    property({ default: 1, min: 0, max: 1, step: 0.01 })
+], PathGrid.prototype, "trimEnd", void 0);
+__decorate([
+    property({ default: true })
+], PathGrid.prototype, "alignToPath", void 0);
+__decorate([
+    command({ args: [{ key: "loops", step: 0.25, default: 1 }] })
+], PathGrid.prototype, "flow", null);
+__decorate([
+    command({
+        args: [
+            { key: "trimStart", min: 0, max: 1, step: 0.01, default: 0.25 },
+            { key: "trimEnd", min: 0, max: 1, step: 0.01, default: 0.75 },
+        ],
+    })
+], PathGrid.prototype, "trimTo", null);
+__decorate([
+    command({
+        args: [
+            { key: "shape", kind: "enum", options: PATH_GRID_SHAPES, default: "heart" },
+            { key: "pathNode", kind: "nodeRef", nodeTypes: ["path"] },
+            ...staggerArgs(TRANSITION_STAGGER),
+        ],
+    })
+], PathGrid.prototype, "setPath", null);
+PathGrid = __decorate([
+    node({
+        key: "pathGrid",
+        parentKey: "node",
+        forkable: true,
+        layout: {
+            children: "flow",
+            acceptsChildren: true,
+            defaultWidthMode: "fixed",
+            defaultHeightMode: "fixed",
+            defaultWidth: DEFAULT_SIZE.width,
+            defaultHeight: DEFAULT_SIZE.height,
+        },
+        seed: { ...DEFAULT_SIZE },
+    })
+], PathGrid);
+export { PathGrid };
+//# sourceMappingURL=path-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path-grid.js","sourceRoot":"","sources":["../../src/path-grid/path-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  command,\n  node,\n  Path,\n  pathOps,\n  PathShape,\n  pathProperty,\n  property,\n  type Command,\n  type CommandArgs,\n  type NodeConfig,\n  type PathData,\n  type Size2D,\n} from \"@motionscript/sdk\"\n\nimport {\n  findNode2D,\n  frameIn,\n  LayoutGrid,\n  PATH_SPACINGS,\n  PATH_TEMPLATES,\n  staggerArgs,\n  TRANSITION_STAGGER,\n  templatePath,\n  type LayoutGridProps,\n  type PathArrangement,\n  type PathPlacement,\n  type PathSpacing,\n  type PathTemplate,\n  type StaggerArgs,\n} from \"../kit\"\n\n/** A template, or `custom` for the grid's own {@link PathGrid.path}. */\nexport const PATH_GRID_SHAPES = [...PATH_TEMPLATES, \"custom\"] as const\nexport type PathGridShape = (typeof PATH_GRID_SHAPES)[number]\n\nexport interface PathGridProps extends LayoutGridProps {\n  shape: PathGridShape\n  path: PathData\n  pathNode: string\n  spacing: PathSpacing\n  spacingDistance: number\n  offset: number\n  flowSpeed: number\n  trimStart: number\n  trimEnd: number\n  alignToPath: boolean\n}\n\nconst AT_ORIGIN: PathPlacement = { originX: 0, originY: 0, x: 0, y: 0, rotation: 0, scale: 1 }\n\n/** The size a path grid is placed at when nothing says otherwise, since a template is drawn to fill it. */\nconst DEFAULT_SIZE = { width: 640, height: 400 }\n\n/**\n * Children along a path: one of the templates drawn to fill the node's box,\n * a path of the grid's own, or a `Path` node elsewhere in the scene, followed\n * wherever it is.\n *\n * Items are spaced by distance along the curve, so they sit evenly on a tight\n * bend and a straight alike. Animating {@link offset} moves them along it — on\n * a closed path they come round again, which is a conveyor belt for free.\n */\n@node({\n  key: \"pathGrid\",\n  parentKey: \"node\",\n  forkable: true,\n  layout: {\n    children: \"flow\",\n    acceptsChildren: true,\n    defaultWidthMode: \"fixed\",\n    defaultHeightMode: \"fixed\",\n    defaultWidth: DEFAULT_SIZE.width,\n    defaultHeight: DEFAULT_SIZE.height,\n  },\n  seed: { ...DEFAULT_SIZE },\n})\nexport class PathGrid extends LayoutGrid<PathGridProps> {\n  @property({ default: \"circle\", kind: \"enum\", options: PATH_GRID_SHAPES }) declare shape: PathGridShape\n  /** Used when {@link shape} is `custom`: an SVG path, y-down as SVG writes one, centred on its own bounds. */\n  @pathProperty() declare path: PathData\n  /** A path node to follow instead, by id — the items track it wherever it goes. */\n  @property({ default: \"\", kind: \"nodeRef\", nodeTypes: [\"path\"], animatable: false }) declare pathNode: string\n  @property({ default: \"distribute\", kind: \"enum\", options: PATH_SPACINGS }) declare spacing: PathSpacing\n  @property({ default: 80, min: 0, step: 1 }) declare spacingDistance: number\n  /** Share of the path the items are moved along — `1` is once round. */\n  @property({ default: 0, step: 0.01 }) declare offset: number\n  /** Share of the path per second the items travel on their own. */\n  @property({ default: 0, step: 0.01, unit: \"/s\" }) declare flowSpeed: number\n  @property({ default: 0, min: 0, max: 1, step: 0.01 }) declare trimStart: number\n  @property({ default: 1, min: 0, max: 1, step: 0.01 }) declare trimEnd: number\n  @property({ default: true }) declare alignToPath: boolean\n\n  constructor(props?: NodeConfig<PathGrid, PathGridProps>) {\n    super(props)\n  }\n\n  /** Move the items along the path by `loops` — `1` is once round, and they keep their spacing. */\n  @command({ args: [{ key: \"loops\", step: 0.25, default: 1 }] })\n  flow(args: CommandArgs<{ loops?: number }> & { duration: number }): Command<PathGridProps> {\n    const loops = args.data?.loops ?? 1\n    return this.to({ data: { offset: this.offset + loops }, duration: args.duration, easing: args.easing })\n  }\n\n  /** Squeeze the items into part of the path, between two shares of its length. */\n  @command({\n    args: [\n      { key: \"trimStart\", min: 0, max: 1, step: 0.01, default: 0.25 },\n      { key: \"trimEnd\", min: 0, max: 1, step: 0.01, default: 0.75 },\n    ],\n  })\n  trimTo(args: CommandArgs<{ trimStart?: number; trimEnd?: number }> & { duration: number }): Command<PathGridProps> {\n    return this.to({\n      data: { trimStart: args.data?.trimStart ?? this.trimStart, trimEnd: args.data?.trimEnd ?? this.trimEnd },\n      duration: args.duration,\n      easing: args.easing,\n    })\n  }\n\n  /**\n   * Move the items onto another path — a template, or a `Path` node in the\n   * scene. Each item travels from its place on the old path to its place on the\n   * new one; the path itself is not morphed.\n   */\n  @command({\n    args: [\n      { key: \"shape\", kind: \"enum\", options: PATH_GRID_SHAPES, default: \"heart\" },\n      { key: \"pathNode\", kind: \"nodeRef\", nodeTypes: [\"path\"] },\n      ...staggerArgs(TRANSITION_STAGGER),\n    ],\n  })\n  setPath(args: CommandArgs<{ shape?: PathGridShape; pathNode?: string } & StaggerArgs> & { duration: number }): Command<PathGridProps> {\n    const pathNode = args.data?.pathNode ?? \"\"\n    const changes: Partial<PathGridProps> = pathNode ? { pathNode } : { shape: args.data?.shape ?? this.shape, pathNode: \"\" }\n    return this._transitionTo(changes, args)\n  }\n\n  protected override arrangementFor(box: Size2D): PathArrangement {\n    const { path, placement } = this._pathIn(box)\n    return {\n      kind: \"path\",\n      path,\n      placement,\n      spacing: this.spacing,\n      spacingDistance: this.spacingDistance,\n      offset: this.offset,\n      flowSpeed: this.flowSpeed,\n      trimStart: this.trimStart,\n      trimEnd: this.trimEnd,\n      alignToPath: this.alignToPath,\n    }\n  }\n\n  // A template is drawn to fill the box, so a path grid needs one of its own\n  // rather than hugging items whose places depend on it.\n  protected override applyDefaultSize(props?: { readonly width?: unknown; readonly height?: unknown }): void {\n    if (!props || props.width === undefined) this.applyProp(\"width\", DEFAULT_SIZE.width)\n    if (!props || props.height === undefined) this.applyProp(\"height\", DEFAULT_SIZE.height)\n  }\n\n  private _linked: { data: PathData; width: number; height: number; path: PathData } | null = null\n\n  /** The path the items follow, and where its coordinates land in this grid's frame. */\n  private _pathIn(box: Size2D): { path: PathData; placement: PathPlacement } {\n    const linked = this.pathNode ? findNode2D(this, this.pathNode) : null\n    if (linked instanceof PathShape) {\n      return { path: this._unitPath(linked), placement: { ...AT_ORIGIN, ...frameIn(this, linked) } }\n    }\n    if (linked instanceof Path && pathOps.bounds(linked.data)) {\n      // A `Path` draws its data centred on the data's own bounds, at its own position.\n      const bounds = pathOps.bounds(linked.data)!\n      const frame = frameIn(this, linked)\n      return {\n        path: linked.data,\n        placement: {\n          originX: (bounds.minX + bounds.maxX) / 2,\n          originY: (bounds.minY + bounds.maxY) / 2,\n          ...frame,\n        },\n      }\n    }\n    if (this.shape === \"custom\") {\n      const bounds = pathOps.bounds(this.path)\n      if (bounds) {\n        return {\n          path: this.path,\n          placement: {\n            ...AT_ORIGIN,\n            originX: (bounds.minX + bounds.maxX) / 2,\n            originY: (bounds.minY + bounds.maxY) / 2,\n            flipY: true,\n          },\n        }\n      }\n    }\n    const template: PathTemplate = this.shape === \"custom\" ? \"circle\" : this.shape\n    return { path: templatePath(template, box), placement: AT_ORIGIN }\n  }\n\n  /**\n   * A path node's geometry as it draws it: stored in its unit box, y-down, and\n   * scaled to its laid-out size — kept while neither changes, so the path's\n   * measurement is kept with it.\n   */\n  private _unitPath(shape: PathShape): PathData {\n    const { width, height } = shape.layoutBounds\n    const cached = this._linked\n    if (cached && cached.data === shape.data && cached.width === width && cached.height === height) return cached.path\n    const path = pathOps.anchorCommands(pathOps.anchors(shape.data), (p) => ({ x: p.x * width, y: -p.y * height }))\n    this._linked = { data: shape.data, width, height, path }\n    return path\n  }\n}\n"]}

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

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

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

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

package/dist/radial-grid/index.js

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

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

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

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

@@ -0,0 +1,51 @@
+import { type Command, type CommandArgs, type NodeConfig } from "@motionscript/sdk";
+import { LayoutGrid, type LayoutGridProps, type RadialArrangement, type RadialDirection } from "../kit/index.js";
+export interface RadialGridProps extends LayoutGridProps {
+    radius: number;
+    startAngle: number;
+    sweep: number;
+    direction: RadialDirection;
+    rotateItems: boolean;
+    spinSpeed: number;
+}
+/**
+ * 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.
+ */
+export declare class RadialGrid extends LayoutGrid<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;
+}
+//# sourceMappingURL=radial-grid.d.ts.map

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

@@ -0,0 +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,UAAU,EAIV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,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,UAAU,CAAC,eAAe,CAAC;IACJ,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"}

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

@@ -0,0 +1,95 @@
+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 { LayoutGrid, normalizeOrder, RADIAL_DIRECTIONS, radialTurnToTop, } 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.
+ */
+let RadialGrid = class RadialGrid extends LayoutGrid {
+    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: "flow",
+            acceptsChildren: true,
+            defaultWidthMode: "hug",
+            defaultHeightMode: "hug",
+        },
+    })
+], RadialGrid);
+export { RadialGrid };
+//# sourceMappingURL=radial-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radial-grid.js","sourceRoot":"","sources":["../../src/radial-grid/radial-grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAmD,MAAM,mBAAmB,CAAA;AAE5G,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,eAAe,GAIhB,MAAM,QAAQ,CAAA;AAWf;;;;;;GAMG;AAYI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAA2B;IAQzD,YAAY,KAA+C;QACzD,KAAK,CAAC,KAAK,CAAC,CAAA;IACd,CAAC;IAED,8EAA8E;IAE9E,IAAI,CAAC,IAA8D;QACjE,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,IAAI,GAAG,CAAA;QACzC,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IACnH,CAAC;IAED,sGAAsG;IAEtG,MAAM,CAAC,IAA2D;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAC/B,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,CAAA;QACxF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;QAC/E,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAChH,CAAC;IAGD,QAAQ,CAAC,IAA4D;QACnE,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IACtH,CAAC;IAED,mFAAmF;IAEnF,OAAO,CAAC,IAA2D;QACjE,OAAO,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IACnH,CAAC;IAEkB,cAAc;QAC/B,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAA;IACH,CAAC;CACF,CAAA;AAjDsD;IAApD,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;0CAAuB;AACb;IAArD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;8CAA2B;AACK;IAA5E,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;yCAAsB;AACJ;IAArF,QAAQ,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;6CAAmC;AAC1E;IAArC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;+CAA6B;AACF;IAAvD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAA0B;AAQzE;IADC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;sCAI1E;AAID;IADC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;wCAMjE;AAGD;IADC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;0CAG5D;AAID;IADC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;yCAGnF;AArCU,UAAU;IAXtB,IAAI,CAAC;QACJ,GAAG,EAAE,YAAY;QACjB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,QAAQ,EAAE,MAAM;YAChB,eAAe,EAAE,IAAI;YACrB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,KAAK;SACzB;KACF,CAAC;GACW,UAAU,CAkDtB","sourcesContent":["import { command, node, property, type Command, type CommandArgs, type NodeConfig } from \"@motionscript/sdk\"\n\nimport {\n  LayoutGrid,\n  normalizeOrder,\n  RADIAL_DIRECTIONS,\n  radialTurnToTop,\n  type LayoutGridProps,\n  type RadialArrangement,\n  type RadialDirection,\n} from \"../kit\"\n\nexport interface RadialGridProps extends LayoutGridProps {\n  radius: number\n  startAngle: number\n  sweep: number\n  direction: RadialDirection\n  rotateItems: boolean\n  spinSpeed: number\n}\n\n/**\n * Children round a circle, or along an arc of one.\n *\n * A full circle spaces the items evenly with none on top of another; an arc\n * puts one at each end. Angles run clockwise from twelve o'clock, so\n * {@link turnTo} can bring any item to the top like a dial.\n */\n@node({\n  key: \"radialGrid\",\n  parentKey: \"node\",\n  forkable: true,\n  layout: {\n    children: \"flow\",\n    acceptsChildren: true,\n    defaultWidthMode: \"hug\",\n    defaultHeightMode: \"hug\",\n  },\n})\nexport class RadialGrid extends LayoutGrid<RadialGridProps> {\n  @property({ default: 200, min: 0, step: 1 }) declare radius: number\n  @property({ default: 0, step: 1, unit: \"°\" }) declare startAngle: number\n  @property({ default: 360, min: -360, max: 360, step: 1, unit: \"°\" }) declare sweep: number\n  @property({ default: \"clockwise\", kind: \"enum\", options: RADIAL_DIRECTIONS }) declare direction: RadialDirection\n  @property({ default: false }) declare rotateItems: boolean\n  @property({ default: 0, step: 1, unit: \"°/s\" }) declare spinSpeed: number\n\n  constructor(props?: NodeConfig<RadialGrid, RadialGridProps>) {\n    super(props)\n  }\n\n  /** Orbit the items round the centre by `degrees` — `360` is one full turn. */\n  @command({ args: [{ key: \"degrees\", step: 15, unit: \"°\", default: 360 }] })\n  spin(args: CommandArgs<{ degrees?: number }> & { duration: number }): Command<RadialGridProps> {\n    const degrees = args.data?.degrees ?? 360\n    return this.to({ data: { startAngle: this.startAngle + degrees }, duration: args.duration, easing: args.easing })\n  }\n\n  /** Turn the ring the shorter way round until an item (by its place in the layers) sits at the top. */\n  @command({ args: [{ key: \"item\", min: 0, step: 1, default: 0 }] })\n  turnTo(args: CommandArgs<{ item?: number }> & { duration: number }): Command<RadialGridProps> {\n    const count = this._itemCount()\n    const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0))\n    const turn = slot < 0 ? 0 : radialTurnToTop(this.arrangementFor(), count, slot)\n    return this.to({ data: { startAngle: this.startAngle + turn }, duration: args.duration, easing: args.easing })\n  }\n\n  @command({ args: [{ key: \"radius\", min: 0, default: 280 }] })\n  radiusTo(args: CommandArgs<{ radius: number }> & { duration: number }): Command<RadialGridProps> {\n    return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing })\n  }\n\n  /** Open or close the arc like a fan — from `0` to `360` is a reveal of its own. */\n  @command({ args: [{ key: \"sweep\", min: -360, max: 360, unit: \"°\", default: 360 }] })\n  sweepTo(args: CommandArgs<{ sweep: number }> & { duration: number }): Command<RadialGridProps> {\n    return this.to({ data: { sweep: args.data?.sweep ?? this.sweep }, duration: args.duration, easing: args.easing })\n  }\n\n  protected override arrangementFor(): RadialArrangement {\n    return {\n      kind: \"radial\",\n      radius: this.radius,\n      startAngle: this.startAngle,\n      sweep: this.sweep,\n      direction: this.direction,\n      rotateItems: this.rotateItems,\n      spinSpeed: this.spinSpeed,\n    }\n  }\n}\n"]}

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

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

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

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

package/dist/rectangular-grid/index.js

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

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

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

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

@@ -0,0 +1,79 @@
+import { type Command, type CommandArgs, type NodeConfig, type Size2D } from "@motionscript/sdk";
+import { LayoutGrid, type CellMode, type FillDirection, type LayoutGridProps, type LineAlign, type RectangularArrangement, type StaggerArgs } from "../kit/index.js";
+export interface RectangularGridProps extends LayoutGridProps {
+    columns: number;
+    fillDirection: FillDirection;
+    cellMode: CellMode;
+    cellWidth: number;
+    cellHeight: number;
+    columnGap: number;
+    rowGap: number;
+    lastLineAlign: LineAlign;
+    rowOffset: number;
+    columnOffset: number;
+}
+/**
+ * Children in rows and columns — the grid the other three are variations on.
+ *
+ * Cells are as big as the largest child (`fit`), a size of their own
+ * (`fixed`), or an equal share of the node's box (`fill`), which is also the
+ * room a child set to fill grows into. Shift every other row by half a cell
+ * for a brick bond or a hex pack.
+ */
+export declare class RectangularGrid extends LayoutGrid<RectangularGridProps> {
+    columns: number;
+    fillDirection: FillDirection;
+    cellMode: CellMode;
+    cellWidth: number;
+    cellHeight: number;
+    columnGap: number;
+    rowGap: number;
+    lastLineAlign: LineAlign;
+    rowOffset: number;
+    columnOffset: number;
+    constructor(props?: NodeConfig<RectangularGrid, RectangularGridProps>);
+    /** Re-flow the items into `columns` columns, each moving to its new cell. */
+    columnsTo(args: CommandArgs<{
+        columns: number;
+    } & StaggerArgs> & {
+        duration: number;
+    }): Command<RectangularGridProps>;
+    /** Animate the spacing between columns and rows. */
+    gapTo(args: CommandArgs<{
+        columnGap?: number;
+        rowGap?: number;
+    }> & {
+        duration: number;
+    }): Command<RectangularGridProps>;
+    /**
+     * 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: CommandArgs<{
+        cellWidth?: number;
+        cellHeight?: number;
+    }> & {
+        duration: number;
+    }): Command<RectangularGridProps>;
+    /** Bring one row (from 0 at the top) forward and push the rest back. */
+    focusRow(args: CommandArgs<{
+        row?: number;
+        dim?: number;
+        grow?: number;
+    }> & {
+        duration: number;
+    }): Command<LayoutGridProps>;
+    /** Bring one column (from 0 at the left) forward and push the rest back. */
+    focusColumn(args: CommandArgs<{
+        column?: number;
+        dim?: number;
+        grow?: number;
+    }> & {
+        duration: number;
+    }): Command<LayoutGridProps>;
+    protected arrangementFor(): RectangularArrangement;
+    /** A child set to fill takes its cell, where the cell is not simply the largest child. */
+    protected itemSpace(count: number, space: Size2D): Size2D;
+}
+//# sourceMappingURL=rectangular-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rectangular-grid.d.ts","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAKL,UAAU,EAIV,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,aAAa,CAAA;IAC5B,QAAQ,EAAE,QAAQ,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;GAOG;AACH,qBAWa,eAAgB,SAAQ,UAAU,CAAC,oBAAoB,CAAC;IAChB,OAAO,EAAE,MAAM,CAAA;IACY,aAAa,EAAE,aAAa,CAAA;IACjC,QAAQ,EAAE,QAAQ,CAAA;IACtC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACkB,aAAa,EAAE,SAAS,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;gBAEvE,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,EAAE,oBAAoB,CAAC;IAIrE,6EAA6E;IAE7E,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAKrH,oDAAoD;IAEpD,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAOvH;;;;OAIG;IAEH,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAYhI,wEAAwE;IAQxE,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;IAM3H,4EAA4E;IAQ5E,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,eAAe,CAAC;cAM9G,cAAc,IAAI,sBAAsB;IAgB3D,0FAA0F;cACvE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;CAInE"}