@rafaelaugusto/jolt 0.1.0-beta.11 → 0.1.0-beta.13

package/src/native/index.ts

@@ -0,0 +1,16 @@
+export { registerNativeProperty, checkNativeProperty } from '../native-property.js'
+export type { NativeProperty, NativePropertyDefinition } from '../native-property.js'
+export type { NativeSink } from '../native-property-driver.js'
+export {
+  mapKitCoordinate,
+  mapKitCamera,
+  mapLibreCoordinate,
+  mapLibreCamera,
+  sceneKitPose,
+} from '../native-properties.js'
+export type {
+  Coordinate,
+  MapKitCamera,
+  MapLibreCamera,
+  ScenePose,
+} from '../native-properties.js'

package/src/native-properties.ts

@@ -0,0 +1,188 @@
+import { registerNativeProperty } from './native-property.js'
+
+export interface Coordinate {
+  latitude: number
+  longitude: number
+}
+export interface MapKitCamera extends Coordinate {
+  altitude: number
+  pitch: number
+  heading: number
+}
+export interface MapLibreCamera extends Coordinate {
+  zoom: number
+  tilt: number
+  bearing: number
+}
+export interface ScenePose {
+  position: readonly [number, number, number]
+  orientation: readonly [number, number, number, number]
+}
+
+/** Shortest longitude/heading interpolation. Coordinates use a local linear path, not a geodesic. */
+export function shortestAngle(from: number, to: number, fraction: number) {
+  const delta = ((((to - from + 180) % 360) + 360) % 360) - 180
+  return from + delta * fraction
+}
+function validateCoordinate(value: Coordinate) {
+  if (
+    !Number.isFinite(value.latitude) ||
+    Math.abs(value.latitude) > 90 ||
+    !Number.isFinite(value.longitude)
+  )
+    throw new RangeError('Coordinates need latitude in -90..90 and a finite longitude.')
+}
+function coordinate(from: Coordinate, to: Coordinate, t: number): Coordinate {
+  return {
+    latitude: Math.max(
+      -90,
+      Math.min(90, from.latitude + (to.latitude - from.latitude) * t),
+    ),
+    longitude: shortestAngle(from.longitude, to.longitude, t),
+  }
+}
+
+export const mapKitCoordinate = registerNativeProperty<Coordinate>({
+  name: 'jolt.mapkit/coordinate',
+  units: ['latitude degrees', 'longitude degrees'],
+  platforms: ['ios'],
+  spatial: true,
+  encode: (v) => [v.latitude, v.longitude],
+  decode: (v) => ({ latitude: v[0]!, longitude: v[1]! }),
+  validate: validateCoordinate,
+  interpolate: coordinate,
+  create: (target) => JoltReferenceProperties.mapCoordinate(target as NSObject),
+})
+export const mapKitCamera = registerNativeProperty<MapKitCamera>({
+  name: 'jolt.mapkit/camera',
+  units: [
+    'latitude degrees',
+    'longitude degrees',
+    'altitude meters',
+    'pitch degrees',
+    'heading degrees',
+  ],
+  platforms: ['ios'],
+  spatial: true,
+  encode: (v) => [v.latitude, v.longitude, v.altitude, v.pitch, v.heading],
+  decode: (v) => ({
+    latitude: v[0]!,
+    longitude: v[1]!,
+    altitude: v[2]!,
+    pitch: v[3]!,
+    heading: v[4]!,
+  }),
+  validate(v) {
+    validateCoordinate(v)
+    if (v.altitude < 1 || v.pitch < 0 || v.pitch > 80)
+      throw new RangeError('MapKit camera needs altitude >= 1m and pitch 0..80 degrees.')
+  },
+  interpolate: (a, b, t) => ({
+    ...coordinate(a, b, t),
+    altitude: Math.max(1, a.altitude + (b.altitude - a.altitude) * t),
+    pitch: Math.max(0, Math.min(80, a.pitch + (b.pitch - a.pitch) * t)),
+    heading: shortestAngle(a.heading, b.heading, t),
+  }),
+  create: (target) => JoltReferenceProperties.mapCamera(target as NSObject),
+})
+export const mapLibreCoordinate = registerNativeProperty<Coordinate>({
+  name: 'jolt.maplibre/coordinate',
+  units: ['latitude degrees', 'longitude degrees'],
+  platforms: ['android'],
+  spatial: true,
+  encode: (v) => [v.latitude, v.longitude],
+  decode: (v) => ({ latitude: v[0]!, longitude: v[1]! }),
+  validate: validateCoordinate,
+  interpolate: coordinate,
+  create: (target) => new org.rafaelaugusto.jolt.MapLibrePropertySink(target, false),
+})
+export const mapLibreCamera = registerNativeProperty<MapLibreCamera>({
+  name: 'jolt.maplibre/camera',
+  units: [
+    'latitude degrees',
+    'longitude degrees',
+    'zoom level',
+    'tilt degrees',
+    'bearing degrees',
+  ],
+  platforms: ['android'],
+  spatial: true,
+  encode: (v) => [v.latitude, v.longitude, v.zoom, v.tilt, v.bearing],
+  decode: (v) => ({
+    latitude: v[0]!,
+    longitude: v[1]!,
+    zoom: v[2]!,
+    tilt: v[3]!,
+    bearing: v[4]!,
+  }),
+  validate(v) {
+    validateCoordinate(v)
+    if (v.zoom < 0 || v.zoom > 24 || v.tilt < 0 || v.tilt > 60)
+      throw new RangeError('MapLibre camera needs zoom 0..24 and tilt 0..60 degrees.')
+  },
+  interpolate: (a, b, t) => ({
+    ...coordinate(a, b, t),
+    zoom: Math.max(0, Math.min(24, a.zoom + (b.zoom - a.zoom) * t)),
+    tilt: Math.max(0, Math.min(60, a.tilt + (b.tilt - a.tilt) * t)),
+    bearing: shortestAngle(a.bearing, b.bearing, t),
+  }),
+  create: (target) => new org.rafaelaugusto.jolt.MapLibrePropertySink(target, true),
+})
+
+/** Unit quaternion slerp; q and -q describe the same orientation. */
+export function interpolatePose(a: ScenePose, b: ScenePose, t: number): ScenePose {
+  const normalize = (q: readonly number[]) => {
+    const length = Math.hypot(...q)
+    if (!Number.isFinite(length) || length < 1e-12)
+      throw new RangeError('Orientation must be a nonzero finite quaternion.')
+    return q.map((v) => v / length)
+  }
+  const from = normalize(a.orientation),
+    to = normalize(b.orientation)
+  let dot = from.reduce((sum, v, i) => sum + v * to[i]!, 0)
+  if (dot < 0) {
+    dot = -dot
+    for (let i = 0; i < 4; i++) to[i] = -to[i]!
+  }
+  const theta = Math.acos(Math.min(1, dot)),
+    sine = Math.sin(theta)
+  const x = sine < 1e-6 ? 1 - t : Math.sin((1 - t) * theta) / sine,
+    y = sine < 1e-6 ? t : Math.sin(t * theta) / sine
+  return {
+    position: a.position.map(
+      (v, i) => v + (b.position[i]! - v) * t,
+    ) as unknown as ScenePose['position'],
+    orientation: normalize(
+      from.map((v, i) => v * x + to[i]! * y),
+    ) as unknown as ScenePose['orientation'],
+  }
+}
+export const sceneKitPose = registerNativeProperty<ScenePose>({
+  name: 'jolt.scenekit/pose',
+  units: [
+    'x scene units',
+    'y scene units',
+    'z scene units',
+    'quaternion x',
+    'quaternion y',
+    'quaternion z',
+    'quaternion w',
+  ],
+  platforms: ['ios'],
+  spatial: true,
+  encode: (v) => [...v.position, ...v.orientation],
+  decode: (v) => ({
+    position: [v[0]!, v[1]!, v[2]!],
+    orientation: [v[3]!, v[4]!, v[5]!, v[6]!],
+  }),
+  validate(v) {
+    if (
+      v.position.length !== 3 ||
+      v.orientation.length !== 4 ||
+      Math.hypot(...v.orientation) < 1e-12
+    )
+      throw new RangeError('Scene pose needs a 3D position and a nonzero quaternion.')
+  },
+  interpolate: interpolatePose,
+  create: (target) => JoltReferenceProperties.scenePose(target as NSObject),
+})

