@pascal-app/editor 1.0.7 → 1.1.0

package/src/components/tools/shared/placement-coordinate-input.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { usePascalI18n } from '@pascal-app/core'
+import { type PlacementTypingField, usePlacementTyping } from '../../../store/use-placement-typing'
+
+export type PlacementCoordinateInputProps = {
+  /** What each empty field stands for; defaults to the session's `fieldDefaults`. */
+  placeholders?: readonly string[]
+}
+
+/**
+ * The typed-entry HUD, one box per field of the session. It only displays the
+ * session: keys reach the active tool's own handler (`routePlacementTypingKey`),
+ * so the same HUD can sit in the 3D view and the plan at once without
+ * competing for focus. Clicking a field makes it the active one.
+ */
+export function PlacementCoordinateInput({ placeholders }: PlacementCoordinateInputProps) {
+  const i18n = usePascalI18n()
+  const isActive = usePlacementTyping((state) => state.isActive)
+  const labels = usePlacementTyping((state) => state.labels)
+  const fields = usePlacementTyping((state) => state.fields)
+  const fieldDefaults = usePlacementTyping((state) => state.fieldDefaults)
+  const activeField = usePlacementTyping((state) => state.activeField)
+
+  if (!isActive) return null
+
+  return (
+    <div
+      data-placement-coordinate-entry
+      onClick={(event) => event.stopPropagation()}
+      onPointerDown={(event) => event.stopPropagation()}
+      style={{
+        alignItems: 'center',
+        background: 'rgba(15, 23, 42, 0.94)',
+        border: '1px solid rgba(148, 163, 184, 0.55)',
+        borderRadius: 6,
+        boxShadow: '0 4px 14px rgba(15, 23, 42, 0.28)',
+        color: '#f8fafc',
+        display: 'flex',
+        gap: 6,
+        padding: '5px 7px',
+        pointerEvents: 'auto',
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {labels.map((descriptor, index) => {
+        const field = index as PlacementTypingField
+        const label = i18n._(descriptor)
+        const active = field === activeField
+        const value = fields[field]
+        return (
+          <div
+            data-placement-coordinate-field={descriptor.id}
+            key={descriptor.id}
+            onPointerDown={(event) => {
+              event.stopPropagation()
+              usePlacementTyping.getState().setActiveField(field)
+            }}
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+              fontSize: 9,
+              gap: 2,
+              textTransform: 'uppercase',
+            }}
+          >
+            <span style={{ color: active ? '#a5b4fc' : '#94a3b8' }}>{label}</span>
+            <span
+              aria-label={label}
+              role="status"
+              style={{
+                background: active ? '#eef2ff' : '#e2e8f0',
+                borderRadius: 3,
+                color: value ? '#0f172a' : '#64748b',
+                fontSize: 12,
+                fontWeight: 600,
+                minWidth: 76,
+                outline: active ? '2px solid #818cf8' : 'none',
+                padding: '3px 5px',
+                textAlign: 'right',
+                textTransform: 'none',
+              }}
+            >
+              {value || placeholders?.[field] || fieldDefaults[field] || '\u00a0'}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/tools/shared/segment-angle.ts

@@ -83,10 +83,6 @@ function getCurveTangentAtPoint(point: PlanPoint, segment: SegmentAngleLike): Pl
   return best.tangent
 }
 
-export function formatAngleRadians(angle: number) {
-  return `${Math.round((angle * 180) / Math.PI)}°`
-}
-
 export function getAngleBetweenVectors(first: PlanPoint, second: PlanPoint): number | null {
   const firstLength = Math.hypot(first[0], first[1])
   const secondLength = Math.hypot(second[0], second[1])

package/src/components/tools/tool-manager.tsx

@@ -41,7 +41,6 @@ import { FloorRegionControls3D } from '../editor/floor-region-controls'
 import { OpenWallEnds3DLayer } from '../editor/open-wall-ends-3d-layer'
 import { OpeningGuides3DLayer } from '../editor/opening-guides-3d-layer'
 import { WallSnapBeaconLayer } from '../editor/wall-snap-beacon-layer'
-import { ElevatorTool } from './elevator/elevator-tool'
 import { MoveTool } from './item/move-tool'
 import { WallPaintRegionTool } from './paint-region/wall-paint-region-tool'
 import { RegistryToolProvider } from './registry-tool-context'
@@ -305,21 +304,6 @@ export const ToolManager: React.FC = () => {
   const handlePlacedNodeSelected = (nodeId: AnyNodeId) => {
     setSelection({ selectedIds: [nodeId] })
   }
-  const handlePlacedElevatorSelected = (
-    nodeId: AnyNodeId,
-    elevatorBuildingId: BuildingNode['id'],
-  ) => {
-    // Preserve the active level. `setSelection`'s hierarchy guard nulls
-    // `levelId` whenever `buildingId` is passed without an explicit
-    // `levelId` — which deselected the current floor plan the moment an
-    // elevator was placed. Pass the current level through so the floor
-    // plan stays selected.
-    setSelection({
-      buildingId: elevatorBuildingId,
-      levelId: activeLevelId ?? null,
-      selectedIds: [nodeId],
-    })
-  }
 
   return (
     <RegistryToolProvider value={registryToolContext}>
@@ -463,14 +447,7 @@ export const ToolManager: React.FC = () => {
             <RegistryToolComponent />
           </Suspense>
         )}
-        {!movingNode && !useRegistryTool && showBuildTool && tool === 'elevator' && (
-          <ElevatorTool
-            buildingId={buildingId as BuildingNode['id'] | null}
-            levelId={activeLevelId ?? null}
-            onPlaced={handlePlacedElevatorSelected}
-          />
-        )}
-        {!movingNode && BuildToolComponent && tool !== 'elevator' ? <BuildToolComponent /> : null}
+        {!movingNode && BuildToolComponent ? <BuildToolComponent /> : null}
         {/* Figma-style alignment guides published by the move / placement
             tools above. Lives inside the building-local group so the
             building-local guide coords render at the right world position. */}

package/src/components/tools/wall/wall-typed-entry.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  formatWallDraftHeading,
+  resolveTypedWallEnd,
+  wallDraftHeadingDegrees,
+} from './wall-typed-entry'
+
+const metric = { bareUnit: 'm', system: 'metric' } as const
+
+function expectPoint(actual: [number, number] | null, expected: [number, number]) {
+  expect(actual).not.toBeNull()
+  expect(actual![0]).toBeCloseTo(expected[0], 10)
+  expect(actual![1]).toBeCloseTo(expected[1], 10)
+}
+
+describe('resolveTypedWallEnd — length only', () => {
+  test('keeps the pointer direction and replaces the distance', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [3, 4], ['1', ''], metric), [0.6, 0.8])
+    expectPoint(resolveTypedWallEnd([0, 0], [-30, -40], ['5', ''], metric), [-3, -4])
+  })
+
+  test('reads the whole field, not the length the pointer last showed', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [1, 0], ['12', ''], metric), [12, 0])
+  })
+
+  test('honours unit suffixes and the bare unit', () => {
+    expectPoint(resolveTypedWallEnd([1, 1], [11, 1], ['250cm', ''], metric), [3.5, 1])
+    expectPoint(
+      resolveTypedWallEnd([0, 0], [0, 9], ['2500', ''], { bareUnit: 'mm', system: 'metric' }),
+      [0, 2.5],
+    )
+    expectPoint(
+      resolveTypedWallEnd([0, 0], [9, 0], ["10'", ''], { bareUnit: 'in', system: 'imperial' }),
+      [3.048, 0],
+    )
+  })
+
+  test('has no endpoint without a usable length or a direction', () => {
+    expect(resolveTypedWallEnd([0, 0], [1, 0], ['', ''], metric)).toBeNull()
+    expect(resolveTypedWallEnd([0, 0], [1, 0], ['abc', ''], metric)).toBeNull()
+    expect(resolveTypedWallEnd([0, 0], [1, 0], ['0', ''], metric)).toBeNull()
+    expect(resolveTypedWallEnd([2, 2], [2, 2], ['5', ''], metric)).toBeNull()
+  })
+})
+
+describe('resolveTypedWallEnd — angle', () => {
+  test('angle only locks the heading; the pointer projection sets the length', () => {
+    // 90° runs along +Z; a pointer at (1, 3) projects to 3 m along it.
+    expectPoint(resolveTypedWallEnd([0, 0], [1, 3], ['', '90'], metric), [0, 3])
+    // (3, 4) projects to 7/√2 along 45°, landing 3.5 out on each axis.
+    expectPoint(resolveTypedWallEnd([1, 1], [4, 5], ['', '45'], metric), [4.5, 4.5])
+  })
+
+  test('angle only quantises the projected length to the step', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [0.2, 2.37], ['', '90'], metric, 0.5), [0, 2.5])
+  })
+
+  test('angle only never flips the wall behind its start', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [-4, 0.1], ['', '0'], metric), [0, 0])
+  })
+
+  test('length and angle fix the endpoint whatever the pointer does', () => {
+    expectPoint(resolveTypedWallEnd([2, 1], [-50, 80], ['4', '180'], metric), [-2, 1])
+    expectPoint(resolveTypedWallEnd([0, 0], [0, 0], ['2', '270'], metric), [0, -2])
+    expectPoint(resolveTypedWallEnd([0, 0], [5, 5], ['1', '-90'], metric), [0, -1])
+  })
+
+  test('accepts degree and radian suffixes', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [9, 9], ['2', '90°'], metric), [0, 2])
+    expectPoint(resolveTypedWallEnd([0, 0], [9, 9], ['2', `${Math.PI}rad`], metric), [-2, 0])
+  })
+
+  test('an unreadable angle leaves the direction to the pointer', () => {
+    expectPoint(resolveTypedWallEnd([0, 0], [0, 4], ['2', 'x'], metric), [0, 2])
+    expect(resolveTypedWallEnd([0, 0], [0, 4], ['', 'x'], metric)).toBeNull()
+  })
+})
+
+describe('wallDraftHeadingDegrees', () => {
+  test('measures from +X towards +Z in [0, 360)', () => {
+    expect(wallDraftHeadingDegrees([0, 0], [1, 0])).toBeCloseTo(0, 10)
+    expect(wallDraftHeadingDegrees([0, 0], [0, 1])).toBeCloseTo(90, 10)
+    expect(wallDraftHeadingDegrees([0, 0], [-1, 0])).toBeCloseTo(180, 10)
+    expect(wallDraftHeadingDegrees([0, 0], [0, -1])).toBeCloseTo(270, 10)
+    expect(wallDraftHeadingDegrees([1, 1], [1, 1])).toBeNull()
+  })
+
+  test('round-trips through a typed angle', () => {
+    const heading = wallDraftHeadingDegrees([0, 0], [-3, -4])!
+    expectPoint(resolveTypedWallEnd([0, 0], [0, 0], ['5', String(heading)], metric), [-3, -4])
+  })
+
+  test('labels the live heading in the same convention, wrapping 360° to 0°', () => {
+    expect(formatWallDraftHeading([0, 0], [0, 1])).toBe('90°')
+    expect(formatWallDraftHeading([0, 0], [1, -1])).toBe('315°')
+    expect(formatWallDraftHeading([0, 0], [1, -0.001])).toBe('0°')
+    expect(formatWallDraftHeading([0, 0], [0, 0])).toBe('')
+  })
+})

