zelune 1.4.0 → 1.5.2

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.5.2] - 2026-10-21
+
+### Changed
+- **npm Package Documentation (`README.md`)**: Simplified installation and MCP configuration snippets on npm to use `npm install -g zelune` and `npx zelune` directly instead of the GitHub repository URL.
+
+## [1.5.1] - 2026-10-21
+
+### Fixed
+- **Nested Mobile Project / Monorepo Auto-Discovery (`src/server/astEngine.ts`, `bin/cli.mjs`, `vite.config.ts`)**: Added `findMobileAppRoot` so running `zelune` or `zelune init` in a top-level parent or monorepo directory automatically scans up to 2 levels deep (`mobile/`, `apps/mobile/`, etc.) to locate the React Native / Expo app directory (`app.json`, `package.json`, and `.tsx`/`.jsx` screens).
+- **Local `npm install zelune` (`node_modules/zelune`) Execution & Dependency Resolution (`vite.config.ts`, `bin/cli.mjs`)**: Configured `esbuild: { include: /\.(tsx|ts|jsx)$/, exclude: [] }` so Vite transpiles Zelune's studio `.tsx` files even when installed inside `node_modules/zelune`, resolved `react`, `react-dom`, `react-native-web`, and `lucide-react` via `createRequire(import.meta.url)` so external mobile screens do not need `react-native-web` installed locally, and resolved `vite/bin/vite.js` directly in `bin/cli.mjs`.
+
+## [1.5.0] - 2026-10-21
+
+### Added
+- **On-Canvas Direct Manipulation Suite (`src/canvas/ScreenArtboard.tsx`, `src/canvas/CanvasApp.tsx`, `src/server/astEngine.ts`, `src/server/apiMiddleware.ts`, `mcp/server.ts`)**:
+  - **8-Point Resize Handles**: Added corner and edge resize handles (`nw`, `n`, `ne`, `e`, `se`, `s`, `sw`, `w`) on selected artboard elements with 60fps direct DOM preview, live `W × H` HUD badge, automatic `'100%'` responsive width snapping at parent edges, and surgical write-back to `StyleSheet.create`.
+  - **Inner Corner `borderRadius` Handles**: Added 4 inset circular corner radius handles on selected elements to interactively round corners on the artboard.
+  - **Figma Auto-Layout Hybrid Move & Reorder (`reorderElement` / `POST /api/reorder` / `reorder_screen_element`)**: Added drag-and-drop Flexbox sibling reordering with a glowing insertion line indicator, 1-click `↑`/`↓` reorder buttons on the selection pill, a 1-click **Pin/Float (`position: 'absolute'`)** toggle (plus `Option/Alt + Drag` freeform X/Y dragging with artboard center snap guides and `Shift + Drag` margin nudging), and keyboard arrow key (`↑ ↓ ← →` / `Shift + Arrow`) nudging.
+  - **Double-Click Inline `<Text>` Editing**: Added direct on-artboard inline text editing when double-clicking any editable `<Text>` node (or clicking the `Type` icon on the selection toolbar).
+
+## [1.4.1] - 2026-10-21
+
+### Fixed
+- **JSX / TypeScript Code Injection Prevention (`src/server/astEngine.ts`)**: Added `createSafeJsxTextChild` in `patchElement` so `<Text>` copy updates containing JSX control characters (`{`, `}`, `<`, `>`), newlines, or leading/trailing whitespace are wrapped as `t.jsxExpressionContainer(t.stringLiteral(payload.text))` rather than raw `t.jsxText()`, preventing arbitrary JSX expression or tag injection into `.tsx`/`.jsx` source files while maintaining lossless round-tripping in `inspectJsxTextChildren`.
+- **Local API CSRF & DNS Rebinding Protection (`src/server/apiMiddleware.ts`, `src/canvas/CanvasApp.tsx`, `vite.config.ts`)**: Added `verifyApiRequestSecurity` and `isLoopbackHostHeader` to block non-loopback `Host` headers (`127.0.0.1`, `localhost`, `[::1]`), reject cross-site `Sec-Fetch-Site` and non-loopback `Origin` headers, require `Content-Type: application/json` on all `POST /api/*` routes, and set `server.cors: false` and `server.allowedHosts` in `vite.config.ts`.
+- **Canonical Realpath & Symlink Traversal Guard (`src/server/astEngine.ts`)**: Hardened `resolveSafeScreenPath` using `fs.realpathSync` and `fs.lstatSync` to block symbolic links inside `src/screens/`, `screens/`, `app/`, and `src/app/` from escaping outside allowed screen directories, and added prototype-pollution/type guards (`__proto__`, `constructor`, `prototype`, `NaN`, `Infinity`) in `upsertObjectProperty`.
+- **Bounded Request Body Stream & Layout Schema Validation (`src/server/apiMiddleware.ts`)**: Updated `readJsonBody` to track byte length and immediately call `req.destroy()` when payloads exceed `1,000,000` bytes (preventing stream heap exhaustion), and added `sanitizeLayoutPayload` to validate `.canvas-layout.json` screen coordinate schemas.
+- **DOM Selector Escaping, `tsconfig.json` Alias Confinement & CLI Port Validation (`src/canvas/ScreenArtboard.tsx`, `vite.config.ts`, `bin/cli.mjs`)**: Added `CSS.escape` when querying `data-agy-ast-path` in `ScreenArtboard.tsx`, replaced the naive comment regex in `vite.config.ts` with a string-aware JSONC comment stripper while confining `tsconfig.json` aliases to the project root and protecting core studio packages, and added integer range validation (`1`–`65535`) for `--port` in `bin/cli.mjs`.
+
 ## [1.4.0] - 2026-10-21
 
 ### Added

