@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/floating-building-action-menu.tsx

@@ -38,7 +38,7 @@ export function FloatingBuildingActionMenu() {
       // Read lazily at click time — no need to subscribe to nodes for a
       // one-shot action.
       const node = useScene.getState().nodes[buildingId]
-      if (!node || node.type !== 'building') return
+      if (node?.type !== 'building') return
       sfxEmitter.emit('sfx:item-pick')
       setMovingNode(node as BuildingNode)
       setSelection({ buildingId: null })

package/src/components/editor/floorplan-background-selection.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'bun:test'
+import { resolveFloorplanBackgroundSelection } from './floorplan-background-selection'
+
+const baseArgs = {
+  canSelectElementFloorplanGeometry: true,
+  canSelectFloorplanZones: false,
+  currentSelectedIds: ['wall_1'],
+  getFloorplanHitIdAtPoint: () => 'door_1',
+  isWallBuildActive: false,
+  modifierKeys: { meta: false, ctrl: false, shift: false },
+  planPoint: [0, 0] as [number, number],
+  structureLayer: 'elements',
+}
+
+describe('resolveFloorplanBackgroundSelection', () => {
+  test('shift-click on a floorplan node toggles into the current selection', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      modifierKeys: { meta: false, ctrl: false, shift: true },
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-elements',
+      selectedIds: ['wall_1', 'door_1'],
+    })
+  })
+
+  test('shift-click on selected floorplan node toggles it out', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      currentSelectedIds: ['wall_1', 'door_1'],
+      modifierKeys: { meta: false, ctrl: false, shift: true },
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-elements',
+      selectedIds: ['wall_1'],
+    })
+  })
+
+  test('shift-click on empty floorplan space preserves selection', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      getFloorplanHitIdAtPoint: () => null,
+      modifierKeys: { meta: false, ctrl: false, shift: true },
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'clear-elements',
+      preserveSelection: true,
+    })
+  })
+
+  test('uses the registry hit result for zone selection', () => {
+    const result = resolveFloorplanBackgroundSelection({
+      ...baseArgs,
+      canSelectElementFloorplanGeometry: false,
+      canSelectFloorplanZones: true,
+      getFloorplanHitIdAtPoint: () => 'zone_1',
+      structureLayer: 'zones',
+    })
+
+    expect(result).toEqual({
+      handled: true,
+      kind: 'select-zone',
+      zoneId: 'zone_1',
+    })
+  })
+})

package/src/components/editor/floorplan-background-selection.ts

@@ -1,19 +1,12 @@
 'use client'
 
