@pascal-app/editor 1.0.6 → 1.0.7

package/src/components/viewer/viewer-hover-label.tsx

@@ -1,15 +1,20 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
+import { usePascalI18n, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { nodeDisplayLabel } from '../../lib/node-display-label'
+import type { DescriptorTranslator } from '../../lib/room-name-messages'
 import { type ViewerNodes, zoneLabel } from '../../lib/viewer-selection'
 
 /** The hovered node's name, for the bottom pill. A room reads as the room. */
-export function viewerHoverLabel(hoveredId: string | null, nodes: ViewerNodes): string | null {
+export function viewerHoverLabel(
+  hoveredId: string | null,
+  nodes: ViewerNodes,
+  i18n: DescriptorTranslator,
+): string | null {
   const node = hoveredId ? nodes[hoveredId] : undefined
   if (!node) return null
-  return node.type === 'zone' ? zoneLabel(node) : nodeDisplayLabel(node)
+  return node.type === 'zone' ? zoneLabel(node, i18n) : nodeDisplayLabel(node)
 }
 
 /**
@@ -19,9 +24,12 @@ export function viewerHoverLabel(hoveredId: string | null, nodes: ViewerNodes):
  * the parametric scene store unless the surface passes its own graph.
  */
 export function ViewerHoverLabel({ nodes: nodesProp }: { nodes?: ViewerNodes }) {
+  const i18n = usePascalI18n()
   const sceneNodes = useScene((s) => s.nodes)
   const nodes = nodesProp ?? sceneNodes
-  const label = useViewer((s) => (s.walkthroughMode ? null : viewerHoverLabel(s.hoveredId, nodes)))
+  const label = useViewer((s) =>
+    s.walkthroughMode ? null : viewerHoverLabel(s.hoveredId, nodes, i18n),
+  )
   if (!label) return null
   return (
     <div

package/src/components/viewer/viewer-rooms.tsx

@@ -3,12 +3,16 @@
 import {
   type AnyNode,
   buildUnitReport,
+  polygonInteriorPoint,
   sceneRegistry,
+  useLocale,
+  usePascalI18n,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo } from 'react'
+import { SelectionCallout, useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useMemo } from 'react'
+import { Vector3 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
 import { resolveRoomAssemblyHeights } from '../../lib/room-assembly-overlay'
 import { roomFloorElevation } from '../../lib/room-handle-drag'
@@ -21,7 +25,9 @@ import {
 } from '../../lib/viewer-selection'
 import { RoomAssemblyMesh } from '../editor/room-highlight'
 import {
+  formatRoomArea,
   RoomLabelAnchor3D,
+  type RoomLabelEntry,
   RoomPillChip,
   RoomPillDetail,
   RoomPillsLayer3D,
@@ -38,6 +44,7 @@ import {
  * mounted at all, so they never catch a click.
  */
 export function ViewerRooms({ source }: { source: ViewerSource }) {
+  const i18n = usePascalI18n()
   useEffect(() => {
     const before = useViewer.getState().showZones
     useViewer.getState().setShowZones(false)
@@ -119,7 +126,7 @@ export function ViewerRooms({ source }: { source: ViewerSource }) {
               <RoomPillDetail
                 areaM2={entry.area}
                 color={zone.color}
-                name={zoneLabel(zone)}
+                name={zoneLabel(zone, i18n)}
                 view="3d"
                 zoneId={zone.id}
               />
@@ -138,7 +145,7 @@ export function ViewerRooms({ source }: { source: ViewerSource }) {
                   areaM2={entry.area}
                   color={zone.color}
                   elements={elements}
-                  name={zoneLabel(zone)}
+                  name={zoneLabel(zone, i18n)}
                   onClick={() => selectViewerRoom(zone.id, source)}
                   onHover={() => useViewer.getState().setHoveredId(zone.id)}
                   onLeave={() => {
@@ -157,10 +164,60 @@ export function ViewerRooms({ source }: { source: ViewerSource }) {
       {highlighted.map((room) => (
         <ViewerRoomHighlight key={room.zoneId} room={room} source={source} />
       ))}
+      {zoneId && levelId && !walkthrough && selectedIds.length === 0
+        ? (() => {
+            const entry = entries.find((candidate) => candidate.zoneId === zoneId)
+            const zone = nodes[zoneId]
+            const level = source.objectFor(levelId)
+            return entry && zone?.type === 'zone' && level ? (
+              <ViewerRoomCallout
+                entry={entry}
+                floorY={roomFloorElevation(nodes as Record<string, AnyNode>, zoneId)}
+                key={zoneId}
+                level={level}
+                name={zoneLabel(zone, i18n)}
+              />
+            ) : null
+          })()
+        : null}
     </>
   )
 }
 
+/** The selected room's callout: its name and area at a point inside it, and the close button. */
+function ViewerRoomCallout({
+  entry,
+  floorY,
+  level,
+  name,
+}: {
+  entry: RoomLabelEntry
+  floorY: number
+  level: NonNullable<ReturnType<ViewerSource['objectFor']>>
+  name: string
+}) {
+  const unit = useViewer((s) => s.unit)
+  const locale = useLocale()
+  const anchor = useMemo(() => {
+    const [x, z] = polygonInteriorPoint({ polygon: entry.polygon, holes: entry.holes })
+    return new Vector3(x, floorY + 0.05, z)
+  }, [entry.polygon, entry.holes, floorY])
+  const dismiss = useCallback(() => {
+    const { selection, setSelection } = useViewer.getState()
+    if (selection.zoneId === entry.zoneId) setSelection({ zoneId: null })
+  }, [entry.zoneId])
+  return (
+    <SelectionCallout
+      actions={[]}
+      anchor={anchor}
+      object={level}
+      onDismiss={dismiss}
+      subtitle={formatRoomArea(entry.area, unit, locale)}
+      title={name}
+    />
+  )
+}
+
 const parametricObject = (id: string) => sceneRegistry.nodes.get(id)
 
 /** `ViewerRooms` over the parametric scene store. */

package/src/components/viewer/viewer-scene-header.tsx

@@ -1,10 +1,18 @@
 'use client'
 
-import { getLevelDisplayName, type LevelNode, sceneRegistry, useScene } from '@pascal-app/core'
+import {
+  type LevelNode,
+  type PascalI18n,
+  sceneRegistry,
+  useLocale,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, ChevronRight, Layers } from 'lucide-react'
 import Link from 'next/link'
 import { type ReactNode, useMemo } from 'react'
+import { localizedLevelName } from '../../i18n/level-name'
 import { cn } from '../../lib/utils'
 import {
   applyViewerClick,
@@ -36,10 +44,10 @@ export type ViewerSceneHeaderProps = {
   source?: ViewerSource
 }
 
-const SECTION_TITLES: Record<ViewerSidebarSection['kind'], string> = {
-  units: 'Units',
-  rooms: 'Rooms',
-  zones: 'Zones',
+function sectionTitle(kind: ViewerSidebarSection['kind'], i18n: PascalI18n): string {
+  if (kind === 'units') return i18n._({ id: 'viewer.header.units', message: 'Units' })
+  if (kind === 'rooms') return i18n._({ id: 'viewer.header.rooms', message: 'Rooms' })
+  return i18n._({ id: 'viewer.header.zones', message: 'Zones' })
 }
 
 const parametricObject = (id: string) => sceneRegistry.nodes.get(id)
@@ -58,6 +66,9 @@ export const ViewerSceneHeader = ({
   stats,
   source: sourceProp,
 }: ViewerSceneHeaderProps) => {
+  const i18n = usePascalI18n()
+  const catalogVersion = i18n.getVersion()
+  const locale = useLocale()
   const sceneNodes = useScene((s) => s.nodes)
   const source = useMemo<ViewerSource>(
     () => sourceProp ?? { nodes: sceneNodes, objectFor: parametricObject },
@@ -70,10 +81,10 @@ export const ViewerSceneHeader = ({
 
   const crumbs = useMemo(
     () =>
-      viewerBreadcrumb(selection, focusedUnitId, nodes, (nodeId, levelId) =>
+      viewerBreadcrumb(selection, focusedUnitId, nodes, i18n, (nodeId, levelId) =>
         roomOfObject(nodeId, levelId, source),
       ),
-    [selection, focusedUnitId, nodes, source],
+    [selection, focusedUnitId, nodes, source, i18n, locale, catalogVersion],
   )
   const buildingId = crumbs.find((crumb) => crumb.kind === 'building')?.id ?? null
   // Highest first so the list reads top-down like a building section.
@@ -86,8 +97,8 @@ export const ViewerSceneHeader = ({
       .sort((a, b) => b.level - a.level)
   }, [buildingId, nodes])
   const sections = useMemo(
-    () => (selection.levelId ? viewerSidebarSections(selection.levelId, nodes) : []),
-    [selection.levelId, nodes],
+    () => (selection.levelId ? viewerSidebarSections(selection.levelId, nodes, i18n) : []),
+    [selection.levelId, nodes, i18n, locale, catalogVersion],
   )
 
   const handleCrumb = (crumb: ViewerCrumb) => {
@@ -113,7 +124,7 @@ export const ViewerSceneHeader = ({
         <div className="flex items-center gap-3 px-3 py-2.5">
           {onBack ? (
             <button
-              aria-label="Back"
+              aria-label={i18n._({ id: 'viewer.header.back', message: 'Back' })}
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-white/10"
               onClick={onBack}
               type="button"
@@ -122,7 +133,7 @@ export const ViewerSceneHeader = ({
             </button>
           ) : backHref === null ? null : (
             <Link
-              aria-label="Back"
+              aria-label={i18n._({ id: 'viewer.header.back', message: 'Back' })}
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-white/10"
               href={backHref}
               prefetch={false}
@@ -132,7 +143,7 @@ export const ViewerSceneHeader = ({
           )}
           <div className="min-w-0 flex-1">
             <div className="truncate font-medium text-foreground text-sm">
-              {projectName || 'Untitled'}
+              {projectName || i18n._({ id: 'viewer.header.untitled', message: 'Untitled' })}
             </div>
             {owner?.username && (
               <Link
@@ -151,7 +162,7 @@ export const ViewerSceneHeader = ({
 
         {crumbs.length > 0 && (
           <nav
-            aria-label="Selection"
+            aria-label={i18n._({ id: 'viewer.header.selection', message: 'Selection' })}
             className="flex flex-wrap items-center gap-x-1.5 gap-y-1 border-border/40 border-t px-3 py-2 text-xs"
             data-testid="viewer-breadcrumb"
           >
@@ -186,7 +197,7 @@ export const ViewerSceneHeader = ({
       {levels.length > 0 && (
         <div className="corner-smooth pointer-events-auto flex min-h-0 w-56 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out">
           <span className="px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
-            Levels
+            {i18n._({ id: 'viewer.header.levels', message: 'Levels' })}
           </span>
           <div className="flex min-h-0 flex-col overflow-y-auto">
             {levels.map((lvl) => {
@@ -216,7 +227,7 @@ export const ViewerSceneHeader = ({
                         <Layers className="h-3.5 w-3.5" />
                       </span>
                       <div className="min-w-0 flex-1 truncate text-left">
-                        {getLevelDisplayName(lvl)}
+                        {localizedLevelName(lvl, i18n, locale)}
                       </div>
                     </div>
                   </button>
@@ -228,7 +239,7 @@ export const ViewerSceneHeader = ({
                         key={section.kind}
                       >
                         <span className="block px-3 pt-2 pb-1 pl-9 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
-                          {SECTION_TITLES[section.kind]}
+                          {sectionTitle(section.kind, i18n)}
                         </span>
                         {section.rows.map((row) => {
                           const active =
@@ -257,7 +268,7 @@ export const ViewerSceneHeader = ({
                               />
                               <span className="min-w-0 flex-1 truncate">{row.label}</span>
                               <span className="shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums">
-                                {formatRoomArea(row.areaM2, unit)}
+                                {formatRoomArea(row.areaM2, unit, locale)}
                               </span>
                             </button>
                           )

package/src/components/viewer/viewer-stage-switcher.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { Box, Columns2, Map as MapIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
@@ -22,11 +23,12 @@ export function ViewerStageSwitcher({
   modes,
   onChange,
 }: ViewerStageSwitcherProps) {
+  const i18n = usePascalI18n()
   const enabledModes = normalizeViewerStageModes(modes)
 
   return (
     <div
-      aria-label="Viewer layout"
+      aria-label={i18n._({ id: 'viewer.stage.layout', message: 'Viewer layout' })}
       className={cn(
         'dark absolute top-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/10 bg-neutral-950/82 p-1 text-white shadow-elevation-4 backdrop-blur-xl',
         className,
@@ -54,7 +56,7 @@ export function ViewerStageSwitcher({
           active={mode === 'split'}
           className={hideSplitOnMobile && enabledModes.length > 1 ? 'hidden md:flex' : undefined}
           icon={<Columns2 />}
-          label="Split"
+          label={i18n._({ id: 'viewer.stage.split', message: 'Split' })}
           onClick={() => onChange('split')}
         />
       ) : null}

package/src/components/viewer-overlay.tsx

@@ -36,6 +36,14 @@ export const ViewerOverlay = ({
       <ViewerControlsBar
         canShowGuides={canShowGuides}
         canShowScans={canShowScans}
+        onDroneToggle={() => {
+          // Arm drone before first person so the controller never builds the walk's collider.
+          flushSync(() => {
+            useEditor.getState().setFirstPersonMovementMode('drone')
+            useEditor.getState().setFirstPersonMode(true)
+          })
+          requestWalkthroughPointerLock()
+        }}
         onWalkthroughToggle={() => {
           flushSync(() => useEditor.getState().setFirstPersonMode(true))
           requestWalkthroughPointerLock()

package/src/components/walkthrough-hud.tsx

@@ -1,15 +1,22 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import { usePascalI18n } from '@pascal-app/core'
+import { type ReactNode, useMemo } from 'react'
+import { displayRoomName } from '../lib/room-name-messages'
 import { cn } from '../lib/utils'
 import type { WalkthroughInteract } from '../store/use-first-person-hud'
 
 export type { WalkthroughInteract } from '../store/use-first-person-hud'
 
+/** A control shown in the HUD's key strip: its keys (as printed on the keycaps) and what they do. */
+export type WalkthroughHint = { keys: readonly string[]; action: string }
+
 export type WalkthroughHudProps = {
   floorLabel?: string | null
   zoneLabel?: string | null
   interact?: WalkthroughInteract
+  /** Movement controls listed before the cursor and exit pills. */
+  hints?: readonly WalkthroughHint[]
   /** Pointer lock temporarily released (OS screenshot) — the pill flips to
    *  "Click to resume" and lets clicks fall through to the canvas. */
   suspended?: boolean
@@ -39,6 +46,7 @@ export function WalkthroughHud({
   floorLabel,
   zoneLabel,
   interact = null,
+  hints,
   suspended = false,
   onExit,
   children,
@@ -63,7 +71,7 @@ export function WalkthroughHud({
         )}
         {zoneLabel && (
           <div className="corner-smooth rounded-full border border-border/40 bg-background/80 px-3 py-1 font-medium text-sm shadow-elevation-3 backdrop-blur-xl">
-            {zoneLabel}
+            <WalkthroughZoneName name={zoneLabel} />
           </div>
         )}
         {children}
@@ -83,6 +91,22 @@ export function WalkthroughHud({
           </div>
         ) : (
           <>
+            {hints && hints.length > 0 ? (
+              <div className={pillClass}>
+                {hints.map(({ keys, action }, index) => (
+                  <span className="flex items-center gap-1.5" key={action}>
+                    {index > 0 && <span className="text-muted-foreground/60">·</span>}
+                    {keys.map((key, keyIndex) => (
+                      <span className="flex items-center gap-1" key={key}>
+                        {keyIndex > 0 && <span className="text-muted-foreground/60">/</span>}
+                        <kbd className={kbdClass}>{key}</kbd>
+                      </span>
+                    ))}
+                    {action}
+                  </span>
+                ))}
+              </div>
+            ) : null}
             <div className={pillClass}>
               <kbd className={kbdClass}>P</kbd>
               free cursor
@@ -118,3 +142,52 @@ export function WalkthroughHud({
     </div>
   )
 }
+
+/** The drone's key strip: the movement controls of the viewer's `DroneController`. */
+function useDroneHints(): readonly WalkthroughHint[] {
+  const i18n = usePascalI18n()
+  return useMemo(
+    () => [
+      {
+        keys: ['WASD'],
+        action: i18n._({ id: 'editor.walkthroughHud.drone.move', message: 'move' }),
+      },
+      {
+        keys: ['Space', 'E'],
+        action: i18n._({ id: 'editor.walkthroughHud.drone.up', message: 'up' }),
+      },
+      {
+        keys: ['Q'],
+        action: i18n._({ id: 'editor.walkthroughHud.drone.down', message: 'down' }),
+      },
+      {
+        keys: ['Shift'],
+        action: i18n._({ id: 'editor.walkthroughHud.drone.boost', message: 'boost' }),
+      },
+      {
+        keys: ['Alt'],
+        action: i18n._({ id: 'editor.walkthroughHud.drone.slow', message: 'slow' }),
+      },
+    ],
+    [i18n],
+  )
+}
+
+/** The walkthrough HUD for the drone: the plain pointer dot and the flight keys, no room or door prompts. */
+export function DroneHud({
+  suspended,
+  onExit,
+  children,
+}: Pick<WalkthroughHudProps, 'suspended' | 'onExit' | 'children'>) {
+  return (
+    <WalkthroughHud hints={useDroneHints()} onExit={onExit} suspended={suspended}>
+      {children}
+    </WalkthroughHud>
+  )
+}
+
+/** The room the walker is in, in the UI language (the scene keeps its stored name). */
+function WalkthroughZoneName({ name }: { name: string }) {
+  const i18n = usePascalI18n()
+  return displayRoomName(name, i18n)
+}

package/src/hooks/use-keyboard.test.ts

@@ -18,7 +18,9 @@ import { useSidebarStore } from '../components/ui/primitives/sidebar'
 import { runRedo, runUndo } from '../lib/history'
 import { meshEditScope } from '../lib/interaction/scope'
 import { setSidebarTabIds } from '../lib/sidebar-panel'
-import useEditor from '../store/use-editor'
+import { armToolShortcut, toolShortcutForKey, withToolShortcut } from '../lib/tool-shortcuts'
+import { getWallDrawVariant, selectWallDrawVariant } from '../lib/wall-draw-variant'
+import useEditor, { normalizePersistedEditorLayoutState } from '../store/use-editor'
 import useInteractionScope from '../store/use-interaction-scope'
 import {
   armPaintFromShortcut,
@@ -164,6 +166,14 @@ describe('rotation shortcut ownership', () => {
     expect(isToolOwnedRotation()).toBe(true)
   })
 
+  test('leaves R and T, and so Shift+R, to the stair and elevator placement tools', () => {
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'stair' })
+    expect(isToolOwnedRotation()).toBe(true)
+
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'elevator' })
+    expect(isToolOwnedRotation()).toBe(true)
+  })
+
   test('does not reserve R for the wall tool: its shape is picked in the Build panel', () => {
     useEditor.getState().armToolMode({ mode: 'build', tool: 'wall' })
 
@@ -418,20 +428,35 @@ describe('B and P open their panel', () => {
     expect(useSidebarStore.getState().isCollapsed).toBe(false)
   })
 
-  test('B arms the wall tool on Rectangle and shows the Build panel', () => {
+  test('B arms the wall tool on the Rooms shape picked last and shows the Build panel', () => {
     setSidebarTabIds(['site', 'build', 'paint', 'items'])
     useEditor.getState().setActiveSidebarPanel('items')
     useSidebarStore.getState().setIsCollapsed(true)
-    useEditor.getState().setContinuation('wall', 'single')
+    selectWallDrawVariant('walls')
+    useEditor.getState().armToolMode({ mode: 'select' })
 
     armWallToolFromShortcut()
 
     const editor = useEditor.getState()
     expect(editor.mode).toBe('build')
     expect(editor.tool).toBe('wall')
-    expect(editor.getContinuation('wall')).toBe('rectangle')
+    expect(getWallDrawVariant()).toBe('walls')
     expect(editor.activeSidebarPanel).toBe('build')
     expect(useSidebarStore.getState().isCollapsed).toBe(false)
+    // The pick is a preference: it comes back with the saved editor layout.
+    expect(
+      normalizePersistedEditorLayoutState({ continuationByContext: { wall: 'single' } } as never)
+        .continuationByContext.wall,
+    ).toBe('single')
+  })
+
+  test('B draws a Rectangle until a Rooms shape is picked', () => {
+    expect(normalizePersistedEditorLayoutState({}).continuationByContext.wall).toBe('rectangle')
+    useEditor.setState({
+      continuationByContext: normalizePersistedEditorLayoutState({}).continuationByContext,
+    })
+    armWallToolFromShortcut()
+    expect(getWallDrawVariant()).toBe('rectangle')
   })
 
   // A host may drop the armed tool when the panel changes (the community does,
@@ -473,3 +498,59 @@ describe('B and P open their panel', () => {
     expect(useEditor.getState().activeSidebarPanel).toBe('build')
   })
 })
+
+describe('drafting tool shortcuts', () => {
+  const press = (code: string, mods: Partial<KeyboardEvent> = {}) =>
+    toolShortcutForKey({
+      code,
+      shiftKey: false,
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      repeat: false,
+      ...mods,
+    })
+
+  afterEach(() => {
+    setSidebarTabIds([])
+    useInteractionScope.getState().endIf(() => true)
+    useEditor.getState().setContinuation('wall', 'room')
+    useEditor.getState().armToolMode({ mode: 'select' })
+  })
+
+  test('keep the bare keys they would collide with: pan, rotate and operate', () => {
+    expect(press('KeyD', { shiftKey: true })).toBe('door')
+    expect(press('KeyW', { shiftKey: true })).toBe('window')
+    expect(press('KeyS', { shiftKey: true })).toBe('stair')
+    expect(press('KeyR', { shiftKey: true })).toBe('roof')
+    expect(press('KeyE', { shiftKey: true })).toBeNull()
+    for (const code of ['KeyD', 'KeyW', 'KeyS', 'KeyR', 'KeyE', 'KeyI', 'KeyA'])
+      expect(press(code)).toBeNull()
+    expect(press('KeyD', { shiftKey: true, ctrlKey: true })).toBeNull()
+    expect(press('KeyD', { shiftKey: true, repeat: true })).toBeNull()
+  })
+
+  test('stand down while a gesture holds Shift', () => {
+    useInteractionScope.getState().begin({ kind: 'box-select' })
+    expect(press('KeyD', { shiftKey: true })).toBeNull()
+  })
+
+  test('arm their tool with the Build panel showing, and name their key in tooltips', () => {
+    setSidebarTabIds(['build', 'items'])
+    useEditor.getState().setActiveSidebarPanel('items')
+    for (const [id, tool] of [
+      ['door', 'door'],
+      ['window', 'window'],
+      ['stair', 'stair'],
+      ['roof', 'roof'],
+    ] as const) {
+      armToolShortcut(id)
+      expect(useEditor.getState().mode).toBe('build')
+      expect(useEditor.getState().tool).toBe(tool)
+      expect(useEditor.getState().activeSidebarPanel).toBe('build')
+    }
+    expect(withToolShortcut('Door', 'door')).toBe('Door (Shift+D)')
+    expect(withToolShortcut('Wall', 'wall')).toBe('Wall (B)')
+    expect(withToolShortcut('Fence', 'fence')).toBe('Fence')
+  })
+})