@pascal-app/editor 1.0.6 → 1.0.7

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { type MessageDescriptor, type PascalI18n, usePascalI18n } from '@pascal-app/core'
 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'
@@ -7,7 +8,7 @@ import { useIsMobile } from '../../../hooks/use-mobile'
 import { type EditorViewDescriptor, isSceneView, isViewPinned } from '../../../lib/editor-views'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
-import type { ViewPaneIndex } from '../../../store/view-layout'
+import { VIEW_2D, VIEW_3D, type ViewPaneIndex } from '../../../store/view-layout'
 import { IconRefGlyph } from '../../ui/icon-ref'
 import {
   DropdownMenu,
@@ -30,7 +31,16 @@ 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. */
+/** Built-in views are named by the editor; host and plugin views bring their own label. */
+function viewLabel(view: EditorViewDescriptor, i18n: PascalI18n): string {
+  if (view.id === VIEW_3D) return i18n._({ id: 'editor.views.view3d', message: '3D' })
+  if (view.id === VIEW_2D) return i18n._({ id: 'editor.views.view2d', message: '2D' })
+  if (view.id === PLUGINS_VIEW_ID) return i18n._({ id: 'editor.views.plugins', message: 'Plugins' })
+  return view.label
+}
+
 export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?: string }) {
+  const i18n = usePascalI18n()
   const layout = useActiveViewLayout()
   const views = useEditorViews()
   const pinnedViews = useEditor((s) => s.pinnedViews)
@@ -58,7 +68,11 @@ export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?:
   return (
     <div className={cn(GROUP, 'min-w-0 shrink', className)}>
       <div
-        aria-label={`Pane ${pane + 1} views`}
+        aria-label={i18n._({
+          id: 'editor.views.viewBar.paneViews',
+          message: 'Pane {pane} views',
+          values: { pane: pane + 1 },
+        })}
         className="flex min-w-0 overflow-x-auto [scrollbar-width:none]"
         role="tablist"
         ref={tabList}
@@ -102,16 +116,20 @@ export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?:
                 }
               }}
               tabIndex={view.id === current ? 0 : -1}
-              title={view.label}
+              title={viewLabel(view, i18n)}
               role="tab"
               type="button"
             >
               <IconRefGlyph icon={view.icon} size={14} />