package/src/components/tools/wall/wall-typed-entry.ts

@@ -0,0 +1,70 @@
+import { formatAngleRadians } from '@pascal-app/core'
+import { type ParseMeasurementOptions, parseMeasurement } from '../../../lib/measurement-parser'
+import type { PlacementTypingValues } from '../../../store/use-placement-typing'
+import type { WallPlanPoint } from './wall-drafting'
+
+/**
+ * Heading of a wall draft in degrees, the way the 15° angle snap measures it:
+ * from the building's +X axis towards +Z (`atan2(dz, dx)`), in [0, 360).
+ * On an unrotated plan +Z points down the screen, so 90 runs straight down.
+ */
+export function wallDraftHeadingDegrees(start: WallPlanPoint, end: WallPlanPoint): number | null {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  if (Math.hypot(dx, dz) <= 1e-6) return null
+  const degrees = (Math.atan2(dz, dx) * 180) / Math.PI
+  return ((degrees % 360) + 360) % 360
+}
+
+/** The draft's live heading as the angle field's placeholder, e.g. `90°`. */
+export function formatWallDraftHeading(start: WallPlanPoint, end: WallPlanPoint): string {
+  const degrees = wallDraftHeadingDegrees(start, end)
+  if (degrees === null) return ''
+  return formatAngleRadians(((Math.round(degrees) % 360) * Math.PI) / 180)
+}
+
+/**
+ * The endpoint a typed wall draft commits to. Field 0 is the length, field 1
+ * the heading (see `wallDraftHeadingDegrees`); an empty field is left to the
+ * pointer:
+ * - length only: the pointer steers the direction, the length is exact;
+ * - angle only: the direction is locked, the pointer's projection onto it sets
+ *   the length (quantised to `lengthStep` when one is given);
+ * - both: the endpoint is fully determined and the pointer is ignored.
+ *
+ * Returns null when no field holds a usable value or the pointer gives no
+ * direction to follow, so the caller keeps the pointer's own endpoint.
+ */
+export function resolveTypedWallEnd(
+  start: WallPlanPoint,
+  pointer: WallPlanPoint,
+  fields: Readonly<PlacementTypingValues>,
+  lengthOptions: ParseMeasurementOptions,
+  lengthStep = 0,
+): WallPlanPoint | null {
+  const typedLength = fields[0].trim()
+    ? parseMeasurement(fields[0], { kind: 'length', unitId: 'm' }, lengthOptions)
+    : null
+  const length = typedLength !== null && typedLength > 0 ? typedLength : null
+  const typedAngle = fields[1].trim()
+    ? parseMeasurement(fields[1], { kind: 'angle', unitId: 'rad' }, { bareUnit: 'deg' })
+    : null
+
+  const dx = pointer[0] - start[0]
+  const dz = pointer[1] - start[1]
+  if (typedAngle === null) {
+    if (length === null) return null
+    const pointerLength = Math.hypot(dx, dz)
+    if (pointerLength <= 1e-6) return null
+    return [start[0] + (dx / pointerLength) * length, start[1] + (dz / pointerLength) * length]
+  }
+
+  const dirX = Math.cos(typedAngle)
+  const dirZ = Math.sin(typedAngle)
+  let distance = length
+  if (distance === null) {
+    const projected = Math.max(0, dx * dirX + dz * dirZ)
+    distance = lengthStep > 0 ? Math.round(projected / lengthStep) * lengthStep : projected
+  }
+  return [start[0] + dirX * distance, start[1] + dirZ * distance]
+}