package/README.md

@@ -2,21 +2,19 @@
 
 **Zelune** is a **Figma-style multi-screen visual canvas** and **bi-directional Babel AST sync MCP server** for React Native & Expo applications in **Google Antigravity**, Cursor, and Claude Code.
 
-View all of your mobile screens side-by-side on clean `393 × 852` rectangular artboards in the browser, inspect any `<View>`, `<Text>`, or `<TouchableOpacity>` element, and edit copy or `StyleSheet.create` styles with instant write-back to your `.tsx` source code.
+View all of your mobile screens side-by-side on clean `393 × 852` rectangular artboards in the browser, inspect any `<View>`, `<Text>`, or `<TouchableOpacity>` element, and resize, reorder, or edit copy and `StyleSheet.create` styles with instant write-back to your `.tsx` source code.
 
 ---
 
 ## Global Installation & Effortless Project Setup
 
-### 1. Install Globally Once (or via `npm link` locally)
+### 1. Install Globally Once
 ```bash
-npm install -g github:woodfur/antigravity-rn-canvas
-# Or once published to npm:
 npm install -g zelune
 ```
 
 ### 2. Initialize & Launch in Any React Native / Expo Project
-Inside any React Native or Expo project folder:
+Inside any React Native or Expo project folder (or a parent monorepo directory):
 
 ```bash
 cd /path/to/your/react-native-app
@@ -30,14 +28,8 @@ zelune
 
 You can also run it without installing globally:
 ```bash
-npx github:woodfur/antigravity-rn-canvas
-```
-
-### Option B: Install the Zelune AI Agent Skill
-Install the Zelune skill (`skills/rn-canvas/SKILL.md`), design system (`DESIGN.md`, `PRODUCT.md`), and AST rules (`rules/AGENTS.md`) into your AI coding agent:
-
-```bash
-npx skills add woodfur/antigravity-rn-canvas
+npx zelune init
+npx zelune
 ```
 
 ---
@@ -45,14 +37,14 @@ npx skills add woodfur/antigravity-rn-canvas
 ## Google Antigravity Integration (Zelune MCP Server)
 
 ### 1. MCP Server Setup
-Add the **Zelune** MCP server to your `mcp_config.json`:
+Running `zelune init` automatically configures `mcp_config.json`, or you can add the **Zelune** MCP server manually:
 
 ```json
 {
   "mcpServers": {
     "zelune": {
       "command": "npx",
-      "args": ["-y", "github:woodfur/antigravity-rn-canvas", "--mcp"]
+      "args": ["-y", "zelune", "--mcp"]
     }
   }
 }