package/src/native-property-driver.ts

@@ -0,0 +1,123 @@
+import { isAndroid } from '@nativescript/core'
+import type { Track } from './track.js'
+
+/** Opaque compiled JoltPropertySink / PropertySink instance. */
+export type NativeSink = object
+export interface NativePlayer {
+  control(time: number, paused: boolean): void
+  cancel(): void
+}
+export interface NativePropertyDriver {
+  validate(sink: NativeSink, dimensions: number): void
+  alive(sink: NativeSink): boolean
+  read(sink: NativeSink): number[]
+  write(sink: NativeSink, values: readonly number[]): void
+  dispose(sink: NativeSink): void
+  play(
+    sink: NativeSink,
+    track: Track,
+    samples: readonly (readonly number[])[],
+    final: readonly number[],
+    end: (completed: boolean) => void,
+  ): NativePlayer
+}
+let override: NativePropertyDriver | undefined
+/** Test injection; not part of the public package entry. */
+export function setNativePropertyDriver(driver: NativePropertyDriver | undefined) {
+  override = driver
+}
+export function nativePropertyDriver(): NativePropertyDriver {
+  if (override) return override
+  const available = isAndroid
+    ? typeof org !== 'undefined' &&
+      typeof org.rafaelaugusto.jolt.PropertySink?.scalar === 'function'
+    : typeof JoltPropertySink !== 'undefined'
+  if (!available)
+    throw new Error(
+      'Native property adapters require the optional @rafaelaugusto/jolt-native plugin. Install it and rebuild the native app.',
+    )
+  return isAndroid ? androidDriver : iosDriver
+}
+
+function array(values: readonly number[]) {
+  const result = Array.create('double', values.length)
+  values.forEach((value, i) => {
+    result[i] = value
+  })
+  return result
+}
+const androidDriver: NativePropertyDriver = {
+  validate(sink, dimensions) {
+    if (
+      !(sink instanceof org.rafaelaugusto.jolt.PropertySink) ||
+      sink.getDimensions() !== dimensions ||
+      !sink.isCompiled()
+    )
+      throw new TypeError(
+        'Native adapters require a compiled PropertySink with matching dimensions, not a JavaScript setter.',
+      )
+  },
+  alive: (sink) => (sink as org.rafaelaugusto.jolt.PropertySink).isAlive(),
+  read(sink) {
+    const values = (sink as org.rafaelaugusto.jolt.PropertySink).read()
+    return Array.from({ length: values.length }, (_, i) => values[i]!)
+  },
+  write: (sink, values) =>
+    (sink as org.rafaelaugusto.jolt.PropertySink).write(array(values)),
+  dispose: (sink) => (sink as org.rafaelaugusto.jolt.PropertySink).dispose(),
+  play(sink, track, samples, final, end) {
+    const player = new org.rafaelaugusto.jolt.PropertyPlayer(
+      sink as org.rafaelaugusto.jolt.PropertySink,
+      array(track.times),
+      array(samples.flat()),
+      array(final),
+      track.duration,
+      track.delay,
+      Number.isFinite(track.repeat) ? track.repeat : -1,
+      track.reverse,
+      new org.rafaelaugusto.jolt.PropertyPlayer.Listener({ onEnd: end }),
+    )
+    return {
+      control: (time, paused) => player.control(time, paused),
+      cancel: () => player.cancel(),
+    }
+  },
+}
+const iosDriver: NativePropertyDriver = {
+  validate(sink, dimensions) {
+    if (
+      !(sink instanceof JoltPropertySink) ||
+      sink.dimensions !== dimensions ||
+      !sink.compiled
+    )
+      throw new TypeError(
+        'Native adapters require a compiled JoltPropertySink with matching dimensions, not a JavaScript setter.',
+      )
+  },
+  alive: (sink) => (sink as JoltPropertySink).alive,
+  read(sink) {
+    const values = (sink as JoltPropertySink).read()
+    return Array.from({ length: values.count }, (_, i) => values.objectAtIndex(i))
+  },
+  write: (sink, values) =>
+    (sink as JoltPropertySink).write(NSArray.arrayWithArray([...values])),
+  dispose: (sink) => (sink as JoltPropertySink).dispose(),
+  play(sink, track, samples, final, end) {
+    const player =
+      JoltPropertyPlayer.startSinkTimesValuesFinalValueDurationDelayRepeatReverseCompletion(
+        sink as JoltPropertySink,
+        NSArray.arrayWithArray([...track.times]),
+        NSArray.arrayWithArray(samples.flat()),
+        NSArray.arrayWithArray([...final]),
+        track.duration,
+        track.delay,
+        track.repeat,
+        track.reverse,
+        end,
+      )
+    return {
+      control: (time, paused) => player.controlPaused(time, paused),
+      cancel: () => player.cancel(),
+    }
+  },
+}

