@pascal-app/editor 1.0.6 → 1.0.7

package/src/components/ui/panels/shape-choice.tsx

@@ -1,13 +1,14 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { Pentagon, Square } from 'lucide-react'
 import { cn } from '../../../lib/utils'
 
 export type OutlineShape = 'rectangle' | 'polygon'
 
 const SHAPES = [
-  { id: 'rectangle', label: 'Rectangle', Icon: Square },
-  { id: 'polygon', label: 'Polygon', Icon: Pentagon },
+  { id: 'rectangle', label: /* i18n */ { id: 'editor.panels.shapeChoice.rectangle', message: 'Rectangle' }, Icon: Square },
+  { id: 'polygon', label: /* i18n */ { id: 'editor.panels.shapeChoice.polygon', message: 'Polygon' }, Icon: Pentagon },
 ] as const
 
 const pill =
@@ -32,13 +33,14 @@ export function ShapeChoice({
   /** `data-shape-choice` hook for tests and proofs. */
   data?: string
 }) {
+  const i18n = usePascalI18n()
   return (
     <div
-      className={cn('flex min-h-7 items-center justify-between gap-2', className)}
+      className={cn('flex min-h-7 flex-wrap items-center justify-between gap-2', className)}
       data-shape-choice={data}
     >
       <span className="whitespace-nowrap">{label}</span>
-      <div className="flex items-center gap-1.5">
+      <div className="flex flex-wrap items-center gap-1.5">
         {SHAPES.map(({ id, label: shapeLabel, Icon }) => (
           <button
             className={pill}
@@ -49,7 +51,7 @@ export function ShapeChoice({
             type="button"
           >
             <Icon aria-hidden className="h-3 w-3" />
-            {shapeLabel}
+            {i18n._(shapeLabel)}
           </button>
         ))}
       </div>

package/src/components/ui/panels/wall-region-list.tsx

@@ -4,7 +4,7 @@ import {
   type AnyNodeId,
   useLiveNodeOverrides,
   useScene,
-  type WallFaceRegion,
+  type WallFaceRegion, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Trash2 } from 'lucide-react'
@@ -25,6 +25,7 @@ const ROW_ACTION_CLASS =
 
 /** The wall panel's "Paint regions" section: one row per region, select or delete. */
 export function WallPaintRegionList({ wallId }: { wallId: string }) {
+  const i18n = usePascalI18n()
   const nodes = useScene((state) => state.nodes)
   const materials = useScene((state) => state.materials)
   const unit = useViewer((state) => state.unit)
@@ -48,7 +49,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
   return (
     // Focus inside this list still lets Delete target the active region.
     <div className="contents" data-wall-region-list={wallId}>
-      <PanelSection title="Paint regions">
+      <PanelSection title={i18n._({ id: 'editor.panels.wallRegionList.paintRegions', message: 'Paint regions' })}>
         <div className="flex flex-col gap-1">
           {rows.map((row) => {
             const isActive = active?.wallId === wallId && active.regionId === row.id
@@ -75,6 +76,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
                       backgroundImage: row.finish.imageUrl
                         ? `url(${row.finish.imageUrl})`
                         : undefined,
+                      backgroundBlendMode: row.finish.tinted ? 'multiply' : undefined,
                     }}
                   />
                   <span className="flex min-w-0 flex-col leading-tight">
@@ -85,13 +87,13 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
                   </span>
                 </button>
                 <button
-                  aria-label="Delete region"
+                  aria-label={i18n._({ id: 'editor.panels.wallRegionList.deleteRegion', message: 'Delete region' })}
                   className={ROW_ACTION_CLASS}
                   onClick={() => {
                     if (isActive) setActive(null)
                     if (removeWallRegion(wallId, row.id)) sfxEmitter.emit('sfx:structure-delete')
                   }}
-                  title="Delete region"
+                  title={i18n._({ id: 'editor.panels.wallRegionList.deleteRegion', message: 'Delete region' })}
                   type="button"
                 >
                   <Trash2 className="h-3 w-3" />
@@ -99,9 +101,7 @@ export function WallPaintRegionList({ wallId }: { wallId: string }) {
               </div>
             )
           })}
-          {capNotice && (
-            <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>
-          )}
+          {capNotice && <div className="px-1 text-[11px] text-muted-foreground">{capNotice}</div>}
         </div>
       </PanelSection>
     </div>

package/src/components/ui/primitives/shortcut-token.tsx

@@ -1,6 +1,8 @@
 import { Icon } from '@iconify/react'
+import { usePascalI18n } from '@pascal-app/core'
 import type * as React from 'react'
 
+import { toolHintKey } from '../../../i18n/node-messages'
 import { cn } from '../../../lib/utils'
 
 const MOUSE_SHORTCUTS = {
@@ -70,20 +72,22 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
   const isCommand = COMMAND_VALUES.has(value)
   const isShift = value === 'Shift'
   const commandDisplay = IS_MAC ? '⌘' : 'Ctrl'
-  const commandLabel = IS_MAC ? 'Command' : 'Control'
+  const i18n = usePascalI18n()
+  const commandLabel = toolHintKey(IS_MAC ? 'Command' : 'Control', i18n)
+  const mouseLabel = mouseShortcut ? toolHintKey(mouseShortcut.label, i18n) : undefined
+  const shown = displayValue ?? toolHintKey(value, i18n)
 
   return (
     <kbd
       aria-label={
-        mouseShortcut?.label ??
-        (isCommand ? commandLabel : isShift ? 'Shift' : (displayValue ?? value))
+        mouseLabel ?? (isCommand ? commandLabel : isShift ? 'Shift' : shown)
       }
       className={cn(
         'inline-flex h-6 items-center rounded border border-border bg-muted px-2 font-medium font-mono text-[11px] text-muted-foreground',
         (mouseShortcut || isShift) && 'justify-center px-1.5',
         className,
       )}
-      title={mouseShortcut?.label ?? (isCommand ? commandLabel : isShift ? 'Shift' : value)}
+      title={mouseLabel ?? (isCommand ? commandLabel : isShift ? 'Shift' : shown)}
       {...props}
     >
       {mouseShortcut ? (
@@ -96,7 +100,7 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
             icon={mouseShortcut.icon}
             width={14}
           />
-          <span className="sr-only">{mouseShortcut.label}</span>
+          <span className="sr-only">{mouseLabel}</span>
         </>
       ) : isShift ? (
         // Icon rather than the ⇧ text glyph — the font renders the glyph's
@@ -117,7 +121,7 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
         // it up a touch on Mac. "Ctrl" stays at the token's normal size.
         <span className={IS_MAC ? 'text-[13px] leading-none' : undefined}>{commandDisplay}</span>
       ) : (
-        (displayValue ?? value)
+        shown
       )}
     </kbd>
   )

package/src/components/ui/sidebar/icon-rail.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
 import type { ComponentType, ReactNode } from 'react'
 import {
@@ -32,19 +33,19 @@ interface IconRailProps {
   className?: string
 }
 
-const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
+const sitePanel: { id: PanelId; iconSrc: string; label: MessageDescriptor } = {
   id: 'site',
   iconSrc: '/icons/level.webp',
-  label: 'Site',
+  label: /* i18n */ { id: 'editor.sidebar.iconRail.site', message: 'Site' },
 }
 
-const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
+const settingsPanel: { id: PanelId; iconSrc: string; label: MessageDescriptor } = {
   id: 'settings',
   iconSrc: '/icons/settings.webp',
-  label: 'Settings',
+  label: /* i18n */ { id: 'editor.sidebar.iconRail.settings', message: 'Settings' },
 }
 
-const panels: { id: PanelId; iconSrc: string; label: string }[] = [sitePanel, settingsPanel]
+const panels: { id: PanelId; iconSrc: string; label: MessageDescriptor }[] = [sitePanel, settingsPanel]
 
 export function IconRail({
   activePanel,
@@ -53,6 +54,7 @@ export function IconRail({
   extraPanels,
   className,
 }: IconRailProps) {
+  const i18n = usePascalI18n()
   const regularExtraPanels = extraPanels?.filter((panel) => !panel.pluginId && panel.id !== 'plugins')
   const pluginPanels = extraPanels?.filter((panel) => panel.pluginId)
   const pluginsPanel = extraPanels?.find((panel) => panel.id === 'plugins')
@@ -113,7 +115,7 @@ export function IconRail({
                 type="button"
               >
                 <img
-                  alt={panel.label}
+                  alt={i18n._(panel.label)}
                   className={cn(
                     'h-6 w-6 object-contain transition-all',
                     !isActive && 'opacity-50 saturate-0',
@@ -122,7 +124,7 @@ export function IconRail({
                 />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
+            <TooltipContent side="right">{i18n._(panel.label)}</TooltipContent>
           </Tooltip>
         )
       })}
@@ -144,7 +146,7 @@ export function IconRail({
                 type="button"
               >
                 <img
-                  alt={panel.label}
+                  alt={i18n._(panel.label)}
                   className={cn(
                     'h-6 w-6 object-contain transition-all',
                     !isActive && 'opacity-50 saturate-0',
@@ -153,7 +155,7 @@ export function IconRail({
                 />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
+            <TooltipContent side="right">{i18n._(panel.label)}</TooltipContent>
           </Tooltip>
         )
       })}

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { AssetInput } from '@pascal-app/core'
+import { type AssetInput, type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Root as TooltipRoot } from '@radix-ui/react-tooltip'
 import NextImage from 'next/image'
 import { useMemo, useState } from 'react'
@@ -21,10 +21,10 @@ export type FunctionTreeNode = {
   children: FunctionTreeNode[]
 }
 
-const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: string }> = [
-  { id: 'library', label: 'Library' },
-  { id: 'community', label: 'Community' },
-  { id: 'mine', label: 'Mine' },
+const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: MessageDescriptor }> = [
+  { id: 'library', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.library', message: 'Library' } },
+  { id: 'community', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.community', message: 'Community' } },
+  { id: 'mine', label: /* i18n */ { id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.mine', message: 'Mine' } },
 ]
 
 /** Every slug at or below `node`, so a non-leaf selection matches descendants. */
@@ -64,6 +64,7 @@ export function FunctionTreePanel({
   leadingTile?: React.ReactNode
   emptyState?: React.ReactNode
 }) {
+  const i18n = usePascalI18n()
   const [activeRootSlug, setActiveRootSlug] = useState<string | null>(
     functionTree[0]?.slug ?? null,
   )
@@ -178,7 +179,7 @@ export function FunctionTreePanel({
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
             }}
-            placeholder="Search..."
+            placeholder={i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.search', message: 'Search...' })}
             type="text"
             value={search}
           />
@@ -197,7 +198,7 @@ export function FunctionTreePanel({
                   onClick={() => setActiveSource(isActive ? null : chip.id)}
                   type="button"
                 >
-                  {chip.label}
+                  {i18n._(chip.label)}
                 </button>
               )
             })}
@@ -217,7 +218,7 @@ export function FunctionTreePanel({
               onClick={() => setActiveChildSlug(null)}
               type="button"
             >
-              All
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.all', message: 'All' })}
             </button>
             {activeRoot.children.map((child) => {
               const isActive = activeChildSlug === child.slug
@@ -250,8 +251,7 @@ export function FunctionTreePanel({
         ) : isServerSearch && search && searchResults?.length === 0 ? (
           (emptyState ?? (
             <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
-              No results for &ldquo;{search}&rdquo;
-            </div>
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.functionTreePanel.noResultsForSearch', message: 'No results for “{search}”', values: { search } })}</div>
           ))
         ) : (
           <ItemCatalog

package/src/components/ui/sidebar/panels/items-panel/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type { AssetInput } from '@pascal-app/core'
 import NextImage from 'next/image'
 import { useEffect, useState } from 'react'
@@ -98,6 +99,7 @@ function LegacyItemsPanel({
   showSourceFilter?: boolean
   showTagFilters?: boolean
 }) {
+  const i18n = usePascalI18n()
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
   const setMode = useEditor((s) => s.setMode)
@@ -167,9 +169,9 @@ function LegacyItemsPanel({
   // filter even before they own any items. Selecting "Mine" with no
   // matching items falls through to the empty/no-results state.
   const sourceChips: Array<{ id: AssetInput['source']; label: string }> = [
-    { id: 'library', label: 'Library' },
-    { id: 'community', label: 'Community' },
-    { id: 'mine', label: 'Mine' },
+    { id: 'library', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.library', message: 'Library' }) },
+    { id: 'community', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.community', message: 'Community' }) },
+    { id: 'mine', label: i18n._({ id: 'editor.sidebar.panels.itemsPanel.mine', message: 'Mine' }) },
   ]
   const allTags = Array.from(new Set(categoryItems.flatMap((item) => item.tags ?? [])))
   const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t))
@@ -215,13 +217,13 @@ function LegacyItemsPanel({
               type="button"
             >
               <NextImage
-                alt={cat.label}
+                alt={i18n._(cat.label)}
                 className={cn('size-7 object-contain', !isActive && 'opacity-60 grayscale')}
                 height={28}
                 src={cat.iconSrc}
                 width={28}
               />
-              <span className="font-medium text-[10px] leading-none">{cat.label}</span>
+              <span className="font-medium text-[10px] leading-none">{i18n._(cat.label)}</span>
             </button>
           )
         })}
@@ -242,7 +244,7 @@ function LegacyItemsPanel({
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
             }}
-            placeholder="Search..."
+            placeholder={i18n._({ id: 'editor.sidebar.panels.itemsPanel.search', message: 'Search...' })}
             type="text"
             value={search}
           />
@@ -284,7 +286,7 @@ function LegacyItemsPanel({
                   onClick={() => setActivePlacementTag(null)}
                   type="button"
                 >
-                  All
+                  {i18n._({ id: 'editor.sidebar.panels.itemsPanel.all', message: 'All' })}
                 </button>
                 {placementTags.map((tag) => {
                   const count = placementCount(tag)
@@ -376,8 +378,7 @@ function LegacyItemsPanel({
         ) : isServerSearch && search && searchResults?.length === 0 ? (
           (emptyState ?? (
             <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
-              No results for &ldquo;{search}&rdquo;
-            </div>
+              {i18n._({ id: 'editor.sidebar.panels.itemsPanel.noResultsForSearch', message: 'No results for “{search}”', values: { search } })}</div>
           ))
         ) : (
           <ItemCatalog

package/src/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -73,6 +73,7 @@ import { Switch } from './../../../../../components/ui/primitives/switch'
 import { cn } from './../../../../../lib/utils'
 import { refusedObjectsNotice } from './../../../../../components/editor/group-actions'
 import { addStoreyBelow, addStoreyOnTop } from './../../../../../lib/add-storey'
+import { offerExteriorWallCopy } from './../../../../../components/ui/level-wall-copy-prompt'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import { bringBuildArtifacts } from './../../../../../lib/scene-clipboard'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
@@ -423,10 +424,12 @@ function FloorSettingsSection() {
   const addFloor = () => {
     const newLevel = addStoreyOnTop(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
+    offerExteriorWallCopy(newLevel.id)
   }
   const addBasement = () => {
     const newLevel = addStoreyBelow(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
+    offerExteriorWallCopy(newLevel.id)
   }
 
   return (

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -1,3 +1,4 @@
+import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Keyboard } from 'lucide-react'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
@@ -12,27 +13,31 @@ import {
   ShortcutToken,
   shortcutDisplayValue,
 } from './../../../../../components/ui/primitives/shortcut-token'
+import { TOOL_SHORTCUT_KEYS } from './../../../../../lib/tool-shortcuts'
 
 type Shortcut = {
-  keys: string[]
+  keys: readonly string[]
   action: string
   note?: string
 }
 
 type ShortcutCategory = {
-  title: string
+  title: MessageDescriptor
   shortcuts: Shortcut[]
 }
 
 const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
-    title: 'Editor Navigation',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.editorNavigation',
+      message: 'Editor Navigation',
+    },
     shortcuts: [
       { keys: ['1'], action: 'Switch to Site' },
       { keys: ['2'], action: 'Switch to Building' },
       { keys: ['\\'], action: 'Open or close the split view' },
-      { keys: ['F'], action: 'Open the items catalog with the item tool' },
-      { keys: ['Z'], action: 'Draw a zone' },
+      { keys: TOOL_SHORTCUT_KEYS.item, action: 'Open the items catalog with the item tool' },
+      { keys: TOOL_SHORTCUT_KEYS.zone, action: 'Draw a zone' },
       {
         keys: ['Cmd/Ctrl', 'Arrow Up'],
         action: 'Select next level in the active building',
@@ -45,12 +50,21 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Modes & History',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.modesHistory',
+      message: 'Modes & History',
+    },
     shortcuts: [
-      { keys: ['V'], action: 'Switch to Select mode' },
-      { keys: ['B'], action: 'Switch to Build mode' },
-      { keys: ['M'], action: 'Activate the last measurement tool' },
-      { keys: ['X'], action: 'Switch to Delete mode' },
+      { keys: TOOL_SHORTCUT_KEYS.select, action: 'Switch to Select mode' },
+      {
+        keys: TOOL_SHORTCUT_KEYS.wall,
+        action: 'Switch to Build mode, drawing with the last Rooms shape',
+        note: 'Rectangle, Polygon or Walls, whichever you picked last; Rectangle the first time.',
+      },
+      { keys: TOOL_SHORTCUT_KEYS.measurement, action: 'Activate the last measurement tool' },
+      { keys: TOOL_SHORTCUT_KEYS.paint, action: 'Switch to Paint mode' },
+      { keys: TOOL_SHORTCUT_KEYS.terrain, action: 'Sculpt the ground (terrain)' },
+      { keys: TOOL_SHORTCUT_KEYS.delete, action: 'Switch to Delete mode' },
       {
         keys: ['Esc'],
         action: 'Cancel the active tool and return to Select mode',
@@ -63,7 +77,30 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Selection',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.buildTools',
+      message: 'Build Tools',
+    },
+    shortcuts: [
+      {
+        keys: TOOL_SHORTCUT_KEYS.door,
+        action: 'Place a door',
+        note: 'D alone pans the view. While placing, the door swings toward the side of the wall the cursor is on; R flips it.',
+      },
+      { keys: TOOL_SHORTCUT_KEYS.window, action: 'Place a window', note: 'W alone pans the view.' },
+      { keys: TOOL_SHORTCUT_KEYS.stair, action: 'Place stairs', note: 'S alone pans the view.' },
+      {
+        keys: TOOL_SHORTCUT_KEYS.roof,
+        action: 'Draw a roof',
+        note: "R alone still rotates or flips the selection, and while placing it stays the placement's own R.",
+      },
+    ],
+  },
+  {
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.selection',
+      message: 'Selection',
+    },
     shortcuts: [
       {
         keys: ['Cmd/Ctrl', 'C'],
@@ -78,8 +115,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'V'],
         action: 'Paste and place copied objects',
-        note:
-          'Carries a preview under the cursor. Click to place it, or press Escape to cancel.',
+        note: 'Carries a preview under the cursor. Click to place it, or press Escape to cancel.',
       },
       {
         keys: ['Cmd/Ctrl', 'Left click'],
@@ -105,14 +141,23 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'G'],
         action: 'Group the multi-selection (session only)',
-        note:
-          'Editor-only. Plain click a member later to reselect the whole group. Not saved with the project.',
+        note: 'Editor-only. Plain click a member later to reselect the whole group. Not saved with the project.',
       },
       {
         keys: ['Cmd/Ctrl', 'Shift', 'G'],
         action: 'Ungroup the session selection',
         note: 'Keeps the current selection; only dissolves the session group.',
       },
+      {
+        keys: ['Arrow keys'],
+        action: 'Nudge the selected wall 1 in (1 cm in metric)',
+        note: 'In the floor plan. Stops where it lines up with a parallel wall; joined walls follow.',
+      },
+      {
+        keys: ['Tab'],
+        action: 'Select the next object under the pointer',
+        note: 'In the floor plan, for walls that overlap or hide under another. Shift+Tab goes back.',
+      },
       {
         keys: ['Esc'],
         action: 'Clear the selection',
@@ -121,7 +166,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Direct Manipulation',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.directManipulation',
+      message: 'Direct Manipulation',
+    },
     shortcuts: [
       {
         keys: ['Cmd/Ctrl', 'Left click'],
@@ -141,7 +189,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Drawing Tools',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.drawingTools',
+      message: 'Drawing Tools',
+    },
     shortcuts: [
       // Shift and Ctrl each mean one thing held and another tapped, and only
       // the hold was documented — which read as the taps not existing. Both
@@ -157,9 +208,9 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
         note: 'Tap and release on its own. Use it when the default half-metre grid is too coarse — placing a window, for instance.',
       },
       {
-        keys: ['Shift'],
-        action: 'Bypass guided snapping and angle constraints',
-        note: 'Hold during the active gesture. Passive guide or measurement feedback may stay visible.',
+        keys: ['Alt'],
+        action: 'Bypass snapping, angle constraints and collisions',
+        note: 'Hold during the active gesture; release to snap again. Passive guide or measurement feedback may stay visible.',
       },
       {
         keys: ['Shift'],
@@ -169,7 +220,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Item Placement',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.itemPlacement',
+      message: 'Item Placement',
+    },
     shortcuts: [
       {
         keys: ['R', 'T'],
@@ -177,7 +231,8 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       },
       {
         keys: ['E'],
-        action: 'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
+        action:
+          'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
       },
       {
         keys: ['Shift'],
@@ -187,12 +242,15 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Camera',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.camera',
+      message: 'Camera',
+    },
     shortcuts: [
       {
         keys: ['W', 'A', 'S', 'D'],
         action: 'Pan camera',
-        note: 'Moves in screen space, similar to dragging the camera view.',
+        note: 'Moves in screen space, similar to dragging the camera view. With Shift, W, S and D place a window, stairs and a door instead.',
       },
       {
         keys: ['Middle click'],
@@ -208,7 +266,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   },
 ]
 
-function ShortcutKeys({ keys }: { keys: string[] }) {
+function ShortcutKeys({ keys }: { keys: readonly string[] }) {
   return (
     <div className="flex flex-wrap items-center gap-1">
       {keys.map((key, index) => (
@@ -222,32 +280,44 @@ function ShortcutKeys({ keys }: { keys: string[] }) {
 }
 
 export function KeyboardShortcutsDialog() {
+  const i18n = usePascalI18n()
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button className="w-full justify-start gap-2" variant="outline">
           <Keyboard className="size-4" />
-          Keyboard shortcuts
+          {i18n._({
+            id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.keyboardShortcuts',
+            message: 'Keyboard shortcuts',
+          })}
         </Button>
       </DialogTrigger>
       <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0 sm:max-w-3xl">
         <DialogHeader className="shrink-0 border-b px-6 py-4">
-          <DialogTitle>Keyboard shortcuts</DialogTitle>
+          <DialogTitle>
+            {i18n._({
+              id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.keyboardShortcuts',
+              message: 'Keyboard shortcuts',
+            })}
+          </DialogTitle>
           <DialogDescription>
-            Shortcuts are context-aware. Guided constraints are enabled by default; hold Shift
-            during an active gesture to build freely.
+            {i18n._({
+              id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.shortcutsAreContextAwareGuidedConstraints',
+              message:
+                'Shortcuts are context-aware. Snapping is a visible mode: tap Shift to cycle it, hold Alt during a gesture to place freely.',
+            })}
           </DialogDescription>
         </DialogHeader>
 
         <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
           {SHORTCUT_CATEGORIES.map((category) => (
-            <section className="space-y-2" key={category.title}>
-              <h3 className="font-medium text-sm">{category.title}</h3>
+            <section className="space-y-2" key={category.title.id}>
+              <h3 className="font-medium text-sm">{i18n._(category.title)}</h3>
               <div className="overflow-hidden rounded-md border border-border/80">
                 {category.shortcuts.map((shortcut, index) => (
                   <div
                     className="grid grid-cols-[minmax(130px,220px)_1fr] gap-3 px-3 py-2"
-                    key={`${category.title}-${shortcut.action}`}
+                    key={`${category.title.id}-${shortcut.action}`}
                   >
                     <ShortcutKeys keys={shortcut.keys} />
                     <div>