-import type { Point2D, ZoneNode as ZoneNodeType } from '@pascal-app/core'
-import { isPointInsidePolygon } from '../../lib/floorplan'
+import type { ZoneNode as ZoneNodeType } from '@pascal-app/core'
 import type { WallPlanPoint } from '../tools/wall/wall-drafting'
 
 type ModifierKeys = {
   meta: boolean
   ctrl: boolean
-}
-
-type ZoneHitEntry = {
-  zone: {
-    id: ZoneNodeType['id']
-  }
-  polygon: Point2D[]
+  shift: boolean
 }
 
 type ResolveFloorplanBackgroundSelectionArgs = {
@@ -25,8 +18,6 @@ type ResolveFloorplanBackgroundSelectionArgs = {
   modifierKeys: ModifierKeys
   planPoint: WallPlanPoint
   structureLayer: string
-  toPoint2D: (point: WallPlanPoint) => Point2D
-  visibleZonePolygons: ZoneHitEntry[]
 }
 
 export type FloorplanBackgroundSelectionResult =
@@ -62,18 +53,14 @@ export function resolveFloorplanBackgroundSelection({
   modifierKeys,
   planPoint,
   structureLayer,
-  toPoint2D,
-  visibleZonePolygons,
 }: ResolveFloorplanBackgroundSelectionArgs): FloorplanBackgroundSelectionResult {
   if (canSelectFloorplanZones) {
-    const zoneHit = visibleZonePolygons.find(({ polygon }) =>
-      isPointInsidePolygon(toPoint2D(planPoint), polygon),
-    )
-    if (zoneHit) {
+    const zoneId = getFloorplanHitIdAtPoint(planPoint)
+    if (zoneId) {
       return {
         handled: true,
         kind: 'select-zone',
-        zoneId: zoneHit.zone.id,
+        zoneId: zoneId as ZoneNodeType['id'],
       }
     }
   }
@@ -85,7 +72,7 @@ export function resolveFloorplanBackgroundSelection({
         handled: true,
         kind: 'select-elements',
         selectedIds:
-          modifierKeys.meta || modifierKeys.ctrl
+          modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift
             ? currentSelectedIds.includes(hitId)
               ? currentSelectedIds.filter((selectedId) => selectedId !== hitId)
               : [...currentSelectedIds, hitId]
@@ -105,7 +92,7 @@ export function resolveFloorplanBackgroundSelection({
     return {
       handled: true,
       kind: 'clear-elements',
-      preserveSelection: modifierKeys.meta || modifierKeys.ctrl,
+      preserveSelection: modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift,
     }
   }
 

package/src/components/editor/floorplan-camera-sync.test.ts

@@ -0,0 +1,249 @@
+import { describe, expect, test } from 'bun:test'
+import type { CameraPose } from '@pascal-app/core'
+import { publishInitialCameraPose } from '../../lib/camera-pose'
+import type { NavigationSyncPose } from '../../store/use-editor'
+import {
+  cameraPoseToFloorplanNavigationPose,
+  createFloorplanCameraNavigationChannel,
+  createFloorplanCameraSyncBridge,
+  floorplanNavigationPoseToCameraPose,
+} from './floorplan-camera-sync'
+
+const cameraPose: CameraPose = {
+  fov: 50,
+  position: [3, 4, 4],
+  projection: 'perspective',
+  target: [0, 1, 0],
+  viewWidth: 12,
+}
+
+function cameraPoseAtAzimuth(
+  azimuth: number,
+  target: [number, number, number] = [0, 1, 0],
+): CameraPose {
+  const horizontalDistance = 5
+  return {
+    ...cameraPose,
+    position: [
+      target[0] + Math.sin(azimuth) * horizontalDistance,
+      4,
+      target[2] + Math.cos(azimuth) * horizontalDistance,
+    ],
+    target,
+  }
+}
+
+describe('floorplan camera sync', () => {
+  test('derives the floor-plan navigation pose from the generic camera pose', () => {
+    expect(
+      cameraPoseToFloorplanNavigationPose({
+        position: [10, 5, 0],
+        projection: 'perspective',
+        target: [0, 0, 0],
+        viewWidth: 20,
+      }),
+    ).toEqual({
+      source: '3d',
+      target: [0, 0, 0],
+      azimuth: Math.PI / 2,
+      viewWidth: 20,
+    })
+  })
+
+  test('applies a floor-plan pose while preserving the generic camera elevation and projection', () => {
+    expect(
+      floorplanNavigationPoseToCameraPose(
+        {
+          source: '2d',
+          revision: 4,
+          target: [10, 2, 20],
+          azimuth: Math.PI / 2,
+          viewWidth: 8,
+        },
+        cameraPose,
+      ),
+    ).toEqual({
+      fov: 50,
+      position: [15, 5, 20],
+      projection: 'perspective',
+      target: [10, 2, 20],
+      viewWidth: 8,
+    })
+  })
+
+  test('owns two-way synchronization without echoing tiny camera changes', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPose)
+    bridge.receiveCameraPose({
+      ...cameraPose,
+      position: [3.0001, 4, 4],
+    })
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+
+    expect(published).toHaveLength(1)
+    expect(published[0]?.source).toBe('3d')
+    expect(applied).toHaveLength(1)
+    expect(applied[0]).toMatchObject({
+      fov: 50,
+      projection: 'perspective',
+      target: [10, 2, 20],
+      viewWidth: 8,
+    })
+    expect(applied[0]?.position[0]).toBeCloseTo(15)
+    expect(applied[0]?.position[1]).toBeCloseTo(5)
+    expect(applied[0]?.position[2]).toBeCloseTo(20)
+  })
+
+  test('publishes sub-degree camera rotation for a real-time compass', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: () => {},
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(cameraPoseAtAzimuth((0.9 * Math.PI) / 180))
+    expect(published).toHaveLength(2)
+    expect(published[1]?.azimuth).toBeCloseTo((0.9 * Math.PI) / 180)
+  })
+
+  test('keeps a sub-degree camera rotation when it arrives with a pan', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: () => {},
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(cameraPoseAtAzimuth((0.5 * Math.PI) / 180, [1, 1, 0]))
+
+    expect(published).toHaveLength(2)
+    expect(published[1]).toMatchObject({
+      target: [1, 1, 0],
+    })
+    expect(published[1]?.azimuth).toBeCloseTo((0.5 * Math.PI) / 180)
+  })
+
+  test('keeps streaming live camera headings in 3D-only mode', () => {
+    const published: Array<Omit<NavigationSyncPose, 'revision'>> = []
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      active: false,
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: (pose) => published.push(pose),
+    })
+    const latestPose = cameraPoseAtAzimuth(Math.PI / 2, [8, 1, 4])
+
+    bridge.receiveCameraPose(cameraPoseAtAzimuth(0))
+    bridge.receiveCameraPose(latestPose)
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+
+    expect(published).toEqual([
+      {
+        source: '3d',
+        target: cameraPose.target,
+        azimuth: 0,
+        viewWidth: 12,
+      },
+      {
+        source: '3d',
+        target: latestPose.target,
+        azimuth: Math.PI / 2,
+        viewWidth: 12,
+      },
+    ])
+    expect(applied).toEqual([])
+
+    bridge.setActive(true)
+    expect(published).toHaveLength(2)
+    expect(applied).toEqual([])
+  })
+
+  test('applies the north-alignment pose used by the compass in 3D view', () => {
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: () => {},
+    })
+    const currentPose = cameraPoseAtAzimuth(Math.PI / 2, [8, 1, 4])
+
+    bridge.receiveCameraPose(currentPose)
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [...currentPose.target],
+      azimuth: 0,
+      viewWidth: currentPose.viewWidth!,
+    })
+
+    expect(applied).toHaveLength(1)
+    expect(applied[0]).toMatchObject({
+      target: currentPose.target,
+      projection: currentPose.projection,
+      viewWidth: currentPose.viewWidth,
+    })
+    expect(applied[0]?.position[0]).toBeCloseTo(currentPose.target[0])
+    expect(applied[0]?.position[1]).toBeCloseTo(currentPose.position[1])
+    expect(applied[0]?.position[2]).toBeCloseTo(currentPose.target[2] + 5)
+  })
+
+  test('applies 2D-first navigation on initial load without a 3D interaction', () => {
+    const applied: CameraPose[] = []
+    const bridge = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => applied.push(pose),
+      publishNavigationPose: () => {},
+    })
+
+    bridge.receiveNavigationPose({
+      source: '2d',
+      revision: 1,
+      target: [10, 2, 20],
+      azimuth: Math.PI / 2,
+      viewWidth: 8,
+    })
+    expect(applied).toEqual([])
+
+    publishInitialCameraPose(() => bridge.receiveCameraPose(cameraPose))
+    expect(applied).toHaveLength(1)
+  })
+
+  test('delivers the live camera stream through transient subscribers', () => {
+    const channel = createFloorplanCameraNavigationChannel()
+    const received: NavigationSyncPose[] = []
+    const unsubscribe = channel.subscribe((pose) => received.push(pose))
+    const input = {
+      source: '3d' as const,
+      target: [0, 1, 2] as [number, number, number],
+      azimuth: 0.5,
+      viewWidth: 12,
+    }
+
+    channel.publish(input)
+    channel.publish({ ...input, azimuth: 0.75 })
+    unsubscribe()
+    channel.publish({ ...input, azimuth: 1 })
+
+    expect(received).toEqual([
+      { ...input, revision: 1 },
+      { ...input, azimuth: 0.75, revision: 2 },
+    ])
+  })
+})

