zelune 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.5.4] - 2026-10-23
+
+### Added
+- **Full React Native API Web Shim (`src/runtime/reactNativeShim.ts`)**: Added a dedicated `'react-native'` ESM wrapper that re-exports all of `react-native-web`, provides a `default` export (`import RN from 'react-native'`), and shims React Native APIs missing from `react-native-web@0.19.13` (`useAnimatedValue`, `PermissionsAndroid`, `ToastAndroid`, `ActionSheetIOS`, `InputAccessoryView`, `DrawerLayoutAndroid`, `TurboModuleRegistry`, `requireNativeComponent`, `codegenNativeComponent`, `PlatformColor`, `DynamicColorIOS`, `DevSettings`, `Systrace`, `Networking`, `Settings`).
+- **Zustand, TanStack React Query & Supabase Client Shims (`src/runtime/MockNavigationContext.tsx`)**: Added built-in web shims for Zustand (`create` supporting both standard and curried TypeScript `create<T>()(...)` invocations, plus `useStore`), TanStack React Query (`useQuery`, `useInfiniteQuery`, `useMutation`, `useQueryClient`, `QueryClient`, `QueryClientProvider`), and Supabase (`createClient` with chainable `.from()`, `.auth`, `.storage`, `.channel()`, `.functions`).
+- **Top-Level Studio Recovery Boundary (`src/main.tsx`)**: Wrapped `<CanvasApp />` in `StudioRootErrorBoundary` so `#root` can never unmount into a blank white screen.
+
+### Fixed
+- **External Project Blank Screen Root-Cause Fixes (`vite.config.ts`, `bin/cli.mjs`, `plugins/viteVirtualScreensPlugin.ts`, `plugins/viteReactNativeFallbackPlugin.ts`, `src/runtime/MockNavigationContext.tsx`)**:
+  - **Vite Dependency Scanner Isolation (`vite.config.ts`, `plugins/viteVirtualScreensPlugin.ts`)**: Configured `optimizeDeps: { noDiscovery: true, include: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom', 'react-dom/client', 'react-native-web', 'lucide-react'] }` and emitted `/@fs/...` URLs with `/* @vite-ignore */` in dev mode so Vite's startup `esbuild` scanner never crawls external project `node_modules` (which contain Flow syntax, native modules, or duplicate React instances that previously crashed `optimizeDeps` before `src/main.tsx` could mount).
+  - **AST-Based Named Import & Re-Export Extraction (`plugins/viteReactNativeFallbackPlugin.ts`)**: Replaced the semicolon-dependent regex in `extractNamedImportsFromImporter` with `@babel/parser` AST traversal (`ImportDeclaration` and `ExportNamedDeclaration`) so semicolon-free (`semi: false`) and multiline files never miss named exports, and switched query parsing in `load(id)` to `URLSearchParams` so Vite's `?import&exports=...` injection never drops synthesized exports.
+  - **Callable Default Export Proxy (`src/runtime/MockNavigationContext.tsx`)**: Changed `defaultExportProxy` to wrap a callable React component function (`UniversalDefaultExportComponent`) so default-imported components (`import Ionicons from '@expo/vector-icons/Ionicons'`, `import Svg from 'react-native-svg'`, `import LottieView from 'lottie-react-native'`) render as valid React components without throwing `Element type is invalid: expected a string or class/function but got: object`.
+  - **Missing Lucide Icon & Local File Fallbacks (`plugins/viteReactNativeFallbackPlugin.ts`)**: Added automatic fallback icon synthesis for any icon name imported from `lucide-react` or `lucide-react-native` not present in `lucide-react@0.469.0`, trailing-comma-safe `tsconfig.json` alias resolution across `targetProjectRoot` and `workspaceRoot`, and automatic virtual-stub fallback for missing/ungenerated local imports.
+  - **Nested Monorepo Workspace & `npm run zelune` Script (`bin/cli.mjs`, `vite.config.ts`)**: Passed both `ANTIGRAVITY_WORKSPACE_ROOT` and `ANTIGRAVITY_TARGET_PROJECT` from `bin/cli.mjs`, enabled `server.fs.strict: false` with canonical `realpathSync` roots in `vite.config.ts`, and added `"zelune": "zelune"` alongside `"canvas": "zelune"` during `zelune init`.
+
+## [1.5.3] - 2026-10-23
+
+### Added
+- **Studio Light Mode & Dark Mode Theme Toggle (`index.html`, `src/styles.css`, `src/canvas/CanvasApp.tsx`, `src/canvas/InspectorPanel.tsx`, `src/canvas/ScreenArtboard.tsx`, `src/canvas/FlowArrowsLayer.tsx`)**: Added a studio-wide Light/Dark color-scheme toggle (`Sun` / `Moon` button in the top-right toolbar) using `<meta name="color-scheme">`, `:root:has(> head > meta[name="color-scheme"][content="light"|"dark"])`, `light-dark()` tokens with `@supports` and `@media (prefers-color-scheme: dark)` fallbacks, high-contrast semantic badge tokens (`--studio-badge-indigo-*`, `--studio-badge-emerald-*`), zero-FOUC inline `<head>` script, and cross-tab `storage` event synchronization while isolating device artboard viewports so React Native screens render faithfully.
+- **Universal Expo & React Native Ecosystem Web Shims (`src/runtime/MockNavigationContext.tsx`, `plugins/viteReactNativeFallbackPlugin.ts`)**: Added built-in web shims for `@expo/vector-icons`, `expo-linear-gradient`, `expo-blur`, `expo-image`, `react-native-svg`, `react-native-reanimated`, `react-native-gesture-handler`, `expo-haptics`, `expo-constants`, `expo-font`, `expo-splash-screen`, `expo-secure-store`, `expo-clipboard`, `expo-linking`, `@react-native-async-storage/async-storage`, and `@shopify/flash-list`, plus a dynamic AST-aware fallback plugin (`viteReactNativeFallbackPlugin`) that synthesizes named export stubs for any additional native or unresolved bare packages imported by external screens.
+
+### Fixed
+- **External Project Blank Screen Fix via Dynamic Per-Screen Isolation & `process.env` / `require` Polyfill (`plugins/viteVirtualScreensPlugin.ts`, `vite.config.ts`, `src/server/astEngine.ts`)**: Replaced static top-level `import *` statements in `virtual:zelune-screens` with per-screen dynamic `import()` React wrappers (`createIsolatedScreenComponent`) so a broken import or top-level error in any individual screen renders a diagnostic card inside that screen's artboard rather than blanking out `#root`. Added automatic `EXPO_PUBLIC_*` `.env` loading, a safe `window.process.env` Proxy (so SDK initializers like `createClient(process.env.EXPO_PUBLIC_SUPABASE_URL, ...)` never throw on load), and a `window.require` polyfill for React Native asset `require('./image.png')` calls.
+- **Double-Click On-Canvas Inline `<Text>` Editing (`src/canvas/ScreenArtboard.tsx`)**: Fixed an async race condition where `fetch('/api/inspect')` resolving ~15ms after the first click of a double-click reset `isEditingInlineText` back to `false` and closed the inline `<textarea>`. Gated `isEditingInlineText` resets strictly on selection identity changes (`${screenId}:${astPath}`), added synchronous DOM text extraction (`resolveTextTargetForDoubleClick`) so double-clicking `<Text>` or a parent button/badge immediately opens the inline editor, and persisted the target's `file`/`astPath`/`line` in `inlineEditTargetRef` for reliable AST commits.
+
 ## [1.5.2] - 2026-10-21
 
 ### Changed

