@onlynative/inertia-svg 0.0.1-alpha.3

package/src/MotionPath.tsx

@@ -0,0 +1,340 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { Path, type PathProps } from 'react-native-svg'
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated'
+import {
+  resolveTransition,
+  useShouldReduceMotion,
+  type TransitionConfig,
+} from '@onlynative/inertia'
+import {
+  diffTemplate,
+  flattenParams,
+  parsePathD,
+  serializePath,
+  templateOf,
+  type PathTemplate,
+} from './path'
+import type {
+  PathAnimate,
+  PathPerPropertyTransition,
+  PathTransition,
+} from './types'
+
+const AnimatedPath = Animated.createAnimatedComponent(Path)
+
+const NO_ANIMATION: TransitionConfig = { type: 'no-animation' }
+
+function pickTransition(
+  per: PathTransition | undefined,
+  key: keyof PathPerPropertyTransition,
+): TransitionConfig | undefined {
+  if (!per) return undefined
+  if ('type' in per) return per as TransitionConfig
+  return (per as PathPerPropertyTransition)[key]
+}
+
+export interface MotionPathProps extends Omit<
+  PathProps,
+  | 'd'
+  | 'fill'
+  | 'stroke'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+  | 'fillOpacity'
+  | 'opacity'
+  | 'strokeDashoffset'
+> {
+  /**
+   * Initial path data. **The command sequence is locked at first render** —
+   * every target `d` passed via `animate` / `initial` must produce the same
+   * command letters in the same order after implicit-repeat expansion. To
+   * morph between structurally different paths, remount with a new `key`.
+   */
+  d: string
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+  strokeOpacity?: number
+  fillOpacity?: number
+  opacity?: number
+  strokeDashoffset?: number
+  /**
+   * Initial frame override. When present, the component mounts displaying
+   * these values, then animates to `animate` on the next effect. Pass `false`
+   * to skip the initial-mount animation entirely.
+   */
+  initial?: PathAnimate | false
+  /** Target animation state. */
+  animate?: PathAnimate
+  /**
+   * Transition config — either a single `TransitionConfig` applied to every
+   * animated dimension, or a per-property map. Per-property entries win over
+   * the top-level transition.
+   */
+  transition?: PathTransition
+}
+
+/**
+ * Animatable `<Path>` from `react-native-svg`. Wraps `Path` with declarative
+ * `initial` / `animate` / `transition` props.
+ *
+ * Animatable dimensions:
+ * - `d` — path morph via element-wise scalar interpolation. Source and target
+ *   must share the same command sequence (e.g. both `M L L L Z`).
+ * - `fill`, `stroke` — color strings, interpolated via Reanimated's native
+ *   color animation.
+ * - `strokeWidth`, `strokeOpacity`, `fillOpacity`, `opacity`,
+ *   `strokeDashoffset` — numeric, spring or timing-driven.
+ *
+ * Example:
+ * ```tsx
+ * <Svg viewBox="0 0 100 100">
+ *   <MotionPath
+ *     d="M 50 20 L 80 80 L 20 80 Z"
+ *     animate={{ d: "M 50 80 L 80 20 L 20 20 Z", fill: '#7c3aed' }}
+ *     transition={{ type: 'spring', tension: 140, friction: 12 }}
+ *     fill="#0ea5e9"
+ *   />
+ * </Svg>
+ * ```
+ */
+export function MotionPath(props: MotionPathProps) {
+  const {
+    d,
+    fill,
+    stroke,
+    strokeWidth,
+    strokeOpacity,
+    fillOpacity,
+    opacity,
+    strokeDashoffset,
+    initial,
+    animate,
+    transition,
+    ...rest
+  } = props
+
+  // Parse + freeze the source template at mount. The number of scalar params
+  // is locked here so the shared-value array allocated below has a stable
+  // length across renders.
+  const sourceRef = useRef<{
+    template: PathTemplate
+    params: number[]
+  } | null>(null)
+  if (sourceRef.current === null) {
+    const segments = parsePathD(d)
+    sourceRef.current = {
+      template: templateOf(segments),
+      params: flattenParams(segments),
+    }
+  }
+  const template = sourceRef.current.template
+
+  if (__DEV__) {
+    // Re-parse the current `d` prop and verify the template hasn't shifted.
+    // Catches the easy mistake of swapping a star for a hexagon without
+    // remounting via `key`.
+    const segments = parsePathD(d)
+    const live = templateOf(segments)
+    const err = diffTemplate(template, live)
+    if (err) {
+      throw new Error(
+        `[inertia-svg] d prop template changed after mount: ${err}\n` +
+          `If you need to swap to a structurally different path, remount with key={...}.`,
+      )
+    }
+  }
+
+  // `initial: false` → start at the animate target (no mount animation).
+  // `initial: {...}` → explicit seed values.
+  // `initial: undefined` → seed from the static props.
+  const seedSource = initial === false ? animate : (initial ?? undefined)
+
+  // Seed the path params. If `initial.d` is provided, parse it and verify
+  // it's template-compatible before seeding.
+  const seedParams: number[] = useMemo(() => {
+    if (!seedSource?.d) return sourceRef.current!.params
+    const segs = parsePathD(seedSource.d)
+    const t = templateOf(segs)
+    const err = diffTemplate(template, t)
+    if (err) {
+      if (__DEV__) {
+        throw new Error(`[inertia-svg] initial.d template mismatch: ${err}`)
+      }
+      return sourceRef.current!.params
+    }
+    return flattenParams(segs)
+    // template is stable for the component's lifetime; seedSource is the
+    // only meaningful input. We intentionally ignore `template` in deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [seedSource?.d])
+
+  // Loop-of-hooks per scalar param — safe because `template.size` is locked
+  // at mount via the source ref above.
+  const paramSvs: SharedValue<number>[] = []
+  for (let i = 0; i < template.size; i++) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    paramSvs.push(useSharedValue<number>(seedParams[i] ?? 0))
+  }
+
+  // Scalar property SVs. Strings (`fill`, `stroke`) use color seeds so
+  // Reanimated recognizes them as colors from frame 1.
+  const fillSv = useSharedValue<string>(
+    seedSource?.fill ?? fill ?? 'transparent',
+  )
+  const strokeSv = useSharedValue<string>(
+    seedSource?.stroke ?? stroke ?? 'transparent',
+  )
+  const strokeWidthSv = useSharedValue<number>(
+    seedSource?.strokeWidth ?? strokeWidth ?? 1,
+  )
+  const strokeOpacitySv = useSharedValue<number>(
+    seedSource?.strokeOpacity ?? strokeOpacity ?? 1,
+  )
+  const fillOpacitySv = useSharedValue<number>(
+    seedSource?.fillOpacity ?? fillOpacity ?? 1,
+  )
+  const opacitySv = useSharedValue<number>(seedSource?.opacity ?? opacity ?? 1)
+  const strokeDashoffsetSv = useSharedValue<number>(
+    seedSource?.strokeDashoffset ?? strokeDashoffset ?? 0,
+  )
+
+  const reduce = useShouldReduceMotion()
+
+  // Serialize scalar targets into stable keys so effects re-run on value
+  // change, not on every parent re-render (a fresh `animate` literal each
+  // render is the common case).
+  const animateD = animate?.d
+  const animateFill = animate?.fill
+  const animateStroke = animate?.stroke
+  const animateStrokeWidth = animate?.strokeWidth
+  const animateStrokeOpacity = animate?.strokeOpacity
+  const animateFillOpacity = animate?.fillOpacity
+  const animateOpacity = animate?.opacity
+  const animateStrokeDashoffset = animate?.strokeDashoffset
+
+  useEffect(() => {
+    if (animateD === undefined) return
+    const segments = parsePathD(animateD)
+    const t = templateOf(segments)
+    const err = diffTemplate(template, t)
+    if (err) {
+      if (__DEV__) {
+        throw new Error(`[inertia-svg] animate.d template mismatch: ${err}`)
+      }
+      return
+    }
+    const target = flattenParams(segments)
+    const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'd')
+    for (let i = 0; i < paramSvs.length; i++) {
+      paramSvs[i]!.value = resolveTransition(cfg, target[i] ?? 0) as number
+    }
+    // paramSvs / template are stable across renders by the locks above.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateD, reduce, transition])
+
+  useEffect(() => {
+    if (animateFill === undefined) return
+    const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'fill')
+    fillSv.value = resolveTransition(cfg, animateFill) as string
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateFill, reduce, transition])
+
+  useEffect(() => {
+    if (animateStroke === undefined) return
+    const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'stroke')
+    strokeSv.value = resolveTransition(cfg, animateStroke) as string
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateStroke, reduce, transition])
+
+  useEffect(() => {
+    if (animateStrokeWidth === undefined) return
+    const cfg = reduce
+      ? NO_ANIMATION
+      : pickTransition(transition, 'strokeWidth')
+    strokeWidthSv.value = resolveTransition(cfg, animateStrokeWidth) as number
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateStrokeWidth, reduce, transition])
+
+  useEffect(() => {
+    if (animateStrokeOpacity === undefined) return
+    const cfg = reduce
+      ? NO_ANIMATION
+      : pickTransition(transition, 'strokeOpacity')
+    strokeOpacitySv.value = resolveTransition(
+      cfg,
+      animateStrokeOpacity,
+    ) as number
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateStrokeOpacity, reduce, transition])
+
+  useEffect(() => {
+    if (animateFillOpacity === undefined) return
+    const cfg = reduce
+      ? NO_ANIMATION
+      : pickTransition(transition, 'fillOpacity')
+    fillOpacitySv.value = resolveTransition(cfg, animateFillOpacity) as number
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateFillOpacity, reduce, transition])
+
+  useEffect(() => {
+    if (animateOpacity === undefined) return
+    const cfg = reduce ? NO_ANIMATION : pickTransition(transition, 'opacity')
+    opacitySv.value = resolveTransition(cfg, animateOpacity) as number
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateOpacity, reduce, transition])
+
+  useEffect(() => {
+    if (animateStrokeDashoffset === undefined) return
+    const cfg = reduce
+      ? NO_ANIMATION
+      : pickTransition(transition, 'strokeDashoffset')
+    strokeDashoffsetSv.value = resolveTransition(
+      cfg,
+      animateStrokeDashoffset,
+    ) as number
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animateStrokeDashoffset, reduce, transition])
+
+  const animatedProps = useAnimatedProps(() => {
+    'worklet'
+    const params = new Array<number>(paramSvs.length)
+    for (let i = 0; i < paramSvs.length; i++) params[i] = paramSvs[i]!.value
+    return {
+      d: serializePath(template, params),
+      fill: fillSv.value,
+      stroke: strokeSv.value,
+      strokeWidth: strokeWidthSv.value,
+      strokeOpacity: strokeOpacitySv.value,
+      fillOpacity: fillOpacitySv.value,
+      opacity: opacitySv.value,
+      strokeDashoffset: strokeDashoffsetSv.value,
+    }
+  })
+
+  return (
+    <AnimatedPath
+      // `animatedProps` overrides every animated key each frame; the static
+      // props below are the first-render seeds so the path renders before the
+      // first effect tick. The cast sheds Reanimated's strict-prop constraint
+      // that the worklet's return type can't express — the runtime shape is
+      // the same.
+      animatedProps={animatedProps as never}
+      d={d}
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeOpacity={strokeOpacity}
+      fillOpacity={fillOpacity}
+      opacity={opacity}
+      strokeDashoffset={strokeDashoffset}
+      {...rest}
+    />
+  )
+}
+
+declare const __DEV__: boolean

