fix(preview): scope cursor styling per instance

[BillLeoutsakosvl346]

Summary

Scope workflow preview cursor styling to each mounted preview instance. Two previews with different pointer/grab settings no longer override each other through document-wide .preview-mode rules. Interactive-node pointer and pressed grab behavior remain.

Base and validation

Targets live staging at 316fea02ec. The local design diff check against that base completes with zero new findings. A focused two-instance test, app type check, Biome, and diff whitespace check pass.

Matched source-derived before/after captures cover light/dark at 16px and 20px root text, with node hover and pressed states. The old cross-instance cursor leak is visible in the baseline; the new instance cursors differ correctly, with zero non-cursor pixel differences. Evidence is stored outside the product checkout. Independent source review confirmed selector isolation and no global cleanup path.

Comparable full scans and both bot reviews are pending. Keep this PR unmerged until all required checks and review threads are complete.

Visual comparison

Representative matched captures from the local source-derived fixture. Before uses this PR’s base; after uses this PR’s head. Full light/dark and root-size matrices are retained outside the product branch.

Light · 16px root text · default

Before	After

Dark · 20px root text · default

Before	After

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Sep 24, 2026 7:18pm UTC

[cubic-dev-ai]

No issues found across 3 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge from this review; no outstanding finding or new actionable issue was identified.

Summary

The PR moves preview cursor rules into a stylesheet and sets cursor state on each preview container.

• Separately mounted previews can use different cursor settings without sharing a document-wide rule.
• The added test checks computed pane and node cursors across two previews and a cursor-mode swap.

_{Reviews (2) · Last reviewed commit: "test(preview): verify scoped cursor CSS ..."}

[BillLeoutsakosvl346]

@greptile review this PR

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

No issues found across 3 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[BillLeoutsakosvl346]

Cursor behavior review (corrected)

I removed the earlier before/after image table. It showed an isolated mock of two previews, but a static screenshot cannot show a CSS cursor. The images looked the same and did not help review this PR.

What changes: PreviewWorkflow previously inserted a <style> rule with a document-wide .preview-mode selector. If two previews were mounted with different cursorStyle values, the later rule could control both. The new CSS reads --preview-cursor from each preview container, so each keeps its own cursor. It also limits the grabbing state to previews configured for grabbing.

Representative source excerpts:

Before — generated inside each preview:

.preview-mode .react-flow__pane { cursor: ${cursorStyle} !important; }

After — each preview supplies its own value:

'--preview-cursor': cursorStyle,

.preview-mode .react-flow__pane,
.preview-mode .react-flow__selectionpane {
  cursor: var(--preview-cursor) !important;
}

Behavior check: With Preview A set to grab and Preview B set to pointer, the browser-style fixture produced:

Cursor	Before	After
A pane, idle	pointer (overridden by B)	grab
B pane, idle	pointer	pointer
A pane, active drag	grabbing	grabbing
B pane, active drag	grabbing	pointer

The PR also adds preview-workflow-cursor.test.tsx, which mounts two PreviewWorkflow instances and checks their independent cursor values and drag states. The rendered layout is intended to stay unchanged; a before/after screenshot would not demonstrate this fix.