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

package/src/components/editor/index.tsx

@@ -14,15 +14,33 @@ import {
 import {
   type HoverStyles,
   InteractiveSystem,
+  PERF_OVERLAY_ENABLED,
+  recordPerfSample,
   SceneEnvironment,
   useViewer,
   Viewer,
+  ViewerPresentations,
 } from '@pascal-app/viewer'
-import { memo, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  memo,
+  Profiler,
+  type ProfilerOnRenderCallback,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { ViewerOverlay } from '../../components/viewer-overlay'
 import { ViewerZoneSystem } from '../../components/viewer-zone-system'
 import { type SaveStatus, useAutoSave } from '../../hooks/use-auto-save'
 import { useKeyboard } from '../../hooks/use-keyboard'
+import { useSaveShortcut } from '../../hooks/use-save-shortcut'
+import {
+  createLocalProjectPresentationPersistence,
+  type LocalProjectPresentationPersistence,
+} from '../../lib/local-project-presentation-persistence'
 import { type ActivePaintMaterial, hasActivePaintMaterial } from '../../lib/material-paint'
 import {
   applySceneGraphToEditor,
@@ -31,6 +49,7 @@ import {
   writePersistedSelection,
 } from '../../lib/scene'
 import { disposeSFXBus, initSFXBus } from '../../lib/sfx-bus'
+import { type CameraHintAction, useCameraHintFocus } from '../../store/use-camera-hint-focus'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
 import useSessionGroups from '../../store/use-session-groups'
@@ -52,7 +71,7 @@ import { PanelManager } from '../ui/panels/panel-manager'
 import { ErrorBoundary } from '../ui/primitives/error-boundary'
 import { useSidebarStore } from '../ui/primitives/sidebar'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
-import { SceneLoader } from '../ui/scene-loader'
+import { SceneLoader, SceneLoadFailed } from '../ui/scene-loader'
 import { AppSidebar } from '../ui/sidebar/app-sidebar'
 import type { ExtraPanel } from '../ui/sidebar/icon-rail'
 import { SettingsPanel, type SettingsPanelProps } from '../ui/sidebar/panels/settings-panel'
@@ -61,6 +80,7 @@ import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { useHostPanels } from '../ui/sidebar/use-plugin-panels'
 import { ViewerStage } from '../viewer/viewer-stage'
 import type { ViewerStageMode } from '../viewer/viewer-stage-modes'
+import { CaptureCameraRig } from './capture-camera-rig'
 import { CustomCameraControls } from './custom-camera-controls'
 import { DeleteConfirmationDialog } from './delete-confirmation-dialog'
 import { EditorLayoutV2 } from './editor-layout-v2'
@@ -98,7 +118,12 @@ const PAINT_CURSOR_BADGE_DISABLED_COLOR = '#94a3b8'
 const PAINT_CURSOR_BADGE_OFFSET_X = 14
 const PAINT_CURSOR_BADGE_OFFSET_Y = 14
 const SCENE_READY_FALLBACK_MS = 8000
+const PRESENTATION_PROJECT_NOT_RESTORED = Symbol('presentation-project-not-restored')
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
 type PaintCursorBadgeState = 'empty' | 'ready' | 'blocked'
+const recordEditorRender: ProfilerOnRenderCallback = (_id, _phase, actualDuration) => {
+  if (PERF_OVERLAY_ENABLED) recordPerfSample('react-render', actualDuration)
+}
 const EDITOR_HOVER_STYLES: HoverStyles = {
   default: { visibleColor: 0x00_aa_ff, hiddenColor: 0xf3_ff_47, strength: 5, pulse: true },
   delete: { visibleColor: 0xef_44_44, hiddenColor: 0x99_1b_1b, strength: 6, pulse: false },
@@ -178,6 +203,12 @@ export interface EditorProps {
   // Persistence — defaults to localStorage when omitted
   onLoad?: () => Promise<SceneGraph | null>
   onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
+  /**
+   * Cmd/Ctrl+S. Return true when the host handled the save (the community
+   * version checkpoint); anything else falls through to flushing the autosave,
+   * so the chord still saves when the host's control isn't mounted.
+   */
+  onSaveShortcut?: () => boolean | undefined
   onDirty?: () => void
   onSaveStatusChange?: (status: SaveStatus) => void
 
@@ -380,7 +411,7 @@ type ShortcutKey = {
 }
 
 type CameraControlHint = {
-  action: string
+  action: CameraHintAction
   keys: ShortcutKey[]
   alternativeKeys?: ShortcutKey[]
 }
@@ -514,7 +545,15 @@ function ViewerCanvasControlsHint({
   isPreviewMode: boolean
   onDismiss: () => void
 }) {
-  const hints = isPreviewMode ? PREVIEW_CAMERA_CONTROL_HINTS : EDITOR_CAMERA_CONTROL_HINTS
+  const all = isPreviewMode ? PREVIEW_CAMERA_CONTROL_HINTS : EDITOR_CAMERA_CONTROL_HINTS
+  // A host teaching one gesture at a time narrows this to the one it is asking
+  // for, and to nothing once it is done. Null — the default — is all of them.
+  const focus = useCameraHintFocus((state) => state.actions)
+  const hints = focus === null ? all : all.filter((hint) => focus.includes(hint.action))
+
+  if (hints.length === 0) {
+    return null
+  }
 
   return (
     <div className="pointer-events-none absolute top-14 left-1/2 z-40 max-w-[calc(100%-2rem)] -translate-x-1/2">
@@ -522,7 +561,10 @@ function ViewerCanvasControlsHint({
         aria-label="Camera controls hint"
         className="pointer-events-auto flex items-start gap-3 rounded-2xl border border-border/35 bg-background/90 px-3.5 py-2.5 shadow-elevation-4 backdrop-blur-xl"
       >
-        <div className="grid min-w-0 flex-1 grid-cols-3 items-start divide-x divide-border/18">
+        <div
+          className="grid min-w-0 flex-1 items-start divide-x divide-border/18"
+          style={{ gridTemplateColumns: `repeat(${hints.length}, minmax(0, 1fr))` }}
+        >
           {hints.map((hint) => (
             <CameraControlHintItem hint={hint} key={hint.action} />
           ))}
@@ -743,6 +785,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isStudioMode,
   onThumbnailCapture,
   viewerSceneSlot,
+  presentationsReady,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
@@ -750,6 +793,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isStudioMode: boolean
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
   viewerSceneSlot?: ReactNode
+  presentationsReady: boolean
 }) {
   // Studio mode is a clean render/snapshot surface — no selection or editing
   // affordances. It mirrors version-preview's chrome gating on the canvas.
@@ -784,10 +828,12 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isLoading || isFirstPersonMode) && <SnapAwareGrid />}
       {!(isLoading || noEditing) && <ToolManager />}
       {isFirstPersonMode && <FirstPersonControls />}
+      {isCaptureMode && <CaptureCameraRig />}
       <CustomCameraControls />
       <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
       {!isFirstPersonMode && <SiteEdgeLabels />}
       <InteractiveSystem />
+      {presentationsReady ? <ViewerPresentations /> : null}
       {!noEditing && viewerSceneSlot}
     </>
   )
@@ -971,6 +1017,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   sceneReadyKey,
   onSceneReadyChange,
   onThumbnailCapture,
+  presentationsReady,
   viewerSceneSlot,
   floorplanSceneSlot,
   disablePostFx = false,
@@ -984,6 +1031,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   sceneReadyKey: number
   onSceneReadyChange: (ready: boolean) => void
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
+  presentationsReady: boolean
   viewerSceneSlot?: ReactNode
   floorplanSceneSlot?: ReactNode
   disablePostFx?: boolean
@@ -992,6 +1040,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
   const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
   const setFloorplanPaneRatio = useEditor((s) => s.setFloorplanPaneRatio)
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
 
   const [isCameraControlsHintVisible, setIsCameraControlsHintVisible] = useState<boolean | null>(
     null,
@@ -1106,7 +1155,10 @@ const ViewerCanvas = memo(function ViewerCanvas({
             renderContext="editor"
             renderPaused={!show3d && !showLoader}
             sceneReadyKey={sceneReadyKey}
-            selectionManager={isFirstPersonMode ? 'default' : 'custom'}
+            // Walk/drone framing during snapshot capture is camera-only: the
+            // viewer's default selection manager would hover-highlight whatever
+            // the cursor crosses, which orbit capture never does.
+            selectionManager={isFirstPersonMode && !isCaptureMode ? 'default' : 'custom'}
           >
             <ViewerSceneContent
               isFirstPersonMode={isFirstPersonMode}
@@ -1114,6 +1166,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
               isStudioMode={isStudioMode}
               isVersionPreviewMode={isVersionPreviewMode}
               onThumbnailCapture={onThumbnailCapture}
+              presentationsReady={presentationsReady}
               viewerSceneSlot={viewerSceneSlot}
             />
           </Viewer>
@@ -1178,7 +1231,7 @@ function PreviewStage({
   )
 }
 
-export default function Editor({
+function EditorContent({
   layoutVersion = 'v1',
   appMenuButton,
   sidebarTop,
@@ -1194,6 +1247,7 @@ export default function Editor({
   projectId,
   onLoad,
   onSave,
+  onSaveShortcut,
   onDirty,
   onSaveStatusChange,
   previewScene,
@@ -1211,18 +1265,51 @@ export default function Editor({
 }: EditorProps) {
   const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const isStudioMode = useEditor((s) => s.workspaceMode === 'studio')
+  const presentationProjectId = projectId ?? null
+  const presentationPersistenceRef = useRef<LocalProjectPresentationPersistence | null>(null)
+  const [restoredPresentationProjectId, setRestoredPresentationProjectId] = useState<
+    string | null | typeof PRESENTATION_PROJECT_NOT_RESTORED
+  >(PRESENTATION_PROJECT_NOT_RESTORED)
+  const presentationsReady = restoredPresentationProjectId === presentationProjectId
+
+  useClientLayoutEffect(() => {
+    const persistence = createLocalProjectPresentationPersistence()
+    presentationPersistenceRef.current = persistence
+    return () => {
+      presentationPersistenceRef.current = null
+      persistence.dispose()
+    }
+  }, [])
+
+  useClientLayoutEffect(() => {
+    const persistence = presentationPersistenceRef.current
+    if (!persistence) return
+    persistence.switchProject(presentationProjectId)
+    setRestoredPresentationProjectId(presentationProjectId)
+  }, [presentationProjectId])
 
   useKeyboard({ isVersionPreviewMode, disabled: isFirstPersonMode || isStudioMode })
 
-  const { isLoadingSceneRef } = useAutoSave({
+  const { isLoadingSceneRef, saveNow } = useAutoSave({
     onSave,
     onDirty,
     onSaveStatusChange,
     isVersionPreviewMode,
   })
 
+  const handleSaveShortcut = useCallback(() => {
+    if (onSaveShortcut?.() === true) return
+    saveNow()
+  }, [onSaveShortcut, saveNow])
+  useSaveShortcut(handleSaveShortcut)
+
   const [isSceneLoading, setIsSceneLoading] = useState(false)
   const [hasLoadedInitialScene, setHasLoadedInitialScene] = useState(false)
+  // A failed `onLoad` is shown as an error with a retry, never as an empty
+  // scene: an editor that renders the default scaffold after a failed load
+  // autosaves that scaffold over the real project.
+  const [sceneLoadError, setSceneLoadError] = useState<unknown>(null)
+  const [sceneLoadAttempt, setSceneLoadAttempt] = useState(0)
   const [sceneReadyKey, setSceneReadyKey] = useState(0)
   const [isViewerSceneReady, setIsViewerSceneReady] = useState(false)
   const [previewStageMode, setPreviewStageMode] = useState<ViewerStageMode>('3d')
@@ -1258,12 +1345,14 @@ export default function Editor({
     }
   }, [projectId])
 
-  // Load scene on mount (or when onLoad identity changes, e.g. project switch)
+  // Load on mount, project switches, and explicit retry attempts.
   useEffect(() => {
+    void sceneLoadAttempt
     let cancelled = false
 
     async function load() {
       isLoadingSceneRef.current = true
+      setSceneLoadError(null)
       setHasLoadedInitialScene(false)
       setIsViewerSceneReady(false)
       setIsSceneLoading(true)
@@ -1272,6 +1361,7 @@ export default function Editor({
       // Session groups are not scene-graph state — clear on every load/switch.
       useSessionGroups.getState().clearGroups()
 
+      let failed = false
       try {
         const sceneGraph = onLoad ? await onLoad() : loadSceneFromLocalStorage()
         if (!cancelled) {
@@ -1279,19 +1369,23 @@ export default function Editor({
           setIsViewerSceneReady(false)
           setSceneReadyKey((key) => key + 1)
         }
-      } catch {
+      } catch (error) {
+        // Leave the store unloaded and the autosave loop in its loading
+        // state: nothing may be written until a load actually succeeds.
+        failed = true
         if (!cancelled) {
-          applySceneGraphToEditor(null)
-          setIsViewerSceneReady(false)
-          setSceneReadyKey((key) => key + 1)
+          console.error('[editor] scene load failed', error)
+          setSceneLoadError(error ?? new Error('Scene load failed'))
         }
       } finally {
         if (!cancelled) {
           setIsSceneLoading(false)
-          setHasLoadedInitialScene(true)
-          requestAnimationFrame(() => {
-            isLoadingSceneRef.current = false
-          })
+          if (!failed) {
+            setHasLoadedInitialScene(true)
+            requestAnimationFrame(() => {
+              isLoadingSceneRef.current = false
+            })
+          }
         }
       }
     }
@@ -1301,7 +1395,11 @@ export default function Editor({
     return () => {
       cancelled = true
     }
-  }, [onLoad, isLoadingSceneRef])
+  }, [onLoad, isLoadingSceneRef, sceneLoadAttempt])
+
+  const retrySceneLoad = useCallback(() => {
+    setSceneLoadAttempt((attempt) => attempt + 1)
+  }, [])
 
   // Apply preview scene when version preview mode changes
   useEffect(() => {
@@ -1417,6 +1515,7 @@ export default function Editor({
       <CustomCameraControls />
       <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
       <InteractiveSystem />
+      {presentationsReady ? <ViewerPresentations /> : null}
     </Viewer>
   )
 
@@ -1430,6 +1529,7 @@ export default function Editor({
       isVersionPreviewMode={isVersionPreviewMode}
       onSceneReadyChange={handleSceneReadyChange}
       onThumbnailCapture={onThumbnailCapture}
+      presentationsReady={presentationsReady}
       sceneReadyKey={sceneReadyKey}
       showLoader={showLoader}
       viewerSceneSlot={viewerSceneSlot}
@@ -1490,7 +1590,11 @@ export default function Editor({
         <FloorplanModeCoordinator />
         {visibleLoader && (
           <div className="fixed inset-0 z-60">
-            <SceneLoader className="bg-background" />
+            {sceneLoadError ? (
+              <SceneLoadFailed className="bg-background" onRetry={retrySceneLoad} />
+            ) : (
+              <SceneLoader className="bg-background" />
+            )}
           </div>
         )}
 
@@ -1527,7 +1631,10 @@ export default function Editor({
                       <HelperManager />
                     </div>
                   )}
-                  {isFirstPersonMode && (
+                  {/* Capture mode drives walk / drone from its own overlay, which
+                      owns the framing chrome — the walkthrough HUD would both
+                      clutter the frame and offer a second, conflicting exit. */}
+                  {isFirstPersonMode && !isCaptureMode && (
                     <FirstPersonOverlay
                       onExit={() => useEditor.getState().setFirstPersonMode(false)}
                     />
@@ -1563,7 +1670,11 @@ export default function Editor({
       <FloorplanModeCoordinator />
       {visibleLoader && (
         <div className="fixed inset-0 z-60">
-          <SceneLoader className="bg-background" />
+          {sceneLoadError ? (
+            <SceneLoadFailed className="bg-background" onRetry={retrySceneLoad} />
+          ) : (
+            <SceneLoader className="bg-background" />
+          )}
         </div>
       )}
 
@@ -1613,3 +1724,11 @@ export default function Editor({
     </div>
   )
 }
+
+export default function Editor(props: EditorProps) {
+  return (
+    <Profiler id="editor" onRender={recordEditorRender}>
+      <EditorContent {...props} />
+    </Profiler>
+  )
+}

package/src/components/editor/node-action-menu.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Group, Move, Search, Spline, Trash2, Ungroup } from 'lucide-react'
+import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
 import type { MouseEventHandler, PointerEventHandler } from 'react'
 
 type NodeActionMenuProps = {
@@ -10,6 +10,7 @@ type NodeActionMenuProps = {
   onDelete?: MouseEventHandler<HTMLButtonElement>
   onDuplicate?: MouseEventHandler<HTMLButtonElement>
   onMove?: MouseEventHandler<HTMLButtonElement>
+  onEditMesh?: MouseEventHandler<HTMLButtonElement>
   onCurve?: MouseEventHandler<HTMLButtonElement>
   /** Session group (Ctrl/Cmd+G) — multi-selection floating pill. */
   onGroup?: MouseEventHandler<HTMLButtonElement>
@@ -27,6 +28,7 @@ export function NodeActionMenu({
   onDelete,
   onDuplicate,
   onMove,
+  onEditMesh,
   onCurve,
   onGroup,
   onUngroup,
@@ -65,6 +67,17 @@ export function NodeActionMenu({
           <Move className="h-4 w-4" />
         </button>
       )}
+      {onEditMesh && (
+        <button
+          aria-label="Edit mesh"
+          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={onEditMesh}
+          title="Edit mesh"
+          type="button"
+        >
+          <PencilRuler className="h-4 w-4" />
+        </button>
+      )}
       {onGroup && (
         <button
           aria-label="Group selection"

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

@@ -62,7 +62,7 @@ import {
   HandleArrow,
   NO_RAYCAST,
 } from './handles/handle-arrow'
-import { replacePreviewOverrideIds } from './handles/preview-overrides'
+import { createLinearResizeDragBinding } from './handles/linear-resize-drag'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 
@@ -235,16 +235,15 @@ export function NodeArrowHandles() {
       typeof def.handles === 'function'
         ? def.handles(node as never, descriptorSceneApi)
         : (def.handles as HandleDescriptor[])
-    // The whole-node move-cross gizmo is gone: moving is now click-to-move on
-    // the selected node body (see selection-manager). Drop both flavours — the
-    // `translate` ground cross (column/roof/shelf/spawn) and the `tap-action`
-    // `move-cross` (item/door/window/elevator/stair) — keep rotate/resize.
-    return all.filter(
-      (d) =>
-        d.kind !== 'translate' &&
-        !('shape' in d && d.shape === 'move-cross') &&
-        (d.kind !== 'linear-resize' || d.visible?.(node as never, descriptorSceneApi) !== false),
-    )
+    return all.filter((descriptor) => {
+      if (descriptor.kind === 'translate') return false
+      const visible =
+        'visible' in descriptor
+          ? descriptor.visible?.(node as never, descriptorSceneApi)
+          : undefined
+      if ('shape' in descriptor && descriptor.shape === 'move-cross') return visible === true
+      return visible !== false
+    })
   }, [node, def, descriptorSceneApi])
 
   const shouldRender =
@@ -293,18 +292,25 @@ function NodeArrowHandlesForNode({
   descriptors: HandleDescriptor[]
 }) {
   const parentId = node.parentId ?? null
-  const grandparentId = useScene((state) => {
-    if (!parentId) return null
-    const parent = state.nodes[parentId as AnyNodeId]
-    return parent?.parentId ?? null
-  })
 
   const portalMode: HandlePortal = descriptors.some((d) => d.portal === 'grandparent')
     ? 'grandparent'
     : 'parent'
 
+  const portalTargetResolver = descriptors.find(
+    (descriptor) => descriptor.portalTarget !== undefined,
+  )?.portalTarget
+  const descriptorSceneApi = useMemo(() => createSceneApi(useScene), [])
+
   // Portal target: the mesh we createPortal into.
-  const portalTargetId = portalMode === 'grandparent' ? grandparentId : parentId
+  const portalTargetId = useScene((state) => {
+    if (portalTargetResolver) {
+      return portalTargetResolver(node as never, descriptorSceneApi) ?? null
+    }
+    const parentId = node.parentId ?? null
+    if (!parentId || portalMode === 'parent') return parentId
+    return state.nodes[parentId as AnyNodeId]?.parentId ?? null
+  })
   // Outer wrapper mirrors this mesh's local pose. For 'parent' mode the
   // outer IS the node (so handles + drag math both live in node-local).
   // For 'grandparent' the outer rides the parent and an inner group adds
@@ -710,10 +716,17 @@ function LinearArrow({
           getPointerRay(event.nativeEvent.clientX, event.nativeEvent.clientY, _resizeRay),
         ) / localToWorldScale
 
-      const overrideId =
-        (descriptor.kind === 'linear-resize'
-          ? descriptor.overrideTarget?.(initialNode as never, sceneApi)
-          : undefined) ?? nodeId
+      const linearBinding =
+        descriptor.kind === 'linear-resize'
+          ? createLinearResizeDragBinding({
+              descriptor,
+              initialNode,
+              nodeId,
+              sceneApi,
+              initialModifiers: { altKey: event.nativeEvent.altKey },
+            })
+          : null
+      const overrideId = linearBinding?.overrideId ?? nodeId
       const initialValue = descriptor.currentValue(initialNode)
       const minBound = resolveBound(descriptor.min, Number.NEGATIVE_INFINITY, initialNode, sceneApi)
       const maxBound = resolveBound(descriptor.max, Number.POSITIVE_INFINITY, initialNode, sceneApi)
@@ -730,14 +743,9 @@ function LinearArrow({
       // when the (snapped + clamped) value actually changes, so the cue
       // tracks real size steps instead of every sub-pixel pointer jitter.
       let lastTickValue = initialValue
-      let previewOverrideIds = new Set<AnyNodeId>()
-
       return {
         overrideId,
-        commit:
-          descriptor.kind === 'linear-resize' && descriptor.commit
-            ? (patch) => descriptor.commit?.(initialNode, patch, sceneApi)
-            : undefined,
+        commit: linearBinding?.commit,
         onBegin: () => {
           // Always claim the handle-drag scope so the HUD knows a resize is the
           // active interaction (keeps the idle select hints off-screen). The
@@ -755,12 +763,9 @@ function LinearArrow({
             descriptor.onDragEnd?.(initialNode as never, sceneApi)
           }
           if (onDrag) useOpeningGuides.getState().clear()
-          for (const previewId of previewOverrideIds) {
-            useLiveNodeOverrides.getState().clear(previewId)
-            useScene.getState().markDirty(previewId)
-          }
+          linearBinding?.clearPreview()
         },
-        move: ({ event: moveEvent, getPointerRay: getMovePointerRay }) => {
+        move: ({ event: moveEvent, modifiers, getPointerRay: getMovePointerRay }) => {
           const currentPointer =
             closestAxisParameterToRay(
               _resizeOriginW,
@@ -772,43 +777,27 @@ function LinearArrow({
           const linearDescriptor = descriptor.kind === 'linear-resize' ? descriptor : null
           const snappedNext = resolveResizeSnapValue({
             rawValue: rawNext,
+            fallbackValue: lastTickValue,
             gridSnapEnabled: linearDescriptor?.gridSnap === true,
-            gridSnapActive: isGridSnapActive(),
+            gridSnapActive: isGridSnapActive() && !modifiers.altKey,
             gridSnapStep: useEditor.getState().gridSnapStep,
-            magneticSnapActive: isMagneticSnapActive(),
+            magneticSnapActive: isMagneticSnapActive() && !modifiers.altKey,
             magneticSnap: linearDescriptor?.magneticSnap
               ? (value) => linearDescriptor.magneticSnap?.(initialNode, value, sceneApi) ?? value
               : undefined,
+            connectionSnapActive: !modifiers.altKey,
+            connectionSnap: linearDescriptor?.connectionSnap
+              ? (value) => linearDescriptor.connectionSnap?.(initialNode, value, sceneApi) ?? value
+              : undefined,
           })
           const next = Math.min(maxBound, Math.max(minBound, snappedNext))
           if (next !== lastTickValue) {
             lastTickValue = next
             sfxEmitter.emit('sfx:resize')
           }
-          const patch = descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>
-          if (descriptor.kind === 'linear-resize' && descriptor.previewOverrides) {
-            const previewEntries = descriptor.previewOverrides(initialNode as never, next, sceneApi)
-            const nextPreviewOverrideIds = replacePreviewOverrideIds(
-              previewOverrideIds,
-              previewEntries,
-              (previewId) => {
-                useLiveNodeOverrides.getState().clear(previewId)
-                useScene.getState().markDirty(previewId)
-              },
-            )
-            useLiveNodeOverrides
-              .getState()
-              .setMany(
-                previewEntries.map(([id, previewPatch]) => [
-                  id,
-                  previewPatch as Record<string, unknown>,
-                ]),
-              )
-            for (const [previewId] of previewEntries) {
-              useScene.getState().markDirty(previewId)
-            }
-            previewOverrideIds = nextPreviewOverrideIds
-          }
+          const patch = linearBinding
+            ? linearBinding.apply(next, modifiers)
+            : (descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>)
           // Let the kind publish live guides for the edge being resized.
           onDrag?.({ ...(initialNode as object), ...patch } as AnyNode, sceneApi)
           return patch