-              <span className="max-w-36 truncate">{view.label}</span>
+              <span className="max-w-36 truncate">{viewLabel(view, i18n)}</span>
             </button>
             {view.onClose && (
               <button
-                aria-label={`Close ${view.label}`}
+                aria-label={i18n._({
+                  id: 'editor.views.viewBar.closeLabel',
+                  message: 'Close {label}',
+                  values: { label: viewLabel(view, i18n) },
+                })}
                 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"
@@ -128,9 +146,27 @@ export function ViewTabs({ pane, className }: { pane: ViewPaneIndex; className?:
 }
 
 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 }>
+  {
+    mode: 'auto',
+    label: /* i18n */ { id: 'editor.views.viewBar.auto', message: 'Auto' },
+    title: /* i18n */ {
+      id: 'editor.views.viewBar.veilTheGroundOverALevel',
+      message: 'Veil the ground over a level below grade',
+    },
+  },
+  {
+    mode: 'solid',
+    label: /* i18n */ { id: 'editor.views.viewBar.solid', message: 'Solid' },
+    title: /* i18n */ {
+      id: 'editor.views.viewBar.keepTheGroundSolid',
+      message: 'Keep the ground solid',
+    },
+  },
+] as const satisfies ReadonlyArray<{
+  mode: GroundMode
+  label: MessageDescriptor
+  title: MessageDescriptor
+}>
 
 /**
  * Over a level below grade the ground is veiled so its rooms show, and the bar says so: the
@@ -139,6 +175,7 @@ const GROUND_MODES = [
  * a level at grade or only partly below it.
  */
 export function GroundModeToggle() {
+  const i18n = usePascalI18n()
   const belowGrade = useViewer((s) => s.belowGrade)
   const gradeStanding = useViewer((s) => s.gradeStanding)
   const groundWindowVeiled = useViewer((s) => s.groundWindowVeiled)
@@ -147,15 +184,31 @@ export function GroundModeToggle() {
   const veiled =
     groundMode === 'auto' &&
     ((belowGrade && gradeStanding !== 'partly-below-grade') || groundWindowVeiled)
-  const ground = veiled ? 'veiled' : 'solid'
-  const label =
+  const standing =
     gradeStanding === 'partly-below-grade'
-      ? `Partly below grade · ground ${ground}`
+      ? 'partly'
       : gradeStanding === 'below-grade'
-        ? `Below grade · ground ${ground}`
-        : `Ground ${ground}`
+        ? 'below'
+        : 'other'
+  const label = veiled
+    ? i18n._({
+        id: 'editor.views.viewBar.groundVeiled',
+        message:
+          '{standing, select, partly {Partly below grade · ground veiled} below {Below grade · ground veiled} other {Ground veiled}}',
+        values: { standing },
+      })
+    : i18n._({
+        id: 'editor.views.viewBar.groundSolid',
+        message:
+          '{standing, select, partly {Partly below grade · ground solid} below {Below grade · ground solid} other {Ground solid}}',
+        values: { standing },
+      })
   return (
-    <div aria-label="Ground" className={GROUP} role="group">
+    <div
+      aria-label={i18n._({ id: 'editor.views.viewBar.ground', message: '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
@@ -163,10 +216,10 @@ export function GroundModeToggle() {
           className={cn(SEGMENT, groundMode === mode ? ACTIVE : IDLE)}
           key={mode}
           onClick={() => useViewer.getState().setGroundMode(mode)}
-          title={title}
+          title={i18n._(title)}
           type="button"
         >
-          {label}
+          {i18n._(label)}
         </button>
       ))}
     </div>
@@ -175,15 +228,16 @@ export function GroundModeToggle() {
 
 /** Split toggle and, split, the swap — at the right end of the last pane's bar. */
 function SplitControls() {
+  const i18n = usePascalI18n()
   const split = useActiveViewLayout().split
   return (
     <div className={GROUP}>
       {split && (
         <button
-          aria-label="Swap panes"
+          aria-label={i18n._({ id: 'editor.views.viewBar.swapPanes', message: 'Swap panes' })}
           className={cn(SEGMENT, IDLE, 'px-2')}
           onClick={() => useEditor.getState().swapPanes()}
-          title="Swap panes"
+          title={i18n._({ id: 'editor.views.viewBar.swapPanes', message: 'Swap panes' })}
           type="button"
         >
           <ArrowLeftRight className="h-3 w-3" />
@@ -193,11 +247,15 @@ function SplitControls() {
         aria-pressed={split}
         className={cn(SEGMENT, split ? ACTIVE : IDLE)}
         onClick={() => useEditor.getState().toggleSplit()}
-        title={split ? 'Close split (\\)' : 'Split (\\)'}
+        title={
+          split
+            ? i18n._({ id: 'editor.views.viewBar.closeSplit', message: 'Close split (\\)' })
+            : i18n._({ id: 'editor.views.viewBar.split', message: 'Split (\\)' })
+        }
         type="button"
       >
         <Columns2 className="h-3 w-3" />
-        <span>Split</span>
+        <span>{i18n._({ id: 'editor.views.viewBar.split2', message: 'Split' })}</span>
       </button>
     </div>
   )
@@ -272,6 +330,7 @@ function MoreViewsMenu({
   current: string
   views: EditorViewDescriptor[]
 }) {
+  const i18n = usePascalI18n()
   const pinnedViews = useEditor((s) => s.pinnedViews)
   const setPaneView = useEditor((s) => s.setPaneView)
   const setViewPinned = useEditor((s) => s.setViewPinned)
@@ -282,7 +341,7 @@ function MoreViewsMenu({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          aria-label="More views"
+          aria-label={i18n._({ id: 'editor.views.viewBar.moreViews', message: 'More views' })}
           className={cn(SEGMENT, IDLE, 'shrink-0 px-2')}
           type="button"
         >
@@ -290,7 +349,9 @@ function MoreViewsMenu({
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
-        <DropdownMenuLabel className="text-muted-foreground text-xs">Views</DropdownMenuLabel>
+        <DropdownMenuLabel className="text-muted-foreground text-xs">
+          {i18n._({ id: 'editor.views.viewBar.views', message: 'Views' })}
+        </DropdownMenuLabel>
         {listed.map((view) => {
           const pinned = isViewPinned(view, pinnedViews)
           return (
@@ -300,11 +361,23 @@ function MoreViewsMenu({
               onSelect={() => setPaneView(pane, view.id)}
             >
               <IconRefGlyph icon={view.icon} size={16} />
-              <span className="min-w-0 flex-1 truncate">{view.label}</span>
+              <span className="min-w-0 flex-1 truncate">{viewLabel(view, i18n)}</span>
               {view.id === current && <Check className="h-3.5 w-3.5 text-muted-foreground" />}
               {!isSceneView(view.id) && !view.onClose && !view.alwaysPinned && (
                 <button
-                  aria-label={pinned ? `Unpin ${view.label}` : `Pin ${view.label}`}
+                  aria-label={
+                    pinned
+                      ? i18n._({
+                          id: 'editor.views.viewBar.unpinLabel',
+                          message: 'Unpin {label}',
+                          values: { label: viewLabel(view, i18n) },
+                        })
+                      : i18n._({
+                          id: 'editor.views.viewBar.pinLabel',
+                          message: 'Pin {label}',
+                          values: { label: viewLabel(view, i18n) },
+                        })
+                  }
                   aria-pressed={pinned}
                   className={cn(
                     'flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10',
@@ -316,7 +389,17 @@ function MoreViewsMenu({
                     setViewPinned(view.id, !pinned)
                   }}
                   onPointerDown={(event) => event.stopPropagation()}
-                  title={pinned ? 'Unpin from the view bar' : 'Pin to the view bar'}
+                  title={
+                    pinned
+                      ? i18n._({
+                          id: 'editor.views.viewBar.unpinFromTheViewBar',
+                          message: 'Unpin from the view bar',
+                        })
+                      : i18n._({
+                          id: 'editor.views.viewBar.pinToTheViewBar',
+                          message: 'Pin to the view bar',
+                        })
+                  }
                   type="button"
                 >
                   {pinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
@@ -333,7 +416,9 @@ function MoreViewsMenu({
               onSelect={() => setPaneView(pane, PLUGINS_VIEW_ID)}
             >
               <img alt="" className="h-4 w-4 object-contain" src="/icons/plugins.webp" />
-              <span>Browse plugins</span>
+              <span>
+                {i18n._({ id: 'editor.views.viewBar.browsePlugins', message: 'Browse plugins' })}
+              </span>
             </DropdownMenuItem>
           </>
         )}

package/src/components/editor/wall-measurement-label.tsx

@@ -20,11 +20,11 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { createPortal, useFrame } from '@react-three/fiber'
 import { useMemo, useState } from 'react'
 import * as THREE from 'three'
 import { formatLinearMeasurement } from '../../lib/measurements'
+import { Html } from './localized-html'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08

package/src/components/editor/wall-move-side-handles.tsx

@@ -19,7 +19,6 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -61,6 +60,7 @@ import useInteractionScope, {
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
+import { Html } from './localized-html'
 import { MeasurementPill } from './measurement-pill'
 import {
   createArrowHitAreaGeometry,
@@ -70,6 +70,7 @@ import {
   NO_RAYCAST,
   useInvisibleHitAreaMaterial,
 } from './node-arrow-handles'
+import { WallPullGrip } from './wall-pull-grip'
 import { WallPushArrow } from './wall-push-arrow'
 
 const HANDLE_OFFSET = 0.27
@@ -251,6 +252,9 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
         />
         <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
         <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
+        {/* Past each end, the grip that pulls the next wall out of it. */}
+        <WallPullGrip endpoint="start" wall={effectiveWall} />
+        <WallPullGrip endpoint="end" wall={effectiveWall} />
       </group>
       <WallBaseElevationHandle
         baseElevation={baseElevation}

package/src/components/editor/wall-pull-grip.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { nodeRegistry, type WallNode } from '@pascal-app/core'
+import { type ThreeEvent, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useState } from 'react'
+import { Color, DoubleSide, ExtrudeGeometry, OrthographicCamera, Shape } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import { startWallPull, WALL_PULL_GRIP_TITLE, wallPullSeed } from '../../lib/wall-pull'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import {
+  createEndpointHitAreaGeometry,
+  InvisibleHandleHitArea,
+  NO_RAYCAST,
+  useInvisibleHitAreaMaterial,
+} from './handles/handle-arrow'
+
+const PULL_FILL = '#10b981' // emerald-500 — the 2D grip's colour
+const PULL_HOVER_FILL = '#34d399' // emerald-400
+// Out from the wall end (m, before zoom): clear of the corner picker's hex.
+const PULL_ARROW_OFFSET = 0.2
+const PULL_ARROW_LENGTH = 0.34
+const PULL_ARROW_HALF_WIDTH = 0.11
+const PULL_ARROW_SHAFT_HALF_WIDTH = 0.04
+const PULL_HIT_RADIUS = 0.17
+const PULL_FLOOR_LIFT = 0.02
+
+// The grip's tooltip: one plain DOM element beside the pointer, so it never
+// lives in (or unmounts with) the R3F tree.
+let tooltip: HTMLDivElement | null = null
+
+function showGripTooltip(clientX: number, clientY: number) {
+  if (typeof document === 'undefined') return
+  if (!tooltip) {
+    tooltip = document.createElement('div')
+    tooltip.textContent = WALL_PULL_GRIP_TITLE
+    tooltip.setAttribute('role', 'tooltip')
+    Object.assign(tooltip.style, {
+      position: 'fixed',
+      zIndex: '60',
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      borderRadius: '6px',
+      background: 'rgba(24, 24, 27, 0.92)',
+      color: '#fff',
+      font: '500 11px/1.4 system-ui, -apple-system, sans-serif',
+      padding: '4px 8px',
+      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)',
+    })
+  }
+  tooltip.style.left = `${clientX + 14}px`
+  tooltip.style.top = `${clientY + 18}px`
+  if (!tooltip.isConnected) document.body.appendChild(tooltip)
+}
+
+function hideGripTooltip() {
+  tooltip?.remove()
+}
+
+/** A flat outward arrow (tip along +X), lying in the XZ plane from x = 0. */
+function createPullArrowGeometry() {
+  const head = PULL_ARROW_LENGTH * 0.45
+  const shape = new Shape()
+  shape.moveTo(0, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, -PULL_ARROW_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH, 0)
+  shape.lineTo(PULL_ARROW_LENGTH - head, PULL_ARROW_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(0, PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(0, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.03,
+    bevelEnabled: true,
+    bevelThickness: 0.01,
+    bevelSize: 0.012,
+    bevelSegments: 4,
+  })
+  geometry.translate(0, 0, -0.015)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+/**
+ * A selected wall end's "pull to continue" grip in 3D — the twin of the floor
+ * plan's: an emerald arrow lying on the floor just past the end, pointing out
+ * along the wall (along its tangent when curved), titled "Drag to draw the next
+ * wall" while the pointer rests on it. Pressing it starts
+ * `startWallPull`: the wall tool's Walls run opens at that end, the drag shows
+ * the next wall, and the release (the canvas click) places it. Screen-sized
+ * like the corner picker beside it; rendered in the wall's level frame at its
+ * base, by `WallMoveSideHandles`.
+ */
+export function WallPullGrip({ wall, endpoint }: { wall: WallNode; endpoint: 'start' | 'end' }) {
+  const [hover, setHover] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const seed = wallPullSeed(wall, endpoint)
+  const geometry = useMemo(() => createPullArrowGeometry(), [])
+  const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(PULL_HIT_RADIUS), [])
+  const hitMaterial = useInvisibleHitAreaMaterial()
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(PULL_FILL),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+        toneMapped: false,
+      }),
+    [],
+  )
+  useEffect(() => {
+    material.color.set(hover ? PULL_HOVER_FILL : PULL_FILL)
+  }, [hover, material])
+  useEffect(() => () => geometry.dispose(), [geometry])
+  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
+  useEffect(() => () => material.dispose(), [material])
+  // Warm the wall tool's module so the press starts drawing at once.
+  useEffect(() => {
+    void nodeRegistry
+      .get('wall')
+      ?.tool?.()
+      .catch(() => {})
+  }, [])
+  useEffect(
+    () => () => {
+      hideGripTooltip()
+      if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+    },
+    [],
+  )
+
+  if (!seed) return null
+  const [dx, dz] = seed.reference
+  const offset = PULL_ARROW_OFFSET * zoom
+  const position: [number, number, number] = [
+    seed.start[0] + dx * offset,
+    PULL_FLOOR_LIFT,
+    seed.start[1] + dz * offset,
+  ]
+  const rotationY = Math.atan2(-dz, dx)
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    suppressBoxSelectForPointer(event)
+    sfxEmitter.emit('sfx:item-pick')
+    setHover(false)
+    hideGripTooltip()
+    if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+    startWallPull({ wallId: wall.id, endpoint, origin: '3d' })
+  }
+
+  return (
+    <group position={position} rotation={[0, rotationY, 0]} scale={zoom}>
+      <group position={[PULL_ARROW_LENGTH / 2, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <InvisibleHandleHitArea
+          geometry={hitGeometry}
+          material={hitMaterial}
+          onPointerDown={onPointerDown}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setHover(true)
+            showGripTooltip(event.nativeEvent.clientX, event.nativeEvent.clientY)
+            document.body.style.cursor = 'grab'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setHover(false)
+            hideGripTooltip()
+            if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+          }}
+          scale={1}
+        />
+      </group>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        layers={EDITOR_LAYER}
+        material={material}
+        raycast={NO_RAYCAST}
+        renderOrder={1003}
+        scale={hover ? 1.15 : 1}
+      />
+    </group>
+  )
+}

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

@@ -16,6 +16,7 @@ import {
 } from '@pascal-app/core'
 import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
@@ -31,10 +32,14 @@ import { EDITOR_LAYER } from '../../lib/constants'
  *
  *   endpoint (corner) → square    midpoint → triangle
  *   intersection      → ✕ cross   wall body (edge) → circle
+ *   perpendicular     → ⊥ corner  projection guide → diamond
+ *   grid length       → small +
  *
  * Subscribes to the shared `useWallSnapIndicator` store (published by the wall
  * draft + endpoint-move tools). The vertical mouse pillar and the corner
- * (endpoint) square are green; the other floor glyphs are indigo.
+ * (endpoint) square are green; the other floor glyphs are indigo. A point that
+ * carries a `label` (a wall pulled from a wall end) also names what it caught
+ * in a pill beside the foot of the pillar.
  *
  * The point carries only XZ (building-local plan coords); like the alignment
  * guides it's lifted to the active level's building-local Y each frame so it
@@ -135,6 +140,23 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
         renderOrder={1002}
       />
       <SnapMarker kind={point.kind} x={point.x} z={point.z} />
+      {point.label ? (
+        <Html
+          position={[point.x, 0.05, point.z]}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[24, 0]}
+        >
+          <div
+            className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-sans font-semibold text-[11px] text-white"
+            style={{
+              backgroundColor: point.kind === 'endpoint' ? '#16a34a' : '#6366f1',
+              transform: 'translate(12px, 8px)',
+            }}
+          >
+            {point.label}
+          </div>
+        </Html>
+      ) : null}
     </group>
   )
 })
@@ -295,6 +317,64 @@ function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }
       </>
     )
   }
+  if (kind === 'perpendicular') {
+    // ⊥ — a base bar with an upright from its middle.
+    return (
+      <>
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 2.6, 1, MARKER * 0.45]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z - MARKER * 0.8]}
+          renderOrder={1001}
+          scale={[MARKER * 0.45, 1, MARKER * 1.6]}
+        />
+      </>
+    )
+  }
+  if (kind === 'alignment') {
+    return (
+      <mesh
+        geometry={FLAT_BOX_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        rotation={[0, Math.PI / 4, 0]}
+        scale={[MARKER * 1.4, 1, MARKER * 1.4]}
+      />
+    )
+  }
+  if (kind === 'grid') {
+    return (
+      <>
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 1.8, 1, MARKER * 0.35]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 0.35, 1, MARKER * 1.8]}
+        />
+      </>
+    )
+  }
   // 'wall' (edge / along-wall) → circle
   return (
     <mesh