@nuraly/runtime 0.1.7 → 0.1.8

package/dist/{index-B4yIOSMd.js → BaseElement-BNBn_IJk.js}

@@ -1,13 +1,15 @@
-import { Subject, Observable } from 'rxjs';
-import Database from '@nuraly/dbclient';
-import * as acorn from 'acorn';
-import * as walk from 'acorn-walk';
+import { css, LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef } from 'lit/directives/ref.js';
 import { v4 } from 'uuid';
-import deepEqual from 'fast-deep-equal';
-import { atom, deepMap, keepMount, onMount, computed, onNotify } from 'nanostores';
-import { persistentAtom } from '/Users/aymen/Desktop/projects/nuraly/stack/services/studio/node_modules/@nanostores/persistent/index.js';
-import { html } from 'lit';
+import { Subject, Observable, Subscription } from 'rxjs';
 import { share } from 'rxjs/operators';
+import { atom, deepMap, keepMount, onMount, computed, onNotify } from 'nanostores';
+import { persistentAtom } from '/home/runner/work/runtime/runtime/node_modules/@nanostores/persistent/index.js';
+import deepEqual from 'fast-deep-equal';
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const isServer$4 = typeof window === "undefined";
 if (!isServer$4) {
@@ -157,6 +159,19 @@ class EventDispatcher {
     this.subjects = {};
     this.subscriptions = {};
     this.globalEventSubject = new Subject();
+    // Batching state
+    this.pendingEvents = /* @__PURE__ */ new Map();
+    this.batchScheduled = false;
+    this.batchingEnabled = true;
+    // Events that should always be batched (high-frequency property changes)
+    this.batchableEventPatterns = [
+      /^component-property-changed:/,
+      /^microapp:.*:component-property-changed:/,
+      /^Vars:/,
+      /^microapp:.*:Vars:/,
+      /^component:value:set:/,
+      /^microapp:.*:component-instance-changed:/
+    ];
     this.allEvents$ = this.globalEventSubject.asObservable().pipe(share());
   }
   static getInstance() {
@@ -190,16 +205,97 @@ class EventDispatcher {
       this.subscriptions[event].delete(listener);
     }
   }
-  emit(event, data) {
+  /**
+   * Check if an event should be batched based on patterns
+   */
+  shouldBatch(event) {
+    if (!this.batchingEnabled) return false;
+    return this.batchableEventPatterns.some((pattern) => pattern.test(event));
+  }
+  /**
+   * Flush all pending batched events
+   */
+  flushBatch() {
+    const events = Array.from(this.pendingEvents.values());
+    this.pendingEvents.clear();
+    for (const { event, data } of events) {
+      this.emitImmediate(event, data);
+    }
+    this.batchScheduled = false;
+    if (this.pendingEvents.size > 0) {
+      this.batchScheduled = true;
+      queueMicrotask(() => this.flushBatch());
+    }
+  }
+  /**
+   * Emit an event immediately without batching
+   */
+  emitImmediate(event, data) {
     this.getSubject(event).next(data);
     this.globalEventSubject.next({ eventName: event, data });
   }
+  /**
+   * Emit an event, with automatic batching for high-frequency events.
+   *
+   * For events matching batchable patterns (property changes, variable updates),
+   * multiple rapid emissions are coalesced into a single microtask.
+   *
+   * This prevents UI jank when many properties are updated in quick succession.
+   *
+   * @param event - Event name
+   * @param data - Event data
+   */
+  emit(event, data) {
+    if (this.shouldBatch(event)) {
+      this.pendingEvents.set(event, { event, data });
+      if (!this.batchScheduled) {
+        this.batchScheduled = true;
+        queueMicrotask(() => this.flushBatch());
+      }
+    } else {
+      this.emitImmediate(event, data);
+    }
+  }
+  /**
+   * Force immediate emission, bypassing batching.
+   * Use this when you need synchronous event delivery.
+   *
+   * @param event - Event name
+   * @param data - Event data
+   */
+  emitSync(event, data) {
+    this.emitImmediate(event, data);
+  }
+  /**
+   * Enable or disable batching globally.
+   * Useful for debugging or when synchronous updates are required.
+   *
+   * @param enabled - Whether batching should be enabled
+   */
+  setBatchingEnabled(enabled) {
+    this.batchingEnabled = enabled;
+  }
+  /**
+   * Check if batching is currently enabled
+   */
+  isBatchingEnabled() {
+    return this.batchingEnabled;
+  }
+  /**
+   * Manually flush any pending batched events.
+   * Useful when you need to force updates before an operation.
+   */
+  flushPendingEvents() {
+    if (this.pendingEvents.size > 0) {
+      this.flushBatch();
+    }
+  }
 }
 const eventDispatcher = EventDispatcher.getInstance();
 
 const isServer$1 = typeof window === "undefined";
 const initialStates = isServer$1 ? [] : JSON.parse(window["__INITIAL_COMPONENT_STATE__"] ?? "[]");
-const initialState$1 = isServer$1 ? {} : {};
+const initialState$1 = {};
 if (currentLoadedApplication) {
   initialState$1[currentLoadedApplication.uuid] = initialStates;
 }
@@ -264,14 +360,11 @@ const setComponentRuntimeValue = (componentId, key, value) => {
   if (!componentId) {
     console.error("Cannot set runtime value: componentId is undefined");
     return;
-  } else {
-    console.log("setComponentRuntimeValue", componentId, key, value);
   }
   $runtimeValues.setKey(componentId, {
     ...$runtimeValues.get()[componentId],
     [key]: value
   });
-  console.log($runtimeValues.get()[componentId]);
   eventDispatcher.emit("component:value:change", {
     componentId,
     key,
@@ -993,9 +1086,321 @@ function validateComponentHandlers(component) {
   };
 }
 
+const RESERVED_NAMES = /* @__PURE__ */ new Set([
+  // Core runtime parameters
+  "eventHandler",
+  "Components",
+  "Editor",
+  "Event",
+  "Item",
+  "Current",
+  "currentPlatform",
+  "Values",
+  "Apps",
+  "Vars",
+  "Instance",
+  // Namespaced APIs (new clean API)
+  "Nav",
+  "UI",
+  "Component",
+  "Data",
+  "Page",
+  "App",
+  "Var",
+  // Variable functions
+  "SetVar",
+  "GetContextVar",
+  "GetVar",
+  "SetContextVar",
+  // Component functions
+  "GetComponent",
+  "GetComponents",
+  "AddComponent",
+  "DeleteComponentAction",
+  "CopyComponentToClipboard",
+  "PasteComponentFromClipboard",
+  // Application functions
+  "UpdateApplication",
+  "context",
+  "applications",
+  // Page functions
+  "AddPage",
+  "UpdatePage",
+  "deletePage",
+  // Navigation functions
+  "NavigateToUrl",
+  "NavigateToHash",
+  "NavigateToPage",
+  // Property update functions
+  "updateInput",
+  "updateName",
+  "updateEvent",
+  "updateStyle",
+  "updateStyleHandlers",
+  // Editor functions
+  "openEditorTab",
+  "setCurrentEditorTab",
+  "TraitCompoentFromSchema",
+  // Other functions
+  "InvokeFunction",
+  "Utils",
+  "console",
+  "UploadFile",
+  "BrowseFiles",
+  "EventData",
+  // Toast functions
+  "ShowToast",
+  "ShowSuccessToast",
+  "ShowErrorToast",
+  "ShowWarningToast",
+  "ShowInfoToast",
+  "HideToast",
+  "ClearAllToasts",
+  // JavaScript built-ins that must be preserved
+  "undefined",
+  "null",
+  "true",
+  "false",
+  "NaN",
+  "Infinity",
+  "globalThis",
+  "window",
+  "self",
+  // Common globals
+  "Math",
+  "JSON",
+  "Date",
+  "Array",
+  "Object",
+  "String",
+  "Number",
+  "Boolean",
+  "RegExp",
+  "Error",
+  "TypeError",
+  "ReferenceError",
+  "SyntaxError",
+  "Promise",
+  "Map",
+  "Set",
+  "WeakMap",
+  "WeakSet",
+  "Symbol",
+  "Proxy",
+  "Reflect",
+  "parseInt",
+  "parseFloat",
+  "isNaN",
+  "isFinite",
+  "encodeURI",
+  "decodeURI",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "setTimeout",
+  "setInterval",
+  "clearTimeout",
+  "clearInterval",
+  "fetch",
+  "Request",
+  "Response",
+  "Headers",
+  "URL",
+  "URLSearchParams",
+  "FormData",
+  "Blob",
+  "File",
+  "FileReader",
+  "atob",
+  "btoa",
+  "crypto",
+  "performance",
+  "queueMicrotask",
+  "requestAnimationFrame",
+  "cancelAnimationFrame",
+  // Control flow keywords (not variables but good to have)
+  "arguments",
+  "this"
+]);
+function isReactiveVar(prop) {
+  return prop.startsWith("$") && prop.length > 1;
+}
+function stripPrefix(prop) {
+  return prop.slice(1);
+}
+function createHandlerScope(config) {
+  const { VarsProxy, parameters } = config;
+  return new Proxy(parameters, {
+    /**
+     * The `has` trap is critical for `with` statement behavior.
+     * We claim to have:
+     * - All reserved names (handler parameters)
+     * - All $-prefixed names (reactive variables)
+     */
+    has(target, prop) {
+      const propStr = String(prop);
+      if (RESERVED_NAMES.has(propStr)) {
+        return true;
+      }
+      if (isReactiveVar(propStr)) {
+        return true;
+      }
+      if (propStr in target) {
+        return true;
+      }
+      return false;
+    },
+    /**
+     * Get property value.
+     * - Reserved names get their actual values
+     * - $-prefixed names get from VarsProxy (without the $ prefix)
+     * - Other names shouldn't reach here (has() returns false)
+     */
+    get(target, prop, receiver) {
+      const propStr = String(prop);
+      if (typeof prop === "symbol") {
+        return target[prop];
+      }
+      if (isReactiveVar(propStr)) {
+        const varName = stripPrefix(propStr);
+        return VarsProxy[varName];
+      }
+      if (RESERVED_NAMES.has(propStr)) {
+        if (propStr in target) {
+          return target[propStr];
+        }
+        if (propStr in globalThis) {
+          const value = globalThis[propStr];
+          if (typeof value === "function" && ["fetch", "setTimeout", "setInterval", "clearTimeout", "clearInterval", "requestAnimationFrame", "cancelAnimationFrame", "queueMicrotask"].includes(propStr)) {
+            return value.bind(globalThis);
+          }
+          return value;
+        }
+        return void 0;
+      }
+      if (propStr in target) {
+        return target[propStr];
+      }
+      return void 0;
+    },
+    /**
+     * Set property value.
+     * - $-prefixed names set to VarsProxy (without the $ prefix)
+     * - Reserved names update actual values
+     * - Other names shouldn't reach here
+     */
+    set(target, prop, value, receiver) {
+      const propStr = String(prop);
+      if (typeof prop === "symbol") {
+        target[prop] = value;
+        return true;
+      }
+      if (isReactiveVar(propStr)) {
+        const varName = stripPrefix(propStr);
+        VarsProxy[varName] = value;
+        return true;
+      }
+      if (RESERVED_NAMES.has(propStr) && propStr in globalThis) {
+        if (propStr in target) {
+          target[propStr] = value;
+          return true;
+        }
+        return true;
+      }
+      if (propStr in target && RESERVED_NAMES.has(propStr)) {
+        target[propStr] = value;
+        return true;
+      }
+      target[propStr] = value;
+      return true;
+    },
+    /**
+     * Property descriptor for iteration support
+     */
+    getOwnPropertyDescriptor(target, prop) {
+      const propStr = String(prop);
+      if (isReactiveVar(propStr)) {
+        const varName = stripPrefix(propStr);
+        if (varName in VarsProxy) {
+          return {
+            configurable: true,
+            enumerable: true,
+            value: VarsProxy[varName],
+            writable: true
+          };
+        }
+        return {
+          configurable: true,
+          enumerable: true,
+          value: void 0,
+          writable: true
+        };
+      }
+      if (propStr in target) {
+        return Object.getOwnPropertyDescriptor(target, propStr);
+      }
+      return void 0;
+    }
+  });
+}
+
+const CONTROL_FLOW_TYPES = /* @__PURE__ */ new Set([
+  "IfStatement",
+  "ForStatement",
+  "ForInStatement",
+  "ForOfStatement",
+  "WhileStatement",
+  "DoWhileStatement",
+  "SwitchStatement",
+  "TryStatement",
+  "ThrowStatement"
+]);
+function analyzeCode(code) {
+  const trimmed = code.trim();
+  if (!trimmed) {
+    return { hasTopLevelReturn: false, hasControlFlow: false, isMultiStatement: false };
+  }
+  try {
+    const wrappedCode = `(function() { ${trimmed} })`;
+    const ast = acorn.parse(wrappedCode, {
+      ecmaVersion: "latest",
+      sourceType: "script"
+    });
+    const funcExpr = ast.body[0].expression;
+    const bodyStatements = funcExpr.body.body;
+    let hasTopLevelReturn = false;
+    let hasControlFlow = false;
+    const isMultiStatement = bodyStatements.length > 1;
+    for (const stmt of bodyStatements) {
+      if (stmt.type === "ReturnStatement") {
+        hasTopLevelReturn = true;
+      }
+      if (CONTROL_FLOW_TYPES.has(stmt.type)) {
+        hasControlFlow = true;
+      }
+    }
+    return { hasTopLevelReturn, hasControlFlow, isMultiStatement };
+  } catch {
+    return { hasTopLevelReturn: true, hasControlFlow: false, isMultiStatement: false };
+  }
+}
+function needsImplicitReturn(code) {
+  const trimmed = code.trim();
+  if (!trimmed) return false;
+  const analysis = analyzeCode(trimmed);
+  if (analysis.hasTopLevelReturn) return false;
+  if (analysis.hasControlFlow) return false;
+  if (analysis.isMultiStatement) return false;
+  return true;
+}
+function wrapWithImplicitReturn(code) {
+  if (needsImplicitReturn(code)) {
+    const trimmed = code.trim().replace(/;$/, "");
+    return `return (${trimmed});`;
+  }
+  return code;
+}
 const handlerFunctionCache = {};
 const HANDLER_PARAMETERS = [
-  "Database",
   "eventHandler",
   "Components",
   "Editor",
@@ -1023,7 +1428,6 @@ const HANDLER_PARAMETERS = [
   "context",
   "applications",
   "updateInput",
-  "updateInputHandlers",
   "deletePage",
   "CopyComponentToClipboard",
   "PasteComponentFromClipboard",
@@ -1047,20 +1451,55 @@ const HANDLER_PARAMETERS = [
   "ShowWarningToast",
   "ShowInfoToast",
   "HideToast",
-  "ClearAllToasts"
+  "ClearAllToasts",
+  "__createScope__",
+  // For transparent variable access
+  // Namespaced API object (new clean API)
+  "Nav",
+  "UI",
+  "Component",
+  "Data",
+  "Page",
+  "App",
+  "Var"
 ];
 function compileHandlerFunction(code) {
-  if (!handlerFunctionCache[code]) {
+  const cacheKey = `scope:${code}` ;
+  if (!handlerFunctionCache[cacheKey]) {
     const validationResult = validateHandlerCode(code);
     if (!validationResult.valid) {
       throw new Error(`Handler validation failed: ${validationResult.errors[0]?.message || "Unknown error"}`);
     }
-    handlerFunctionCache[code] = new Function(
-      ...HANDLER_PARAMETERS,
-      `return (function() { ${code} }).apply(this);`
-    );
+    const processedCode = wrapWithImplicitReturn(code);
+    {
+      handlerFunctionCache[cacheKey] = new Function(
+        ...HANDLER_PARAMETERS,
+        `
+        var __scope__ = __createScope__({
+          VarsProxy: Vars,
+          parameters: {
+            eventHandler: eventHandler, Components, Editor, Event, Item,
+            Current, currentPlatform, Values, Apps, Vars, SetVar, GetContextVar,
+            UpdateApplication, GetVar, GetComponent, GetComponents, AddComponent,
+            SetContextVar, AddPage, TraitCompoentFromSchema, NavigateToUrl,
+            NavigateToHash, NavigateToPage, UpdatePage, context, applications,
+            updateInput, deletePage, CopyComponentToClipboard, PasteComponentFromClipboard,
+            DeleteComponentAction, updateName, updateEvent, updateStyleHandlers,
+            EventData, updateStyle, openEditorTab, setCurrentEditorTab, InvokeFunction,
+            Utils, console, UploadFile, BrowseFiles, Instance, ShowToast,
+            ShowSuccessToast, ShowErrorToast, ShowWarningToast, ShowInfoToast,
+            HideToast, ClearAllToasts,
+            Nav, UI, Component, Data, Page, App, Var
+          }
+        });
+        with (__scope__) {
+          return (function() { ${processedCode} }).apply(this);
+        }
+        `
+      );
+    }
   }
-  return handlerFunctionCache[code];
+  return handlerFunctionCache[cacheKey];
 }
 
 const observe = (o, f) => new Proxy(o, {
@@ -1089,18 +1528,19 @@ function setupRuntimeContext(context, component, EventData = {}) {
   }
   context.Event = EventData.event;
   context.Current.style = context.Current.style ?? {};
-  if (!context.styleProxyCache.has(context.Current.style)) {
-    const newProxy = observe(context.Current.style, (target, prop, value) => {
+  const originalStyle = context.Current.style;
+  if (context.styleProxyCache.has(originalStyle)) {
+    context.Current.style = context.styleProxyCache.get(originalStyle);
+  } else {
+    const newProxy = observe(originalStyle, (target, prop, value) => {
       context.setComponentRuntimeStyleAttribute(
         context.Current.uniqueUUID,
         prop,
         value
       );
     });
+    context.styleProxyCache.set(originalStyle, newProxy);
     context.Current.style = newProxy;
-    context.styleProxyCache.set(context.Current.style, newProxy);
-  } else {
-    context.Current.style = context.styleProxyCache.get(context.Current.style);
   }
 }
 function extractRuntimeContext(context) {
@@ -1461,6 +1901,13 @@ var ComponentType = /* @__PURE__ */ ((ComponentType2) => {
   ComponentType2["Modal"] = "Modal";
   ComponentType2["Toast"] = "Toast";
   ComponentType2["Panel"] = "Panel";
+  ComponentType2["GridRow"] = "grid-row-block";
+  ComponentType2["GridCol"] = "grid-col-block";
+  ComponentType2["Form"] = "form";
+  ComponentType2["ValidationRules"] = "validation_rules";
+  ComponentType2["BorderManager"] = "border_manager";
+  ComponentType2["AccessRoles"] = "access_roles";
+  ComponentType2["FunctionsPanel"] = "FunctionsPanel";
   return ComponentType2;
 })(ComponentType || {});
 
@@ -1719,11 +2166,19 @@ const addComponentAction = (component, pageUUID, currentApplicationId, updatePar
     childrenIds: component.childrenIds ?? []
     // Initialize childrenIds if necessary
   };
-  if (!currentComponentId || currentComponent?.component_type !== ComponentType.Container && currentComponent?.component_type !== ComponentType.Collection && currentComponent?.component_type !== ComponentType.Link) {
+  const containerTypes = [
+    ComponentType.Container,
+    ComponentType.Collection,
+    ComponentType.Link,
+    ComponentType.GridRow,
+    ComponentType.GridCol,
+    ComponentType.Form
+  ];
+  if (!currentComponentId || !containerTypes.includes(currentComponent?.component_type)) {
     newComponent.root = true;
   }
   if (currentComponentId) {
-    if (currentComponent?.component_type === ComponentType.Container || currentComponent?.component_type === ComponentType.Dropdown || currentComponent?.component_type === ComponentType.Link || currentComponent?.component_type === ComponentType.Collection) {
+    if (currentComponent?.component_type === ComponentType.Container || currentComponent?.component_type === ComponentType.Dropdown || currentComponent?.component_type === ComponentType.Link || currentComponent?.component_type === ComponentType.Collection || currentComponent?.component_type === ComponentType.GridRow || currentComponent?.component_type === ComponentType.GridCol || currentComponent?.component_type === ComponentType.Form) {
       if (updateParent) {
         const parentComponent = components.find((comp) => comp.uuid === currentComponentId);
         if (parentComponent) {
@@ -1922,7 +2377,6 @@ function moveDraggedComponent(dropInComponentId, draggedComponentId, position =
   updatePageAction(page, appUUID);
   updatePageHandler(page);
   eventDispatcher.emit("component:refresh");
-  console.log(`Moved ${draggedComponent.uuid} to ${position} ${dropInComponentId}`, draggedComponent);
 }
 
 function setCurrentComponentIdAction(componentId) {
@@ -1939,10 +2393,6 @@ function setDraggingComponentInfo(draggingComponentInfo) {
   }
 }
 
-function setHoveredComponentAction(component) {
-  $hoveredComponent.set(component);
-}
-
 function updateComponentName(application_id, componentId, updatedName, save = true) {
   const componentsStore = $components.get();
   const applicationComponents = componentsStore[application_id] || [];
@@ -1965,7 +2415,7 @@ function updateComponentName(application_id, componentId, updatedName, save = tr
         setVar(key, `${key}.appPages`, pagesStore[key]);
         ExecuteInstance.VarsProxy[`${key}.appPages`] = [...pagesStore[key]];
       });
-      eventDispatcher.emit("component:updated");
+      eventDispatcher.emit("component:updated", { uuid: componentId });
       refreshPageStoreVar();
     }
   }
@@ -1984,9 +2434,7 @@ ${errors.map(
 
 function updateComponentAttributes(application_id, componentId, updateType, updatedAttributes, save = true) {
   const currentPlatform = ExecuteInstance.Vars.currentPlatform ?? {
-    platform: "desktop",
-    isMobile: false
-  };
+    platform: "desktop"};
   const componentsStore = $components.get();
   const applicationComponents = componentsStore[application_id] || [];
   const componentIndex = applicationComponents.findIndex(
@@ -2025,7 +2473,8 @@ function updateComponentAttributes(application_id, componentId, updateType, upda
         hasUpdateType: hasOriginalUpdateType,
         hasBreakpoints: hasOriginalBreakpoints
       };
-      if ((updateType === "style" || updateType === "input" && updatedAttributes.type !== "handler") && currentPlatform.platform !== "desktop") {
+      const hasHandlerAttribute = updateType === "input" && Object.values(updatedAttributes).some((attr) => attr && typeof attr === "object" && attr.type === "handler");
+      if ((updateType === "style" || updateType === "input" && !hasHandlerAttribute) && currentPlatform.platform !== "desktop") {
         componentToUpdate.breakpoints = componentToUpdate.breakpoints || {};
         componentToUpdate.breakpoints[currentPlatform.width] = componentToUpdate.breakpoints[currentPlatform.width] || {};
         for (const [key, value] of Object.entries(updatedAttributes)) {
@@ -2091,7 +2540,7 @@ function updateComponentAttributes(application_id, componentId, updateType, upda
       if (index !== -1) {
         ExecuteInstance.VarsProxy.selectedComponents[index] = componentToUpdate;
       }
-      eventDispatcher.emit("component:updated");
+      eventDispatcher.emit("component:updated", { uuid: componentId });
       eventDispatcher.emit(`component-updated:${String(componentId)}`);
     }
   }
@@ -2161,10 +2610,14 @@ function generateNuralyClipboardStructure(component, childrenComponents) {
 function transformSchemaWithNewUUIDs(schema) {
   const uuidMap = /* @__PURE__ */ new Map();
   function generateUUID() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
-      const r = Math.random() * 16 | 0, v = c === "x" ? r : r & 3 | 8;
-      return v.toString(16);
-    });
+    if (crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
   }
   schema.components.forEach((component) => {
     const newUUID = generateUUID();
@@ -2173,7 +2626,9 @@ function transformSchemaWithNewUUIDs(schema) {
   });
   schema.components.forEach((component) => {
     component.childrenIds = component.childrenIds.map((oldUUID) => uuidMap.get(oldUUID) || oldUUID);
-    component.name += `_${Math.random().toString(36).substring(2, 6)}`;
+    const randomBytes = crypto.getRandomValues(new Uint8Array(2));
+    const suffix = Array.from(randomBytes, (byte) => byte.toString(36)).join("").substring(0, 4);
+    component.name += `_${suffix}`;
   });
   return schema;
 }
@@ -2186,7 +2641,8 @@ function findRootAndChildren(data) {
 }
 
 const GenerateName = (componentType) => {
-  const randomNumber = Math.floor(Math.random() * 1e4);
+  const randomBytes = crypto.getRandomValues(new Uint32Array(1));
+  const randomNumber = randomBytes[0] % 1e4;
   return `${componentType}_${randomNumber}`;
 };
 
@@ -2251,13 +2707,6 @@ function createComponentPropertyFunctions() {
       const eventData = { [inputName]: { type: handlerType, value: handlerValue } };
       updateComponentAttributes(component.application_id, component.uuid, "input", eventData);
     },
-    /**
-     * Updates component input handlers
-     */
-    updateInputHandlers: (component, inputName, value) => {
-      const eventData = { [inputName]: value };
-      updateComponentAttributes(component.application_id, component.uuid, "inputHandlers", eventData);
-    },
     /**
      * Updates component event handler
      */
@@ -2380,47 +2829,6 @@ function addTempApplication(uuid, components) {
   });
 }
 
-const API_BASE = typeof window === "undefined" ? `http://${process.env.NURALY_SERVICES_HOST || "gateway"}` : "";
-const APIS_URL = {
-  getApplication: (id) => `${API_BASE}/api/applications/${id}`,
-  getApplicationComponents: (id) => `${API_BASE}/api/components/application/${id}`,
-  fetchAllApplications: () => `${API_BASE}/api/applications`,
-  getApplicationPages: (uuid) => `${API_BASE}/api/pages/application/${uuid}`,
-  getPageComponents: (uuid) => `${API_BASE}/api/pages/${uuid}/components`,
-  getApplicationPermission: (application_id, resource_id) => `${API_BASE}/api/permissions/${application_id}/${resource_id}`
-};
-
-const $toasts = deepMap({
-  toasts: []
-});
-
-function showToast(options) {
-  const id = `toast-${v4()}`;
-  const toast = {
-    id,
-    type: "info",
-    duration: 3e3,
-    closable: true,
-    ...options
-  };
-  const current = $toasts.get();
-  $toasts.setKey("toasts", [...current.toasts, toast]);
-  eventDispatcher.emit("toast:show", toast);
-  if (toast.duration && toast.duration > 0) {
-    setTimeout(() => hideToast(id), toast.duration);
-  }
-  return id;
-}
-function hideToast(id) {
-  const current = $toasts.get();
-  $toasts.setKey("toasts", current.toasts.filter((t) => t.id !== id));
-  eventDispatcher.emit("toast:hide", { id });
-}
-function clearAllToasts() {
-  $toasts.setKey("toasts", []);
-  eventDispatcher.emit("toast:clear");
-}
-
 function setApplication(apps) {
   $applications.set(apps);
 }
@@ -2629,16 +3037,22 @@ function createStorageFunctions() {
   };
 }
 
-const invokeFunctionHandler = (functionId, data) => {
-  return fetch(`${FRONT_API_URLS.FUNCTIONS}/invoke/${functionId}`, {
+const invokeFunctionHandler = async (functionId, data) => {
+  const response = await fetch(`${FRONT_API_URLS.FUNCTIONS}/invoke/${functionId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
+    credentials: "include",
     body: JSON.stringify({
       data
     })
   });
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || `Invoke failed with status ${response.status}`);
+  }
+  return response;
 };
 
 const loadFunctionsHandler = async () => {
@@ -2646,7 +3060,8 @@ const loadFunctionsHandler = async () => {
     method: "GET",
     headers: {
       "Content-Type": "application/json"
-    }
+    },
+    credentials: "include"
   }).then((res) => res.json());
 };
 
@@ -2730,45 +3145,204 @@ function createEditorFunctions() {
   };
 }
 
-function createToastFunctions() {
-  return {
-    /**
-     * Shows a toast notification
-     * @param message - The message to display
-     * @param type - Toast type: 'success', 'error', 'warning', 'info' (default: 'info')
-     * @param options - Additional options (duration, closable)
-     * @returns Toast ID for programmatic control
-     *
-     * @example
-     * ShowToast('File saved successfully!', 'success');
-     * ShowToast('Error occurred', 'error', { duration: 5000 });
-     * ShowToast('Processing...', 'info', { duration: 0 }); // No auto-hide
-     */
-    ShowToast: (message, type = "info", options) => {
-      return showToast({
-        message,
-        type,
-        ...options
-      });
-    },
-    /**
-     * Shows a success toast (convenience function)
-     * @param message - Success message
-     * @param duration - Display duration in milliseconds (default: 3000)
-     * @returns Toast ID
-     *
-     * @example
-     * ShowSuccessToast('Operation completed!');
-     */
-    ShowSuccessToast: (message, duration = 3e3) => {
-      return showToast({ message, type: "success", duration });
-    },
-    /**
-     * Shows an error toast (convenience function)
-     * @param message - Error message
-     * @param duration - Display duration in milliseconds (default: 5000)
-     * @returns Toast ID
-     *
+const $toasts = deepMap({
+  toasts: []
+});
+
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+try {
+  await import('@nuralyui/toast');
+} catch (error) {
+  console.warn("[@nuralyui/toast] Package not found or failed to load. Toast functionality may be limited.");
+}
+let toastContainerInstance = null;
+let ToastContainer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.toastElement = null;
+    this.shownToastIds = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Gets or creates the singleton instance
+   * Call this to ensure toast container exists in the DOM
+   */
+  static getInstance() {
+    if (!toastContainerInstance) {
+      toastContainerInstance = new ToastContainer();
+      document.body.appendChild(toastContainerInstance);
+    }
+    return toastContainerInstance;
+  }
+  /**
+   * Checks if container instance exists
+   */
+  static hasInstance() {
+    return toastContainerInstance !== null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (toastContainerInstance && toastContainerInstance !== this) {
+      console.warn("ToastContainer singleton already exists. Removing duplicate instance.");
+      this.remove();
+      return;
+    }
+    toastContainerInstance = this;
+    this.unsubscribe = $toasts.subscribe((state) => {
+      this.processToastUpdates(state.toasts);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (toastContainerInstance === this) {
+      toastContainerInstance = null;
+    }
+    this.unsubscribe?.();
+  }
+  processToastUpdates(toasts) {
+    if (!this.toastElement && this.shadowRoot) {
+      this.toastElement = this.shadowRoot.querySelector("nr-toast");
+    }
+    if (!this.toastElement) {
+      return;
+    }
+    toasts.forEach((toast) => {
+      if (!this.shownToastIds.has(toast.id)) {
+        this.shownToastIds.add(toast.id);
+        this.toastElement.show({
+          text: toast.message,
+          type: toast.type || "info",
+          duration: toast.duration,
+          autoDismiss: toast.duration ? toast.duration > 0 : true,
+          closable: toast.closable !== false,
+          onClose: () => {
+            hideToast(toast.id);
+            this.shownToastIds.delete(toast.id);
+          }
+        });
+      }
+    });
+  }
+  firstUpdated() {
+    this.toastElement = this.shadowRoot?.querySelector("nr-toast");
+  }
+  render() {
+    return html`
+      <nr-toast 
+        position="top-right"
+        stack
+        max-toasts="5"
+      ></nr-toast>
+    `;
+  }
+};
+ToastContainer.styles = css`
+    :host {
+      --nuraly-z-index-toast: 10000;
+    }
+  `;
+ToastContainer = __decorateClass$4([
+  customElement("toast-container")
+], ToastContainer);
+
+let toastIdCounter = 0;
+function generateToastId() {
+  return `toast-${Date.now()}-${++toastIdCounter}`;
+}
+let initialized = false;
+function ensureToastContainer() {
+  if (!initialized && typeof window !== "undefined") {
+    initialized = true;
+    setTimeout(() => {
+      ToastContainer.getInstance();
+    }, 0);
+  }
+}
+function showToast(options) {
+  ensureToastContainer();
+  const id = generateToastId();
+  const toast = {
+    id,
+    type: "info",
+    duration: 3e3,
+    closable: true,
+    ...options
+  };
+  const current = $toasts.get();
+  $toasts.setKey("toasts", [...current.toasts, toast]);
+  eventDispatcher.emit("toast:show", toast);
+  if (toast.duration && toast.duration > 0) {
+    setTimeout(() => hideToast(id), toast.duration);
+  }
+  return id;
+}
+function hideToast(id) {
+  const current = $toasts.get();
+  $toasts.setKey("toasts", current.toasts.filter((t) => t.id !== id));
+  eventDispatcher.emit("toast:hide", { id });
+}
+function clearAllToasts() {
+  $toasts.setKey("toasts", []);
+  eventDispatcher.emit("toast:clear");
+}
+function showSuccess(message, duration = 3e3) {
+  return showToast({ message, type: "success", duration });
+}
+function showError(message, duration = 5e3) {
+  return showToast({ message, type: "error", duration });
+}
+function showWarning(message, duration = 4e3) {
+  return showToast({ message, type: "warning", duration });
+}
+function showInfo(message, duration = 3e3) {
+  return showToast({ message, type: "info", duration });
+}
+
+function createToastFunctions() {
+  return {
+    /**
+     * Shows a toast notification
+     * @param message - The message to display
+     * @param type - Toast type: 'success', 'error', 'warning', 'info' (default: 'info')
+     * @param options - Additional options (duration, closable)
+     * @returns Toast ID for programmatic control
+     *
+     * @example
+     * ShowToast('File saved successfully!', 'success');
+     * ShowToast('Error occurred', 'error', { duration: 5000 });
+     * ShowToast('Processing...', 'info', { duration: 0 }); // No auto-hide
+     */
+    ShowToast: (message, type = "info", options) => {
+      return showToast({
+        message,
+        type,
+        ...options
+      });
+    },
+    /**
+     * Shows a success toast (convenience function)
+     * @param message - Success message
+     * @param duration - Display duration in milliseconds (default: 3000)
+     * @returns Toast ID
+     *
+     * @example
+     * ShowSuccessToast('Operation completed!');
+     */
+    ShowSuccessToast: (message, duration = 3e3) => {
+      return showToast({ message, type: "success", duration });
+    },
+    /**
+     * Shows an error toast (convenience function)
+     * @param message - Error message
+     * @param duration - Display duration in milliseconds (default: 5000)
+     * @returns Toast ID
+     *
      * @example
      * ShowErrorToast('Failed to save file');
      */
@@ -2838,6 +3412,121 @@ function createGlobalHandlerFunctions(runtimeContext) {
   };
 }
 
+function createNavAPI(globalFunctions) {
+  return {
+    toPage: globalFunctions.NavigateToPage,
+    toUrl: (url, target) => {
+      globalFunctions.NavigateToUrl(url, target);
+    },
+    toHash: globalFunctions.NavigateToHash
+  };
+}
+function createUIAPI(globalFunctions) {
+  return {
+    toast: (message, type = "default", duration) => {
+      switch (type) {
+        case "success":
+          globalFunctions.ShowSuccessToast(message, duration);
+          break;
+        case "error":
+          globalFunctions.ShowErrorToast(message, duration);
+          break;
+        case "warning":
+          globalFunctions.ShowWarningToast(message, duration);
+          break;
+        case "info":
+          globalFunctions.ShowInfoToast(message, duration);
+          break;
+        default:
+          globalFunctions.ShowToast(message, duration);
+      }
+    },
+    success: (message, duration) => globalFunctions.ShowSuccessToast(message, duration),
+    error: (message, duration) => globalFunctions.ShowErrorToast(message, duration),
+    warning: (message, duration) => globalFunctions.ShowWarningToast(message, duration),
+    info: (message, duration) => globalFunctions.ShowInfoToast(message, duration),
+    hideToast: globalFunctions.HideToast,
+    clearToasts: globalFunctions.ClearAllToasts
+  };
+}
+function createComponentAPI(globalFunctions) {
+  return {
+    get: globalFunctions.GetComponent,
+    getAll: globalFunctions.GetComponents,
+    add: globalFunctions.AddComponent,
+    delete: globalFunctions.DeleteComponentAction,
+    copy: globalFunctions.CopyComponentToClipboard,
+    paste: globalFunctions.PasteComponentFromClipboard,
+    updateInput: globalFunctions.updateInput,
+    updateName: globalFunctions.updateName,
+    updateEvent: globalFunctions.updateEvent,
+    updateStyle: globalFunctions.updateStyle,
+    updateStyleHandlers: globalFunctions.updateStyleHandlers
+  };
+}
+function createDataAPI(globalFunctions) {
+  return {
+    invoke: globalFunctions.InvokeFunction,
+    upload: globalFunctions.UploadFile,
+    browse: globalFunctions.BrowseFiles
+  };
+}
+function createPageAPI(globalFunctions) {
+  return {
+    add: globalFunctions.AddPage,
+    update: globalFunctions.UpdatePage,
+    delete: globalFunctions.deletePage
+  };
+}
+function createAppAPI(globalFunctions, runtimeContext) {
+  return {
+    update: globalFunctions.UpdateApplication,
+    all: runtimeContext.applications,
+    context: runtimeContext.context
+  };
+}
+function createEditorAPI(globalFunctions, customConsole) {
+  return {
+    openTab: globalFunctions.openEditorTab,
+    setTab: globalFunctions.setCurrentEditorTab,
+    traitFromSchema: globalFunctions.TraitCompoentFromSchema,
+    console: customConsole
+  };
+}
+function createVarAPI(globalFunctions) {
+  return {
+    get: globalFunctions.GetVar,
+    set: globalFunctions.SetVar,
+    getContext: globalFunctions.GetContextVar,
+    setContext: globalFunctions.SetContextVar
+  };
+}
+function createHandlerAPI(runtimeContext, globalFunctions, component, eventData, item, customConsole, eventDispatcher, utils) {
+  return {
+    // Namespaced APIs
+    Nav: createNavAPI(globalFunctions),
+    UI: createUIAPI(globalFunctions),
+    Component: createComponentAPI(globalFunctions),
+    Data: createDataAPI(globalFunctions),
+    Page: createPageAPI(globalFunctions),
+    App: createAppAPI(globalFunctions, runtimeContext),
+    Editor: createEditorAPI(globalFunctions, customConsole),
+    Var: createVarAPI(globalFunctions),
+    // Direct access (commonly used values)
+    Current: runtimeContext.Current,
+    Event: runtimeContext.Event,
+    Item: item,
+    Instance: component.Instance || {},
+    Vars: runtimeContext.VarsProxy,
+    Values: runtimeContext.Values,
+    Apps: runtimeContext.Apps,
+    Platform: runtimeContext.currentPlatform,
+    Events: eventDispatcher,
+    Utils: utils,
+    console: customConsole
+  };
+}
+
 function getContextFromComponent(component) {
   return component?.__microAppContext?.runtimeContext || ExecuteInstance;
 }
@@ -2866,8 +3555,17 @@ function executeHandler(component, code, EventData = {}, item = {}) {
     info: EditorInstance.Console.info,
     debug: EditorInstance.Console.debug
   };
+  const handlerAPI = createHandlerAPI(
+    runtimeContext,
+    globalFunctions,
+    component,
+    EventData,
+    item,
+    customConsole,
+    eventDispatcher,
+    RuntimeHelpers
+  );
   return compiledFunction(
-    Database,
     eventDispatcher,
     runtimeContext.PropertiesProxy,
     EditorInstance,
@@ -2895,7 +3593,6 @@ function executeHandler(component, code, EventData = {}, item = {}) {
     runtimeContext.context,
     runtimeContext.applications,
     globalFunctions.updateInput,
-    globalFunctions.updateInputHandlers,
     globalFunctions.deletePage,
     globalFunctions.CopyComponentToClipboard,
     globalFunctions.PasteComponentFromClipboard,
@@ -2921,10 +3618,41 @@ function executeHandler(component, code, EventData = {}, item = {}) {
     globalFunctions.ShowWarningToast,
     globalFunctions.ShowInfoToast,
     globalFunctions.HideToast,
-    globalFunctions.ClearAllToasts
+    globalFunctions.ClearAllToasts,
+    createHandlerScope,
+    // Namespaced APIs (new clean API)
+    handlerAPI.Nav,
+    handlerAPI.UI,
+    handlerAPI.Component,
+    handlerAPI.Data,
+    handlerAPI.Page,
+    handlerAPI.App,
+    handlerAPI.Var
   );
 }
 
+function safeDeepEqual(oldValue, newValue) {
+  try {
+    return deepEqual(oldValue, newValue);
+  } catch {
+    return false;
+  }
+}
+function buildEventName(eventPrefix, eventType, suffix) {
+  const base = eventPrefix ? `${eventPrefix}:${eventType}` : eventType;
+  return suffix ? `${base}:${suffix}` : base;
+}
+function emitToListeners(listeners, eventPrefix, prop, data) {
+  listeners.forEach((componentName) => {
+    const eventName = buildEventName(eventPrefix, "component-property-changed", componentName);
+    eventDispatcher.emit(eventName, { prop, ...data });
+  });
+}
+function emitScopeEvent(scope, eventPrefix, propPath, data) {
+  if (!scope) return;
+  const eventName = buildEventName(eventPrefix, scope, propPath);
+  eventDispatcher.emit(eventName, data);
+}
 class RuntimeContextHelpers {
   /**
    * Create a reactive proxy for an object with configurable event dispatching.
@@ -2952,16 +3680,12 @@ class RuntimeContextHelpers {
    * ```
    */
   static createReactiveProxy(target, config) {
-    const { eventPrefix, scope, listeners, current, onPropertyChange, debug = false } = config;
+    const { eventPrefix, scope, listeners, current, onPropertyChange } = config;
     if (typeof target !== "object" || target === null) {
       return target;
     }
     return new Proxy(target, {
       get(proxyTarget, prop, receiver) {
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : "[Global]";
-          console.log(`${prefix} Accessing property '${String(prop)}'`);
-        }
         const value = Reflect.get(proxyTarget, prop, receiver);
         if (!listeners[String(prop)]) {
           listeners[String(prop)] = /* @__PURE__ */ new Set();
@@ -2969,43 +3693,29 @@ class RuntimeContextHelpers {
         if (current.name) {
           listeners[String(prop)].add(current.name);
         }
-        if (typeof value === "object" && value !== null) {
+        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
           return RuntimeContextHelpers.createNestedProxy(value, {
             ...config,
             parentProp: String(prop)
           });
         }
+        if (Array.isArray(value)) {
+          return RuntimeContextHelpers.createArrayProxy(value, {
+            ...config,
+            parentProp: String(prop)
+          });
+        }
         return value;
       },
       set(proxyTarget, prop, value, receiver) {
         const oldValue = proxyTarget[prop];
-        let valuesEqual = false;
-        try {
-          valuesEqual = deepEqual(oldValue, value);
-        } catch (e) {
-          valuesEqual = false;
-        }
-        if (valuesEqual) {
+        if (safeDeepEqual(oldValue, value)) {
           return true;
         }
         const result = Reflect.set(proxyTarget, prop, value, receiver);
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : "[Global]";
-          console.log(`${prefix} Setting property '${String(prop)}' to '${value}'`);
-        }
         const propListeners = listeners[String(prop)] || /* @__PURE__ */ new Set();
         onPropertyChange(String(prop), value, propListeners);
-        if (scope) {
-          const eventName = eventPrefix ? `${eventPrefix}:${scope}:${String(prop)}` : `${scope}:${String(prop)}`;
-          if (debug || scope === "Vars" && String(prop) === "selectedComponents") {
-            console.log(`[RuntimeContextHelpers] Emitting event: ${eventName}`, { value, ctx: current });
-          }
-          eventDispatcher.emit(eventName, {
-            value,
-            ctx: current
-            // IMPORTANT: Include ctx for scope events (e.g., Vars:selectedComponents)
-          });
-        }
+        emitScopeEvent(scope, eventPrefix, String(prop), { value, ctx: current });
         return result;
       }
     });
@@ -3021,60 +3731,141 @@ class RuntimeContextHelpers {
    * @returns Reactive proxy for nested object
    */
   static createNestedProxy(target, config) {
-    const { eventPrefix, scope, listeners, current, parentProp, debug = false } = config;
+    const { eventPrefix, scope, listeners, current, parentProp } = config;
     return new Proxy(target, {
+      get(proxyTarget, prop, receiver) {
+        const value = Reflect.get(proxyTarget, prop, receiver);
+        const nestedPropKey = `${parentProp}.${String(prop)}`;
+        if (!listeners[nestedPropKey]) {
+          listeners[nestedPropKey] = /* @__PURE__ */ new Set();
+        }
+        if (current.name) {
+          listeners[nestedPropKey].add(current.name);
+          if (!listeners[parentProp]) {
+            listeners[parentProp] = /* @__PURE__ */ new Set();
+          }
+          listeners[parentProp].add(current.name);
+        }
+        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+          return RuntimeContextHelpers.createNestedProxy(value, {
+            ...config,
+            parentProp: nestedPropKey
+          });
+        }
+        if (Array.isArray(value)) {
+          return RuntimeContextHelpers.createArrayProxy(value, {
+            ...config,
+            parentProp: nestedPropKey
+          });
+        }
+        return value;
+      },
       set(proxyTarget, prop, value, receiver) {
         const oldValue = proxyTarget[prop];
         const result = Reflect.set(proxyTarget, prop, value, receiver);
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : "[Global]";
-          console.log(
-            `${prefix} Updated nested property '${String(prop)}' from '${oldValue}' to '${value}'`
-          );
-        }
-        let valuesEqual = false;
-        try {
-          valuesEqual = deepEqual(oldValue, value);
-        } catch (e) {
-          valuesEqual = false;
+        if (!safeDeepEqual(oldValue, value)) {
+          const parentListeners = listeners[parentProp] || /* @__PURE__ */ new Set();
+          emitToListeners(parentListeners, eventPrefix, parentProp, { value, ctx: current });
+          emitScopeEvent(scope, eventPrefix, `${parentProp}.${String(prop)}`, {
+            prop,
+            value,
+            oldValue,
+            parent: parentProp
+          });
         }
-        if (!valuesEqual) {
+        return result;
+      },
+      deleteProperty(proxyTarget, prop) {
+        const result = Reflect.deleteProperty(proxyTarget, prop);
+        if (result) {
           const parentListeners = listeners[parentProp] || /* @__PURE__ */ new Set();
-          parentListeners.forEach((componentName) => {
-            const eventName = eventPrefix ? `${eventPrefix}:component-property-changed:${componentName}` : `component-property-changed:${componentName}`;
-            eventDispatcher.emit(eventName, {
-              prop: parentProp,
-              value,
+          emitToListeners(parentListeners, eventPrefix, parentProp, { ctx: current });
+        }
+        return result;
+      }
+    });
+  }
+  /**
+   * Create a proxy for arrays that tracks mutation methods.
+   *
+   * Arrays need special handling because methods like push, pop, splice
+   * mutate the array without triggering the set trap.
+   *
+   * @param target - Array to wrap
+   * @param config - Configuration including parent property name
+   * @returns Reactive proxy for array
+   */
+  static createArrayProxy(target, config) {
+    const { eventPrefix, scope, listeners, current, parentProp } = config;
+    const mutationMethods = /* @__PURE__ */ new Set(["push", "pop", "shift", "unshift", "splice", "sort", "reverse", "fill", "copyWithin"]);
+    return new Proxy(target, {
+      get(proxyTarget, prop, receiver) {
+        const value = Reflect.get(proxyTarget, prop, receiver);
+        if (current.name) {
+          if (!listeners[parentProp]) {
+            listeners[parentProp] = /* @__PURE__ */ new Set();
+          }
+          listeners[parentProp].add(current.name);
+        }
+        if (typeof prop === "string" && mutationMethods.has(prop) && typeof value === "function") {
+          return function(...args) {
+            const oldArray = [...proxyTarget];
+            const result = value.apply(proxyTarget, args);
+            const parentListeners = listeners[parentProp] || /* @__PURE__ */ new Set();
+            emitToListeners(parentListeners, eventPrefix, parentProp, {
+              value: proxyTarget,
+              oldValue: oldArray,
+              mutation: prop,
               ctx: current
             });
-          });
-          if (scope) {
-            const eventName = eventPrefix ? `${eventPrefix}:${scope}:${parentProp}.${String(prop)}` : `${scope}:${parentProp}.${String(prop)}`;
-            eventDispatcher.emit(eventName, {
-              prop,
-              value,
-              oldValue,
-              parent: parentProp
+            emitScopeEvent(scope, eventPrefix, parentProp, {
+              prop: parentProp,
+              value: proxyTarget,
+              oldValue: oldArray,
+              mutation: prop
+            });
+            return result;
+          };
+        }
+        if (typeof value === "object" && value !== null) {
+          const indexKey = `${parentProp}[${String(prop)}]`;
+          if (Array.isArray(value)) {
+            return RuntimeContextHelpers.createArrayProxy(value, {
+              ...config,
+              parentProp: indexKey
             });
           }
+          return RuntimeContextHelpers.createNestedProxy(value, {
+            ...config,
+            parentProp: indexKey
+          });
+        }
+        return value;
+      },
+      set(proxyTarget, prop, value, receiver) {
+        const oldValue = proxyTarget[prop];
+        const result = Reflect.set(proxyTarget, prop, value, receiver);
+        if (!safeDeepEqual(oldValue, value)) {
+          const parentListeners = listeners[parentProp] || /* @__PURE__ */ new Set();
+          emitToListeners(parentListeners, eventPrefix, parentProp, {
+            value: proxyTarget,
+            index: prop,
+            ctx: current
+          });
+          emitScopeEvent(scope, eventPrefix, parentProp, {
+            prop: parentProp,
+            value: proxyTarget,
+            index: prop,
+            oldValue
+          });
         }
         return result;
       },
       deleteProperty(proxyTarget, prop) {
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : "[Global]";
-          console.log(`${prefix} Deleting nested property '${String(prop)}'`);
-        }
         const result = Reflect.deleteProperty(proxyTarget, prop);
         if (result) {
           const parentListeners = listeners[parentProp] || /* @__PURE__ */ new Set();
-          parentListeners.forEach((componentName) => {
-            const eventName = eventPrefix ? `${eventPrefix}:component-property-changed:${componentName}` : `component-property-changed:${componentName}`;
-            eventDispatcher.emit(eventName, {
-              prop: parentProp,
-              ctx: current
-            });
-          });
+          emitToListeners(parentListeners, eventPrefix, parentProp, { ctx: current });
         }
         return result;
       }
@@ -3207,7 +3998,6 @@ class RuntimeContextHelpers {
   }
 }
 
-const DEBUG = false;
 class RuntimeContext {
   /**
    * Private constructor to enforce singleton pattern.
@@ -3294,8 +4084,7 @@ class RuntimeContext {
             // Global context doesn't track oldValue
           });
         }
-      },
-      debug: DEBUG
+      }
     });
   }
   /**
@@ -3366,7 +4155,6 @@ class RuntimeContext {
     const proxy = new Proxy(target, {
       set(obj, prop, value) {
         if (obj[prop] !== value) {
-          console.log(`Style property changed: ${prop} = ${value}`);
           callback(prop, value);
         }
         obj[prop] = value;
@@ -3562,10 +4350,6 @@ function setContextMenuEvent(e) {
   $contextMenuEvent.set(e);
 }
 
-function setResizing(isResizing) {
-  $resizing.set(isResizing);
-}
-
 function addGeneratedComponents(structureComponent) {
   structureComponent.forEach((component) => {
     addComponentAction(
@@ -3605,41 +4389,97 @@ const setupChangeDetection = () => {
   eventDispatcher.onAny((eventName, { ctx } = {}) => {
     if (eventName.startsWith("ccomponent-property-changed")) {
       const chdilrensComponent = getAllChildrenRecursive(ctx.application_id, ctx.uuid).get();
-      chdilrensComponent.forEach((component) => {
+      chdilrensComponent.forEach(() => {
       });
     }
   });
 };
 
-const selectTemplate = (props, isViewMode) => html`<select-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></select-block>`;
-const iconButtonTemplate = (props, isViewMode) => html`<icon-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-button-block>`;
-const colorPickerTemplate = (props, isViewMode) => html`<color-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></color-picker-block>`;
-const numberInputTemplate = (props, isViewMode) => html`<number-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></number-input-block>`;
-const shadowBoxTemplate = (props, isViewMode) => html`<attribute-box-shadow-value .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></attribute-box-shadow-value>`;
-const borderRadiusTemplate = (props, isViewMode) => html`<attribute-border-value .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></attribute-border-value>`;
-const boxModelTemplate = (props, isViewMode) => html`<box-model-display .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></box-model-display>`;
-const eventTemplate = (props, isViewMode) => html`<parameter-event-handler .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></parameter-event-handler>`;
-const tableTemplate = (props, isViewMode) => html`<table-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></table-block>`;
-const textInputTemplate = (props, isViewMode) => html`<text-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-input-block>`;
-const textLabelTemplate = (props, isViewMode) => html`<text-label-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-label-block>`;
-const buttonTemplate = (props, isViewMode) => html`<button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></button-block>`;
-const tabsTemplate = (props, isViewMode) => html`<tabs-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></tabs-block>`;
-const menuTemplate = (props, isViewMode) => html`<menu-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></menu-block>`;
-const verticalContainerTemplate = (props, isViewMode) => html`<vertical-container-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></vertical-container-block>`;
-const collectionViewerTemplate = (props, isViewMode) => html`<collection-viewer .isViewMode=${isViewMode} .parentcomponent=${props.parent} .component=${props.component}></collection-viewer>`;
-const checkboxTemplate = (props, isViewMode) => html`<checkbox-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></checkbox-block>`;
-const datePickerTemplate = (props, isViewMode) => html`<date-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></date-picker-block>`;
-const iconTemplate = (props, isViewMode) => html`<icon-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-block>`;
-const imageTemplate = (props, isViewMode) => html`<image-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></image-block>`;
-const radioButtonTemplate = (props, isViewMode) => html`<radio-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></radio-button-block>`;
-const aiTemplate = (props, isViewMode) => html`<ai-chat-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></ai-chat-block>`;
-const iconPickerTemplate = (props, isViewMode) => html`<icon-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-picker-block>`;
-const usersDropdownTemplate = (props, isViewMode) => html`<users-dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></users-dropdown-block>`;
-const insertDropdownTemplate = (props, isViewMode) => html`<insert-dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></insert-dropdown-block>`;
-const microAppTemplate = (props, isViewMode) => html`<micro-app-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></micro-app-block>`;
+class ComponentRegistryImpl {
+  constructor() {
+    this.registry = /* @__PURE__ */ new Map();
+  }
+  register(options) {
+    const { type, tagName, componentClass, template } = options;
+    if (this.registry.has(type)) {
+      console.warn(`[ComponentRegistry] Component type "${type}" is already registered. Skipping.`);
+      return;
+    }
+    if (componentClass && !customElements.get(tagName)) {
+      customElements.define(tagName, componentClass);
+    }
+    const componentTemplate = template ?? this.createDefaultTemplate(tagName);
+    this.registry.set(type, {
+      type,
+      tagName,
+      template: componentTemplate,
+      displayName: options.displayName,
+      category: options.category,
+      icon: options.icon,
+      defaultInputs: options.defaultInputs
+    });
+  }
+  unregister(type) {
+    return this.registry.delete(type);
+  }
+  getTemplate(type) {
+    return this.registry.get(type)?.template;
+  }
+  get(type) {
+    return this.registry.get(type);
+  }
+  has(type) {
+    return this.registry.has(type);
+  }
+  getAll() {
+    return Array.from(this.registry.values());
+  }
+  getByCategory(category) {
+    return this.getAll().filter((c) => c.category === category);
+  }
+  clear() {
+    this.registry.clear();
+  }
+  createDefaultTemplate(tagName) {
+    return (props, isViewMode) => {
+      const el = document.createElement(tagName);
+      el.isViewMode = isViewMode;
+      el.parentcomponent = props.parent;
+      el.item = props.item;
+      el.component = props.component;
+      return html`${el}`;
+    };
+  }
+}
+const ComponentRegistry = new ComponentRegistryImpl();
+function registerComponent(type, tagName, componentClass) {
+  ComponentRegistry.register({ type, tagName, componentClass });
+}
+function registerComponents(components) {
+  components.forEach((options) => ComponentRegistry.register(options));
+}
+
+const selectTemplate = (props, isViewMode) => html`<select-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></select-block>`;
+const iconButtonTemplate = (props, isViewMode) => html`<icon-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-button-block>`;
+const colorPickerTemplate = (props, isViewMode) => html`<color-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></color-picker-block>`;
+const numberInputTemplate = (props, isViewMode) => html`<number-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></number-input-block>`;
+const tableTemplate = (props, isViewMode) => html`<table-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></table-block>`;
+const textInputTemplate = (props, isViewMode) => html`<text-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-input-block>`;
+const textLabelTemplate = (props, isViewMode) => html`<text-label-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-label-block>`;
+const buttonTemplate = (props, isViewMode) => html`<button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></button-block>`;
+const tabsTemplate = (props, isViewMode) => html`<tabs-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></tabs-block>`;
+const menuTemplate = (props, isViewMode) => html`<menu-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></menu-block>`;
+const verticalContainerTemplate = (props, isViewMode) => html`<vertical-container-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></vertical-container-block>`;
+const collectionViewerTemplate = (props, isViewMode) => html`<collection-viewer .isViewMode=${isViewMode} .parentcomponent=${props.parent} .component=${props.component}></collection-viewer>`;
+const checkboxTemplate = (props, isViewMode) => html`<checkbox-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></checkbox-block>`;
+const datePickerTemplate = (props, isViewMode) => html`<date-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></date-picker-block>`;
+const iconTemplate = (props, isViewMode) => html`<icon-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-block>`;
+const imageTemplate = (props, isViewMode) => html`<image-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></image-block>`;
+const radioButtonTemplate = (props, isViewMode) => html`<radio-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></radio-button-block>`;
+const aiTemplate = (props, isViewMode) => html`<ai-chat-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></ai-chat-block>`;
+const microAppTemplate = (props, isViewMode) => html`<micro-app-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></micro-app-block>`;
 const collapseTemplate = (props, isViewMode) => html`<collapse-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></collapse-block>`;
 const dividerTemplate = (props, isViewMode) => html`<divider-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></divider-block>`;
-const handlersTemplate = (props, isViewMode) => html`<handler-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></handler-block>`;
 const dropDownTemplate = (props, isViewMode) => html`<dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></dropdown-block>`;
 const refComponentTemplate = (props, isViewMode) => html`<ref-component-container-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></ref-component-container-block>`;
 const codeTemplate = (props, isViewMode) => html`<code-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></code-block>`;
@@ -3655,26 +4495,15 @@ const cardTemplate = (props, isViewMode) => html`<card-block .isViewMode=${isVie
 const tagTemplate = (props, isViewMode) => html`<tag-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></tag-block>`;
 const sliderTemplate = (props, isViewMode) => html`<slider-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></slider-block>`;
 const panelTemplate = (props, isViewMode) => html`<panel-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></panel-block>`;
-const invokeFunctionTemplate = (props, isViewMode) => html`
-  <invoke-function-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></invoke-function-block>
-`;
-const importExportTemplate = (props, isViewMode) => html`
-  <export-import-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></export-import-block>
-`;
+const gridRowTemplate = (props, isViewMode) => html`<grid-row-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></grid-row-block>`;
+const gridColTemplate = (props, isViewMode) => html`<grid-col-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></grid-col-block>`;
+const formTemplate = (props, isViewMode) => html`<form-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></form-block>`;
 function renderComponentElement(component, commonProps, isViewMode) {
   const template = getComponentTemplate(component, commonProps, isViewMode);
   return html`${template}`;
 }
 function getComponentTemplate(component, commonProps, isViewMode) {
   switch (component?.component_type) {
-    case ComponentType.Event:
-      return eventTemplate(commonProps, isViewMode);
-    case ComponentType.BorderRadius:
-      return borderRadiusTemplate(commonProps, isViewMode);
-    case ComponentType.BoxModel:
-      return boxModelTemplate(commonProps, isViewMode);
-    case ComponentType.ShadowBox:
-      return shadowBoxTemplate(commonProps, isViewMode);
     case ComponentType.Select:
       return selectTemplate(commonProps, isViewMode);
     case ComponentType.IconButton:
@@ -3713,22 +4542,10 @@ function getComponentTemplate(component, commonProps, isViewMode) {
       return radioButtonTemplate(commonProps, isViewMode);
     case ComponentType.AI:
       return aiTemplate(commonProps, isViewMode);
-    case ComponentType.IconPicker:
-      return iconPickerTemplate(commonProps, isViewMode);
     case ComponentType.MicroApp:
       return microAppTemplate(commonProps, isViewMode);
-    case ComponentType.UsersDropdown:
-      return usersDropdownTemplate(commonProps, isViewMode);
-    case ComponentType.InsertDropdown:
-      return insertDropdownTemplate(commonProps, isViewMode);
     case ComponentType.Collapse:
       return collapseTemplate(commonProps, isViewMode);
-    case ComponentType.Handlers:
-      return handlersTemplate(commonProps, isViewMode);
-    case ComponentType.ExportImport:
-      return importExportTemplate(commonProps, isViewMode);
-    case ComponentType.InvokeFunction:
-      return invokeFunctionTemplate(commonProps, isViewMode);
     case ComponentType.Dropdown:
       return dropDownTemplate(commonProps, isViewMode);
     case ComponentType.RefComponent:
@@ -3759,7 +4576,22 @@ function getComponentTemplate(component, commonProps, isViewMode) {
       return sliderTemplate(commonProps, isViewMode);
     case ComponentType.Panel:
       return panelTemplate(commonProps, isViewMode);
+    case ComponentType.GridRow:
+      return gridRowTemplate(commonProps, isViewMode);
+    case ComponentType.GridCol:
+      return gridColTemplate(commonProps, isViewMode);
+    case ComponentType.Form:
+      return formTemplate(commonProps, isViewMode);
     default:
+      const registeredTemplate = ComponentRegistry.getTemplate(component?.component_type);
+      if (registeredTemplate) {
+        const renderProps = {
+          component: commonProps.component,
+          parent: commonProps.parent,
+          item: commonProps.item
+        };
+        return registeredTemplate(renderProps, isViewMode ?? false);
+      }
       return html``;
   }
 }
@@ -3844,4 +4676,1825 @@ const EMPTY_STRING = "";
 
 setupChangeDetection();
 
-export { $components as $, APIS_URL as A, $runtimeStyles as B, $runtimeValues as C, $componentRuntimeValuesById as D, ExecuteInstance as E, FRONT_API_URLS as F, $componentRuntimeValueByKey as G, $componentsByUUIDs as H, $runtimeStylescomponentStyleByID as I, getAllChildrenRecursive as J, getDirectChildren as K, $componentById as L, setComponentRuntimeValue as M, setComponentRuntimeValues as N, setcomponentRuntimeStyleAttribute as O, clearComponentRuntimeValues as P, clearComponentRuntimeValue as Q, RuntimeInstance as R, clearAllRuntimeValues as S, clearComponentRuntimeStyleAttributes as T, fillComponentChildren as U, fillApplicationComponents as V, extractChildresIds as W, extractAllChildrenIds as X, $applications as Y, $resizing as Z, $currentPage as _, $hoveredComponentId as a, isForbiddenProperty as a$, $contextMenuEvent as a0, $microAppCurrentPage as a1, $applicationPages as a2, refreshPageStoreVar as a3, $context as a4, ViewMode as a5, $toasts as a6, $debug as a7, $providers as a8, executeHandler as a9, addComponentHandler as aA, deleteComponentActionHandler as aB, validateAndEmitErrors as aC, updatePageHandler as aD, deletePageHandler as aE, refreshPagesActionHandler as aF, loadOrRefreshApplications as aG, createApplicationAction as aH, deleteApplicationAction as aI, addPermission as aJ, invokeFunctionHandler as aK, loadFunctionsHandler as aL, renderComponent as aM, log as aN, setLogLevel as aO, enableLogging as aP, enableBenchmarking as aQ, LOG_LEVELS as aR, eventDispatcher as aS, copyCpmponentToClipboard as aT, pasteComponentFromClipboard as aU, traitCompoentFromSchema as aV, generateNuralyClipboardStructure as aW, RuntimeContextHelpers as aX, validateHandlerCode as aY, validateComponentHandlers as aZ, isForbiddenGlobal as a_, getContextFromComponent as aa, compileHandlerFunction as ab, addComponentAction as ac, addComponentToCurrentPageAction as ad, deleteComponentAction as ae, moveDraggedComponent as af, setCurrentComponentIdAction as ag, setDraggingComponentInfo as ah, setHoveredComponentAction as ai, updateComponentName as aj, updateComponentAttributes as ak, deletePageAction as al, setContextMenuEvent as am, setResizing as an, updatePageAction as ao, addPageToApplicationAction as ap, addTempApplication as aq, setApplication as ar, setPermissionMessage as as, updateApplication as at, closeCreateApplicationModalAction as au, openEditorTab as av, setCurrentEditorTab as aw, addGeneratedComponents as ax, addlogDebug as ay, resetComponentDebug as az, $showShareApplicationModal as b, isAllowedGlobal as b0, isForbiddenFunction as b1, getErrorMessage as b2, FORBIDDEN_GLOBALS as b3, FORBIDDEN_PROPERTIES as b4, FORBIDDEN_FUNCTIONS as b5, VALIDATION_ERROR_MESSAGES as b6, formatValidationErrors as b7, getNestedAttribute as b8, hasOnlyEmptyObjects as b9, GenerateName as ba, NO_EVENT_LISTENER as bb, EMPTY_STRING as bc, isServer$2 as bd, getInitPlatform as be, ComponentType as bf, getVar as bg, setVar as bh, hideToast as bi, $applicationPermission as c, $permissionsState as d, $currentApplication as e, updateApplicationActionHandler as f, $showCreateApplicationModal as g, $editorState as h, $environment as i, addPageHandler as j, $currentPageId as k, $currentPageViewPort as l, $showBorder as m, $pageSize as n, $pages as o, $pageZoom as p, EditorInstance as q, removeComponentToCurrentPageAction as r, RuntimeHelpers as s, $applicationComponents as t, updateComponentHandler as u, $selectedComponent as v, $currentComponentId as w, $hoveredComponent as x, $draggingComponentInfo as y, $componentWithChildren as z };
+class EventDebouncer {
+  constructor(defaultDelay = 16) {
+    this.timers = /* @__PURE__ */ new Map();
+    this.defaultDelay = defaultDelay;
+  }
+  /**
+   * Debounce a callback by key
+   * If called multiple times with same key, only the last call executes
+   */
+  debounce(key, callback, delay) {
+    const existingTimer = this.timers.get(key);
+    if (existingTimer) {
+      clearTimeout(existingTimer);
+    }
+    const timer = setTimeout(() => {
+      this.timers.delete(key);
+      callback();
+    }, delay ?? this.defaultDelay);
+    this.timers.set(key, timer);
+  }
+  /**
+   * Cancel a pending debounced callback
+   */
+  cancel(key) {
+    const timer = this.timers.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      this.timers.delete(key);
+    }
+  }
+  /**
+   * Cancel all pending callbacks
+   */
+  cancelAll() {
+    for (const timer of this.timers.values()) {
+      clearTimeout(timer);
+    }
+    this.timers.clear();
+  }
+  /**
+   * Check if a key has a pending callback
+   */
+  isPending(key) {
+    return this.timers.has(key);
+  }
+  /**
+   * Get count of pending callbacks
+   */
+  get pendingCount() {
+    return this.timers.size;
+  }
+}
+class ChildRefreshBatcher {
+  constructor(emitter, delay = 32) {
+    this.pendingChildren = /* @__PURE__ */ new Set();
+    this.timer = null;
+    this.emitter = emitter;
+    this.delay = delay;
+  }
+  /**
+   * Queue a child for refresh
+   */
+  queueChild(childId) {
+    this.pendingChildren.add(childId);
+    this.scheduleFlush();
+  }
+  /**
+   * Queue multiple children for refresh
+   */
+  queueChildren(childIds) {
+    for (const id of childIds) {
+      this.pendingChildren.add(id);
+    }
+    this.scheduleFlush();
+  }
+  scheduleFlush() {
+    if (this.timer) return;
+    this.timer = setTimeout(() => {
+      this.flush();
+    }, this.delay);
+  }
+  /**
+   * Immediately flush all pending children
+   */
+  flush() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    const children = Array.from(this.pendingChildren);
+    this.pendingChildren.clear();
+    requestAnimationFrame(() => {
+      for (const childId of children) {
+        this.emitter(childId);
+      }
+    });
+  }
+  /**
+   * Cancel all pending refreshes
+   */
+  cancel() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.pendingChildren.clear();
+  }
+  /**
+   * Get count of pending children
+   */
+  get pendingCount() {
+    return this.pendingChildren.size;
+  }
+}
+class ExecutionGuard {
+  constructor() {
+    this.executing = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Try to acquire execution lock
+   * Returns true if lock acquired, false if already executing
+   */
+  tryAcquire(key) {
+    if (this.executing.has(key)) {
+      return false;
+    }
+    this.executing.add(key);
+    return true;
+  }
+  /**
+   * Release execution lock
+   */
+  release(key) {
+    this.executing.delete(key);
+  }
+  /**
+   * Execute callback with guard
+   * Prevents re-entrant execution of same key
+   */
+  async guard(key, callback) {
+    if (!this.tryAcquire(key)) {
+      return void 0;
+    }
+    try {
+      return await callback();
+    } finally {
+      this.release(key);
+    }
+  }
+  /**
+   * Check if key is currently executing
+   */
+  isExecuting(key) {
+    return this.executing.has(key);
+  }
+  /**
+   * Clear all locks
+   */
+  clear() {
+    this.executing.clear();
+  }
+}
+
+class InputHandlerController {
+  constructor(host) {
+    this.subscription = new Subscription();
+    this.debouncer = new EventDebouncer(16);
+    this.executionGuard = new ExecutionGuard();
+    this.isConnected = false;
+    this.host = host;
+    host.addController(this);
+    this.childRefreshBatcher = new ChildRefreshBatcher((childId) => {
+      eventDispatcher.emit(`component:request:refresh:${childId}`);
+    });
+  }
+  hostConnected() {
+    this.isConnected = true;
+    this.setupEventListeners();
+  }
+  hostDisconnected() {
+    this.isConnected = false;
+    this.dispose();
+  }
+  /**
+   * Set up all event listeners for input refresh triggers
+   */
+  setupEventListeners() {
+    const { component, uniqueUUID } = this.host;
+    this.subscription.add(
+      eventDispatcher.on("Vars:currentPlatform", () => {
+        this.processInputsDebounced();
+      })
+    );
+    this.subscription.add(
+      eventDispatcher.on(
+        `component-input-refresh-request:${component.uuid}`,
+        () => {
+          this.processInputsDebounced();
+        }
+      )
+    );
+    this.subscription.add(
+      eventDispatcher.on(`component:value:set:${uniqueUUID}`, () => {
+        this.processInputsDebounced();
+        this.queueChildRefresh();
+      })
+    );
+    this.subscription.add(
+      eventDispatcher.on(`component:request:refresh:${component.uuid}`, () => {
+        this.processInputsDebounced();
+        this.queueChildRefresh();
+      })
+    );
+    this.subscription.add(
+      eventDispatcher.on(
+        `component-property-changed:${String(component.name)}`,
+        () => {
+          this.processInputsDebounced();
+          this.queueChildRefresh();
+        }
+      )
+    );
+    this.subscription.add(
+      eventDispatcher.on(`component-updated:${String(component.uuid)}`, () => {
+        this.debouncer.debounce("component-updated", () => {
+          this.processInputs();
+        }, 0);
+      })
+    );
+    this.subscription.add(
+      eventDispatcher.on("Vars:currentEditingMode", () => {
+        this.executeOnInit();
+      })
+    );
+  }
+  /**
+   * Queue child refresh with batching to prevent event storms
+   */
+  queueChildRefresh() {
+    const childIds = this.host.component.childrenIds;
+    if (childIds?.length) {
+      this.childRefreshBatcher.queueChildren(childIds);
+    }
+  }
+  /**
+   * Execute onInit handler if present
+   */
+  executeOnInit() {
+    const code = getNestedAttribute(this.host.component, "event.onInit");
+    if (code) {
+      executeHandler(this.host.component, code, {}, { ...this.host.item });
+    }
+  }
+  /**
+   * Process inputs with debouncing
+   */
+  processInputsDebounced() {
+    this.debouncer.debounce("process-inputs", () => {
+      this.processInputs();
+    });
+  }
+  /**
+   * Process all component inputs
+   */
+  async processInputs() {
+    if (isServer$2 || !this.isConnected) return;
+    this.host.errors = {};
+    const inputs = EditorInstance.getComponentBreakpointInputs(this.host.component);
+    if (!inputs) return;
+    await Promise.all(
+      Object.keys(inputs).map(
+        (name) => this.processInput(inputs[name], name)
+      )
+    );
+    addlogDebug({
+      errors: {
+        component: {
+          ...this.host.component,
+          errors: { ...this.host.errors }
+        }
+      }
+    });
+    this.host.requestUpdate();
+  }
+  /**
+   * Process a single input handler
+   */
+  async processInput(input, inputName) {
+    if (!input) return;
+    const { component, item, inputHandlersValue, callbacks, errors, uniqueUUID } = this.host;
+    const handlerKey = `${component.uuid || component.name}:${inputName}`;
+    const result = await this.executionGuard.guard(handlerKey, async () => {
+      return this.executeInputHandler(input, inputName);
+    });
+    if (result === void 0) {
+      return;
+    }
+    if (inputHandlersValue[inputName] !== result.value) {
+      inputHandlersValue[inputName] = result.value;
+      const proxy = this.host.ExecuteInstance.PropertiesProxy[component.name] ??= {};
+      proxy[inputName] = result.value;
+      callbacks[inputName]?.(result.value);
+    }
+    if (result.error) {
+      errors[inputName] = { error: result.error.message };
+    }
+  }
+  /**
+   * Execute input handler and return result
+   */
+  async executeInputHandler(input, inputName) {
+    const { component, item, uniqueUUID } = this.host;
+    if (input.type === "handler") {
+      try {
+        const code = input.value;
+        if (code) {
+          const fn = executeHandler(
+            { ...component, uniqueUUID },
+            code,
+            void 0,
+            { ...item }
+          );
+          const result = RuntimeHelpers.isPromise(fn) ? await fn : fn;
+          return { value: result };
+        }
+        return { value: void 0 };
+      } catch (error) {
+        this.logHandlerError(inputName, input.value, error, "input");
+        return { value: void 0, error: { message: error.message } };
+      }
+    }
+    return { value: input.value };
+  }
+  /**
+   * Log handler execution error to console
+   */
+  logHandlerError(inputName, code, error, source) {
+    try {
+      const { component } = this.host;
+      EditorInstance.Console.log(
+        `<i style="cursor:pointer" data-uuid="${component.uuid}" data-application_uuid="${component.application_id}"><b>${component.name}</b></i> > ${source} > ${inputName} | component uuid > ${component.uuid}`
+      );
+      EditorInstance.Console.log(this.formatCodeWithError(code, error));
+    } catch (logError) {
+      console.error("Error logging handler error:", logError);
+    }
+  }
+  /**
+   * Format code with error highlighting
+   */
+  formatCodeWithError(code, error) {
+    const lines = code?.split("\n") || [];
+    let result = "Code:\n";
+    lines.forEach((line, i) => {
+      result += `${(i + 1).toString().padStart(3, " ")}| ${line}
+`;
+    });
+    result += `
+Error: ${error.name}: ${error.message}`;
+    return result;
+  }
+  /**
+   * Clean up all resources
+   */
+  dispose() {
+    this.subscription.unsubscribe();
+    this.subscription = new Subscription();
+    this.debouncer.cancelAll();
+    this.executionGuard.clear();
+    this.childRefreshBatcher.cancel();
+  }
+}
+
+class StyleCache {
+  constructor(maxSize = 100) {
+    this.cache = /* @__PURE__ */ new Map();
+    this.maxSize = maxSize;
+  }
+  /**
+   * Get cached CSS string or generate and cache it
+   */
+  getOrGenerate(key, generator) {
+    if (this.cache.has(key)) {
+      const value2 = this.cache.get(key);
+      this.cache.delete(key);
+      this.cache.set(key, value2);
+      return value2;
+    }
+    const value = generator();
+    this.set(key, value);
+    return value;
+  }
+  /**
+   * Set a cached value
+   */
+  set(key, value) {
+    if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey !== void 0) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  /**
+   * Check if key exists in cache
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+  /**
+   * Get value from cache
+   */
+  get(key) {
+    return this.cache.get(key);
+  }
+  /**
+   * Clear the entire cache
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Remove a specific key from cache
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  /**
+   * Get current cache size
+   */
+  get size() {
+    return this.cache.size;
+  }
+}
+function generateStyleCacheKey(componentUuid, styles) {
+  return `${componentUuid}:${JSON.stringify(styles)}`;
+}
+
+const PSEUDO_STATES = [":hover", ":focus", ":active", ":disabled"];
+class StyleHandlerController {
+  constructor(host) {
+    this.subscription = new Subscription();
+    this.runtimeStyles = {};
+    this.pseudoStyleCache = new StyleCache(100);
+    this.isConnected = false;
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.isConnected = true;
+    this.setupSubscriptions();
+  }
+  hostDisconnected() {
+    this.isConnected = false;
+    this.dispose();
+  }
+  /**
+   * Set up subscriptions for runtime style updates
+   */
+  setupSubscriptions() {
+    this.subscription.add(
+      $runtimeStylescomponentStyleByID(this.host.uniqueUUID).subscribe(
+        (styles) => {
+          this.runtimeStyles = styles || {};
+          this.host.requestUpdate();
+        }
+      )
+    );
+  }
+  /**
+   * Process all style handlers for the component
+   */
+  async processStyles() {
+    if (isServer$2 || !this.isConnected) return;
+    const { component } = this.host;
+    if (!component?.styleHandlers) {
+      this.calculateStyles();
+      return;
+    }
+    this.host.stylesHandlersValue = {};
+    await Promise.all(
+      Object.entries(component.styleHandlers).map(
+        ([name, style]) => this.processStyleHandler(style, name)
+      )
+    );
+    this.calculateStyles();
+    this.host.requestUpdate();
+  }
+  /**
+   * Process a single style handler
+   */
+  async processStyleHandler(style, styleName) {
+    if (!style) return;
+    try {
+      const value = style.startsWith("return ") ? executeHandler(this.host.component, style) : style;
+      if (value && this.host.stylesHandlersValue[styleName] !== value) {
+        this.host.stylesHandlersValue[styleName] = value;
+      }
+    } catch (error) {
+      console.error(`Error processing style handler "${styleName}":`, error);
+    }
+  }
+  /**
+   * Calculate and apply styles to the host element
+   */
+  calculateStyles() {
+    const { component, inputHandlersValue } = this.host;
+    this.host.calculatedStyles = {
+      ...EditorInstance.getComponentStyles(component),
+      ...this.host.calculatedStyles
+    };
+    const { innerAlignment } = inputHandlersValue;
+    const hostStyle = this.host.style;
+    hostStyle.removeProperty("align-self");
+    hostStyle.removeProperty("margin");
+    hostStyle.removeProperty("margin-left");
+    if (innerAlignment === "end") {
+      hostStyle.marginLeft = "auto";
+    } else if (innerAlignment === "middle") {
+      hostStyle.alignSelf = "center";
+      hostStyle.margin = "auto";
+    }
+    const { width, flex, cursor } = this.host.calculatedStyles;
+    if (width && RuntimeHelpers.extractUnit(width) === "%") {
+      hostStyle.width = width;
+    }
+    if (flex) {
+      hostStyle.flex = flex;
+    }
+    if (cursor) {
+      hostStyle.cursor = cursor;
+    }
+  }
+  /**
+   * Get computed styles for the component
+   * Merges multiple style sources: editor styles, handler values, runtime styles
+   */
+  getComputedStyles() {
+    const { component } = this.host;
+    const width = EditorInstance.getComponentStyle(component, "width");
+    const allStyles = EditorInstance.getComponentStyles(component);
+    const regularStyles = this.filterPseudoStates(allStyles);
+    const computedWidth = width === "auto" ? "auto" : RuntimeHelpers.extractUnit(width) === "%" ? "100%" : width ?? "auto";
+    return {
+      ...regularStyles,
+      ...this.host.stylesHandlersValue,
+      width: computedWidth,
+      ...this.runtimeStyles
+    };
+  }
+  /**
+   * Filter out pseudo-state keys from styles object
+   */
+  filterPseudoStates(styles) {
+    return Object.keys(styles).filter((key) => !PSEUDO_STATES.includes(key)).reduce((obj, key) => {
+      obj[key] = styles[key];
+      return obj;
+    }, {});
+  }
+  /**
+   * Generate CSS string for pseudo-state styles
+   * Uses caching to avoid regeneration on every render
+   */
+  generatePseudoStateCSS() {
+    const componentStyles = EditorInstance.getComponentStyles(this.host.component);
+    const cacheKey = generateStyleCacheKey(
+      this.host.component.uuid,
+      componentStyles
+    );
+    return this.pseudoStyleCache.getOrGenerate(
+      cacheKey,
+      () => this.buildPseudoStateCSS(componentStyles)
+    );
+  }
+  /**
+   * Build CSS string for pseudo-state styles
+   */
+  buildPseudoStateCSS(componentStyles) {
+    const uuid = this.host.component.uuid;
+    let cssString = "";
+    const regularStyles = this.filterPseudoStates(componentStyles);
+    const baseRules = this.stylesToCSS(regularStyles);
+    if (baseRules) {
+      cssString += `.drop-${uuid} {
+${baseRules}}
+`;
+    }
+    for (const pseudoState of PSEUDO_STATES) {
+      const stateStyles = componentStyles[pseudoState];
+      if (stateStyles && typeof stateStyles === "object") {
+        const stateRules = this.stylesToCSS(stateStyles);
+        if (stateRules) {
+          cssString += `.drop-${uuid}${pseudoState} {
+${stateRules}}
+`;
+        }
+      }
+    }
+    return cssString;
+  }
+  /**
+   * Convert styles object to CSS rule string
+   */
+  stylesToCSS(styles) {
+    return Object.entries(styles).filter(([_, value]) => value !== void 0 && value !== null).map(([property, value]) => `  ${property}: ${value};`).join("\n");
+  }
+  /**
+   * Check if component has any pseudo-state styles
+   */
+  hasPseudoStateStyles() {
+    const componentStyles = EditorInstance.getComponentStyles(this.host.component);
+    return PSEUDO_STATES.some(
+      (state) => componentStyles[state] && typeof componentStyles[state] === "object" && Object.keys(componentStyles[state]).length > 0
+    );
+  }
+  /**
+   * Invalidate cached styles for this component
+   */
+  invalidateCache() {
+    const componentStyles = EditorInstance.getComponentStyles(this.host.component);
+    const cacheKey = generateStyleCacheKey(
+      this.host.component.uuid,
+      componentStyles
+    );
+    this.pseudoStyleCache.delete(cacheKey);
+  }
+  /**
+   * Clean up all resources
+   */
+  dispose() {
+    this.subscription.unsubscribe();
+    this.subscription = new Subscription();
+    this.pseudoStyleCache.clear();
+    this.runtimeStyles = {};
+  }
+}
+
+class EventController {
+  constructor(host) {
+    this.isConnected = false;
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.isConnected = true;
+    this.executeOnInit();
+  }
+  hostDisconnected() {
+    this.isConnected = false;
+  }
+  /**
+   * Execute the onInit event handler if present
+   */
+  executeOnInit() {
+    const code = getNestedAttribute(this.host.component, "event.onInit");
+    if (code) {
+      try {
+        executeHandler(
+          this.host.component,
+          code,
+          {},
+          { ...this.host.item }
+        );
+      } catch (error) {
+        console.error("Error executing onInit handler:", error);
+      }
+    }
+  }
+  /**
+   * Execute a component event handler
+   */
+  execute(eventName, event, data = {}) {
+    if (!this.isConnected) return;
+    const { component, item, uniqueUUID } = this.host;
+    const code = component.event?.[eventName];
+    if (!code) return;
+    try {
+      const eventData = {
+        ...data,
+        event
+      };
+      executeHandler(
+        { ...component, uniqueUUID },
+        getNestedAttribute(component, `event.${eventName}`),
+        eventData,
+        item
+      );
+    } catch (error) {
+      console.error(`Error executing event "${eventName}":`, error);
+    }
+  }
+  /**
+   * Execute multiple events in sequence
+   */
+  executeMultiple(events) {
+    for (const { eventName, event, data } of events) {
+      this.execute(eventName, event, data);
+    }
+  }
+  /**
+   * Check if component has a specific event handler
+   */
+  hasEventHandler(eventName) {
+    return !!this.host.component.event?.[eventName];
+  }
+  /**
+   * Get list of all event handler names
+   */
+  getEventHandlerNames() {
+    const events = this.host.component.event;
+    if (!events) return [];
+    return Object.keys(events).filter((key) => !!events[key]);
+  }
+  /**
+   * Clean up resources
+   */
+  dispose() {
+    this.isConnected = false;
+  }
+}
+
+class SelectionController {
+  constructor(host) {
+    this.subscription = new Subscription();
+    this.isActive = false;
+    this.hoveredComponent = null;
+    this.isEditable = false;
+    this.host = host;
+    host.addController(this);
+    this.boundMouseEnter = this.handleMouseEnter.bind(this);
+    this.boundMouseLeave = this.handleMouseLeave.bind(this);
+    this.boundClick = this.handleClick.bind(this);
+    this.boundContextMenu = this.handleContextMenu.bind(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  /**
+   * Activate selection controller (editor mode only)
+   */
+  activate() {
+    if (this.isActive || this.host.isViewMode) return;
+    this.isActive = true;
+    this.host.addEventListener("mouseenter", this.boundMouseEnter);
+    this.host.addEventListener("mouseleave", this.boundMouseLeave);
+    this.host.addEventListener("click", this.boundClick);
+    this.host.addEventListener("contextmenu", this.boundContextMenu);
+    this.setupSubscriptions();
+  }
+  /**
+   * Deactivate selection controller
+   */
+  deactivate() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.host.removeEventListener("mouseenter", this.boundMouseEnter);
+    this.host.removeEventListener("mouseleave", this.boundMouseLeave);
+    this.host.removeEventListener("click", this.boundClick);
+    this.host.removeEventListener("contextmenu", this.boundContextMenu);
+    this.subscription.unsubscribe();
+    this.subscription = new Subscription();
+  }
+  /**
+   * Set up store subscriptions
+   */
+  setupSubscriptions() {
+    this.subscription.add(
+      RuntimeHelpers.createStoreObservable($hoveredComponent).subscribe(
+        (hoveredComponent) => {
+          this.hoveredComponent = hoveredComponent;
+        }
+      )
+    );
+    this.subscription.add(
+      eventDispatcher.on("Vars:selectedComponents", () => {
+        this.handleSelectionChange();
+      })
+    );
+    this.subscription.add(
+      eventDispatcher.on("keydown", ({ key, selectedComponents }) => {
+        this.handleKeydown(key, selectedComponents);
+      })
+    );
+  }
+  /**
+   * Handle selection change events
+   */
+  handleSelectionChange() {
+    const selectedComponents = ExecuteInstance.Vars.selectedComponents;
+    this.host.currentSelection = Array.from(selectedComponents).map(
+      (component) => component.uuid
+    );
+    EditorInstance.currentSelection = this.host.currentSelection;
+    const isSelected = selectedComponents.length === 1 && selectedComponents[0]?.uuid === this.host.component.uuid;
+    if (isSelected) {
+      this.scrollIntoViewIfNeeded();
+      this.emitSelectionEvent();
+    }
+  }
+  /**
+   * Scroll component into view if not visible
+   */
+  scrollIntoViewIfNeeded() {
+    requestAnimationFrame(() => {
+      const element = this.host.inputRef.value;
+      if (!element) return;
+      const rect = element.getBoundingClientRect();
+      const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+      if (!isInViewport) {
+        element.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    });
+  }
+  /**
+   * Emit component selected custom event
+   */
+  emitSelectionEvent() {
+    requestAnimationFrame(() => {
+      this.host.dispatchEvent(
+        new CustomEvent("component-selected", {
+          detail: {
+            component: this.host.component,
+            elementRef: this.host.inputRef
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  /**
+   * Handle keydown events
+   */
+  handleKeydown(key, selectedComponents) {
+    if (key === "Enter" && selectedComponents.length === 1 && this.host.component.uuid === selectedComponents[0]) {
+      this.isEditable = true;
+    }
+  }
+  /**
+   * Handle mouse enter event
+   */
+  handleMouseEnter(_e) {
+    if ($resizing.get()) return;
+    this.host.dispatchEvent(
+      new CustomEvent("component-hovered", {
+        detail: {
+          component: this.host.component,
+          elementRef: this.host.inputRef
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Handle mouse leave event
+   */
+  handleMouseLeave(_e) {
+    if ($resizing.get()) return;
+    this.host.dispatchEvent(
+      new CustomEvent("component-hovered", {
+        detail: {
+          component: null,
+          elementRef: null
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Handle click event for selection
+   */
+  handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.select(e);
+  }
+  /**
+   * Handle context menu event
+   */
+  handleContextMenu(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.select(e);
+    const rect = this.host.inputRef.value?.getBoundingClientRect();
+    if (rect) {
+      Object.assign(e, {
+        ComponentTop: rect.top,
+        ComponentLeft: rect.left,
+        ComponentBottom: rect.bottom,
+        ComponentHeight: rect.height
+      });
+      setContextMenuEvent(e);
+    }
+  }
+  /**
+   * Select this component
+   */
+  select(_e) {
+    const { component } = this.host;
+    this.host.currentSelection = [component.uuid];
+    EditorInstance.currentSelection = [component.uuid];
+    ExecuteInstance.VarsProxy.selectedComponents = [component];
+    this.host.dispatchEvent(
+      new CustomEvent("component-selected", {
+        detail: {
+          component,
+          elementRef: this.host.inputRef
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Check if this component is currently selected
+   */
+  isSelected() {
+    return this.host.currentSelection.includes(this.host.component.uuid);
+  }
+  /**
+   * Check if this component is currently hovered
+   */
+  isHovered() {
+    return this.hoveredComponent?.uuid === this.host.component.uuid;
+  }
+  /**
+   * Check if component is in editable mode
+   */
+  getIsEditable() {
+    return this.isEditable;
+  }
+  /**
+   * Set editable mode
+   */
+  setEditable(editable) {
+    this.isEditable = editable;
+  }
+  /**
+   * Clean up all resources
+   */
+  dispose() {
+    this.deactivate();
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+let DragWrapper = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slotRef = createRef();
+    this.dropBeforePlaceHolderStyle = {
+      opacity: "0",
+      height: "0px",
+      width: "0px",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position: "relative"
+    };
+    this.dropAfterPlaceHolderStyle = {
+      opacity: "0",
+      height: "0px",
+      width: "0px",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position: "relative"
+    };
+    this.pendingLeaveTimeout = null;
+  }
+  updated(changedProperties) {
+    changedProperties.forEach((_oldValue, propName) => {
+      if (propName === "draggingComponentInfo") {
+        this.isDragging = Object.keys(this.draggingComponentInfo || {}).length > 0;
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("drag-over-component", this.handleDragOver.bind(this));
+    this.addEventListener("drag-leave-component", this.handleDragLeave.bind(this));
+    $draggingComponentInfo.subscribe((draggingComponentInfo) => {
+      if (draggingComponentInfo) {
+        this.draggingComponentInfo = draggingComponentInfo;
+        this.draggingSituation = true;
+        if (this.draggingComponentInfo?.componentId === this.component?.uuid) {
+          if (this.draggingComponentInfo?.blockInfo && !this.draggingComponentInfo?.blockInfo?.height) {
+            const rect = this.inputRef.value?.getBoundingClientRect();
+            this.draggingComponentInfo.blockInfo.height = `${rect.height}px`;
+            setDraggingComponentInfo({
+              componentId: this.draggingComponentInfo?.componentId,
+              blockInfo: { ...this.draggingComponentInfo.blockInfo }
+            });
+          }
+        }
+      } else {
+        this.draggingSituation = false;
+        this.draggingComponentInfo = null;
+        this.resetDropZones();
+      }
+    });
+  }
+  handleDragLeave(e) {
+    this.resetDropZones();
+  }
+  resetDropZones() {
+    this.dropBeforePlaceHolderStyle = {
+      opacity: "0",
+      height: "0px",
+      width: "0",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position: "relative"
+    };
+    this.dropAfterPlaceHolderStyle = {
+      opacity: "0",
+      height: "0px",
+      width: "0",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position: "relative"
+    };
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.pendingLeaveTimeout) {
+      clearTimeout(this.pendingLeaveTimeout);
+      this.pendingLeaveTimeout = null;
+    }
+    const rect = this.getBoundingClientRect();
+    e.clientY - rect.top;
+    rect.height / 2;
+    this.draggingComponentInfo?.blockInfo?.width ? `${this.draggingComponentInfo.blockInfo.width}` : "100%";
+    const activeStyle = {
+      zIndex: "900",
+      opacity: "1",
+      height: "40px",
+      border: "2px dashed #3b82f6",
+      margin: "0",
+      backgroundColor: "#eff6ff",
+      position: "relative"
+    };
+    this.dropBeforePlaceHolderStyle = activeStyle;
+  }
+  handleDropBefore(e) {
+    if (!["before", "after", "inside"].includes(this.where)) {
+      this.where = "before";
+    }
+    if (!this.draggingComponentInfo?.componentId) return;
+    moveDraggedComponent(this.component.uuid, this.draggingComponentInfo.componentId, this.where);
+    setDraggingComponentInfo(null);
+    this.resetDropZones();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  render() {
+    const isDragInitiator = this.component.uuid === this.draggingComponentInfo?.componentId;
+    const beforeActive = this.dropBeforePlaceHolderStyle.opacity === "1";
+    return html`
+        ${!isDragInitiator ? html`<div
+          @dragenter=${(e) => {
+      e.preventDefault();
+    }}
+         
+              class="drop-zone ${beforeActive ? "active target" : ""} drop-${this.component.uuid}"
+              style=${styleMap(this.dropBeforePlaceHolderStyle)}
+              @drop=${this.handleDropBefore}
+            ><div class="message">${this.message ?? "Drop here"}</div></div>` : nothing}
+       `;
+  }
+};
+DragWrapper.styles = [
+  css`
+      .drop-zone {
+        position: relative;
+        opacity: 0;
+        height: 100px;
+        margin: 0;
+        border: 0;
+        border-radius: 4px;
+        transition: all 0.1s ease;
+        position: relative;
+        background-color: transparent;
+        pointer-events: auto;
+        max-width: 100%;
+      }
+      .message {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        color : #3b82f6;
+      }
+
+      .drop-zone.active {
+        opacity: 1;
+        height: 40px;
+        margin: 2px auto;
+        border: 2px dashed #3b82f6;
+        background-color: #eff6ff;
+      }
+
+      .drop-zone.active.target::before {
+        color: #3b82f6;
+        opacity: 1;
+      }
+    `
+];
+__decorateClass$3([
+  property({ type: Object })
+], DragWrapper.prototype, "component", 2);
+__decorateClass$3([
+  property({ type: String })
+], DragWrapper.prototype, "message", 2);
+__decorateClass$3([
+  state()
+], DragWrapper.prototype, "draggingComponentInfo", 2);
+__decorateClass$3([
+  state()
+], DragWrapper.prototype, "isDragging", 2);
+__decorateClass$3([
+  state()
+], DragWrapper.prototype, "dropBeforePlaceHolderStyle", 2);
+__decorateClass$3([
+  state()
+], DragWrapper.prototype, "dropAfterPlaceHolderStyle", 2);
+__decorateClass$3([
+  property({ type: Object })
+], DragWrapper.prototype, "inputRef", 2);
+__decorateClass$3([
+  property({ type: String })
+], DragWrapper.prototype, "where", 2);
+DragWrapper = __decorateClass$3([
+  customElement("drag-wrapper")
+], DragWrapper);
+
+class DragDropController {
+  constructor(host) {
+    this.isActive = false;
+    this.host = host;
+    host.addController(this);
+    this.boundDragEnter = this.handleDragEnter.bind(this);
+    this.boundDrop = this.handleDrop.bind(this);
+    this.boundDragLeave = this.handleDragLeave.bind(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  /**
+   * Activate drag-drop controller (editor mode only)
+   */
+  activate() {
+    if (this.isActive || this.host.isViewMode) return;
+    this.isActive = true;
+    this.host.closestGenericComponentWrapper = this.host.closest?.(
+      "generik-component-wrapper"
+    );
+    this.host.addEventListener("dragenter", this.boundDragEnter);
+    this.host.addEventListener("drop", this.boundDrop);
+    this.host.addEventListener("dragleave", this.boundDragLeave);
+  }
+  /**
+   * Deactivate drag-drop controller
+   */
+  deactivate() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.host.removeEventListener("dragenter", this.boundDragEnter);
+    this.host.removeEventListener("drop", this.boundDrop);
+    this.host.removeEventListener("dragleave", this.boundDragLeave);
+  }
+  /**
+   * Handle drag enter event
+   */
+  handleDragEnter(_e) {
+    this.notifyDragWrappers("drag-over-component");
+  }
+  /**
+   * Handle drop event
+   */
+  handleDrop(_e) {
+    this.notifyDragWrappers("drag-leave-component");
+  }
+  /**
+   * Handle drag leave event
+   */
+  handleDragLeave(_e) {
+    this.notifyDragWrappers("drag-leave-component");
+  }
+  /**
+   * Notify drag wrappers of drag events
+   */
+  notifyDragWrappers(eventType) {
+    const wrappers = this.host.shadowRoot?.querySelectorAll("drag-wrapper");
+    wrappers?.forEach((wrapper) => {
+      wrapper.dispatchEvent(
+        new CustomEvent(eventType, {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  /**
+   * Render drag wrappers for editor mode
+   */
+  renderWrappers(itemIndex) {
+    if (!this.isActive) return nothing;
+    const { component, inputRef, isDragInitiator } = this.host;
+    const componentData = { ...component };
+    return html`
+      ${[0, void 0].includes(itemIndex) ? html`
+            <drag-wrapper
+              .where=${"before"}
+              .message=${"Drop before"}
+              .component=${componentData}
+              .inputRef=${inputRef}
+              .isDragInitiator=${isDragInitiator}
+            ></drag-wrapper>
+          ` : nothing}
+    `;
+  }
+  /**
+   * Render after drag wrapper
+   */
+  renderAfterWrapper() {
+    if (!this.isActive) return nothing;
+    const { component, inputRef, isDragInitiator } = this.host;
+    return html`
+      <drag-wrapper
+        .where=${"after"}
+        .message=${"Drop after"}
+        .component=${{ ...component }}
+        .inputRef=${inputRef}
+        .isDragInitiator=${isDragInitiator}
+      ></drag-wrapper>
+    `;
+  }
+  /**
+   * Set drag initiator state
+   */
+  setDragInitiator(isInitiator) {
+    this.host.isDragInitiator = isInitiator;
+  }
+  /**
+   * Check if this component is the drag initiator
+   */
+  isDragInitiator() {
+    return this.host.isDragInitiator;
+  }
+  /**
+   * Clean up all resources
+   */
+  dispose() {
+    this.deactivate();
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+let HandlerComponentError = class extends LitElement {
+  render() {
+    return html`
+            <div style="
+            margin-top: 20px;
+            position: absolute;
+            z-index: 1001;
+            background: white;
+            padding: 5px;
+            border-radius: 4px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #c33d3d;
+            border-radius: 18px;
+            border: 1px solid;
+            font-size: 12px;
+          ">
+                <pre>${JSON.stringify(this.error, null, 2)}</pre>
+            </div>
+        `;
+  }
+};
+__decorateClass$2([
+  property({ type: Object })
+], HandlerComponentError.prototype, "error", 2);
+HandlerComponentError = __decorateClass$2([
+  customElement("handler-component-error-block")
+], HandlerComponentError);
+
+class ErrorController {
+  constructor(host) {
+    this.isActive = false;
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.deactivate();
+  }
+  /**
+   * Activate error controller (editor mode only)
+   */
+  activate() {
+    if (this.isActive || this.host.isViewMode) return;
+    this.isActive = true;
+  }
+  /**
+   * Deactivate error controller
+   */
+  deactivate() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.host.displayErrorPanel = false;
+  }
+  /**
+   * Get current component errors from debug store
+   */
+  getErrors() {
+    const debugState = $debug.get();
+    return debugState?.error?.components?.[this.host.component.uuid]?.errors ?? null;
+  }
+  /**
+   * Check if component has any errors
+   */
+  hasErrors() {
+    const errors = this.getErrors();
+    return errors !== null && !hasOnlyEmptyObjects(errors);
+  }
+  /**
+   * Show error panel
+   */
+  showPanel() {
+    this.host.displayErrorPanel = true;
+    this.host.requestUpdate();
+  }
+  /**
+   * Hide error panel
+   */
+  hidePanel() {
+    this.host.displayErrorPanel = false;
+    this.host.requestUpdate();
+  }
+  /**
+   * Toggle error panel visibility
+   */
+  togglePanel() {
+    this.host.displayErrorPanel = !this.host.displayErrorPanel;
+    this.host.requestUpdate();
+  }
+  /**
+   * Render error indicator and panel
+   */
+  renderError() {
+    if (!this.isActive) return nothing;
+    const errors = this.getErrors();
+    if (!errors || hasOnlyEmptyObjects(errors)) return nothing;
+    return html`
+      <div
+        @mouseenter=${() => this.showPanel()}
+        @mouseleave=${() => this.hidePanel()}
+        style="position: absolute; z-index: 1000;"
+      >
+        <nr-icon
+          name="info-circle"
+          style="
+            z-index: 1000;
+            --nuraly-icon-width: 20px;
+            --nuraly-icon-height: 25px;
+            --nuraly-icon-color: red;
+            position: absolute;
+            cursor: pointer;
+          "
+        >
+          Error
+        </nr-icon>
+        ${this.host.displayErrorPanel ? html`
+              <handler-component-error-block
+                .error=${errors}
+              ></handler-component-error-block>
+            ` : nothing}
+      </div>
+    `;
+  }
+  /**
+   * Get error summary for display
+   */
+  getErrorSummary() {
+    const errors = this.getErrors();
+    if (!errors) return { count: 0, messages: [] };
+    const messages = [];
+    let count = 0;
+    for (const [key, value] of Object.entries(errors)) {
+      if (value && typeof value === "object" && "error" in value) {
+        count++;
+        messages.push(`${key}: ${value.error}`);
+      }
+    }
+    return { count, messages };
+  }
+  /**
+   * Clear all errors for this component
+   */
+  clearErrors() {
+    this.host.errors = {};
+  }
+  /**
+   * Add an error for a specific input
+   */
+  addError(inputName, message) {
+    this.host.errors[inputName] = { error: message };
+  }
+  /**
+   * Remove an error for a specific input
+   */
+  removeError(inputName) {
+    delete this.host.errors[inputName];
+  }
+  /**
+   * Clean up all resources
+   */
+  dispose() {
+    this.deactivate();
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+function EditorModeMixin(superClass) {
+  class EditorModeElement extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.currentSelection = [];
+      this.isDragInitiator = false;
+      this.displayErrorPanel = false;
+      this.isEditable = false;
+      this.hoveredComponent = null;
+      this.closestGenericComponentWrapper = null;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.isViewMode) {
+        if (!this.selectionController) {
+          this.selectionController = new SelectionController(this);
+        }
+        if (!this.dragDropController) {
+          this.dragDropController = new DragDropController(this);
+        }
+        if (!this.errorController) {
+          this.errorController = new ErrorController(this);
+        }
+        this.selectionController.activate();
+        this.dragDropController.activate();
+        this.errorController.activate();
+      }
+    }
+    disconnectedCallback() {
+      if (!this.isViewMode) {
+        this.selectionController?.deactivate();
+        this.dragDropController?.deactivate();
+        this.errorController?.deactivate();
+      }
+      super.disconnectedCallback();
+    }
+    /**
+     * Select this component in the editor
+     */
+    selectComponent(event) {
+      if (!this.isViewMode && this.selectionController) {
+        this.selectionController.select(event);
+      }
+    }
+    /**
+     * Check if this component is currently selected
+     */
+    isSelected() {
+      return this.selectionController?.isSelected() ?? false;
+    }
+    /**
+     * Check if this component is currently hovered
+     */
+    isHovered() {
+      return this.selectionController?.isHovered() ?? false;
+    }
+    /**
+     * Render error indicator (editor only)
+     */
+    renderEditorError() {
+      if (this.isViewMode) return nothing;
+      return this.errorController?.renderError() ?? nothing;
+    }
+    /**
+     * Render drag wrappers before content (editor only)
+     */
+    renderBeforeDragWrapper() {
+      if (this.isViewMode) return nothing;
+      const itemIndex = this.item?.index;
+      return this.dragDropController?.renderWrappers(itemIndex) ?? nothing;
+    }
+    /**
+     * Render drag wrapper after content (editor only)
+     */
+    renderAfterDragWrapper() {
+      if (this.isViewMode) return nothing;
+      return this.dragDropController?.renderAfterWrapper() ?? nothing;
+    }
+    /**
+     * Render full editor overlay (error + drag wrappers)
+     */
+    renderEditorOverlay() {
+      if (this.isViewMode) return nothing;
+      const itemIndex = this.item?.index;
+      return html`
+        ${this.renderEditorError()}
+        ${[0, void 0].includes(itemIndex) ? this.renderBeforeDragWrapper() : nothing}
+      `;
+    }
+    /**
+     * Check if component has errors
+     */
+    hasErrors() {
+      return this.errorController?.hasErrors() ?? false;
+    }
+    /**
+     * Get error summary
+     */
+    getErrorSummary() {
+      return this.errorController?.getErrorSummary() ?? { count: 0, messages: [] };
+    }
+  }
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "currentSelection");
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "isDragInitiator");
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "displayErrorPanel");
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "isEditable");
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "hoveredComponent");
+  __decorateClass$1([
+    state()
+  ], EditorModeElement.prototype, "closestGenericComponentWrapper");
+  return EditorModeElement;
+}
+
+function scrollToTarget(ref) {
+  ref.value?.scrollIntoView({ behavior: "smooth" });
+}
+function setupHashScroll(ref, id, scrollFn) {
+  const handler = () => {
+    const hash = window.location.hash.slice(1);
+    if (hash && id === hash) scrollFn();
+  };
+  handler();
+  window.addEventListener("hashchange", handler);
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class BaseElementCore extends LitElement {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CONSTRUCTOR
+  // ═══════════════════════════════════════════════════════════════════════════
+  constructor() {
+    super();
+    this.isViewMode = false;
+    this.inputHandlersValue = {};
+    this.stylesHandlersValue = {};
+    this.calculatedStyles = {};
+    this.errors = {};
+    // ═══════════════════════════════════════════════════════════════════════════
+    // REFS & IDENTIFIERS
+    // ═══════════════════════════════════════════════════════════════════════════
+    /** Reference to the main rendered element */
+    this.inputRef = createRef();
+    /** Unique instance ID for this component instance */
+    this.uniqueUUID = v4();
+    // ═══════════════════════════════════════════════════════════════════════════
+    // CALLBACKS & EXTERNAL INTEGRATION
+    // ═══════════════════════════════════════════════════════════════════════════
+    /** Registry for input value callbacks */
+    this.callbacks = {};
+    /** Execution instance for runtime context */
+    this.ExecuteInstance = ExecuteInstance;
+    /** Component style definitions */
+    this.componentStyles = {};
+    this.currentPlatform = ExecuteInstance.Vars.currentPlatform ?? getInitPlatform();
+    this.inputController = new InputHandlerController(this);
+    this.styleController = new StyleHandlerController(this);
+    this.eventController = new EventController(this);
+    this.handleHash = () => setupHashScroll(
+      this.inputRef,
+      this.id,
+      () => scrollToTarget(this.inputRef)
+    );
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CALLBACK REGISTRATION (for child components to react to input changes)
+  // ═══════════════════════════════════════════════════════════════════════════
+  /**
+   * Register a callback to be invoked when an input value changes
+   * @param inputName - Name of the input to watch
+   * @param callback - Function to call with new value
+   */
+  registerCallback(inputName, callback) {
+    this.callbacks[inputName] = callback;
+  }
+  /**
+   * Unregister a previously registered callback
+   * @param inputName - Name of the input callback to remove
+   */
+  unregisterCallback(inputName) {
+    delete this.callbacks[inputName];
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // LIFECYCLE METHODS
+  // ═══════════════════════════════════════════════════════════════════════════
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.component?.uuid) {
+      this.classList.add(`component-${this.component.uuid}`);
+      this.dataset.componentUuid = this.component.uuid;
+    }
+    if (this.component) {
+      this.component.uniqueUUID = this.uniqueUUID;
+      this.component.parent = this.parentcomponent;
+    }
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.inputController.processInputs();
+    this.styleController.processStyles();
+    this.handleHash();
+    window.addEventListener("hashchange", this.handleHash);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("hashchange", this.handleHash);
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("component")) {
+      const prev = changedProperties.get("component");
+      const curr = this.component;
+      if (prev?.event?.onInit !== curr?.event?.onInit) {
+        this.eventController.executeOnInit();
+      }
+      if (curr) {
+        curr.uniqueUUID = this.uniqueUUID;
+        curr.parent = this.parentcomponent;
+        if (curr.uuid) {
+          this.dataset.componentUuid = curr.uuid;
+        }
+      }
+      this.inputController.processInputsDebounced();
+      this.styleController.processStyles();
+    }
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PUBLIC API
+  // ═══════════════════════════════════════════════════════════════════════════
+  /**
+   * Execute a component event handler
+   * @param eventName - Name of the event (onClick, onChange, etc.)
+   * @param event - Optional DOM event that triggered this
+   * @param data - Additional data to pass to the handler
+   */
+  executeEvent(eventName, event, data = {}) {
+    this.eventController.execute(eventName, event, data);
+  }
+  /**
+   * Get computed styles for the component
+   * Merges editor styles, handler values, and runtime styles
+   */
+  getStyles() {
+    return this.styleController.getComputedStyles();
+  }
+  /**
+   * Force reprocessing of input handlers
+   */
+  refreshInputs() {
+    this.inputController.processInputs();
+  }
+  /**
+   * Force reprocessing of style handlers
+   */
+  refreshStyles() {
+    this.styleController.processStyles();
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RENDERING
+  // ═══════════════════════════════════════════════════════════════════════════
+  /**
+   * Whether component should be displayed based on display input
+   */
+  get shouldDisplay() {
+    return this.inputHandlersValue?.display !== false;
+  }
+  /**
+   * Render the component content - to be implemented by child classes
+   */
+  renderComponent() {
+    return nothing;
+  }
+  /**
+   * Render pseudo-state styles (hover, focus, active, disabled)
+   */
+  renderPseudoStateStyles() {
+    const cssString = this.styleController.generatePseudoStateCSS();
+    if (!cssString) return nothing;
+    return html`<style>${cssString}</style>`;
+  }
+  render() {
+    if (!this.shouldDisplay) return nothing;
+    this.componentStyles = this.calculatedStyles || {};
+    const labelStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component.styleHandlers).filter(([_, value]) => value)
+    ) : {};
+    this.componentStyles = { ...this.componentStyles, ...labelStyleHandlers };
+    return html`
+      ${this.renderPseudoStateStyles()}
+      ${this.renderComponent()}
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], BaseElementCore.prototype, "component");
+__decorateClass([
+  property({ type: Object, reflect: true })
+], BaseElementCore.prototype, "item");
+__decorateClass([
+  property({ type: Object })
+], BaseElementCore.prototype, "parentcomponent");
+__decorateClass([
+  property({ type: Boolean })
+], BaseElementCore.prototype, "isViewMode");
+__decorateClass([
+  state()
+], BaseElementCore.prototype, "inputHandlersValue");
+__decorateClass([
+  state()
+], BaseElementCore.prototype, "stylesHandlersValue");
+__decorateClass([
+  state()
+], BaseElementCore.prototype, "calculatedStyles");
+__decorateClass([
+  state()
+], BaseElementCore.prototype, "errors");
+class BaseElementBlock extends EditorModeMixin(BaseElementCore) {
+  /**
+   * Override render to include editor overlays
+   */
+  render() {
+    if (!this.shouldDisplay) return nothing;
+    this.componentStyles = this.calculatedStyles || {};
+    const labelStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component.styleHandlers).filter(([_, value]) => value)
+    ) : {};
+    this.componentStyles = { ...this.componentStyles, ...labelStyleHandlers };
+    return html`
+      ${this.renderPseudoStateStyles()}
+      ${this.renderEditorOverlay()}
+      ${this.renderComponent()}
+      ${this.renderAfterDragWrapper()}
+    `;
+  }
+}
+
+export { $components as $, $componentWithChildren as A, $runtimeStyles as B, $runtimeValues as C, $componentRuntimeValuesById as D, ExecuteInstance as E, FRONT_API_URLS as F, $componentRuntimeValueByKey as G, $componentsByUUIDs as H, $runtimeStylescomponentStyleByID as I, getAllChildrenRecursive as J, getDirectChildren as K, $componentById as L, setComponentRuntimeValue as M, setComponentRuntimeValues as N, setcomponentRuntimeStyleAttribute as O, clearComponentRuntimeValues as P, clearComponentRuntimeValue as Q, RuntimeInstance as R, clearAllRuntimeValues as S, clearComponentRuntimeStyleAttributes as T, fillComponentChildren as U, fillApplicationComponents as V, extractChildresIds as W, extractAllChildrenIds as X, $applications as Y, $currentPage as Z, $contextMenuEvent as _, $hoveredComponent as a, validateComponentHandlers as a$, $microAppCurrentPage as a0, $applicationPages as a1, refreshPageStoreVar as a2, $context as a3, ViewMode as a4, $toasts as a5, $debug as a6, $providers as a7, executeHandler as a8, getContextFromComponent as a9, addlogDebug as aA, resetComponentDebug as aB, addComponentHandler as aC, deleteComponentActionHandler as aD, validateAndEmitErrors as aE, updatePageHandler as aF, deletePageHandler as aG, refreshPagesActionHandler as aH, loadOrRefreshApplications as aI, createApplicationAction as aJ, deleteApplicationAction as aK, addPermission as aL, invokeFunctionHandler as aM, loadFunctionsHandler as aN, renderComponent as aO, log as aP, setLogLevel as aQ, enableLogging as aR, enableBenchmarking as aS, LOG_LEVELS as aT, eventDispatcher as aU, copyCpmponentToClipboard as aV, pasteComponentFromClipboard as aW, traitCompoentFromSchema as aX, generateNuralyClipboardStructure as aY, RuntimeContextHelpers as aZ, validateHandlerCode as a_, compileHandlerFunction as aa, ComponentRegistry as ab, registerComponent as ac, registerComponents as ad, BaseElementBlock as ae, BaseElementCore as af, addComponentAction as ag, addComponentToCurrentPageAction as ah, deleteComponentAction as ai, moveDraggedComponent as aj, setCurrentComponentIdAction as ak, setDraggingComponentInfo as al, updateComponentName as am, updateComponentAttributes as an, deletePageAction as ao, setContextMenuEvent as ap, updatePageAction as aq, addPageToApplicationAction as ar, addTempApplication as as, setApplication as at, setPermissionMessage as au, updateApplication as av, closeCreateApplicationModalAction as aw, openEditorTab as ax, setCurrentEditorTab as ay, addGeneratedComponents as az, $hoveredComponentId as b, isForbiddenGlobal as b0, isForbiddenProperty as b1, isAllowedGlobal as b2, isForbiddenFunction as b3, getErrorMessage as b4, FORBIDDEN_GLOBALS as b5, FORBIDDEN_PROPERTIES as b6, FORBIDDEN_FUNCTIONS as b7, VALIDATION_ERROR_MESSAGES as b8, formatValidationErrors as b9, getNestedAttribute as ba, hasOnlyEmptyObjects as bb, GenerateName as bc, showToast as bd, hideToast as be, clearAllToasts as bf, showSuccess as bg, showError as bh, showWarning as bi, showInfo as bj, NO_EVENT_LISTENER as bk, EMPTY_STRING as bl, ToastContainer as bm, getInitPlatform as bn, $showShareApplicationModal as c, $permissionsState as d, $applicationPermission as e, $currentApplication as f, updateApplicationActionHandler as g, $showCreateApplicationModal as h, $editorState as i, $environment as j, addPageHandler as k, $currentPageId as l, $currentPageViewPort as m, $resizing as n, $showBorder as o, $pageSize as p, $pages as q, removeComponentToCurrentPageAction as r, $pageZoom as s, EditorInstance as t, updateComponentHandler as u, RuntimeHelpers as v, $applicationComponents as w, $selectedComponent as x, $currentComponentId as y, $draggingComponentInfo as z };