package/bin/cli.mjs

@@ -210,10 +210,20 @@ function addCanvasScriptToPackageJson(dirPath) {
   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;
+    if (pkg.name !== 'zelune') {
+      let modified = false;
+      if (!pkg.scripts.zelune || String(pkg.scripts.zelune).includes('npx')) {
+        pkg.scripts.zelune = 'zelune';
+        modified = true;
+      }
+      if (!pkg.scripts.canvas || String(pkg.scripts.canvas).includes('npx')) {
+        pkg.scripts.canvas = 'zelune';
+        modified = true;
+      }
+      if (modified) {
+        fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+        return true;
+      }
     }
   } catch {
     // Ignore malformed package.json
@@ -342,20 +352,21 @@ Usage:
     }
     console.log(`   • Screens directory: ${result.screensDir}`);
     if (result.updatedPackageJson) {
-      console.log(`   • Added "canvas": "zelune" script to package.json`);
+      console.log(`   • Added "zelune": "zelune" script to package.json`);
     }
     console.log(`   • Configured MCP server in mcp_config.json`);
     console.log(`   • Installed AI skill in .agents/skills/zelune/SKILL.md`);
     if (result.createdDesignMd || result.createdProductMd) {
       console.log(`   • Created starter DESIGN.md & PRODUCT.md governance docs`);
     }
-    console.log(`\n👉 Run "npx zelune" (or "npm run canvas") to open your screens in the visual canvas!\n`);
+    console.log(`\n👉 Run "zelune" (or "npm run zelune") to open your screens in the visual canvas!\n`);
     process.exit(0);
   }
 
   const resolvedMobileRoot = findMobileAppRoot(targetProject);
   const env = {
     ...process.env,
+    ANTIGRAVITY_WORKSPACE_ROOT: targetProject,
     ANTIGRAVITY_TARGET_PROJECT: resolvedMobileRoot,
   };
 

package/index.html

@@ -1,8 +1,15 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <script>
+      try {
+        document.querySelector('meta[name="color-scheme"]').content =
+          localStorage.getItem('color-scheme') ?? 'dark';
+      } 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 />
@@ -11,7 +18,7 @@
       rel="stylesheet"
     />
   </head>
-  <body class="bg-[#08090C] text-[#F1F5F9] antialiased selection:bg-sky-500/25 overflow-hidden">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zelune",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -47,6 +47,7 @@
   ],
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 5173",
+    "zelune": "node ./bin/cli.mjs",
     "canvas": "node ./bin/cli.mjs",
     "build": "vite build",
     "preview": "vite preview --host 127.0.0.1 --port 4173",

package/plugin.json

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