@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/tools/wall/wall-snap-geometry.ts

@@ -6,6 +6,7 @@
 import {
   getWallCurveFrameAt,
   getWallCurveLength,
+  getWallFaceOffsets,
   isCurvedWall,
   type WallNode,
 } from '@pascal-app/core'
@@ -124,6 +125,142 @@ export function findWallSnapTarget(
   return bestTarget
 }
 
+// A drafted segment closer than this to a wall's direction (sine of the angle
+// between them) runs alongside it: the wall topology stacks such walls rather
+// than T-joining them, so the body snap leaves them alone. Two walls meeting
+// closer than this aren't a corner either.
+const WALL_BODY_SNAP_MIN_SINE = 0.5
+
+/** A straight wall's reference line as a frame, with the faces its body spans. */
+type WallBodyFrame = {
+  wall: WallNode
+  length: number
+  ux: number
+  uz: number
+  faces: { a: number; b: number }
+  /** Offset along the wall's left normal, the side its face offsets are measured on. */
+  across: (q: WallPlanPoint) => number
+  /** Station along the reference line from `start`. */
+  along: (q: WallPlanPoint) => number
+}
+
+function wallBodyFrame(wall: WallNode): WallBodyFrame | null {
+  if (isCurvedWall(wall)) return null
+  const [x1, z1] = wall.start
+  const length = Math.hypot(wall.end[0] - x1, wall.end[1] - z1)
+  if (length < 1e-9) return null
+  const ux = (wall.end[0] - x1) / length
+  const uz = (wall.end[1] - z1) / length
+  return {
+    wall,
+    length,
+    ux,
+    uz,
+    faces: getWallFaceOffsets(wall),
+    across: (q) => (q[1] - z1) * ux - (q[0] - x1) * uz,
+    along: (q) => (q[0] - x1) * ux + (q[1] - z1) * uz,
+  }
+}
+
+/**
+ * The corner a join at `target` on `host`'s reference line falls into: where
+ * `host` meets another straight wall, at an L or a T, with `target` inside that
+ * wall's drawn body. A T-join there would split `host` into a stub buried in
+ * the corner block, so the end joins the junction instead. A shared end comes
+ * back exactly; walls meeting at a shallow angle aren't a corner.
+ */
+function cornerJunctionAt(
+  target: WallPlanPoint,
+  host: WallBodyFrame,
+  frames: WallBodyFrame[],
+): WallPlanPoint | null {
+  for (const other of frames) {
+    if (other === host) continue
+    if (Math.abs(host.ux * other.uz - host.uz * other.ux) < WALL_BODY_SNAP_MIN_SINE) continue
+    const offset = other.across(target)
+    if (offset < other.faces.b || offset > other.faces.a) continue
+    const ends = [host.wall.start, host.wall.end, other.wall.start, other.wall.end]
+    const crossing = segmentIntersection(ends[0]!, ends[1]!, ends[2]!, ends[3]!)
+    if (!crossing) continue
+    const sharedEnd = ends.find((end) => distanceSquared(end, crossing) <= 1e-12)
+    return sharedEnd ? [sharedEnd[0], sharedEnd[1]] : crossing
+  }
+  return null
+}
+
+/**
+ * Where a drawn wall end joins a wall it is aimed into: the point on a straight
+ * wall's reference line (`start` → `end`, the line the wall topology T-joins a
+ * partition end on, whatever the wall's justification) for an end inside that
+ * wall's drawn body or within `margin` of either face.
+ *
+ * `point` is the raw cursor and `placed` its grid / angle placement; either one
+ * inside a body captures, so the grid can't leave an end a fraction short of a
+ * face. Given the drafted segment's `start`, the end slides along start →
+ * `placed` onto the line, so a square or angle-locked segment keeps its
+ * direction, and a wall the segment runs alongside (or starts on) is skipped.
+ * Without a start the end drops square onto the line, keeping its position
+ * along the wall. A join that lands inside a corner block, where the wall
+ * meets another at an L or a T, takes the junction itself (`cornerJunctionAt`).
+ * Curved walls are left to the edge snap (`findWallSnapTarget`).
+ */
+export function findWallBodySnapTarget(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  options?: {
+    ignoreWallIds?: string[]
+    placed?: WallPlanPoint
+    start?: WallPlanPoint
+    margin?: number
+  },
+): WallPlanPoint | null {
+  const ignored = new Set(options?.ignoreWallIds ?? [])
+  const placed = options?.placed ?? point
+  const start = options?.start
+  const margin = options?.margin ?? WALL_CONNECT_SNAP_RADIUS
+  const frames = walls.flatMap((wall) => {
+    const frame = ignored.has(wall.id) ? null : wallBodyFrame(wall)
+    return frame ? [frame] : []
+  })
+  let best: WallPlanPoint | null = null
+  let bestOutside = Number.POSITIVE_INFINITY
+
+  for (const frame of frames) {
+    const { length, ux, uz, faces, across, along } = frame
+    const [x1, z1] = frame.wall.start
+    const onWall = (q: WallPlanPoint) => along(q) > 0 && along(q) < length
+    const outsideBody = (q: WallPlanPoint) =>
+      onWall(q) ? Math.max(0, faces.b - across(q), across(q) - faces.a) : Number.POSITIVE_INFINITY
+    const outside = Math.min(outsideBody(point), outsideBody(placed))
+    if (outside > margin || outside >= bestOutside) continue
+
+    let target: WallPlanPoint | null
+    if (Math.abs(across(point)) <= 1e-9 && onWall(point)) {
+      // Already on the line: a joined end snapped again (the plan view hands
+      // the 3D tool its resolved point) stays put.
+      target = [point[0], point[1]]
+    } else if (start) {
+      const dx = placed[0] - start[0]
+      const dz = placed[1] - start[1]
+      const run = Math.hypot(dx, dz)
+      if (run < 1e-9 || Math.abs(dx * uz - dz * ux) / run < WALL_BODY_SNAP_MIN_SINE) continue
+      const startAcross = across(start)
+      const t = startAcross / (startAcross - across(placed))
+      if (!(t > 1e-6)) continue
+      target = [start[0] + dx * t, start[1] + dz * t]
+      if (!onWall(target)) continue
+    } else {
+      const station = along(placed)
+      if (!(station > 0 && station < length)) continue
+      target = [x1 + ux * station, z1 + uz * station]
+    }
+    best = cornerJunctionAt(target, frame, frames) ?? target
+    bestOutside = outside
+  }
+
+  return best
+}
+
 /**
  * Wall ids that contain an already-resolved snap point.
  *

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

@@ -184,9 +184,9 @@ export const ZoneTool: React.FC = () => {
       updateLines()
     }
 
-    // World-grid snap projected into building-local; rotated buildings
-    // used to pull the snap off the visible grid lines. Grid quantize only
-    // in grid mode; off / lines / angles leave the raw cursor.
+    // Snap on the building's own grid lattice, the one its walls are drafted
+    // on (square to a turned house). Grid quantize only in grid mode; off /
+    // lines / angles leave the raw cursor.
     const gridPointOf = (event: GridEvent): [number, number] =>
       isGridSnapActive()
         ? snapWorldXZForActiveBuilding(

package/src/components/ui/action-menu/action-button.tsx

@@ -44,6 +44,8 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             // These are toggles, not commands: the armed/unarmed state has to be
             // readable without decoding the active-state styling.
             aria-pressed={isActive}
+            // Icon-only: the tooltip text is the button's name.
+            aria-label={label}
             className={cn('relative h-11 w-11 transition-all', className)}
             onClick={(event) => {
               triggerSFX('sfx:menu-click')

package/src/components/ui/action-menu/camera-actions.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { emitter } from '@pascal-app/core'
+import { emitter, usePascalI18n } from '@pascal-app/core'
 import Image from 'next/image'
 import useEditor from '../../../store/use-editor'
 import { visibleScene } from '../../../store/view-layout'
@@ -8,6 +8,7 @@ import { ActionButton } from './action-button'
 import { FollowPascalToggle } from './follow-pascal-toggle'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
+  const i18n = usePascalI18n()
   // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
   // top view only tilts the hidden 3D camera — pointless without the canvas.
   const is2dOnly = useEditor((s) => visibleScene(s) === '2d')
@@ -31,13 +32,13 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
           {/* Orbit CCW */}
           <ActionButton
             className="group hover:bg-black/4"
