zelune 1.6.4 → 1.6.5

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to the **Zelune — React Native Visual Canvas & MCP** project are documented in this file.
 
+## [1.6.5] - 2026-10-25
+
+### Fixed
+- **Standalone TSX Browser Compiler & Studio Runtime Screen-Loading Fixes — Resolved (`src/server/tsxBrowserCompiler.ts`, `src/server/studioHttpServer.ts`, `src/runtime/MockNavigationContext.tsx`, `src/main.tsx`, `plugins/viteVirtualScreensPlugin.ts`, `src/screens/index.ts`, `src/canvas/CanvasApp.tsx`)**:
+  - **Preserved Nested JSX Children During Bottom-Up AST Transformation (`src/server/tsxBrowserCompiler.ts`)**: Fixed `convertJsxChildrenToExprs` dropping child `JSXElement` / `JSXFragment` nodes that had already been transformed bottom-up into `CallExpression`s, which caused screens in `v1.6.4` to render empty root containers.
+  - **Preserved Optional Chaining (`?.`) & Added Full TypeScript Import/Re-Export Elision (`src/server/tsxBrowserCompiler.ts`)**: Guarded `delete node.optional` so `OptionalMemberExpression` and `OptionalCallExpression` (`?.`) are never stripped; added `tsc`/`esbuild`-equivalent unused/type-only import and barrel re-export elision (`import { SomeInterface } from '../types'`), `export type *` stripping, `this: T` fake parameter stripping, and constructor `TSParameterProperty` lowering.
+  - **Static `require(...)` Asset/Module Rewriting & Safe Browser Globals (`src/server/tsxBrowserCompiler.ts`, `src/runtime/MockNavigationContext.tsx`)**: Transformed static `require('../assets/...')` calls into `/@zelune/asset?file=...` URIs (or hoisted ESM imports) and restored safe browser `window.process`, `window.__DEV__`, `window.global`, and `window.require` globals without `new Proxy` or external URL literals.
+  - **Universal Namespace Exports, Singleton Context Routing & Dynamic Screen Fallback (`src/server/studioHttpServer.ts`, `src/server/tsxBrowserCompiler.ts`, `src/main.tsx`, `plugins/viteVirtualScreensPlugin.ts`, `src/canvas/CanvasApp.tsx`)**: Exposed all `MockNavigationContext` exports on `/@zelune/shim/stub.js` by default for `import * as ...` namespace imports, routed local `MockNavigationContext`/`reactNativeShim` imports to the singleton `/@zelune/shim/*` modules, merged `react-dom` (`createPortal`, `flushSync`) into `window.__ZELUNE_RUNTIME__.ReactDOM`, made `/@zelune/module` symlink- and relative-path-aware, and added `getDynamicScreenComponent` fallback for newly added screens.
+
+### Changed
+- **Removed Top Bar `+ Add Element` Button (`src/canvas/CanvasApp.tsx`)**: Removed the `+ Add Element` button from the top Studio bar to keep the header clean and minimal while retaining the full Component Builder Palette inside the Right Inspector panel.
+
 ## [1.6.4] - 2026-10-24
 
 ### Security

package/dist/assets/{CheckoutScreen-6IdrpKgm.js → CheckoutScreen-CoLb16nl.js}