package/src/index.ts

@@ -0,0 +1,47 @@
+/**
+ * `@onlynative/inertia-svg` — animatable SVG primitives for
+ * `@onlynative/inertia`.
+ *
+ * v0.2 surface:
+ * - `MotionPath` / `MotionSvg.Path` — animatable `<Path>` over
+ *   `react-native-svg`. Supports path morphing on the `d` attribute (source
+ *   and target must share the same command sequence) plus animatable
+ *   `fill`, `stroke`, `strokeWidth`, `strokeOpacity`, `fillOpacity`,
+ *   `opacity`, and `strokeDashoffset` with the same `initial` /
+ *   `animate` / `transition` shape as the core `Motion.*` primitives.
+ *
+ * Additional shape primitives (`Circle`, `Rect`, `Line`, `Ellipse`) land in
+ * a follow-up once the path morphing API is validated. Path normalization
+ * (resampling between structurally different paths) is out of scope for
+ * v0.2 — use structurally-compatible source/target paths and remount with
+ * `key={...}` to switch shape.
+ */
+export { MotionPath } from './MotionPath'
+export type { MotionPathProps } from './MotionPath'
+export type {
+  PathAnimate,
+  PathPerPropertyTransition,
+  PathStateShape,
+  PathTransition,
+} from './types'
+
+export {
+  parsePathD,
+  templateOf,
+  diffTemplate,
+  flattenParams,
+  serializePath,
+  type PathSegment,
+  type PathTemplate,
+} from './path'
+
+import { MotionPath } from './MotionPath'
+
+/**
+ * Namespace bundling every animatable SVG primitive. Use `MotionSvg.Path` for
+ * autocomplete-friendly grouping or import `MotionPath` directly — both
+ * point at the same component.
+ */
+export const MotionSvg = {
+  Path: MotionPath,
+} as const

