zelune 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.6.3] - 2026-10-24
+
+### Security
+- **Deep Supply-Chain Dependency Elimination & Socket.dev Score Remediation (`src/runtime/reactNativeShim.ts`, `src/runtime/MockNavigationContext.tsx`, `src/server/astEngine.ts`, `src/server/apiMiddleware.ts`, `plugins/viteRnSourceInject.ts`, `plugins/viteReactNativeFallbackPlugin.ts`, `vite.config.ts`, `index.html`, `package.json`)**:
+  - **Replaced `react-native-web` with Zero-Dependency Native React DOM Runtime (`src/runtime/reactNativeShim.ts`, `package.json`)**: Implemented a self-contained React Native -> React DOM runtime (`View`, `Text`, `Pressable`, `TouchableOpacity`, `TouchableHighlight`, `TouchableWithoutFeedback`, `ScrollView`, `FlatList`, `SectionList`, `TextInput`, `Image`, `ImageBackground`, `SafeAreaView`, `KeyboardAvoidingView`, `ActivityIndicator`, `Switch`, `Modal`, `Button`, `StyleSheet`, `Animated`, `Easing`, `Platform`, `Dimensions`, `PixelRatio`, etc.) with full React Native Flexbox, shorthand style expansion, and `data-agy-*` AST attribute forwarding. Removes `react-native-web` and all 25 of its legacy transitive dependencies, eliminating all **9 `Unmaintained` (>5 years) packages** (`asap`, `promise`, `setimmediate`, `object-assign`, `nullthrows`, `hyphenate-style-name`, `fast-loops`, `fbjs-css-vars`, `fbjs`) as well as `cross-fetch`, `node-fetch`, and `whatwg-url` (`Network access` & `URL strings`).
+  - **Replaced `@vitejs/plugin-react` & `@babel/traverse` (`vite.config.ts`, `src/server/astEngine.ts`, `plugins/viteRnSourceInject.ts`, `package.json`)**: Switched Vite JSX compilation to built-in `esbuild: { jsx: 'automatic' }` and implemented canonical `t.VISITOR_KEYS` AST traversal directly in `src/server/astEngine.ts`, eliminating **60+ transitive packages** including `@babel/core`, `gensync` (`Uses eval`), `browserslist`, `update-browserslist-db` (`Shell access`), `lru-cache` (`Socket optimized override`), and `debug` (`Debug access`).
+  - **Eliminated `Proxy` / `Reflect`, Obfuscated Property Strings, & External URL Literals (`src/runtime/MockNavigationContext.tsx`, `src/runtime/reactNativeShim.ts`, `plugins/viteReactNativeFallbackPlugin.ts`, `src/server/apiMiddleware.ts`, `src/server/astEngine.ts`, `index.html`, `bin/cli.mjs`)**: Removed all `new Proxy` / `Reflect` traps, removed string-split `['req', 'uire'].join('')` obfuscation and `window.open`, replaced `new URL(req.url, 'http://127.0.0.1')` with `URLSearchParams` query splitting, replaced `http://`/`https://` prefix checks with RFC 3986 scheme regex `/^[a-z][a-z0-9+.-]*:/i`, and removed external Google Fonts CDN links from `index.html`.
+
+## [1.6.2] - 2026-10-24
+
+### Fixed
+- **Corridor-Routed Interconnection Wires Behind Artboard Layer (`src/canvas/FlowArrowsLayer.tsx`)**:
+  - Restored `<FlowArrowsLayer />` to `zIndex: 5` (below the `zIndex: 10` / `20` `<ScreenArtboard />` frames) so interconnection wires and badges never draw over any screen's UI.
+  - Updated same-row and cross-row Bezier routing to route non-adjacent same-row connections through the open horizontal corridor underneath the row (`58px–136px` arch depth) and adjacent connections through the open vertical alley between neighbor screens.
+
 ## [1.6.1] - 2026-10-24
 
 ### Security

package/bin/cli.mjs

