@pascal-app/editor 1.0.0-beta.5 → 1.0.0

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -117,6 +117,12 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
+type TreeNodeComponent = React.ComponentType<{
+  depth: number
+  isLast?: boolean
+  nodeId: AnyNodeId
+}>
+
 // Per-kind tree-node components keyed by `node.type`. Lookup replaces
 // the legacy switch — adding a kind to this map is now the only edit
 // needed in this file (the switch's `case '<kind>':` clauses were
@@ -124,10 +130,7 @@ interface TreeNodeProps {
 // outside the registry; future work moves these to a
 // `def.presentation`-driven generic tree-node and removes this map
 // entirely).
-const treeNodeByType: Record<
-  string,
-  React.ComponentType<{ depth: number; isLast?: boolean; nodeId: AnyNodeId }>
-> = {
+const treeNodeByType: Record<string, TreeNodeComponent> = {
   building: BuildingTreeNode as React.ComponentType<{
     depth: number
     isLast?: boolean
@@ -136,6 +139,7 @@ const treeNodeByType: Record<
   cabinet: RegistryTreeNode,
   'cabinet-module': RegistryTreeNode,
   'box-vent': RegistryTreeNode,
+  'block': RegistryTreeNode,
   ceiling: CeilingTreeNode,
   chimney: ChimneyTreeNode,
   dormer: DormerTreeNode,
@@ -169,6 +173,7 @@ const treeNodeByType: Record<
   'eyebrow-vent': RegistryTreeNode,
   skylight: RegistryTreeNode,
   roof: RoofTreeNode,
+  scan: RegistryTreeNode,
   stair: StairTreeNode,
   door: DoorTreeNode,
   window: WindowTreeNode,
@@ -180,6 +185,10 @@ const treeNodeByType: Record<
   item: ItemTreeNode,
 }
 
+export function getTreeNodeComponent(nodeType: string): TreeNodeComponent {
+  return treeNodeByType[nodeType] ?? RegistryTreeNode
+}
+
 export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
   // Registry-driven row hiding (`def.tree.hidden`) — primitive boolean
   // selector so unrelated scene updates don't re-render every row.
@@ -191,8 +200,7 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
   if (shouldHide) return null
   if (!nodeType) return null
-  const Component = treeNodeByType[nodeType]
-  if (!Component) return null
+  const Component = getTreeNodeComponent(nodeType)
   return <Component depth={depth} isLast={isLast} nodeId={nodeId} />
 })
 

package/src/components/ui/sidebar/tab-bar.tsx

@@ -86,6 +86,8 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
       <Tooltip key={tab.id}>
         <TooltipTrigger asChild>
           <button
+            aria-label={tab.label}
+            aria-pressed={showActive}
             className={cn(
               'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
               showActive

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -12,7 +12,12 @@ import {
   useSyncExternalStore,
 } from 'react'
 import useEditor from '../../../store/use-editor'
-import { editorHostPanelRegistry, type EditorHostPanel } from '../../../lib/plugin-panels'
+import {
+  editorHostPanelRegistry,
+  type EditorHostPanel,
+  managedPluginIds,
+  showsPluginManager,
+} from '../../../lib/plugin-panels'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import type { ExtraPanel } from './icon-rail'
 import { PluginsPanel } from './panels/plugins-panel'
@@ -100,6 +105,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
   )
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const installedPlugins = useScene((s) => s.installedPlugins)
+  const readOnly = useScene((s) => s.readOnly)
   const hostIds = new Set(hostPanels?.map((p) => p.id))
 
   useEffect(() => {
@@ -126,7 +132,16 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
         pluginId: p.pluginId,
       }),
     )
+  // The manager tab is the one panel the editor contributes itself, so it is
+  // also the one that can be alone in the rail — see `showsPluginManager`.
   const manager =
-    workspaceMode === 'edit' && !hostIds.has(pluginsManagerPanel.id) ? [pluginsManagerPanel] : []
+    !hostIds.has(pluginsManagerPanel.id) &&
+    showsPluginManager({
+      managedPluginCount: managedPluginIds(registered).length,
+      readOnly,
+      workspaceMode,
+    })
+      ? [pluginsManagerPanel]
+      : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }

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

