@motion-script/core 0.1.0

package/dist/nodes/base/node.js

@@ -0,0 +1,800 @@
+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 { Signal } from "../../signals/signal";
+import { AnimationBuilder } from "../../tween/animation-builder";
+import { prepareNumericCellTween } from "../../tween/prepare";
+import { getPropertyMeta, property } from "../../attributes/properties/decorator";
+import { lerpVector2 } from "../../attributes/layout/vector2";
+import { resolveChainEffects } from "../../attributes/shape/effects/chain";
+import { resolvePadding } from "../../attributes/layout/padding";
+import { lerpEdgeInset, lerpSizeInput } from "../../layout/tweens";
+import { lerpEffectArray } from "../../attributes/shape/effects/registry";
+import { isAutoSize, resolveSize } from "../../layout/size-resolver";
+/**
+ * Fractional offsets (0–1) of each anchor within the node's bounding box.
+ * `wx` = fraction of width, `hy` = fraction of height.
+ */
+const ANCHOR_OFFSETS = {
+    topLeft: { wx: 0, hy: 0 },
+    topCenter: { wx: 0.5, hy: 0 },
+    topRight: { wx: 1, hy: 0 },
+    leftCenter: { wx: 0, hy: 0.5 },
+    center: { wx: 0.5, hy: 0.5 },
+    rightCenter: { wx: 1, hy: 0.5 },
+    bottomLeft: { wx: 0, hy: 1 },
+    bottomCenter: { wx: 0.5, hy: 1 },
+    bottomRight: { wx: 1, hy: 1 },
+};
+const ANCHOR_KEYS = Object.keys(ANCHOR_OFFSETS);
+/** Convert ANCHOR_OFFSETS fractions to a normalised pivot: wx=0→-1, wx=1→+1; hy=0→+1, hy=1→-1 */
+function anchorToPivot(offset) {
+    return { x: (offset.wx - 0.5) * 2, y: -(offset.hy - 0.5) * 2 };
+}
+function validateAnchorProps(props) {
+    const presentAnchors = ANCHOR_KEYS.filter(k => props[k] !== undefined);
+    if (presentAnchors.length > 1) {
+        throw new Error(`Cannot set multiple anchor props at once: ${presentAnchors.join(', ')}`);
+    }
+    if (presentAnchors.length === 1 && props['pivot'] !== undefined) {
+        throw new Error(`Cannot set both anchor prop '${presentAnchors[0]}' and 'pivot' at the same time`);
+    }
+}
+/**
+ * Base class for all scene-graph nodes.
+ *
+ * Every visible or structural element in a scene extends `Node`. It wires
+ * together three orthogonal systems:
+ *
+ * **Reactive properties** — fields declared with `@property()` are backed by
+ * `Signal`s. Reading them inside a reactive context (e.g. a render pass)
+ * creates a subscription; writing them propagates the change automatically.
+ * Use {@link set} to update one or more props imperatively, or pass a callback
+ * `() => expr` to bind the prop to a derived value.
+ *
+ * **Tweening** — `*to(props, duration, ease?)` is a generator that animates
+ * one or more props to target values over the given duration (in seconds).
+ * Numeric props are interpolated; props that register a custom `tween` fn (via
+ * `@property({ tween })`) can animate any value type. The convenience helpers
+ * `moveTo`, `moveX`, `moveY`, `fadeTo`, `rotateTo`, and `scaleTo` wrap `to`
+ * for the most common single-property animations.
+ *
+ * **Layout** — `measure()` is called top-down to resolve sizes, then
+ * `layout()` places the node in its allocated `BoxBounds`. Children are
+ * measured and laid out by the parent; the base class just stores the rect.
+ *
+ * ### Built-in visual props
+ * | prop      | default  | unit / notes                          |
+ * |-----------|----------|---------------------------------------|
+ * | `x`       | 0        | horizontal offset in scene pixels     |
+ * | `y`       | 0        | vertical offset (positive = up)       |
+ * | `width`   | `'fill'` | `SizeInput`: px, `'fill'`, `'auto'`  |
+ * | `height`  | `'fill'` | same                                  |
+ * | `scale`   | 1        | uniform scale factor                  |
+ * | `rotate`  | 0        | degrees, clockwise                    |
+ * | `opacity` | 1        | 0–1                                   |
+ * | `effects` | []       | post-process / blend effects          |
+ * | `padding` | 0        | inner spacing, all four edges         |
+ */
+export class Node {
+    _assets = null;
+    _parent = null;
+    get parent() {
+        return this._parent;
+    }
+    get assets() {
+        if (!this._assets)
+            throw new Error("AssetContext not bound — call bindAssets() before accessing assets");
+        return this._assets;
+    }
+    /** Returns the bound asset catalog, or null if this node hasn't been bound yet. */
+    tryAssets() {
+        return this._assets;
+    }
+    id = crypto.randomUUID();
+    __signals;
+    __upgraders;
+    __tweens;
+    /** Maps external prop value → internal cell value for fields that need it. */
+    __mappers;
+    _layoutRect = new Signal({ x: 0, y: 0, width: 0, height: 0 });
+    constraints;
+    /** The allocated bounding box from the last layout pass. Reactive — reads inside callbacks are tracked. */
+    get layoutRect() { return this._layoutRect.get(); }
+    _children = [];
+    constructor(props) {
+        if (props?.ref) {
+            props.ref(this);
+        }
+        // Apply all @property()-decorated fields, reading initial values from props.
+        for (const meta of getPropertyMeta(this)) {
+            const propsVal = props ? props[meta.key] : undefined;
+            const initial = propsVal !== undefined ? propsVal : meta.default;
+            this.applyProp(meta.key, initial, meta.options);
+        }
+        // Anchor-based positioning: validate, derive pivot, bind x/y.
+        if (props) {
+            validateAnchorProps(props);
+            const anchorKey = ANCHOR_KEYS.find(k => props[k] !== undefined);
+            if (anchorKey) {
+                const raw = props[anchorKey];
+                const getTarget = typeof raw === 'function' ? raw : () => raw;
+                const offset = ANCHOR_OFFSETS[anchorKey];
+                this._writeProp('pivot', anchorToPivot(offset));
+                this._writeProp('x', () => {
+                    const r = this._layoutRect.get();
+                    return getTarget().x + (0.5 - offset.wx) * r.width;
+                });
+                this._writeProp('y', () => {
+                    const r = this._layoutRect.get();
+                    return getTarget().y - (0.5 - offset.hy) * r.height;
+                });
+            }
+        }
+        if (props && props.children) {
+            const raw = Array.isArray(props.children) ? props.children : [props.children];
+            const flat = raw.flat(Infinity)
+                .filter((c) => c instanceof Node);
+            if (flat.length > 0)
+                this.addChildren(flat);
+        }
+    }
+    // ---- Reactive properties ----------------------------------------------
+    /**
+     * Declare a reactive prop on this node. Creates a Signal-backed
+     * accessor for `field`, applies an initial value (callback → reactive
+     * binding; otherwise constant), and registers optional tween/mapper
+     * metadata used by `set()` and `to()`.
+     *
+     * Subsequent calls for the same field reuse the existing cell and act as
+     * a value assignment, so subclasses can override a parent's default by
+     * calling applyProp again without losing the cell or its bindings.
+     */
+    applyProp(field, initial, options) {
+        const existing = this.__signals?.get(field);
+        if (!existing) {
+            this._registerProp(field, options);
+        }
+        else if (options) {
+            // Allow subclasses to refine tween/mapper on an inherited field.
+            if (options.tween) {
+                if (!this.__tweens)
+                    this.__tweens = new Map();
+                this.__tweens.set(field, options.tween);
+            }
+            if (options.mapper) {
+                if (!this.__mappers)
+                    this.__mappers = new Map();
+                this.__mappers.set(field, options.mapper);
+            }
+        }
+        this._writeProp(field, initial);
+    }
+    _registerProp(field, options) {
+        const cell = new Signal(undefined);
+        if (!this.__signals)
+            this.__signals = new Map();
+        this.__signals.set(field, cell);
+        if (!this.__upgraders)
+            this.__upgraders = new Map();
+        this.__upgraders.set(field, () => cell);
+        if (options?.tween) {
+            if (!this.__tweens)
+                this.__tweens = new Map();
+            this.__tweens.set(field, options.tween);
+        }
+        if (options?.mapper) {
+            if (!this.__mappers)
+                this.__mappers = new Map();
+            this.__mappers.set(field, options.mapper);
+        }
+        if (options?.layout) {
+            cell.subscribe(() => this._markLayoutDirty());
+        }
+        Object.defineProperty(this, field, {
+            get: () => cell.get(),
+            set: (value) => this._writeProp(field, value),
+            enumerable: true,
+            configurable: true,
+        });
+    }
+    _writeProp(field, value) {
+        if (value === undefined)
+            return;
+        const cell = this.__signals.get(field);
+        const mapper = this.__mappers?.get(field);
+        if (typeof value === "function") {
+            const extFn = value;
+            cell.bind(mapper ? () => mapper(extFn(), cell.get()) : extFn);
+        }
+        else {
+            cell.set(mapper ? mapper(value, cell.get()) : value);
+        }
+    }
+    get properties() {
+        const result = {};
+        if (this.__upgraders) {
+            for (const key of this.__upgraders.keys()) {
+                result[key] = this[key];
+            }
+        }
+        return result;
+    }
+    get name() {
+        return this.constructor.name;
+    }
+    set(props) {
+        const signals = this.__signals;
+        if (!signals)
+            return;
+        // Iterate the caller's keys (usually 1–3) rather than every registered
+        // signal (15+): set() runs in the per-frame hot path. Only keys backed
+        // by a signal are written; unknown keys are ignored as before.
+        for (const key in props) {
+            const val = props[key];
+            if (val !== undefined && signals.has(key))
+                this._writeProp(key, val);
+        }
+    }
+    to(to, duration, easing) {
+        return new AnimationBuilder(this, { to, duration, easing });
+    }
+    /**
+     * Resolve a single `to()` step into a flat {@link TweenStepper} — all the
+     * per-key setup (anchor handling, mapper, numeric-vs-custom routing) happens
+     * once here, then `advance(dt)` is allocation-free. Used by both the
+     * generator path (`_toGen`) and the batched `parallel` path.
+     */
+    _prepareStep(to, duration, easing) {
+        validateAnchorProps(to);
+        // If an anchor key is in the tween target, resolve it to x/y targets and set pivot.
+        const anchorKey = ANCHOR_KEYS.find(k => to[k] !== undefined);
+        if (anchorKey) {
+            const raw = to[anchorKey];
+            const offset = ANCHOR_OFFSETS[anchorKey];
+            const r = this._layoutRect.get();
+            this._writeProp('pivot', anchorToPivot(offset));
+            to.x = raw.x + (0.5 - offset.wx) * r.width;
+            to.y = raw.y - (0.5 - offset.hy) * r.height;
+        }
+        // Numeric, mapper-free props (x/y/scale/rotation/opacity) write straight
+        // to their cell — no property-setter / mapper indirection per step.
+        const numCells = [];
+        const numFrom = [];
+        const numEnd = [];
+        const customLerps = [];
+        const stringSnaps = [];
+        for (const key of Object.keys(to)) {
+            const cell = this.__signals?.get(key);
+            if (!cell)
+                continue;
+            const extVal = to[key];
+            // Map external → internal so the tween operates in stored space.
+            const mapper = this.__mappers?.get(key);
+            const targetVal = mapper ? mapper(extVal, this[key]) : extVal;
+            const tweenFn = this.__tweens?.get(key);
+            if (tweenFn) {
+                const from = this[key];
+                customLerps.push((t) => {
+                    cell.set(tweenFn(from, targetVal, t));
+                });
+            }
+            else if (typeof targetVal === 'number') {
+                if (mapper) {
+                    // Numeric but mapped: keep the setter path so the mapper runs.
+                    const from = this[key];
+                    customLerps.push((t) => { this[key] = from + (targetVal - from) * t; });
+                }
+                else {
+                    numCells.push(cell);
+                    numFrom.push(this[key]);
+                    numEnd.push(targetVal);
+                }
+            }
+            else if (typeof targetVal === 'string') {
+                stringSnaps.push([key, targetVal]);
+            }
+        }
+        const lerp = prepareNumericCellTween(numCells, numFrom, numEnd);
+        const hasCustom = customLerps.length > 0;
+        const hasSnaps = stringSnaps.length > 0;
+        const apply = (t) => {
+            const easedT = easing ? easing(t) : t;
+            lerp(easedT);
+            if (hasCustom)
+                for (const fn of customLerps)
+                    fn(easedT);
+        };
+        let elapsed = 0;
+        return {
+            seek: (e) => apply(duration > 0 ? Math.min(e / duration, 1) : 1),
+            advance: (dt) => {
+                elapsed += dt;
+                if (elapsed < duration) {
+                    apply(elapsed / duration);
+                    return false;
+                }
+                apply(1);
+                if (hasSnaps)
+                    for (const [key, val] of stringSnaps)
+                        this[key] = val;
+                return true;
+            },
+        };
+    }
+    *_toGen(to, duration, easing) {
+        const step = this._prepareStep(to, duration, easing);
+        step.seek(0);
+        let done = false;
+        while (!done) {
+            const dt = yield;
+            done = step.advance(dt);
+        }
+    }
+    // ---- Motion helpers ---------------------------------------------------
+    /**
+     * Animate both `x` and `y` to the given position.
+     *
+     * @example
+     * yield* node.moveTo(200, 100, 0.5, ease.outCubic);
+     */
+    *moveTo(x, y, duration, ease) {
+        return yield* this.to({ x, y }, duration, ease);
+    }
+    /**
+     * Animate only the horizontal position (`x`).
+     *
+     * @example
+     * yield* node.moveX(300, 0.4);
+     */
+    *moveX(x, duration, ease) {
+        return yield* this.to({ x }, duration, ease);
+    }
+    /**
+     * Animate only the vertical position (`y`).
+     *
+     * @example
+     * yield* node.moveY(-50, 0.4);
+     */
+    *moveY(y, duration, ease) {
+        return yield* this.to({ y }, duration, ease);
+    }
+    /**
+     * Animate `opacity` to the target value.
+     *
+     * @param opacity Target opacity in the range `[0, 1]`.
+     * @example
+     * yield* node.fadeTo(0, 0.3);   // fade out
+     * yield* node.fadeTo(1, 0.3);   // fade in
+     */
+    *fadeTo(opacity, duration, ease) {
+        return yield* this.to({ opacity }, duration, ease);
+    }
+    /**
+     * Animate `rotate` to the target angle (degrees, clockwise).
+     *
+     * @example
+     * yield* node.rotateTo(180, 0.6, ease.inOutQuad);
+     */
+    *rotateTo(rotation, duration, ease) {
+        return yield* this.to({ rotation }, duration, ease);
+    }
+    /**
+     * Animate `scale` to the target factor.
+     *
+     * @example
+     * yield* node.scaleTo(1.5, 0.4);   // grow
+     * yield* node.scaleTo(0,   0.3);   // shrink to nothing
+     */
+    *scaleTo(scale, duration, ease) {
+        return yield* this.to({ scale }, duration, ease);
+    }
+    // ---- Clock ------------------------------------------------------------
+    _clock = {
+        time: 0,
+        creation: 0,
+        elapsed: 0,
+        initialized: false,
+    };
+    tick(_globalTime) {
+    }
+    /** Internal timing state. */
+    get clock() {
+        return this._clock;
+    }
+    ellapse(totalTime) {
+        if (!this._clock.initialized) {
+            this._clock.creation = totalTime;
+            this._clock.initialized = true;
+        }
+        this._clock.time = totalTime;
+        this._clock.elapsed = totalTime - this._clock.creation;
+        this.tick(this._clock.time);
+        for (const child of this._children)
+            child.ellapse(totalTime);
+    }
+    // ---- Asset lifecycle --------------------------------------------------
+    bindAssets(context) {
+        this._assets = context;
+        for (const child of this._children)
+            child.bindAssets(context);
+    }
+    prepare(_storage) {
+    }
+    /**
+     * Audio clips this node owns, surfaced to the timeline as waveforms. The
+     * base node has no audio; nodes that do (e.g. {@link Scene}) override this.
+     * Returns undefined when there is nothing to show.
+     */
+    waveform() {
+        return undefined;
+    }
+    prepareAssets(storage) {
+        this.prepare(storage);
+        for (const child of this._children)
+            child.prepareAssets(storage);
+    }
+    // ---- Layout queries ---------------------------------------------------
+    get measuredWidth() {
+        return this.layoutRect.width;
+    }
+    get measuredHeight() {
+        return this.layoutRect.height;
+    }
+    // ---- Anchor points ----------------------------------------------------
+    // All getters read the reactive layoutRect signal AND the reactive x/y/rotation
+    // signals, so any callback that reads them will re-evaluate on any change.
+    /** Rotate offset (ox, oy) by this node's rotation (degrees clockwise) around the node center. */
+    _rotateOffset(ox, oy) {
+        const deg = this.rotation;
+        if (deg === 0)
+            return { x: this.x + ox, y: this.y + oy };
+        const rad = (deg * Math.PI) / 180;
+        const cos = Math.cos(rad);
+        const sin = Math.sin(rad);
+        // Canvas rotation is clockwise; in y-up space that means x'= cos*ox + sin*oy, y'= -sin*ox + cos*oy
+        return {
+            x: this.x + cos * ox + sin * oy,
+            y: this.y - sin * ox + cos * oy,
+        };
+    }
+    /** Center of the node — equivalent to its x/y position (0,0 is the center of the layout cell). */
+    get center() {
+        return { x: this.x, y: this.y };
+    }
+    get topLeft() {
+        const r = this.layoutRect;
+        return this._rotateOffset(-r.width / 2, r.height / 2);
+    }
+    get topRight() {
+        const r = this.layoutRect;
+        return this._rotateOffset(r.width / 2, r.height / 2);
+    }
+    get bottomLeft() {
+        const r = this.layoutRect;
+        return this._rotateOffset(-r.width / 2, -r.height / 2);
+    }
+    get bottomRight() {
+        const r = this.layoutRect;
+        return this._rotateOffset(r.width / 2, -r.height / 2);
+    }
+    get topCenter() {
+        const r = this.layoutRect;
+        return this._rotateOffset(0, r.height / 2);
+    }
+    get bottomCenter() {
+        const r = this.layoutRect;
+        return this._rotateOffset(0, -r.height / 2);
+    }
+    get leftCenter() {
+        const r = this.layoutRect;
+        return this._rotateOffset(-r.width / 2, 0);
+    }
+    get rightCenter() {
+        const r = this.layoutRect;
+        return this._rotateOffset(r.width / 2, 0);
+    }
+    isAutoSize(axis) {
+        return isAutoSize(axis === "width" ? this.width : this.height);
+    }
+    resolveSizeInput(sizeInput, availableSize, childrenSize) {
+        return resolveSize(sizeInput, availableSize, childrenSize);
+    }
+    // ---- Child management -------------------------------------------------
+    get children() {
+        return this._children;
+    }
+    addChild(child) {
+        this._children.push(child);
+        child._parent = this;
+        this._markLayoutDirty();
+        const assets = this.tryAssets();
+        if (assets)
+            child.bindAssets(assets);
+    }
+    removeChild(child) {
+        const i = this._children.indexOf(child);
+        if (i < 0)
+            return null;
+        const [removed] = this._children.splice(i, 1);
+        if (removed)
+            removed._parent = null;
+        this._markLayoutDirty();
+        return removed ?? null;
+    }
+    addChildren(children) {
+        this._children.push(...children);
+        for (const child of children)
+            child._parent = this;
+        this._markLayoutDirty();
+        const assets = this.tryAssets();
+        if (assets)
+            for (const child of children)
+                child.bindAssets(assets);
+    }
+    clearChildren() {
+        for (const child of this._children)
+            child._parent = null;
+        this._children.length = 0;
+        this._markLayoutDirty();
+    }
+    addChildAt(child, index, duration, easing) {
+        if (duration === undefined) {
+            this._children.splice(index, 0, child);
+            child._parent = this;
+            this._markLayoutDirty();
+            const assets = this.tryAssets();
+            if (assets)
+                child.bindAssets(assets);
+            return;
+        }
+        return this._addChildAtAnimated(child, index, duration, easing);
+    }
+    removeChildAt(index, duration, easing) {
+        if (duration === undefined) {
+            if (index < 0 || index >= this._children.length)
+                return null;
+            const [removed] = this._children.splice(index, 1);
+            if (removed)
+                removed._parent = null;
+            this._markLayoutDirty();
+            return removed ?? null;
+        }
+        return this._removeChildAtAnimated(index, duration, easing);
+    }
+    // ---- Rendering --------------------------------------------------------
+    // Reused each frame so applyTransform doesn't allocate a fresh descriptor
+    // per node per frame. ctx.transform reads it synchronously and never retains
+    // it, so a single mutated instance is safe.
+    _transformScratch = {
+        x: 0, y: 0, width: 0, height: 0,
+        scale: 1, rotation: 0, opacity: 1,
+        effects: [], pivot: { x: 0, y: 0 },
+    };
+    /** Push this node's transform (position, scale, rotate, opacity, effects). */
+    applyTransform(ctx) {
+        const r = this.layoutRect;
+        const s = this._transformScratch;
+        s.x = (r?.x ?? 0) + this.x;
+        s.y = (r?.y ?? 0) - this.y;
+        s.width = r?.width ?? 0;
+        s.height = r?.height ?? 0;
+        s.scale = this.scale;
+        s.rotation = this.rotation;
+        s.opacity = this.opacity;
+        s.effects = this.effects;
+        s.pivot = this.pivot;
+        ctx.transform(s);
+    }
+    onRender(ctx) {
+        this.applyTransform(ctx);
+        this.renderChildren(ctx);
+    }
+    renderChildren(ctx) {
+        for (const child of this._children)
+            child.render(ctx);
+    }
+    beforeRender(ctx) {
+        ctx.begin(this.id, this._spaceRects());
+    }
+    /**
+     * Reference rects for fills with `space:'parent'`, expressed in this node's
+     * local space (origin = this node's positioned centre, y-down to match the
+     * canvas). The viewport (`space:'view'`) is resolved by the renderer, which
+     * knows the surface size. Rotation/scale of this node are not folded in —
+     * the rect is the axis-aligned parent box, which is what gradients expect.
+     */
+    _spaceRects() {
+        const parent = this._parent;
+        if (!parent)
+            return {};
+        const p = parent.layoutRect;
+        const r = this.layoutRect;
+        // This node's local origin within the parent's space.
+        const ox = r.x + this.x;
+        const oy = r.y - this.y;
+        return {
+            parent: {
+                left: -p.width / 2 - ox,
+                top: -p.height / 2 - oy,
+                right: p.width / 2 - ox,
+                bottom: p.height / 2 - oy,
+            },
+        };
+    }
+    afterRender(ctx) {
+        ctx.end();
+    }
+    render(ctx) {
+        this.beforeRender(ctx);
+        this.onRender(ctx);
+        this.afterRender(ctx);
+    }
+    // ---- Layout -----------------------------------------------------------
+    _measuredSize = {};
+    _layoutDirty = true;
+    /**
+     * Mark this node's layout stale and bubble the flag to ancestors. A child's
+     * size change reflows its parent's layout, so the parent must re-run too.
+     * Subscribed to layout-affecting props (see @property `layout`) and invoked
+     * directly on child-list mutations. x/y are *not* layout props — they're
+     * applied at render time and never invalidate layout.
+     */
+    _markLayoutDirty() {
+        let node = this;
+        while (node && !node._layoutDirty) {
+            node._layoutDirty = true;
+            node = node._parent;
+        }
+    }
+    layout(rect, _scope) {
+        this._layoutRect.set(rect);
+        this._layoutDirty = false;
+    }
+    measure(constraints, _scope) {
+        this.constraints = constraints;
+        const maxW = constraints.maxWidth ?? 0;
+        const maxH = constraints.maxHeight ?? 0;
+        this._measuredSize.width = resolveSize(this.width, maxW, 0);
+        this._measuredSize.height = resolveSize(this.height, maxH, 0);
+        return this._measuredSize;
+    }
+    reparent(newParent, duration, easing) {
+        if (duration === undefined) {
+            const old = this.parent;
+            if (old)
+                old.removeChild(this);
+            newParent.addChild(this);
+            return;
+        }
+        return this._reparentAnimated(newParent, duration, easing);
+    }
+    *_reparentAnimated(newParent, duration, easing) {
+        const half = duration / 2;
+        const targetOpacity = this.opacity;
+        // Pin to current rendered size so exit shrink reflows the old parent.
+        const lw = this.layoutRect?.width;
+        const lh = this.layoutRect?.height;
+        const hasSizeAnim = lw !== undefined && lh !== undefined;
+        if (hasSizeAnim) {
+            this.set({ width: lw, height: lh });
+        }
+        const exitProps = { opacity: 0 };
+        if (hasSizeAnim) {
+            exitProps.width = 0;
+            exitProps.height = 0;
+        }
+        yield* this.to(exitProps, half, easing);
+        const old = this.parent;
+        if (old)
+            old.removeChild(this);
+        newParent.addChild(this);
+        const enterProps = { opacity: targetOpacity };
+        if (hasSizeAnim) {
+            enterProps.width = lw;
+            enterProps.height = lh;
+        }
+        yield* this.to(enterProps, half, easing);
+    }
+    *_addChildAtAnimated(child, index, duration, easing) {
+        const targetOpacity = child.opacity;
+        const isNumericW = typeof child.width === 'number';
+        const isNumericH = typeof child.height === 'number';
+        const targetW = isNumericW ? child.width : 0;
+        const targetH = isNumericH ? child.height : 0;
+        child.set({
+            opacity: 0,
+            width: isNumericW ? 0 : undefined,
+            height: isNumericH ? 0 : undefined,
+        });
+        this._children.splice(index, 0, child);
+        child._parent = this;
+        this._markLayoutDirty();
+        const assets = this.tryAssets();
+        if (assets)
+            child.bindAssets(assets);
+        const toProps = { opacity: targetOpacity };
+        if (isNumericW)
+            toProps.width = targetW;
+        if (isNumericH)
+            toProps.height = targetH;
+        yield* child.to(toProps, duration, easing);
+    }
+    *_removeChildAtAnimated(index, duration, easing) {
+        if (index < 0 || index >= this._children.length)
+            return;
+        const child = this._children[index];
+        // Pin to current rendered size so the shrink reflows siblings in the parent layout.
+        const lw = child.layoutRect?.width;
+        const lh = child.layoutRect?.height;
+        child.set({ width: lw, height: lh });
+        const toProps = { opacity: 0 };
+        if (lw !== undefined)
+            toProps.width = 0;
+        if (lh !== undefined)
+            toProps.height = 0;
+        yield* child.to(toProps, duration, easing);
+        this._children.splice(index, 1);
+        child._parent = null;
+        this._markLayoutDirty();
+    }
+    // ---- Teardown ---------------------------------------------------------
+    dispose() {
+        if (this.__signals) {
+            for (const cell of this.__signals.values()) {
+                cell.dispose();
+            }
+        }
+        this.__signals = undefined;
+        this.__upgraders = undefined;
+        this.__tweens = undefined;
+        this.__mappers = undefined;
+        this._assets = null;
+    }
+}
+__decorate([
+    property({ default: 0 })
+], Node.prototype, "x", void 0);
+__decorate([
+    property({ default: 0 })
+], Node.prototype, "y", void 0);
+__decorate([
+    property({ default: 'fill', tween: lerpSizeInput, layout: true })
+], Node.prototype, "width", void 0);
+__decorate([
+    property({ default: 'fill', tween: lerpSizeInput, layout: true })
+], Node.prototype, "height", void 0);
+__decorate([
+    property({ default: 1 })
+], Node.prototype, "scale", void 0);
+__decorate([
+    property({ default: 0 })
+], Node.prototype, "rotation", void 0);
+__decorate([
+    property({ default: 1 })
+], Node.prototype, "opacity", void 0);
+__decorate([
+    property({ default: [], tween: lerpEffectArray, mapper: resolveChainEffects })
+], Node.prototype, "effects", void 0);
+__decorate([
+    property({ default: 0, mapper: resolvePadding, tween: lerpEdgeInset, layout: true })
+], Node.prototype, "padding", void 0);
+__decorate([
+    property({ default: { x: 0, y: 0 }, tween: lerpVector2 })
+], Node.prototype, "pivot", void 0);
+__decorate([
+    property({ default: undefined })
+], Node.prototype, "column", void 0);
+__decorate([
+    property({ default: undefined })
+], Node.prototype, "row", void 0);
+__decorate([
+    property({ default: 1 })
+], Node.prototype, "colSpan", void 0);
+__decorate([
+    property({ default: 1 })
+], Node.prototype, "rowSpan", void 0);
+//# sourceMappingURL=node.js.map