package/src/components/editor/floorplan-camera-sync.ts

@@ -0,0 +1,213 @@
+'use client'
+
+import { type CameraPose, emitter } from '@pascal-app/core'
+import { useEffect, useRef } from 'react'
+import { subscribeCameraPose } from '../../store/camera-pose-store'
+import { subscribeNavigationSyncPose } from '../../store/navigation-sync-pose-store'
+import type { NavigationSyncPose, NavigationSyncPoseInput } from '../../store/use-editor'
+
+const POSITION_EPSILON = 0.001
+const AZIMUTH_EPSILON = 1e-4
+const VIEW_WIDTH_EPSILON = 0.001
+
+type FloorplanNavigationSnapshot = Omit<NavigationSyncPoseInput, 'source'>
+
+function angleDeltaRadians(a: number, b: number) {
+  return Math.atan2(Math.sin(a - b), Math.cos(a - b))
+}
+
+function normalizeNearZero(value: number) {
+  return Math.abs(value) < Number.EPSILON * 10 ? 0 : value
+}
+
+function navigationSnapshot(pose: NavigationSyncPoseInput): FloorplanNavigationSnapshot {
+  return {
+    target: [...pose.target],
+    azimuth: pose.azimuth,
+    viewWidth: pose.viewWidth,
+  }
+}
+
+function navigationSnapshotsEqual(
+  previous: FloorplanNavigationSnapshot,
+  next: FloorplanNavigationSnapshot,
+) {
+  return (
+    Math.abs(previous.target[0] - next.target[0]) < POSITION_EPSILON &&
+    Math.abs(previous.target[1] - next.target[1]) < POSITION_EPSILON &&
+    Math.abs(previous.target[2] - next.target[2]) < POSITION_EPSILON &&
+    Math.abs(angleDeltaRadians(previous.azimuth, next.azimuth)) < AZIMUTH_EPSILON &&
+    Math.abs(previous.viewWidth - next.viewWidth) < VIEW_WIDTH_EPSILON
+  )
+}
+
+export function cameraPoseToFloorplanNavigationPose(
+  pose: CameraPose,
+): NavigationSyncPoseInput | null {
+  if (!(pose.viewWidth !== undefined && Number.isFinite(pose.viewWidth) && pose.viewWidth > 0)) {
+    return null
+  }
+
+  return {
+    source: '3d',
+    target: [...pose.target],
+    azimuth: Math.atan2(pose.position[0] - pose.target[0], pose.position[2] - pose.target[2]),
+    viewWidth: pose.viewWidth,
+  }
+}
+
+export function floorplanNavigationPoseToCameraPose(
+  navigationPose: NavigationSyncPose,
+  cameraPose: CameraPose,
+): CameraPose {
+  const offsetX = cameraPose.position[0] - cameraPose.target[0]
+  const offsetY = cameraPose.position[1] - cameraPose.target[1]
+  const offsetZ = cameraPose.position[2] - cameraPose.target[2]
+  const horizontalDistance = Math.hypot(offsetX, offsetZ)
+  const horizontalX = normalizeNearZero(Math.sin(navigationPose.azimuth) * horizontalDistance)
+  const horizontalZ = normalizeNearZero(Math.cos(navigationPose.azimuth) * horizontalDistance)
+  const target: [number, number, number] = [...navigationPose.target]
+
+  return {
+    ...(cameraPose.fov === undefined ? {} : { fov: cameraPose.fov }),
+    position: [target[0] + horizontalX, target[1] + offsetY, target[2] + horizontalZ],
+    projection: cameraPose.projection,
+    target,
+    viewWidth: navigationPose.viewWidth,
+  }
+}
+
+export type FloorplanCameraSyncBridge = {
+  receiveCameraPose: (pose: CameraPose) => void
+  receiveNavigationPose: (pose: NavigationSyncPose | null) => void
+  setActive: (active: boolean) => void
+}
+
+export type FloorplanCameraNavigationChannel = {
+  publish: (pose: NavigationSyncPoseInput) => void
+  subscribe: (listener: (pose: NavigationSyncPose) => void) => () => void
+}
+
+export function createFloorplanCameraNavigationChannel(): FloorplanCameraNavigationChannel {
+  const listeners = new Set<(pose: NavigationSyncPose) => void>()
+  let revision = 0
+
+  return {
+    publish: (pose) => {
+      revision += 1
+      const revisedPose = { ...pose, revision }
+      for (const listener of listeners) {
+        listener(revisedPose)
+      }
+    },
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}
+
+const liveCameraNavigation = createFloorplanCameraNavigationChannel()
+
+export function subscribeFloorplanCameraNavigation(listener: (pose: NavigationSyncPose) => void) {
+  return liveCameraNavigation.subscribe(listener)
+}
+
+export function createFloorplanCameraSyncBridge({
+  active: initialActive = true,
+  applyCameraPose,
+  publishNavigationPose,
+}: {
+  active?: boolean
+  applyCameraPose: (pose: CameraPose) => void
+  publishNavigationPose: (pose: NavigationSyncPoseInput) => void
+}): FloorplanCameraSyncBridge {
+  let active = initialActive
+  let latestCameraPose: CameraPose | null = null
+  let pendingNavigationPose: NavigationSyncPose | null = null
+  let lastAppliedNavigationRevision = 0
+  let lastPublishedNavigation: FloorplanNavigationSnapshot | null = null
+
+  const applyPendingNavigationPose = () => {
+    if (!(latestCameraPose && pendingNavigationPose)) return false
+    if (pendingNavigationPose.revision === lastAppliedNavigationRevision) {
+      pendingNavigationPose = null
+      return false
+    }
+
+    const appliedPose = floorplanNavigationPoseToCameraPose(pendingNavigationPose, latestCameraPose)
+    const appliedNavigationPose = cameraPoseToFloorplanNavigationPose(appliedPose)
+    latestCameraPose = appliedPose
+    lastAppliedNavigationRevision = pendingNavigationPose.revision
+    pendingNavigationPose = null
+    if (appliedNavigationPose) {
+      lastPublishedNavigation = navigationSnapshot(appliedNavigationPose)
+    }
+    applyCameraPose(appliedPose)
+    return true
+  }
+
+  const publishCameraNavigationPose = (pose: CameraPose) => {
+    const navigationPose = cameraPoseToFloorplanNavigationPose(pose)
+    if (!navigationPose) return
+    const nextSnapshot = navigationSnapshot(navigationPose)
+    if (
+      lastPublishedNavigation &&
+      navigationSnapshotsEqual(lastPublishedNavigation, nextSnapshot)
+    ) {
+      return
+    }
+
+    lastPublishedNavigation = nextSnapshot
+    publishNavigationPose(navigationPose)
+  }
+
+  return {
+    receiveCameraPose: (pose) => {
+      latestCameraPose = pose
+      if (active && applyPendingNavigationPose()) return
+
+      publishCameraNavigationPose(pose)
+    },
+    receiveNavigationPose: (pose) => {
+      if (
+        !active ||
+        pose?.source !== '2d' ||
+        pose.revision === lastAppliedNavigationRevision ||
+        pose.revision === pendingNavigationPose?.revision
+      ) {
+        return
+      }
+
+      pendingNavigationPose = pose
+      applyPendingNavigationPose()
+    },
+    setActive: (nextActive) => {
+      if (active === nextActive) return
+      active = nextActive
+      if (!active) {
+        pendingNavigationPose = null
+        return
+      }
+      if (latestCameraPose) publishCameraNavigationPose(latestCameraPose)
+    },
+  }
+}
+
+export function useFloorplanCameraSyncBridge() {
+  // The compass is portalled into the always-visible viewer area, so its
+  // orientation-only 2D pose must still reach the camera while the floorplan
+  // itself is hidden in 3D view.
+  const bridgeRef = useRef<FloorplanCameraSyncBridge | null>(null)
+  if (!bridgeRef.current) {
+    bridgeRef.current = createFloorplanCameraSyncBridge({
+      applyCameraPose: (pose) => emitter.emit('camera-controls:apply-pose', pose),
+      publishNavigationPose: (pose) => liveCameraNavigation.publish(pose),
+    })
+  }
+  const bridge = bridgeRef.current
+
+  useEffect(() => subscribeCameraPose(bridge.receiveCameraPose), [bridge])
+
+  useEffect(() => subscribeNavigationSyncPose(bridge.receiveNavigationPose), [bridge])
+}

package/src/components/editor/floorplan-mode-coordinator.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { emitter, nodeRegistry } from '@pascal-app/core'
+import { X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
+import { isFloorplanToolAvailableInMode } from '../../lib/floorplan/floorplan-mode'
+import useEditor from '../../store/use-editor'
+import useFloorplanMode from '../../store/use-floorplan-mode'
+
+function getToolLabel(tool: string): string {
+  return nodeRegistry.get(tool)?.presentation?.label ?? tool
+}
+
+export function FloorplanModeCoordinator() {
+  const editorMode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const floorplanMode = useFloorplanMode((state) => state.mode)
+  const notice = useFloorplanMode((state) => state.notice)
+  const dismissNotice = useFloorplanMode((state) => state.dismissNotice)
+  const setFloorplanMode = useFloorplanMode((state) => state.setMode)
+  const showExpertModeNotice = useFloorplanMode((state) => state.showExpertModeNotice)
+  const showNotice = useFloorplanMode((state) => state.showNotice)
+  const previousFloorplanMode = useRef(floorplanMode)
+
+  useEffect(() => {
+    const priorFloorplanMode = previousFloorplanMode.current
+    previousFloorplanMode.current = floorplanMode
+    if (floorplanMode !== 'default' || editorMode !== 'build' || !tool) return
+    const extension = getFloorplanNodeExtension(nodeRegistry.get(tool))
+    if (isFloorplanToolAvailableInMode(extension?.availableModes, floorplanMode)) return
+
+    const toolLabel = getToolLabel(tool)
+    emitter.emit('tool:cancel')
+    useEditor.getState().setMode('select')
+    if (priorFloorplanMode === 'expert') {
+      showNotice(
+        `Switched to Default. The unfinished ${toolLabel} draft was canceled; saved Expert annotations are hidden, not deleted.`,
+      )
+    } else {
+      showExpertModeNotice(toolLabel)
+    }
+  }, [editorMode, floorplanMode, showExpertModeNotice, showNotice, tool])
+
+  useEffect(() => {
+    if (!notice || notice.kind === 'switch-to-expert') return
+    const timer = window.setTimeout(dismissNotice, 6000)
+    return () => window.clearTimeout(timer)
+  }, [dismissNotice, notice])
+
+  if (!notice) return null
+
+  return (
+    <div
+      aria-live="polite"
+      className="fixed top-16 left-1/2 z-[100] flex max-w-md -translate-x-1/2 items-center gap-3 rounded-lg border border-border/60 bg-background/95 px-3 py-2 text-sm text-foreground shadow-elevation-3 backdrop-blur-xl"
+      role="status"
+    >
+      <span>{notice.message}</span>
+      {notice.kind === 'switch-to-expert' ? (
+        <button
+          className="shrink-0 rounded-md bg-cyan-500/15 px-2.5 py-1 font-medium text-cyan-400 hover:bg-cyan-500/25"
+          onClick={() => {
+            setFloorplanMode('expert')
+            dismissNotice()
+          }}
+          type="button"
+        >
+          Switch to Expert
+        </button>
+      ) : null}
+      <button
+        aria-label="Dismiss"
+        className="shrink-0 rounded p-1 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+        onClick={dismissNotice}
+        type="button"
+      >
+        <X aria-hidden="true" className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}