@@ -9,7 +9,7 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, ChevronRight, Layers } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
@@ -76,6 +76,7 @@ export const ViewerSceneHeader = ({
 
   const handleLevelClick = (levelId: LevelNode['id']) => {
     // When switching levels, deselect zone and items
+    if (levelId !== selection.levelId) markPerfAction('level-switch', levelId)
     useViewer.getState().setSelection({ levelId })
   }
 

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
@@ -134,6 +134,9 @@ export function ViewerStage({
   const chooseLevel = useCallback(
     (nextLevelId: string, notify = true) => {
       setInternalLevelId(nextLevelId)
+      if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
+        markPerfAction('level-switch', nextLevelId)
+      }
       selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
       if (notify) onLevelChange?.(nextLevelId)
     },

package/src/components/viewer-overlay.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { flushSync } from 'react-dom'
+import { requestWalkthroughPointerLock } from '../lib/walkthrough-pointer-lock'
 import useEditor from '../store/use-editor'
 import { ViewerControlsBar } from './viewer/viewer-controls-bar'
 import { ViewerSceneHeader } from './viewer/viewer-scene-header'
@@ -12,28 +13,6 @@ type ProjectOwner = {
   image: string | null
 }
 
-function requestWalkthroughPointerLock() {
-  const canvas = document.querySelector<HTMLCanvasElement>('[data-pascal-viewer-3d] canvas')
-  if (!canvas) return
-
-  if (!canvas.hasAttribute('tabindex')) {
-    canvas.tabIndex = -1
-  }
-  canvas.focus({ preventScroll: true })
-
-  if (document.pointerLockElement === canvas) return
-
-  try {
-    // The request can also reject ASYNC (browser cooldown after a recent
-    // unlock) — swallow it like the P-resume path; clicking the canvas
-    // re-requests once the cooldown passes.
-    const result = canvas.requestPointerLock?.() as Promise<void> | undefined
-    if (result && typeof result.catch === 'function') result.catch(() => {})
-  } catch {
-    return
-  }
-}
-
 interface ViewerOverlayProps {
   projectName?: string | null
   owner?: ProjectOwner | null

package/src/components/viewer-zone-system.tsx

@@ -13,6 +13,9 @@ export const ViewerZoneSystem = () => {
     const { levelId, zoneId } = useViewer.getState().selection
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
+    // Snapshot capture is a clean, camera-only surface — zone geometry and
+    // tags stay out of the framed shot (mirrors the editor ZoneSystem's gate).
+    const isCaptureMode = useEditor.getState().isCaptureMode
     // During any active interaction zone labels step back entirely (Sims-light).
     const zoneLabelsHidden =
       resolveOverlayPolicy(useInteractionScope.getState().scope).zoneLabels === 'hidden'
@@ -31,7 +34,8 @@ export const ViewerZoneSystem = () => {
       // The editor ZoneSystem handles the selected zone's opacity animation.
       const isSelected = id === zoneId
       const shouldShowGeometry =
-        (structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected
+        !isCaptureMode &&
+        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
       if (!obj.visible) obj.visible = true
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {
@@ -40,7 +44,7 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !zoneLabelsHidden && !!levelId && isOnSelectedLevel
+      const showLabel = !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {

package/src/components/walkthrough-hud.tsx

@@ -17,6 +17,24 @@ export type WalkthroughHudProps = {
   children?: ReactNode
 }
 
+/** The centered walkthrough pointer: a dot that grows into a green ring over
+ *  an interactable (door / window / elevator). Also mounted by the snapshot
+ *  capture overlay so walk / drone framing keeps the same E-to-open pointer. */
+export function WalkthroughCrosshair({ interact }: { interact: WalkthroughInteract }) {
+  return (
+    <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div
+        className={cn(
+          'rounded-full transition-all duration-150',
+          interact
+            ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
+            : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
+        )}
+      />
+    </div>
+  )
+}
+
 export function WalkthroughHud({
   floorLabel,
   zoneLabel,
@@ -51,16 +69,7 @@ export function WalkthroughHud({
         {children}
       </div>
 
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <div
-          className={cn(
-            'rounded-full transition-all duration-150',
-            interact
-              ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
-              : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
-          )}
-        />
-      </div>
+      <WalkthroughCrosshair interact={interact} />
 
       <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2">
         {suspended ? (

package/src/hooks/use-auto-save.test.ts

@@ -1,5 +1,9 @@
 import { describe, expect, test } from 'bun:test'
-import { createStoredNodeCountTracker, isSuspiciousNodeDrop } from './use-auto-save'
+import {
+  createStoredNodeCountTracker,
+  decideExitFlush,
+  isSuspiciousNodeDrop,
+} from './use-auto-save'
 
 describe('isSuspiciousNodeDrop', () => {
   test('blocks populated scenes from being flushed as empty skeletons', () => {
@@ -61,3 +65,71 @@ describe('createStoredNodeCountTracker', () => {
     expect(tracker.allowWrite(3)).toBe(true)
   })
 })
+
+describe('decideExitFlush', () => {
+  test('reproduces the 2026-08-16 scene-wipe sequence and skips the flush', () => {
+    // The exact traced wipe (dev repro, scenes a4993ec9f1ab/1befee38f973 and
+    // the live sessions of 2026-08-18):
+    //  1. useAutoSave subscribes; store = initial empty state.
+    //  2. useHostPanels' mount effect writes default installedPlugins — a
+    //     scene-store change BEFORE the Editor's load effect runs, so the
+    //     session is marked dirty with zero user edits.
+    //  3. The load effect sets loading=true and calls unloadScene(); the
+    //     tracker re-baselines to the transient 0-node state.
+    //  4. StrictMode's simulated unmount (prod: tab close / navigation)
+    //     runs the effect cleanup -> flushOnExit with an EMPTY store.
+    // The flush must be skipped: the store content is transient, not data.
+    expect(
+      decideExitFlush({
+        isLoadingScene: true,
+        hasDirtyChanges: true,
+        storedNodeCount: 0,
+        currentNodeCount: 0,
+      }),
+    ).toBe('skip-loading')
+  })
+
+  test('never flushes while a load is in flight, whatever the counts say', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: true,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 74,
+      }),
+    ).toBe('skip-loading')
+  })
+
+  test('does nothing when there are no dirty changes', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: false,
+        storedNodeCount: 74,
+        currentNodeCount: 0,
+      }),
+    ).toBe('skip-clean')
+  })
+
+  test('blocks a populated-to-scaffold drop after hydration', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 0,
+      }),
+    ).toBe('blocked-suspicious')
+  })
+
+  test('flushes ordinary dirty sessions on exit', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 75,
+      }),
+    ).toBe('flush')
+  })
+})

package/src/hooks/use-auto-save.ts

@@ -45,6 +45,35 @@ export function createStoredNodeCountTracker(initialNodeCount: number) {
   }
 }
 
+export type ExitFlushDecision = 'skip-clean' | 'skip-loading' | 'blocked-suspicious' | 'flush'
+
+/**
+ * Decides what the unload/unmount flush may do with the store's current
+ * content. Pure so the wipe scenarios stay unit-testable.
+ *
+ * `skip-loading` is the load-bearing branch: while a scene load is in flight
+ * the store passes through an intermediate `unloadScene()` state — zero nodes,
+ * zero roots — that is NOT user data. A flush fired in that window (StrictMode
+ * simulated unmount in dev, a quick tab close or navigation in prod) used to
+ * serialize that empty store and PUT it over the server copy, wiping the scene
+ * at v2. The dirty flag alone cannot protect here: document-level writes that
+ * land before hydration (e.g. the host-panel default `installedPlugins` sync)
+ * mark the session dirty without any user edit.
+ */
+export function decideExitFlush(opts: {
+  isLoadingScene: boolean
+  hasDirtyChanges: boolean
+  storedNodeCount: number
+  currentNodeCount: number
+}): ExitFlushDecision {
+  if (!opts.hasDirtyChanges) return 'skip-clean'
+  if (opts.isLoadingScene) return 'skip-loading'
+  if (isSuspiciousNodeDrop(opts.storedNodeCount, opts.currentNodeCount)) {
+    return 'blocked-suspicious'
+  }
+  return 'flush'
+}
+
 export type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'paused' | 'error'
 
 interface UseAutoSaveOptions {
@@ -65,10 +94,19 @@ export function useAutoSave({
   onDirty,
   onSaveStatusChange,
   isVersionPreviewMode = false,
-}: UseAutoSaveOptions): { isLoadingSceneRef: MutableRefObject<boolean> } {
+}: UseAutoSaveOptions): {
+  isLoadingSceneRef: MutableRefObject<boolean>
+  saveNow: () => void
+} {
   const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const isSavingRef = useRef(false)
-  const isLoadingSceneRef = useRef(false)
+  // Starts TRUE: the scene is "loading" from mount until the Editor's load
+  // effect completes its first hydration. The Editor's load effect runs
+  // several hooks AFTER this one (hook order), so store writes in that gap —
+  // e.g. `useHostPanels` syncing default `installedPlugins` on mount — must
+  // not mark the session dirty or arm a save: the store still holds the empty
+  // pre-hydration state, and flushing it wipes the scene server-side.
+  const isLoadingSceneRef = useRef(true)
   const pendingSaveRef = useRef(false)
   const executeSaveRef = useRef<(() => Promise<void>) | null>(null)
   const hasDirtyChangesRef = useRef(false)
@@ -220,17 +258,31 @@ export function useAutoSave({
     // would otherwise drop the change entirely. `pagehide` fires in cases
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
-      if (!hasDirtyChangesRef.current) return
       const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
       const currentNodeCount = Object.keys(nodes).length
       const previousNodeCount = storedNodeCount.count
-      if (!storedNodeCount.allowWrite(currentNodeCount)) {
+      const decision = decideExitFlush({
+        isLoadingScene: isLoadingSceneRef.current,
+        hasDirtyChanges: hasDirtyChangesRef.current,
+        storedNodeCount: previousNodeCount,
+        currentNodeCount,
+      })
+      if (decision === 'skip-clean') return
+      if (decision === 'skip-loading') {
+        console.warn(
+          '[autosave] Skipped unload flush: a scene load is in flight, the store content is transient. Nothing user-authored is lost.',
+        )
+        return
+      }
+      if (decision === 'blocked-suspicious') {
         console.warn(
           `[autosave] Blocked unload flush: scene dropped from ${previousNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
         )
         setSaveStatus('error')
         return
       }
+      // 'flush' — adopt the write as the new stored baseline.
+      storedNodeCount.allowWrite(currentNodeCount)
 
       hasDirtyChangesRef.current = false
       const sceneGraph = {
@@ -290,5 +342,24 @@ export function useAutoSave({
     setSaveStatus('saved')
   }, [isVersionPreviewMode, setSaveStatus])
 
-  return { isLoadingSceneRef }
+  // Imperative flush for the save shortcut: drop the debounce and write now,
+  // through the same `executeSave` so the wipe guard and status callbacks stay
+  // in the loop. A write already in flight only arms the follow-up.
+  const saveNow = useCallback(() => {
+    if (isLoadingSceneRef.current) return
+
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+      saveTimeoutRef.current = undefined
+    }
+
+    if (isSavingRef.current) {
+      pendingSaveRef.current = true
+      return
+    }
+
+    executeSaveRef.current?.()
+  }, [])
+
+  return { isLoadingSceneRef, saveNow }
 }

package/src/hooks/use-ceiling-events.test.ts

@@ -0,0 +1,122 @@
+import { expect, test } from 'bun:test'
+import {
+  type CeilingEvent,
+  CeilingNode,
+  emitter,
+  LevelNode,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { hideFromScene, showInScene, useViewer } from '@pascal-app/viewer'
+import { _roots, act, createRoot } from '@react-three/fiber'
+import { createElement } from 'react'
+import {
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  type WebGLRenderer,
+} from 'three'
+import useEditor from '../store/use-editor'
+import { useCeilingEvents } from './use-ceiling-events'
+
+test('ceiling-item placement keeps move and commit hits while an unhovered ceiling is batched', async () => {
+  const previousViewer = useViewer.getState()
+  const previousEditor = useEditor.getState()
+  const previousScene = useScene.getState()
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  const canvas = Object.assign(new EventTarget(), {
+    getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
+  }) as unknown as HTMLCanvasElement
+  const root = createRoot(canvas)
+  const camera = new PerspectiveCamera(60, 1, 0.1, 100)
+  camera.position.set(0, 1, 5)
+  camera.lookAt(0, 3, 0)
+  camera.updateMatrixWorld()
+  const level = LevelNode.parse({ id: 'level_ceiling_batch' })
+  const ceiling = CeilingNode.parse({
+    id: 'ceiling_placement_batch',
+    parentId: level.id,
+    polygon: [
+      [-5, -5],
+      [5, -5],
+      [5, 5],
+      [-5, 5],
+    ],
+  })
+  const surface = new Mesh(new PlaneGeometry(10, 10).rotateX(-Math.PI / 2), new MeshBasicMaterial())
+  surface.position.y = 3
+  surface.updateMatrixWorld(true)
+  const moves: CeilingEvent[] = []
+  const clicks: CeilingEvent[] = []
+  const onMove = (event: CeilingEvent) => moves.push(event)
+  const onClick = (event: CeilingEvent) => clicks.push(event)
+  emitter.on('ceiling:move', onMove)
+  emitter.on('ceiling:click', onClick)
+  function Placement() {
+    useCeilingEvents()
+    return null
+  }
+  const send = () => {
+    for (const type of ['pointermove', 'click']) {
+      canvas.dispatchEvent(Object.assign(new Event(type), { clientX: 55, clientY: 50, button: 0 }))
+    }
+  }
+  try {
+    sceneRegistry.nodes.set(ceiling.id, surface)
+    sceneRegistry.byType.ceiling!.add(ceiling.id)
+    useScene.setState({ nodes: { [level.id]: level, [ceiling.id]: ceiling } })
+    useViewer.setState({
+      hoveredId: null,
+      cameraDragging: false,
+      selection: { buildingId: null, levelId: level.id, zoneId: null, selectedIds: [] },
+    })
+    useEditor.setState({ selectedItem: { attachTo: 'ceiling' } as never })
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    await act(async () => {
+      root.render(createElement(Placement))
+    })
+    send()
+    hideFromScene(surface, 'batched')
+    send()
+    showInScene(surface, 'batched')
+    send()
+    expect(moves).toHaveLength(3)
+    expect(clicks).toHaveLength(3)
+    expect(moves[0]!.position[1]).toBeCloseTo(3)
+    for (const hit of [...moves, ...clicks]) {
+      expect(hit.node.id).toBe(ceiling.id)
+      expect(hit.position).toEqual(moves[0]!.position)
+      expect(hit.localPosition).toEqual(moves[0]!.localPosition)
+    }
+    expect(useViewer.getState().hoveredId).toBeNull()
+  } finally {
+    await act(async () => {
+      root.render(null)
+    })
+    _roots.delete(canvas)
+    emitter.off('ceiling:move', onMove)
+    emitter.off('ceiling:click', onClick)
+    sceneRegistry.nodes.delete(ceiling.id)
+    sceneRegistry.byType.ceiling!.delete(ceiling.id)
+    surface.geometry.dispose()
+    surface.material.dispose()
+    useScene.setState(previousScene)
+    useEditor.setState(previousEditor)
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})

package/src/hooks/use-drag-action.ts

@@ -14,6 +14,7 @@ import {
   type SpatialQuery,
   useScene,
 } from '@pascal-app/core'
+import { beginPerfAction, cancelPerfAction, commitPerfAction } from '@pascal-app/viewer'
 import { useEffect, useRef } from 'react'
 
 const sceneApi = createSceneApi(useScene)
@@ -74,14 +75,26 @@ export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
   useEffect(() => {
     if (!args.active) return
 
+    const initial = argsRef.current.initial
+    const nodeType = initial.node?.type
+    const isEndpoint = initial.handleId === 'start' || initial.handleId === 'end'
+    const actionName = isEndpoint && nodeType ? `drag:${nodeType}-endpoint` : 'drag:move'
+
     const session = createDragSession<Ctx, Draft>(argsRef.current.action, sceneApi, {
       spatialQuery: argsRef.current.spatialQuery,
       childQuery: argsRef.current.childQuery,
-      onCommit: () => argsRef.current.onCommit?.(),
-      onCancel: () => argsRef.current.onCancel?.(),
+      onCommit: () => {
+        commitPerfAction()
+        argsRef.current.onCommit?.()
+      },
+      onCancel: () => {
+        cancelPerfAction()
+        argsRef.current.onCancel?.()
+      },
     })
 
-    session.start(argsRef.current.initial)
+    beginPerfAction(actionName, initial.node?.id ?? nodeType ?? '')
+    session.start(initial)
 
     const activatedAt = Date.now()
     const graceMs = argsRef.current.activationGraceMs ?? 150
@@ -119,6 +132,7 @@ export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
       }
       // If the parent flipped `active` to false (or unmounted) while we were
       // still mid-drag, treat it as a cancel — no dangling history pause.
+      if (session.isActive()) cancelPerfAction()
       session.dispose()
     }
   }, [args.active])