@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/editor/use-floorplan-background-placement.ts

@@ -274,7 +274,9 @@ export function useFloorplanBackgroundPlacement({
         )
         const fenceGridBase = worldGridSnap(planPoint, fenceStep)
         const fenceLocked =
-          fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
+          event.altKey ||
+          fenceSnapped[0] !== fenceGridBase[0] ||
+          fenceSnapped[1] !== fenceGridBase[1]
         const snappedPoint = fenceLocked
           ? fenceSnapped
           : alignFloorplanDraftPoint(fenceSnapped, {

package/src/components/editor/views/plugins-view.tsx

@@ -30,6 +30,7 @@ import { openSidebarPanel } from '../../../lib/sidebar-panel'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { IconRefGlyph } from '../../ui/icon-ref'
+import { Badge } from '../../ui/primitives/badge'
 import { Button } from '../../ui/primitives/button'
 import { PLUGINS_VIEW_ID } from './use-editor-views'
 
@@ -101,14 +102,6 @@ function PluginIcon({ panel, size }: { panel: EditorHostPanel; size: 'md' | 'lg'
   )
 }
 
-function Badge({ label }: { label: string }) {
-  return (
-    <span className="rounded-[5px] border border-border px-1.5 py-px font-mono font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
-      {label}
-    </span>
-  )
-}
-
 function StatusLine({ entry, projectName }: { entry: PluginEntry; projectName?: string }) {
   return (
     <span className="flex min-w-0 items-center gap-1.5 text-muted-foreground text-xs">

package/src/components/editor/views/view-bar.test.tsx

@@ -0,0 +1,54 @@
+import { afterEach, expect, test } from 'bun:test'
+import { useViewer } from '@pascal-app/viewer'
+import { renderCurrentMarkup } from '../../../test-utils/render-current-markup'
+import { GroundModeToggle } from './view-bar'
+
+const saved = useViewer.getState()
+
+afterEach(() => {
+  useViewer.setState(saved, true)
+})
+
+test('over a level at grade the bar says nothing about the ground', () => {
+  useViewer.setState({ belowGrade: false })
+  expect(renderCurrentMarkup(<GroundModeToggle />)).toBe('')
+})
+
+test('over a level below grade the bar says the ground is veiled, the ground on Auto', () => {
+  useViewer.setState({ belowGrade: true, gradeStanding: 'below-grade', groundMode: 'auto' })
+  const bar = renderCurrentMarkup(<GroundModeToggle />)
+  expect(bar).toContain('Below grade · ground veiled')
+  expect(bar).toMatch(/aria-pressed="true"[^>]*>Auto</)
+})
+
+test('the person who keeps the ground solid is told so', () => {
+  useViewer.setState({ belowGrade: true, gradeStanding: 'below-grade', groundMode: 'solid' })
+  const bar = renderCurrentMarkup(<GroundModeToggle />)
+  expect(bar).toContain('Below grade · ground solid')
+  expect(bar).toMatch(/aria-pressed="true"[^>]*>Solid</)
+})
+
+test('a level only partly below grade is named as such, its ground veiled where the hill stands', () => {
+  useViewer.setState({
+    belowGrade: true,
+    gradeStanding: 'partly-below-grade',
+    groundWindowVeiled: true,
+    groundMode: 'auto',
+  })
+  expect(renderCurrentMarkup(<GroundModeToggle />)).toContain('Partly below grade · ground veiled')
+  // From the walk-out side nothing is in the way: the ground reads solid, the toggle stays.
+  useViewer.setState({ groundWindowVeiled: false })
+  expect(renderCurrentMarkup(<GroundModeToggle />)).toContain('Partly below grade · ground solid')
+})
+
+test("a hillside in the eye's way over a level at grade says only that the ground is veiled", () => {
+  useViewer.setState({
+    belowGrade: false,
+    gradeStanding: 'at-grade',
+    groundWindowVeiled: true,
+    groundMode: 'auto',
+  })
+  expect(renderCurrentMarkup(<GroundModeToggle />)).toContain('Ground veiled')
+  useViewer.setState({ groundMode: 'solid' })
+  expect(renderCurrentMarkup(<GroundModeToggle />)).toContain('Ground solid')
+})

package/src/components/editor/views/view-bar.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { ArrowLeftRight, Check, Columns2, MoreHorizontal, Pin, PinOff } from 'lucide-react'
-import { type ReactNode, useEffect } from 'react'
+import { type GroundMode, useViewer } from '@pascal-app/viewer'
+import { ArrowLeftRight, Check, Columns2, MoreHorizontal, Pin, PinOff, X } from 'lucide-react'
+import { type ReactNode, useEffect, useRef } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { type EditorViewDescriptor, isSceneView, isViewPinned } from '../../../lib/editor-views'
 import { cn } from '../../../lib/utils'
@@ -24,8 +25,9 @@ const GROUP = cn(
 )
 const SEGMENT =
   'flex items-center justify-center gap-1.5 px-2.5 font-medium text-xs transition-colors'
-const ACTIVE = 'bg-white/10 text-foreground'
-const IDLE = 'text-muted-foreground/70 hover:bg-white/8 hover:text-muted-foreground'
+const ACTIVE = 'bg-black/6 dark:bg-white/10 text-foreground'
+const IDLE =
+  'text-muted-foreground/70 hover:bg-black/5 dark:hover:bg-white/8 hover:text-muted-foreground'
 
 /** The views of one pane: its pinned views, the one it shows, and a menu with the rest. */
 export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?: string }) {
@@ -34,23 +36,139 @@ export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?:
   const pinnedViews = useEditor((s) => s.pinnedViews)
   const current = layout.panes[pane]
   const tabs = views.filter((view) => view.id === current || isViewPinned(view, pinnedViews))
+  const activeIndex = tabs.findIndex((view) => view.id === current)
+  const tabList = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const list = tabList.current
+    const tab = list?.children.item(activeIndex)
+    if (!list || !(tab instanceof HTMLElement)) return
+    const reveal = () => {
+      const bounds = list.getBoundingClientRect()
+      const target = tab.getBoundingClientRect()
+      if (target.right > bounds.right) list.scrollLeft += target.right - bounds.right
+      else if (target.left < bounds.left) list.scrollLeft -= bounds.left - target.left
+    }
+    reveal()
+    const observer = new ResizeObserver(reveal)
+    observer.observe(list)
+    observer.observe(tab)
+    return () => observer.disconnect()
+  }, [activeIndex])
 
   return (
-    <div className={cn(GROUP, className)} role="tablist">
-      {tabs.map((view) => (
+    <div className={cn(GROUP, 'min-w-0 shrink', className)}>
+      <div
+        aria-label={`Pane ${pane + 1} views`}
+        className="flex min-w-0 overflow-x-auto [scrollbar-width:none]"
+        role="tablist"
+        ref={tabList}
+      >
+        {tabs.map((view) => (
+          <div
+            className={cn('group flex shrink-0 items-center', view.id === current ? ACTIVE : IDLE)}
+            key={view.id}
+          >
+            <button
+              aria-selected={view.id === current}
+              className={cn(
+                SEGMENT,
+                'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                view.onClose && 'pr-1',
+              )}
+              onClick={() => useEditor.getState().setPaneView(pane, view.id)}
+              onKeyDown={(event) => {
+                if (event.key === 'Delete' && view.onClose) {
+                  event.preventDefault()
+                  view.onClose()
+                  return
+                }
+                const offset = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0
+                if (!offset && event.key !== 'Home' && event.key !== 'End') return
+                event.preventDefault()
+                const index = tabs.indexOf(view)
+                const target =
+                  event.key === 'Home'
+                    ? 0
+                    : event.key === 'End'
+                      ? tabs.length - 1
+                      : (index + offset + tabs.length) % tabs.length
+                const next = tabs[target]
+                if (next) {
+                  useEditor.getState().setPaneView(pane, next.id)
+                  const buttons = event.currentTarget
+                    .closest('[role="tablist"]')
+                    ?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+                  buttons?.[target]?.focus()
+                }
+              }}
+              tabIndex={view.id === current ? 0 : -1}
+              title={view.label}
+              role="tab"
+              type="button"
+            >
+              <IconRefGlyph icon={view.icon} size={14} />
+              <span className="max-w-36 truncate">{view.label}</span>
+            </button>
+            {view.onClose && (
+              <button
+                aria-label={`Close ${view.label}`}
+                className="mr-1 flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={view.onClose}
+                type="button"
+              >
+                <X className="size-3" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      <MoreViewsMenu current={current} pane={pane} views={views} />
+    </div>
+  )
+}
+
+const GROUND_MODES = [
+  { mode: 'auto', label: 'Auto', title: 'Veil the ground over a level below grade' },
+  { mode: 'solid', label: 'Solid', title: 'Keep the ground solid' },
+] as const satisfies ReadonlyArray<{ mode: GroundMode; label: string; title: string }>
+
+/**
+ * Over a level below grade the ground is veiled so its rooms show, and the bar says so: the
+ * person can keep the ground solid instead (Ground: Auto / Solid). The same word covers the
+ * ground window — a hillside in the eye's way, veiled only where it hides the house — over
+ * a level at grade or only partly below it.
+ */
+export function GroundModeToggle() {
+  const belowGrade = useViewer((s) => s.belowGrade)
+  const gradeStanding = useViewer((s) => s.gradeStanding)
+  const groundWindowVeiled = useViewer((s) => s.groundWindowVeiled)
+  const groundMode = useViewer((s) => s.groundMode)
+  if (!(belowGrade || groundWindowVeiled)) return null
+  const veiled =
+    groundMode === 'auto' &&
+    ((belowGrade && gradeStanding !== 'partly-below-grade') || groundWindowVeiled)
+  const ground = veiled ? 'veiled' : 'solid'
+  const label =
+    gradeStanding === 'partly-below-grade'
+      ? `Partly below grade · ground ${ground}`
+      : gradeStanding === 'below-grade'
+        ? `Below grade · ground ${ground}`
+        : `Ground ${ground}`
+  return (
+    <div aria-label="Ground" className={GROUP} role="group">
+      <span className="flex items-center px-2.5 text-muted-foreground text-xs">{label}</span>
+      {GROUND_MODES.map(({ mode, label, title }) => (
         <button
-          aria-selected={view.id === current}
-          className={cn(SEGMENT, view.id === current ? ACTIVE : IDLE)}
-          key={view.id}
-          onClick={() => useEditor.getState().setPaneView(pane, view.id)}
-          role="tab"
+          aria-pressed={groundMode === mode}
+          className={cn(SEGMENT, groundMode === mode ? ACTIVE : IDLE)}
+          key={mode}
+          onClick={() => useViewer.getState().setGroundMode(mode)}
+          title={title}
           type="button"
         >
-          <IconRefGlyph icon={view.icon} size={14} />
-          <span>{view.label}</span>
+          {label}
         </button>
       ))}
-      <MoreViewsMenu current={current} pane={pane} views={views} />
     </div>
   )
 }
@@ -109,6 +227,7 @@ export function ViewBarRow({ leading }: { leading?: ReactNode }) {
             style={{ left: `${left * 100}%`, width: `${(right - left) * 100}%` }}
           >
             <ViewTabs pane={pane} />
+            {isSceneView(layout.panes[pane]) && <GroundModeToggle />}
             {pane === 0 && leading}
             <span className="flex-1" />
             {isLast && !isMobile && <SplitControls />}
@@ -162,7 +281,11 @@ function MoreViewsMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button aria-label="More views" className={cn(SEGMENT, IDLE, 'px-2')} type="button">
+        <button
+          aria-label="More views"
+          className={cn(SEGMENT, IDLE, 'shrink-0 px-2')}
+          type="button"
+        >
           <MoreHorizontal className="h-3.5 w-3.5" />
         </button>
       </DropdownMenuTrigger>
@@ -179,12 +302,12 @@ function MoreViewsMenu({
               <IconRefGlyph icon={view.icon} size={16} />
               <span className="min-w-0 flex-1 truncate">{view.label}</span>
               {view.id === current && <Check className="h-3.5 w-3.5 text-muted-foreground" />}
-              {!isSceneView(view.id) && (
+              {!isSceneView(view.id) && !view.onClose && !view.alwaysPinned && (
                 <button
                   aria-label={pinned ? `Unpin ${view.label}` : `Pin ${view.label}`}
                   aria-pressed={pinned}
                   className={cn(
-                    'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-white/10',
+                    'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10',
                     pinned ? 'text-foreground' : 'text-muted-foreground/60',
                   )}
                   onClick={(event) => {

package/src/components/editor/wall-snap-beacon-layer.tsx

@@ -5,11 +5,10 @@ import {
   type AnyNodeId,
   getWallCurveFrameAt,
   getWallCurveLength,
-  getWallPlaneTop,
   getWallThickness,
+  getWallTop,
   isCurvedWall,
   resolveLevelId,
-  resolveWallTop,
   sceneRegistry,
   spatialGridManager,
   useScene,
@@ -159,8 +158,10 @@ function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
     undefined,
     wall.justification,
   )
-  const planeTop = getWallPlaneTop(wall, levelId, nodes as Record<string, AnyNode>)
-  return resolveWallTop(wall, planeTop, support.elevation) + WALL_TOP_HIGHLIGHT_LIFT
+  return (
+    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation) +
+    WALL_TOP_HIGHLIGHT_LIFT
+  )
 }
 
 function buildHighlightSegment(start: [number, number], end: [number, number]) {

package/src/components/editor-2d/floorplan-group-move.tsx

@@ -25,6 +25,7 @@ import { clientToPlan } from '../../lib/floorplan/plan-coords'
 import { isHistoryShortcut } from '../../lib/history'
 import { formatLinearMeasurement } from '../../lib/measurements'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { isTypingTarget } from '../../lib/typing-target'
 import useAlignmentGuides from '../../store/use-alignment-guides'
 import useEditor, {
   isAlignmentGuideActive,
@@ -368,6 +369,7 @@ export function startFloorplanGroupMove(
   // Escape arm (registered earlier on window in the bubble phase), which
   // would otherwise clear the multi-selection mid-cancel.
   const onKeyDown = (e: KeyboardEvent) => {
+    if (isTypingTarget(e.target)) return
     const key = e.key.toLowerCase()
     if ((key === 'r' || key === 't') && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
       // Armed but still under the drag threshold: engage first (exactly what
@@ -569,6 +571,7 @@ export function startFloorplanGroupRotate(event: {
 
   // Capture phase so Escape wins over the global `use-keyboard` arm.
   const onKeyDown = (e: KeyboardEvent) => {
+    if (isTypingTarget(e.target)) return
     if (e.key === 'Delete' || e.key === 'Backspace') {
       // Deleting mid-rotate: revert first, then let the global Delete arm run.
       cancel()

package/src/components/editor-2d/floorplan-registered-tool-layer.tsx

@@ -12,6 +12,7 @@ import {
   type FloorplanMode,
   isFloorplanToolAvailableInMode,
 } from '../../lib/floorplan/floorplan-mode'
+import { selectPlacedNode } from '../../lib/level-selection'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
 import useInteractionScope, { useReshapingNode } from '../../store/use-interaction-scope'
@@ -65,8 +66,7 @@ export function FloorplanRegisteredToolLayer() {
   const metricNotation = useViewer((state) => state.metricNotation)
   const sceneApi = useMemo(() => createSceneApi(useScene), [])
   const selectNode = useCallback(
-    (id: Parameters<FloorplanToolContext['selectNode']>[0]) =>
-      useViewer.getState().setSelection({ selectedIds: [id] }),
+    (id: Parameters<FloorplanToolContext['selectNode']>[0]) => selectPlacedNode(id),
     [],
   )
   const finishTool = useCallback(() => {

package/src/components/editor-2d/floorplan-registry-move-overlay.tsx

@@ -39,6 +39,7 @@ import {
 import { movementSfxStepKey } from '../../lib/sfx/movement-tick'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { surfaceAttachmentId } from '../../lib/surface-attachment'
+import { isTypingTarget } from '../../lib/typing-target'
 import { resolveAlignmentForFloorplanView } from '../../lib/world-grid-snap'
 import useAlignmentGuides from '../../store/use-alignment-guides'
 import useEditor, {
@@ -497,6 +498,7 @@ export function FloorplanRegistryMoveOverlay() {
       }
 
       const onKey = (event: KeyboardEvent) => {
+        if (isTypingTarget(event.target)) return
         // R flips a directional kind's facing mid-placement (door / window:
         // front ↔ back). The session records the flip and re-runs its last
         // apply so the 2D symbol updates immediately; kinds without a facing
@@ -516,10 +518,6 @@ export function FloorplanRegistryMoveOverlay() {
           if (event.metaKey || event.ctrlKey) return
           if (!(session.flipSide && hasMovedSinceStart && pointerOverFloorplan)) return
           if (event.repeat) return
-          const t = event.target as HTMLElement | null
-          if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) {
-            return
-          }
           event.preventDefault()
           event.stopImmediatePropagation()
           ownWrite(() => session.flipSide?.())
@@ -964,6 +962,7 @@ export function FloorplanRegistryMoveOverlay() {
     }
 
     const onKey = (event: KeyboardEvent) => {
+      if (isTypingTarget(event.target)) return
       if (event.key !== 'Escape' && !isHistoryShortcut(event)) return
       if (isHistoryShortcut(event)) {
         // ⌘Z mid-move cancels like Escape — keep it from reaching the

package/src/components/editor-2d/renderers/floorplan-dimension-edit-overlay.test.ts

@@ -126,7 +126,7 @@ describe('commitDimensionValue', () => {
     expect(applied).toEqual([])
     expect(updated).toHaveLength(1)
     expect(updated[0]?.id).toBe('dim_1' as AnyNodeId)
-    expect(typeof (updated[0]?.data as { textOverride?: unknown }).textOverride).toBe('string')
+    expect(typeof (updated[0]!.data as { textOverride?: unknown }).textOverride).toBe('string')
   })
 })
 

package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx

@@ -29,7 +29,14 @@ import {
   useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
-import { beginPerfAction, cancelPerfAction, commitPerfAction, useViewer } from '@pascal-app/viewer'
+import {
+  beginPerfAction,
+  cancelPerfAction,
+  commitPerfAction,
+  useRevealPlanActive,
+  useRevealWaiting,
+  useViewer,
+} from '@pascal-app/viewer'
 import {
   type ComponentProps,
   memo,
@@ -151,6 +158,7 @@ import {
   resolveFloorplanLabelAngle,
   updateSvgFloorplanLabelOrientations,
 } from './floorplan-label-angle'
+import { useFloorplanReveal } from './floorplan-reveal'
 
 /**
  * Registry-driven floor-plan layer.
@@ -2027,6 +2035,10 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   wallDimensionReference,
   visibilityRootId,
 }: FloorplanRegistryEntryProps): React.ReactElement | null {
+  // A node an agent just built is drawn on its construction-reveal turn, as in 3D.
+  const revealWaiting = useRevealWaiting(nodeId)
+  const revealActive = useRevealPlanActive(nodeId)
+  const entryRef = useRef<SVGGElement>(null)
   const selected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const highlighted = useViewer((state) => state.previewSelectedIds.includes(nodeId))
   const multiSelected = useViewer(
@@ -2046,7 +2058,14 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   const phase = useEditor((state) => state.phase)
   const hoverTargetId =
     phase === 'site' ? (resolveCanvasBuildingId(node, nodes) ?? selectionProxyId) : selectionProxyId
-  const hovered = useViewer((state) => state.hoveredId === hoverTargetId)
+  // What a chat chip points at (`pointedIds`) lights as a hover does, as it does in 3D: the node
+  // itself, or what a hover on it would light.
+  const hovered = useViewer(
+    (state) =>
+      state.hoveredId === hoverTargetId ||
+      state.pointedIds.includes(nodeId) ||
+      state.pointedIds.includes(hoverTargetId),
+  )
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const referencedAnnotationRole = useViewer((state) =>
     floorplanEntryReferencedAnnotationRole(node, nodes, new Set(state.selection.selectedIds)),
@@ -2215,7 +2234,8 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     visibleGeometry && suppressHandles && pass !== 'base'
       ? stripHandleChrome(visibleGeometry)
       : visibleGeometry
-  if (!geometry) return null
+  useFloorplanReveal(nodeId, entryRef, cacheEntry, revealWaiting, revealActive)
+  if (revealWaiting || !geometry) return null
 
   const entryClick = isMarqueeSelectionActive ? undefined : onClickStop
   const entryPointerDown = isMarqueeSelectionActive ? undefined : handlePointerDown
@@ -2224,6 +2244,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     <g
       className="floorplan-registry-entry"
       data-node-id={nodeId}
+      ref={entryRef}
       onClick={entryClick}
       onPointerDown={entryPointerDown}
       onPointerEnter={handlePointerEnter}
@@ -2669,6 +2690,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
       }
       case 'endpoint-handle': {
         if (!palette) return <></>
+        const endpointUnitsPerPixel = g.screenSized ? unitsPerPixel : handleUnitsPerPixel
         const handleId = makeHandleId(nodeId, g.payload)
         const doubleClickAffordance = floorplanHandleDoubleClickAffordance(g)
         const isHovered = hoveredHandleId === handleId
@@ -2694,10 +2716,10 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
             : palette.endpointHandleFill
         const outerRadius =
           (isActive ? ENDPOINT_HANDLE_ACTIVE_RADIUS_PX : ENDPOINT_HANDLE_SELECTED_RADIUS_PX) *
-          handleUnitsPerPixel
+          endpointUnitsPerPixel
         const dotRadius =
           (isActive ? ENDPOINT_HANDLE_ACTIVE_DOT_RADIUS_PX : ENDPOINT_HANDLE_DOT_RADIUS_PX) *
-          handleUnitsPerPixel
+          endpointUnitsPerPixel
         return (
           <g
             key={keyHint}
@@ -2713,7 +2735,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
               r={outerRadius}
               stroke={hoverStroke}
               strokeOpacity={isActive ? 0.24 : 0.16}
-              strokeWidth={ENDPOINT_HOVER_GLOW_STROKE_WIDTH_PX * handleUnitsPerPixel}
+              strokeWidth={ENDPOINT_HOVER_GLOW_STROKE_WIDTH_PX * endpointUnitsPerPixel}
               style={{ opacity: isHovered || isActive ? 1 : 0, transition: HOVER_TRANSITION }}
               vectorEffect="non-scaling-stroke"
             />
@@ -2725,7 +2747,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
               r={outerRadius}
               stroke={hoverStroke}
               strokeOpacity={isActive ? 0.72 : 0.52}
-              strokeWidth={ENDPOINT_HOVER_RING_STROKE_WIDTH_PX * handleUnitsPerPixel}
+              strokeWidth={ENDPOINT_HOVER_RING_STROKE_WIDTH_PX * endpointUnitsPerPixel}
               style={{ opacity: isHovered || isActive ? 1 : 0, transition: HOVER_TRANSITION }}
               vectorEffect="non-scaling-stroke"
             />