fix: plain-click selection ring invisible -- Primer's [role="button"] focus reset beat the inner-element box-shadow

Live-reproduced, screenshot-confirmed: a plain click on a single card
selected it with zero visible change. Primer's global focus reset,
[role="button"]:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none } (specificity 0,4,0), beats every ring rule of the
shape :global(.react-flow__node.selected) .card (0,3,0) whenever the
clicked node's inner div is :focus without :focus-visible -- exactly
the state every mouse click leaves it in. The ring only ever survived
on non-focused members of a multi-selection and under keyboard
:focus-visible, which is why the prior computed-style e2e assertions
passed while the live gesture was broken. role="button"/tabIndex
pre-existed on main, so the collision itself is pre-existing, but the
new click model makes plain-click-select the PRIMARY gesture, so it
cannot ship this way.

Moves the ring from the inner element to the React Flow node WRAPPER
for all four node types, keyed off the type-scoped class React Flow
already stamps per nodeTypes key (.react-flow__node-<type>.selected)
-- the wrapper carries no role, so Primer's reset structurally cannot
match it, rather than out-specificity-ing a reset that could always
be bumped again. The matching border-radius moves with it so the ring
follows each shape. The sticky's border-color flip stays on the inner
element -- Primer's reset only touches box-shadow, so that half
already survived.

New e2e coverage pins the exact broken state: a plain click on a
single card, then the wrapper's own computed box-shadow while that
card still holds DOM focus (confirmed failing against the pre-fix
selector, passing after). Existing multi-select ring assertions
(atlas-select-group.spec.ts) now measure the wrapper instead of the
inner card, for the same reason.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd

Author: alicoding

frontend/e2e/atlas-gestures.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from './fixtures/server'
 import { groupCard, noteCard } from './fixtures/atlasCards'
 import { clickCorner, zoomAllTheWayOut } from './fixtures/atlasBoard'
+import { contextMenu } from './fixtures/contextMenu'
 
 // The click model (goal 0102's gesture table) + surface-scoped
 // shortcuts (goal 0071 slice): plain click selects/replaces, a second
@@ -42,6 +43,47 @@ test('plain click selects (replacing any prior selection); a second click on the
   await expect(overlay).not.toBeVisible()
 })
 