@@ -62,3 +54,4 @@ Add the **Zelune** MCP server to your `mcp_config.json`:
 - `list_canvas_screens` — Lists all discovered screens (`src/screens/`, `screens/`, or Expo Router `app/`), element counts, and outgoing navigation flows.
 - `inspect_screen_element` — Returns the resolved `StyleSheet.create` / inline styles, static text copy, and JSX snippet for any element by `file` and `astPath`.
 - `patch_screen_element` — Surgically patches text copy or style rules in `.tsx` source files while preserving comments and formatting.
+- `reorder_screen_element` — Surgically reorders a React Native JSX element among its Flexbox siblings in the `.tsx` AST.

package/bin/cli.mjs

@@ -1,12 +1,31 @@
 #!/usr/bin/env node
 import { spawn } from 'node:child_process';
 import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import net from 'node:net';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const defaultPackageRoot = path.resolve(__dirname, '..');
+const requireFromCli = createRequire(import.meta.url);
+
+const SCREEN_DIR_CANDIDATES = ['src/screens', 'screens', 'app', 'src/app'];
+const IGNORED_SCAN_DIRS = new Set([
+  'node_modules',
+  '.git',
+  'dist',
+  'build',
+  '.next',
+  '.expo',
+  '.turbo',
+  'ios',
+  'android',
+  'vendor',
+  'coverage',
+  '.agents',
+  '.gemini',
+]);
 
 function isHostPortFree(port, host) {
   return new Promise((resolve) => {
@@ -43,36 +62,175 @@ export async function findAvailablePort(startPort = 5173, maxAttempts = 25) {
   return startPort;
 }
 
+function countScreenFilesInDirectory(screensDir, maxDepth = 4) {
+  let count = 0;
+  function walk(curr, depth) {
+    if (depth > maxDepth) return;
+    let entries = [];
+    try {
+      entries = fs.readdirSync(curr, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name.startsWith('.')) continue;
+      if (entry.isDirectory()) {
+        if (
+          entry.name === 'node_modules' ||
+          entry.name === '__tests__' ||
+          entry.name === 'components'
+        ) {
+          continue;
+        }
+        walk(path.join(curr, entry.name), depth + 1);
+      } else if (entry.isFile()) {
+        const f = entry.name;
+        if (f.startsWith('_') || f.startsWith('+')) continue;
+        if (f === 'index.ts' || f === 'index.js') continue;
+        if (f.includes('.test.') || f.includes('.spec.') || f.endsWith('.d.ts')) continue;
+        if (f.endsWith('.tsx') || f.endsWith('.jsx')) {
+          count++;
+        }
+      }
+    }
+  }
+  walk(screensDir, 0);
+  return count;
+}
+
+function hasDirectScreens(dirPath) {
+  for (const rel of SCREEN_DIR_CANDIDATES) {
+    const full = path.join(dirPath, rel);
+    try {
+      if (fs.existsSync(full) && fs.statSync(full).isDirectory()) {
+        const count = countScreenFilesInDirectory(full);
+        if (count > 0) {
+          return { found: true, relDir: rel, count };
+        }
+      }
+    } catch {
+      // Ignore
+    }
+  }
+  return { found: false, relDir: null, count: 0 };
+}
+
+function scoreMobileCandidate(dirPath, screenCount) {
+  let score = screenCount;
+  const folderName = path.basename(dirPath).toLowerCase();
+  if (/mobile|native|expo|app|client/.test(folderName)) {
+    score += 10;
+  }
+  if (fs.existsSync(path.join(dirPath, 'app.json')) || fs.existsSync(path.join(dirPath, 'eas.json'))) {
+    score += 25;
+  }
+  try {
+    const pkgPath = path.join(dirPath, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+      const pkgRaw = fs.readFileSync(pkgPath, 'utf8');
+      if (pkgRaw.includes('"react-native"') || pkgRaw.includes('"expo"')) {
+        score += 20;
+      }
+    }
+  } catch {
+    // Ignore
+  }
+  return score;
+}
+
+export function findMobileAppRoot(rawRoot) {
+  const normalizedRoot = path.resolve(rawRoot);
+  if (!fs.existsSync(normalizedRoot)) {
+    return normalizedRoot;
+  }
+
+  const direct = hasDirectScreens(normalizedRoot);
+  if (direct.found) {
+    return normalizedRoot;
+  }
+
+  let bestCandidate = null;
+  let bestScore = -1;
+
+  function scanSubdirs(parentDir, depth) {
+    if (depth > 2) return;
+    let entries = [];
+    try {
+      entries = fs.readdirSync(parentDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    for (const entry of entries) {
+      if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+      if (IGNORED_SCAN_DIRS.has(entry.name)) continue;
+
+      const subPath = path.join(parentDir, entry.name);
+      const check = hasDirectScreens(subPath);
+      if (check.found) {
+        const score = scoreMobileCandidate(subPath, check.count);
+        if (score > bestScore) {
+          bestScore = score;
+          bestCandidate = subPath;
+        }
+      } else if (depth < 2) {
+        scanSubdirs(subPath, depth + 1);
+      }
+    }
+  }
+
+  scanSubdirs(normalizedRoot, 1);
+  return bestCandidate ?? normalizedRoot;
+}
+
 function detectScreensDirectory(targetProject) {
-  const candidates = ['src/screens', 'screens', 'app', 'src/app'];
-  for (const rel of candidates) {
-    const full = path.join(targetProject, rel);
+  const mobileRoot = findMobileAppRoot(targetProject);
+  // First check directories with .tsx/.jsx screen files
+  for (const rel of SCREEN_DIR_CANDIDATES) {
+    const full = path.join(mobileRoot, rel);
+    if (fs.existsSync(full) && fs.statSync(full).isDirectory() && countScreenFilesInDirectory(full) > 0) {
+      const relFromTarget = path.relative(targetProject, full).replace(/\\/g, '/');
+      return relFromTarget || rel;
+    }
+  }
+  // Fallback to existing empty candidate directory (e.g. newly initialized project)
+  for (const rel of SCREEN_DIR_CANDIDATES) {
+    const full = path.join(mobileRoot, rel);
     if (fs.existsSync(full) && fs.statSync(full).isDirectory()) {
-      return rel;
+      const relFromTarget = path.relative(targetProject, full).replace(/\\/g, '/');
+      return relFromTarget || rel;
     }
   }
   return null;
 }
 
+function addCanvasScriptToPackageJson(dirPath) {
+  const pkgJsonPath = path.join(dirPath, 'package.json');
+  if (!fs.existsSync(pkgJsonPath)) return false;
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
+    pkg.scripts = pkg.scripts || {};
+    if (pkg.name !== 'zelune' && !pkg.scripts.canvas) {
+      pkg.scripts.canvas = 'zelune';
+      fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+      return true;
+    }
+  } catch {
+    // Ignore malformed package.json
+  }
+  return false;
+}
+
 export function initProject(targetProject, packageRoot = defaultPackageRoot) {
   const resolvedTarget = path.resolve(targetProject);
+  const mobileRoot = findMobileAppRoot(resolvedTarget);
   const screensDir = detectScreensDirectory(resolvedTarget);
 
-  // 1. Update package.json with "canvas": "zelune" script if present
-  const pkgJsonPath = path.join(resolvedTarget, 'package.json');
-  let updatedPackageJson = false;
-  if (fs.existsSync(pkgJsonPath)) {
-    try {
-      const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
-      pkg.scripts = pkg.scripts || {};
-      if (pkg.name !== 'zelune' && !pkg.scripts.canvas) {
-        pkg.scripts.canvas = 'zelune';
-        fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
-        updatedPackageJson = true;
-      }
-    } catch {
-      // Ignore malformed package.json
-    }
+  // 1. Update package.json with "canvas": "zelune" script in target root (and nested mobile root if different)
+  let updatedPackageJson = addCanvasScriptToPackageJson(resolvedTarget);
+  if (mobileRoot !== resolvedTarget) {
+    const updatedNested = addCanvasScriptToPackageJson(mobileRoot);
+    updatedPackageJson = updatedPackageJson || updatedNested;
   }
 
   // 2. Create or merge mcp_config.json with the zelune MCP server entry
@@ -91,7 +249,7 @@ export function initProject(targetProject, packageRoot = defaultPackageRoot) {
   }
   mcpConfig.mcpServers.zelune = {
     command: 'npx',
-    args: ['-y', 'zelune', '--mcp', '--project', resolvedTarget],
+    args: ['-y', 'zelune', '--mcp', '--project', mobileRoot],
   };
   fs.writeFileSync(mcpConfigPath, JSON.stringify(mcpConfig, null, 2) + '\n', 'utf8');
 
@@ -139,6 +297,7 @@ export function initProject(targetProject, packageRoot = defaultPackageRoot) {
 
   return {
     targetProject: resolvedTarget,
+    mobileRoot,
     screensDir: screensDir ?? 'src/screens (or app/)',
     updatedPackageJson,
     mcpConfigPath,
@@ -178,6 +337,9 @@ Usage:
   if (isInitMode) {
     const result = initProject(targetProject, defaultPackageRoot);
     console.log(`\n✨ Zelune initialized in ${result.targetProject}`);
+    if (result.mobileRoot !== result.targetProject) {
+      console.log(`   • Detected nested mobile app: ${result.mobileRoot}`);
+    }
     console.log(`   • Screens directory: ${result.screensDir}`);
     if (result.updatedPackageJson) {
       console.log(`   • Added "canvas": "zelune" script to package.json`);
@@ -187,13 +349,14 @@ Usage:
     if (result.createdDesignMd || result.createdProductMd) {
       console.log(`   • Created starter DESIGN.md & PRODUCT.md governance docs`);
     }
-    console.log(`\n👉 Run "npm run canvas" (or "zelune") to open your screens in the visual canvas!\n`);
+    console.log(`\n👉 Run "npx zelune" (or "npm run canvas") to open your screens in the visual canvas!\n`);
     process.exit(0);
   }
 
+  const resolvedMobileRoot = findMobileAppRoot(targetProject);
   const env = {
     ...process.env,
-    ANTIGRAVITY_TARGET_PROJECT: targetProject,
+    ANTIGRAVITY_TARGET_PROJECT: resolvedMobileRoot,
   };
 
   if (isMcpMode) {
@@ -210,27 +373,48 @@ Usage:
   const portFlagIdx = args.indexOf('--port');
   let port;
   if (portFlagIdx !== -1 && args[portFlagIdx + 1]) {
-    port = String(args[portFlagIdx + 1]);
+    const parsedPort = Number.parseInt(String(args[portFlagIdx + 1]), 10);
+    if (!Number.isInteger(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+      console.error(
+        `Error: Invalid --port value "${args[portFlagIdx + 1]}". Must be an integer between 1 and 65535.`
+      );
+      process.exit(1);
+    }
+    port = String(parsedPort);
   } else {
     const resolvedPort = await findAvailablePort(5173);
     port = String(resolvedPort);
   }
 
   const shouldOpenBrowser = !args.includes('--no-open');
-  const viteArgs = ['vite', '--host', '127.0.0.1', '--port', port];
+  const viteCliFlags = ['--host', '127.0.0.1', '--port', port];
   if (shouldOpenBrowser) {
-    viteArgs.push('--open');
+    viteCliFlags.push('--open');
   }
 
   console.log(`\n🚀 Zelune — React Native Visual Canvas & MCP`);
-  console.log(`📂 Target Project: ${targetProject}`);
+  console.log(`📂 Workspace Root: ${targetProject}`);
+  if (resolvedMobileRoot !== targetProject) {
+    console.log(`📱 Mobile App Dir: ${resolvedMobileRoot}`);
+  }
   console.log(`🌐 Studio URL:     http://127.0.0.1:${port}\n`);
 
-  const child = spawn('npx', viteArgs, {
-    cwd: defaultPackageRoot,
-    env,
-    stdio: 'inherit',
-  });
+  let child;
+  try {
+    const viteBinPath = requireFromCli.resolve('vite/bin/vite.js');
+    child = spawn(process.execPath, [viteBinPath, ...viteCliFlags], {
+      cwd: defaultPackageRoot,
+      env,
+      stdio: 'inherit',
+    });
+  } catch {
+    child = spawn('npx', ['vite', ...viteCliFlags], {
+      cwd: defaultPackageRoot,
+      env,
+      stdio: 'inherit',
+    });
+  }
+
   child.on('exit', (code) => process.exit(code ?? 0));
 }
 

package/mcp/server.ts

@@ -10,6 +10,7 @@ import {
   discoverScreens,
   inspectElement,
   patchElement,
+  reorderElement,
   type StyleValue,
 } from '../src/server/astEngine.js';
 
@@ -19,7 +20,7 @@ const WORKSPACE_ROOT = path.resolve(__dirname, '..');
 const server = new Server(
   {
     name: 'zelune',
-    version: '1.3.0',
+    version: '1.5.0',
   },
   {
     capabilities: {
@@ -86,6 +87,39 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           required: ['file', 'astPath'],
         },
       },
+      {
+        name: 'reorder_screen_element',
+        description:
+          'Surgically reorders a React Native JSX element among its Flexbox siblings in the .tsx AST.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            file: {
+              type: 'string',
+              description: 'Relative path to the screen file (e.g. src/screens/HomeScreen.tsx)',
+            },
+            astPath: {
+              type: 'string',
+              description: 'Preorder AST index of the JSX element to move',
+            },
+            direction: {
+              type: 'string',
+              enum: ['up', 'down'],
+              description: 'Optional relative direction ("up" or "down") among siblings',
+            },
+            targetAstPath: {
+              type: 'string',
+              description: 'Optional AST index of the sibling to place before/after',
+            },
+            placement: {
+              type: 'string',
+              enum: ['before', 'after'],
+              description: 'Whether to insert before or after targetAstPath',
+            },
+          },
+          required: ['file', 'astPath'],
+        },
+      },
     ],
   };
 });
@@ -126,6 +160,28 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
     };
   }
 
+  if (name === 'reorder_screen_element') {
+    const file = String(args?.file ?? '');
+    const astPath = String(args?.astPath ?? '0');
+    const direction =
+      args?.direction === 'up' || args?.direction === 'down' ? args.direction : undefined;
+    const targetAstPath =
+      typeof args?.targetAstPath === 'string' ? args.targetAstPath : undefined;
+    const placement =
+      args?.placement === 'before' || args?.placement === 'after' ? args.placement : undefined;
+
+    const result = await reorderElement(WORKSPACE_ROOT, {
+      file,
+      astPath,
+      direction,
+      targetAstPath,
+      placement,
+    });
+    return {
+      content: [{ type: 'text', text: JSON.stringify(result, null, 2) }],
+    };
+  }
+
   throw new Error(`Unknown MCP tool: ${name}`);
 });
 

package/package.json

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

package/src/canvas/CanvasApp.tsx

@@ -29,7 +29,7 @@ import type {
   ScreenMetadata,
   SelectedElementRef,
 } from './types';
-import type { PatchPayload } from '../server/astEngine';
+import type { PatchPayload, ReorderPayload } from '../server/astEngine';
 
 const DEFAULT_WIDTH = 393;
 const DEFAULT_HEIGHT = 852;
@@ -242,9 +242,57 @@ export const CanvasApp: React.FC = () => {
     [fetchScreens]
   );
 
+  // Surgical AST Sibling Reorder handler
+  const handleReorderElement = useCallback(
+    async (payload: ReorderPayload) => {
+      setIsSaving(true);
+      setStatusMessage(null);
+      try {
+        const res = await fetch('/api/reorder', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const data = (await res.json()) as {
+          ok: boolean;
+          element?: InspectedElement;
+          history?: { undoAvailable: number; redoAvailable: number };
+          error?: string;
+        };
+        if (data.ok && data.element) {
+          setInspectedData(data.element);
+          if (data.history) setHistoryState(data.history);
+          setSelectedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  line: data.element!.line,
+                  col: data.element!.col,
+                  astPath: data.element!.astPath,
+                }
+              : null
+          );
+          setStatusMessage('Reordered in .tsx');
+          void fetchScreens();
+        } else if (data.error) {
+          setStatusMessage(`Error: ${data.error}`);
+        }
+      } catch {
+        setStatusMessage('Failed to reorder AST element');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [fetchScreens]
+  );
+
   // Undo & Redo handlers
   const handleUndo = useCallback(async () => {
-    const res = await fetch('/api/undo', { method: 'POST' });
+    const res = await fetch('/api/undo', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}',
+    });
     const data = (await res.json()) as {
       ok: boolean;
       restoredFile: string | null;
@@ -265,7 +313,11 @@ export const CanvasApp: React.FC = () => {
   }, [selectedElement, inspectSelectedElement, fetchScreens]);
 
   const handleRedo = useCallback(async () => {
-    const res = await fetch('/api/redo', { method: 'POST' });
+    const res = await fetch('/api/redo', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}',
+    });
     const data = (await res.json()) as {
       ok: boolean;
       restoredFile: string | null;
@@ -308,6 +360,36 @@ export const CanvasApp: React.FC = () => {
       } else if (!isInputFocused && !e.metaKey && !e.ctrlKey && !e.altKey && e.key === ']') {
         e.preventDefault();
         setIsRightPanelOpen((prev) => !prev);
+      } else if (
+        !isInputFocused &&
+        selectedElement &&
+        inspectedData &&
+        ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)
+      ) {
+        e.preventDefault();
+        const step = e.shiftKey ? 8 : 1;
+        const isAbs = inspectedData.styles.position === 'absolute';
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+          const prop = isAbs ? 'top' : 'marginTop';
+          const currentVal = Number(inspectedData.styles[prop] ?? 0) || 0;
+          const nextVal = e.key === 'ArrowUp' ? currentVal - step : currentVal + step;
+          void handlePatchElement({
+            file: selectedElement.file,
+            astPath: selectedElement.astPath,
+            line: selectedElement.line,
+            styles: { [prop]: nextVal },
+          });
+        } else {
+          const prop = isAbs ? 'left' : 'marginLeft';
+          const currentVal = Number(inspectedData.styles[prop] ?? 0) || 0;
+          const nextVal = e.key === 'ArrowLeft' ? currentVal - step : currentVal + step;
+          void handlePatchElement({
+            file: selectedElement.file,
+            astPath: selectedElement.astPath,
+            line: selectedElement.line,
+            styles: { [prop]: nextVal },
+          });
+        }
       } else if (e.key === 'Escape') {
         setSelectedElement(null);
         setInspectedData(null);
@@ -316,7 +398,7 @@ export const CanvasApp: React.FC = () => {
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleUndo, handleRedo]);
+  }, [handleUndo, handleRedo, selectedElement, inspectedData, handlePatchElement]);
 
   // Lock out whole-page browser pinch-to-zoom & route trackpad pinch to cursor-centered canvas zoom
   useEffect(() => {
@@ -1171,11 +1253,14 @@ export const CanvasApp: React.FC = () => {
                   isActiveScreen={activeScreenId === screen.id}
                   isHighlightedScreen={highlightedScreenId === screen.id}
                   selectedElement={selectedElement}
+                  inspectedElement={inspectedData}
                   onSelectElement={handleSelectElement}
                   onSelectScreen={setActiveScreenId}
                   onFocusScreen={focusOnScreen}
                   onMoveArtboard={handleMoveArtboard}
                   onNavigateFlow={handleNavigateFlow}
+                  onPatchElement={handlePatchElement}
+                  onReorderElement={handleReorderElement}
                 />
               );
             })}