zelune 1.5.4 → 1.5.6

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.5.6] - 2026-10-24
+
+### Added
+- **NativeWind / Tailwind CSS `className` Runtime Engine (`src/runtime/nativewindShim.ts`, `src/runtime/reactNativeShim.ts`, `src/runtime/MockNavigationContext.tsx`, `vite.config.ts`)**:
+  - Automatically loads the target project's `tailwind.config.js` / `tailwind.config.ts` (`colors`, `fontSize`, `borderRadius`, `spacing`, `opacity`, `fontFamily`) in `vite.config.ts` and injects `window.__ZELUNE_TAILWIND_THEME__`.
+  - Added `resolveTailwindClassNameToStyle` and `withNativeWind` wrapper across all React Native and Expo primitives (`View`, `Text`, `Pressable`, `TouchableOpacity`, `ScrollView`, `FlatList`, `KeyboardAvoidingView`, `TextInput`, `Image`, `SafeAreaView`, `LinearGradient`, `BlurView`, `createAnimatedComponent`) so screens and UI components styled with NativeWind `className="..."` (including M3 semantic tokens like `bg-surface-container-high`, `text-on-surface`, `text-headline-md`, `text-title-sm`, `bg-primary/10`, etc.) render with full CSS styles instead of unstyled stacks.
+
+### Fixed
+- **Pinned Mobile Artboard `Dimensions` (`src/runtime/reactNativeShim.ts`, `src/runtime/MockNavigationContext.tsx`)**: Overrode `Dimensions.get('window' | 'screen')` and `useWindowDimensions()` to return `{ width: 393, height: 852, scale: 3, fontScale: 1 }` instead of the desktop browser window's `1440×900` dimensions, and upgraded the `expo-image` `<Image>` shim to use CSS `object-fit` inside an `overflow: hidden` container so carousel cards and hero images (e.g., on `HomeScreen`) size to exact 393×852 mobile proportions.
+- **Wide Zoom-Out Range (`MIN_ZOOM = 0.08`), Multi-Row Grid Layout & Zero-Re-Render Pinch Zoom (`src/canvas/CanvasApp.tsx`)**:
+  - Lowered `MIN_ZOOM` from `25%` (`0.25`) to `8%` (`0.08`), updated `buildDefaultLayout` ("Grid" button) to arrange 6+ screens into a balanced multi-row grid, and enabled automatic fit-all on initial load so all screens can be viewed at once.
+  - Updated `applyFocalZoom` to keep full floating-point precision during active trackpad pinch/Ctrl-wheel zoom (eliminating subpixel focal-point oscillation), mutate `worldContainerRef.current.style.transform` and `zoomLabelRef.current.textContent` directly on the DOM without triggering 120Hz React re-renders of `<ScreenArtboard />`, and removed `willChange: 'transform'` bitmap caching so zooming in and out is completely smooth and vibration-free.
+
+## [1.5.5] - 2026-10-23
+
+### Added
+- **Zod, React Hook Form & Sizing Utility Shims (`src/runtime/MockNavigationContext.tsx`, `plugins/viteReactNativeFallbackPlugin.ts`)**: Added `createSafeChainableProxy()` / `SAFE_CHAINABLE_PROXY` (wrapping a callable function target in a recursive `Proxy` for unlimited method/property chains), full Zod schema shims (`z`, `string`, `number`, `boolean`, `object`, `array`, `union`, `literal`, `record`, `tuple`, `any`, `unknown`, `optional`, `nullable`, `coerce`, `zodResolver`, `yupResolver`), React Hook Form shims (`useForm`, `useFormContext`, `FormProvider`, `useWatch`, `useFieldArray`, `Controller` supporting `render={({ field, fieldState, formState }) => ...}`), and React Native responsive sizing/classname helpers (`scale`, `verticalScale`, `moderateScale`, `RFValue`, `RFPercentage`, `wp`, `hp`, `clsx`, `cn`, `twMerge`).
+- **Universal Unmounted React Context Fallback (`src/runtime/MockNavigationContext.tsx`, `src/main.tsx`)**: Wrapped `React.createContext` and `React.useContext` (after `react-native-web` initializes its internal contexts) with `SAFE_CONTEXT_FALLBACK` (pre-populated with preview `user`, `profile`, `session`, `isAuthenticated: true`, `isLoading: false`, `colors`, `items: []`, `signIn`, `signOut`, `logout`, `refresh`, etc.) so screens rendered outside their root `app/_layout.tsx` providers never throw `useAuth must be used within an AuthProvider` (or `useTheme` / `useCart` / `useNotifications` equivalents).
+
+### Fixed
+- **Eliminated Canvas Panning Vibration / Jitter (`src/canvas/CanvasApp.tsx`, `src/canvas/ScreenArtboard.tsx`, `src/canvas/FlowArrowsLayer.tsx`)**:
+  - Updated `handleCanvasWheel` and `handleCanvasPointerDown` in `CanvasApp.tsx` to mutate `worldContainerRef.current.style.transform` (`translate3d(...) scale(...)`) directly on the DOM node with device-pixel rounding (`snapToDevicePixel`) and debounce `setPan` state synchronization to 120ms after movement stops, eliminating 120Hz React re-renders of all artboards while panning.
+  - Wrapped `ScreenArtboard` and `FlowArrowsLayer` in `React.memo`, scoped `selectedElement` and `inspectedElement` props to only the active screen, and suppressed `handlePointerMoveCapture` (`computeRelativeBox` / `setHoverBox`) while the canvas is moving or pointer buttons are pressed.
+  - Stabilized `useFocusEffect`, `useSegments`, `useQuery`, `useInfiniteQuery`, `useMutation`, and `useQueryClient` in `MockNavigationContext.tsx` so screens with inline `useFocusEffect` or `useEffect` dependencies do not trigger continuous re-render loops.
+- **Light-Themed Screen Root Background & Image Overflow (`src/canvas/ScreenArtboard.tsx`)**: Set `backgroundColor: '#FFFFFF'`, `color: '#0F172A'`, `overflowY: 'auto'`, `overflowX: 'hidden'`, `minWidth: 0`, and `minHeight: 0` on the inner `<ScreenComponent />` mount container so screens that rely on React Native's default white root window background render with proper contrast and horizontally overflowing images are clipped to the 393px device frame.
+
 ## [1.5.4] - 2026-10-23
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zelune",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "private": false,
   "license": "MIT",
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "zelune",
   "displayName": "Zelune — React Native Visual Canvas",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Zelune MCP & Figma-style multi-screen React Native visual canvas with live surgical AST patching and navigation flow visualization for Google Antigravity.",
   "logo": "assets/logo.svg",
   "suggestedPrompts": [

package/plugins/viteReactNativeFallbackPlugin.ts

@@ -484,53 +484,18 @@ export function viteReactNativeFallbackPlugin(
         `import { View } from 'react-native';`,
         `export * from ${JSON.stringify(normalizedShimPath)};`,
         `import * as KnownShims from ${JSON.stringify(normalizedShimPath)};`,
-        `import DefaultShim from ${JSON.stringify(normalizedShimPath)};`,
-        `function createSafeProxy() {`,
-        `  const fnTarget = function(...args) {`,
-        `    if (args.length === 1 && (typeof args[0] === 'number' || typeof args[0] === 'string')) {`,
-        `      return args[0];`,
-        `    }`,
-        `    return proxy;`,
-        `  };`,
-        `  const arrTarget = [];`,
-        `  const proxy = new Proxy(arrTarget, {`,
-        `    get(target, prop) {`,
-        `      if (prop === 'length') return 0;`,
-        `      if (prop === Symbol.iterator) {`,
-        `        return function* () {`,
-        `          yield proxy;`,
-        `          yield fnTarget;`,
-        `        };`,
-        `      }`,
-        `      if (prop === Symbol.toPrimitive) {`,
-        `        return (hint) => (hint === 'number' ? 0 : '');`,
-        `      }`,
-        `      if (prop === 'valueOf') return () => 0;`,
-        `      if (prop === 'toString') return () => '';`,
-        `      if (prop === 'then') {`,
-        `        return (onFulfilled, onRejected) => Promise.resolve({ data: null, error: null }).then(onFulfilled, onRejected);`,
-        `      }`,
-        `      if (prop === 'catch') return () => Promise.resolve({ data: null, error: null });`,
-        `      if (prop === 'finally') return (cb) => Promise.resolve({ data: null, error: null }).finally(cb);`,
-        `      if (prop === 'isLoading' || prop === 'loading' || prop === 'isPending' || prop === 'isError' || prop === 'disabled') return false;`,
-        `      if (prop === 'isReady' || prop === 'granted' || prop === 'isSuccess' || prop === ' isAuthenticated') return true;`,
-        `      if (prop === 'error' || prop === 'user' || prop === 'session') return null;`,
-        `      if (prop === 'status') return 'granted';`,
-        `      if (prop === 'data' || prop === 'items' || prop === 'results' || prop === 'list') return [];`,
-        `      if (prop === 'ref') return { current: null };`,
-        `      if (prop === 'value') return 0;`,
-        `      if (prop === 'map' || prop === 'filter' || prop === 'slice' || prop === 'flatMap') return () => [];`,
-        `      if (prop === 'forEach') return () => undefined;`,
-        `      if (prop === 'reduce') return (_fn, init) => init;`,
-        `      if (prop in target) return Reflect.get(target, prop);`,
-        `      return fnTarget;`,
-        `    },`,
-        `  });`,
-        `  return proxy;`,
-        `}`,
+        `import DefaultShim, { SAFE_CHAINABLE_PROXY } from ${JSON.stringify(normalizedShimPath)};`,
         `function createUniversalComponentStub(displayName) {`,
         `  const Comp = React.forwardRef(function UniversalNativeStub(props, ref) {`,
-        `    return React.createElement(View, { style: props?.style, ref }, props?.children);`,
+        `    if (typeof props?.render === 'function') {`,
+        `      return props.render({`,
+        `        field: { name: props?.name ?? '', value: props?.defaultValue ?? '', onChange: () => undefined, onBlur: () => undefined, ref: () => undefined },`,
+        `        fieldState: { invalid: false, isTouched: false, isDirty: false, error: undefined },`,
+        `        formState: { errors: {}, isSubmitting: false, isValid: true },`,
+        `      });`,
+        `    }`,
+        `    const content = typeof props?.children === 'function' ? props.children(SAFE_CHAINABLE_PROXY) : props?.children;`,
+        `    return React.createElement(View, { style: props?.style, className: props?.className, ref }, content);`,
         `  });`,
         `  Comp.displayName = displayName;`,
         `  return new Proxy(Comp, {`,
@@ -539,21 +504,16 @@ export function viteReactNativeFallbackPlugin(
         `      if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {`,
         `        return createUniversalComponentStub(displayName + '.' + prop);`,
         `      }`,
-        `      return () => createSafeProxy();`,
+        `      return SAFE_CHAINABLE_PROXY;`,
         `    },`,
         `  });`,
         `}`,
         `function resolveStubExport(name) {`,
         `  if (name in KnownShims) return KnownShims[name];`,
         `  if (DefaultShim && name in DefaultShim) return DefaultShim[name];`,
-        `  if (/^use[A-Z]/.test(name)) return () => createSafeProxy();`,
+        `  if (/^use[A-Z]/.test(name)) return () => SAFE_CHAINABLE_PROXY;`,
         `  if (/^[A-Z]/.test(name)) return createUniversalComponentStub(name);`,
-        `  return (...args) => {`,
-        `    if (args.length === 1 && (typeof args[0] === 'number' || typeof args[0] === 'string')) {`,
-        `      return args[0];`,
-        `    }`,
-        `    return createSafeProxy();`,
-        `  };`,
+        `  return SAFE_CHAINABLE_PROXY;`,
         `}`,
         `export default DefaultShim;`,
       ];

package/src/canvas/CanvasApp.tsx

@@ -36,21 +36,33 @@ import type { PatchPayload, ReorderPayload } from '../server/astEngine';
 const DEFAULT_WIDTH = 393;
 const DEFAULT_HEIGHT = 852;
 const ARTBOARD_GAP = 130;
+const ARTBOARD_ROW_GAP = 140;
 const INITIAL_OFFSET_X = 80;
 const INITIAL_OFFSET_Y = 70;
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 1.75;
+const MIN_ZOOM = 0.08;
+const MAX_ZOOM = 2.0;
 
 function clampZoom(z: number): number {
-  return Number(Math.min(Math.max(z, MIN_ZOOM), MAX_ZOOM).toFixed(3));
+  return Math.min(Math.max(z, MIN_ZOOM), MAX_ZOOM);
+}
+
+function snapToDevicePixel(v: number): number {
+  const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+  return Math.round(v * dpr) / dpr;
 }
 
 function buildDefaultLayout(screens: ScreenMetadata[]): ArtboardLayoutMap {
   const map: ArtboardLayoutMap = {};
+  const cols =
+    screens.length <= 5
+      ? Math.max(1, screens.length)
+      : Math.min(7, Math.ceil(Math.sqrt(screens.length * 1.6)));
   screens.forEach((screen, idx) => {
+    const col = idx % cols;
+    const row = Math.floor(idx / cols);
     map[screen.id] = {
-      x: INITIAL_OFFSET_X + idx * (DEFAULT_WIDTH + ARTBOARD_GAP),
-      y: INITIAL_OFFSET_Y,
+      x: INITIAL_OFFSET_X + col * (DEFAULT_WIDTH + ARTBOARD_GAP),
+      y: INITIAL_OFFSET_Y + row * (DEFAULT_HEIGHT + ARTBOARD_ROW_GAP),
       width: DEFAULT_WIDTH,
       height: DEFAULT_HEIGHT,
     };
@@ -128,18 +140,63 @@ export const CanvasApp: React.FC = () => {
   }>({ undoAvailable: 0, redoAvailable: 0 });
 
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
+  const worldContainerRef = useRef<HTMLDivElement | null>(null);
+  const zoomLabelRef = useRef<HTMLSpanElement | null>(null);
   const cameraTimerRef = useRef<number | null>(null);
+  const panSyncTimerRef = useRef<number | null>(null);
+  const hasInitialFitRef = useRef<boolean>(false);
 
   // Refs for synchronous access inside non-passive native wheel/gesture listeners
   const zoomRef = useRef<number>(zoom);
   const panRef = useRef<{ x: number; y: number }>(pan);
   useEffect(() => {
     zoomRef.current = zoom;
+    if (zoomLabelRef.current) {
+      zoomLabelRef.current.textContent = `${Math.round(zoom * 100)}%`;
+    }
   }, [zoom]);
   useEffect(() => {
     panRef.current = pan;
   }, [pan]);
 
+  const scheduleCameraStateSync = useCallback((commitImmediately = false) => {
+    if (panSyncTimerRef.current) {
+      window.clearTimeout(panSyncTimerRef.current);
+      panSyncTimerRef.current = null;
+    }
+    if (commitImmediately) {
+      setIsCameraAnimating(false);
+      setZoom(zoomRef.current);
+      setPan(panRef.current);
+    } else {
+      panSyncTimerRef.current = window.setTimeout(() => {
+        panSyncTimerRef.current = null;
+        setIsCameraAnimating(false);
+        setZoom(zoomRef.current);
+        setPan(panRef.current);
+      }, 140);
+    }
+  }, []);
+
+  const applyDirectPanTransform = useCallback(
+    (rawX: number, rawY: number, commitImmediately = false) => {
+      const nextPan = {
+        x: snapToDevicePixel(rawX),
+        y: snapToDevicePixel(rawY),
+      };
+      panRef.current = nextPan;
+
+      const worldEl = worldContainerRef.current;
+      if (worldEl) {
+        worldEl.style.transition = 'none';
+        worldEl.style.transform = `translate3d(${nextPan.x}px, ${nextPan.y}px, 0) scale(${zoomRef.current})`;
+      }
+
+      scheduleCameraStateSync(commitImmediately);
+    },
+    [scheduleCameraStateSync]
+  );
+
   const triggerCameraTransition = useCallback(() => {
     if (cameraTimerRef.current) {
       window.clearTimeout(cameraTimerRef.current);
@@ -191,7 +248,34 @@ export const CanvasApp: React.FC = () => {
         setLayout((prev) => {
           const base = buildDefaultLayout(sorted);
           const saved = layoutJson.ok && layoutJson.layout ? layoutJson.layout : {};
-          return { ...base, ...saved, ...prev };
+          const merged = { ...base, ...saved, ...prev };
+          if (!hasInitialFitRef.current && sorted.length > 0 && canvasViewportRef.current) {
+            hasInitialFitRef.current = true;
+            const rect = canvasViewportRef.current.getBoundingClientRect();
+            const positions = Object.values(merged);
+            if (positions.length > 0 && rect.width > 0 && rect.height > 0) {
+              const minX = Math.min(...positions.map((p) => p.x));
+              const minY = Math.min(...positions.map((p) => p.y));
+              const maxX = Math.max(...positions.map((p) => p.x + p.width));
+              const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
+              const contentWidth = maxX - minX + 140;
+              const contentHeight = maxY - minY + 140;
+              const nextZoom = clampZoom(
+                Math.min(rect.width / contentWidth, rect.height / contentHeight, 0.85)
+              );
+              const centerX = (minX + maxX) / 2;
+              const centerY = (minY + maxY) / 2;
+              const nextPan = {
+                x: Math.round(rect.width / 2 - centerX * nextZoom),
+                y: Math.round(rect.height / 2 - centerY * nextZoom),
+              };
+              zoomRef.current = nextZoom;
+              panRef.current = nextPan;
+              setZoom(nextZoom);
+              setPan(nextPan);
+            }
+          }
+          return merged;
         });
       }
     } catch (err) {
@@ -456,6 +540,7 @@ export const CanvasApp: React.FC = () => {
       if (nextZoom === prevZoom) return;
 
       // Pin the world coordinate directly under the user's cursor during two-finger pinch
+      // Keep full floating-point precision during active zoom gesture so (cursorX - worldX * nextZoom) never oscillates
       const cursorX = clientX - rect.left;
       const cursorY = clientY - rect.top;
       const worldX = (cursorX - prevPan.x) / prevZoom;
@@ -466,11 +551,16 @@ export const CanvasApp: React.FC = () => {
         y: cursorY - worldY * nextZoom,
       };
 
-      setIsCameraAnimating(false);
       zoomRef.current = nextZoom;
       panRef.current = nextPan;
-      setZoom(nextZoom);
-      setPan(nextPan);
+      if (worldContainerRef.current) {
+        worldContainerRef.current.style.transition = 'none';
+        worldContainerRef.current.style.transform = `translate3d(${nextPan.x}px, ${nextPan.y}px, 0) scale(${nextZoom})`;
+      }
+      if (zoomLabelRef.current) {
+        zoomLabelRef.current.textContent = `${Math.round(nextZoom * 100)}%`;
+      }
+      scheduleCameraStateSync(false);
     };
 
     // 1. Non-passive wheel listener on the canvas viewport for 0ms pan & focal pinch-zoom
@@ -483,13 +573,11 @@ export const CanvasApp: React.FC = () => {
         const zoomFactor = Math.exp(-e.deltaY * 0.0085);
         applyFocalZoom(zoomRef.current * zoomFactor, e.clientX, e.clientY);
       } else {
-        setIsCameraAnimating(false);
-        const nextPan = {
-          x: panRef.current.x - e.deltaX,
-          y: panRef.current.y - e.deltaY,
-        };
-        panRef.current = nextPan;
-        setPan(nextPan);
+        applyDirectPanTransform(
+          panRef.current.x - e.deltaX,
+          panRef.current.y - e.deltaY,
+          false
+        );
       }
     };
 
@@ -537,7 +625,7 @@ export const CanvasApp: React.FC = () => {
       document.removeEventListener('gesturechange', handleGestureChange);
       document.removeEventListener('gestureend', handleGestureEnd);
     };
-  }, []);
+  }, [applyDirectPanTransform, scheduleCameraStateSync]);
 
   // Center viewport on a specific screen artboard using Emil Kowalski ease-out-expo camera physics
   const focusOnScreen = useCallback(
@@ -562,48 +650,58 @@ export const CanvasApp: React.FC = () => {
   );
 
   // Fit all screens in viewport
-  const handleFitAllScreens = useCallback(() => {
-    const viewport = canvasViewportRef.current;
-    if (!viewport || screens.length === 0) return;
-    const rect = viewport.getBoundingClientRect();
+  const fitCameraToLayout = useCallback(
+    (targetLayout: ArtboardLayoutMap) => {
+      const viewport = canvasViewportRef.current;
+      if (!viewport) return;
+      const rect = viewport.getBoundingClientRect();
 
-    const positions = Object.values(layout);
-    if (positions.length === 0) return;
+      const positions = Object.values(targetLayout);
+      if (positions.length === 0) return;
 
-    const minX = Math.min(...positions.map((p) => p.x));
-    const minY = Math.min(...positions.map((p) => p.y));
-    const maxX = Math.max(...positions.map((p) => p.x + p.width));
-    const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
+      const minX = Math.min(...positions.map((p) => p.x));
+      const minY = Math.min(...positions.map((p) => p.y));
+      const maxX = Math.max(...positions.map((p) => p.x + p.width));
+      const maxY = Math.max(...positions.map((p) => p.y + p.height + 50));
 
-    const contentWidth = maxX - minX + 140;
-    const contentHeight = maxY - minY + 140;
+      const contentWidth = maxX - minX + 140;
+      const contentHeight = maxY - minY + 140;
 
-    const scaleX = rect.width / contentWidth;
-    const scaleY = rect.height / contentHeight;
-    const nextZoom = Number(Math.min(Math.max(Math.min(scaleX, scaleY), 0.28), 1.0).toFixed(2));
+      const scaleX = rect.width / contentWidth;
+      const scaleY = rect.height / contentHeight;
+      const nextZoom = clampZoom(Math.min(scaleX, scaleY, 1.0));
 
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
+      const centerX = (minX + maxX) / 2;
+      const centerY = (minY + maxY) / 2;
+      const nextPan = {
+        x: Math.round(rect.width / 2 - centerX * nextZoom),
+        y: Math.round(rect.height / 2 - centerY * nextZoom),
+      };
 
-    triggerCameraTransition();
-    setZoom(nextZoom);
-    setPan({
-      x: Math.round(rect.width / 2 - centerX * nextZoom),
-      y: Math.round(rect.height / 2 - centerY * nextZoom),
-    });
-  }, [layout, screens.length, triggerCameraTransition]);
+      triggerCameraTransition();
+      zoomRef.current = nextZoom;
+      panRef.current = nextPan;
+      setZoom(nextZoom);
+      setPan(nextPan);
+    },
+    [triggerCameraTransition]
+  );
 
-  // Reset layout to clean horizontal grid
+  const handleFitAllScreens = useCallback(() => {
+    fitCameraToLayout(layout);
+  }, [fitCameraToLayout, layout]);
+
+  // Reset layout to clean multi-row grid and fit in viewport
   const handleResetGridLayout = useCallback(() => {
     const reset = buildDefaultLayout(screens);
-    triggerCameraTransition();
     setLayout(reset);
+    fitCameraToLayout(reset);
     void fetch('/api/layout', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(reset),
     });
-  }, [screens, triggerCameraTransition]);
+  }, [screens, fitCameraToLayout]);
 
   // Move single artboard
   const handleMoveArtboard = useCallback((screenId: string, nextX: number, nextY: number) => {
@@ -630,7 +728,14 @@ export const CanvasApp: React.FC = () => {
     [focusOnScreen]
   );
 
-  // Canvas background pointer pan (0ms direct manipulation override)
+  const handleSelectFlow = useCallback(
+    (edge: NavigationEdge) => {
+      focusOnScreen(edge.toScreen);
+    },
+    [focusOnScreen]
+  );
+
+  // Canvas background pointer pan (0ms direct DOM manipulation override)
   const handleCanvasPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (e.button !== 0 && e.button !== 1) return;
     setIsCameraAnimating(false);
@@ -638,20 +743,20 @@ export const CanvasApp: React.FC = () => {
 
     const startX = e.clientX;
     const startY = e.clientY;
-    const startPanX = pan.x;
-    const startPanY = pan.y;
+    const startPanX = panRef.current.x;
+    const startPanY = panRef.current.y;
 
     const handleMove = (moveEvent: PointerEvent) => {
-      const nextPan = {
-        x: startPanX + (moveEvent.clientX - startX),
-        y: startPanY + (moveEvent.clientY - startY),
-      };
-      panRef.current = nextPan;
-      setPan(nextPan);
+      applyDirectPanTransform(
+        startPanX + (moveEvent.clientX - startX),
+        startPanY + (moveEvent.clientY - startY),
+        false
+      );
     };
 
     const handleUp = () => {
       setIsPanning(false);
+      applyDirectPanTransform(panRef.current.x, panRef.current.y, true);
       window.removeEventListener('pointermove', handleMove);
       window.removeEventListener('pointerup', handleUp);
     };
@@ -913,6 +1018,7 @@ export const CanvasApp: React.FC = () => {
           </button>
 
           <span
+            ref={zoomLabelRef}
             className="tabular-nums"
             style={{
               minWidth: 46,
@@ -1299,13 +1405,13 @@ export const CanvasApp: React.FC = () => {
 
           {/* World Transform Container: Emil Kowalski ease-out-expo on camera focus, 0ms on direct drag/pinch */}
           <div
+            ref={worldContainerRef}
             style={{
               position: 'absolute',
               top: 0,
               left: 0,
               transform: `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})`,
               transformOrigin: '0 0',
-              willChange: 'transform',
               transition: isCameraAnimating
                 ? 'transform var(--duration-camera) var(--ease-out-expo)'
                 : 'none',
@@ -1317,7 +1423,7 @@ export const CanvasApp: React.FC = () => {
                 layout={layout}
                 activeScreenId={activeScreenId}
                 highlightedScreenId={highlightedScreenId}
-                onSelectFlow={(edge: NavigationEdge) => focusOnScreen(edge.toScreen)}
+                onSelectFlow={handleSelectFlow}
               />
             )}
 
@@ -1329,6 +1435,7 @@ export const CanvasApp: React.FC = () => {
                 height: DEFAULT_HEIGHT,
               };
               const ScreenComponent = SCREEN_COMPONENTS[screen.id];
+              const isSelectedScreen = selectedElement?.screenId === screen.id;
 
               return (
                 <ScreenArtboard
@@ -1340,8 +1447,9 @@ export const CanvasApp: React.FC = () => {
                   mode={mode}
                   isActiveScreen={activeScreenId === screen.id}
                   isHighlightedScreen={highlightedScreenId === screen.id}
-                  selectedElement={selectedElement}
-                  inspectedElement={inspectedData}
+                  isCanvasMoving={isPanning}
+                  selectedElement={isSelectedScreen ? selectedElement : null}
+                  inspectedElement={isSelectedScreen ? inspectedData : null}
                   onSelectElement={handleSelectElement}
                   onSelectScreen={setActiveScreenId}
                   onFocusScreen={focusOnScreen}

package/src/canvas/FlowArrowsLayer.tsx

@@ -11,7 +11,7 @@ interface FlowArrowsLayerProps {
 
 const ARTBOARD_HEADER_OFFSET = 38;
 
-export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = ({
+export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
   screens,
   layout,
   activeScreenId,
@@ -194,4 +194,4 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = ({
       })}
     </svg>
   );
-};
+});

package/src/canvas/ScreenArtboard.tsx

@@ -29,6 +29,7 @@ interface ScreenArtboardProps {
   mode: CanvasMode;
   isActiveScreen: boolean;
   isHighlightedScreen: boolean;
+  isCanvasMoving?: boolean;
   selectedElement: SelectedElementRef | null;
   inspectedElement: InspectedElement | null;
   onSelectElement: (ref: SelectedElementRef) => void;
@@ -83,7 +84,7 @@ function escapeAstPathSelector(astPath: string): string {
     : astPath.replace(/["\\]/g, '\\$&');
 }
 
-export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
+export const ScreenArtboard: React.FC<ScreenArtboardProps> = React.memo(({
   screen,
   ScreenComponent,
   position,
@@ -91,6 +92,7 @@ export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
   mode,
   isActiveScreen,
   isHighlightedScreen,
+  isCanvasMoving = false,
   selectedElement,
   inspectedElement,
   onSelectElement,
@@ -732,8 +734,14 @@ export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
   };
 
   // Inspect Mode pointer handlers
+  useEffect(() => {
+    if (isCanvasMoving) {
+      setHoverBox(null);
+    }
+  }, [isCanvasMoving]);
+
   const handlePointerMoveCapture = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (mode !== 'inspect' || activeGizmoAction) return;
+    if (mode !== 'inspect' || activeGizmoAction || isCanvasMoving || e.buttons !== 0) return;
     const targetEl = findNearestAgyElement(e.target, viewportRef.current);
     if (!targetEl) {
       setHoverBox(null);
@@ -992,6 +1000,12 @@ export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
                   flexDirection: 'column',
                   height: '100%',
                   width: '100%',
+                  minHeight: 0,
+                  minWidth: 0,
+                  backgroundColor: '#FFFFFF',
+                  color: '#0F172A',
+                  overflowY: 'auto',
+                  overflowX: 'hidden',
                 }}
               >
                 <ScreenComponent />
@@ -1474,4 +1488,4 @@ export const ScreenArtboard: React.FC<ScreenArtboardProps> = ({
       </div>
     </div>
   );
-};
+});

package/src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import './runtime/MockNavigationContext';
 import { CanvasApp } from './canvas/CanvasApp';
 import './styles.css';