+test('a plain click leaves the selection ring visibly showing on the clicked card while it still holds DOM focus, for a note card and a sticky', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('link', { name: 'Atlas' }).click()
+  await expect(page.getByTestId('atlas-board')).toBeVisible()
+
+  // Regression: Primer's own [role="button"]:focus:not(:focus-visible)
+  // reset zeroes any box-shadow scoped to that inner role="button"
+  // element -- exactly the state a plain mouse click leaves the
+  // clicked card in (focused, but never :focus-visible from a pointer
+  // gesture), which made a single-card selection invisible. The ring
+  // must show on the wrapper, immune to that reset, while the card is
+  // still focused -- not just once focus moves elsewhere.
+  const getting = noteCard(page, 'Getting started')
+  await getting.click()
+  expect(await page.evaluate(() => document.activeElement?.getAttribute('data-testid'))).toBe('atlas-note-card')
+  const cardWrapper = selectedWrapper(page, getting)
+  await expect(cardWrapper).toHaveCount(1)
+  await expect.poll(() => cardWrapper.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+
+  // A sticky note's own, separately-declared (heavier) ring rule.
+  const board = page.getByTestId('atlas-board')
+  await zoomAllTheWayOut(page)
+  await page.keyboard.press('n')
+  await clickCorner(board, 'top-right')
+  const noteTA = page.getByTestId('atlas-sticky-textarea')
+  await noteTA.fill('ZzE2eStickyRing')
+  await noteTA.blur()
+  const sticky = page.locator('[data-testid="atlas-sticky-note"]')
+  await sticky.click()
+  expect(await page.evaluate(() => document.activeElement?.getAttribute('data-testid'))).toBe('atlas-sticky-note')
+  const stickyWrapper = page.locator('.react-flow__node.selected').filter({ has: sticky })
+  await expect(stickyWrapper).toHaveCount(1)
+  await expect.poll(() => stickyWrapper.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+
+  // Cleanup (testing.md's within-file discipline).
+  const menu = contextMenu(page)
+  await sticky.click({ button: 'right' })
+  await menu.getByText('Delete note', { exact: true }).click()
+  await expect(sticky).toHaveCount(0)
+})
+
 test('a real double-click reproduces the same select-then-commit outcome as two plain clicks, for both a leaf and a frame body', async ({ page }) => {
   await page.goto('/')
   await page.getByRole('link', { name: 'Atlas' }).click()

frontend/e2e/atlas-select-group.spec.ts

@@ -231,9 +231,13 @@ test('atlas shift-click select: toggle membership, group via member right-click,
 
     // Visible selection state (goal 0092 follow-up): both member nodes
     // carry a real, non-empty outline/ring, not just React Flow's own
-    // unstyled .selected class.
-    await expect.poll(() => cardA.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
-    await expect.poll(() => cardB.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+    // unstyled .selected class. Measured on the wrapper (the ring's
+    // own carrier), not the inner card -- Primer's [role="button"]
+    // focus reset can zero a box-shadow scoped to the inner element.
+    const cardAWrapper = selected.filter({ has: cardA })
+    const cardBWrapper = selected.filter({ has: cardB })
+    await expect.poll(() => cardAWrapper.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+    await expect.poll(() => cardBWrapper.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
 
     // The selection tray replaces the creation tray while 2+ cards are
     // selected: count label, Group (2+ cards only), Delete, both with

frontend/src/atlas/AtlasGroupNode.module.css

@@ -14,11 +14,14 @@
     cursor: pointer;
 }
 
-/* Multi-selection outline (owner-caught follow-up to goal 0092): same
-   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
-   Flow's own .selected on the node's outer wrapper -- never the
-   frame's own border-width, so a selected frame's size never shifts. */
-:global(.react-flow__node.selected) .frame {
+/* Selection ring: on the React Flow node WRAPPER (the type-scoped
+   class React Flow stamps per nodeTypes key), never an inner element
+   -- see AtlasNoteCardNode.module.css's own header comment for why
+   (Primer's [role="button"] focus reset would otherwise zero it right
+   after every mouse click). Never the frame's own border-width
+   either, so a selected frame's size never shifts. */
+:global(.react-flow__node-atlas-group.selected) {
+    border-radius: 14px;
     box-shadow:
         0 0 0 2px var(--borderColor-accent-emphasis),
         0 0 0 5px var(--bgColor-accent-muted);

frontend/src/atlas/AtlasNoteCardNode.module.css

@@ -18,11 +18,16 @@
     border-color: var(--borderColor-emphasis);
 }
 
-/* Multi-selection outline (owner-caught follow-up to goal 0092): keyed
-   off React Flow's own .selected class on the node's outer wrapper --
-   box-shadow, not border-width, so it never shifts this card's fixed
-   190x128 footprint or its own hit-testing box. */
-:global(.react-flow__node.selected) .card {
+/* Selection ring: on the React Flow node WRAPPER (the type-scoped
+   class React Flow stamps per nodeTypes key), never an inner element.
+   Primer's own [role="button"]:focus:not(:focus-visible) reset zeroes
+   any box-shadow on an inner role="button" element the instant a
+   plain click leaves it :focus without :focus-visible -- the normal
+   state right after every mouse click, which is exactly when this
+   ring needs to show. The wrapper carries no role, so that reset can
+   never reach it. box-shadow, not border-width, so it never shifts
+   this card's fixed 190x128 footprint or its own hit-testing box. */
+:global(.react-flow__node-atlas-note.selected) {
     border-radius: var(--borderRadius-medium);
     box-shadow:
         0 0 0 2px var(--borderColor-accent-emphasis),

frontend/src/atlas/AtlasRegionChipNode.module.css

@@ -15,10 +15,13 @@
     outline-offset: 1px;
 }
 
-/* Multi-selection outline (owner-caught follow-up to goal 0092): same
-   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
-   Flow's own .selected on the node's outer wrapper. */
-:global(.react-flow__node.selected) .chip {
+/* Selection ring: on the React Flow node WRAPPER (the type-scoped
+   class React Flow stamps per nodeTypes key), never an inner element
+   -- see AtlasNoteCardNode.module.css's own header comment for why
+   (Primer's [role="button"] focus reset would otherwise zero it right
+   after every mouse click). */
+:global(.react-flow__node-atlas-region-chip.selected) {
+    border-radius: 10px;
     box-shadow:
         0 0 0 2px var(--borderColor-accent-emphasis),
         0 0 0 5px var(--bgColor-accent-muted);

frontend/src/atlas/AtlasStickyNode.module.css

@@ -17,17 +17,24 @@
     cursor: text;
 }
 
-/* Multi-selection outline (owner-caught follow-up to goal 0092),
-   heavier than the card ring on purpose: the sticky's attention-tinted
-   ground swallows the 2px accent line cards get away with on white --
-   a wider ring plus the border flipping to the accent keeps a selected
-   note legible at board zoom. */
-:global(.react-flow__node.selected) .sticky {
-    border-color: var(--borderColor-accent-emphasis);
+/* Selection ring: heavier than the card ring on purpose -- the
+   sticky's attention-tinted ground swallows the 2px accent line cards
+   get away with on white. The ring lives on the React Flow node
+   WRAPPER (the type-scoped class React Flow stamps per nodeTypes
+   key), never an inner element -- see AtlasNoteCardNode.module.css's
+   own header comment for why (Primer's [role="button"] focus reset
+   would otherwise zero it right after every mouse click). The border
+   color flip stays on the inner element: Primer's reset only touches
+   box-shadow, so this half already survives there. */
+:global(.react-flow__node-atlas-sticky.selected) {
+    border-radius: var(--borderRadius-medium);
     box-shadow:
         0 0 0 3px var(--borderColor-accent-emphasis),
         0 0 0 7px var(--bgColor-accent-muted);
 }
+:global(.react-flow__node.selected) .sticky {
+    border-color: var(--borderColor-accent-emphasis);
+}
 
 /* A pointer click must not flash the webview's OS focus halo (the
    "blue flash" over the selection ring); keyboard focus keeps its