package/src/path.ts

@@ -0,0 +1,254 @@
+/**
+ * SVG path-string utilities used by `MotionSvg.Path`. Everything here runs on
+ * the JS thread — paths are tokenized into a normalized command list at mount
+ * and when `animate.d` changes; the worklet only ever consumes flat number
+ * arrays + a frozen command template.
+ *
+ * Path morphing in v0.2 requires **structural compatibility**: the source and
+ * every target `d` must produce the same command sequence (same command
+ * letters, in the same order, after implicit-repeat expansion). Element-wise
+ * numeric interpolation is the entire morphing model — we do not resample
+ * paths or insert/remove commands. Same-shape morphs (e.g. a heart breathing,
+ * a chevron flipping, a check mark tracing in) are the supported use case.
+ */
+
+/** Arg count per SVG path command. `Z`/`z` close the subpath and take none. */
+const CMD_ARGS: Readonly<Record<string, number>> = {
+  M: 2,
+  m: 2,
+  L: 2,
+  l: 2,
+  H: 1,
+  h: 1,
+  V: 1,
+  v: 1,
+  C: 6,
+  c: 6,
+  S: 4,
+  s: 4,
+  Q: 4,
+  q: 4,
+  T: 2,
+  t: 2,
+  A: 7,
+  a: 7,
+  Z: 0,
+  z: 0,
+}
+
+/**
+ * After an explicit `M`/`m` the SVG spec says additional coordinate pairs are
+ * implicit `L`/`l` commands. Every other command repeats itself.
+ */
+const CMD_REPEAT: Readonly<Record<string, string>> = {
+  M: 'L',
+  m: 'l',
+}
+
+/**
+ * A single normalized path command after implicit-repeat expansion. The cmd
+ * letter is preserved (absolute vs relative — case is meaningful to the SVG
+ * renderer). `args` always has exactly `CMD_ARGS[cmd]` entries.
+ */
+export interface PathSegment {
+  cmd: string
+  args: number[]
+}
+
+const isDigit = (c: string): boolean => c >= '0' && c <= '9'
+
+/**
+ * Tokenize a path `d` string into a stream of (command-letter | number)
+ * tokens. Handles SVG's "compact" number forms — adjacent numbers separated
+ * only by sign (`1-2`) or decimal point (`.5.6`) — so author-written paths
+ * with mixed spacing all parse to the same tokens.
+ */
+function tokenize(d: string): Array<string | number> {
+  const out: Array<string | number> = []
+  const len = d.length
+  let i = 0
+  while (i < len) {
+    const c = d[i]!
+    // SVG path whitespace + comma separators.
+    if (c === ' ' || c === ',' || c === '\t' || c === '\n' || c === '\r') {
+      i++
+      continue
+    }
+    // Command letter — any ASCII letter not adjacent to a number context.
+    if ((c >= 'A' && c <= 'Z') || (c >= 'a' && c <= 'z')) {
+      if (!(c in CMD_ARGS)) {
+        throw new Error(
+          `[inertia-svg] unknown path command '${c}' at position ${i}`,
+        )
+      }
+      out.push(c)
+      i++
+      continue
+    }
+    // Number. Reaches here for digits, `.`, `+`, `-`.
+    const start = i
+    let hasDigit = false
+    let hasDot = false
+    if (c === '+' || c === '-') i++
+    while (i < len) {
+      const ch = d[i]!
+      if (isDigit(ch)) {
+        hasDigit = true
+        i++
+      } else if (ch === '.' && !hasDot) {
+        hasDot = true
+        i++
+      } else {
+        break
+      }
+    }
+    if (hasDigit && (d[i] === 'e' || d[i] === 'E')) {
+      i++
+      if (d[i] === '+' || d[i] === '-') i++
+      while (i < len && isDigit(d[i]!)) i++
+    }
+    if (!hasDigit) {
+      throw new Error(
+        `[inertia-svg] expected number at position ${start} in path '${d}', got '${c}'`,
+      )
+    }
+    out.push(Number(d.substring(start, i)))
+  }
+  return out
+}
+
+/**
+ * Parse a path `d` string into a flat list of normalized segments. Implicit
+ * repeats are expanded — `M 0 0 10 10 20 20` becomes three segments
+ * (`M 0 0`, `L 10 10`, `L 20 20`) so the segment list can be compared and
+ * interpolated 1:1 against another path.
+ */
+export function parsePathD(d: string): PathSegment[] {
+  const tokens = tokenize(d)
+  const segments: PathSegment[] = []
+  let i = 0
+  while (i < tokens.length) {
+    const t = tokens[i]
+    if (typeof t !== 'string') {
+      throw new Error(
+        `[inertia-svg] expected command letter at token ${i}, got number ${t} — paths must start with a command`,
+      )
+    }
+    const cmd = t
+    const argCount = CMD_ARGS[cmd]!
+    i++
+    if (argCount === 0) {
+      segments.push({ cmd, args: [] })
+      continue
+    }
+    // First explicit batch for this command.
+    const first: number[] = []
+    for (let j = 0; j < argCount; j++) {
+      const v = tokens[i++]
+      if (typeof v !== 'number') {
+        throw new Error(
+          `[inertia-svg] command '${cmd}' expected ${argCount} numbers, got '${v}' at token ${i - 1}`,
+        )
+      }
+      first.push(v)
+    }
+    segments.push({ cmd, args: first })
+    // Repeated batches consume numbers up to the next command letter, applying
+    // the implicit-repeat command (M → L, m → l, everything else → itself).
+    // `argCount === 0` is handled above with an early continue, so the loop
+    // body here always makes forward progress.
+    const repeatCmd = CMD_REPEAT[cmd] ?? cmd
+    while (i < tokens.length && typeof tokens[i] === 'number') {
+      const batch: number[] = []
+      for (let j = 0; j < argCount; j++) {
+        const v = tokens[i++]
+        if (typeof v !== 'number') {
+          throw new Error(
+            `[inertia-svg] command '${cmd}' (implicit repeat as '${repeatCmd}') expected ${argCount} numbers`,
+          )
+        }
+        batch.push(v)
+      }
+      segments.push({ cmd: repeatCmd, args: batch })
+    }
+  }
+  return segments
+}
+
+/**
+ * The frozen "shape" of a path — just command letters and arg widths. Two
+ * paths are morphable iff their templates are equal.
+ */
+export interface PathTemplate {
+  cmds: ReadonlyArray<string>
+  /** Flat width per segment, indexed parallel to `cmds`. */
+  widths: ReadonlyArray<number>
+  /** Total scalar count across all segments — `widths.reduce((a,b)=>a+b,0)`. */
+  size: number
+}
+
+export function templateOf(segments: ReadonlyArray<PathSegment>): PathTemplate {
+  const cmds = segments.map((s) => s.cmd)
+  const widths = segments.map((s) => s.args.length)
+  let size = 0
+  for (let i = 0; i < widths.length; i++) size += widths[i]!
+  return { cmds, widths, size }
+}
+
+/** Flatten a parsed segment list into a single number array (length === size). */
+export function flattenParams(segments: ReadonlyArray<PathSegment>): number[] {
+  const out: number[] = []
+  for (let i = 0; i < segments.length; i++) {
+    const args = segments[i]!.args
+    for (let j = 0; j < args.length; j++) out.push(args[j]!)
+  }
+  return out
+}
+
+/**
+ * Verify a target template matches the source. Returns `null` on match or a
+ * descriptive error string on mismatch — callers throw in `__DEV__` and
+ * silently snap to the target in production.
+ */
+export function diffTemplate(
+  source: PathTemplate,
+  target: PathTemplate,
+): string | null {
+  if (source.cmds.length !== target.cmds.length) {
+    return `command count differs: source has ${source.cmds.length} segments, target has ${target.cmds.length}. Paths must produce the same command sequence after implicit-repeat expansion.`
+  }
+  for (let i = 0; i < source.cmds.length; i++) {
+    if (source.cmds[i] !== target.cmds[i]) {
+      return `command at segment ${i} differs: source '${source.cmds[i]}' vs target '${target.cmds[i]}'. Command letters (including case — absolute vs relative) must match.`
+    }
+  }
+  return null
+}
+
+/**
+ * Build a path `d` string from a template + flat param array. Runs inside the
+ * worklet on the UI thread, so it must not capture any JS-thread closures or
+ * use Array.prototype helpers that allocate intermediates the Hermes runtime
+ * boxes into JS objects. Manual loops + `+=` string concat keep the worklet
+ * cheap.
+ *
+ * MUST be a worklet — call sites in `MotionPath` wrap it with `'worklet'` via
+ * `useAnimatedProps`.
+ */
+export function serializePath(
+  template: PathTemplate,
+  params: ReadonlyArray<number>,
+): string {
+  'worklet'
+  let out = ''
+  let p = 0
+  for (let i = 0; i < template.cmds.length; i++) {
+    out += template.cmds[i]
+    const w = template.widths[i]!
+    for (let j = 0; j < w; j++) {
+      out += ' '
+      out += params[p++]
+    }
+  }
+  return out
+}

