feat(floor-monitor): Ph1 Access (BASE) — viewport zoom/pan/fit + low-zoom color mode

[MihaiCatalinVoicu]

Summary

Item 6 (Floor Monitor spatial cockpit) Ph1 Access — BASE tier, on the existing foundation (persisted drag-layout + WS sync + spaces + per-table data):

• Zoom: cursor-anchored wheel zoom (the layout point under the cursor stays stationary), −/+ buttons with live % readout, clamped 35%–200%.
• Pan: grab-drag on the empty stage background only — table move-drag keeps working. TableBox drag deltas divide by the live scale (a drag at 50% zoom tracks the cursor 1:1; the 20px drag-intent threshold scales too).
• Fit / 1:1: bounding box over the tables → scale + center; reset to identity.
• Low-zoom color mode (<65%): card text collapses to the big table name on the status-colored block — the floor reads as a status map at a glance.

No BE changes, no migration, no packaging gate (Ph1 is BASE per the checklist). Ph2 (full-screen = MAX gate + per-table modal + attention flags + KPI header), Ph3 (decor entity 🗄), Ph4 (min-spend/heat/replay) follow as separate slices.

Mainline Continuity

• Branch: feat/floor-monitor-ph1 off origin/main (6d69886b — post feat(private-circle): event engine close-loop — floor VIP badges + staff invite delivery #378/feat(fastops): 3#3 User Jail — kiosk exit-gate (D-37) + role-aware step-up (D-38) #379)
• Merge target: main

Route-Nav Continuity

No new routes/nav — existing /admin/restaurant/floorplan surface only.

Artifact Guard

No dist/ or build-info.json staged.

Test Plan

• FE build ✓8.04s · vitest 171 passed (171) · rules-of-hooks lint exit 0.
• Manual matrix covered by construction: zoom-at-cursor math keeps the anchor point fixed; pan ignores mousedown inside .floor-board__table; drag clamps (1100/760) unchanged in layout space.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added interactive zoom controls to the floor plan editor (zoom in/out, fit-to-view, and 1:1).
  • Implemented cursor-centered zoom and background panning for smoother navigation.
• Bug Fixes
  • Improved table dragging accuracy so movement remains consistent at different zoom levels.
  • Enhanced low-zoom readability by adjusting table label sizing and borders while hiding less important details.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 66a5df39-55cb-4f85-bfb5-1316cb633e3c

📥 Commits

Reviewing files that changed from the base of the PR and between 7a81296 and 149e2df.

📒 Files selected for processing (1)

• frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx

---

📝 Walkthrough

Walkthrough

This PR adds zoom and pan controls to the floor plan editor canvas. It introduces viewport state, cursor-centered zoom, background panning, fit-to-tables behavior, drag scaling under zoom, and supporting stage and zoom-bar styling.

Changes

Floor Plan Zoom/Pan Viewport

Layer / File(s)	Summary
Drag scaling under zoom frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx	TableBox receives getScale; drag deltas, drag threshold, and the effect dependency list are updated to use the live stage scale.
Viewport state and zoom/pan handlers frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx	Adds view state/refs, cursor-centered wheel zoom, background panning, fit-to-tables computation, and getStageScale for child synchronization.
Zoom UI controls and stage rendering frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx	Adds the zoom control bar, renders the transformed stage container, and passes getScale into each TableBox.
Zoom bar and stage CSS frontend/src/admin/pages/restaurant/FloorPlanEditor.css	Adds styling for the zoom bar, zoom buttons, panning cursor state, stage positioning, and low-zoom table presentation.

Estimated code review effort: 3 (Moderate) | ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title concisely summarizes the main change: floor-monitor viewport zoom, pan, fit, and low-zoom mode.
Description check	✅ Passed	The description follows the template well with summary, continuity, artifact guard, and test plan sections filled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/floor-monitor-ph1

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx`:
- Around line 848-869: The fitToTables useCallback is defined before
mergedTables is initialized, so its dependency reference hits the temporal dead
zone and can throw during render. Move fitToTables below the mergedTables
useMemo in FloorPlanEditor.jsx, and keep the dependency array using mergedTables
after that declaration so the callback is created only after the binding exists.
- Around line 818-822: The viewport zoom handler in onViewportWheel is relying
on a React synthetic wheel event, which cannot reliably prevent native
scrolling. Move the wheel handling to a native listener on viewportRef.current
with passive set to false, keep the existing zoomAt logic and preventDefault
call, and ensure the listener is registered and cleaned up in the
FloorPlanEditor component lifecycle so page scroll is blocked while zooming.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 2e367868-3f34-46ef-b751-4e04dc2c48d4

📥 Commits

Reviewing files that changed from the base of the PR and between 6d69886 and 7a81296.

📒 Files selected for processing (2)

• frontend/src/admin/pages/restaurant/FloorPlanEditor.css
• frontend/src/admin/pages/restaurant/FloorPlanEditor.jsx