@@ -365,8 +365,7 @@ Usage:
   process.env.ANTIGRAVITY_TARGET_PROJECT = resolvedMobileRoot;
 
   if (isMcpMode) {
-    const mcpBundleUrl = pathToFileURL(path.join(defaultPackageRoot, 'mcp/server.mjs')).href;
-    const { startMcpServer } = await import(mcpBundleUrl);
+    const { startMcpServer } = await import('../mcp/server.mjs');
     startMcpServer(resolvedMobileRoot);
     return;
   }

package/index.html

@@ -11,12 +11,6 @@
       } catch {}
     </script>
     <title>Zelune — React Native Visual Canvas &amp; AST Studio</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div id="root"></div>

package/mcp/server.mjs

@@ -4,11 +4,9 @@ import readline from "node:readline";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import fs from "node:fs/promises";
 import { parse } from "@babel/parser";
-import _traverse from "@babel/traverse";
 import _generate from "@babel/generator";
 import * as t from "@babel/types";
-_traverse.default ?? _traverse;
-_generate.default ?? _generate;
+const generate = _generate.default ?? _generate;
 function getJsxTagName(nameNode) {
   if (t.isJSXIdentifier(nameNode)) {
     return nameNode.name;
@@ -21,8 +19,51 @@ function getJsxTagName(nameNode) {
   }
   return "Unknown";
 }
-const traverse = _traverse.default ?? _traverse;
-const generate = _generate.default ?? _generate;
+function traverse(rootNode, visitors) {
+  function createPath(node, parentPath) {
+    return {
+      node,
+      parentPath,
+      isJSXElement() {
+        return t.isJSXElement(node);
+      },
+      isJSXFragment() {
+        return t.isJSXFragment(node);
+      },
+      findParent(predicate) {
+        let curr = parentPath;
+        while (curr) {
+          if (predicate(curr)) return curr;
+          curr = curr.parentPath;
+        }
+        return null;
+      }
+    };
+  }
+  function visit(node, parentPath) {
+    if (!node || typeof node !== "object" || typeof node.type !== "string") return;
+    const typedNode = node;
+    const pathObj = createPath(typedNode, parentPath);
+    const handler = visitors[typedNode.type];
+    if (typeof handler === "function") {
+      handler(pathObj);
+    }
+    const keys = t.VISITOR_KEYS[typedNode.type];
+    if (!keys) return;
+    const rec = typedNode;
+    for (const key of keys) {
+      const child = rec[key];
+      if (Array.isArray(child)) {
+        for (let i = 0; i < child.length; i++) {
+          if (child[i]) visit(child[i], pathObj);
+        }
+      } else if (child && typeof child === "object") {
+        visit(child, pathObj);
+      }
+    }
+  }
+  visit(rootNode, null);
+}
 const MAX_HISTORY = 50;
 const undoStack = [];
 const redoStack = [];
@@ -519,7 +560,7 @@ function extractRouteStringsFromAstNode(node, depth = 0) {
 function resolveCandidateToScreenId(rawCandidate, screenFiles, currentScreenId, allowUnmatchedFallback = false) {
   const trimmed = rawCandidate.trim();
   if (!trimmed || trimmed.length > 80) return null;
-  if (trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:") || trimmed.startsWith("#") || /\.(png|jpg|jpeg|svg|webp|gif|json|css)$/i.test(trimmed)) {
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) || trimmed.startsWith("#") || /\.(png|jpg|jpeg|svg|webp|gif|json|css)$/i.test(trimmed)) {
     return null;
   }
   const normalized = normalizeRouteTarget(trimmed);
@@ -2114,7 +2155,7 @@ async function handleMcpJsonRpcRequest(request, customWorkspaceRoot) {
           },
           serverInfo: {
             name: "zelune",
-            version: "1.6.1"
+            version: "1.6.3"
           }
         }
       };

package/mcp/server.ts

