@rootnative/inertia-svg 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -6,6 +6,18 @@ This package ships in lockstep with `@rootnative/inertia` — version numbers tr
 
 ## [Unreleased]
 
+## [0.0.7] - 2026-08-14
+
+**Lockstep version bump** alongside `@rootnative/inertia@0.0.7` (`Motion.FlatList`, a virtualized animated scroller, and `gesture={{ pressed }}` responding to a mouse on web). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.7`.
+
+## [0.0.6] - 2026-08-08
+
+**Version bump alongside `@rootnative/inertia@0.0.6`, and this adapter carries half of that release's colour fix.** It seeded its own colour slots from the same unanimatable spelling, so the defect reached `MotionPath` independently of core. The `@rootnative/inertia` peer range moves to `>=0.0.6`.
+
+### Fixed
+
+- **A colour prop engaged only through `animate` now animates.** `fill`, `stroke`, and any key listed in `colorProps` seeded from `'transparent'` when neither a static prop nor `initial` supplied a value — and `'transparent'` is the one CSS colour name Reanimated's `isColor()` rejects, so the slot could not be animated away from. Under `type: 'timing'` the target still arrived when the duration elapsed, hiding it; under the default spring the animation never settled and the colour never appeared. Seeds are now `TRANSPARENT` (`'rgba(0, 0, 0, 0)'`), the same colour in a spelling Reanimated recognises. Affects `MotionPath`'s `fill` / `stroke` and every component built with `createMotionSvgComponent`. See the core changelog for the full mechanism.
+
 ## [0.0.5] - 2026-07-31
 
 **Lockstep version bump** alongside `@rootnative/inertia@0.0.5` (40 layout and text-metric keys join the `animate` surface, `AnimateStyle<C>` narrows to reject keys the runtime doesn't drive, and reduced motion is no longer bypassable by a sequence step's own `type`). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.5`.