package/src/native-property.ts

@@ -0,0 +1,353 @@
+import { isAndroid, Trace } from '@nativescript/core'
+import { reducedMotion } from './config.js'
+import type { DerivedValue } from './motion-value.js'
+import { valuePlayback } from './motion-value.js'
+import type { PlaybackAnimation } from './playback.js'
+import { TimedAnimation } from './timed-animation.js'
+import { createTrack, instantTrack, type Track } from './track.js'
+import {
+  resolveTransition,
+  springs,
+  type Transition,
+  type SpringName,
+} from './transition.js'
+import {
+  nativePropertyDriver,
+  type NativeSink,
+  type NativePlayer,
+} from './native-property-driver.js'
+
+export interface NativePropertyDefinition<T> {
+  /** Namespaced identity, e.g. 'acme.chart/reveal'. One registration per name. */
+  readonly name: string
+  readonly units: readonly string[]
+  readonly platforms: readonly ('ios' | 'android')[]
+  /** Spatial properties jump to their destination under reduced motion. */
+  readonly spatial?: boolean
+  encode(value: T): readonly number[]
+  decode(value: readonly number[]): T
+  /** Called once per sampled keyframe in JS, never per native frame. */
+  interpolate?(from: T, to: T, fraction: number): T
+  validate?(value: T): void
+  /** Must return a compiled native sink, not a JavaScript implementation of its methods. */
+  create(target: object): NativeSink
+}
+
+export interface NativeProperty<T> {
+  readonly name: string
+  get(): T
+  set(value: T): void
+  animate(to: T, options?: Transition | SpringName): PlaybackAnimation
+  /** Sample a pure mapping at setup/boundaries, then write the property entirely in native code. */
+  bind(value: DerivedValue, map: (value: number) => T): () => void
+  stop(): void
+  /** Release this owner's native resources. Call before destroying the SDK target. */
+  dispose(): void
+}
+
+interface Owner {
+  stop(): void
+  velocity(): readonly number[]
+}
+const definitions = new Set<string>()
+const owners = new WeakMap<object, Map<string, Owner>>()
+
+/** Optional plugin registry. No SDK is loaded until its adapter creates a target. */
+export function registerNativeProperty<T>(
+  definition: NativePropertyDefinition<T>,
+): (target: object) => NativeProperty<T> {
+  if (!/^[\w.-]+\/[\w.-]+$/.test(definition.name))
+    throw new TypeError('Native property names must be namespaced: plugin/property.')
+  if (definitions.has(definition.name))
+    throw new Error(`Native property "${definition.name}" is already registered.`)
+  if (
+    !definition.units.length ||
+    definition.units.some((unit) => typeof unit !== 'string' || !unit)
+  )
+    throw new TypeError('Describe the units of every native property component.')
+  if (
+    !definition.platforms.length ||
+    definition.platforms.some((p) => p !== 'ios' && p !== 'android')
+  )
+    throw new TypeError('Declare supported native platforms.')
+  if (
+    typeof definition.create !== 'function' ||
+    typeof definition.encode !== 'function' ||
+    typeof definition.decode !== 'function'
+  )
+    throw new TypeError('A native property needs create(), encode() and decode().')
+  definitions.add(definition.name)
+  return (target) => new PropertyTarget(target, definition)
+}
+
+class PropertyTarget<T> implements NativeProperty<T> {
+  private readonly sink: NativeSink
+  private readonly owned = new Set<Owner>()
+  private disposed = false
+  readonly name: string
+  constructor(
+    private target: object | undefined,
+    private readonly definition: NativePropertyDefinition<T>,
+  ) {
+    this.name = definition.name
+    if (!target || (typeof target !== 'object' && typeof target !== 'function'))
+      throw new TypeError('A native property needs a native target.')
+    const platform = isAndroid ? 'android' : 'ios'
+    if (!definition.platforms.includes(platform))
+      throw new Error(`${this.name} is unavailable on ${platform}.`)
+    const driver = nativePropertyDriver()
+    this.sink = definition.create(target)
+    try {
+      driver.validate(this.sink, definition.units.length)
+    } catch (error) {
+      try {
+        driver.dispose(this.sink)
+      } catch {}
+      throw error
+    }
+  }
+  private alive() {
+    if (this.disposed) throw new Error(`${this.name} has been disposed.`)
+    if (!nativePropertyDriver().alive(this.sink))
+      throw new Error(`${this.name} has lost its native target.`)
+  }
+  private vector(value: T): readonly number[] {
+    this.definition.validate?.(value)
+    const numbers = [...this.definition.encode(value)]
+    if (
+      numbers.length !== this.definition.units.length ||
+      numbers.some((n) => !Number.isFinite(n))
+    )
+      throw new TypeError(
+        `${this.name} expects ${this.definition.units.length} finite components.`,
+      )
+    return numbers
+  }
+  get(): T {
+    this.alive()
+    return this.definition.decode(nativePropertyDriver().read(this.sink))
+  }
+  set(value: T) {
+    this.alive()
+    const vector = this.vector(value)
+    this.owner()?.stop()
+    nativePropertyDriver().write(this.sink, vector)
+  }
+  private owner() {
+    return this.target ? owners.get(this.target)?.get(this.name) : undefined
+  }
+  private claim(owner: Owner) {
+    this.owner()?.stop()
+    let map = owners.get(this.target!)
+    if (!map) owners.set(this.target!, (map = new Map()))
+    map.set(this.name, owner)
+    this.owned.add(owner)
+  }
+  private release(owner: Owner) {
+    if (this.target && this.owner() === owner) owners.get(this.target)?.delete(this.name)
+    this.owned.delete(owner)
+  }
+  animate(to: T, options: Transition | SpringName = {}): PlaybackAnimation {
+    this.alive()
+    const from = this.get(),
+      first = this.vector(from),
+      last = this.vector(to)
+    if (typeof options === 'object' && 'layer' in options)
+      throw new TypeError(
+        'Native property adapters do not support layers; bind a layered scalar value instead.',
+      )
+    if (typeof options === 'string' && !Object.hasOwn(springs, options))
+      throw new TypeError(`Unknown spring "${options}".`)
+    const transition = resolveTransition(
+      typeof options === 'string' ? springs[options] : options,
+      'opacity',
+      2,
+    )
+    const velocity = this.owner()?.velocity()
+    const delta = last.map((v, i) => v - first[i]!)
+    const length = delta.reduce((s, v) => s + v * v, 0)
+    const speed =
+      length && velocity
+        ? delta.reduce((s, v, i) => s + v * (velocity[i] ?? 0), 0) / length
+        : 0
+    const track = dense(
+      this.definition.spatial && reducedMotion()
+        ? instantTrack('opacity', 1)
+        : createTrack('opacity', [0, 1], transition, speed),
+    )
+    const at = (fraction: number) =>
+      this.vector(
+        this.definition.interpolate
+          ? this.definition.interpolate(from, to, fraction)
+          : this.definition.decode(first.map((v, i) => v + delta[i]! * fraction)),
+      )
+    const samples = track.values.map(at)
+    const final = at(track.to)
+    let player: NativePlayer | undefined
+    const animation = new TimedAnimation(
+      track.end,
+      track.arrival,
+      (time, paused) => {
+        player?.control(time, paused)
+      },
+      (completed) => {
+        try {
+          if (completed && nativePropertyDriver().alive(this.sink))
+            nativePropertyDriver().write(this.sink, final)
+        } finally {
+          player?.cancel()
+          player = undefined
+          this.release(owner)
+        }
+      },
+    )
+    const owner: Owner = {
+      stop: () => animation.stop(),
+      velocity: () =>
+        animation.paused
+          ? first.map(() => 0)
+          : at(track.valueAt(animation.time + 0.5)).map(
+              (v, i) => (v - at(track.valueAt(animation.time - 0.5))[i]!) * 1000,
+            ),
+    }
+    this.claim(owner)
+    try {
+      if (track.end > 0) {
+        player = nativePropertyDriver().play(
+          this.sink,
+          track,
+          samples,
+          final,
+          (completed) => {
+            if (!completed) animation.stop()
+          },
+        )
+        if (animation.done) {
+          player.cancel()
+          player = undefined
+        } else player.control(animation.time, false)
+      }
+      animation.start()
+    } catch (error) {
+      animation.stop()
+      throw error
+    }
+    return animation
+  }
+  bind(value: DerivedValue, map: (value: number) => T): () => void {
+    this.alive()
+    if (typeof map !== 'function')
+      throw new TypeError('A native binding needs a pure value mapping.')
+    const source = valuePlayback(value)
+    let player: NativePlayer | undefined
+    let off = () => {}
+    let stopped = false
+    const prepare = () => {
+      const state = source.snapshot()
+      state.track = dense(state.track)
+      const spatial = this.definition.spatial && reducedMotion()
+      const samples = state.track.values.map((v) => this.vector(map(v)))
+      const current = this.vector(map(spatial ? state.track.to : state.value))
+      const final = this.vector(map(state.track.to))
+      return { ...state, samples, current, final, running: state.running && !spatial }
+    }
+    const initial = prepare() // Validate all samples before interrupting another owner.
+    const owner: Owner = {
+      stop: () => {
+        if (stopped) return
+        stopped = true
+        off()
+        player?.cancel()
+        player = undefined
+        this.release(owner)
+      },
+      velocity: () => this.definition.units.map(() => 0),
+    }
+    const apply = (state: ReturnType<typeof prepare>) => {
+      player?.cancel()
+      player = undefined
+      if (!state.running) nativePropertyDriver().write(this.sink, state.current)
+      else {
+        player = nativePropertyDriver().play(
+          this.sink,
+          state.track,
+          state.samples,
+          state.final,
+          (completed) => {
+            if (!completed) owner.stop()
+          },
+        )
+        if (stopped) {
+          player.cancel()
+          player = undefined
+        } else player.control(source.snapshot().elapsed, state.paused)
+      }
+    }
+    this.claim(owner)
+    try {
+      off = source.subscribe(() => {
+        if (stopped) return
+        try {
+          this.alive()
+          apply(prepare())
+        } catch (error) {
+          owner.stop()
+          Trace.write(
+            `Jolt native binding failed: ${String(error)}`,
+            Trace.categories.Error,
+            Trace.messageType.error,
+          )
+        }
+      })
+      apply(initial)
+    } catch (error) {
+      owner.stop()
+      throw error
+    }
+    return owner.stop
+  }
+  stop() {
+    for (const owner of [...this.owned]) owner.stop()
+  }
+  dispose() {
+    if (this.disposed) return
+    this.stop()
+    this.disposed = true
+    nativePropertyDriver().dispose(this.sink)
+    this.target = undefined
+  }
+}
+
+/** Reusable conformance checks for setup/command behavior; frame/lifecycle checks require a native app. */
+export function checkNativeProperty<T>(property: NativeProperty<T>, value: T) {
+  const previous = property.get()
+  try {
+    property.set(value)
+    return property.get()
+  } finally {
+    property.set(previous)
+  }
+}
+
+/** Uniform samples also capture nonlinear compound interpolation and pure binding maps. */
+function dense(track: Track): Track {
+  if (track.duration === 0) return track
+  const count = Math.max(1, Math.min(6000, Math.ceil((track.duration * 60) / 1000)))
+  const times = [
+    ...new Set([
+      ...track.times,
+      ...Array.from({ length: count + 1 }, (_, i) => i / count),
+    ]),
+  ].sort((a, b) => a - b)
+  return {
+    ...track,
+    times,
+    values: times.map((time) =>
+      time === 1
+        ? track.values.at(-1)!
+        : time === 0
+          ? track.values[0]!
+          : track.valueAt(track.delay + time * track.duration),
+    ),
+  }
+}

package/src/path.ts

@@ -2,6 +2,7 @@ import { parsePath, type MotionPath } from './svg-path.js'
 import { reducedMotion, timeScale } from './config.js'
 import { createTrack, instantTrack, type Track } from './track.js'
 import {
+  fitTransition,
   mergeTransitions,
   resolveTransition,
   type Transition,
@@ -37,7 +38,7 @@ export function preparePath(
   const geometry = parsePath(keyframes.path)
   const orient = keyframes.orient === true
   const transition = resolveTransition(
-    overrides.path ? mergeTransitions(base, overrides.path) : base,
+    fitTransition(overrides.path ? mergeTransitions(base, overrides.path) : base, 2),
     'opacity',
     2,
   )