@pascal-app/editor 1.0.3 → 1.0.5

package/src/store/use-wall-region-handles-selection.test.ts

@@ -0,0 +1,222 @@
+import { afterAll, beforeEach, describe, expect, test } from 'bun:test'
+import { type AnyNodeId, useScene, WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useInteractionScope from './use-interaction-scope'
+import {
+  handleWallRegionDeleteKey,
+  installWallRegionSceneSync,
+  resolveActiveWallRegion,
+  syncWallRegionSelection,
+  useWallRegionSelection,
+} from './use-wall-region-handles-selection'
+
+type RafFn = (callback: (time: number) => void) => number
+;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (callback) => {
+  callback(0)
+  return 0
+}
+;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
+
+const WALL_ID = 'wall_region-selection' as AnyNodeId
+const OTHER_WALL_ID = 'wall_region-selection-other' as AnyNodeId
+
+function keyEvent(key: string, target: unknown = null) {
+  const calls = { prevented: 0, stopped: 0 }
+  return {
+    calls,
+    event: {
+      key,
+      target: target as EventTarget | null,
+      preventDefault: () => {
+        calls.prevented += 1
+      },
+      stopPropagation: () => {
+        calls.stopped += 1
+      },
+    },
+  }
+}
+
+// The bun env has no DOM: just enough of `document` and elements for the focus check.
+const originalDocument = (globalThis as { document?: unknown }).document
+const body = { tagName: 'BODY', closest: () => null }
+;(globalThis as { document?: unknown }).document = { body, documentElement: { tagName: 'HTML' } }
+
+function element(tagName: string, ancestors: string[] = []) {
+  return {
+    tagName,
+    closest: (selector: string) => (ancestors.includes(selector) ? {} : null),
+  }
+}
+
+const uninstallSceneSync = installWallRegionSceneSync()
+
+const wall = () => useScene.getState().nodes[WALL_ID] as WallNode | undefined
+
+describe('active wall region', () => {
+  beforeEach(() => {
+    useScene.setState({ nodes: {}, rootNodeIds: [], dirtyNodes: new Set() } as never)
+    for (const id of [WALL_ID, OTHER_WALL_ID]) {
+      useScene.getState().createNode(
+        WallNode.parse({
+          id,
+          start: [0, 0],
+          end: [4, 0],
+          faceRegions: [
+            { id: 'r1', face: 'a', v1: 0.9, finish: 'library:paint-white' },
+            { id: 'r2', face: 'b', u0: 1, finish: 'library:paint-white' },
+          ],
+        }),
+      )
+    }
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().resume()
+    useViewer.getState().setSelection({ selectedIds: [WALL_ID] })
+    useWallRegionSelection.setState({ active: null, stale: null })
+    useInteractionScope.getState().end()
+  })
+
+  afterAll(() => {
+    uninstallSceneSync()
+    useWallRegionSelection.setState({ active: null, stale: null })
+    useInteractionScope.getState().end()
+    useViewer.getState().setSelection({ selectedIds: [] })
+    ;(globalThis as { document?: unknown }).document = originalDocument
+  })
+
+  test('Delete removes only the active region, as one undo step', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()).toBeDefined()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r1'])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+    useScene.temporal.getState().undo()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r1', 'r2'])
+  })
+
+  test('Backspace works too; the last region clears the field', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace').event)).toBe(true)
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace').event)).toBe(true)
+    expect(wall()!.faceRegions).toBeUndefined()
+  })
+
+  test('without an active region the key passes through to the wall delete', () => {
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('typing in a field and other keys are left alone', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const input = { closest: (selector: string) => (selector.includes('input') ? {} : null) }
+    expect(handleWallRegionDeleteKey(keyEvent('Backspace', input).event)).toBe(false)
+    expect(handleWallRegionDeleteKey(keyEvent('Escape').event)).toBe(false)
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('an active region on a wall that is no longer selected is ignored and cleared', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    useViewer.getState().setSelection({ selectedIds: [OTHER_WALL_ID] })
+    expect(resolveActiveWallRegion()).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+    syncWallRegionSelection([OTHER_WALL_ID])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    const other = useScene.getState().nodes[OTHER_WALL_ID] as WallNode
+    expect(other.faceRegions).toHaveLength(2)
+  })
+
+  test('a selection that still holds just the wall keeps the active region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    syncWallRegionSelection([WALL_ID])
+    expect(useWallRegionSelection.getState().active).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+    syncWallRegionSelection([WALL_ID, OTHER_WALL_ID])
+    expect(useWallRegionSelection.getState().active).toBeNull()
+  })
+
+  test('focus on the body or the canvas acts on the region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', body).event)).toBe(true)
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r2' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', element('CANVAS')).event)).toBe(true)
+    expect(wall()!.faceRegions).toBeUndefined()
+  })
+
+  test('focus on a toolbar button leaves the key alone', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const { event, calls } = keyEvent('Delete', element('BUTTON'))
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+  })
+
+  test('focus inside the wall region list acts on the region', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const row = element('BUTTON', ['[data-wall-region-list]'])
+    expect(handleWallRegionDeleteKey(keyEvent('Delete', row).event)).toBe(true)
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r2'])
+  })
+
+  test('mid-gesture the key is swallowed: nothing deleted, the wall stays', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    useInteractionScope
+      .getState()
+      .begin({ kind: 'handle-drag', nodeId: WALL_ID, handle: 'paint-region-bound' })
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()!.faceRegions).toHaveLength(2)
+    expect(useWallRegionSelection.getState().active).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+  })
+
+  test('mid-gesture without an active region the key passes through', () => {
+    useInteractionScope
+      .getState()
+      .begin({ kind: 'handle-drag', nodeId: WALL_ID, handle: 'paint-region-bound' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('a region that vanished under the user swallows the next Delete once', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const regions = wall()!.faceRegions!.filter((region) => region.id !== 'r1')
+    useScene.getState().updateNode(WALL_ID, { faceRegions: regions })
+    expect(useWallRegionSelection.getState().active).toBeNull()
+    expect(useWallRegionSelection.getState().stale).toEqual({ wallId: WALL_ID, regionId: 'r1' })
+
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(true)
+    expect(calls).toEqual({ prevented: 1, stopped: 1 })
+    expect(wall()).toBeDefined()
+    expect(wall()!.faceRegions!.map((region) => region.id)).toEqual(['r2'])
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('removing the active region with Delete does not leave it stale', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(true)
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    expect(handleWallRegionDeleteKey(keyEvent('Delete').event)).toBe(false)
+  })
+
+  test('a selection change clears the stale region, so Delete falls through', () => {
+    useWallRegionSelection.getState().setActive({ wallId: WALL_ID, regionId: 'r1' })
+    const regions = wall()!.faceRegions!.filter((region) => region.id !== 'r1')
+    useScene.getState().updateNode(WALL_ID, { faceRegions: regions })
+    expect(useWallRegionSelection.getState().stale).not.toBeNull()
+
+    useViewer.getState().setSelection({ selectedIds: [OTHER_WALL_ID] })
+    syncWallRegionSelection([OTHER_WALL_ID])
+    useViewer.getState().setSelection({ selectedIds: [WALL_ID] })
+    syncWallRegionSelection([WALL_ID])
+    expect(useWallRegionSelection.getState().stale).toBeNull()
+    const { event, calls } = keyEvent('Delete')
+    expect(handleWallRegionDeleteKey(event)).toBe(false)
+    expect(calls).toEqual({ prevented: 0, stopped: 0 })
+  })
+})

package/src/store/use-wall-region-handles-selection.ts

@@ -0,0 +1,139 @@
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+import { hasLiveGestures } from '../lib/gesture-lifecycle'
+import { removeWallRegion } from '../lib/paint-regions'
+import { sfxEmitter } from '../lib/sfx-bus'
+import { isTypingTarget } from '../lib/typing-target'
+import useDeleteConfirmation from './use-delete-confirmation'
+import useInteractionScope from './use-interaction-scope'
+
+// The paint region the user last picked on the selected wall (a handle, an
+// outline or a panel row). While it is set, Delete removes that region instead
+// of the wall. Cleared whenever the wall selection changes.
+//
+// `stale` remembers an active region that vanished under the user (undo, another
+// edit) while its wall stayed selected: the next Delete is swallowed rather than
+// deleting the wall the user was not aiming at.
+
+export type ActiveWallRegion = { wallId: string; regionId: string }
+
+type WallRegionSelectionState = {
+  active: ActiveWallRegion | null
+  stale: ActiveWallRegion | null
+  setActive: (active: ActiveWallRegion | null) => void
+  setStale: (stale: ActiveWallRegion | null) => void
+}
+
+export const useWallRegionSelection = create<WallRegionSelectionState>((set) => ({
+  active: null,
+  stale: null,
+  setActive: (active) =>
+    set((state) =>
+      state.active?.wallId === active?.wallId && state.active?.regionId === active?.regionId
+        ? state
+        : active
+          ? { active, stale: null }
+          : { active },
+    ),
+  setStale: (stale) => set((state) => (state.stale === stale ? state : { stale })),
+}))
+
+function isSoleSelection(wallId: string, selectedIds: readonly string[]) {
+  return selectedIds.length === 1 && selectedIds[0] === wallId
+}
+
+function regionExists(wallId: string, regionId: string) {
+  const wall = useScene.getState().nodes[wallId as AnyNodeId]
+  if (wall?.type !== 'wall') return false
+  return wall.faceRegions?.some((region) => region.id === regionId) ?? false
+}
+
+/** The active region, only while its wall is the sole selection and the region still exists. */
+export function resolveActiveWallRegion(): ActiveWallRegion | null {
+  const active = useWallRegionSelection.getState().active
+  if (!active) return null
+  if (!isSoleSelection(active.wallId, useViewer.getState().selection.selectedIds)) return null
+  return regionExists(active.wallId, active.regionId) ? active : null
+}
+
+function resolveStaleWallRegion(): ActiveWallRegion | null {
+  const stale = useWallRegionSelection.getState().stale
+  if (!stale) return null
+  return isSoleSelection(stale.wallId, useViewer.getState().selection.selectedIds) ? stale : null
+}
+
+/** Clears the active (and stale) region unless the selection is still exactly its wall. */
+export function syncWallRegionSelection(selectedIds: readonly string[]) {
+  const { active, stale, setActive, setStale } = useWallRegionSelection.getState()
+  if (active && !isSoleSelection(active.wallId, selectedIds)) setActive(null)
+  if (stale && !isSoleSelection(stale.wallId, selectedIds)) setStale(null)
+}
+
+/** Drops the active region once it no longer exists in the scene. */
+export function syncWallRegionWithScene() {
+  const { active, setActive, setStale } = useWallRegionSelection.getState()
+  if (!active || regionExists(active.wallId, active.regionId)) return
+  setActive(null)
+  const wallStillThere = useScene.getState().nodes[active.wallId as AnyNodeId]?.type === 'wall'
+  const selectedIds = useViewer.getState().selection.selectedIds
+  if (wallStillThere && isSoleSelection(active.wallId, selectedIds)) setStale(active)
+}
+
+/** Keeps the active region in step with scene edits (undo, remote edits). Returns the unsubscribe. */
+export function installWallRegionSceneSync() {
+  return useScene.subscribe((state, previous) => {
+    if (state.nodes !== previous.nodes) syncWallRegionWithScene()
+  })
+}
+
+// Delete belongs to the region only when focus is on the scene or the wall's
+// region list; a focused toolbar button or panel control keeps its own key.
+function isSceneOrRegionListTarget(target: EventTarget | null) {
+  if (!target) return true
+  if (
+    typeof document !== 'undefined' &&
+    (target === document || target === document.body || target === document.documentElement)
+  ) {
+    return true
+  }
+  const element = target as { tagName?: string; closest?: (selector: string) => unknown }
+  if (element.tagName?.toUpperCase() === 'CANVAS') return true
+  return !!element.closest?.('[data-wall-region-list]')
+}
+
+function consume(event: KeyEventLike) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+type KeyEventLike = Pick<KeyboardEvent, 'key' | 'target' | 'preventDefault' | 'stopPropagation'>
+
+/**
+ * Delete / Backspace with an active region removes that region (one undo step)
+ * and consumes the key so the global delete never sees it. Mid-gesture, or
+ * right after the active region vanished, the key is swallowed so it cannot
+ * fall through to deleting the wall. Returns whether the key was consumed.
+ */
+export function handleWallRegionDeleteKey(event: KeyEventLike): boolean {
+  if (event.key !== 'Delete' && event.key !== 'Backspace') return false
+  if (isTypingTarget(event.target)) return false
+  if (!isSceneOrRegionListTarget(event.target)) return false
+  if (useDeleteConfirmation.getState().request) return false
+  const active = resolveActiveWallRegion()
+  const stale = active ? null : resolveStaleWallRegion()
+  if (!(active || stale)) return false
+
+  consume(event)
+  const busy = useInteractionScope.getState().scope.kind !== 'idle' || hasLiveGestures()
+  if (busy) return true
+  if (stale) {
+    useWallRegionSelection.getState().setStale(null)
+    return true
+  }
+  if (!active) return true
+  // Cleared first so the scene sync does not mistake this removal for a vanished region.
+  useWallRegionSelection.getState().setActive(null)
+  if (removeWallRegion(active.wallId, active.regionId)) sfxEmitter.emit('sfx:structure-delete')
+  return true
+}

package/src/store/view-layout.test.ts

@@ -0,0 +1,201 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import {
+  availableViews,
+  editorHostViewRegistry,
+  registerEditorHostView,
+  unregisterEditorHostView,
+} from '../lib/editor-views'
+import useEditor, { normalizePersistedEditorUiState } from './use-editor'
+import {
+  activeViewLayout,
+  DEFAULT_VIEW_LAYOUT,
+  isViewVisible,
+  sceneLayout,
+  VIEW_2D,
+  VIEW_3D,
+  visibleScene,
+} from './view-layout'
+
+function layout() {
+  return activeViewLayout(useEditor.getState())
+}
+
+afterEach(() => {
+  useEditor.getState().setCaptureMode(false)
+  useEditor.getState().setFirstPersonMode(false)
+  useEditor.getState().setWorkspaceMode('edit')
+  useEditor.setState({ viewLayouts: {} })
+  editorHostViewRegistry.reset()
+})
+
+describe('the stage layout', () => {
+  test('a view sits in one pane: picking the other pane’s view swaps them', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().setPaneView(0, VIEW_3D)
+    expect(layout().panes).toEqual([VIEW_3D, VIEW_2D])
+    expect(layout().split).toBe(true)
+  })
+
+  test('a view opened beside the scene splits next to the focused pane', () => {
+    useEditor.getState().showView('gallery', { beside: true })
+    expect(layout()).toMatchObject({ split: true, panes: [VIEW_3D, 'gallery'], focus: 1 })
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+  })
+
+  test('opening a view already on screen only focuses it', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().showView(VIEW_3D)
+    expect(layout()).toMatchObject({ panes: [VIEW_2D, VIEW_3D], focus: 1, split: true })
+  })
+
+  test('splitting from 3D brings the plan in on the left, as the split always did', () => {
+    useEditor.getState().toggleSplit()
+    expect(layout()).toMatchObject({ split: true, panes: [VIEW_2D, VIEW_3D], focus: 1 })
+  })
+
+  test('closing the split keeps the focused pane', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().focusViewPane(1)
+    useEditor.getState().toggleSplit()
+    expect(layout()).toMatchObject({ split: false, panes: [VIEW_3D, VIEW_2D] })
+  })
+
+  test('closing a view collapses its split, or brings a lone pane back to 3D', () => {
+    useEditor.getState().showView('gallery', { beside: true })
+    useEditor.getState().closeView('gallery')
+    expect(layout()).toMatchObject({ split: false, panes: [VIEW_3D, VIEW_2D] })
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().showView('gallery')
+    useEditor.getState().closeView('gallery')
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+  })
+
+  test('a plan beside another view owns the scene like a plan alone', () => {
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().showView('gallery', { beside: true })
+    expect(visibleScene(useEditor.getState())).toBe('2d')
+  })
+
+  test('each workspace keeps its own layout', () => {
+    useEditor.getState().setViewLayout(sceneLayout('split'))
+    useEditor.getState().setWorkspaceMode('studio')
+    expect(layout()).toEqual(DEFAULT_VIEW_LAYOUT)
+    useEditor.getState().showView('gallery')
+    useEditor.getState().setWorkspaceMode('edit')
+    expect(visibleScene(useEditor.getState())).toBe('split')
+  })
+
+  test('capture frames in 3D alone and gives the layout back untouched', () => {
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
+    useEditor.getState().setCaptureMode(true)
+    expect(visibleScene(useEditor.getState())).toBe('3d')
+    useEditor.getState().setCaptureMode(false)
+    expect(visibleScene(useEditor.getState())).toBe('2d')
+  })
+})
+
+describe('the deprecated viewMode for plugins written before views', () => {
+  test('mirrors the scene on screen and sets it', () => {
+    useEditor.getState().setViewMode('split')
+    expect(visibleScene(useEditor.getState())).toBe('split')
+    expect(useEditor.getState().viewMode).toBe('split')
+    useEditor.getState().showView('gallery')
+    expect(useEditor.getState().viewMode).toBe('3d')
+    useEditor.getState().setCaptureMode(true)
+    expect(useEditor.getState().viewMode).toBe('3d')
+  })
+})
+
+describe('layouts saved before views', () => {
+  test.each([
+    ['3d', '3d'],
+    ['2d', '2d'],
+    ['split', 'split'],
+  ] as const)('a stored %s view opens as %s, the plan on the left', (viewMode, scene) => {
+    const state = normalizePersistedEditorUiState({ viewMode, floorplanPaneRatio: 0.4 } as never)
+    const restored = state.viewLayouts.edit
+    expect(restored).toBeDefined()
+    if (!restored) return
+    expect(
+      visibleScene({
+        viewLayouts: state.viewLayouts,
+        workspaceMode: 'edit',
+        isCaptureMode: false,
+        isFirstPersonMode: false,
+      }),
+    ).toBe(scene)
+    if (scene !== '3d') expect(restored).toMatchObject({ panes: [VIEW_2D, VIEW_3D], ratio: 0.4 })
+  })
+
+  test('an open floorplan from before view modes opens split', () => {
+    const state = normalizePersistedEditorUiState({ isFloorplanOpen: true } as never)
+    expect(state.viewLayouts.edit).toMatchObject({ split: true })
+  })
+})
+
+describe('registered views', () => {
+  test('dismissing a document removes it from both workspace layouts, including a hidden split pane', () => {
+    registerEditorHostView({
+      id: 'document:test',
+      label: 'Plan.pdf',
+      icon: { kind: 'iconify', name: 'lucide:file' },
+      component: async () => ({ default: () => null }),
+    })
+    useEditor.getState().showView('document:test', { beside: true })
+    useEditor.getState().setWorkspaceMode('studio')
+    useEditor
+      .getState()
+      .setViewLayout({ ...DEFAULT_VIEW_LAYOUT, panes: [VIEW_3D, 'document:test'] })
+    useEditor.getState().setViewPinned('document:test', true)
+    unregisterEditorHostView('document:test')
+    expect(editorHostViewRegistry.getSnapshot()).toEqual([])
+    expect(useEditor.getState().pinnedViews['document:test']).toBeUndefined()
+    expect(layout().panes).toEqual([VIEW_3D, VIEW_2D])
+    useEditor.getState().setWorkspaceMode('edit')
+    expect(layout()).toMatchObject({ split: false, panes: [VIEW_3D, VIEW_2D] })
+  })
+
+  test('a plugin view is offered only where its plugin is installed and its workspace matches', () => {
+    registerEditorHostView({
+      id: 'acme:pets',
+      label: 'Pets',
+      icon: { kind: 'iconify', name: 'lucide:cat' },
+      component: async () => ({ default: () => null }),
+      pluginId: 'acme',
+    })
+    registerEditorHostView({
+      id: 'acme:habitat',
+      label: 'Habitat',
+      icon: { kind: 'iconify', name: 'lucide:house' },
+      component: async () => ({ default: () => null }),
+      pluginId: 'acme',
+      workspaces: ['studio'],
+    })
+    const ids = (workspaceMode: string, installedPlugins: string[]) =>
+      availableViews({
+        registered: editorHostViewRegistry.getSnapshot(),
+        workspaceMode,
+        installedPlugins,
+      }).map((view) => view.id)
+    expect(ids('edit', [])).toEqual([VIEW_3D, VIEW_2D])
+    expect(ids('edit', ['acme'])).toEqual([VIEW_3D, VIEW_2D, 'acme:pets'])
+    expect(ids('studio', ['acme'])).toEqual([VIEW_3D, VIEW_2D, 'acme:habitat'])
+  })
+
+  test('the scene views cannot be replaced', () => {
+    expect(() =>
+      registerEditorHostView({
+        id: VIEW_3D,
+        label: '3D',
+        icon: { kind: 'iconify', name: 'lucide:box' },
+        component: async () => ({ default: () => null }),
+      }),
+    ).toThrow()
+  })
+
+  test('a layout naming a view that is gone keeps it, so the choice returns with the view', () => {
+    useEditor.getState().showView('acme:pets')
+    expect(isViewVisible(useEditor.getState(), 'acme:pets')).toBe(true)
+    expect(isViewVisible(useEditor.getState(), VIEW_3D)).toBe(false)
+  })
+})