@@ -45,7 +57,9 @@ _No git tag was cut for this release; the published artifact is on npm as [`@roo
 
 - `MotionPath` over `react-native-svg`. Animatable: `d` (element-wise scalar interpolation on structurally-compatible paths), `fill`, `stroke`, `strokeWidth`, opacities, `strokeDashoffset`. Source and target paths must share the same command sequence after implicit-repeat expansion; remount with `key` to switch shape.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.5...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.7...HEAD
+[0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7
+[0.0.6]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.6
 [0.0.5]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.5
 [0.0.4]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.4
 [0.0.3]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.3

package/README.md

@@ -1,3 +1,6 @@
+<!-- Absolute URL: npm does not resolve repository-relative image paths. -->
+<img src="https://raw.githubusercontent.com/rootnative/inertia/main/assets/brand/inertia-mark.png" alt="" width="88" height="88" />
+
 # @rootnative/inertia-svg
 
 [![npm](https://img.shields.io/npm/v/@rootnative/inertia-svg.svg)](https://www.npmjs.com/package/@rootnative/inertia-svg)

package/dist/index.d.mts

@@ -92,8 +92,8 @@ type MotionSvgComponentProps<P, NK extends string, CK extends string, AK extends
  *   interpolation needs a stable slot count — a target with a different
  *   length throws in dev and is ignored in production.
  * - Numeric keys engaged only via `animate` seed from `0`; color keys seed
- *   from `'transparent'`. Provide a static prop or `initial` value when the
- *   mount animation should start elsewhere.
+ *   from fully transparent black. Provide a static prop or `initial` value
+ *   when the mount animation should start elsewhere.
  *
  * @example An animatable `<Ellipse>`
  * ```tsx

package/dist/index.d.ts

@@ -92,8 +92,8 @@ type MotionSvgComponentProps<P, NK extends string, CK extends string, AK extends
  *   interpolation needs a stable slot count — a target with a different
  *   length throws in dev and is ignored in production.
  * - Numeric keys engaged only via `animate` seed from `0`; color keys seed
- *   from `'transparent'`. Provide a static prop or `initial` value when the
- *   mount animation should start elsewhere.
+ *   from fully transparent black. Provide a static prop or `initial` value
+ *   when the mount animation should start elsewhere.
  *
  * @example An animatable `<Ellipse>`
  * ```tsx

package/dist/index.js

@@ -236,11 +236,9 @@ If you need to swap to a structurally different path, remount with key={...}.`
   for (let i = 0; i < template.size; i++) {
     paramSvs.push(Animated.useSharedValue(seedParams[i] ?? 0));
   }
-  const fillSv = Animated.useSharedValue(
-    seedSource?.fill ?? fill ?? "transparent"
-  );
+  const fillSv = Animated.useSharedValue(seedSource?.fill ?? fill ?? inertia.TRANSPARENT);
   const strokeSv = Animated.useSharedValue(
-    seedSource?.stroke ?? stroke ?? "transparent"
+    seedSource?.stroke ?? stroke ?? inertia.TRANSPARENT
   );
   const strokeWidthSv = Animated.useSharedValue(
     seedSource?.strokeWidth ?? strokeWidth ?? 1
@@ -426,7 +424,7 @@ function createMotionSvgComponent(Component, config) {
     const colorSvs = {};
     for (const k of colorKeys) {
       colorSvs[k] = Animated.useSharedValue(
-        seed?.[k] ?? statics[k] ?? "transparent"
+        seed?.[k] ?? statics[k] ?? inertia.TRANSPARENT
       );
     }
     const arraySvs = {};

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useRef, useEffect, useMemo } from 'react';
 import { Path, Circle, Rect, Line } from 'react-native-svg';
 import Animated, { useSharedValue, useAnimatedProps } from 'react-native-reanimated';
-import { useShouldReduceMotion, useNamedTransitions, resolveTransition, resolveNamedTransition } from '@rootnative/inertia';
+import { useShouldReduceMotion, useNamedTransitions, TRANSPARENT, resolveTransition, resolveNamedTransition } from '@rootnative/inertia';
 import { jsx } from 'react/jsx-runtime';
 
 // src/MotionPath.tsx
@@ -230,11 +230,9 @@ If you need to swap to a structurally different path, remount with key={...}.`
   for (let i = 0; i < template.size; i++) {
     paramSvs.push(useSharedValue(seedParams[i] ?? 0));
   }
-  const fillSv = useSharedValue(
-    seedSource?.fill ?? fill ?? "transparent"
-  );
+  const fillSv = useSharedValue(seedSource?.fill ?? fill ?? TRANSPARENT);
   const strokeSv = useSharedValue(
-    seedSource?.stroke ?? stroke ?? "transparent"
+    seedSource?.stroke ?? stroke ?? TRANSPARENT
   );
   const strokeWidthSv = useSharedValue(
     seedSource?.strokeWidth ?? strokeWidth ?? 1
@@ -420,7 +418,7 @@ function createMotionSvgComponent(Component, config) {
     const colorSvs = {};
     for (const k of colorKeys) {
       colorSvs[k] = useSharedValue(
-        seed?.[k] ?? statics[k] ?? "transparent"
+        seed?.[k] ?? statics[k] ?? TRANSPARENT
       );
     }
     const arraySvs = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia-svg",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Animatable SVG primitives (path morphing, fill/stroke) for @rootnative/inertia, built on react-native-svg.",
   "license": "MIT",
   "author": "RootNative",
@@ -50,7 +50,7 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@rootnative/inertia": ">=0.0.5",
+    "@rootnative/inertia": ">=0.0.7",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-reanimated": ">=4.0.0",
@@ -69,7 +69,7 @@
     "react-test-renderer": "19.1.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@rootnative/inertia": "0.0.5"
+    "@rootnative/inertia": "0.0.7"
   },
   "publishConfig": {
     "access": "public"

package/src/MotionPath.tsx

@@ -7,6 +7,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {
   resolveTransition,
+  TRANSPARENT,
   useShouldReduceMotion,
   type TransitionConfig,
 } from '@rootnative/inertia'
@@ -182,12 +183,12 @@ export function MotionPath(props: MotionPathProps) {
   }
 
   // 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',
-  )
+  // Reanimated recognizes them as colors from frame 1 — which is exactly why
+  // the fallback is `TRANSPARENT` and not the `'transparent'` keyword, the one
+  // color name Reanimated's `isColor` rejects.
+  const fillSv = useSharedValue<string>(seedSource?.fill ?? fill ?? TRANSPARENT)
   const strokeSv = useSharedValue<string>(
-    seedSource?.stroke ?? stroke ?? 'transparent',
+    seedSource?.stroke ?? stroke ?? TRANSPARENT,
   )
   const strokeWidthSv = useSharedValue<number>(
     seedSource?.strokeWidth ?? strokeWidth ?? 1,

package/src/createMotionSvgComponent.tsx

@@ -7,6 +7,7 @@ import Animated, {
 import {
   resolveNamedTransition,
   resolveTransition,
+  TRANSPARENT,
   useNamedTransitions,
   useShouldReduceMotion,
   type NamedTransitions,
@@ -148,8 +149,8 @@ function pickTransition(
  *   interpolation needs a stable slot count — a target with a different
  *   length throws in dev and is ignored in production.
  * - Numeric keys engaged only via `animate` seed from `0`; color keys seed
- *   from `'transparent'`. Provide a static prop or `initial` value when the
- *   mount animation should start elsewhere.
+ *   from fully transparent black. Provide a static prop or `initial` value
+ *   when the mount animation should start elsewhere.
  *
  * @example An animatable `<Ellipse>`
  * ```tsx
@@ -260,9 +261,12 @@ export function createMotionSvgComponent<
     }
     const colorSvs: Record<string, SharedValue<string>> = {}
     for (const k of colorKeys) {
+      // `TRANSPARENT`, not the `'transparent'` keyword: Reanimated's color
+      // table maps the keyword to `undefined`, so a slot resting at it cannot
+      // be animated away from — under `withSpring` the animation never settles.
       // eslint-disable-next-line react-hooks/rules-of-hooks
       colorSvs[k] = useSharedValue<string>(
-        (seed?.[k] ?? statics[k] ?? 'transparent') as string,
+        (seed?.[k] ?? statics[k] ?? TRANSPARENT) as string,
       )
     }
     const arraySvs: Record<string, SharedValue<number>[]> = {}