@pascal-app/editor 1.0.6 → 1.1.0

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/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/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