package/src/components/ui/controls/slider-control.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { formatNumber, parseLocalizedNumber, useLocale, useScene } from '@pascal-app/core'
+import { formatNumber, parseLocalizedNumber, useLocale, useScene, usePascalI18n } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
@@ -71,6 +71,7 @@ export function SliderControl({
   restoreOnCommit = true,
   mixed = false,
 }: SliderControlProps) {
+  const i18n = usePascalI18n()
   const locale = useLocale()
   // Values and bounds stay in meters; gestures and input use the displayed unit.
   const { isImperial, displayUnit, parseUnit, precision, step, toDisplay, toStored } =
@@ -260,6 +261,12 @@ export function SliderControl({
     [],
   )
 
+  useEffect(() => {
+    const cancelOnBlur = () => { if (dragRef.current || editingRef.current) cancelEdit() }
+    window.addEventListener('blur', cancelOnBlur)
+    return () => window.removeEventListener('blur', cancelOnBlur)
+  }, [cancelEdit])
+
   useEffect(() => {
     if (!isDragging) return
     const escape = (event: KeyboardEvent) => {
@@ -392,6 +399,7 @@ export function SliderControl({
               </span>
             )}
             <input
+              aria-label={typeof label === 'string' ? label : undefined}
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
               onBlur={submitValue}
@@ -418,14 +426,18 @@ export function SliderControl({
             )}
           </>
         ) : mixed && !isDragging ? (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-muted-foreground transition-colors hover:text-foreground"
             onClick={handleValueClick}
           >
-            <span className="font-mono tracking-tight">Mixed</span>
-          </div>
+            <span className="font-mono tracking-tight">{i18n._({ id: 'editor.controls.sliderControl.mixed', message: 'Mixed' })}</span>
+          </button>
         ) : (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-foreground/60 transition-colors hover:text-foreground"
             onClick={handleValueClick}
           >
@@ -433,7 +445,7 @@ export function SliderControl({
               {formatDisplay(displayValue)}
             </span>
             {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
-          </div>
+          </button>
         )}
       </div>
     </div>

package/src/components/ui/controls/tool-options-panel.tsx

@@ -34,50 +34,80 @@ function ToolOptionRow({
   return (
     <div className="flex flex-col gap-2">
       <div className="px-0.5 font-medium text-muted-foreground text-xs">{option.label}</div>
-      <div
-        className="grid gap-1.5"
-        style={{
-          gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
-        }}
-      >
-        {option.choices.map((choice) => {
-          const selected = active && choice.value === value
-          const thumbnail = getChoiceThumbnail?.(option, choice.value)
-          return (
-            <button
-              aria-pressed={selected}
-              className={cn(
-                'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
-                selected
-                  ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
-                  : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
-              )}
-              key={choice.value}
-              onClick={() => {
-                triggerSFX('sfx:menu-click')
-                option.set(choice.value)
-                onSelect?.(option, choice.value)
-              }}
-              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
-              type="button"
-            >
-              {thumbnail && (
-                <Image
-                  alt=""
-                  className={cn(
-                    'mx-auto mb-1 size-14 object-contain',
-                    !selected && 'opacity-70 grayscale',
-                  )}
-                  height={56}
-                  src={thumbnail}
-                  width={56}
-                />
-              )}
-              {choice.label}
-            </button>
-          )
-        })}
-      </div>
+      {option.input ? (
+        <label className="flex items-center gap-2 rounded-lg border border-border px-2 py-1.5">
+          <input
+            key={value}
+            aria-label={option.label}
+            className="min-w-0 flex-1 bg-transparent text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            type="number"
+            defaultValue={value}
+            min={option.input.min}
+            max={option.input.max}
+            step={option.input.step ?? 'any'}
+            onBlur={(event) => {
+              const next = event.target.valueAsNumber
+              if (
+                Number.isFinite(next) &&
+                !event.target.validity.rangeUnderflow &&
+                !event.target.validity.rangeOverflow
+              ) {
+                option.set(String(next))
+                onSelect?.(option, String(next))
+              } else event.target.value = value
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') event.currentTarget.blur()
+            }}
+          />
+          <span className="text-xs text-muted-foreground">{option.input.unit}</span>
+        </label>
+      ) : (
+        <div
+          className="grid gap-1.5"
+          style={{
+            gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
+          }}
+        >
+          {option.choices.map((choice) => {
+            const selected = active && choice.value === value
+            const thumbnail = getChoiceThumbnail?.(option, choice.value)
+            return (
+              <button
+                aria-pressed={selected}
+                className={cn(
+                  'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
+                  selected
+                    ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
+                    : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
+                )}
+                key={choice.value}
+                onClick={() => {
+                  triggerSFX('sfx:menu-click')
+                  option.set(choice.value)
+                  onSelect?.(option, choice.value)
+                }}
+                onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                type="button"
+              >
+                {thumbnail && (
+                  <Image
+                    alt=""
+                    className={cn(
+                      'mx-auto mb-1 size-14 object-contain',
+                      !selected && 'opacity-70 grayscale',
+                    )}
+                    height={56}
+                    src={thumbnail}
+                    width={56}
+                  />
+                )}
+                {choice.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
       {activeChoice && activeChoice.description ? (
         <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
           {activeChoice.description}

package/src/components/ui/helpers/helper-manager.test.tsx

@@ -1,11 +1,18 @@
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
+import {
+  AXIS_MOVE_DRAG_LABEL,
+  PATH_POINT_DRAG_LABEL,
+  ROTATE_HANDLE_DRAG_LABEL,
+} from '../../../lib/contextual-help'
 import { SELECT_HUD_TITLE, toolHudTitle } from '../../../lib/hud-title'
 import { snapContextOf } from '../../../lib/snapping-mode'
 import { cornerHintRows } from '../../../store/use-corner-snap-hint'
 import { TooltipProvider } from '../primitives/tooltip'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 import {
+  mepHandleGesture,
+  mepHandleGestureHints,
   mezzanineHints,
   openingHints,
   ROOM_DIVIDE_HINTS,
@@ -128,6 +135,52 @@ describe('HUD header', () => {
   })
 })
 
+describe('MEP handle HUD', () => {
+  const english = (hints: ReturnType<typeof mepHandleGestureHints>) =>
+    hints.map((hint) => (typeof hint.label === 'string' ? hint.label : hint.label.message))
+  const drag = (label: string) => ({ nodeId: 'pipe_a', label })
+
+  test('names a run point drag and an axis slide, and leaves rotate and resize to their own HUDs', () => {
+    expect(mepHandleGesture(drag(PATH_POINT_DRAG_LABEL))).toBe('edit-path')
+    expect(mepHandleGesture(drag(AXIS_MOVE_DRAG_LABEL))).toBe('move')
+    expect(mepHandleGesture(drag(ROTATE_HANDLE_DRAG_LABEL))).toBeNull()
+    expect(mepHandleGesture(drag('resize-diameter'))).toBeNull()
+    expect(mepHandleGesture(null)).toBeNull()
+  })
+
+  test('keeps "Alt: Detach the joint" on screen for the whole run point drag', () => {
+    const idle = mepHandleGestureHints('edit-path', false)
+    expect(english(idle)).toEqual(['Detach the joint', 'Cancel'])
+    expect(idle.map((hint) => hint.keys)).toEqual([['Alt'], ['Esc']])
+    expect(idle[0]?.active).toBe(false)
+    expect(mepHandleGestureHints('edit-path', true)[0]?.active).toBe(true)
+    expect(english(mepHandleGestureHints('move', false))).toEqual(['Cancel'])
+
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <ContextualHelperPanel hints={idle} snapContext="polygon" />
+      </TooltipProvider>,
+    )
+    for (const label of ['Detach the joint', 'Cancel', 'Snapping: Grid']) expect(html).toContain(label)
+  })
+
+  test('a handle drag snaps in its kind context, and a rotate arc in angles', () => {
+    const contextOf = (handle: string, profile: 'item' | 'structural') =>
+      snapContextOf({
+        scope: { kind: 'handle-drag', nodeId: 'pipe_a', handle },
+        mode: 'select',
+        tool: null,
+        profileOf: () => undefined,
+        profileOfNode: () => profile,
+      })
+    expect(contextOf(PATH_POINT_DRAG_LABEL, 'structural')).toBe('polygon')
+    expect(contextOf(AXIS_MOVE_DRAG_LABEL, 'structural')).toBe('polygon')
+    expect(contextOf(AXIS_MOVE_DRAG_LABEL, 'item')).toBe('item')
+    expect(contextOf('resize-diameter', 'item')).toBe('item')
+    expect(contextOf(ROTATE_HANDLE_DRAG_LABEL, 'item')).toBe('rotation')
+  })
+})
+
 describe('Cut opening HUD', () => {
   test('names the drag gesture "Draw the opening", not the mezzanine', () => {
     // The drag row folds under "More shortcuts", so read the rows the HUD is given.

package/src/components/ui/helpers/helper-manager.tsx

@@ -13,9 +13,11 @@ import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import {
+  AXIS_MOVE_DRAG_LABEL,
   type ContextualShortcutHint,
   GROUP_MOVE_DRAG_LABEL,
   GROUP_ROTATE_DRAG_LABEL,
+  PATH_POINT_DRAG_LABEL,
   ROTATE_HANDLE_DRAG_LABEL,
   resolveRotateHandleHelpHints,
   resolveSelectModeHelpHints,
@@ -294,6 +296,40 @@ export const MEZZANINE_GESTURE_HINTS: Record<MezzanineGesture, ContextualShortcu
   ],
 }
 
+export type MepHandleGesture = 'edit-path' | 'move'
+
+/**
+ * A drag on an MEP handle — a run point, where Alt detaches the joint, or a
+ * fitting, run or run segment slid along an axis — or null. Its HUD names the
+ * kind and the gesture, not "Resize".
+ */
+export function mepHandleGesture(
+  drag: { nodeId: string; label: string } | null,
+): MepHandleGesture | null {
+  if (drag?.label === PATH_POINT_DRAG_LABEL) return 'edit-path'
+  if (drag?.label === AXIS_MOVE_DRAG_LABEL) return 'move'
+  return null
+}
+
+export function mepHandleGestureHints(
+  gesture: MepHandleGesture,
+  altPressed: boolean,
+): ContextualShortcutHint[] {
+  const cancel: ContextualShortcutHint = {
+    keys: ['Esc'],
+    label: /* i18n */ { id: 'editor.helpers.helperManager.cancel', message: 'Cancel' },
+  }
+  if (gesture === 'move') return [cancel]
+  return [
+    {
+      keys: ['Alt'],
+      label: /* i18n */ { id: 'editor.helpers.helperManager.detachTheJoint', message: 'Detach the joint' },
+      active: altPressed,
+    },
+    cancel,
+  ]
+}
+
 /**
  * Whether the armed tool's own hints (`toolHints`) win over the node in hand: a registry tool that
  * holds its draft in a placing scope (the roof's footprint, a fitting, a block) says what its clicks
@@ -340,6 +376,10 @@ export function HelperManager() {
   const reshapingNode = useReshapingNode()
   const activeHandleDrag = useActiveHandleDrag()
   const mezzanineHandle = useScene((s) => mezzanineGesture(activeHandleDrag, s.nodes))
+  const mepHandle = mepHandleGesture(activeHandleDrag)
+  const mepHandleKind = useScene((s) =>
+    mepHandle && activeHandleDrag ? s.nodes[activeHandleDrag.nodeId as AnyNodeId]?.type : undefined,
+  )
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const isMobile = useIsMobile()
   const modifiers = useActiveModifierKeys()
@@ -518,6 +558,20 @@ export function HelperManager() {
     )
   }
 
+  if (mepHandle) {
+    return (
+      <ContextualHelperPanel
+        hints={mepHandleGestureHints(mepHandle, modifiers.alt)}
+        snapContext={snapContext}
+        title={
+          mepHandleKind
+            ? nodeKindHudTitle(mepHandleKind, mepHandle === 'move' ? 'move' : 'edit')
+            : null
+        }
+      />
+    )
+  }
+
   // A single-node resize arrow is still an active snapping interaction. Roof
   // width/depth handles opt into grid snapping, so keep the mode and grid-step
   // controls visible for the whole drag instead of falling through to idle