CS-8031 Spec Preview to use props drilling pattern to get cards

[richardhjtan]

Refer to https://linear.app/cardstack/issue/CS-8031/improve-auto-save-typing-in-spec

What is changing

• fix cursor lost focus after autosave due to component rerender (also recreated) with ember ID increments
• introduce props drilling pattern to fix the issue after the comment in Replace PrerenderedCardSearch with direct API calls to prevent component recreation during autosave #2225 (comment)

Before

Screen.Recording.2025-03-01.at.12.06.39.AM.mov

After

Screen.Recording.2025-02-28.at.11.51.48.PM.mov

[github-actions]

Host Test Results

    1 files  ±0      1 suites  ±0   23m 49s ⏱️ -41s
787 tests ±0  785 ✔️ ±0  2 💤 ±0  0 ❌ ±0 
792 runs  ±0  790 ✔️ ±0  2 💤 ±0  0 ❌ ±0 

Results for commit f01e3cf. ± Comparison against base commit 0c08ab6.

♻️ This comment has been updated with latest results.

[backspace]

I reran the host tests to hopefully remove the spurious Percy font diff 🤞🏻

[tintinthong]

Nice thanks!

[tintinthong]

I confirm this fixes auto-save

BUT

1. Why can't I create a spec and have it rendered?? I thought test wud capture this. EDIT: I think this happens unreliably. Chris has told me this happens but after implementing auto-save I found it to be reliable -- can look at it independently.

2. Also rendering the boxel input, I see. I think need test to check this

3. In scenarios where there are more than spec, choosing a dropdown card didn't re-render to new card