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

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

@@ -1 +1 @@
-{"version":3,"file":"rectangular-grid.js","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  command,\r\n  easeInOut,\r\n  node,\r\n  property,\r\n  type Command,\r\n  type CommandArgs,\r\n  type NodeConfig,\r\n  type Size2D,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport {\r\n  CELL_MODES,\r\n  contentBoxOf,\r\n  FILL_DIRECTIONS,\r\n  LINE_ALIGNS,\r\n  ItemGrid,\r\n  rectangularCell,\r\n  staggerArgs,\r\n  TRANSITION_STAGGER,\r\n  type CellMode,\r\n  type FillDirection,\r\n  type ItemGridProps,\r\n  type LineAlign,\r\n  type RectangularArrangement,\r\n  type StaggerArgs,\r\n} from \"../kit\"\r\n\r\nexport interface RectangularGridProps extends ItemGridProps {\r\n  columns: number\r\n  fillDirection: FillDirection\r\n  cellMode: CellMode\r\n  cellWidth: number\r\n  cellHeight: number\r\n  columnGap: number\r\n  rowGap: number\r\n  lastLineAlign: LineAlign\r\n  rowOffset: number\r\n  columnOffset: number\r\n}\r\n\r\n/**\r\n * Children in rows and columns — the grid the other three are variations on.\r\n *\r\n * Cells are as big as the largest child (`fit`), a size of their own\r\n * (`fixed`), or an equal share of the node's box (`fill`), which is also the\r\n * room a child set to fill grows into. Shift every other row by half a cell\r\n * for a brick bond or a hex pack.\r\n */\r\n@node({\r\n  key: \"rectangularGrid\",\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 RectangularGrid extends ItemGrid<RectangularGridProps> {\r\n  @property({ default: 3, min: 1, step: 1 }) declare columns: number\r\n  @property({ default: \"row\", kind: \"enum\", options: FILL_DIRECTIONS }) declare fillDirection: FillDirection\r\n  @property({ default: \"fit\", kind: \"enum\", options: CELL_MODES }) declare cellMode: CellMode\r\n  @property({ default: 120, min: 0, step: 1 }) declare cellWidth: number\r\n  @property({ default: 120, min: 0, step: 1 }) declare cellHeight: number\r\n  @property({ default: 24, step: 1 }) declare columnGap: number\r\n  @property({ default: 24, step: 1 }) declare rowGap: number\r\n  @property({ default: \"start\", kind: \"enum\", options: LINE_ALIGNS }) declare lastLineAlign: LineAlign\r\n  @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare rowOffset: number\r\n  @property({ default: 0, min: -1, max: 1, step: 0.05 }) declare columnOffset: number\r\n\r\n  constructor(props?: NodeConfig<RectangularGrid, RectangularGridProps>) {\r\n    super(props)\r\n  }\r\n\r\n  /** Re-flow the items into `columns` columns, each moving to its new cell. */\r\n  @command({ args: [{ key: \"columns\", min: 1, step: 1, default: 4 }, ...staggerArgs(TRANSITION_STAGGER)] })\r\n  columnsTo(args: CommandArgs<{ columns: number } & StaggerArgs> & { duration: number }): Command<RectangularGridProps> {\r\n    const columns = Math.max(1, Math.round(args.data?.columns ?? this.columns))\r\n    return this._transitionTo({ columns }, args)\r\n  }\r\n\r\n  /** Animate the spacing between columns and rows. */\r\n  @command({ args: [{ key: \"columnGap\", default: 48 }, { key: \"rowGap\", default: 48 }] })\r\n  gapTo(args: CommandArgs<{ columnGap?: number; rowGap?: number }> & { duration: number }): Command<RectangularGridProps> {\r\n    const data: Partial<RectangularGridProps> = {}\r\n    if (args.data?.columnGap !== undefined) data.columnGap = args.data.columnGap\r\n    if (args.data?.rowGap !== undefined) data.rowGap = args.data.rowGap\r\n    return this.to({ data, duration: args.duration, easing: args.easing })\r\n  }\r\n\r\n  /**\r\n   * Animate the cell size, from whatever the cells measure now. The grid\r\n   * switches to `fixed` cells as it starts, since a size of its own is what\r\n   * `fixed` means.\r\n   */\r\n  @command({ args: [{ key: \"cellWidth\", min: 0, default: 160 }, { key: \"cellHeight\", min: 0, default: 160 }] })\r\n  cellSizeTo(args: CommandArgs<{ cellWidth?: number; cellHeight?: number }> & { duration: number }): Command<RectangularGridProps> {\r\n    const sizes = this._itemSizes()\r\n    const from = rectangularCell(this.arrangementFor(), sizes.length, sizes, contentBoxOf(this))\r\n    const width = args.data?.cellWidth ?? from.width\r\n    const height = args.data?.cellHeight ?? from.height\r\n    return this.command<RectangularGridProps>((t) => ({\r\n      cellMode: \"fixed\",\r\n      cellWidth: from.width + (width - from.width) * t,\r\n      cellHeight: from.height + (height - from.height) * t,\r\n    }), args.duration, args.easing ?? easeInOut(\"cubic\"))\r\n  }\r\n\r\n  /** Bring one row (from 0 at the top) forward and push the rest back. */\r\n  @command({\r\n    args: [\r\n      { key: \"row\", min: 0, step: 1, default: 0 },\r\n      { key: \"dim\", min: 0, max: 1, step: 0.05, default: 0.7 },\r\n      { key: \"grow\", min: 0, max: 1, step: 0.05, default: 0.1 },\r\n    ],\r\n  })\r\n  focusRow(args: CommandArgs<{ row?: number; dim?: number; grow?: number }> & { duration: number }): Command<ItemGridProps> {\r\n    const slots = this._itemSlots()\r\n    const row = Math.round(args.data?.row ?? 0)\r\n    return this._focusOn((i) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.row === row, slots.length, args)\r\n  }\r\n\r\n  /** Bring one column (from 0 at the left) forward and push the rest back. */\r\n  @command({\r\n    args: [\r\n      { key: \"column\", min: 0, step: 1, default: 0 },\r\n      { key: \"dim\", min: 0, max: 1, step: 0.05, default: 0.7 },\r\n      { key: \"grow\", min: 0, max: 1, step: 0.05, default: 0.1 },\r\n    ],\r\n  })\r\n  focusColumn(args: CommandArgs<{ column?: number; dim?: number; grow?: number }> & { duration: number }): Command<ItemGridProps> {\r\n    const slots = this._itemSlots()\r\n    const column = Math.round(args.data?.column ?? 0)\r\n    return this._focusOn((i) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.column === column, slots.length, args)\r\n  }\r\n\r\n  protected override arrangementFor(): RectangularArrangement {\r\n    return {\r\n      kind: \"rectangular\",\r\n      columns: this.columns,\r\n      fillDirection: this.fillDirection,\r\n      cellMode: this.cellMode,\r\n      cellWidth: this.cellWidth,\r\n      cellHeight: this.cellHeight,\r\n      columnGap: this.columnGap,\r\n      rowGap: this.rowGap,\r\n      lastLineAlign: this.lastLineAlign,\r\n      rowOffset: this.rowOffset,\r\n      columnOffset: this.columnOffset,\r\n    }\r\n  }\r\n\r\n  /** A child set to fill takes its cell, where the cell is not simply the largest child. */\r\n  protected override itemSpace(count: number, space: Size2D): Size2D {\r\n    if (this.cellMode === \"fit\") return space\r\n    return rectangularCell(this.arrangementFor(), count, [], space)\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"rectangular-grid.js","sourceRoot":"","sources":["../../src/rectangular-grid/rectangular-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,KAAK,GAMN,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EACL,UAAU,EACV,eAAe,EACf,QAAQ,EACR,WAAW,EACX,eAAe,EACf,WAAW,EACX,kBAAkB,GAEnB,MAAM,QAAQ,CAAA;AAEf,MAAM,GAAG,GAAG;IACV,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IAClD,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IACrC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAC7D,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC3D,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;CAC/D,CAAA;AAID,SAAS,WAAW,CAAC,CAAM;IACzB,OAAO;QACL,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,CAAC,CAAC,OAAO;QAClB,aAAa,EAAE,CAAC,CAAC,aAAa;QAC9B,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACpB,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,UAAU,EAAE,CAAC,CAAC,UAAU;QACxB,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,aAAa,EAAE,CAAC,CAAC,aAAa;QAC9B,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,YAAY,EAAE,CAAC,CAAC,YAAY;KAC7B,CAAA;AACH,CAAC;AAED,MAAM,QAAQ,GAA2B;IACvC,WAAW;IACX,sFAAsF;IACtF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;CACnH,CAAA;AAED,4FAA4F;AAC5F,MAAM,SAAS,GAAG;IAChB,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACtD,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;CAC3D,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC;IACzD,GAAG,EAAE,iBAAiB;IACtB,KAAK,EAAE,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,EAAE;IACpC,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAC3B,QAAQ,EAAE;QACR,GAAG,QAAQ,CAAC,QAAQ;QACpB,6EAA6E;QAC7E,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,kBAAkB,CAAC,EAAE;YAC9F,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;gBAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;gBAC3E,OAAO,QAAQ,CAAC,YAAY,CAAC,QAAiB,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,CAAA;YAC3E,CAAC;SACF;QACD,oDAAoD;QACpD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE;YACrE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE;gBAChB,MAAM,IAAI,GAA4C,EAAE,CAAA;gBACxD,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS;oBAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAA;gBACnF,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,KAAK,SAAS;oBAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAA;gBAC1E,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC7B,CAAC;SACF;QACD;;;;WAIG;QACH,UAAU,EAAE;YACV,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;YACnG,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC;YAC1B,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBACjD,MAAM,GAAG,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;gBAC9D,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAA;gBACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAA;gBACnD,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAA;gBACtD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC9B,QAAQ,EAAE,OAAO;oBACjB,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;oBAChD,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;iBACrD,CAAC,CAAC,CAAA;YACL,CAAC;SACF;QACD,wEAAwE;QACxE,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE;YACjE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,QAAiB,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAA;gBAChE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;gBAC9C,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,CAAA;gBAC/F,OAAO,QAAQ,CAAC,OAAO,CAAC,QAAiB,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;YAC1H,CAAC;SACF;QACD,4EAA4E;QAC5E,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE;YACpE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,QAAiB,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAA;gBAChE,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAA;gBACpD,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAA;gBACxG,OAAO,QAAQ,CAAC,OAAO,CAAC,QAAiB,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;YAC7H,CAAC;SACF;KACF;IACD,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;CAC7B,CAAC,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import {\r\n  component2d,\r\n  easeInOut,\r\n  Types,\r\n  type NodeOf,\r\n  type Values,\r\n  // Named so the emitted declaration reaches these through the sdk, not core.\r\n  type Node2D as _Node2D,\r\n  type Node2DProps as _Node2DProps,\r\n} from \"@motionscript/sdk\"\r\n\r\nimport {\r\n  CELL_MODES,\r\n  FILL_DIRECTIONS,\r\n  ItemGrid,\r\n  LINE_ALIGNS,\r\n  rectangularCell,\r\n  staggerArgs,\r\n  TRANSITION_STAGGER,\r\n  type RectangularArrangement,\r\n} from \"../kit\"\r\n\r\nconst own = {\r\n  columns: Types.number(3, { min: 1, step: 1 }),\r\n  fillDirection: Types.oneOf(FILL_DIRECTIONS, { default: \"row\" }),\r\n  cellMode: Types.oneOf(CELL_MODES, { default: \"fit\" }),\r\n  cellWidth: Types.number(120, { min: 0, step: 1 }),\r\n  cellHeight: Types.number(120, { min: 0, step: 1 }),\r\n  columnGap: Types.number(24, { step: 1 }),\r\n  rowGap: Types.number(24, { step: 1 }),\r\n  lastLineAlign: Types.oneOf(LINE_ALIGNS, { default: \"start\" }),\r\n  rowOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),\r\n  columnOffset: Types.number(0, { min: -1, max: 1, step: 0.05 }),\r\n}\r\n\r\ntype Own = Values<typeof own>\r\n\r\nfunction arrangement(s: Own): RectangularArrangement {\r\n  return {\r\n    kind: \"rectangular\",\r\n    columns: s.columns,\r\n    fillDirection: s.fillDirection,\r\n    cellMode: s.cellMode,\r\n    cellWidth: s.cellWidth,\r\n    cellHeight: s.cellHeight,\r\n    columnGap: s.columnGap,\r\n    rowGap: s.rowGap,\r\n    lastLineAlign: s.lastLineAlign,\r\n    rowOffset: s.rowOffset,\r\n    columnOffset: s.columnOffset,\r\n  }\r\n}\r\n\r\nconst arranger: ItemGrid.Arranger<Own> = {\r\n  arrangement,\r\n  // A child set to fill takes its cell, where the cell is not simply the largest child.\r\n  itemSpace: (s, count, space) => (s.cellMode === \"fit\" ? space : rectangularCell(arrangement(s), count, [], space)),\r\n}\r\n\r\n/** The focus args of a row or a column: the grow a row leaves out is the shared focus's. */\r\nconst lineFocus = {\r\n  dim: Types.number(0.7, { min: 0, max: 1, step: 0.05 }),\r\n  grow: ItemGrid.hinted(0.1, { min: 0, max: 1, step: 0.05 }),\r\n}\r\n\r\n/**\r\n * Children in rows and columns — the grid the other three are variations on.\r\n *\r\n * Cells are as big as the largest child (`fit`), a size of their own\r\n * (`fixed`), or an equal share of the node's box (`fill`), which is also the\r\n * room a child set to fill grows into. Shift every other row by half a cell\r\n * for a brick bond or a hex pack.\r\n */\r\nexport const RectangularGrid = ItemGrid.define(component2d({\r\n  key: \"rectangularGrid\",\r\n  state: { ...ItemGrid.state, ...own },\r\n  defaults: ItemGrid.defaults,\r\n  commands: {\r\n    ...ItemGrid.commands,\r\n    /** Re-flow the items into `columns` columns, each moving to its new cell. */\r\n    columnsTo: {\r\n      args: { columns: ItemGrid.hinted(4, { min: 1, step: 1 }), ...staggerArgs(TRANSITION_STAGGER) },\r\n      run: (timeline, s, children) => {\r\n        const columns = Math.max(1, Math.round(timeline.args.columns ?? s.columns))\r\n        return ItemGrid.transitionTo(timeline as never, s, children, { columns })\r\n      },\r\n    },\r\n    /** Animate the spacing between columns and rows. */\r\n    gapTo: {\r\n      args: { columnGap: ItemGrid.hinted(48), rowGap: ItemGrid.hinted(48) },\r\n      run: (timeline) => {\r\n        const data: { columnGap?: number; rowGap?: number } = {}\r\n        if (timeline.args.columnGap !== undefined) data.columnGap = timeline.args.columnGap\r\n        if (timeline.args.rowGap !== undefined) data.rowGap = timeline.args.rowGap\r\n        return timeline.tween(data)\r\n      },\r\n    },\r\n    /**\r\n     * Animate the cell size, from whatever the cells measure now. The grid\r\n     * switches to `fixed` cells as it starts, since a size of its own is what\r\n     * `fixed` means.\r\n     */\r\n    cellSizeTo: {\r\n      args: { cellWidth: ItemGrid.hinted(160, { min: 0 }), cellHeight: ItemGrid.hinted(160, { min: 0 }) },\r\n      easing: easeInOut(\"cubic\"),\r\n      run: (timeline, s, children) => {\r\n        const sizes = children.map((child) => child.size)\r\n        const box = ItemGrid.contentBox(timeline.node.size, s.padding)\r\n        const from = rectangularCell(arrangement(s), sizes.length, sizes, box)\r\n        const width = timeline.args.cellWidth ?? from.width\r\n        const height = timeline.args.cellHeight ?? from.height\r\n        return timeline.animate((t) => ({\r\n          cellMode: \"fixed\",\r\n          cellWidth: from.width + (width - from.width) * t,\r\n          cellHeight: from.height + (height - from.height) * t,\r\n        }))\r\n      },\r\n    },\r\n    /** Bring one row (from 0 at the top) forward and push the rest back. */\r\n    focusRow: {\r\n      args: { row: Types.number(0, { min: 0, step: 1 }), ...lineFocus },\r\n      run: (timeline, s, children) => {\r\n        const slots = ItemGrid.itemSlots(timeline as never, s, children)\r\n        const row = Math.round(timeline.args.row ?? 0)\r\n        const inRow = (i: number) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.row === row\r\n        return ItemGrid.focusOn(timeline as never, s, inRow, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)\r\n      },\r\n    },\r\n    /** Bring one column (from 0 at the left) forward and push the rest back. */\r\n    focusColumn: {\r\n      args: { column: Types.number(0, { min: 0, step: 1 }), ...lineFocus },\r\n      run: (timeline, s, children) => {\r\n        const slots = ItemGrid.itemSlots(timeline as never, s, children)\r\n        const column = Math.round(timeline.args.column ?? 0)\r\n        const inColumn = (i: number) => slots[i]?.meta.kind === \"rectangular\" && slots[i].meta.column === column\r\n        return ItemGrid.focusOn(timeline as never, s, inColumn, slots.length, timeline.args.dim ?? 0.7, timeline.args.grow ?? 0.15)\r\n      },\r\n    },\r\n  },\r\n  ...ItemGrid.fields(arranger),\r\n}), arranger)\r\n\r\nexport type RectangularGrid = NodeOf<typeof RectangularGrid>\r\n/** What a call or a document row may set. */\r\nexport type RectangularGridProps = NonNullable<Parameters<typeof RectangularGrid>[0]>\r\n"]}

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

@@ -1,68 +1,200 @@
-import { type Command, type CommandArgs, type NodeConfig } from "@motionscript/sdk";
-import { ItemGrid, type ItemGridProps, type SphereArrangement, type SphereAxis, type SphereFacing } from "../kit/index.js";
-export interface SphereGridProps extends ItemGridProps {
-    radius: number;
-    yaw: number;
-    pitch: number;
-    roll: number;
-    facing: SphereFacing;
-    focalLength: number;
-    depthFade: number;
-    cullBackfaces: boolean;
-    spinSpeed: number;
-}
+import { type NodeOf, type Node2D as _Node2D, type Node2DProps as _Node2DProps } from "@motionscript/sdk";
+import { ItemGrid } from "../kit/index.js";
 /**
  * Children spread over a sphere — a Fibonacci lattice, as even as any number
  * of points gets — and seen through a camera of the grid's own, so the far
  * side is smaller, drawn first, and hidden where a face turns away.
  *
  * `outward` lays each item flat on the surface; `billboard` keeps each one
- * facing the viewer, like labels on a globe. {@link turnTo} brings any item
- * round to the front.
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
+ * to the front.
  */
-export declare class SphereGrid extends ItemGrid<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;
-}
+export declare const SphereGrid: import("@motionscript/sdk").Component<"sphereGrid", import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, {
+    readonly spin: {
+        readonly axis: import("@motionscript/sdk").Type<"x" | "y" | "z", "x" | "y" | "z", false>;
+        readonly degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly orientTo: {
+        readonly yaw: import("@motionscript/sdk").Type<45 | undefined, 45 | undefined, false>;
+        readonly pitch: import("@motionscript/sdk").Type<20 | undefined, 20 | undefined, false>;
+        readonly roll: import("@motionscript/sdk").Type<0 | undefined, 0 | undefined, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<300 | undefined, 300 | undefined, false>;
+    };
+    readonly focalLengthTo: {
+        readonly focalLength: import("@motionscript/sdk").Type<600 | undefined, 600 | undefined, false>;
+    };
+    readonly reveal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly conceal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly wave: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"scale" | "fade" | "spin" | "lift", "scale" | "fade" | "spin" | "lift", false>;
+        readonly amount: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focus: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly unfocus: unknown;
+    readonly spreadTo: {
+        readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly shuffle: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly seed: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly swap: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly first: import("@motionscript/sdk").Type<number, number, false>;
+        readonly second: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reorder: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly order: import("@motionscript/sdk").Type<string, string, false>;
+    };
+    readonly morphInto: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly target: import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+    };
+}, null, _Node2D<_Node2DProps>, import("@motionscript/sdk").CallProps<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, null, import("@motionscript/sdk").BuiltNode<import("@motionscript/sdk").Merge<import("@motionscript/sdk").Box2DState, {
+    readonly radius: import("@motionscript/sdk").Type<number, number, false>;
+    readonly yaw: import("@motionscript/sdk").Type<number, number, false>;
+    readonly pitch: import("@motionscript/sdk").Type<number, number, false>;
+    readonly roll: import("@motionscript/sdk").Type<number, number, false>;
+    readonly facing: import("@motionscript/sdk").Type<"outward" | "billboard", "outward" | "billboard", false>;
+    readonly focalLength: import("@motionscript/sdk").Type<number, number, false>;
+    readonly depthFade: import("@motionscript/sdk").Type<number, number, false>;
+    readonly cullBackfaces: boolean;
+    readonly spinSpeed: import("@motionscript/sdk").Type<number, number, false>;
+    readonly order: import("@motionscript/sdk").Type<number[], number[], false>;
+    readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    readonly arrangeLike: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    readonly revealState: import("@motionscript/sdk").Type<import("../index.js").RevealState | null | undefined, import("../index.js").RevealState | null | undefined, false>;
+    readonly waveState: import("@motionscript/sdk").Type<import("../index.js").WaveState | null | undefined, import("../index.js").WaveState | null | undefined, false>;
+    readonly focusState: import("@motionscript/sdk").Type<import("../index.js").FocusState | null | undefined, import("../index.js").FocusState | null | undefined, false>;
+    readonly transition: import("@motionscript/sdk").Type<ItemGrid.GridTransition | null | undefined, ItemGrid.GridTransition | null | undefined, false>;
+    readonly transitionSource: import("@motionscript/sdk").Type<string, import("@motionscript/sdk").NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+}>, {
+    readonly spin: {
+        readonly axis: import("@motionscript/sdk").Type<"x" | "y" | "z", "x" | "y" | "z", false>;
+        readonly degrees: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly orientTo: {
+        readonly yaw: import("@motionscript/sdk").Type<45 | undefined, 45 | undefined, false>;
+        readonly pitch: import("@motionscript/sdk").Type<20 | undefined, 20 | undefined, false>;
+        readonly roll: import("@motionscript/sdk").Type<0 | undefined, 0 | undefined, false>;
+    };
+    readonly turnTo: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly radiusTo: {
+        readonly radius: import("@motionscript/sdk").Type<300 | undefined, 300 | undefined, false>;
+    };
+    readonly focalLengthTo: {
+        readonly focalLength: import("@motionscript/sdk").Type<600 | undefined, 600 | undefined, false>;
+    };
+    readonly reveal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly conceal: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+    };
+    readonly wave: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly style: import("@motionscript/sdk").Type<"scale" | "fade" | "spin" | "lift", "scale" | "fade" | "spin" | "lift", false>;
+        readonly amount: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly focus: {
+        readonly item: import("@motionscript/sdk").Type<number, number, false>;
+        readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+        readonly grow: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly unfocus: unknown;
+    readonly spreadTo: {
+        readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly shuffle: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly seed: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly swap: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly first: import("@motionscript/sdk").Type<number, number, false>;
+        readonly second: import("@motionscript/sdk").Type<number, number, false>;
+    };
+    readonly reorder: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly order: import("@motionscript/sdk").Type<string, string, false>;
+    };
+    readonly morphInto: {
+        readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+        readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+        readonly target: import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+    };
+}, _Node2D<_Node2DProps>>>>;
+export type SphereGrid = NodeOf<typeof SphereGrid>;
+/** What a call or a document row may set. */
+export type SphereGridProps = NonNullable<Parameters<typeof SphereGrid>[0]>;
 //# sourceMappingURL=sphere-grid.d.ts.map

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

@@ -1 +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,mBAAmB,CAAA;AAE5G,OAAO,EACL,QAAQ,EAMR,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,QAAQ,CAAA;AAEf,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,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,QAAQ,CAAC,eAAe,CAAC;IACF,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"}
+{"version":3,"file":"sphere-grid.d.ts","sourceRoot":"","sources":["../../src/sphere-grid/sphere-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,MAAM,EAGX,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EACL,QAAQ,EAQT,MAAM,QAAQ,CAAA;AAmCf;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6DV,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,UAAU,CAAC,CAAA;AAClD,6CAA6C;AAC7C,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA"}

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

@@ -1,11 +1,31 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { command, node, property } from "@motionscript/sdk";
+import { component2d, Types, } from "@motionscript/sdk";
 import { ItemGrid, normalizeOrder, SPHERE_AXES, SPHERE_FACINGS, sphereFaceForward, wrapDegrees, } from "../kit/index.js";
+const own = {
+    radius: Types.number(220, { min: 0, step: 1 }),
+    yaw: Types.number(0, { step: 1, unit: "°" }),
+    pitch: Types.number(0, { step: 1, unit: "°" }),
+    roll: Types.number(0, { step: 1, unit: "°" }),
+    facing: Types.oneOf(SPHERE_FACINGS, { default: "outward" }),
+    focalLength: Types.number(900, { min: 100, step: 10 }),
+    depthFade: Types.number(0.5, { min: 0, max: 1, step: 0.05 }),
+    cullBackfaces: false,
+    spinSpeed: Types.number(0, { step: 1, unit: "°/s" }),
+};
+function arrangement(s) {
+    return {
+        kind: "sphere",
+        radius: s.radius,
+        yaw: s.yaw,
+        pitch: s.pitch,
+        roll: s.roll,
+        facing: s.facing,
+        focalLength: s.focalLength,
+        depthFade: s.depthFade,
+        cullBackfaces: s.cullBackfaces,
+        spinSpeed: s.spinSpeed,
+    };
+}
+const arranger = { arrangement };
 const AXIS_PROP = { x: "pitch", y: "yaw", z: "roll" };
 /**
  * Children spread over a sphere — a Fibonacci lattice, as even as any number
@@ -13,137 +33,70 @@ const AXIS_PROP = { x: "pitch", y: "yaw", z: "roll" };
  * side is smaller, drawn first, and hidden where a face turns away.
  *
  * `outward` lays each item flat on the surface; `billboard` keeps each one
- * facing the viewer, like labels on a globe. {@link turnTo} brings any item
- * round to the front.
+ * facing the viewer, like labels on a globe. `turnTo` brings any item round
+ * to the front.
  */
-let SphereGrid = class SphereGrid extends ItemGrid {
-    constructor(props) {
-        super(props);
-    }
-    /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
-    spin(args) {
-        const key = AXIS_PROP[args.data?.axis ?? "y"] ?? "yaw";
-        const degrees = args.data?.degrees ?? 360;
-        return this.to({ data: { [key]: this[key] + degrees }, duration: args.duration, easing: args.easing });
-    }
-    /** Turn the sphere to a set orientation. */
-    orientTo(args) {
-        return this.to({
-            data: { yaw: args.data?.yaw ?? this.yaw, pitch: args.data?.pitch ?? this.pitch, roll: args.data?.roll ?? this.roll },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    /** Turn the sphere the shorter way until an item (by its place in the layers) faces the viewer. */
-    turnTo(args) {
-        const count = this._itemCount();
-        const slot = normalizeOrder(this.order, count).indexOf(Math.round(args.data?.item ?? 0));
-        if (slot < 0)
-            return this.to({ data: {}, duration: args.duration });
-        const facing = sphereFaceForward(count, slot);
-        // The yaw the clock has added is part of where the item is now.
-        const spun = this.spinSpeed * this.time.total;
-        return this.to({
-            data: {
-                yaw: this.yaw + wrapDegrees(facing.yaw - (this.yaw + spun)),
-                pitch: this.pitch + wrapDegrees(facing.pitch - this.pitch),
-                roll: 0,
+export const SphereGrid = ItemGrid.define(component2d({
+    key: "sphereGrid",
+    state: { ...ItemGrid.state, ...own },
+    defaults: ItemGrid.defaults,
+    commands: {
+        ...ItemGrid.commands,
+        /** Turn the sphere about an axis by `degrees` — `y` spins it like a globe. */
+        spin: {
+            args: {
+                axis: Types.oneOf(SPHERE_AXES, { default: "y" }),
+                degrees: Types.number(360, { step: 15, unit: "°" }),
             },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    radiusTo(args) {
-        return this.to({ data: { radius: args.data?.radius ?? this.radius }, duration: args.duration, easing: args.easing });
-    }
-    /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
-    focalLengthTo(args) {
-        return this.to({
-            data: { focalLength: args.data?.focalLength ?? this.focalLength },
-            duration: args.duration,
-            easing: args.easing,
-        });
-    }
-    arrangementFor() {
-        return {
-            kind: "sphere",
-            radius: this.radius,
-            yaw: this.yaw,
-            pitch: this.pitch,
-            roll: this.roll,
-            facing: this.facing,
-            focalLength: this.focalLength,
-            depthFade: this.depthFade,
-            cullBackfaces: this.cullBackfaces,
-            spinSpeed: this.spinSpeed,
-        };
-    }
-};
-__decorate([
-    property({ default: 220, min: 0, step: 1 })
-], SphereGrid.prototype, "radius", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "yaw", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "pitch", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°" })
-], SphereGrid.prototype, "roll", void 0);
-__decorate([
-    property({ default: "outward", kind: "enum", options: SPHERE_FACINGS })
-], SphereGrid.prototype, "facing", void 0);
-__decorate([
-    property({ default: 900, min: 100, step: 10 })
-], SphereGrid.prototype, "focalLength", void 0);
-__decorate([
-    property({ default: 0.5, min: 0, max: 1, step: 0.05 })
-], SphereGrid.prototype, "depthFade", void 0);
-__decorate([
-    property({ default: false })
-], SphereGrid.prototype, "cullBackfaces", void 0);
-__decorate([
-    property({ default: 0, step: 1, unit: "°/s" })
-], SphereGrid.prototype, "spinSpeed", void 0);
-__decorate([
-    command({
-        args: [
-            { key: "axis", kind: "enum", options: SPHERE_AXES, default: "y" },
-            { key: "degrees", step: 15, unit: "°", default: 360 },
-        ],
-    })
-], SphereGrid.prototype, "spin", null);
-__decorate([
-    command({
-        args: [
-            { key: "yaw", unit: "°", default: 45 },
-            { key: "pitch", unit: "°", default: 20 },
-            { key: "roll", unit: "°", default: 0 },
-        ],
-    })
-], SphereGrid.prototype, "orientTo", null);
-__decorate([
-    command({ args: [{ key: "item", min: 0, step: 1, default: 0 }] })
-], SphereGrid.prototype, "turnTo", null);
-__decorate([
-    command({ args: [{ key: "radius", min: 0, default: 300 }] })
-], SphereGrid.prototype, "radiusTo", null);
-__decorate([
-    command({ args: [{ key: "focalLength", min: 100, default: 600 }] })
-], SphereGrid.prototype, "focalLengthTo", null);
-SphereGrid = __decorate([
-    node({
-        key: "sphereGrid",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            children: "freeform",
-            acceptsChildren: true,
-            defaultWidthMode: "hug",
-            defaultHeightMode: "hug",
+            run: (timeline, s) => {
+                const key = AXIS_PROP[timeline.args.axis ?? "y"] ?? "yaw";
+                return timeline.tween({ [key]: s[key] + (timeline.args.degrees ?? 360) });
+            },
+        },
+        /** Turn the sphere to a set orientation. */
+        orientTo: {
+            args: {
+                yaw: ItemGrid.hinted(45, { unit: "°" }),
+                pitch: ItemGrid.hinted(20, { unit: "°" }),
+                roll: ItemGrid.hinted(0, { unit: "°" }),
+            },
+            run: (timeline, s) => timeline.tween({
+                yaw: timeline.args.yaw ?? s.yaw,
+                pitch: timeline.args.pitch ?? s.pitch,
+                roll: timeline.args.roll ?? s.roll,
+            }),
+        },
+        /**
+         * Turn the sphere the shorter way until an item (by its place in the layers)
+         * faces the viewer. It turns from the orientation the sphere is given: the
+         * yaw its `spinSpeed` adds by the time the command runs is not counted, as
+         * commands are built against the tree standing at time 0.
+         */
+        turnTo: {
+            args: { item: Types.number(0, { min: 0, step: 1 }) },
+            run: (timeline, s, children) => {
+                const count = children.length;
+                const slot = normalizeOrder(s.order, count).indexOf(Math.round(timeline.args.item ?? 0));
+                if (slot < 0)
+                    return timeline.tween({});
+                const facing = sphereFaceForward(count, slot);
+                return timeline.tween({
+                    yaw: s.yaw + wrapDegrees(facing.yaw - s.yaw),
+                    pitch: s.pitch + wrapDegrees(facing.pitch - s.pitch),
+                    roll: 0,
+                });
+            },
+        },
+        radiusTo: {
+            args: { radius: ItemGrid.hinted(300, { min: 0 }) },
+            run: (timeline, s) => timeline.tween({ radius: timeline.args.radius ?? s.radius }),
+        },
+        /** Dolly the camera: a shorter focal length exaggerates the depth, a longer one flattens it. */
+        focalLengthTo: {
+            args: { focalLength: ItemGrid.hinted(600, { min: 100 }) },
+            run: (timeline, s) => timeline.tween({ focalLength: timeline.args.focalLength ?? s.focalLength }),
         },
-    })
-], SphereGrid);
-export { SphereGrid };
+    },
+    ...ItemGrid.fields(arranger),
+}), arranger);
 //# sourceMappingURL=sphere-grid.js.map