@pixerate/editor 0.144.0 → 0.145.0

package/dist/animation/index.cjs

@@ -26,7 +26,7 @@ var _chunk7B5GTJXBcjs = require('../chunk-7B5GTJXB.cjs');
 
 
 
-var _chunkSVR5FR7Bcjs = require('../chunk-SVR5FR7B.cjs');
+var _chunkUUTTJK77cjs = require('../chunk-UUTTJK77.cjs');
 
 
 
@@ -98,4 +98,4 @@ require('../chunk-A6QWKBJP.cjs');
 
 
 
-exports.ANIMATION_EASING_LABELS = _chunkDWJJI6RTcjs.ANIMATION_EASING_LABELS; exports.ANIMATION_EASING_PRESETS = _chunkDWJJI6RTcjs.ANIMATION_EASING_PRESETS; exports.ANIMATION_TIME_EPSILON = _chunkSVR5FR7Bcjs.ANIMATION_TIME_EPSILON; exports.AnimationPlayer = _chunkSVR5FR7Bcjs.AnimationPlayer; exports.CUBIC_BEZIER_PRESETS = _chunkDWJJI6RTcjs.CUBIC_BEZIER_PRESETS; exports.MOTION_BEHAVIORS = _chunk7B5GTJXBcjs.MOTION_BEHAVIORS; exports.ManualClock = _chunkSVR5FR7Bcjs.ManualClock; exports.PRESENCE_COLORS = _chunkUJGAA6AKcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkUJGAA6AKcjs.PerformanceQueue; exports.PresenceStore = _chunkUJGAA6AKcjs.PresenceStore; exports.SPRING_PRESETS = _chunkDWJJI6RTcjs.SPRING_PRESETS; exports.behaviorProgress = _chunk7B5GTJXBcjs.behaviorProgress; exports.createAnimationPlayer = _chunkSVR5FR7Bcjs.createAnimationPlayer; exports.createInstantPresenceClock = _chunkUJGAA6AKcjs.createInstantPresenceClock; exports.cubicBezierAt = _chunkDWJJI6RTcjs.cubicBezierAt; exports.easingFromInfluence = _chunkDWJJI6RTcjs.easingFromInfluence; exports.easingLabel = _chunkDWJJI6RTcjs.easingLabel; exports.easingToCss = _chunkDWJJI6RTcjs.easingToCss; exports.elasticAt = _chunkDWJJI6RTcjs.elasticAt; exports.evaluateEasing = _chunkDWJJI6RTcjs.evaluateEasing; exports.evaluateTrack = _chunkSVR5FR7Bcjs.evaluateTrack; exports.formatOklab = _chunk5FXOR7F2cjs.formatOklab; exports.fractalWiggle = _chunk7B5GTJXBcjs.fractalWiggle; exports.interpolateAnimationValue = _chunkSVR5FR7Bcjs.interpolateAnimationValue; exports.isAnimationEasing = _chunkDWJJI6RTcjs.isAnimationEasing; exports.isAnimationKeyframe = _chunkSVR5FR7Bcjs.isAnimationKeyframe; exports.isMotionBehavior = _chunk7B5GTJXBcjs.isMotionBehavior; exports.mixColorsOklab = _chunk5FXOR7F2cjs.mixColorsOklab; exports.motionSeedFromId = _chunk7B5GTJXBcjs.motionSeedFromId; exports.normalizeKeyframes = _chunkSVR5FR7Bcjs.normalizeKeyframes; exports.oklabToRgb = _chunk5FXOR7F2cjs.oklabToRgb; exports.pageHidden = _chunkSVR5FR7Bcjs.pageHidden; exports.parseCssEasing = _chunkDWJJI6RTcjs.parseCssEasing; exports.parseOklab = _chunk5FXOR7F2cjs.parseOklab; exports.quinticFade = _chunk7B5GTJXBcjs.quinticFade; exports.realClock = _chunkSVR5FR7Bcjs.realClock; exports.realPresenceClock = _chunkUJGAA6AKcjs.realPresenceClock; exports.resolveEasing = _chunkDWJJI6RTcjs.resolveEasing; exports.reverseCubicBezier = _chunkDWJJI6RTcjs.reverseCubicBezier; exports.rgbToOklab = _chunk5FXOR7F2cjs.rgbToOklab; exports.springAt = _chunkDWJJI6RTcjs.springAt; exports.springSettleMs = _chunkDWJJI6RTcjs.springSettleMs; exports.tweenPresenceCursor = _chunkUJGAA6AKcjs.tweenPresenceCursor; exports.wrapAnimationTime = _chunkSVR5FR7Bcjs.wrapAnimationTime;
+exports.ANIMATION_EASING_LABELS = _chunkDWJJI6RTcjs.ANIMATION_EASING_LABELS; exports.ANIMATION_EASING_PRESETS = _chunkDWJJI6RTcjs.ANIMATION_EASING_PRESETS; exports.ANIMATION_TIME_EPSILON = _chunkUUTTJK77cjs.ANIMATION_TIME_EPSILON; exports.AnimationPlayer = _chunkUUTTJK77cjs.AnimationPlayer; exports.CUBIC_BEZIER_PRESETS = _chunkDWJJI6RTcjs.CUBIC_BEZIER_PRESETS; exports.MOTION_BEHAVIORS = _chunk7B5GTJXBcjs.MOTION_BEHAVIORS; exports.ManualClock = _chunkUUTTJK77cjs.ManualClock; exports.PRESENCE_COLORS = _chunkUJGAA6AKcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkUJGAA6AKcjs.PerformanceQueue; exports.PresenceStore = _chunkUJGAA6AKcjs.PresenceStore; exports.SPRING_PRESETS = _chunkDWJJI6RTcjs.SPRING_PRESETS; exports.behaviorProgress = _chunk7B5GTJXBcjs.behaviorProgress; exports.createAnimationPlayer = _chunkUUTTJK77cjs.createAnimationPlayer; exports.createInstantPresenceClock = _chunkUJGAA6AKcjs.createInstantPresenceClock; exports.cubicBezierAt = _chunkDWJJI6RTcjs.cubicBezierAt; exports.easingFromInfluence = _chunkDWJJI6RTcjs.easingFromInfluence; exports.easingLabel = _chunkDWJJI6RTcjs.easingLabel; exports.easingToCss = _chunkDWJJI6RTcjs.easingToCss; exports.elasticAt = _chunkDWJJI6RTcjs.elasticAt; exports.evaluateEasing = _chunkDWJJI6RTcjs.evaluateEasing; exports.evaluateTrack = _chunkUUTTJK77cjs.evaluateTrack; exports.formatOklab = _chunk5FXOR7F2cjs.formatOklab; exports.fractalWiggle = _chunk7B5GTJXBcjs.fractalWiggle; exports.interpolateAnimationValue = _chunkUUTTJK77cjs.interpolateAnimationValue; exports.isAnimationEasing = _chunkDWJJI6RTcjs.isAnimationEasing; exports.isAnimationKeyframe = _chunkUUTTJK77cjs.isAnimationKeyframe; exports.isMotionBehavior = _chunk7B5GTJXBcjs.isMotionBehavior; exports.mixColorsOklab = _chunk5FXOR7F2cjs.mixColorsOklab; exports.motionSeedFromId = _chunk7B5GTJXBcjs.motionSeedFromId; exports.normalizeKeyframes = _chunkUUTTJK77cjs.normalizeKeyframes; exports.oklabToRgb = _chunk5FXOR7F2cjs.oklabToRgb; exports.pageHidden = _chunkUUTTJK77cjs.pageHidden; exports.parseCssEasing = _chunkDWJJI6RTcjs.parseCssEasing; exports.parseOklab = _chunk5FXOR7F2cjs.parseOklab; exports.quinticFade = _chunk7B5GTJXBcjs.quinticFade; exports.realClock = _chunkUUTTJK77cjs.realClock; exports.realPresenceClock = _chunkUJGAA6AKcjs.realPresenceClock; exports.resolveEasing = _chunkDWJJI6RTcjs.resolveEasing; exports.reverseCubicBezier = _chunkDWJJI6RTcjs.reverseCubicBezier; exports.rgbToOklab = _chunk5FXOR7F2cjs.rgbToOklab; exports.springAt = _chunkDWJJI6RTcjs.springAt; exports.springSettleMs = _chunkDWJJI6RTcjs.springSettleMs; exports.tweenPresenceCursor = _chunkUJGAA6AKcjs.tweenPresenceCursor; exports.wrapAnimationTime = _chunkUUTTJK77cjs.wrapAnimationTime;

