P1: DeckBuilderPage shell + card pool

[Doberjohn]

The builder shell + card pool.

Scope

• DeckBuilderPage: two-pane on desktop (deck panel | card pool), bottom-sheet driven on mobile.
• Card pool reuses BrowseCardGrid (virtualized) + the shared filter groups (FilterDialog drawer/modal, ink/cost/inkwell/type, SortSelect, search).
• Tap a CardTile to add to the deck; open card details via CardModalContext.

Watch: inline-style tokens from theme.ts; no backdrop-filter: blur (WebKit E2E trap). Story + E2E for the shell.

Part of #451 · Deck Builder & Engine Score milestone.

[Doberjohn]

Implemented in aea298a (branch claude/inkweave-deck-builder-af3e5b, local/unpushed). PLAN Phase-1: the builder shell + card-pool half (items ~17-19).

Shipped: desktop two-pane builder shell over DeckProvider + calculateDeckStats.

• New features/deck/components/: PoolCardTile (CardTile + an overlay + add button + qty pip; the + is a sibling, not a child, of CardTile's own <button>), DeckPoolGrid (VirtuosoGrid, full Core pool, no 204 cap), DeckCardRow ([- qty +] / x remove, disable + at 4), DeckPanel (inline-editable name, n/60 badge, legality/progress bar), plus the pure getPoolTileState guardrail (off-ink / at-4).
• New features/deck/hooks/useDeckPoolFilters — a LOCAL (non-URL) mirror of useFilterParams (same return shape) so BrowseToolbar/FilterDialog embed verbatim without touching the deck URL; plus applyPoolFilters (same search->filter->sort pipeline as BrowsePage).
• DeckBuilderPage rewritten: two-pane desktop; mobile shows a "desktop-only for now" notice.

Design/scope (user-approved):

• Accepted as the functional PoC; a dedicated VISUAL design pass follows (greenfield — recon found no builder mockup).
• Mobile builder deferred; advisor panel deferred to P1: DeckQualityScore display + DeckAdvisorPanel #472.
• Disabled-+ reason wording is the user's.

Follow-up: #475 — Christopher Robin - Hunny Sage ink exemption (the builder currently wrongly dims off-ink Hunny cards).

Verified: 17 unit tests (getPoolTileState gating, useDeckPoolFilters + applyPoolFilters, DeckCardRow enforcement) + 4 stories; tsc -b + eslint + check:stories + full pre-commit suite green.

[Doberjohn]

Pool-tile design pass shipped in 96508f6 (branch claude/inkweave-deck-builder-af3e5b, local/unpushed) — the visual-design follow-up to the #467 functional shell, done Storybook-first (bottom-up).

PoolCardTile rewritten to the approved HYBRID design:

• Overhanging control at the card's bottom edge: gold "+" (add) that morphs into a persistent count pill; hover / keyboard focus grows a red "−" / green "+" stepper. Off-ink / at-4 → dim + disable add (getPoolTileState). The tile is now a live quantity editor.
• Motion: handler-driven count pop (silent on virtualization scroll-in), width-transition stepper expand, background/border add→count morph. inkweave-qty-pop keyframe in index.css.
• Wiring: DeckPoolGrid onAdd → onIncrement/onDecrement; DeckBuilderPage wires both to setQuantity.
• .storybook/preview.tsx imports index.css (real app fonts in every story).
• 5 PoolCardTile tests; stories rewritten; scratch concept story deleted. tsc / eslint / check:stories / 89 deck tests green.

Adversarial review before commit caught + fixed 2 bugs jsdom can't reproduce: scroll-mount pop replay (→ handler-driven pop) and phantom-blur stepper collapse (→ separate hovered/focused state).

Deferred to the grid rung: overhang row-clearance tuning at scale + the green in-deck ring evaluation. Next rungs: DeckCardRow → DeckPanel → full page.

[Doberjohn]

Pool tile interaction refinement shipped in 744640c (design-review follow-up to the hybrid stepper 96508f6; tile is user-approved).

• Click the card body to add a copy (up to 4; off-ink / at-4 dimmed + inert). A small "i" (top-right) opens details. Gold add pill removed. Repeat clicks add another copy.
• Stepper − / + → inline SVG icons (font glyphs rendered low off the baseline; SVG centers exactly). Count 16px; stepper bottom: 15. Deck-panel empty-state copy fixed.
• 6 PoolCardTile tests updated for the new wiring; verified in-app. tsc / eslint / check:stories / 90 tests green.
• Carry-forward: DeckCardRow's − / + are still text glyphs → same SVG fix at the deck-panel rung.

[Doberjohn]

Implementation notes: DeckPanel + DeckCardRow transfer (9be8dbc)

The locked DeckRowConcepts.stories.tsx design is now live in the real builder. DeckBuilderPage needed almost no wiring, because DeckPanel's public prop contract never moved.

What was built

• QuantityStepper.tsx — one shared gold-pill stepper for the pool tile (size="md") and the deck row (size="sm"), driven by a single DIMS table so the two variants cannot drift. Pop animation is controlled/uncontrolled via a popping / onPopEnd pair and stays handler-driven, never key-remount, because VirtuosoGrid remounts pool tiles on scroll and a key-remount animation would replay on every scroll-in. No useEffect (React Compiler bans set-state-in-effect).
• CostGlyph.tsx — the cost rendered inside the inkable/uninkable symbol, one glyph instead of two, matching the filter-button treatment. 9+ collapses to a smaller font.
• DeckCardRow.tsx — cost glyph, thumbnail plus name, always-open stepper, trash remove. Hover glow uses the card's own INK_COLORS[card.ink].border with hex-alpha suffixes.
• DeckPanel.tsx — type-grouped rows (Songs split out of Actions via card.isSong, which is the reliable flag: the exported isSong() helper misses transformed cards because the loader moves the Song subtype off classifications onto a boolean), empty groups hidden, floating hover preview, deferred removal.
• previewGeometry.ts — pure module beside the component, following the poolTileState.ts precedent, with its own test.

Deviations from the concept

• Empty type groups are hidden, not shown with a "None yet" placeholder. Reversed with the user on seeing it live.
• The pool no longer disables off-ink cards. The 2-ink limit is now surfaced as a legality error instead. This required no new code: calculateDeckStats already produced the error and LegalitySummary already rendered it, but the pool made it unreachable. deckInks, offInk and MAX_INKS were deleted along with the block. The 4-copy cap remains a hard block on the tile.
• The hover preview is portaled to <body> rather than living in the panel. The panel scrolls and the pool clips, so an in-tree preview gets clipped. It carries pointer-events: none, without which it swallows the mousemove that spawned it and flicker-loops.

Carry-forward gotchas

1. Deferring a state mutation to transitionEnd needs a flush at every exit. The event never fires for an unmounted row, so navigating away mid-collapse left the card in the longer-lived DeckProvider and it reappeared next session (the P1: DeckContext + deckStorage + draft→cloud migration #465 class of bug). switchTab had a flush; unmount did not. Both now share flushLeaving(), which applies the same quantity-changed abort rule as finishRemove, so a mid-collapse re-increment keeps the card whichever way the collapse ends. Found by adversarial review; the suite was green throughout.
2. Math.max(floor, Math.min(v, ceiling)) returns the floor when ceiling < floor. Growing the preview from 230px to 340px made it cover its own anchor row (windows ~768-796px wide) and overflow short viewports (<~499px). previewGeometry() now derives the size from the gap actually available, so both invariants hold by construction and the tests assert relationships (left + width <= anchor.left) rather than pixels.
3. Pool ink filtering had to diverge from Browse. Browse's shared matchesInk is OR by design and pinned by loader.test.ts. The pool needs subset semantics, because a third ink is illegal, so the gate lives locally in applyPoolFilters. At exactly one ink selected it stays a contains-check, since the second ink slot is still open.
4. aria-label collision: the deck row's click target and the pool tile's info button both wanted View {name} details, and both render on /decks/new at once. The row is now View {name} synergies, which also names what actually opens.

Verification

eslint (0 errors), tsc -b, check:stories, 118 deck tests (up from 110), full suite 882 passing / 3 skipped. Verified live in Chrome: header mounted with exactly one h1 per page, peek measures 340x473 and clears its anchor row, row click opens the correct synergy modal, and with Amethyst + Ruby selected Peter Pan & Tinker Bell (Amethyst-Ruby) shows while both Amethyst-Sapphire cards are excluded. Zero console errors.

[Doberjohn]

Delivered and merged into the deck-builder integration branch via #480 (not yet in production / master). Closing as complete; it rides to production when deck-builder later merges to master.