package/src/types.ts

@@ -0,0 +1,42 @@
+import type { TransitionConfig } from '@onlynative/inertia'
+
+/**
+ * Animatable target snapshot for a `MotionSvg.Path`. Every field is optional
+ * — include only the dimensions you want to animate; the rest fall back to
+ * the static props on the component.
+ *
+ * `d` morphs the path geometry. The target path **must produce the same
+ * command sequence** as the source after implicit-repeat expansion (same
+ * letters in the same order, e.g. `M L L L Z`). Element-wise numeric
+ * interpolation is the morphing model — see `parsePathD` for the
+ * normalization rules.
+ */
+export interface PathAnimate {
+  d?: string
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+  strokeOpacity?: number
+  fillOpacity?: number
+  opacity?: number
+  strokeDashoffset?: number
+}
+
+/** The animatable dimensions of a `MotionSvg.Path`. */
+export type PathStateShape = {
+  [K in keyof Required<PathAnimate>]: PathAnimate[K]
+}
+
+/**
+ * Per-property transition map. Top-level entries on `transition` apply to all
+ * properties unless overridden by a per-key entry here.
+ */
+export type PathPerPropertyTransition = {
+  [K in keyof PathStateShape]?: TransitionConfig
+}
+
+/**
+ * Transition shape accepted by `MotionSvg.Path`. Either a single top-level
+ * transition applied to every animated dimension, or a per-property map.
+ */
+export type PathTransition = TransitionConfig | PathPerPropertyTransition