package/dist/animation/index.js

@@ -26,7 +26,7 @@ import {
   pageHidden,
   realClock,
   wrapAnimationTime
-} from "../chunk-I4T4J27S.js";
+} from "../chunk-QX25HWFL.js";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,

package/dist/animation/player.d.cts

@@ -54,6 +54,11 @@ export declare class AnimationPlayer {
     /** Current timeline length (ms). */
     get duration(): number;
     get currentTime(): number;
+    /**
+     * The playhead at this moment of the clock, between frames too (`currentTime` is the last
+     * frame's): what input arriving between frames, like a recorded pointer move, happened at.
+     */
+    get liveTime(): number;
     get isPlaying(): boolean;
     getState(): AnimationPlayerState;
     subscribe(listener: (state: AnimationPlayerState) => void): () => void;

package/dist/animation/player.d.ts

@@ -54,6 +54,11 @@ export declare class AnimationPlayer {
     /** Current timeline length (ms). */
     get duration(): number;
     get currentTime(): number;
+    /**
+     * The playhead at this moment of the clock, between frames too (`currentTime` is the last
+     * frame's): what input arriving between frames, like a recorded pointer move, happened at.
+     */
+    get liveTime(): number;
     get isPlaying(): boolean;
     getState(): AnimationPlayerState;
     subscribe(listener: (state: AnimationPlayerState) => void): () => void;

package/dist/animation-editor/controller.d.cts

@@ -12,6 +12,7 @@ import type { MotionIssue } from './issues.cjs';
 import type { MotionScene } from './types.cjs';
 import { EffectsSlot } from '../effects/helpers.cjs';
 import type { EffectProvider, EffectValue } from '../effects/types.cjs';
+import { type MotionNodePose, type MotionTake, type MotionTakeOptions, type MotionTakeResult, type MotionTakeSample } from './record.cjs';
 import { type AppliedMotionEffect } from './effects.cjs';
 export interface AnimationEditorOptions {
     /** The scene to open (default: an empty one over a blank 800 × 450 artwork). */
@@ -44,6 +45,38 @@ export interface AnimationEditorSelection {
     shot: string;
     command?: number;
 }
+/** What a stage drag does to a node while recording: move it, scale it about its centre or turn it. */
+export type MotionRecordGestureMode = 'move' | 'scale' | 'rotate';
+export declare const MOTION_RECORD_GESTURE_MODES: readonly MotionRecordGestureMode[];
+/** A take being recorded (see `startRecording`). */
+export interface AnimationEditorRecording {
+    /** The id the take's shot will get. */
+    shot: string;
+    /** Where the shot will go among the shots. */
+    at: number;
+    /** When the take starts in the scene, ms. */
+    start: number;
+    /** How long it has run, ms. */
+    elapsed: number;
+    /** Samples recorded so far. */
+    samples: number;
+    /** The node a stage drag is changing now, and how. */
+    gesture: {
+        node: string;
+        mode: MotionRecordGestureMode;
+    } | null;
+}
+/** What `stopRecording` and `recordTake` return. */
+export type MotionRecordResult = ({
+    ok: true;
+} & MotionTakeResult & {
+    issues: readonly MotionIssue[];
+}) | {
+    ok: false;
+    error: string;
+};
+/** The longest take, ms. */
+export declare const MOTION_MAX_TAKE_MS: number;
 /** A snapshot of the editor. The same object is returned until something changes. */
 export interface AnimationEditorState {
     scene: MotionScene;
@@ -71,6 +104,8 @@ export interface AnimationEditorState {
     revision: number;
     /** The registered effects provider, or `null`. */
     effectsProvider: EffectProvider | null;
+    /** The take being recorded, or `null`. While recording, frames show the take so far. */
+    recording: AnimationEditorRecording | null;
 }
 /**
  * Headless editor for a vector animation (a `MotionScene`): undoable, all-or-nothing edits,
@@ -95,6 +130,7 @@ export declare class AnimationEditorController {
     private readonly listeners;
     private readonly unsubscribers;
     private state;
+    private recording;
     constructor(options?: AnimationEditorOptions);
     private connect;
     /**
@@ -178,16 +214,80 @@ export declare class AnimationEditorController {
     play(): void;
     pause(): void;
     toggle(): void;
-    /** Moves the playhead (ms). */
+    /** Moves the playhead (ms). Ignored while recording: a take runs on from where it started. */
     seek(time: number): void;
     /** Moves the playhead to the start or end of a shot. Returns false for an unknown shot. */
     seekShot(id: string, at?: 'start' | 'end'): boolean;
     undo(): boolean;
     redo(): boolean;
+    /** The scene as shown: while recording, with the take so far as its shot. */
+    viewScene(): MotionScene;
     /** The scene at `time` (default: the playhead). */
     frame(time?: number, options?: MotionFrameOptions): MotionFrame;
     /** The scene at `time` (default: the playhead) as SVG. */
     toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
+    /**
+     * Starts recording a take: the playhead goes to where the take's shot will start (default:
+     * the end of the scene) and plays on, and every `recordSample` (or stage gesture) is a value
+     * at that moment. Frames show the take so far. `stopRecording` turns it into one shot, one
+     * undo step. Edits, seeks and undo wait until the recording stops; `pause` pauses the take.
+     */
+    startRecording(options?: MotionTakeOptions): {
+        ok: true;
+        recording: AnimationEditorRecording;
+    } | {
+        ok: false;
+        error: string;
+    };
+    /**
+     * Records `values` for `node` at `t` (ms into the take; default now). Returns why a sample was
+     * refused (an unknown node, a value out of range), or null.
+     */
+    recordSample(node: string, values: Omit<MotionTakeSample, 'node' | 't'>, t?: number): string | null;
+    /** Where `node` is and how it looks now (while recording: in the take so far), or at `time`. */
+    pose(node: string, time?: number): MotionNodePose;
+    /** A point on a stage element (client pixels, e.g. a pointer event) in document units, through the camera now. */
+    clientToDocument(box: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }, clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Starts a stage drag while recording: from `point` (document units), `move` drags the node,
+     * `scale` scales it about its centre by how much nearer or farther the pointer is, and
+     * `rotate` turns it with the pointer. Returns false when not recording or `node` is unknown.
+     */
+    beginRecordGesture(node: string, mode: MotionRecordGestureMode, point: {
+        x: number;
+        y: number;
+    }): boolean;
+    /** Records the drag's pose with the pointer at `point` (document units). */
+    updateRecordGesture(point: {
+        x: number;
+        y: number;
+    }): void;
+    /** Ends the stage drag (the take keeps recording). */
+    endRecordGesture(): void;
+    private recordGesture;
+    private endRecording;
+    /**
+     * Stops recording and adds the take as a shot (one undo step), selected, with the playhead at
+     * its start. Returns the shot, or why nothing was added (nothing recorded).
+     */
+    stopRecording(): MotionRecordResult;
+    /** Stops recording and throws the take away. */
+    cancelRecording(): void;
+    /**
+     * Adds a take given as samples (an agent's performance, or one recorded elsewhere) as a shot,
+     * one undo step, selected. With `dryRun` it returns the shot and changes nothing.
+     */
+    recordTake(take: MotionTake, options?: MotionTakeOptions & {
+        dryRun?: boolean;
+    }): MotionRecordResult;
     /** The scene as a Flair `SvgMotion`. */
     toFlairMotion(options?: FlairExportOptions): import("./flair.cjs").FlairMotionExport;
     /** The scene as a Flair catalog vector effect. */

package/dist/animation-editor/controller.d.ts

@@ -12,6 +12,7 @@ import type { MotionIssue } from './issues.js';
 import type { MotionScene } from './types.js';
 import { EffectsSlot } from '../effects/helpers.js';
 import type { EffectProvider, EffectValue } from '../effects/types.js';
+import { type MotionNodePose, type MotionTake, type MotionTakeOptions, type MotionTakeResult, type MotionTakeSample } from './record.js';
 import { type AppliedMotionEffect } from './effects.js';
 export interface AnimationEditorOptions {
     /** The scene to open (default: an empty one over a blank 800 × 450 artwork). */
@@ -44,6 +45,38 @@ export interface AnimationEditorSelection {
     shot: string;
     command?: number;
 }
+/** What a stage drag does to a node while recording: move it, scale it about its centre or turn it. */
+export type MotionRecordGestureMode = 'move' | 'scale' | 'rotate';
+export declare const MOTION_RECORD_GESTURE_MODES: readonly MotionRecordGestureMode[];
+/** A take being recorded (see `startRecording`). */
+export interface AnimationEditorRecording {
+    /** The id the take's shot will get. */
+    shot: string;
+    /** Where the shot will go among the shots. */
+    at: number;
+    /** When the take starts in the scene, ms. */
+    start: number;
+    /** How long it has run, ms. */
+    elapsed: number;
+    /** Samples recorded so far. */
+    samples: number;
+    /** The node a stage drag is changing now, and how. */
+    gesture: {
+        node: string;
+        mode: MotionRecordGestureMode;
+    } | null;
+}
+/** What `stopRecording` and `recordTake` return. */
+export type MotionRecordResult = ({
+    ok: true;
+} & MotionTakeResult & {
+    issues: readonly MotionIssue[];
+}) | {
+    ok: false;
+    error: string;
+};
+/** The longest take, ms. */
+export declare const MOTION_MAX_TAKE_MS: number;
 /** A snapshot of the editor. The same object is returned until something changes. */
 export interface AnimationEditorState {
     scene: MotionScene;
@@ -71,6 +104,8 @@ export interface AnimationEditorState {
     revision: number;
     /** The registered effects provider, or `null`. */
     effectsProvider: EffectProvider | null;
+    /** The take being recorded, or `null`. While recording, frames show the take so far. */
+    recording: AnimationEditorRecording | null;
 }
 /**
  * Headless editor for a vector animation (a `MotionScene`): undoable, all-or-nothing edits,
@@ -95,6 +130,7 @@ export declare class AnimationEditorController {
     private readonly listeners;
     private readonly unsubscribers;
     private state;
+    private recording;
     constructor(options?: AnimationEditorOptions);
     private connect;
     /**
@@ -178,16 +214,80 @@ export declare class AnimationEditorController {
     play(): void;
     pause(): void;
     toggle(): void;
-    /** Moves the playhead (ms). */
+    /** Moves the playhead (ms). Ignored while recording: a take runs on from where it started. */
     seek(time: number): void;
     /** Moves the playhead to the start or end of a shot. Returns false for an unknown shot. */
     seekShot(id: string, at?: 'start' | 'end'): boolean;
     undo(): boolean;
     redo(): boolean;
+    /** The scene as shown: while recording, with the take so far as its shot. */
+    viewScene(): MotionScene;
     /** The scene at `time` (default: the playhead). */
     frame(time?: number, options?: MotionFrameOptions): MotionFrame;
     /** The scene at `time` (default: the playhead) as SVG. */
     toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
+    /**
+     * Starts recording a take: the playhead goes to where the take's shot will start (default:
+     * the end of the scene) and plays on, and every `recordSample` (or stage gesture) is a value
+     * at that moment. Frames show the take so far. `stopRecording` turns it into one shot, one
+     * undo step. Edits, seeks and undo wait until the recording stops; `pause` pauses the take.
+     */
+    startRecording(options?: MotionTakeOptions): {
+        ok: true;
+        recording: AnimationEditorRecording;
+    } | {
+        ok: false;
+        error: string;
+    };
+    /**
+     * Records `values` for `node` at `t` (ms into the take; default now). Returns why a sample was
+     * refused (an unknown node, a value out of range), or null.
+     */
+    recordSample(node: string, values: Omit<MotionTakeSample, 'node' | 't'>, t?: number): string | null;
+    /** Where `node` is and how it looks now (while recording: in the take so far), or at `time`. */
+    pose(node: string, time?: number): MotionNodePose;
+    /** A point on a stage element (client pixels, e.g. a pointer event) in document units, through the camera now. */
+    clientToDocument(box: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }, clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Starts a stage drag while recording: from `point` (document units), `move` drags the node,
+     * `scale` scales it about its centre by how much nearer or farther the pointer is, and
+     * `rotate` turns it with the pointer. Returns false when not recording or `node` is unknown.
+     */
+    beginRecordGesture(node: string, mode: MotionRecordGestureMode, point: {
+        x: number;
+        y: number;
+    }): boolean;
+    /** Records the drag's pose with the pointer at `point` (document units). */
+    updateRecordGesture(point: {
+        x: number;
+        y: number;
+    }): void;
+    /** Ends the stage drag (the take keeps recording). */
+    endRecordGesture(): void;
+    private recordGesture;
+    private endRecording;
+    /**
+     * Stops recording and adds the take as a shot (one undo step), selected, with the playhead at
+     * its start. Returns the shot, or why nothing was added (nothing recorded).
+     */
+    stopRecording(): MotionRecordResult;
+    /** Stops recording and throws the take away. */
+    cancelRecording(): void;
+    /**
+     * Adds a take given as samples (an agent's performance, or one recorded elsewhere) as a shot,
+     * one undo step, selected. With `dryRun` it returns the shot and changes nothing.
+     */
+    recordTake(take: MotionTake, options?: MotionTakeOptions & {
+        dryRun?: boolean;
+    }): MotionRecordResult;
     /** The scene as a Flair `SvgMotion`. */
     toFlairMotion(options?: FlairExportOptions): import("./flair.js").FlairMotionExport;
     /** The scene as a Flair catalog vector effect. */