@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/editor/node-arrow-handles.tsx

@@ -9,6 +9,7 @@ import {
   createAngleAccumulator,
   createSceneApi,
   DEFAULT_ANGLE_STEP,
+  formatAngleRadians,
   type HandleDescriptor,
   type HandlePortal,
   type LatchHandle,
@@ -21,7 +22,6 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -41,7 +41,6 @@ import {
   Vector3,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
 import { EDITOR_LAYER } from '../../lib/constants'
@@ -61,7 +60,6 @@ import useInteractionScope, {
   useMovingNode,
 } from '../../store/use-interaction-scope'
 import useOpeningGuides from '../../store/use-opening-guides'
-import { formatAngleRadians } from '../tools/shared/segment-angle'
 import {
   ARROW_COLOR,
   ARROW_HOVER_COLOR,
@@ -78,6 +76,7 @@ import {
 import { createLinearResizeDragBinding, linearResizeFactor } from './handles/linear-resize-drag'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
+import { Html } from './localized-html'
 
 // Pooled scratch for the handle rig's world-relative pose mapping.
 const _rigRelative = new Matrix4()

package/src/components/editor/open-wall-ends-3d-layer.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { type OpenWallEnd, sceneRegistry } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
+import { MEASUREMENT_DANGLING_COLOR, useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
 import { memo, useEffect, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, type Group, RingGeometry } from 'three'
@@ -14,11 +13,11 @@ import {
 } from '../../hooks/use-open-wall-ends'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
-import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
 import { cn } from '../../lib/utils'
 import useEditor from '../../store/use-editor'
 import { isViewVisible, VIEW_3D, visibleScene } from '../../store/view-layout'
 import { JoinWallsPill } from './join-walls-pill'
+import { Html } from './localized-html'
 import { OpenWallEndsHint } from './open-wall-ends-hint'
 
 /**

package/src/components/editor/open-wall-ends-hint.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { type AnyNodeId, emitter, type OpenWallEnd } from '@pascal-app/core'
+import { MEASUREMENT_DANGLING_COLOR } from '@pascal-app/viewer'
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { openWallEndsSummary } from '../../lib/floorplan/open-wall-ends'
-import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
 
 // The viewer area holds the floor plan and the 3D view side by side, so its
 // top centre clears both views' corner controls in 2D, 3D and split alike.

package/src/components/editor/opening-guides-3d-layer.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { memo, useEffect, useLayoutEffect, useMemo } from 'react'
 import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
@@ -10,6 +9,7 @@ import useOpeningGuides, {
   type OpeningGuide3D,
   type OpeningGuideVec3,
 } from '../../store/use-opening-guides'
+import { Html } from './localized-html'
 import { formatMeasurement } from './measurement-pill'
 
 const DIMENSION_COLOR = 0x81_8c_f8 // indigo — a neutral measurement

package/src/components/editor/quick-measurement-card.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import type { QuickMeasurementMetric, QuickMeasurementReport } from '@pascal-app/core'
+import { formatAreaLabel, formatLinearMeasurement, formatVolumeLabel } from '@pascal-app/core'
 import { Crosshair, MapPin } from 'lucide-react'
 import { memo } from 'react'
-import { formatAreaLabel, formatLinearMeasurement, formatVolumeLabel } from '../../lib/measurements'
 
 function formatMetric(
   metric: QuickMeasurementMetric,

package/src/components/editor/registry-action-contributions.test.tsx

@@ -1,7 +1,13 @@
 import { afterEach, describe, expect, test } from 'bun:test'
-import { type AnyNode, registerNode, useInteractive } from '@pascal-app/core'
+import { type AnyNode, type MechanismPart, registerNode, useInteractive } from '@pascal-app/core'
+import type { MouseEvent, ReactElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MechanismButton, selectedMechanismNode } from './registry-action-contributions'
+import {
+  MechanismButton,
+  MechanismPartButton,
+  NodeMechanismActions,
+  soleSelectedNode,
+} from './registry-action-contributions'
 
 const switchMechanism = {
   has: (node: AnyNode) => (node as unknown as { joints: number }).joints > 0,
@@ -23,6 +29,30 @@ function articulated(joints: number): AnyNode {
   return { object: 'node', id: `${kind}_1`, type: kind, joints } as unknown as AnyNode
 }
 
+const shutters: MechanismPart = {
+  id: 'shutters',
+  label: 'Shutters',
+  icon: 'shutters',
+  verb: 'open',
+  has: () => true,
+  isOn: (node, state) => Boolean(state.mechanisms[`${node.id}:shutters` as never]),
+  set: (node, on) => useInteractive.getState().setMechanism(`${node.id}:shutters` as never, on),
+}
+
+function shuttered(): AnyNode {
+  const kind = `test:shuttered-${crypto.randomUUID()}`
+  registerNode({
+    kind,
+    schemaVersion: 1,
+    category: 'structure',
+    defaults: () => ({}),
+    capabilities: {
+      mechanism: { ...switchMechanism, verb: 'open', icon: 'window', parts: [shutters] },
+    },
+  } as never)
+  return { object: 'node', id: `${kind}_1`, type: kind, joints: 1 } as unknown as AnyNode
+}
+
 const byId = (...nodes: AnyNode[]) => Object.fromEntries(nodes.map((node) => [node.id, node]))
 
 afterEach(() => {
@@ -33,17 +63,20 @@ afterEach(() => {
 describe('mechanism action in the action menu', () => {
   test('the only selected node gets Play when its kind declares a mechanism', () => {
     const node = articulated(2)
-    expect(selectedMechanismNode([node.id], byId(node))).toBe(node)
+    expect(soleSelectedNode([node.id], byId(node))).toBe(node)
+    expect(renderToStaticMarkup(<NodeMechanismActions node={node} />)).toContain(
+      'aria-label="Play"',
+    )
   })
 
   test('no Play without moving parts, for a multi-selection, or without the capability', () => {
     const still = articulated(0)
-    expect(selectedMechanismNode([still.id], byId(still))).toBeUndefined()
+    expect(renderToStaticMarkup(<NodeMechanismActions node={still} />)).toBe('')
 
     const node = articulated(2)
     const other = { object: 'node', id: 'other_1', type: 'other' } as unknown as AnyNode
-    expect(selectedMechanismNode([node.id, other.id], byId(node, other))).toBeUndefined()
-    expect(selectedMechanismNode([other.id], byId(other))).toBeUndefined()
+    expect(soleSelectedNode([node.id, other.id], byId(node, other))).toBeUndefined()
+    expect(renderToStaticMarkup(<NodeMechanismActions node={other} />)).toBe('')
   })
 
   test('the button reads Play, then Stop while the mechanism runs', () => {
@@ -61,3 +94,31 @@ describe('mechanism action in the action menu', () => {
     expect(running).toContain('aria-pressed="true"')
   })
 })
+
+describe('mechanism parts in the action menu', () => {
+  test('a window with shutters gets Open shutters beside Open', () => {
+    const markup = renderToStaticMarkup(<NodeMechanismActions node={shuttered()} />)
+    expect(markup.match(/aria-label="[^"]*"/g)).toEqual([
+      'aria-label="Open"',
+      'aria-label="Open shutters"',
+    ])
+  })
+
+  test('the shutters button opens them alone, then reads Close shutters', () => {
+    const node = shuttered()
+    let button: ReactElement<{ onClick: (event: MouseEvent) => void }> | undefined
+    // Rendering the button as a hook call hands over the element it returns, onClick included.
+    function Probe() {
+      button = MechanismPartButton({ node, part: shutters, running: false }) as typeof button
+      return null
+    }
+    renderToStaticMarkup(<Probe />)
+    button?.props.onClick({ stopPropagation: () => {} } as MouseEvent)
+    expect(shutters.isOn(node, useInteractive.getState())).toBe(true)
+    expect(switchMechanism.isOn(node, useInteractive.getState())).toBe(false)
+
+    const open = renderToStaticMarkup(<MechanismPartButton node={node} part={shutters} running />)
+    expect(open).toContain('aria-label="Close shutters"')
+    expect(open).toContain('aria-pressed="true"')
+  })
+})

package/src/components/editor/registry-action-contributions.tsx

@@ -4,10 +4,14 @@ import {
   type AnyNode,
   type AnyNodeId,
   type MechanismCapability,
+  type MechanismPart,
   nodeMechanism,
+  nodeMechanismParts,
   nodeRegistry,
   toggleMechanism,
+  toggleMechanismPart,
   useInteractive,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
@@ -16,6 +20,7 @@ import { type ComponentType, lazy, Suspense } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
 import { ActionMenuButton } from './action-menu-button'
+import { InspectorExtensionActions } from './inspector-extension-actions'
 
 type Loader = () => Promise<{ default: ComponentType }>
 const lazyCache = new WeakMap<Loader, ComponentType>()
@@ -30,13 +35,12 @@ function contribution(kind: string): ComponentType | null {
   return component
 }
 
-/** The node the action menu's Play/Stop runs: the only selected node, when its kind declares a mechanism. */
-export function selectedMechanismNode(
+/** The node the action menu's mechanism buttons run: the only selected node. */
+export function soleSelectedNode(
   selectedIds: readonly string[],
   nodes: Readonly<Record<string, AnyNode>>,
 ): AnyNode | undefined {
-  const node = selectedIds.length === 1 ? nodes[selectedIds[0]!] : undefined
-  return nodeMechanism(node) ? node : undefined
+  return selectedIds.length === 1 ? nodes[selectedIds[0]!] : undefined
 }
 
 function MechanismGlyph({
@@ -61,6 +65,34 @@ function MechanismGlyph({
   return <Glyph className="h-4 w-4" />
 }
 
+/** Two louvred leaves: shut across the window, or swung out to its sides. */
+function ShuttersGlyph({ open }: { open: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-4 w-4"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      {open ? (
+        <>
+          <rect height="16" rx="1" width="8" x="8" y="4" />
+          <path d="M8 4 3 6v12l5 2M16 4l5 2v12l-5 2" />
+        </>
+      ) : (
+        <>
+          <rect height="18" rx="1" width="16" x="4" y="3" />
+          <path d="M12 3v18M7 8h2M7 12h2M7 16h2M15 8h2M15 12h2M15 16h2" />
+        </>
+      )}
+    </svg>
+  )
+}
+
 export function MechanismButton({
   node,
   mechanism,
@@ -70,7 +102,12 @@ export function MechanismButton({
   mechanism: MechanismCapability
   running: boolean
 }) {
-  const label = mechanism.icon ? (running ? 'Close' : 'Open') : running ? 'Stop' : 'Play'
+  const i18n = usePascalI18n()
+  const label = i18n._({
+    id: 'editor.mechanismAction',
+    message: '{action, select, close {Close} open {Open} stop {Stop} other {Play}}',
+    values: { action: mechanism.icon ? (running ? 'close' : 'open') : running ? 'stop' : 'play' },
+  })
   return (
     <ActionMenuButton
       keys={['E']}
@@ -86,21 +123,83 @@ export function MechanismButton({
   )
 }
 
-/** Play/Stop for a single selected node whose kind declares `capabilities.mechanism`. */
-function MechanismAction() {
-  const selected = useViewer((s) => s.selection.selectedIds)
-  const node = useScene((s) => selectedMechanismNode(selected, s.nodes))
+/** A second control beside the main one (a window's shutters), with its own running state. */
+export function MechanismPartButton({
+  node,
+  part,
+  running,
+}: {
+  node: AnyNode
+  part: MechanismPart
+  running: boolean
+}) {
+  const i18n = usePascalI18n()
+  const label =
+    part.icon === 'shutters'
+      ? i18n._({
+          id: 'editor.mechanismPartAction.shutters',
+          message: '{action, select, close {Close shutters} other {Open shutters}}',
+          values: { action: running ? 'close' : 'open' },
+        })
+      : i18n._({
+          id: 'editor.mechanismAction',
+          message: '{action, select, close {Close} open {Open} stop {Stop} other {Play}}',
+          values: {
+            action: part.verb === 'open' ? (running ? 'close' : 'open') : running ? 'stop' : 'play',
+          },
+        })
+  return (
+    <ActionMenuButton
+      label={label}
+      onClick={(event) => {
+        event.stopPropagation()
+        toggleMechanismPart(part, node)
+      }}
+      pressed={running}
+    >
+      {part.icon === 'shutters' ? (
+        <ShuttersGlyph open={!running} />
+      ) : (
+        <MechanismGlyph icon={undefined} running={running} />
+      )}
+    </ActionMenuButton>
+  )
+}
+
+function MechanismPartAction({ node, part }: { node: AnyNode; part: MechanismPart }) {
+  const running = useInteractive((s) => part.isOn(node, s))
+  return <MechanismPartButton node={node} part={part} running={running} />
+}
+
+/**
+ * Play/Stop for a kind declaring `capabilities.mechanism`, then one button per
+ * part the node has. Parts don't need the main mechanism: a fixed window can
+ * still have shutters.
+ */
+export function NodeMechanismActions({ node }: { node: AnyNode }) {
   const mechanism = nodeMechanism(node)
-  const running = useInteractive((s) => (node && mechanism ? mechanism.isOn(node, s) : false))
-  return node && mechanism ? (
-    <MechanismButton mechanism={mechanism} node={node} running={running} />
-  ) : null
+  const running = useInteractive((s) => (mechanism ? mechanism.isOn(node, s) : false))
+  return (
+    <>
+      {mechanism ? <MechanismButton mechanism={mechanism} node={node} running={running} /> : null}
+      {nodeMechanismParts(node).map((part) => (
+        <MechanismPartAction key={part.id} node={node} part={part} />
+      ))}
+    </>
+  )
+}
+
+function MechanismActions() {
+  const selected = useViewer((s) => s.selection.selectedIds)
+  const node = useScene((s) => soleSelectedNode(selected, s.nodes))
+  return node ? <NodeMechanismActions node={node} /> : null
 }
 
 /**
  * The buttons kinds add to the action menu for selections holding them
  * (`extensions['pascal:editor/floorplan'].actionMenu.actions`), in 2D and 3D
- * alike. Each contribution reads the selection and decides its own visibility.
+ * alike, then one per plugin inspector extension of the selected node. Each
+ * contribution reads the selection and decides its own visibility.
  */
 export function RegistryActionContributions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -118,7 +217,7 @@ export function RegistryActionContributions() {
   )
   return (
     <>
-      <MechanismAction />
+      <MechanismActions />
       {kinds.map((kind) => {
         const Contribution = contribution(kind)
         return Contribution ? (
@@ -127,6 +226,7 @@ export function RegistryActionContributions() {
           </Suspense>
         ) : null
       })}
+      <InspectorExtensionActions />
     </>
   )
 }

package/src/components/editor/riser-diagram-panel.tsx

@@ -1,9 +1,18 @@
 'use client'
 
-import { type AnyNodeId, buildRiserDiagram, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  buildRiserDiagram,
+  type PascalI18n,
+  type RiserMarker,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { X } from 'lucide-react'
 import { useMemo } from 'react'
+import { inspectorOptionDescriptor } from '../../i18n/node-messages'
 import useEditor from '../../store/use-editor'
 
 // Set per theme on the panel root; the light values are darker so the 9-unit
@@ -33,6 +42,7 @@ export function RiserDiagramPanel() {
 }
 
 function RiserDiagramContent() {
+  const i18n = usePascalI18n()
   const setRiserOpen = useEditor((s) => s.setRiserOpen)
   const nodes = useScene((s) => s.nodes)
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -47,15 +57,30 @@ function RiserDiagramContent() {
   const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
 
   return (
-    <div className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]">
+    <div
+      data-surface="riser-diagram"
+      className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]"
+    >
       <div className="flex items-center justify-between border-border/40 border-b px-4 py-2.5">
         <div className="flex flex-col">
-          <span className="font-medium text-sm">Riser Diagram</span>
-          <span className="text-muted-foreground text-xs">DWV plumbing isometric</span>
+          <span className="font-medium text-sm">
+            {i18n._({ id: 'editor.riserDiagramPanel.riserDiagram', message: 'Riser Diagram' })}
+          </span>
+          <span className="text-muted-foreground text-xs">
+            {i18n._({
+              id: 'editor.riserDiagramPanel.dwvPlumbingIsometric',
+              message: 'DWV plumbing isometric',
+            })}
+          </span>
         </div>
         <button
+          aria-label={i18n._({
+            id: 'editor.riserDiagramPanel.close',
+            message: 'Close riser diagram',
+          })}
           className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10"
           onClick={() => setRiserOpen(false)}
+          title={i18n._({ id: 'editor.riserDiagramPanel.close', message: 'Close riser diagram' })}
         >
           <X className="h-4 w-4 text-muted-foreground" />
         </button>
@@ -63,11 +88,12 @@ function RiserDiagramContent() {
 
       <div className="flex items-center gap-3 border-border/40 border-b px-4 py-2 text-xs">
         <span className="flex items-center gap-1.5">
-          <span className="h-0.5 w-4" style={{ background: WASTE_COLOR }} /> Waste
+          <span className="h-0.5 w-4" style={{ background: WASTE_COLOR }} />{' '}
+          {i18n._({ id: 'editor.riserDiagramPanel.waste', message: 'Waste' })}
         </span>
         <span className="flex items-center gap-1.5">
           <span className="h-0 w-4 border-t-2 border-dashed" style={{ borderColor: VENT_COLOR }} />{' '}
-          Vent
+          {i18n._({ id: 'editor.riserDiagramPanel.vent', message: 'Vent' })}
         </span>
       </div>
 
@@ -76,7 +102,10 @@ function RiserDiagramContent() {
           <svg
             height={Math.max(height, 120)}
             role="img"
-            aria-label="DWV riser diagram"
+            aria-label={i18n._({
+              id: 'editor.riserDiagramPanel.dwvRiserDiagram',
+              message: 'DWV riser diagram',
+            })}
             viewBox={`0 0 ${Math.max(width, 200)} ${Math.max(height, 120)}`}
             width="100%"
           >
@@ -127,7 +156,7 @@ function RiserDiagramContent() {
                     <circle fill={MARKER_COLOR} r={3} stroke={MARKER_COLOR} strokeWidth={1.5} />
                   )}
                   <text fill={MARKER_COLOR} fontSize={9} x={8} y={3}>
-                    {marker.label}
+                    {markerLabel(marker, nodes, i18n)}
                   </text>
                 </g>
               ))}
@@ -135,10 +164,31 @@ function RiserDiagramContent() {
           </svg>
         ) : (
           <div className="flex h-32 items-center justify-center px-6 text-center text-muted-foreground text-sm">
-            No drain, waste, or vent pipes yet. Draw plumbing to see the riser diagram.
+            {i18n._({
+              id: 'editor.riserDiagramPanel.noDrainWasteOrVentPipes',
+              message:
+                'No drain, waste, or vent pipes yet. Draw plumbing to see the riser diagram.',
+            })}
           </div>
         )}
       </div>
     </div>
   )
 }
+
+/** Core's marker labels are English ("2\" P-trap"); the panel words them in the UI language. */
+function markerLabel(marker: RiserMarker, nodes: Record<string, AnyNode>, i18n: PascalI18n) {
+  const node = nodes[marker.nodeId]
+  if (marker.kind === 'fitting' && node?.type === 'pipe-fitting')
+    return i18n._(inspectorOptionDescriptor(node.fittingType))
+  if (!(node && 'diameter' in node && typeof node.diameter === 'number')) return marker.label
+  const values = { diameter: String(node.diameter) }
+  return marker.kind === 'trap'
+    ? i18n._({ id: 'editor.riserDiagramPanel.trap', message: '{diameter}" P-trap', values })
+    : i18n._({
+        id: 'editor.riserDiagramPanel.ventTermination',
+        message: '{diameter}" VTR',
+        comment: 'Vent through roof: where a plumbing vent stack exits the roof.',
+        values,
+      })
+}

package/src/components/editor/room-controls.tsx

@@ -6,13 +6,14 @@ import {
   DEFAULT_LEVEL_HEIGHT,
   deleteZone,
   emitter,
+  formatLinearMeasurement,
   type Point,
+  roomFloorElevation,
   type StructureNodes,
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
 import { getSceneTheme, setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import { SquareSplitHorizontal } from 'lucide-react'
 import Image from 'next/image'
@@ -36,7 +37,6 @@ import { getRoomSelectionIndex } from '../../hooks/use-selected-room'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { getFloatingMenuScale } from '../../lib/floating-menu-scale'
 import { clientToPlan } from '../../lib/floorplan/plan-coords'
-import { formatLinearMeasurement } from '../../lib/measurements'
 import { addMezzanineStairs } from '../../lib/mezzanine-stairs'
 import {
   cancelRoomDivide,
@@ -47,7 +47,7 @@ import {
   roomDivideContains,
   startRoomDivide,
 } from '../../lib/room-divide-session'
-import { roomFloorElevation, useRoomHandleDrag } from '../../lib/room-handle-drag'
+import { useRoomHandleDrag } from '../../lib/room-handle-drag'
 import type { RoomSelectionRecord } from '../../lib/room-selection'
 import { requestRoomDeletion } from '../../lib/room-structure-commands'
 import {
@@ -69,6 +69,7 @@ import {
 } from '../tools/shared/draft-measurement-label'
 import { ActionMenuButton } from './action-menu-button'
 import { getMenuYOffset } from './floating-action-menu'
+import { Html } from './localized-html'
 import { NodeActionMenu } from './node-action-menu'
 import { RoomFloorHighlight3D } from './room-floor-highlight'
 import { RoomHandleDragPreview3D, RoomHandles3D } from './room-handles'