upgrade: migrate to Solid 2.0 and latest MotionOne

[davedbase]

This is a two-part migration:

Solid.js 1.x → 2.0-rc.3. Solid 2.0 removes use: directives, Context.Provider JSX, batch(), and solid-js/web/solid-js/store import paths, and changes effect/context semantics in ways that touched every file in src/:

• use:motion is now a ref factory: <div ref={motion(() => ({...}))} /> instead of <div use:motion={{...}} />.
• ParentContext/PresenceContext now use direct-call JSX (<Context value={...}>) instead of .Provider, and are read via a small tryUseContext helper since Solid 2.0's useContext now throws instead of returning undefined when there's no provider.
• Internal effects were restructured for Solid 2.0's split compute/apply model and its microtask-batched (not synchronous) scheduling.
• @solid-primitives/{props,refs,transition-group} bumped to their Solid-2-compatible next prereleases; babel-preset-solid pinned to 2.0.0-rc.2 via a pnpm.overrides entry (tsup-preset-solid's bundled esbuild-plugin-solid otherwise hardcodes the 1.x preset and would silently ship a broken build importing the now-removed solid-js/web path).

Motion engine: @motionone/dom → Motion 13.1.1. The old engine is unmaintained (frozen since June 2024) and its core primitives (createMotionState, createStyles, mountedStates) have no equivalent in modern Motion — that package now centers on a much heavier VisualElement/animationState system built for React. Rather than pull in that whole machinery, src/engine.ts is a new, lean hand-rolled adapter built on motion-dom/framer-motion/dom's stable primitives (animate(), hover(), press(), inView()), reproducing the same mount/update/exit lifecycle, variant resolution, and gesture composition the old engine provided — same public API, same easing prop name (translated internally to modern Motion's ease).

One confirmed behavior change: SSR/style output no longer uses @motionone/dom's CSS-custom-property trick for independent transforms (--motion-translateX: 100px; transform: translateX(var(--motion-translateX))); modern Motion composes a direct transform string instead (transform: translateX(100px)). Functionally equivalent, but byte-different output if anything was depending on those --motion-* variable names directly.

New: Storybook rig. .storybook/ + stories/ add 28 interactive stories (storybook-solidjs-vite@10.7.1 + the new @solidjs/vite-plugin, since the legacy vite-plugin-solid doesn't support Solid 2.0) covering every documented feature — including hover+press composition, inView, and nested variant inheritance, none of which had prior test coverage. Run with pnpm run storybook.

Notable fix

Found and fixed a real bug via the Storybook/real-browser verification pass (not caught by the jsdom test suite): a sibling Motion component can get constructed and briefly mount/unmount before its real mount, as a structural side effect of how <Show>/createSwitchTransition read reactive sources during a Presence exitBeforeEnter cycle. The engine's animation-cancellation state was previously a single shared closure per component, so that phantom cycle's stale cleanup could silently cancel the real mount's in-flight animation with no error — hanging exitBeforeEnter indefinitely. Fixed by scoping cleanup state to a per-mount-generation context in engine.ts, so a superseded mount cycle can never reach into a newer one.

Breaking changes

• Requires solid-js@^2.0.0-rc.0 (Solid 2.0 is currently in beta/RC).
• use:motion={{...}} → ref={motion(() => ({...}))} for the raw directive API (the <Motion>/<Presence> component API is unchanged).
• SSR/DOM style output for transforms changed format (see above) — not expected to be user-visible in normal usage, but worth a semver-major bump.