@pascal-app/editor 1.0.6 → 1.1.0

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' } },
 ]

package/src/components/ui/action-menu/view-toggles.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'bun:test'
+import { adjacentWallsToggle } from './view-toggles'
+
+describe('walls below and above button', () => {
+  test('on the top storey it turns on only the walls below', () => {
+    expect(adjacentWallsToggle(false, { below: 'level_0', above: null })).toEqual({ below: true })
+  })
+
+  test('on the ground floor it turns on only the walls above', () => {
+    expect(adjacentWallsToggle(false, { below: null, above: 'level_1' })).toEqual({ above: true })
+  })
+
+  test('between two levels it turns both sides on, then both off', () => {
+    const levels = { below: 'level_0', above: 'level_2' }
+    expect(adjacentWallsToggle(false, levels)).toEqual({ below: true, above: true })
+    expect(adjacentWallsToggle(true, levels)).toEqual({ below: false, above: false })
+  })
+})