perf(block): virtualize large recipe grids

[ApocDev]

Problem

After compacting the server-function solve envelope, rendering is the next scaling limit for large production blocks.

On the current Primary Mall block:

• 57 recipe rows
• about 7,260 DOM nodes after render
• about 340 ms from client-side navigation to all recipe rows being present in a local dev browser
• solve transport is now about 137 KB on the wire, down from about 688 KB, so further transport trimming is no longer the dominant lever

The grid currently mounts every row and all item chips, hover triggers, tooltips, logistics tags, and drag/drop wrappers at once. This will continue to grow with mall and late-game blocks.

Scope

• Profile render/commit cost for large blocks independently from solve/server time.
• Virtualize or progressively mount recipe rows while preserving:
  • drag-and-drop ordering
  • row highlighting and scroll-to-row
  • editable counts and focus during live saves
  • group headers and composed sub-blocks
  • hover cards, context menus, and dialogs
  • responsive no-horizontal-overflow behavior
• Add a stable large-block performance regression fixture or threshold that does not depend on a user's project DB.

Keep solver inputs/results and persistence behavior unchanged.

[ApocDev]

Profiling on Primary Mall changes the recommended order of work:

• The page has 7,260 DOM nodes.
• 57 recipe rows account for 4,490 nodes (61.8%).
• 53 goal tiles account for another 1,534 nodes (21.1%).
• Together those two surfaces are about 83% of the DOM.
• Recipe rows are dynamically sized (78-322px) and participate in one dnd-kit SortableContext with group headers, focus scrolling, and join-group drop behavior. Full row virtualization would therefore be a relatively high-risk first step.

There is also a more immediate regression in MeasuredWrapGrid. It deep-clones every goal child to measure intrinsic widths, and its effect depends on the React children identity. On the initial Primary Mall navigation I measured 273 deep clone calls / about 7,975 transient cloned nodes across roughly five full measurement passes. An unrelated Flow/Table view toggle still caused 54 deep clones / 1,592 transient nodes even though the goal content was unchanged.

A browser-only experiment adding content-visibility:auto plus contain-intrinsic-size:auto 170px to recipe row wrappers reduced the measured table-mount interval from about 260ms to 195ms (~25%) while preserving the mounted DOM and dnd-kit registrations.

Recommended sequence:

1. Stop MeasuredWrapGrid from rerunning its full clone/measurement pass on unrelated parent renders (the MutationObserver already covers actual subtree changes), then reprofile.
2. Add content visibility/intrinsic sizing to recipe row wrappers and verify drag/drop, focus-to-recipe, group operations, dialogs, and responsive layouts.
3. If needed, progressively mount the entire recipe grid when it nears the nested block scroll viewport, retaining it once mounted and forcing it for focus requests. This preserves the complete sortable context.
4. Consider true variable-height row virtualization only if those lower-risk changes do not meet the target; it will need explicit integration for dnd-kit, nested scrolling, group headers, and focus.

No #154 implementation changes have been made yet.

[ApocDev]

Follow-up implementation removes MeasuredWrapGrid entirely. GoalCard now uses a normal CSS grid:

grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr))

Verification on Primary Mall:

• Fresh small-block -> Primary Mall navigation: 0 cloneNode calls / 0 transient cloned nodes (previously 273 / about 7,975).
• Desktop: three equal ~104.5px tracks.
• 390px viewport: three equal ~100.8px tracks.
• No horizontal document overflow at either size.
• Existing mutating goal E2E passed all three tests, including equal-width layout and persisted drag reorder.
• vp check passes.

This removes the goal-grid measurement hotspot. Recipe-row rendering remains the next independent area to evaluate for #154.

[ApocDev]

The MeasuredWrapGrid removal and CSS-only goal layout are now on main in commit 5ace705.