zelune 1.5.2 → 1.5.5

package/plugins/viteVirtualScreensPlugin.ts

@@ -7,12 +7,19 @@ const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 const PREFERRED_ORDER = ['Login', 'Home', 'ProductDetail', 'Checkout', 'Profile'];
 
 /**
- * Vite Virtual Module plugin that dynamically discovers and imports React Native / Expo
- * screen components from any target project (`--project /path/to/app`).
+ * Vite Virtual Module plugin that dynamically discovers and loads React Native / Expo
+ * screen components from any target project (`--project /path/to/app`) with per-screen
+ * dynamic import() fault isolation so a broken import or top-level exception in one screen
+ * can never blank out the entire Zelune studio canvas.
  */
 export function viteVirtualScreensPlugin(workspaceRoot: string): Plugin {
+  let isBuild = false;
+
   return {
     name: 'vite-virtual-zelune-screens',
+    configResolved(config) {
+      isBuild = config.command === 'build';
+    },
     resolveId(id) {
       if (id === VIRTUAL_MODULE_ID) {
         return RESOLVED_VIRTUAL_MODULE_ID;
@@ -25,7 +32,7 @@ export function viteVirtualScreensPlugin(workspaceRoot: string): Plugin {
       }
 
       const discovered = discoverScreenFilesSync(workspaceRoot);
-      const importLines: string[] = [
+      const lines: string[] = [
         `import React from 'react';`,
         `function resolveScreenComponent(mod) {`,
         `  if (!mod) return null;`,
@@ -37,6 +44,118 @@ export function viteVirtualScreensPlugin(workspaceRoot: string): Plugin {
         `  }`,
         `  return null;`,
         `}`,
+        `function createIsolatedScreenComponent(screenId, filePath, loader) {`,
+        `  let cachedComp = null;`,
+        `  return function IsolatedScreenWrapper(props) {`,
+        `    const [state, setState] = React.useState(() => ({`,
+        `      Comp: cachedComp,`,
+        `      error: null,`,
+        `      attempt: 0,`,
+        `    }));`,
+        `    React.useEffect(() => {`,
+        `      let cancelled = false;`,
+        `      Promise.resolve()`,
+        `        .then(() => loader(state.attempt))`,
+        `        .then((mod) => {`,
+        `          if (cancelled) return;`,
+        `          const resolved = resolveScreenComponent(mod);`,
+        `          if (!resolved) {`,
+        `            setState((prev) => ({`,
+        `              ...prev,`,
+        `              Comp: null,`,
+        `              error: 'No exported React component found in ' + filePath,`,
+        `            }));`,
+        `          } else {`,
+        `            cachedComp = resolved;`,
+        `            setState((prev) => ({ ...prev, Comp: resolved, error: null }));`,
+        `          }`,
+        `        })`,
+        `        .catch((err) => {`,
+        `          if (cancelled) return;`,
+        `          const msg = err instanceof Error ? err.message : String(err);`,
+        `          setState((prev) => ({ ...prev, Comp: null, error: msg }));`,
+        `        });`,
+        `      return () => {`,
+        `        cancelled = true;`,
+        `      };`,
+        `    }, [state.attempt]);`,
+        `    if (state.error) {`,
+        `      return React.createElement(`,
+        `        'div',`,
+        `        {`,
+        `          style: {`,
+        `            flex: 1,`,
+        `            padding: 24,`,
+        `            backgroundColor: '#18181B',`,
+        `            color: '#FCA5A5',`,
+        `            display: 'flex',`,
+        `            flexDirection: 'column',`,
+        `            justifyContent: 'center',`,
+        `            gap: 10,`,
+        `            fontFamily: 'var(--font-mono)',`,
+        `          },`,
+        `        },`,
+        `        React.createElement(`,
+        `          'div',`,
+        `          { style: { color: '#F87171', fontWeight: 700, fontSize: 13 } },`,
+        `          'Module Load Error in ' + filePath`,
+        `        ),`,
+        `        React.createElement(`,
+        `          'div',`,
+        `          {`,
+        `            style: {`,
+        `              fontSize: 11,`,
+        `              color: '#FECACA',`,
+        `              whiteSpace: 'pre-wrap',`,
+        `              wordBreak: 'break-word',`,
+        `              maxHeight: 360,`,
+        `              overflowY: 'auto',`,
+        `            },`,
+        `          },`,
+        `          state.error`,
+        `        ),`,
+        `        React.createElement(`,
+        `          'button',`,
+        `          {`,
+        `            type: 'button',`,
+        `            onClick: () => setState((prev) => ({ ...prev, error: null, attempt: prev.attempt + 1 })),`,
+        `            style: {`,
+        `              alignSelf: 'flex-start',`,
+        `              marginTop: 6,`,
+        `              padding: '6px 12px',`,
+        `              borderRadius: 6,`,
+        `              border: '1px solid rgba(248, 113, 113, 0.45)',`,
+        `              backgroundColor: 'rgba(127, 29, 29, 0.4)',`,
+        `              color: '#FEE2E2',`,
+        `              fontSize: 11,`,
+        `              fontWeight: 600,`,
+        `              cursor: 'pointer',`,
+        `            },`,
+        `          },`,
+        `          'Retry Screen Load'`,
+        `        )`,
+        `      );`,
+        `    }`,
+        `    if (!state.Comp) {`,
+        `      return React.createElement(`,
+        `        'div',`,
+        `        {`,
+        `          style: {`,
+        `            flex: 1,`,
+        `            display: 'flex',`,
+        `            alignItems: 'center',`,
+        `            justifyContent: 'center',`,
+        `            color: '#64748B',`,
+        `            fontSize: 12,`,
+        `            fontFamily: 'var(--font-mono)',`,
+        `          },`,
+        `        },`,
+        `        'Loading ' + screenId + '...'`,
+        `      );`,
+        `    }`,
+        `    return React.createElement(state.Comp, props);`,
+        `  };`,
+        `}`,
       ];
 
       const mapEntries: string[] = [];
@@ -51,16 +170,28 @@ export function viteVirtualScreensPlugin(workspaceRoot: string): Plugin {
         return a.id.localeCompare(b.id);
       });
 
-      sorted.forEach((scr, index) => {
-        const varName = `_screenMod_${index}`;
+      sorted.forEach((scr) => {
         const normalizedFullPath = scr.fullPath.replace(/\\/g, '/');
-        importLines.push(`import * as ${varName} from ${JSON.stringify(normalizedFullPath)};`);
-        mapEntries.push(`  ${JSON.stringify(scr.id)}: resolveScreenComponent(${varName})`);
+        const fsUrl =
+          '/@fs' + (normalizedFullPath.startsWith('/') ? '' : '/') + normalizedFullPath;
+        const loaderExpr = isBuild
+          ? `(attempt) => attempt > 0 ? import(/* @vite-ignore */ ${JSON.stringify(
+              normalizedFullPath
+            )} + '?t=' + Date.now()) : import(${JSON.stringify(normalizedFullPath)})`
+          : `(attempt) => import(/* @vite-ignore */ ${JSON.stringify(
+              fsUrl
+            )} + (attempt > 0 ? '?t=' + Date.now() : ''))`;
+
+        mapEntries.push(
+          `  ${JSON.stringify(scr.id)}: createIsolatedScreenComponent(${JSON.stringify(
+            scr.id
+          )}, ${JSON.stringify(scr.relPath)}, ${loaderExpr})`
+        );
         orderIds.push(scr.id);
       });
 
       return [
-        ...importLines,
+        ...lines,
         `export const SCREEN_COMPONENTS = {`,
         mapEntries.join(',\n'),
         `};`,

package/src/canvas/CanvasApp.tsx

@@ -16,6 +16,8 @@ import {
   PanelRightClose,
   PanelRightOpen,
   Sliders,
+  Sun,
+  Moon,
 } from 'lucide-react';
 import { SCREEN_COMPONENTS, SCREEN_ORDER } from '../screens';
 import { ScreenArtboard } from './ScreenArtboard';
@@ -43,6 +45,11 @@ function clampZoom(z: number): number {
   return Number(Math.min(Math.max(z, MIN_ZOOM), MAX_ZOOM).toFixed(3));
 }
 
+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 = {};
   screens.forEach((screen, idx) => {
@@ -67,6 +74,46 @@ export const CanvasApp: React.FC = () => {
   const [isLeftPanelOpen, setIsLeftPanelOpen] = useState<boolean>(true);
   const [isRightPanelOpen, setIsRightPanelOpen] = useState<boolean>(true);
 
+  // Studio color-scheme state ('dark' default, persisted in localStorage & <meta name="color-scheme">)
+  const [colorScheme, setColorScheme] = useState<'dark' | 'light'>(() => {
+    try {
+      return localStorage.getItem('color-scheme') === 'light' ? 'light' : 'dark';
+    } catch {
+      return 'dark';
+    }
+  });
+
+  const applyColorScheme = useCallback((next: 'dark' | 'light') => {
+    setColorScheme(next);
+    const meta = document.querySelector<HTMLMetaElement>('meta[name="color-scheme"]');
+    if (meta) {
+      meta.content = next;
+    }
+    try {
+      localStorage.setItem('color-scheme', next);
+    } catch {
+      // Ignore storage write errors in restricted environments
+    }
+  }, []);
+
+  const toggleColorScheme = useCallback(() => {
+    applyColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
+  }, [colorScheme, applyColorScheme]);
+
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== 'color-scheme') return;
+      const next = e.newValue === 'light' ? 'light' : 'dark';
+      setColorScheme(next);
+      const meta = document.querySelector<HTMLMetaElement>('meta[name="color-scheme"]');
+      if (meta) {
+        meta.content = next;
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   const [pan, setPan] = useState<{ x: number; y: number }>({ x: 20, y: 10 });
   const [zoom, setZoom] = useState<number>(0.68);
   const [isPanning, setIsPanning] = useState<boolean>(false);
@@ -86,7 +133,9 @@ export const CanvasApp: React.FC = () => {
   }>({ undoAvailable: 0, redoAvailable: 0 });
 
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
+  const worldContainerRef = useRef<HTMLDivElement | null>(null);
   const cameraTimerRef = useRef<number | null>(null);
+  const panSyncTimerRef = useRef<number | null>(null);
 
   // Refs for synchronous access inside non-passive native wheel/gesture listeners
   const zoomRef = useRef<number>(zoom);
@@ -98,6 +147,39 @@ export const CanvasApp: React.FC = () => {
     panRef.current = pan;
   }, [pan]);
 
+  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})`;
+      }
+
+      if (panSyncTimerRef.current) {
+        window.clearTimeout(panSyncTimerRef.current);
+        panSyncTimerRef.current = null;
+      }
+
+      if (commitImmediately) {
+        setIsCameraAnimating(false);
+        setPan(nextPan);
+      } else {
+        panSyncTimerRef.current = window.setTimeout(() => {
+          panSyncTimerRef.current = null;
+          setIsCameraAnimating(false);
+          setPan(panRef.current);
+        }, 120);
+      }
+    },
+    []
+  );
+
   const triggerCameraTransition = useCallback(() => {
     if (cameraTimerRef.current) {
       window.clearTimeout(cameraTimerRef.current);
@@ -420,13 +502,17 @@ export const CanvasApp: React.FC = () => {
       const worldY = (cursorY - prevPan.y) / prevZoom;
 
       const nextPan = {
-        x: cursorX - worldX * nextZoom,
-        y: cursorY - worldY * nextZoom,
+        x: snapToDevicePixel(cursorX - worldX * nextZoom),
+        y: snapToDevicePixel(cursorY - worldY * nextZoom),
       };
 
       setIsCameraAnimating(false);
       zoomRef.current = nextZoom;
       panRef.current = nextPan;
+      if (worldContainerRef.current) {
+        worldContainerRef.current.style.transition = 'none';
+        worldContainerRef.current.style.transform = `translate3d(${nextPan.x}px, ${nextPan.y}px, 0) scale(${nextZoom})`;
+      }
       setZoom(nextZoom);
       setPan(nextPan);
     };
@@ -441,13 +527,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
+        );
       }
     };
 
@@ -495,7 +579,7 @@ export const CanvasApp: React.FC = () => {
       document.removeEventListener('gesturechange', handleGestureChange);
       document.removeEventListener('gestureend', handleGestureEnd);
     };
-  }, []);
+  }, [applyDirectPanTransform]);
 
   // Center viewport on a specific screen artboard using Emil Kowalski ease-out-expo camera physics
   const focusOnScreen = useCallback(
@@ -588,7 +672,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);
@@ -596,20 +687,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);
     };
@@ -691,7 +782,14 @@ export const CanvasApp: React.FC = () => {
             ZL
           </div>
           <div>
-            <div style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: '-0.02em', color: '#F8FAFC' }}>
+            <div
+              style={{
+                fontSize: 13.5,
+                fontWeight: 700,
+                letterSpacing: '-0.02em',
+                color: 'var(--studio-text-primary)',
+              }}
+            >
               Zelune
             </div>
             <div
@@ -731,14 +829,16 @@ export const CanvasApp: React.FC = () => {
                 borderRadius: 5,
                 border: mode === 'inspect' ? '1px solid rgba(56, 189, 248, 0.35)' : '1px solid transparent',
                 backgroundColor: mode === 'inspect' ? 'var(--studio-surface-3)' : 'transparent',
-                color: mode === 'inspect' ? '#38BDF8' : 'var(--studio-text-secondary)',
+                color: mode === 'inspect' ? '#0284C7' : 'var(--studio-text-secondary)',
                 fontSize: 12,
                 fontWeight: 600,
                 cursor: 'pointer',
               }}
             >
-              <MousePointer size={14} style={{ flexShrink: 0 }} />
-              <span className="zelune-reveal-label">Inspect &amp; Edit</span>
+              <MousePointer size={14} style={{ flexShrink: 0, color: mode === 'inspect' ? '#38BDF8' : 'currentColor' }} />
+              <span className="zelune-reveal-label" style={{ color: mode === 'inspect' ? 'var(--studio-text-primary)' : 'inherit' }}>
+                Inspect &amp; Edit
+              </span>
             </button>
 
             <button
@@ -751,8 +851,8 @@ export const CanvasApp: React.FC = () => {
                 padding: '6px 9px',
                 borderRadius: 5,
                 border: mode === 'interact' ? '1px solid rgba(16, 185, 129, 0.4)' : '1px solid transparent',
-                backgroundColor: mode === 'interact' ? 'rgba(6, 78, 59, 0.45)' : 'transparent',
-                color: mode === 'interact' ? '#34D399' : 'var(--studio-text-secondary)',
+                backgroundColor: mode === 'interact' ? 'rgba(16, 185, 129, 0.14)' : 'transparent',
+                color: mode === 'interact' ? (colorScheme === 'dark' ? '#34D399' : '#059669') : 'var(--studio-text-secondary)',
                 fontSize: 12,
                 fontWeight: 600,
                 cursor: 'pointer',
@@ -773,8 +873,8 @@ export const CanvasApp: React.FC = () => {
               padding: '7px 9px',
               borderRadius: 7,
               border: `1px solid ${showFlows ? 'rgba(99, 102, 241, 0.45)' : 'var(--studio-border-subtle)'}`,
-              backgroundColor: showFlows ? 'rgba(30, 27, 75, 0.55)' : 'var(--studio-surface-2)',
-              color: showFlows ? '#C7D2FE' : 'var(--studio-text-secondary)',
+              backgroundColor: showFlows ? 'rgba(99, 102, 241, 0.14)' : 'var(--studio-surface-2)',
+              color: showFlows ? (colorScheme === 'dark' ? '#C7D2FE' : '#4F46E5') : 'var(--studio-text-secondary)',
               fontSize: 12,
               fontWeight: 600,
               cursor: 'pointer',
@@ -785,7 +885,7 @@ export const CanvasApp: React.FC = () => {
           </button>
         </div>
 
-        {/* Right: Undo/Redo, Viewport Controls & Right Inspector Toggle */}
+        {/* Right: Undo/Redo, Viewport Controls, Theme Toggle & Right Inspector Toggle */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
           <button
             type="button"
@@ -801,7 +901,10 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: historyState.undoAvailable > 0 ? '#E2E8F0' : '#475569',
+              color:
+                historyState.undoAvailable > 0
+                  ? 'var(--studio-text-primary)'
+                  : 'var(--studio-text-muted)',
               fontSize: 11.5,
               fontFamily: 'var(--font-mono)',
               cursor: historyState.undoAvailable > 0 ? 'pointer' : 'not-allowed',
@@ -825,7 +928,10 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: historyState.redoAvailable > 0 ? '#E2E8F0' : '#475569',
+              color:
+                historyState.redoAvailable > 0
+                  ? 'var(--studio-text-primary)'
+                  : 'var(--studio-text-muted)',
               fontSize: 11.5,
               cursor: historyState.redoAvailable > 0 ? 'pointer' : 'not-allowed',
             }}
@@ -848,7 +954,7 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: '#CBD5E1',
+              color: 'var(--studio-text-secondary)',
               cursor: 'pointer',
             }}
           >
@@ -862,7 +968,7 @@ export const CanvasApp: React.FC = () => {
               textAlign: 'center',
               fontSize: 11.5,
               fontFamily: 'var(--font-mono)',
-              color: '#CBD5E1',
+              color: 'var(--studio-text-secondary)',
             }}
           >
             {Math.round(zoom * 100)}%
@@ -881,7 +987,7 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: '#CBD5E1',
+              color: 'var(--studio-text-secondary)',
               cursor: 'pointer',
             }}
           >
@@ -899,7 +1005,7 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: '#CBD5E1',
+              color: 'var(--studio-text-secondary)',
               fontSize: 11.5,
               fontWeight: 500,
               cursor: 'pointer',
@@ -920,7 +1026,7 @@ export const CanvasApp: React.FC = () => {
               borderRadius: 6,
               border: '1px solid var(--studio-border-subtle)',
               backgroundColor: 'var(--studio-surface-2)',
-              color: '#CBD5E1',
+              color: 'var(--studio-text-secondary)',
               fontSize: 11.5,
               fontWeight: 500,
               cursor: 'pointer',
@@ -930,6 +1036,37 @@ export const CanvasApp: React.FC = () => {
             <span className="zelune-reveal-label">Grid</span>
           </button>
 
+          <button
+            type="button"
+            className="zelune-interactive zelune-icon-reveal-btn"
+            onClick={toggleColorScheme}
+            title={
+              colorScheme === 'dark' ? 'Switch Canvas to Light Mode' : 'Switch Canvas to Dark Mode'
+            }
+            aria-label={
+              colorScheme === 'dark' ? 'Switch Canvas to Light Mode' : 'Switch Canvas to Dark Mode'
+            }
+            style={{
+              padding: '6px 8px',
+              borderRadius: 6,
+              border: '1px solid var(--studio-border-subtle)',
+              backgroundColor: 'var(--studio-surface-2)',
+              color: 'var(--studio-text-secondary)',
+              fontSize: 11.5,
+              fontWeight: 500,
+              cursor: 'pointer',
+            }}
+          >
+            {colorScheme === 'dark' ? (
+              <Sun size={13} style={{ flexShrink: 0, color: '#F59E0B' }} />
+            ) : (
+              <Moon size={13} style={{ flexShrink: 0, color: '#6366F1' }} />
+            )}
+            <span className="zelune-reveal-label">
+              {colorScheme === 'dark' ? 'Light' : 'Dark'}
+            </span>
+          </button>
+
           <div style={{ width: 1, height: 20, backgroundColor: 'var(--studio-border-subtle)', margin: '0 3px' }} />
 
           <button
@@ -1068,7 +1205,7 @@ export const CanvasApp: React.FC = () => {
                         isSelected ? 'rgba(56, 189, 248, 0.35)' : 'transparent'
                       }`,
                       backgroundColor: isSelected ? 'var(--studio-surface-2)' : 'transparent',
-                      color: isSelected ? '#F8FAFC' : 'var(--studio-text-secondary)',
+                      color: isSelected ? 'var(--studio-text-primary)' : 'var(--studio-text-secondary)',
                       fontSize: 12.5,
                       fontWeight: isSelected ? 600 : 500,
                       cursor: 'pointer',
@@ -1108,7 +1245,7 @@ export const CanvasApp: React.FC = () => {
                   fontSize: 10,
                   fontWeight: 600,
                   letterSpacing: '0.05em',
-                  color: '#E2E8F0',
+                  color: 'var(--studio-text-primary)',
                   marginBottom: 4,
                 }}
               >
@@ -1157,12 +1294,12 @@ export const CanvasApp: React.FC = () => {
                 borderRadius: 8,
                 backgroundColor: 'var(--studio-surface-1)',
                 border: '1px solid var(--studio-border-subtle)',
-                color: '#F1F5F9',
+                color: 'var(--studio-text-primary)',
                 fontSize: 11.5,
                 fontFamily: 'var(--font-mono)',
                 fontWeight: 600,
                 cursor: 'pointer',
-                boxShadow: '0 10px 24px -6px rgba(0, 0, 0, 0.65)',
+                boxShadow: '0 10px 24px -6px rgba(0, 0, 0, 0.28)',
               }}
             >
               <PanelLeftOpen size={13} color="#38BDF8" />
@@ -1193,24 +1330,25 @@ export const CanvasApp: React.FC = () => {
                 borderRadius: 8,
                 backgroundColor: 'var(--studio-surface-1)',
                 border: '1px solid var(--studio-border-subtle)',
-                color: '#F1F5F9',
+                color: 'var(--studio-text-primary)',
                 fontSize: 11.5,
                 fontFamily: 'var(--font-mono)',
                 fontWeight: 600,
                 cursor: 'pointer',
-                boxShadow: '0 10px 24px -6px rgba(0, 0, 0, 0.65)',
+                boxShadow: '0 10px 24px -6px rgba(0, 0, 0, 0.28)',
               }}
             >
               <Sliders size={13} color="#38BDF8" />
               <span>
                 {inspectedData ? `<${inspectedData.tagName}> L${inspectedData.line}` : 'AST Inspector'}
               </span>
-              <PanelRightOpen size={13} color="#94A3B8" />
+              <PanelRightOpen size={13} color="var(--studio-text-secondary)" />
             </button>
           )}
 
           {/* World Transform Container: Emil Kowalski ease-out-expo on camera focus, 0ms on direct drag/pinch */}
           <div
+            ref={worldContainerRef}
             style={{
               position: 'absolute',
               top: 0,
@@ -1218,6 +1356,7 @@ export const CanvasApp: React.FC = () => {
               transform: `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})`,
               transformOrigin: '0 0',
               willChange: 'transform',
+              backfaceVisibility: 'hidden',
               transition: isCameraAnimating
                 ? 'transform var(--duration-camera) var(--ease-out-expo)'
                 : 'none',
@@ -1229,7 +1368,7 @@ export const CanvasApp: React.FC = () => {
                 layout={layout}
                 activeScreenId={activeScreenId}
                 highlightedScreenId={highlightedScreenId}
-                onSelectFlow={(edge: NavigationEdge) => focusOnScreen(edge.toScreen)}
+                onSelectFlow={handleSelectFlow}
               />
             )}
 
@@ -1241,6 +1380,7 @@ export const CanvasApp: React.FC = () => {
                 height: DEFAULT_HEIGHT,
               };
               const ScreenComponent = SCREEN_COMPONENTS[screen.id];
+              const isSelectedScreen = selectedElement?.screenId === screen.id;
 
               return (
                 <ScreenArtboard
@@ -1252,8 +1392,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}