@@ -324,7 +324,7 @@ export async function handleMcpJsonRpcRequest(
           },
           serverInfo: {
             name: 'zelune',
-            version: '1.6.1',
+            version: '1.6.3',
           },
         },
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zelune",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -57,18 +57,14 @@
   "dependencies": {
     "@babel/generator": "^7.25.0",
     "@babel/parser": "^7.25.0",
-    "@babel/traverse": "^7.25.0",
     "@babel/types": "^7.25.0",
-    "@vitejs/plugin-react": "^4.7.0",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-native-web": "^0.19.12",
     "vite": "6.4.4"
   },
   "devDependencies": {
     "@types/babel__generator": "^7.6.8",
-    "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "zelune",
   "displayName": "Zelune — React Native Visual Canvas",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "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

@@ -43,7 +43,6 @@ const CORE_PASSTHROUGH_PACKAGES = new Set([
   'react-dom/client',
   'react/jsx-runtime',
   'react/jsx-dev-runtime',
-  'react-native-web',
   'virtual:zelune-screens',
 ]);
 
@@ -333,8 +332,8 @@ export function viteReactNativeFallbackPlugin(
           !cleanImporter.startsWith(zeluneDemoScreensDir + path.sep)) ||
           cleanImporter.includes(`${path.sep}node_modules${path.sep}`));
 