@@ -1,4 +1,4 @@
-import { u as useNavigation, j as jsxRuntimeExports, V as View, b as TouchableOpacity, T as Text, S as StyleSheet } from "./index-hEzd4JVy.js";
+import { u as useNavigation, j as jsxRuntimeExports, V as View, b as TouchableOpacity, T as Text, S as StyleSheet } from "./index-xam7XuSg.js";
 function CheckoutScreen() {
   const navigation = useNavigation();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { style: styles.container, dataSet: { agyFile: "src/screens/CheckoutScreen.tsx", agyLine: "14", agyCol: "4", agyAstPath: "0", agyTag: "View" }, "data-agy-file": "src/screens/CheckoutScreen.tsx", "data-agy-line": "14", "data-agy-col": "4", "data-agy-ast-path": "0", "data-agy-tag": "View", children: [

package/dist/assets/{HomeScreen-Dxe9L4I2.js → HomeScreen-DtWSrKS1.js}

@@ -1,4 +1,4 @@
-import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, c as ScrollView, V as View, T as Text, b as TouchableOpacity, S as StyleSheet } from "./index-hEzd4JVy.js";
+import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, c as ScrollView, V as View, T as Text, b as TouchableOpacity, S as StyleSheet } from "./index-xam7XuSg.js";
 function HomeScreen() {
   const navigation = useNavigation();
   const [activeTab, setActiveTab] = reactExports.useState("Featured");

package/dist/assets/{LoginScreen-Dp1awI4F.js → LoginScreen-C1EtAYek.js}

@@ -1,4 +1,4 @@
-import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, V as View, T as Text, a as TextInput, b as TouchableOpacity, S as StyleSheet } from "./index-hEzd4JVy.js";
+import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, V as View, T as Text, a as TextInput, b as TouchableOpacity, S as StyleSheet } from "./index-xam7XuSg.js";
 function LoginScreen() {
   const navigation = useNavigation();
   const [email, setEmail] = reactExports.useState("alex@zelune.studio");

package/dist/assets/{ProductDetailScreen-Wa5_nlRP.js → ProductDetailScreen-a9PXPTEY.js}

@@ -1,4 +1,4 @@
-import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, V as View, b as TouchableOpacity, T as Text, S as StyleSheet } from "./index-hEzd4JVy.js";
+import { u as useNavigation, r as reactExports, j as jsxRuntimeExports, V as View, b as TouchableOpacity, T as Text, S as StyleSheet } from "./index-xam7XuSg.js";
 function ProductDetailScreen() {
   const navigation = useNavigation();
   const [selectedFinish, setSelectedFinish] = reactExports.useState("Obsidian");

package/dist/assets/{ProfileScreen-riAU6vVh.js → ProfileScreen-ChKW9gJP.js}

@@ -1,4 +1,4 @@
-import { u as useNavigation, j as jsxRuntimeExports, V as View, T as Text, b as TouchableOpacity, S as StyleSheet } from "./index-hEzd4JVy.js";
+import { u as useNavigation, j as jsxRuntimeExports, V as View, T as Text, b as TouchableOpacity, S as StyleSheet } from "./index-xam7XuSg.js";
 function ProfileScreen() {
   const navigation = useNavigation();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { style: styles.container, dataSet: { agyFile: "src/screens/ProfileScreen.tsx", agyLine: "14", agyCol: "4", agyAstPath: "0", agyTag: "View" }, "data-agy-file": "src/screens/ProfileScreen.tsx", "data-agy-line": "14", "data-agy-col": "4", "data-agy-ast-path": "0", "data-agy-tag": "View", children: [

package/dist/assets/{index-hEzd4JVy.js → index-xam7XuSg.js}

@@ -1,6 +1,26 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a;
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: () => e[k]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
 (function polyfill() {
   const relList = document.createElement("link").relList;
   if (relList && relList.supports && relList.supports("modulepreload")) {
@@ -357,7 +377,6 @@ function requireJsxRuntime() {
 var jsxRuntimeExports = requireJsxRuntime();
 var reactExports = requireReact();
 const React = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
-var client = {};
 var reactDom = { exports: {} };
 var reactDom_production_min = {};
 var scheduler = { exports: {} };
@@ -7047,6 +7066,13 @@ function requireReactDom() {
   }
   return reactDom.exports;
 }
+var reactDomExports = requireReactDom();
+const index$1 = /* @__PURE__ */ getDefaultExportFromCjs(reactDomExports);
+const ReactDOMBase = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: index$1
+}, [reactDomExports]);
+var client = {};
 var hasRequiredClient;
 function requireClient() {
   if (hasRequiredClient) return client;
@@ -7059,7 +7085,7 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
-const ReactDOM = /* @__PURE__ */ getDefaultExportFromCjs(clientExports);
+const ReactDOMClient = /* @__PURE__ */ getDefaultExportFromCjs(clientExports);
 /**
  * @license lucide-react v0.454.0 - ISC
  *
@@ -35969,7 +35995,7 @@ function applyColorAlpha(colorStr, alphaRatio) {
   return colorStr;
 }
 function lookupColorToken(rawToken, themeColors) {
-  var _a, _b;
+  var _a2, _b;
   if (rawToken.startsWith("[") && rawToken.endsWith("]")) {
     return rawToken.slice(1, -1);
   }
@@ -36007,7 +36033,7 @@ function lookupColorToken(rawToken, themeColors) {
   }
   if (!resolvedHex) return void 0;
   if (alphaPart !== void 0) {
-    const customOpacity = typeof window !== "undefined" ? (_b = (_a = window.__ZELUNE_TAILWIND_THEME__) == null ? void 0 : _a.opacity) == null ? void 0 : _b[alphaPart] : void 0;
+    const customOpacity = typeof window !== "undefined" ? (_b = (_a2 = window.__ZELUNE_TAILWIND_THEME__) == null ? void 0 : _a2.opacity) == null ? void 0 : _b[alphaPart] : void 0;
     let alphaRatio = typeof customOpacity === "string" || typeof customOpacity === "number" ? Number.parseFloat(String(customOpacity)) : Number.NaN;
     if (!Number.isFinite(alphaRatio)) {
       const numeric = Number.parseFloat(alphaPart);
@@ -37234,12 +37260,12 @@ const TextInput = reactExports.forwardRef(function TextInput2(props, ref) {
   useSimulatedLayout(props.onLayout);
   reactExports.useImperativeHandle(ref, () => ({
     focus: () => {
-      var _a;
-      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     },
     blur: () => {
-      var _a;
-      return (_a = inputRef.current) == null ? void 0 : _a.blur();
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
     },
     clear: () => {
       if (inputRef.current) inputRef.current.value = "";
@@ -38898,8 +38924,8 @@ function create(initializer) {
   return Object.assign(useBoundStore, api);
 }
 function useStore(store, selector) {
-  var _a;
-  const rawState = typeof store === "function" ? store() : ((_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store)) ?? {};
+  var _a2;
+  const rawState = typeof store === "function" ? store() : ((_a2 = store == null ? void 0 : store.getState) == null ? void 0 : _a2.call(store)) ?? {};
   return typeof selector === "function" ? selector(rawState) : rawState;
 }
 class QueryClient {
@@ -39352,12 +39378,35 @@ const safeContextFallbackBase = {
   notifications: STABLE_EMPTY_ARRAY,
   bookings: STABLE_EMPTY_ARRAY,
   listings: STABLE_EMPTY_ARRAY,
+  featuredListings: STABLE_EMPTY_ARRAY,
   vehicles: STABLE_EMPTY_ARRAY,
   cars: STABLE_EMPTY_ARRAY,
+  dealers: STABLE_EMPTY_ARRAY,
+  featuredDealers: STABLE_EMPTY_ARRAY,
+  categories: STABLE_EMPTY_ARRAY,
+  brands: STABLE_EMPTY_ARRAY,
+  makes: STABLE_EMPTY_ARRAY,
+  models: STABLE_EMPTY_ARRAY,
+  products: STABLE_EMPTY_ARRAY,
+  services: STABLE_EMPTY_ARRAY,
+  reviews: STABLE_EMPTY_ARRAY,
   orders: STABLE_EMPTY_ARRAY,
   transactions: STABLE_EMPTY_ARRAY,
   messages: STABLE_EMPTY_ARRAY,
   chats: STABLE_EMPTY_ARRAY,
+  accounts: STABLE_EMPTY_ARRAY,
+  wallets: STABLE_EMPTY_ARRAY,
+  loans: STABLE_EMPTY_ARRAY,
+  members: STABLE_EMPTY_ARRAY,
+  groups: STABLE_EMPTY_ARRAY,
+  contributions: STABLE_EMPTY_ARRAY,
+  addresses: STABLE_EMPTY_ARRAY,
+  cards: STABLE_EMPTY_ARRAY,
+  paymentMethods: STABLE_EMPTY_ARRAY,
+  filters: {},
+  filterState: {},
+  searchQuery: "",
+  selectedCategory: "All",
   unreadCount: 0,
   count: 0,
   total: 0,
@@ -39372,13 +39421,50 @@ const safeContextFallbackBase = {
   refetch: async () => void 0,
   updateProfile: async () => ({ error: null }),
   toggleTheme: () => void 0,
-  setTheme: () => void 0
+  setTheme: () => void 0,
+  setSearchQuery: () => void 0,
+  setFilters: () => void 0,
+  resetFilters: () => void 0,
+  addItem: () => void 0,
+  removeItem: () => void 0,
+  clearCart: () => void 0,
+  toggleFavorite: () => void 0,
+  isFavorite: () => false
 };
 safeContextFallbackBase[Symbol$1.iterator] = function* () {
   yield safeContextFallbackBase;
   yield () => void 0;
 };
 const SAFE_CONTEXT_FALLBACK = safeContextFallbackBase;
+if (typeof window !== "undefined") {
+  const win = window;
+  const previewOrigin = ((_a = window.location) == null ? void 0 : _a.origin) || "zelune-preview";
+  win.global = window;
+  win.__DEV__ = true;
+  if (!win.process || typeof win.process !== "object") {
+    win.process = {
+      env: {
+        NODE_ENV: "development",
+        EXPO_PUBLIC_PLATFORM: "web",
+        EXPO_PUBLIC_SUPABASE_URL: previewOrigin,
+        EXPO_PUBLIC_SUPABASE_ANON_KEY: "zelune-preview-public-key",
+        EXPO_PUBLIC_API_URL: previewOrigin,
+        EXPO_PUBLIC_APP_URL: previewOrigin
+      },
+      platform: "browser",
+      version: "",
+      cwd: () => "/"
+    };
+  }
+  if (typeof win.require !== "function") {
+    win.require = (modId) => {
+      if (typeof modId === "string" && /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico)$/i.test(modId)) {
+        return { uri: modId, default: modId };
+      }
+      return SAFE_CHAINABLE_PROXY;
+    };
+  }
+}
 const origCreateContext = React.createContext;
 const origUseContext = React.useContext;
 const wrappedCreateContext = function zeluneCreateContext(defaultValue, ...rest) {
@@ -40023,24 +40109,24 @@ function createIsolatedScreenComponent(screenId, filePath, loader) {
 const BUILTIN_SCREEN_COMPONENTS = {
   "Login": createIsolatedScreenComponent("Login", "src/screens/LoginScreen.tsx", (attempt) => attempt > 0 ? __vitePreload(() => import(
     /* @vite-ignore */
-    "/Users/media/Documents/Google Artifact/src/screens/LoginScreen.tsx?t=" + Date.now()
-  ), true ? [] : void 0) : __vitePreload(() => import("./LoginScreen-Dp1awI4F.js"), true ? [] : void 0)),
+    "/@zelune/module?file=" + encodeURIComponent("src/screens/LoginScreen.tsx") + "&t=" + Date.now()
+  ), true ? [] : void 0) : __vitePreload(() => import("./LoginScreen-C1EtAYek.js"), true ? [] : void 0)),
   "Home": createIsolatedScreenComponent("Home", "src/screens/HomeScreen.tsx", (attempt) => attempt > 0 ? __vitePreload(() => import(
     /* @vite-ignore */
-    "/Users/media/Documents/Google Artifact/src/screens/HomeScreen.tsx?t=" + Date.now()
-  ), true ? [] : void 0) : __vitePreload(() => import("./HomeScreen-Dxe9L4I2.js"), true ? [] : void 0)),
+    "/@zelune/module?file=" + encodeURIComponent("src/screens/HomeScreen.tsx") + "&t=" + Date.now()
+  ), true ? [] : void 0) : __vitePreload(() => import("./HomeScreen-DtWSrKS1.js"), true ? [] : void 0)),
   "ProductDetail": createIsolatedScreenComponent("ProductDetail", "src/screens/ProductDetailScreen.tsx", (attempt) => attempt > 0 ? __vitePreload(() => import(
     /* @vite-ignore */
-    "/Users/media/Documents/Google Artifact/src/screens/ProductDetailScreen.tsx?t=" + Date.now()
-  ), true ? [] : void 0) : __vitePreload(() => import("./ProductDetailScreen-Wa5_nlRP.js"), true ? [] : void 0)),
+    "/@zelune/module?file=" + encodeURIComponent("src/screens/ProductDetailScreen.tsx") + "&t=" + Date.now()
+  ), true ? [] : void 0) : __vitePreload(() => import("./ProductDetailScreen-a9PXPTEY.js"), true ? [] : void 0)),
   "Checkout": createIsolatedScreenComponent("Checkout", "src/screens/CheckoutScreen.tsx", (attempt) => attempt > 0 ? __vitePreload(() => import(
     /* @vite-ignore */
-    "/Users/media/Documents/Google Artifact/src/screens/CheckoutScreen.tsx?t=" + Date.now()
-  ), true ? [] : void 0) : __vitePreload(() => import("./CheckoutScreen-6IdrpKgm.js"), true ? [] : void 0)),
+    "/@zelune/module?file=" + encodeURIComponent("src/screens/CheckoutScreen.tsx") + "&t=" + Date.now()
+  ), true ? [] : void 0) : __vitePreload(() => import("./CheckoutScreen-CoLb16nl.js"), true ? [] : void 0)),
   "Profile": createIsolatedScreenComponent("Profile", "src/screens/ProfileScreen.tsx", (attempt) => attempt > 0 ? __vitePreload(() => import(
     /* @vite-ignore */
-    "/Users/media/Documents/Google Artifact/src/screens/ProfileScreen.tsx?t=" + Date.now()
-  ), true ? [] : void 0) : __vitePreload(() => import("./ProfileScreen-riAU6vVh.js"), true ? [] : void 0))
+    "/@zelune/module?file=" + encodeURIComponent("src/screens/ProfileScreen.tsx") + "&t=" + Date.now()
+  ), true ? [] : void 0) : __vitePreload(() => import("./ProfileScreen-ChKW9gJP.js"), true ? [] : void 0))
 };
 const BUILTIN_SCREEN_ORDER = ["Login", "Home", "ProductDetail", "Checkout", "Profile"];
 function buildRuntimeScreenRegistry() {
@@ -40062,6 +40148,15 @@ function buildRuntimeScreenRegistry() {
 const __registry = buildRuntimeScreenRegistry();
 const SCREEN_COMPONENTS = __registry.components;
 const SCREEN_ORDER = __registry.order;
+function getDynamicScreenComponent(screenId, filePath) {
+  if (SCREEN_COMPONENTS[screenId]) return SCREEN_COMPONENTS[screenId];
+  const comp = createIsolatedScreenComponent(screenId, filePath, () => __vitePreload(() => import(
+    /* @vite-ignore */
+    "/@zelune/module?file=" + encodeURIComponent(filePath) + "&t=" + Date.now()
+  ), true ? [] : void 0));
+  SCREEN_COMPONENTS[screenId] = comp;
+  return comp;
+}
 class ScreenErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -40138,11 +40233,11 @@ class ScreenErrorBoundary extends React.Component {
   }
 }
 function findNearestAgyElement(target, container) {
-  var _a, _b;
+  var _a2, _b;
   if (!target || !(target instanceof HTMLElement) || !container) return null;
   let curr = target;
   while (curr && curr !== container && container.contains(curr)) {
-    if (((_a = curr.dataset) == null ? void 0 : _a.agyAstPath) && ((_b = curr.dataset) == null ? void 0 : _b.agyFile)) {
+    if (((_a2 = curr.dataset) == null ? void 0 : _a2.agyAstPath) && ((_b = curr.dataset) == null ? void 0 : _b.agyFile)) {
       return curr;
     }
     curr = curr.parentElement;
@@ -40171,7 +40266,7 @@ const ScreenArtboard = React.memo(({
   onPatchElement,
   onReorderElement
 }) => {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   const viewportRef = reactExports.useRef(null);
   const inlineInputRef = reactExports.useRef(null);
   const [hoverBox, setHoverBox] = reactExports.useState(null);
@@ -40187,7 +40282,7 @@ const ScreenArtboard = React.memo(({
   const prevSelectionKeyRef = reactExports.useRef(null);
   const isSelectedOnThisScreen = Boolean(selectedElement) && (selectedElement == null ? void 0 : selectedElement.screenId) === screen.id;
   const activeInspected = isSelectedOnThisScreen && inspectedElement && inspectedElement.astPath === (selectedElement == null ? void 0 : selectedElement.astPath) ? inspectedElement : null;
-  const isAbsolutePositioned = ((_a = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a.position) === "absolute";
+  const isAbsolutePositioned = ((_a2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a2.position) === "absolute";
   const getSelectedDomNode = reactExports.useCallback(() => {
     const container = viewportRef.current;
     if (!container || !selectedElement || selectedElement.screenId !== screen.id) {
@@ -40252,11 +40347,11 @@ const ScreenArtboard = React.memo(({
   }, [isEditingInlineText]);
   const startInlineTextEdit = reactExports.useCallback(
     (explicitDomEl) => {
-      var _a2, _b2, _c2;
+      var _a3, _b2, _c2;
       const domEl = explicitDomEl ?? getSelectedDomNode();
       if (!domEl) return;
       const domTag = domEl.dataset.agyTag || "";
-      const isDomTextNode = domTag === "Text" || domTag.endsWith(".Text") || domEl.querySelectorAll("[data-agy-ast-path]").length === 0 && Boolean((_a2 = domEl.textContent) == null ? void 0 : _a2.trim());
+      const isDomTextNode = domTag === "Text" || domTag.endsWith(".Text") || domEl.querySelectorAll("[data-agy-ast-path]").length === 0 && Boolean((_a3 = domEl.textContent) == null ? void 0 : _a3.trim());
       if (activeInspected && activeInspected.astPath === domEl.dataset.agyAstPath) {
         if (!activeInspected.isTextEditable && !isDomTextNode) return;
         const initialVal2 = activeInspected.textContent ?? ((_b2 = domEl.textContent) == null ? void 0 : _b2.trim()) ?? "";
@@ -40316,7 +40411,7 @@ const ScreenArtboard = React.memo(({
     window.addEventListener("pointerup", handlePointerUp);
   };
   const handleResizePointerDown = (e, dir) => {
-    var _a2, _b2;
+    var _a3, _b2;
     if (e.button !== 0 || !selectedBox || !selectedElement) return;
     e.stopPropagation();
     e.preventDefault();
@@ -40325,7 +40420,7 @@ const ScreenArtboard = React.memo(({
     const startClientX = e.clientX;
     const startClientY = e.clientY;
     const initialBox = { ...selectedBox };
-    const initialLeft = Number(((_a2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a2.left) ?? initialBox.left);
+    const initialLeft = Number(((_a3 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a3.left) ?? initialBox.left);
     const initialTop = Number(((_b2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _b2.top) ?? initialBox.top);
     let parentInnerWidth = position.width;
     if (targetDomEl.parentElement) {
@@ -40412,7 +40507,7 @@ const ScreenArtboard = React.memo(({
     window.addEventListener("pointercancel", handlePointerUp);
   };
   const handleRadiusPointerDown = (e, corner) => {
-    var _a2;
+    var _a3;
     if (e.button !== 0 || !selectedBox || !selectedElement) return;
     e.stopPropagation();
     e.preventDefault();
@@ -40420,7 +40515,7 @@ const ScreenArtboard = React.memo(({
     if (!targetDomEl) return;
     const startClientX = e.clientX;
     const startClientY = e.clientY;
-    const initialRadius = Number(((_a2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a2.borderRadius) ?? 0) || 0;
+    const initialRadius = Number(((_a3 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a3.borderRadius) ?? 0) || 0;
     const maxRadius = Math.max(0, Math.round(Math.min(selectedBox.width, selectedBox.height) / 2));
     setActiveGizmoAction("radius");
     let nextRadius = initialRadius;
@@ -40457,13 +40552,13 @@ const ScreenArtboard = React.memo(({
   };
   const startMoveElementInteraction = reactExports.useCallback(
     (startClientX, startClientY, initialAltKey) => {
-      var _a2, _b2, _c2;
+      var _a3, _b2, _c2;
       if (!selectedBox || !selectedElement) return;
       const targetDomEl = getSelectedDomNode();
       const container = viewportRef.current;
       if (!targetDomEl || !container) return;
       const initialBox = { ...selectedBox };
-      const initialLeft = Number(((_a2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a2.left) ?? initialBox.left);
+      const initialLeft = Number(((_a3 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _a3.left) ?? initialBox.left);
       const initialTop = Number(((_b2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _b2.top) ?? initialBox.top);
       const initialMarginTop = Number(((_c2 = activeInspected == null ? void 0 : activeInspected.styles) == null ? void 0 : _c2.marginTop) ?? 0) || 0;
       const prevTransform = targetDomEl.style.transform;
@@ -40540,8 +40635,8 @@ const ScreenArtboard = React.memo(({
         const pointerY = (moveEvent.clientY - containerRect.top) / zoom;
         const siblings = Array.from(parentEl.children).filter(
           (child) => {
-            var _a3;
-            return child instanceof HTMLElement && child !== targetDomEl && Boolean((_a3 = child.dataset) == null ? void 0 : _a3.agyAstPath);
+            var _a4;
+            return child instanceof HTMLElement && child !== targetDomEl && Boolean((_a4 = child.dataset) == null ? void 0 : _a4.agyAstPath);
           }
         );
         if (siblings.length === 0) {
@@ -42868,8 +42963,8 @@ const InspectorPanel = ({
                   type: "button",
                   className: "zelune-interactive",
                   onClick: () => {
-                    var _a;
-                    return (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+                    var _a2;
+                    return (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
                   },
                   style: {
                     display: "flex",
@@ -42977,8 +43072,8 @@ const InspectorPanel = ({
                             type: "button",
                             className: "zelune-interactive",
                             onClick: () => {
-                              var _a;
-                              return (_a = dialogRef.current) == null ? void 0 : _a.close();
+                              var _a2;
+                              return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
                             },
                             style: {
                               background: "transparent",
@@ -43054,8 +43149,8 @@ const InspectorPanel = ({
                             type: "button",
                             className: "zelune-interactive",
                             onClick: () => {
-                              var _a;
-                              return (_a = dialogRef.current) == null ? void 0 : _a.close();
+                              var _a2;
+                              return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
                             },
                             style: {
                               padding: "8px 13px",
@@ -43279,10 +43374,10 @@ const CanvasApp = () => {
         const sorted = sortScreensByOrder(screensJson.screens);
         setScreens(sorted);
         setActiveScreenId((prev) => {
-          var _a;
+          var _a2;
           if (prev && sorted.some((s2) => s2.id === prev)) return prev;
           const home = sorted.find((s2) => s2.id.toLowerCase() === "home");
-          return home ? home.id : ((_a = sorted[0]) == null ? void 0 : _a.id) ?? null;
+          return home ? home.id : ((_a2 = sorted[0]) == null ? void 0 : _a2.id) ?? null;
         });
         if (screensJson.history) {
           setHistoryState(screensJson.history);
@@ -43428,7 +43523,7 @@ const CanvasApp = () => {
   );
   const handleInsertElement = reactExports.useCallback(
     async (payload) => {
-      var _a;
+      var _a2;
       setIsSaving(true);
       setStatusMessage(null);
       try {
@@ -43441,7 +43536,7 @@ const CanvasApp = () => {
         if (data.ok && data.element) {
           setInspectedData(data.element);
           if (data.history) setHistoryState(data.history);
-          const ownerScreen = ((_a = screens.find((s2) => s2.filePath === data.element.file)) == null ? void 0 : _a.id) ?? activeScreenId ?? "Home";
+          const ownerScreen = ((_a2 = screens.find((s2) => s2.filePath === data.element.file)) == null ? void 0 : _a2.id) ?? activeScreenId ?? "Home";
           setSelectedElement({
             screenId: ownerScreen,
             file: data.element.file,
@@ -43994,35 +44089,6 @@ const CanvasApp = () => {
                       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "zelune-reveal-label", children: "Flow Graph" })
                     ]
                   }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "zelune-interactive",
-                    onClick: () => {
-                      setIsRightPanelOpen(true);
-                      window.dispatchEvent(new CustomEvent("zelune:open-insert-palette"));
-                    },
-                    title: "Add Button, Section, Input, or Component to Active Screen",
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: 5,
-                      padding: "6px 10px",
-                      borderRadius: 7,
-                      border: "1px solid rgba(56, 189, 248, 0.4)",
-                      backgroundColor: "rgba(56, 189, 248, 0.12)",
-                      color: colorScheme === "dark" ? "#38BDF8" : "#0284C7",
-                      fontSize: 12,
-                      fontWeight: 600,
-                      cursor: "pointer"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { size: 14, style: { flexShrink: 0 } }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Add Element" })
-                    ]
-                  }
                 )
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
@@ -44543,7 +44609,7 @@ const CanvasApp = () => {
                           width: DEFAULT_WIDTH,
                           height: DEFAULT_HEIGHT
                         };
-                        const ScreenComponent = SCREEN_COMPONENTS[screen.id];
+                        const ScreenComponent = SCREEN_COMPONENTS[screen.id] ?? getDynamicScreenComponent(screen.id, screen.filePath);
                         const isSelectedScreen = (selectedElement == null ? void 0 : selectedElement.screenId) === screen.id;
                         return /* @__PURE__ */ jsxRuntimeExports.jsx(
                           ScreenArtboard,
@@ -44607,12 +44673,13 @@ const CanvasApp = () => {
 if (typeof window !== "undefined") {
   window.__ZELUNE_RUNTIME__ = {
     React,
-    ReactDOM,
+    ReactDOM: { ...ReactDOMBase, ...ReactDOMClient },
     ReactNative: ReactNativeShim,
     MockNav: MockNavShim,
     LucideIcons
   };
 }
+const ReactDOM = ReactDOMClient;
 class StudioRootErrorBoundary extends React.Component {
   constructor() {
     super(...arguments);

package/dist/index.html

@@ -12,7 +12,7 @@
       } catch {}
     </script>
     <title>Zelune — React Native Visual Canvas &amp; AST Studio</title>
-    <script type="module" crossorigin src="/assets/index-hEzd4JVy.js"></script>
+    <script type="module" crossorigin src="/assets/index-xam7XuSg.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C7nrS82N.css">
   </head>
   <body>