-            label="Orbit Left"
+            label={i18n._({ id: 'editor.actionMenu.cameraActions.orbitLeft', message: 'Orbit Left' })}
             onClick={orbitCCW}
             size="icon"
             variant="ghost"
           >
             <Image
-              alt="Orbit Left"
+              alt={i18n._({ id: 'editor.actionMenu.cameraActions.orbitLeft', message: 'Orbit Left' })}
               className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
               src="/icons/rotate.webp"
@@ -48,13 +49,13 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
           {/* Orbit CW */}
           <ActionButton
             className="group hover:bg-black/4"
-            label="Orbit Right"
+            label={i18n._({ id: 'editor.actionMenu.cameraActions.orbitRight', message: 'Orbit Right' })}
             onClick={orbitCW}
             size="icon"
             variant="ghost"
           >
             <Image
-              alt="Orbit Right"
+              alt={i18n._({ id: 'editor.actionMenu.cameraActions.orbitRight', message: 'Orbit Right' })}
               className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
               src="/icons/rotate.webp"
@@ -71,13 +72,13 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
       {!is2dOnly && (
         <ActionButton
           className="group hover:bg-black/4"
-          label="Top View"
+          label={i18n._({ id: 'editor.actionMenu.cameraActions.topView', message: 'Top View' })}
           onClick={goToTopView}
           size="icon"
           variant="ghost"
         >
           <Image
-            alt="Top View"
+            alt={i18n._({ id: 'editor.actionMenu.cameraActions.topView', message: 'Top View' })}
             className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
             height={28}
             src="/icons/topview.webp"

package/src/components/ui/action-menu/control-modes.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
+import type { MessageDescriptor } from '@pascal-app/core'
+
 import { Icon } from '@iconify/react'
 import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
@@ -17,7 +20,7 @@ type ControlConfig = {
   icon?: LucideIcon
   iconifyIcon?: string
   imageSrc?: string
-  label: string
+  label: MessageDescriptor
   shortcut?: string
   color: string
   activeColor: string
@@ -28,7 +31,7 @@ const controls: ControlConfig[] = [
   {
     id: 'select',
     imageSrc: '/icons/select.webp',
-    label: 'Select',
+    label: /* i18n */ { id: 'editor.actionMenu.controlModes.select', message: 'Select' },
     shortcut: 'V',
     color: 'hover:bg-blue-500/20 hover:text-blue-600 dark:hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 dark:hover:text-accent-foreground',
@@ -36,7 +39,7 @@ const controls: ControlConfig[] = [
   {
     id: 'delete',
     icon: Trash2,
-    label: 'Delete',
+    label: /* i18n */ { id: 'editor.actionMenu.controlModes.delete', message: 'Delete' },
     shortcut: 'X',
     color: 'hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400',
     activeColor: 'bg-red-500/20 text-red-600 dark:text-red-400 dark:hover:text-accent-foreground',
@@ -44,6 +47,7 @@ const controls: ControlConfig[] = [
 ]
 
 export function ControlModes() {
+  const i18n = usePascalI18n()
   const mode = useEditor((state) => state.mode)
   const selectionTool = useEditor((state) => state.floorplanSelectionTool)
   const armToolMode = useEditor((state) => state.armToolMode)
@@ -94,7 +98,7 @@ export function ControlModes() {
               // tour at this button. Nothing here reads it.
               data-guide-target={c.id === 'select' ? 'mode-select' : undefined}
               isActive={isActive}
-              label={c.label}
+              label={i18n._(c.label)}
               onClick={() => handleClick(c.id)}
               shortcut={c.shortcut}
               size="icon"
@@ -102,7 +106,7 @@ export function ControlModes() {
             >
               {c.imageSrc ? (
                 <Image
-                  alt={c.label}
+                  alt={i18n._(c.label)}
                   className={cn(
                     'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
                     isActive

package/src/components/ui/action-menu/follow-pascal-pill.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { AnimatePresence, motion } from 'motion/react'
 import { useReducedMotion } from '../../../hooks/use-reduced-motion'
 import useFollowPascal from '../../../store/use-follow-pascal'
@@ -9,6 +10,7 @@ import useFollowPascal from '../../../store/use-follow-pascal'
  * following. It comes up from where the toolbar is (origin-aware) and goes the same way.
  */
 export function FollowPascalPill() {
+  const i18n = usePascalI18n()
   const shows = useFollowPascal((state) => state.on && state.paused && state.building)
   const resume = useFollowPascal((state) => state.resume)
   const reduced = useReducedMotion()
@@ -24,7 +26,7 @@ export function FollowPascalPill() {
           transition={reduced ? { duration: 0.12 } : { type: 'spring', bounce: 0, duration: 0.3 }}
           type="button"
         >
-          Resume following
+          {i18n._({ id: 'editor.actionMenu.followPascalPill.resumeFollowing', message: 'Resume following' })}
         </motion.button>
       ) : null}
     </AnimatePresence>

package/src/components/ui/action-menu/follow-pascal-toggle.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { Video } from 'lucide-react'
 import { cn } from '../../../lib/utils'
 import useFollowPascal from '../../../store/use-follow-pascal'
@@ -13,6 +14,7 @@ export function FollowPascalToggle({
   className?: string
   tooltipClassName?: string
 }) {
+  const i18n = usePascalI18n()
   const on = useFollowPascal((state) => state.on)
   const setOn = useFollowPascal((state) => state.setOn)
   return (
@@ -24,7 +26,11 @@ export function FollowPascalToggle({
           : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300',
         className,
       )}
-      label={`Follow Pascal: ${on ? 'On' : 'Off'}`}
+      label={
+        on
+          ? i18n._({ id: 'editor.actionMenu.followPascalToggle.on', message: 'Follow Pascal: On' })
+          : i18n._({ id: 'editor.actionMenu.followPascalToggle.off', message: 'Follow Pascal: Off' })
+      }
       onClick={() => setOn(!on)}
       size="icon"
       tooltipClassName={tooltipClassName}

package/src/components/ui/action-menu/furnish-tools.tsx

@@ -1,16 +1,17 @@
+import type { MessageDescriptor } from '@pascal-app/core'
 import type { CatalogCategory } from './../../../store/use-editor'
 
 export type FurnishToolConfig = {
   id: 'item'
   iconSrc: string
-  label: string
+  label: MessageDescriptor
   catalogCategory: CatalogCategory
 }
 
 export const furnishTools: FurnishToolConfig[] = [
-  { id: 'item', iconSrc: '/icons/couch.webp', label: 'Furniture', catalogCategory: 'furniture' },
-  { id: 'item', iconSrc: '/icons/appliance.webp', label: 'Appliance', catalogCategory: 'appliance' },
-  { id: 'item', iconSrc: '/icons/kitchen.webp', label: 'Kitchen', catalogCategory: 'kitchen' },
-  { id: 'item', iconSrc: '/icons/bathroom.webp', label: 'Bathroom', catalogCategory: 'bathroom' },
-  { id: 'item', iconSrc: '/icons/tree.webp', label: 'Outdoor', catalogCategory: 'outdoor' },
+  { id: 'item', iconSrc: '/icons/couch.webp', label: /* i18n */ { id: 'editor.actionMenu.furnishTools.furniture', message: 'Furniture' }, catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.webp', label: /* i18n */ { id: 'editor.actionMenu.furnishTools.appliance', message: 'Appliance' }, catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.webp', label: /* i18n */ { id: 'editor.actionMenu.furnishTools.kitchen', message: 'Kitchen' }, catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.webp', label: /* i18n */ { id: 'editor.actionMenu.furnishTools.bathroom', message: 'Bathroom' }, catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.webp', label: /* i18n */ { id: 'editor.actionMenu.furnishTools.outdoor', message: 'Outdoor' }, catalogCategory: 'outdoor' },
 ]

package/src/components/ui/action-menu/index.tsx

@@ -66,6 +66,7 @@ export function ActionMenu({
       <TooltipProvider>
         <FollowPascalPill />
         <motion.div
+          data-surface="tool-dock"
           className={cn(
             'z-50',
             isMobile

package/src/components/ui/action-menu/measurement-control.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import type { MessageDescriptor } from '@pascal-app/core'
+
+import { usePascalI18n } from '@pascal-app/core'
 import type {
   ConstructionDimensionChainMode,
   ConstructionDimensionMode,
@@ -29,40 +32,41 @@ import { ActionButton } from './action-button'
 import { useActionMenuPopupSide } from './placement'
 
 const measurementOptions = [
-  { kind: 'distance', label: 'Distance', icon: Ruler },
-  { kind: 'angle', label: 'Angle', icon: Triangle },
-  { kind: 'area', label: 'Area', icon: Square },
-  { kind: 'perimeter', label: 'Perimeter', icon: Waypoints },
-  { kind: 'volume', label: 'Volume', icon: Box },
+  { kind: 'distance', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.distance', message: 'Distance' }, icon: Ruler },
+  { kind: 'angle', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.angle', message: 'Angle' }, icon: Triangle },
+  { kind: 'area', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.area', message: 'Area' }, icon: Square },
+  { kind: 'perimeter', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.perimeter', message: 'Perimeter' }, icon: Waypoints },
+  { kind: 'volume', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.volume', message: 'Volume' }, icon: Box },
 ] as const satisfies readonly {
   kind: CreatableMeasurementKind
-  label: string
+  label: MessageDescriptor
   icon: typeof Ruler
 }[]
 
 const measurementMenuOptions = [
-  { kind: 'smart', label: 'Smart', icon: ScanSearch },
+  { kind: 'smart', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.smart', message: 'Smart' }, icon: ScanSearch },
   ...measurementOptions,
 ] as const
 
 const constructionDimensionOptions = [
-  { mode: 'linear', chainMode: 'point-to-point', label: 'Linear dimension', icon: Ruler },
-  { mode: 'linear', chainMode: 'continuous', label: 'Continuous dimension', icon: Waypoints },
-  { mode: 'radius', chainMode: 'point-to-point', label: 'Radius dimension', icon: CircleIcon },
-  { mode: 'diameter', chainMode: 'point-to-point', label: 'Diameter dimension', icon: CircleIcon },
-  { mode: 'center-mark', chainMode: 'point-to-point', label: 'Center mark', icon: Crosshair },
-  { mode: 'chord', chainMode: 'point-to-point', label: 'Chord dimension', icon: Minus },
-  { mode: 'arc-length', chainMode: 'point-to-point', label: 'Arc length', icon: CircleIcon },
-  { mode: 'angular', chainMode: 'point-to-point', label: 'Angular dimension', icon: Triangle },
-  { mode: 'coordinate', chainMode: 'continuous', label: 'Coordinate dimensions', icon: Grid2X2 },
+  { mode: 'linear', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.linearDimension', message: 'Linear dimension' }, icon: Ruler },
+  { mode: 'linear', chainMode: 'continuous', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.continuousDimension', message: 'Continuous dimension' }, icon: Waypoints },
+  { mode: 'radius', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.radiusDimension', message: 'Radius dimension' }, icon: CircleIcon },
+  { mode: 'diameter', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.diameterDimension', message: 'Diameter dimension' }, icon: CircleIcon },
+  { mode: 'center-mark', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.centerMark', message: 'Center mark' }, icon: Crosshair },
+  { mode: 'chord', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.chordDimension', message: 'Chord dimension' }, icon: Minus },
+  { mode: 'arc-length', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.arcLength', message: 'Arc length' }, icon: CircleIcon },
+  { mode: 'angular', chainMode: 'point-to-point', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.angularDimension', message: 'Angular dimension' }, icon: Triangle },
+  { mode: 'coordinate', chainMode: 'continuous', label: /* i18n */ { id: 'editor.actionMenu.measurementControl.coordinateDimensions', message: 'Coordinate dimensions' }, icon: Grid2X2 },
 ] as const satisfies readonly {
   mode: ConstructionDimensionMode
   chainMode: ConstructionDimensionChainMode
-  label: string
+  label: MessageDescriptor
   icon: typeof Ruler
 }[]
 
 export function MeasurementControl() {
+  const i18n = usePascalI18n()
   const popupSide = useActionMenuPopupSide()
   const [isOpen, setIsOpen] = useState(false)
   const mode = useEditor((state) => state.mode)
@@ -98,11 +102,13 @@ export function MeasurementControl() {
     : isSmartActive
       ? ScanSearch
       : selectedOption.icon
-  const selectedLabel = isConstructionDimensionActive
-    ? (activeConstructionDimensionOption?.label ?? 'Linear dimension')
-    : isSmartActive
-      ? 'Smart'
-      : selectedOption.label
+  const selectedLabel = i18n._(
+    isConstructionDimensionActive
+      ? (activeConstructionDimensionOption ?? constructionDimensionOptions[0]).label
+      : isSmartActive
+        ? measurementMenuOptions[0].label
+        : selectedOption.label,
+  )
 
   const activateMeasurement = (kind: CreatableMeasurementKind) => {
     setLastMeasurementKind(kind)
@@ -143,7 +149,7 @@ export function MeasurementControl() {
     <Popover onOpenChange={setIsOpen} open={isOpen}>
       <div className="flex items-center">
         <ActionButton
-          aria-label={`Measure: ${selectedLabel}`}
+          aria-label={i18n._({ id: 'editor.actionMenu.measurementControl.measureSelectedlabel', message: 'Measure: {selectedLabel}', values: { selectedLabel } })}
           aria-pressed={isControlActive}
           className={cn(
             'rounded-r-none p-0 text-muted-foreground',
@@ -151,7 +157,7 @@ export function MeasurementControl() {
               ? 'bg-cyan-500/20 text-cyan-700 hover:bg-cyan-500/20 dark:text-cyan-400 dark:hover:text-accent-foreground'
               : 'hover:bg-cyan-500/15 hover:text-cyan-700 dark:hover:text-cyan-400',
           )}
-          label={`Measure: ${selectedLabel}`}
+          label={i18n._({ id: 'editor.actionMenu.measurementControl.measureSelectedlabel', message: 'Measure: {selectedLabel}', values: { selectedLabel } })}
           onClick={handlePrimaryClick}
           shortcut="M"
           size="icon"
@@ -164,7 +170,7 @@ export function MeasurementControl() {
           <button
             aria-expanded={isOpen}
             aria-haspopup="menu"
-            aria-label="Measurement options"
+            aria-label={i18n._({ id: 'editor.actionMenu.measurementControl.measurementOptions', message: 'Measurement options' })}
             className={cn(
               'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
               isOpen
@@ -187,7 +193,7 @@ export function MeasurementControl() {
         side={popupSide}
         sideOffset={14}
       >
-        <div aria-label="Measurement type" className="space-y-1" role="menu">
+        <div aria-label={i18n._({ id: 'editor.actionMenu.measurementControl.measurementType', message: 'Measurement type' })} className="space-y-1" role="menu">
           {measurementMenuOptions.map((option) => {
             const OptionIcon = option.icon
             const isSmart = option.kind === 'smart'
@@ -213,7 +219,7 @@ export function MeasurementControl() {
                 type="button"
               >
                 <OptionIcon aria-hidden="true" className="h-4 w-4" />
-                <span>{option.label}</span>
+                <span>{i18n._(option.label)}</span>
                 {isSelected ? <Check aria-hidden="true" className="ml-auto h-4 w-4" /> : null}
               </button>
             )
@@ -223,7 +229,7 @@ export function MeasurementControl() {
             <>
               <div className="my-1.5 h-px bg-border/60" />
               <div className="px-2.5 pt-1 pb-0.5 font-semibold text-[10px] text-muted-foreground uppercase tracking-wider">
-                Floor plan
+                {i18n._({ id: 'editor.actionMenu.measurementControl.floorPlan', message: 'Floor plan' })}
               </div>
 
               {constructionDimensionOptions.map((option) => {
@@ -248,7 +254,7 @@ export function MeasurementControl() {
                     type="button"
                   >
                     <OptionIcon aria-hidden="true" className="h-4 w-4" />
-                    <span>{option.label}</span>
+                    <span>{i18n._(option.label)}</span>
                     {isSelected ? <Check aria-hidden="true" className="ml-auto h-4 w-4" /> : null}
                   </button>
                 )

package/src/components/ui/action-menu/point-ask-button.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useHasPointAskHandler } from '@pascal-app/core'
+import { useHasPointAskHandler, usePascalI18n } from '@pascal-app/core'
 import { canPoint, enterPointMode, leavePointMode } from '../../../lib/point-ask/session'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
@@ -14,6 +14,7 @@ import { ActionButton } from './action-button'
  * the 2D plan and the walkthrough it is disabled and says so (v1 works in the 3D view).
  */
 export function PointAskButton() {
+  const i18n = usePascalI18n()
   const available = useHasPointAskHandler()
   const active = usePointAsk((s) => s.active)
   const sceneVisible = useEditor((s) => isViewVisible(s, VIEW_3D))
@@ -31,7 +32,7 @@ export function PointAskButton() {
       data-guide-target="mode-point-ask"
       disabled={unavailable}
       isActive={active}
-      label="Point and ask"
+      label={i18n._({ id: 'editor.actionMenu.pointAskButton.pointAndAsk', message: 'Point and ask' })}
       onClick={() => {
         if (active) leavePointMode()
         else if (canPoint()) enterPointMode(true)
@@ -39,7 +40,7 @@ export function PointAskButton() {
       shortcut="C"
       size="icon"
       tooltipContent={
-        unavailable ? <p>Point and ask works in the 3D view</p> : <p>Point and ask (C)</p>
+        unavailable ? <p>{i18n._({ id: 'editor.actionMenu.pointAskButton.pointAndAskWorksInThe', message: 'Point and ask works in the 3D view' })}</p> : <p>{i18n._({ id: 'editor.actionMenu.pointAskButton.pointAndAskC', message: 'Point and ask (C)' })}</p>
       }
       variant="ghost"
     >

package/src/components/ui/action-menu/structure-tools.tsx

@@ -1,9 +1,10 @@
+import type { MessageDescriptor } from '@pascal-app/core'
 import type { CatalogCategory, StructureTool } from '../../../store/use-editor'
 
 export type ToolConfig = {
   id: StructureTool
   iconSrc: string
-  label: string
+  label: MessageDescriptor
   catalogCategory?: CatalogCategory
 }
 
@@ -12,26 +13,27 @@ export type ToolConfig = {
 // for cursor/floorplan indicators. Roof-mounted accessories are intentionally
 // absent — they're placed from the roof inspector's "Add element" section.
 export const tools: ToolConfig[] = [
-  { id: 'wall', iconSrc: '/icons/wall.webp', label: 'Wall' },
-  { id: 'door', iconSrc: '/icons/door.webp', label: 'Door' },
-  { id: 'window', iconSrc: '/icons/window.webp', label: 'Window' },
-  { id: 'stair', iconSrc: '/icons/stairs.webp', label: 'Stairs' },
-  { id: 'roof', iconSrc: '/icons/roof.webp', label: 'Gable Roof' },
-  { id: 'fence', iconSrc: '/icons/fence.webp', label: 'Fence' },
-  { id: 'column', iconSrc: '/icons/column.webp', label: 'Column' },
-  { id: 'elevator', iconSrc: '/icons/elevator.webp', label: 'Elevator' },
-  { id: 'slab', iconSrc: '/icons/floor.webp', label: 'Slab' },
-  { id: 'ceiling', iconSrc: '/icons/ceiling.webp', label: 'Ceiling' },
-  { id: 'zone', iconSrc: '/icons/zone.webp', label: 'Zone' },
-  { id: 'spawn', iconSrc: '/icons/spawn-point.webp', label: 'Spawn Point' },
-  { id: 'shelf', iconSrc: '/icons/shelf.webp', label: 'Shelf' },
-  { id: 'duct-segment', iconSrc: '/icons/duct.webp', label: 'Duct' },
-  { id: 'duct-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Duct Fitting' },
-  { id: 'duct-terminal', iconSrc: '/icons/registers.webp', label: 'Register' },
-  { id: 'hvac-equipment', iconSrc: '/icons/HVAC.webp', label: 'HVAC Unit' },
-  { id: 'pipe-segment', iconSrc: '/icons/dwv-pipes.webp', label: 'DWV Pipe' },
-  { id: 'pipe-trap', iconSrc: '/icons/dwv-pipes.webp', label: 'Trap' },
-  { id: 'pipe-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Pipe Fitting' },
-  { id: 'lineset', iconSrc: '/icons/lineset.webp', label: 'Lineset' },
-  { id: 'liquid-line', iconSrc: '/icons/lineset.webp', label: 'Liquid Line' },
+  { id: 'wall', iconSrc: '/icons/wall.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.wall', message: 'Wall' } },
+  { id: 'door', iconSrc: '/icons/door.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.door', message: 'Door' } },
+  { id: 'window', iconSrc: '/icons/window.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.window', message: 'Window' } },
+  { id: 'stair', iconSrc: '/icons/stairs.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.stairs', message: 'Stairs' } },
+  { id: 'roof', iconSrc: '/icons/roof.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.gableRoof', message: 'Gable Roof' } },
+  { id: 'fence', iconSrc: '/icons/fence.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.fence', message: 'Fence' } },
+  { id: 'column', iconSrc: '/icons/column.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.column', message: 'Column' } },
+  { id: 'beam', iconSrc: '/icons/beam.svg', label: /* i18n */ { id: 'editor.actionMenu.structureTools.beam', message: 'Beam' } },
+  { id: 'elevator', iconSrc: '/icons/elevator.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.elevator', message: 'Elevator' } },
+  { id: 'slab', iconSrc: '/icons/floor.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.slab', message: 'Slab' } },
+  { id: 'ceiling', iconSrc: '/icons/ceiling.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.ceiling', message: 'Ceiling' } },
+  { id: 'zone', iconSrc: '/icons/zone.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.zone', message: 'Zone' } },
+  { id: 'spawn', iconSrc: '/icons/spawn-point.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.spawnPoint', message: 'Spawn Point' } },
+  { id: 'shelf', iconSrc: '/icons/shelf.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.shelf', message: 'Shelf' } },
+  { id: 'duct-segment', iconSrc: '/icons/duct.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.duct', message: 'Duct' } },
+  { id: 'duct-fitting', iconSrc: '/icons/duct-fitting.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.ductFitting', message: 'Duct Fitting' } },
+  { id: 'duct-terminal', iconSrc: '/icons/registers.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.register', message: 'Register' } },
+  { id: 'hvac-equipment', iconSrc: '/icons/HVAC.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.hvacUnit', message: 'HVAC Unit' } },
+  { id: 'pipe-segment', iconSrc: '/icons/dwv-pipes.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.dwvPipe', message: 'DWV Pipe' } },
+  { id: 'pipe-trap', iconSrc: '/icons/dwv-pipes.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.trap', message: 'Trap' } },
+  { id: 'pipe-fitting', iconSrc: '/icons/duct-fitting.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.pipeFitting', message: 'Pipe Fitting' } },
+  { id: 'lineset', iconSrc: '/icons/lineset.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.lineset', message: 'Lineset' } },
+  { id: 'liquid-line', iconSrc: '/icons/lineset.webp', label: /* i18n */ { id: 'editor.actionMenu.structureTools.liquidLine', message: 'Liquid Line' } },
 ]