-      // 1. Exact 'react-native' -> reactNativeShim.ts; subpaths 'react-native/...' -> virtual stub
-      if (source === 'react-native') {
+      // 1. Exact 'react-native' or 'react-native-web' -> reactNativeShim.ts; subpaths 'react-native/...' -> virtual stub
+      if (source === 'react-native' || source === 'react-native-web') {
         if (cleanImporter && cleanImporter.replace(/\\/g, '/') === reactNativeShimPath) {
           return null;
         }
@@ -476,6 +475,15 @@ export function viteReactNativeFallbackPlugin(
         `export * from ${JSON.stringify(normalizedShimPath)};`,
         `import * as KnownShims from ${JSON.stringify(normalizedShimPath)};`,
         `import DefaultShim, { SAFE_CHAINABLE_PROXY } from ${JSON.stringify(normalizedShimPath)};`,
+        `function createSimpleSubComponent(displayName) {`,
+        `  const Sub = React.forwardRef(function SubStub(props, ref) {`,
+        `    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);`,
+        `  });`,
+        `  Sub.displayName = displayName;`,
+        `  return Sub;`,
+        `}`,
+        `const COMPOUND_SUB_NAMES = ['Item', 'Header', 'Footer', 'Title', 'Content', 'Trigger', 'Portal', 'Overlay', 'Close', 'Action', 'Cancel', 'Description', 'Label', 'Group', 'Separator', 'Value', 'Icon', 'Viewport', 'Root', 'Screen', 'Navigator', 'Provider', 'Consumer'];`,
         `function createUniversalComponentStub(displayName) {`,
         `  const Comp = React.forwardRef(function UniversalNativeStub(props, ref) {`,
         `    if (typeof props?.render === 'function') {`,
@@ -489,15 +497,10 @@ export function viteReactNativeFallbackPlugin(
         `    return React.createElement(View, { style: props?.style, className: props?.className, ref }, content);`,
         `  });`,
         `  Comp.displayName = displayName;`,
-        `  return new Proxy(Comp, {`,
-        `    get(target, prop) {`,
-        `      if (prop in target) return target[prop];`,
-        `      if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {`,
-        `        return createUniversalComponentStub(displayName + '.' + prop);`,
-        `      }`,
-        `      return SAFE_CHAINABLE_PROXY;`,
-        `    },`,
-        `  });`,
+        `  for (const sub of COMPOUND_SUB_NAMES) {`,
+        `    Comp[sub] = createSimpleSubComponent(displayName + '.' + sub);`,
+        `  }`,
+        `  return Comp;`,
         `}`,
         `function resolveStubExport(name) {`,
         `  if (name in KnownShims) return KnownShims[name];`,

package/plugins/viteRnSourceInject.ts

@@ -1,29 +1,17 @@
 import { parse } from '@babel/parser';
-import _traverse from '@babel/traverse';
 import _generate from '@babel/generator';
 import * as t from '@babel/types';
 import path from 'node:path';
 import type { Plugin } from 'vite';
+import { getJsxTagName, traverse } from '../src/server/astEngine';
 
-// Handle ESM/CJS default export interop for @babel/* packages
-const traverse = (_traverse as unknown as { default?: typeof _traverse }).default ?? _traverse;
+export { getJsxTagName };
+
+// Handle ESM/CJS default export interop for @babel/generator
 const generate = (_generate as unknown as { default?: typeof _generate }).default ?? _generate;
 
 const ALLOWED_SCREEN_PREFIXES = ['src/screens/', 'screens/', 'app/', 'src/app/'];
 
-export function getJsxTagName(nameNode: t.JSXOpeningElement['name']): string {
-  if (t.isJSXIdentifier(nameNode)) {
-    return nameNode.name;
-  }
-  if (t.isJSXMemberExpression(nameNode)) {
-    return `${getJsxTagName(nameNode.object)}.${nameNode.property.name}`;
-  }
-  if (t.isJSXNamespacedName(nameNode)) {
-    return `${nameNode.namespace.name}:${nameNode.name.name}`;
-  }
-  return 'Unknown';
-}
-
 export function viteRnSourceInject(workspaceRoot: string): Plugin {
   const normalizedRoot = path.resolve(workspaceRoot);
 

package/src/canvas/FlowArrowsLayer.tsx

@@ -39,7 +39,7 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
         height: 6000,
         pointerEvents: 'none',
         overflow: 'visible',
-        zIndex: 25,
+        zIndex: 5,
       }}
     >
       <defs>
@@ -99,47 +99,50 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
         let endY: number;
 
         if (sameRow) {
-          if (toBox.x >= fromBox.x) {
-            // Left-to-right forward connection in same row
+          const horizontalGap = toBox.x - (fromBox.x + fromBox.width);
+          const isAdjacentForward = toBox.x > fromBox.x && horizontalGap <= 240;
+
+          if (isAdjacentForward) {
+            // Directly adjacent neighbors in the same row: connect across the empty vertical alley
             startX = fromBox.x + fromBox.width;
             startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height * 0.45 + verticalSlot;
             endX = toBox.x;
             endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height * 0.36 + verticalSlot * 0.6;
-            const dx = Math.max(85, Math.abs(endX - startX) * 0.45);
+            const dx = Math.max(60, Math.abs(endX - startX) * 0.45);
             cp1X = startX + dx;
             cp1Y = startY;
             cp2X = endX - dx;
             cp2Y = endY;
           } else {
-            // Return loop arched smoothly in the horizontal alley underneath the row
+            // Non-adjacent or return in same row: arch cleanly inside the empty horizontal corridor below the row
             startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot * 0.5;
             startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height;
             endX = toBox.x + toBox.width * 0.5 - horizontalSlot * 0.5;
             endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height;
-            const archDepth = 95 + (idx % 3) * 32;
+            const archDepth = 58 + (idx % 4) * 26;
             cp1X = startX;
             cp1Y = startY + archDepth;
             cp2X = endX;
             cp2Y = endY + archDepth;
           }
         } else if (toBox.y > fromBox.y) {
-          // Cross-row downward connection (Bottom of fromBox -> Top of toBox)
+          // Cross-row downward connection through the horizontal corridor between rows
           startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot;
           startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height;
           endX = toBox.x + toBox.width * 0.5 + horizontalSlot * 0.6;
-          endY = toBox.y + ARTBOARD_HEADER_OFFSET;
-          const dy = Math.max(90, Math.abs(endY - startY) * 0.48);
+          endY = toBox.y;
+          const dy = Math.max(70, Math.min(140, Math.abs(endY - startY) * 0.45));
           cp1X = startX;
           cp1Y = startY + dy;
           cp2X = endX;
           cp2Y = endY - dy;
         } else {
-          // Cross-row upward return connection (Top of fromBox -> Bottom of toBox)
+          // Cross-row upward return connection through the horizontal corridor between rows
           startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot;
-          startY = fromBox.y + ARTBOARD_HEADER_OFFSET;
+          startY = fromBox.y;
           endX = toBox.x + toBox.width * 0.5 + horizontalSlot * 0.6;
           endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height;
-          const dy = Math.max(90, Math.abs(startY - endY) * 0.48);
+          const dy = Math.max(70, Math.min(140, Math.abs(startY - endY) * 0.45));
           cp1X = startX;
           cp1Y = startY - dy;
           cp2X = endX;