@nuraly/runtime 0.1.4 → 0.1.5

package/dist/index-B4yIOSMd.js

@@ -0,0 +1,3847 @@
+import { Subject, Observable } from 'rxjs';
+import Database from '@nuraly/dbclient';
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
+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 { share } from 'rxjs/operators';
+
+const isServer$4 = typeof window === "undefined";
+if (!isServer$4) {
+  if (!window["__INITIAL_APPLICATION_STATE__"]) {
+    window["__INITIAL_APPLICATION_STATE__"] = JSON.stringify([]);
+  }
+}
+const $context = atom({
+  "1": {
+    label_one_content: {
+      type: "string",
+      value: "value"
+    }
+  },
+  global: {
+    showSecondsRow: {
+      type: "boolean",
+      value: false
+    }
+  }
+});
+function getType(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+function setVar(contextId, varName, varValue) {
+  const varType = getType(varValue);
+  const currentContext = $context.get();
+  currentContext[contextId]?.[varName]?.value;
+  const updatedContext = {
+    ...currentContext,
+    [contextId]: {
+      ...currentContext[contextId],
+      [varName]: {
+        type: varType,
+        value: varValue
+      }
+    }
+  };
+  $context.set(updatedContext);
+}
+function getVar(contextId, varName) {
+  const currentContext = $context.get();
+  if (currentContext[contextId] && currentContext[contextId][varName]) {
+    return currentContext[contextId][varName];
+  } else {
+    return void 0;
+  }
+}
+persistentAtom("persistentContext", {
+  global: {}
+}, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+
+const isServer$3 = typeof window === "undefined";
+const INITIAL_APP_STATE_KEY = "__INITIAL_APPLICATION_STATE__";
+const INITIAL_CURRENT_APP_STATE_KEY = "__INITIAL_CURRENT_APPLICATION_STATE__";
+const coreApplications = [
+  { uuid: "1", name: "app1" },
+  { uuid: "2", name: "app2" },
+  { uuid: "landing", name: "landing" }
+];
+if (!isServer$3 && !window[INITIAL_APP_STATE_KEY]) {
+  window[INITIAL_APP_STATE_KEY] = JSON.stringify([]);
+}
+const initialState$2 = isServer$3 ? [] : JSON.parse(window[INITIAL_APP_STATE_KEY] || "[]");
+const initialAppState$1 = isServer$3 ? null : JSON.parse(window[INITIAL_CURRENT_APP_STATE_KEY] || "null");
+const $applications = atom([...initialState$2, ...coreApplications]);
+const $currentApplication = atom(initialAppState$1);
+const $applicationPermission = atom([]);
+deepMap({});
+const $resizing = atom(false);
+const $permissionsState = atom({ message: "" });
+const $showCreateApplicationModal = atom(false);
+const $showShareApplicationModal = atom(false);
+const $editorState = atom({
+  currentTab: {
+    id: "0",
+    label: "Page editor",
+    type: "page"
+  },
+  tabs: [
+    {
+      id: "0",
+      label: "Page editor",
+      type: "page"
+    }
+    // {
+    //   id: "2",
+    //   label: "flow editor",
+    //   type: "flow"
+    // },
+    // {
+    //   id: "3",
+    //   label: "Database manager",
+    //   type: "database"
+    // }
+  ]
+});
+keepMount($resizing);
+onMount($applications, () => {
+  if (isServer$3) return;
+  const currentApplication = $currentApplication.get();
+  if (currentApplication) {
+    setVar("global", "currentEditingApplication", currentApplication);
+  }
+});
+
+const isServer$2 = typeof window === "undefined";
+
+const currentLoadedApplication = isServer$2 ? [] : JSON.parse(window["__INITIAL_CURRENT_APPLICATION_STATE__"] ?? null);
+
+const fillComponentChildren = (components, component) => {
+  const componentMap = new Map(components.map((comp) => [comp.uuid, comp]));
+  const stack = [component];
+  while (stack.length > 0) {
+    const currentComponent = stack.pop();
+    if (!currentComponent.childrens) currentComponent.childrens = [];
+    if (currentComponent.childrenIds) {
+      currentComponent.childrens = currentComponent.childrenIds.map((childId) => componentMap.get(childId)).filter(Boolean);
+      stack.push(...currentComponent.childrens);
+    }
+  }
+  return component;
+};
+const fillApplicationComponents = (components) => components.map((component) => fillComponentChildren(components, component));
+const extractChildresIds = (components) => components.map((component) => fillComponentChildren(components, component));
+const extractAllChildrenIds = (components, component) => {
+  const componentMap = new Map(components.map((comp) => [comp.uuid, comp]));
+  const result = [];
+  const stack = [component];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (current?.childrenIds) {
+      result.push(...current.childrenIds);
+      stack.push(...current.childrenIds.map((childId) => componentMap.get(childId)).filter(Boolean));
+    }
+  }
+  return result;
+};
+
+class EventDispatcher {
+  constructor() {
+    this.subjects = {};
+    this.subscriptions = {};
+    this.globalEventSubject = new Subject();
+    this.allEvents$ = this.globalEventSubject.asObservable().pipe(share());
+  }
+  static getInstance() {
+    if (!EventDispatcher.instance) {
+      EventDispatcher.instance = new EventDispatcher();
+    }
+    return EventDispatcher.instance;
+  }
+  getSubject(event) {
+    if (!this.subjects[event]) {
+      this.subjects[event] = new Subject();
+    }
+    return this.subjects[event];
+  }
+  on(event, listener) {
+    if (!this.subscriptions[event]) {
+      this.subscriptions[event] = /* @__PURE__ */ new Map();
+    }
+    const subscription = this.getSubject(event).subscribe((data) => listener(data));
+    this.subscriptions[event].set(listener, subscription);
+    return subscription;
+  }
+  onAny(listener) {
+    return this.allEvents$.subscribe(({ eventName, data }) => listener(eventName, data));
+  }
+  off(event, listener) {
+    if (!this.subscriptions[event]) return;
+    const subscription = this.subscriptions[event].get(listener);
+    if (subscription) {
+      subscription.unsubscribe();
+      this.subscriptions[event].delete(listener);
+    }
+  }
+  emit(event, data) {
+    this.getSubject(event).next(data);
+    this.globalEventSubject.next({ eventName: event, data });
+  }
+}
+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 ? {} : {};
+if (currentLoadedApplication) {
+  initialState$1[currentLoadedApplication.uuid] = initialStates;
+}
+const $components = deepMap(initialState$1);
+const $currentComponentId = persistentAtom(
+  "currentComponentId",
+  null,
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse
+  }
+);
+const $hoveredComponentId = atom(null);
+const $hoveredComponent = atom(null);
+const $draggingComponentInfo = atom(null);
+const $applicationComponents = ($application_id) => computed(
+  [$components],
+  (componentsStore) => {
+    const applicationComponents = Array.from(componentsStore[$application_id] ?? [])?.map((component) => ({
+      ...component
+    })) ?? [];
+    return applicationComponents;
+  }
+);
+computed(
+  [$components],
+  (componentsStore) => Object.values(componentsStore).flat().filter((component) => !component.parent)
+);
+const $componentWithChildren = ($application_id) => computed(
+  [$applicationComponents($application_id)],
+  (components) => fillApplicationComponents(components)
+);
+const $selectedComponent = ($application_id) => computed(
+  [$applicationComponents($application_id), $currentComponentId],
+  (components, currentComponentId) => components.find((component) => component.uuid === currentComponentId) || null
+);
+const $componentsByUUIDs = ($application_id, uuids) => computed(
+  [$applicationComponents($application_id)],
+  (components) => components.filter((component) => uuids.includes(component.uuid))
+);
+const $runtimeStyles = deepMap({});
+const setcomponentRuntimeStyleAttribute = (componentId, attribute, value) => {
+  $runtimeStyles.setKey(componentId, {
+    ...$runtimeStyles.get()[componentId],
+    [attribute]: value
+  });
+};
+$runtimeStyles.subscribe((styles) => {
+});
+const $runtimeStylescomponentStyleByID = ($componentId) => computed(
+  [$runtimeStyles],
+  (styles) => {
+    const componentStyles = styles[$componentId] || {};
+    return componentStyles;
+  }
+);
+const clearComponentRuntimeStyleAttributes = () => {
+  $runtimeStyles.set({});
+};
+const $runtimeValues = deepMap({});
+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,
+    value
+  });
+};
+const setComponentRuntimeValues = (componentId, values) => {
+  $runtimeValues.setKey(componentId, {
+    ...$runtimeValues.get()[componentId],
+    ...values
+  });
+  eventDispatcher.emit("component:values:change", {
+    componentId,
+    values
+  });
+};
+const $componentRuntimeValuesById = (componentId) => computed(
+  [$runtimeValues],
+  (values) => {
+    return values[componentId] || {};
+  }
+);
+const $componentRuntimeValueByKey = (componentId, key) => computed(
+  [$runtimeValues],
+  (values) => {
+    const componentValues = values[componentId] || {};
+    return componentValues[key];
+  }
+);
+const clearComponentRuntimeValues = (componentId) => {
+  $runtimeValues.setKey(componentId, {});
+  eventDispatcher.emit("component:values:clear", {
+    componentId
+  });
+};
+const clearComponentRuntimeValue = (componentId, key) => {
+  const currentValues = { ...$runtimeValues.get()[componentId] };
+  if (currentValues && key in currentValues) {
+    delete currentValues[key];
+    $runtimeValues.setKey(componentId, currentValues);
+    eventDispatcher.emit("component:value:remove", {
+      componentId,
+      key
+    });
+  }
+};
+const clearAllRuntimeValues = () => {
+  $runtimeValues.set({});
+  eventDispatcher.emit("component:values:clear:all");
+};
+$runtimeValues.subscribe((values) => {
+});
+const getAllChildrenRecursive = ($application_id, componentId) => computed(
+  [$applicationComponents($application_id)],
+  (components) => {
+    const componentMap = /* @__PURE__ */ new Map();
+    components.forEach((component) => componentMap.set(component.uuid, component));
+    const collectDescendants = (component) => {
+      if (!component.childrenIds || component.childrenIds.length === 0) {
+        return [];
+      }
+      const children = [];
+      for (const childId of component.childrenIds) {
+        const childComponent = componentMap.get(childId);
+        if (childComponent) {
+          children.push(childComponent);
+          children.push(...collectDescendants(childComponent));
+        }
+      }
+      return children;
+    };
+    if (componentId) {
+      const parentComponent = componentMap.get(componentId);
+      if (!parentComponent) return [];
+      return [parentComponent, ...collectDescendants(parentComponent)];
+    }
+    const rootComponents = components.filter((component) => !component.parent);
+    const result = [];
+    for (const rootComponent of rootComponents) {
+      result.push(rootComponent);
+      result.push(...collectDescendants(rootComponent));
+    }
+    return result;
+  }
+);
+const getDirectChildren = ($application_id, componentId) => computed(
+  [$applicationComponents($application_id)],
+  (components) => {
+    const parentComponent = components.find((component) => component.uuid === componentId);
+    if (!parentComponent || !parentComponent.childrenIds) {
+      return [];
+    }
+    return components.filter(
+      (component) => parentComponent.childrenIds.includes(component.uuid)
+    );
+  }
+);
+const $componentById = ($application_id, componentId) => computed(
+  [$applicationComponents($application_id)],
+  (components) => components.find((component) => component.uuid === componentId) || null
+);
+
+class Editor {
+  constructor() {
+    this.components = [];
+    this.functions = [];
+    this.currentEditingApplication = {};
+    this.currentComponent = null;
+    this.selectedComponents = [];
+    this.currentPlatform = {};
+    this.isPreviewMode = false;
+    this.isEditorMode = false;
+    this.Vars = {};
+    this.currentSelection = [];
+    this.Tabs = [];
+    this.handleResize = () => {
+      if (!this.isEditorMode) {
+        this.updatePlatform();
+      }
+    };
+    this.Console = {
+      log: (log) => {
+        this.log(log);
+      },
+      error: (log) => {
+        this.log(log);
+      },
+      warn: (log) => {
+        this.log(log);
+      },
+      info: (log) => {
+        this.log(log);
+      },
+      debug: (log) => {
+        this.log(log);
+      }
+    };
+    if (!isServer$2) {
+      window.addEventListener("resize", this.handleResize);
+    }
+    eventDispatcher.on("Vars:currentPlatform", (data) => {
+      this.currentPlatform = { ...this.ExecuteInstance.Vars.currentPlatform };
+    });
+    $editorState.subscribe(() => {
+      this.Tabs = $editorState.get().tabs;
+    });
+  }
+  /**
+   * Lazy getter for ExecuteInstance to avoid circular dependency.
+   * Uses dynamic import to load after module initialization.
+   */
+  get ExecuteInstance() {
+    return globalThis.__NURALY_EXECUTE_INSTANCE__;
+  }
+  get isDarkMode() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  updatePlatform() {
+    if (isServer$2) return;
+    const width = window.innerWidth;
+    let currentPlatform = {};
+    if (width <= 500) {
+      currentPlatform = createPlatform("mobile", "430px", "767px", true);
+    } else if (width <= 1024) {
+      currentPlatform = createPlatform("tablet", "1024px", "768px", true);
+    } else {
+      currentPlatform = createPlatform("desktop", "1366px", void 0, false);
+    }
+    if (currentPlatform.platform !== this.currentPlatform.platform) {
+      this.currentPlatform = { ...currentPlatform };
+      this.ExecuteInstance.VarsProxy.currentPlatform = { ...this.currentPlatform };
+      eventDispatcher.emit("component:refresh");
+    }
+    return currentPlatform;
+  }
+  static createPlatform(platform, width, height, isMobile = false) {
+    return { platform, width, height, isMobile };
+  }
+  setEditorMode(isEditorMode) {
+    this.isEditorMode = isEditorMode;
+    if (this.isEditorMode) {
+      this.updatePlatform();
+    }
+  }
+  getEditorMode() {
+    return this.isEditorMode;
+  }
+  getComponentStyle(component, attribute) {
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      return { ...component?.style, ...breakpointStyle }[attribute];
+    } else {
+      return component?.style?.[attribute];
+    }
+  }
+  getComponentStyles(component) {
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      return { ...component?.style, ...breakpointStyle };
+    } else {
+      return component?.style ?? {};
+    }
+  }
+  /**
+   * Get component style value for a specific attribute considering selected state and platform
+   * @param component - The component object
+   * @param attribute - The style attribute name
+   * @returns The style value for the attribute
+   */
+  getComponentStyleForState(component, attribute) {
+    const selectedState = this.ExecuteInstance.Vars.selected_component_style_state;
+    let baseStyle = component?.style ?? {};
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      baseStyle = { ...baseStyle, ...breakpointStyle };
+    }
+    if (selectedState && selectedState !== "default") {
+      const pseudoStateStyle = baseStyle[selectedState];
+      if (pseudoStateStyle && typeof pseudoStateStyle === "object" && attribute in pseudoStateStyle) {
+        return pseudoStateStyle[attribute];
+      }
+    }
+    const pseudoStates = [":hover", ":focus", ":active", ":disabled"];
+    if (pseudoStates.includes(attribute)) {
+      return baseStyle[attribute];
+    }
+    return baseStyle[attribute];
+  }
+  /**
+   * Get all component styles considering selected state and platform
+   * @param component - The component object
+   * @returns Merged style object with pseudo-state styles applied if selected
+   */
+  getComponentStylesForState(component) {
+    const selectedState = this.ExecuteInstance.Vars.selected_component_style_state;
+    let baseStyle = component?.style ?? {};
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      baseStyle = { ...baseStyle, ...breakpointStyle };
+    }
+    if (selectedState && selectedState !== "default") {
+      const pseudoStateStyle = baseStyle[selectedState];
+      if (pseudoStateStyle && typeof pseudoStateStyle === "object") {
+        const pseudoStates = [":hover", ":focus", ":active", ":disabled"];
+        const regularStyles = Object.keys(baseStyle).filter((key) => !pseudoStates.includes(key)).reduce((obj, key) => {
+          obj[key] = baseStyle[key];
+          return obj;
+        }, {});
+        return { ...regularStyles, ...pseudoStateStyle };
+      }
+    }
+    return baseStyle;
+  }
+  getCurrentPlatform() {
+    return this.currentPlatform;
+  }
+  getComponentBreakpointStyle(component, attribute) {
+    return component?.breakpoints?.[this.currentPlatform.width]?.style?.[attribute];
+  }
+  getComponentBreakpointInput(component, attributeName) {
+    const baseInput = component?.input?.[attributeName];
+    const breakpointInput = component?.breakpoints?.[this.currentPlatform.width]?.input?.[attributeName];
+    if (baseInput?.type === "handler") {
+      return baseInput;
+    }
+    return { ...baseInput, ...breakpointInput };
+  }
+  getComponentBreakpointInputs(component) {
+    const baseInput = component?.input;
+    const breakpointInput = component?.breakpoints?.[this.currentPlatform.width]?.input;
+    if (baseInput?.type === "handler") {
+      return baseInput;
+    }
+    return { ...baseInput, ...breakpointInput };
+  }
+  log(log) {
+    eventDispatcher.emit("kernel:log", log);
+  }
+}
+const EditorInstance = new Editor();
+const createPlatform = (platform, width, height, isMobile = false) => {
+  return { platform, width, height, isMobile };
+};
+const getInitPlatform = () => {
+  if (isServer$2) return;
+  const width = window.innerWidth;
+  let currentPlatform = {};
+  if (width <= 500) {
+    currentPlatform = createPlatform("mobile", "430px", "932px", true);
+  } else if (width <= 1024) {
+    currentPlatform = createPlatform("tablet", "1024px", "768px", true);
+  } else {
+    currentPlatform = createPlatform("desktop", "1366px", void 0, false);
+  }
+  return currentPlatform;
+};
+
+class RuntimeHelpers {
+  /**
+   * Capitalizes the first letter of a string
+   * @param string - The string to capitalize
+   * @returns The string with first letter capitalized
+   */
+  static CapitalizeFirstLetter(string) {
+    if (!string) return "";
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+  /**
+   * Gets the first element of an array
+   * @param array - The array to get the first element from
+   * @returns The first element or null if array is empty
+   */
+  static first(array) {
+    return array?.[0] ?? null;
+  }
+  /**
+   * Extracts the unit from a CSS value string
+   * @param str - CSS value string (e.g., "100px", "50%")
+   * @returns The unit portion (e.g., "px", "%") or empty string
+   */
+  static extractUnit(str) {
+    return str?.match(/[a-zA-Z%]+/g)?.[0] || "";
+  }
+  /**
+   * Creates an RxJS Observable from a nanostore
+   * @param store - The nanostore to observe
+   * @returns Observable that emits on store changes
+   */
+  static createStoreObservable(store) {
+    return new Observable((subscriber) => {
+      const unsubscribe = store.subscribe((data) => subscriber.next(data));
+      return () => unsubscribe();
+    });
+  }
+  /**
+   * Checks if a value is a Promise
+   * @param value - The value to check
+   * @returns True if the value is a Promise
+   */
+  static isPromise(value) {
+    return Boolean(value && typeof value.then === "function");
+  }
+}
+
+const FORBIDDEN_GLOBALS = /* @__PURE__ */ new Set([
+  "eval",
+  "Function",
+  "window",
+  "global",
+  "globalThis",
+  "process",
+  "require",
+  "__dirname",
+  "__filename",
+  "module",
+  "exports",
+  "self",
+  "top",
+  "parent",
+  "frames",
+  "localStorage",
+  "sessionStorage",
+  "indexedDB",
+  "XMLHttpRequest",
+  "WebSocket",
+  "Worker",
+  "SharedWorker",
+  "ServiceWorker",
+  "import",
+  // Dynamic imports
+  "importScripts"
+]);
+const FORBIDDEN_PROPERTIES = /* @__PURE__ */ new Set([
+  "__proto__",
+  "prototype",
+  "constructor"
+]);
+let ALLOWED_GLOBALS_CACHE = null;
+function getAllowedGlobals() {
+  if (!ALLOWED_GLOBALS_CACHE) {
+    ALLOWED_GLOBALS_CACHE = new Set(HANDLER_PARAMETERS);
+  }
+  return ALLOWED_GLOBALS_CACHE;
+}
+const FORBIDDEN_FUNCTIONS = /* @__PURE__ */ new Set([
+  "eval",
+  "Function",
+  "setTimeout",
+  // When used with string argument
+  "setInterval",
+  // When used with string argument
+  "setImmediate"
+]);
+const VALIDATION_ERROR_MESSAGES = {
+  eval: "Use of 'eval()' is forbidden for security reasons. Use InvokeFunction() to execute server-side functions instead.",
+  Function: "Dynamic function creation via 'Function()' constructor is not allowed. Define handler logic directly.",
+  setTimeout_string: "Calling 'setTimeout()' with string argument is forbidden (acts as eval). Use a function instead.",
+  setInterval_string: "Calling 'setInterval()' with string argument is forbidden (acts as eval). Use a function instead.",
+  window: "Access to 'window' object is forbidden. Use provided runtime API instead.",
+  global: "Access to 'global' object is forbidden. Use provided runtime API instead.",
+  globalThis: "Access to 'globalThis' object is forbidden. Use provided runtime API instead.",
+  process: "Access to 'process' object is forbidden in handlers.",
+  require: "Use of 'require()' is not allowed. All dependencies must be provided through runtime API.",
+  __proto__: "Prototype manipulation via '__proto__' is forbidden for security reasons.",
+  prototype: "Direct prototype access is forbidden to prevent prototype pollution.",
+  constructor: "Access to 'constructor' property is forbidden to prevent prototype pollution.",
+  localStorage: "Direct localStorage access is forbidden. Use GetVar()/SetVar() for state management.",
+  sessionStorage: "Direct sessionStorage access is forbidden. Use GetVar()/SetVar() for state management.",
+  indexedDB: "Direct indexedDB access is forbidden. Use Database API provided in runtime context.",
+  unknownGlobal: (name) => {
+    const allowedGlobals = getAllowedGlobals();
+    return `'${name}' is not available in handler context. Available globals: ${Array.from(allowedGlobals).slice(0, 10).join(", ")}... (${allowedGlobals.size} total)`;
+  },
+  syntaxError: (message) => `Syntax error in handler code: ${message}`
+};
+function getErrorMessage(type, identifier) {
+  if (type === "unknownGlobal" && identifier) {
+    return VALIDATION_ERROR_MESSAGES.unknownGlobal(identifier);
+  }
+  if (type === "syntaxError" && identifier) {
+    return VALIDATION_ERROR_MESSAGES.syntaxError(identifier);
+  }
+  return VALIDATION_ERROR_MESSAGES[type] || `Security violation: ${type}`;
+}
+function isForbiddenGlobal(name) {
+  return FORBIDDEN_GLOBALS.has(name);
+}
+function isForbiddenProperty(name) {
+  return FORBIDDEN_PROPERTIES.has(name);
+}
+function isAllowedGlobal(name) {
+  return getAllowedGlobals().has(name);
+}
+function isForbiddenFunction(name) {
+  return FORBIDDEN_FUNCTIONS.has(name);
+}
+
+function validateHandlerCode(code) {
+  if (!code || code.trim() === "") {
+    return { valid: true, errors: [] };
+  }
+  const context = {
+    errors: [],
+    declaredVariables: /* @__PURE__ */ new Set(),
+    scopeStack: [/* @__PURE__ */ new Set()]
+  };
+  try {
+    const wrappedCode = `(function() { ${code} })`;
+    const ast = acorn.parse(wrappedCode, {
+      ecmaVersion: "latest",
+      sourceType: "script",
+      locations: true
+    });
+    walkAST(ast, context);
+  } catch (error) {
+    context.errors.push({
+      type: "syntax",
+      message: getErrorMessage("syntaxError", error.message),
+      line: error.loc?.line,
+      column: error.loc?.column,
+      code: extractErrorContext(code, error.loc?.line)
+    });
+  }
+  return {
+    valid: context.errors.length === 0,
+    errors: context.errors
+  };
+}
+function walkAST(ast, context) {
+  walk.ancestor(ast, {
+    // Check identifier usage
+    Identifier(node, ancestors) {
+      checkIdentifier(node, context);
+    },
+    // Check member expressions (e.g., obj.prop, obj['prop'])
+    MemberExpression(node) {
+      checkMemberExpression(node, context);
+    },
+    // Check function calls
+    CallExpression(node) {
+      checkCallExpression(node, context);
+    },
+    // Check new expressions (e.g., new Function())
+    NewExpression(node) {
+      checkNewExpression(node, context);
+    },
+    // Check dynamic imports
+    ImportExpression(node) {
+      context.errors.push({
+        type: "forbidden_pattern",
+        message: "Dynamic 'import()' is not allowed in handlers.",
+        line: node.loc?.start.line,
+        column: node.loc?.start.column
+      });
+    },
+    // Track variable declarations to avoid false positives
+    VariableDeclaration(node, ancestors) {
+      node.declarations.forEach((decl) => {
+        if (decl.id.type === "Identifier") {
+          getCurrentScope(context).add(decl.id.name);
+        }
+      });
+    },
+    // Track function parameters
+    FunctionDeclaration(node, ancestors) {
+      const fnScope = /* @__PURE__ */ new Set();
+      if (node.id) {
+        fnScope.add(node.id.name);
+      }
+      node.params.forEach((param) => {
+        if (param.type === "Identifier") {
+          fnScope.add(param.name);
+        }
+      });
+      context.declaredVariables = /* @__PURE__ */ new Set([...context.declaredVariables, ...fnScope]);
+    },
+    FunctionExpression(node, ancestors) {
+      const fnScope = /* @__PURE__ */ new Set();
+      if (node.id) {
+        fnScope.add(node.id.name);
+      }
+      node.params.forEach((param) => {
+        if (param.type === "Identifier") {
+          fnScope.add(param.name);
+        }
+      });
+      context.declaredVariables = /* @__PURE__ */ new Set([...context.declaredVariables, ...fnScope]);
+    },
+    ArrowFunctionExpression(node, ancestors) {
+      const fnScope = /* @__PURE__ */ new Set();
+      node.params.forEach((param) => {
+        if (param.type === "Identifier") {
+          fnScope.add(param.name);
+        }
+      });
+      context.declaredVariables = /* @__PURE__ */ new Set([...context.declaredVariables, ...fnScope]);
+    }
+  });
+}
+function checkIdentifier(node, context, ancestors) {
+  const name = node.name;
+  if (isInDeclaredVariables(name, context)) {
+    return;
+  }
+  if (isForbiddenGlobal(name)) {
+    context.errors.push({
+      type: "forbidden_global",
+      message: getErrorMessage(name),
+      line: node.loc?.start.line,
+      column: node.loc?.start.column,
+      identifier: name
+    });
+    return;
+  }
+  const standardBuiltins = /* @__PURE__ */ new Set([
+    "undefined",
+    "null",
+    "true",
+    "false",
+    "NaN",
+    "Infinity",
+    "Object",
+    "Array",
+    "String",
+    "Number",
+    "Boolean",
+    "Date",
+    "Math",
+    "JSON",
+    "RegExp",
+    "Error",
+    "Promise",
+    "Map",
+    "Set",
+    "WeakMap",
+    "WeakSet",
+    "parseInt",
+    "parseFloat",
+    "isNaN",
+    "isFinite",
+    "encodeURI",
+    "decodeURI",
+    "encodeURIComponent",
+    "decodeURIComponent"
+  ]);
+  if (standardBuiltins.has(name)) {
+    return;
+  }
+  if (isAllowedGlobal(name)) {
+    return;
+  }
+}
+function checkMemberExpression(node, context) {
+  if (node.property) {
+    const propName = node.property.name || node.property.value;
+    if (typeof propName === "string" && isForbiddenProperty(propName)) {
+      context.errors.push({
+        type: "forbidden_property",
+        message: getErrorMessage(propName),
+        line: node.loc?.start.line,
+        column: node.loc?.start.column,
+        identifier: propName
+      });
+    }
+  }
+  if (node.computed && node.property.type === "Literal") {
+    const propValue = node.property.value;
+    if (typeof propValue === "string" && isForbiddenProperty(propValue)) {
+      context.errors.push({
+        type: "forbidden_property",
+        message: getErrorMessage(propValue),
+        line: node.loc?.start.line,
+        column: node.loc?.start.column,
+        identifier: propValue
+      });
+    }
+  }
+}
+function checkCallExpression(node, context) {
+  const calleeName = getCalleeName(node.callee);
+  if (!calleeName) return;
+  if (calleeName === "eval") {
+    context.errors.push({
+      type: "forbidden_function",
+      message: getErrorMessage("eval"),
+      line: node.loc?.start.line,
+      column: node.loc?.start.column,
+      identifier: "eval"
+    });
+    return;
+  }
+  if (calleeName === "setTimeout" || calleeName === "setInterval") {
+    if (node.arguments.length > 0 && node.arguments[0].type === "Literal") {
+      context.errors.push({
+        type: "forbidden_function",
+        message: getErrorMessage(`${calleeName}_string`),
+        line: node.loc?.start.line,
+        column: node.loc?.start.column,
+        identifier: calleeName
+      });
+    }
+  }
+}
+function checkNewExpression(node, context) {
+  const calleeName = getCalleeName(node.callee);
+  if (calleeName === "Function") {
+    context.errors.push({
+      type: "forbidden_function",
+      message: getErrorMessage("Function"),
+      line: node.loc?.start.line,
+      column: node.loc?.start.column,
+      identifier: "Function"
+    });
+  }
+}
+function getCalleeName(callee) {
+  if (callee.type === "Identifier") {
+    return callee.name;
+  }
+  if (callee.type === "MemberExpression" && callee.property.type === "Identifier") {
+    return callee.property.name;
+  }
+  return null;
+}
+function getCurrentScope(context, ancestors) {
+  return context.scopeStack[context.scopeStack.length - 1];
+}
+function isInDeclaredVariables(name, context) {
+  return context.declaredVariables.has(name) || context.scopeStack.some((scope) => scope.has(name));
+}
+function extractErrorContext(code, line) {
+  if (!line) return void 0;
+  const lines = code.split("\n");
+  const errorLine = lines[line - 1];
+  return errorLine?.trim();
+}
+function validateStringHandlers(handlers, prefix, allErrors) {
+  if (!handlers) return;
+  Object.entries(handlers).forEach(([name, code]) => {
+    if (typeof code === "string") {
+      const result = validateHandlerCode(code);
+      if (!result.valid) {
+        result.errors.forEach((error) => {
+          allErrors.push({
+            ...error,
+            code: `${prefix}.${name}: ${error.code || code.split("\n")[0]}`
+          });
+        });
+      }
+    }
+  });
+}
+function validateHandlerTypeProperties(properties, prefix, allErrors) {
+  if (!properties) return;
+  Object.entries(properties).forEach(([name, value]) => {
+    if (value && typeof value === "object" && value.type === "handler" && typeof value.value === "string") {
+      const result = validateHandlerCode(value.value);
+      if (!result.valid) {
+        result.errors.forEach((error) => {
+          allErrors.push({
+            ...error,
+            code: `${prefix}.${name}: ${error.code || value.value.split("\n")[0]}`
+          });
+        });
+      }
+    }
+  });
+}
+function validateComponentHandlers(component) {
+  const allErrors = [];
+  validateStringHandlers(component.event, "event", allErrors);
+  validateHandlerTypeProperties(component.input, "input", allErrors);
+  validateHandlerTypeProperties(component.style, "style", allErrors);
+  validateStringHandlers(component.inputHandlers, "inputHandlers", allErrors);
+  validateStringHandlers(component.styleHandlers, "styleHandlers", allErrors);
+  return {
+    valid: allErrors.length === 0,
+    errors: allErrors
+  };
+}
+
+const handlerFunctionCache = {};
+const HANDLER_PARAMETERS = [
+  "Database",
+  "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",
+  "updateInputHandlers",
+  "deletePage",
+  "CopyComponentToClipboard",
+  "PasteComponentFromClipboard",
+  "DeleteComponentAction",
+  "updateName",
+  "updateEvent",
+  "updateStyleHandlers",
+  "EventData",
+  "updateStyle",
+  "openEditorTab",
+  "setCurrentEditorTab",
+  "InvokeFunction",
+  "Utils",
+  "console",
+  "UploadFile",
+  "BrowseFiles",
+  "Instance",
+  "ShowToast",
+  "ShowSuccessToast",
+  "ShowErrorToast",
+  "ShowWarningToast",
+  "ShowInfoToast",
+  "HideToast",
+  "ClearAllToasts"
+];
+function compileHandlerFunction(code) {
+  if (!handlerFunctionCache[code]) {
+    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);`
+    );
+  }
+  return handlerFunctionCache[code];
+}
+
+const observe = (o, f) => new Proxy(o, {
+  set: (target, prop, value) => {
+    let result = Reflect.set(target, prop, value);
+    if (typeof prop === "string") {
+      f(target, prop, value);
+    }
+    return result;
+  }
+});
+function setupRuntimeContext(context, component, EventData = {}) {
+  context.Current = component;
+  if (!component.children && component.childrenIds && Array.isArray(component.childrenIds)) {
+    component.children = [];
+  }
+  if (component.uniqueUUID) {
+    context.attachValuesProperty(component);
+    let parentComponent = component.parent;
+    while (parentComponent) {
+      if (parentComponent.uniqueUUID) {
+        context.attachValuesProperty(parentComponent);
+      }
+      parentComponent = parentComponent.parent;
+    }
+  }
+  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) => {
+      context.setComponentRuntimeStyleAttribute(
+        context.Current.uniqueUUID,
+        prop,
+        value
+      );
+    });
+    context.Current.style = newProxy;
+    context.styleProxyCache.set(context.Current.style, newProxy);
+  } else {
+    context.Current.style = context.styleProxyCache.get(context.Current.style);
+  }
+}
+function extractRuntimeContext(context) {
+  return {
+    context: context.context,
+    applications: context.applications,
+    Apps: context.Apps,
+    Values: context.Values,
+    PropertiesProxy: context.PropertiesProxy,
+    VarsProxy: context.VarsProxy,
+    Current: context.Current,
+    currentPlatform: context.currentPlatform,
+    Event: context.Event
+  };
+}
+
+function createVariableFunctions(runtimeContext) {
+  const { context } = runtimeContext;
+  return {
+    /**
+     * Sets a global variable accessible across all applications.
+     * 
+     * @description
+     * Stores a value in the global scope that persists for the session
+     * and is accessible from any application or component.
+     * 
+     * **Use Cases:**
+     * - User authentication state
+     * - Application-wide theme/settings
+     * - Language/locale preferences
+     * - Shared data between applications
+     * - Feature flags
+     * 
+     * **Storage:**
+     * Stored in `$context.get().global[symbol]`
+     * 
+     * **Reactivity:**
+     * Changes trigger store updates and component re-renders that depend on the variable.
+     * 
+     * @param {string} symbol - Variable name/key
+     * @param {any} value - Value to store (any JSON-serializable value)
+     * 
+     * @returns {void}
+     * 
+     * @example Basic Usage
+     * ```javascript
+     * // Set primitive values
+     * SetVar('username', 'John Doe');
+     * SetVar('count', 42);
+     * SetVar('isLoggedIn', true);
+     * 
+     * // Set objects
+     * SetVar('user', {
+     *   id: 123,
+     *   name: 'John Doe',
+     *   email: 'john@example.com'
+     * });
+     * 
+     * // Set arrays
+     * SetVar('items', ['apple', 'banana', 'cherry']);
+     * ```
+     * 
+     * @example Updating Existing Variable
+     * ```javascript
+     * // Get current value, modify, set back
+     * const count = GetVar('count') || 0;
+     * SetVar('count', count + 1);
+     * 
+     * // Update object property
+     * const settings = GetVar('settings') || {};
+     * SetVar('settings', { ...settings, darkMode: true });
+     * 
+     * // Add to array
+     * const items = GetVar('items') || [];
+     * SetVar('items', [...items, newItem]);
+     * ```
+     * 
+     * @example Authentication Pattern
+     * ```javascript
+     * // On login
+     * SetVar('isLoggedIn', true);
+     * SetVar('currentUser', { id: 123, name: 'John' });
+     * SetVar('authToken', 'jwt-token-here');
+     * 
+     * // On logout
+     * SetVar('isLoggedIn', false);
+     * SetVar('currentUser', null);
+     * SetVar('authToken', null);
+     * ```
+     */
+    SetVar: (symbol, value) => {
+      setVar("global", symbol, value);
+    },
+    /**
+     * Gets a global variable value.
+     * 
+     * @description
+     * Retrieves a value from the global scope. Returns undefined if
+     * the variable doesn't exist.
+     * 
+     * **Use Cases:**
+     * - Check authentication status
+     * - Get user preferences
+     * - Access shared application state
+     * - Retrieve cached data
+     * 
+     * **Storage:**
+     * Reads from `$context.get().global[symbol].value`
+     * 
+     * @param {string} symbol - Variable name/key to retrieve
+     * 
+     * @returns {any} The variable value, or undefined if not found
+     * 
+     * @example Basic Usage
+     * ```javascript
+     * const username = GetVar('username');
+     * const count = GetVar('count');
+     * const user = GetVar('user');
+     * 
+     * console.log(username); // "John Doe" or undefined
+     * ```
+     * 
+     * @example With Default Values
+     * ```javascript
+     * // Provide default if variable doesn't exist
+     * const count = GetVar('count') || 0;
+     * const theme = GetVar('theme') || 'light';
+     * const settings = GetVar('settings') || { darkMode: false };
+     * ```
+     * 
+     * @example Conditional Logic
+     * ```javascript
+     * // Check if variable exists
+     * const isLoggedIn = GetVar('isLoggedIn');
+     * if (isLoggedIn) {
+     *   NavigateToPage('Dashboard');
+     * } else {
+     *   NavigateToPage('Login');
+     * }
+     * 
+     * // Access nested properties safely
+     * const user = GetVar('user');
+     * const userName = user?.name || 'Guest';
+     * ```
+     * 
+     * @example Display Pattern
+     * ```javascript
+     * // Use in component display
+     * return `Welcome, ${GetVar('username') || 'Guest'}!`;
+     * 
+     * // Computed value
+     * const firstName = GetVar('firstName');
+     * const lastName = GetVar('lastName');
+     * return `${firstName} ${lastName}`;
+     * ```
+     */
+    GetVar: (symbol) => {
+      if (context && context["global"] && context["global"][symbol] && "value" in context["global"][symbol]) {
+        return context["global"][symbol].value;
+      }
+    },
+    /**
+     * Gets a context-scoped (application-specific) variable.
+     * 
+     * @description
+     * Retrieves a value from an application's context scope. Context variables
+     * are isolated per application and don't affect other applications.
+     * 
+     * **Use Cases:**
+     * - Application-specific state
+     * - Page navigation state within an app
+     * - App configuration data
+     * - Isolated feature state
+     * 
+     * **Storage:**
+     * Reads from `$context.get()[appId][symbol].value`
+     * 
+     * **Scope Resolution:**
+     * - If `customContentId` provided, uses that as the scope
+     * - Otherwise, uses `component.application_id` as the scope
+     * 
+     * @param {string} symbol - Variable name/key to retrieve
+     * @param {string | null} customContentId - Optional custom context ID (app ID)
+     * @param {any} component - Component object to get application_id from
+     * 
+     * @returns {any} The variable value, or null if not found
+     * 
+     * @example Basic Usage
+     * ```javascript
+     * // Get variable from current app context
+     * const currentPage = GetContextVar('currentPage', null, Current);
+     * const appSettings = GetContextVar('settings', null, Current);
+     * 
+     * console.log(currentPage); // "dashboard" or null
+     * ```
+     * 
+     * @example Custom Context ID
+     * ```javascript
+     * // Get variable from specific app
+     * const otherAppData = GetContextVar('userData', 'app-123', Current);
+     * 
+     * // Cross-app communication
+     * const sharedState = GetContextVar('sharedData', 'main-app-id', Current);
+     * ```
+     * 
+     * @example With Default Values
+     * ```javascript
+     * const currentPage = GetContextVar('currentPage', null, Current) || 'home';
+     * const appConfig = GetContextVar('config', null, Current) || { initialized: false };
+     * ```
+     * 
+     * @example Application Navigation
+     * ```javascript
+     * // Store and retrieve current page in app context
+     * SetContextVar('currentPage', 'profile', Current);
+     * 
+     * // Later, in another component of same app:
+     * const page = GetContextVar('currentPage', null, Current);
+     * if (page === 'profile') {
+     *   // Show profile-specific UI
+     * }
+     * ```
+     */
+    GetContextVar: (symbol, customContentId, component) => {
+      const contentId = customContentId || component?.application_id;
+      if (context && context[contentId] && context[contentId]?.[symbol] && "value" in context[contentId]?.[symbol]) {
+        return context[contentId]?.[symbol]?.value;
+      }
+      return null;
+    },
+    /**
+     * Sets a context-scoped (application-specific) variable.
+     * 
+     * @description
+     * Stores a value in an application's context scope. The value is isolated
+     * to this application and won't affect other applications.
+     * 
+     * **Use Cases:**
+     * - Store app-specific state
+     * - Track navigation within an app
+     * - App configuration
+     * - Isolated feature data
+     * 
+     * **Storage:**
+     * Stored in `$context.get()[appId][symbol]`
+     * 
+     * **Scope:**
+     * Uses `component.application_id` to determine the scope
+     * 
+     * **Reactivity:**
+     * Changes trigger store updates and re-renders of components in that app
+     * that depend on the variable.
+     * 
+     * @param {string} symbol - Variable name/key
+     * @param {any} value - Value to store (any JSON-serializable value)
+     * @param {any} component - Component object to get application_id from
+     * 
+     * @returns {void}
+     * 
+     * @example Basic Usage
+     * ```javascript
+     * // Set context variable in current app
+     * SetContextVar('currentPage', 'dashboard', Current);
+     * SetContextVar('userData', { id: 123, name: 'John' }, Current);
+     * SetContextVar('appSettings', { theme: 'dark', layout: 'grid' }, Current);
+     * ```
+     * 
+     * @example Page Navigation State
+     * ```javascript
+     * // Store navigation history in app context
+     * const history = GetContextVar('pageHistory', null, Current) || [];
+     * SetContextVar('pageHistory', [...history, 'profile'], Current);
+     * 
+     * // Track current page
+     * SetContextVar('currentPage', 'profile', Current);
+     * SetContextVar('previousPage', GetContextVar('currentPage', null, Current), Current);
+     * ```
+     * 
+     * @example App Configuration
+     * ```javascript
+     * // Initialize app config
+     * SetContextVar('config', {
+     *   apiEndpoint: '/api/v1',
+     *   maxItems: 50,
+     *   enableFeatureX: true
+     * }, Current);
+     * 
+     * // Update config
+     * const config = GetContextVar('config', null, Current);
+     * SetContextVar('config', { ...config, maxItems: 100 }, Current);
+     * ```
+     * 
+     * @example Isolated State Between Apps
+     * ```javascript
+     * // App A sets its own state
+     * SetContextVar('currentUser', { id: 1, name: 'Alice' }, appAComponent);
+     * 
+     * // App B sets its own state (doesn't affect App A)
+     * SetContextVar('currentUser', { id: 2, name: 'Bob' }, appBComponent);
+     * 
+     * // Each app has its own isolated state
+     * ```
+     */
+    SetContextVar: (symbol, value, component) => {
+      setVar(component.application_id, symbol, value);
+    }
+  };
+}
+
+var ComponentType = /* @__PURE__ */ ((ComponentType2) => {
+  ComponentType2["TextLabel"] = "text_label";
+  ComponentType2["Tabs"] = "tabs";
+  ComponentType2["TextInput"] = "text_input";
+  ComponentType2["Menu"] = "menu";
+  ComponentType2["Button"] = "button_input";
+  ComponentType2["Collection"] = "Collection";
+  ComponentType2["Container"] = "vertical-container-block";
+  ComponentType2["ColorPicker"] = "color_picker";
+  ComponentType2["NumberInput"] = "number_input";
+  ComponentType2["IconButton"] = "icon_button";
+  ComponentType2["Select"] = "select";
+  ComponentType2["ShadowBox"] = "shadow_box";
+  ComponentType2["BorderRadius"] = "border_radius";
+  ComponentType2["BoxModel"] = "box_model";
+  ComponentType2["Event"] = "event";
+  ComponentType2["Table"] = "Table";
+  ComponentType2["Checkbox"] = "checkbox";
+  ComponentType2["DatePicker"] = "Datepicker";
+  ComponentType2["Icon"] = "Icon";
+  ComponentType2["Image"] = "Image";
+  ComponentType2["MicroApp"] = "MicroApp";
+  ComponentType2["RadioButton"] = "RadioButton";
+  ComponentType2["IconPicker"] = "IconPicker";
+  ComponentType2["RefComponent"] = "RefComponent";
+  ComponentType2["Code"] = "code-block";
+  ComponentType2["RichText"] = "rich-text";
+  ComponentType2["EmbedURL"] = "embed-url";
+  ComponentType2["Link"] = "link";
+  ComponentType2["Document"] = "document";
+  ComponentType2["Video"] = "video";
+  ComponentType2["FileUpload"] = "file-upload";
+  ComponentType2["RichTextEditor"] = "rich-text-editor";
+  ComponentType2["UsersDropdown"] = "UsersDropdown";
+  ComponentType2["InsertDropdown"] = "InsertDropdown";
+  ComponentType2["Collapse"] = "Collapse";
+  ComponentType2["Handlers"] = "Handlers";
+  ComponentType2["AI"] = "AI";
+  ComponentType2["Divider"] = "Divider";
+  ComponentType2["ExportImport"] = "ExportImport";
+  ComponentType2["InvokeFunction"] = "InvokeFunction";
+  ComponentType2["Dropdown"] = "dropdown";
+  ComponentType2["Textarea"] = "Textarea";
+  ComponentType2["Badge"] = "Badge";
+  ComponentType2["Card"] = "Card";
+  ComponentType2["Tag"] = "Tag";
+  ComponentType2["Slider"] = "Slider";
+  ComponentType2["Alert"] = "Alert";
+  ComponentType2["Modal"] = "Modal";
+  ComponentType2["Toast"] = "Toast";
+  ComponentType2["Panel"] = "Panel";
+  return ComponentType2;
+})(ComponentType || {});
+
+const FRONT_API_URLS = {
+  COMPONENTS: "/api/components",
+  FUNCTIONS: "/api/v1/functions",
+  APPLICATIONS: "/api/applications",
+  PAGES: "/api/pages",
+  REFRESH_COMPONENTS: "/api/components/application/{application_id}",
+  REFRESH_PAGES: "/api/pages/application"
+};
+
+function formatValidationErrors$1(errors) {
+  if (errors.length === 0) return "";
+  if (errors.length === 1) {
+    return `Security violation: ${errors[0].message}`;
+  }
+  return `Found ${errors.length} security violations:
+${errors.map(
+    (e, i) => `${i + 1}. ${e.code || "Handler"}: ${e.message}`
+  ).join("\n")}`;
+}
+const validateAndEmitErrors = (component) => {
+  const validationResult = validateComponentHandlers(component);
+  if (!validationResult.valid) {
+    const errorMessage = formatValidationErrors$1(validationResult.errors);
+    eventDispatcher.emit("kernel:log", {
+      type: "error",
+      message: "Handler Validation Failed",
+      details: errorMessage,
+      errors: validationResult.errors
+    });
+    eventDispatcher.emit("component:validation-error", {
+      componentId: component.uuid,
+      errors: validationResult.errors,
+      message: errorMessage
+    });
+    console.error("Handler validation failed:", validationResult.errors);
+    return Promise.reject({
+      type: "validation_error",
+      message: errorMessage,
+      errors: validationResult.errors
+    });
+  }
+  return null;
+};
+
+const addComponentHandler = ({ component }, currentApplicatinId) => {
+  const validationError = validateAndEmitErrors(component);
+  if (validationError instanceof Promise) return validationError;
+  delete component.parent;
+  delete component.children;
+  delete component.childrens;
+  fetch(FRONT_API_URLS.COMPONENTS, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ component: { ...component, application_id: currentApplicatinId } })
+  }).then((res) => res.json()).catch((err) => {
+    eventDispatcher.emit("component:save-error", {
+      componentId: component.uuid,
+      error: err.message || "Failed to save component"
+    });
+    console.error(err);
+  });
+};
+
+const isServer = typeof window === "undefined";
+const initialAppState = isServer ? [] : JSON.parse(window["__INITIAL_CURRENT_APPLICATION_STATE__"] ?? null);
+const initialState = {};
+if (initialAppState && !isServer) {
+  initialState[initialAppState.uuid] = JSON.parse(
+    window["__INITIAL_PAGE_STATE__"] ?? []
+  );
+}
+const $pages = atom(initialState);
+const $microAppCurrentPage = deepMap({});
+const $currentPageId = ($application_id) => persistentAtom(`page_id_${$application_id}`, null, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+const $currentPageViewPort = persistentAtom(
+  "current_page_view_port",
+  "",
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse
+  }
+);
+const $pageZoom = atom("99");
+const $pageSize = persistentAtom(
+  "page_info",
+  {},
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse
+  }
+);
+const $showBorder = persistentAtom("show_border", false, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+const $contextMenuEvent = atom();
+const $applicationPages = ($application_id) => computed([$pages], (pagesStore) => {
+  return pagesStore[$application_id] || [];
+});
+const $currentPage = ($application_id, currentPageId) => computed([$applicationPages($application_id)], (pages) => {
+  if (!Array.isArray(pages)) {
+    return void 0;
+  }
+  const currentPage = pages.find((page) => {
+    return page.uuid === currentPageId;
+  });
+  if (!currentPage && pages.length > 0) {
+    return pages[0];
+  }
+  return currentPage;
+});
+const refreshPageStoreVar = () => {
+  const pagesStore = $pages.get();
+  Object.keys(pagesStore).forEach((key) => {
+    setVar(key, `${key}.appPages`, pagesStore[key]);
+    ExecuteInstance.VarsProxy[`${key}.appPages`] = pagesStore[key];
+  });
+};
+onMount($pages, () => {
+  refreshPageStoreVar();
+});
+onNotify($pages, () => {
+  refreshPageStoreVar();
+});
+
+function addPageToApplicationAction(page, application_id) {
+  $pages.set({
+    ...$pages.get(),
+    [application_id]: [page, ...$pages.get()[application_id] || []]
+  });
+  const pages = $pages.get()[application_id];
+  setVar(application_id, `${application_id}.appPages`, pages);
+}
+
+function updatePageAction(page, application_id) {
+  $pages.set({
+    ...$pages.get(),
+    [application_id]: [...$pages.get()[application_id].map((oldPage) => {
+      if (oldPage.uuid == page.uuid) {
+        return page;
+      }
+      return oldPage;
+    }) || []]
+  });
+  const pages = $pages.get()[application_id];
+  setVar(application_id, `${application_id}.appPages`, pages);
+}
+
+const addPageHandler = (page, resolve, reject) => {
+  fetch(`/api/pages`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ page: { ...page, application_id: $currentApplication.get().uuid } })
+  }).then((res) => res.json()).then(
+    (page2) => {
+      if (resolve) {
+        resolve(page2);
+      }
+      addPageToApplicationAction(page2, $currentApplication.get().uuid);
+    }
+  ).catch((error) => {
+    if (reject) {
+      reject(error);
+    }
+  });
+};
+let lastPageUpdateTime = 0;
+const PAGE_UPDATE_DEBOUNCE_MS = 100;
+const updatePageHandler = (page, callback) => {
+  fetch("/api/pages/" + page.uuid, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ page })
+  }).then((res) => res.json()).then((res) => {
+    updatePageAction(res, $currentApplication.get().uuid);
+    const now = Date.now();
+    if (now - lastPageUpdateTime > PAGE_UPDATE_DEBOUNCE_MS) {
+      lastPageUpdateTime = now;
+      eventDispatcher.emit("Vars:currentPage");
+    }
+    if (callback) {
+      callback(res);
+    }
+  });
+};
+
+function addComponentToCurrentPageAction(componentId) {
+  const currentApp = $currentApplication.get();
+  const currentAppId = currentApp.uuid;
+  const currentPageId = ExecuteInstance.Vars.currentPage;
+  const currentPages = $pages.get();
+  const currentPage = currentPages[currentAppId].find((page) => page.uuid === currentPageId);
+  if (currentPage) {
+    const { component_ids = [] } = currentPage;
+    component_ids.push(componentId);
+    const updatedPage = { ...currentPage, component_ids };
+    const updatedPages = {
+      ...currentPages,
+      [currentAppId]: currentPages[currentAppId].map(
+        (page) => page.uuid === currentPageId ? updatedPage : page
+      )
+    };
+    $pages.set(updatedPages);
+    updatePageHandler(updatedPage, (page) => {
+    });
+  }
+}
+
+const updateComponentHandler = (component, application_id) => {
+  const validationError = validateAndEmitErrors(component);
+  if (validationError instanceof Promise) return validationError;
+  const ucomponent = { ...component };
+  delete ucomponent.parent;
+  delete ucomponent.children;
+  delete ucomponent.childrens;
+  fetch(`${FRONT_API_URLS.COMPONENTS}/${ucomponent.uuid}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      component: { ...ucomponent, application_id }
+    })
+  }).then((res) => res.json()).catch((err) => {
+    eventDispatcher.emit("component:save-error", {
+      componentId: component.uuid,
+      error: err.message || "Failed to save component"
+    });
+    console.error(err);
+  });
+};
+
+const addComponentAction = (component, pageUUID, currentApplicationId, updateParent = true) => {
+  const currentComponentId = ExecuteInstance.Vars.selectedComponents?.[0]?.uuid;
+  const componentsStore = $components.get();
+  const components = componentsStore[currentApplicationId] || [];
+  const currentComponent = components.find((comp) => comp.uuid === currentComponentId);
+  const componentId = component.uuid ?? v4();
+  const newComponent = {
+    ...component,
+    uuid: componentId,
+    pageId: pageUUID,
+    application_id: currentApplicationId,
+    childrenIds: component.childrenIds ?? []
+    // Initialize childrenIds if necessary
+  };
+  if (!currentComponentId || currentComponent?.component_type !== ComponentType.Container && currentComponent?.component_type !== ComponentType.Collection && currentComponent?.component_type !== ComponentType.Link) {
+    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 (updateParent) {
+        const parentComponent = components.find((comp) => comp.uuid === currentComponentId);
+        if (parentComponent) {
+          if (!parentComponent.childrenIds) {
+            parentComponent.childrenIds = [];
+          }
+          parentComponent.childrenIds.push(componentId);
+          componentsStore[currentApplicationId] = components.map(
+            (comp) => comp.uuid === currentComponentId ? parentComponent : comp
+          );
+          setTimeout(() => {
+            updateComponentHandler(parentComponent, currentApplicationId);
+          }, 0);
+        }
+      }
+    } else {
+      addComponentToCurrentPageAction(componentId);
+    }
+  } else {
+    addComponentToCurrentPageAction(componentId);
+  }
+  componentsStore[currentApplicationId] = [...components, newComponent];
+  $components.set(componentsStore);
+  setTimeout(() => {
+    addComponentHandler({ component: newComponent }, currentApplicationId);
+  }, 10);
+  eventDispatcher.emit("component:refresh");
+};
+
+const deleteComponentActionHandler = async (uuid) => {
+  try {
+    const response = await fetch(`${FRONT_API_URLS.COMPONENTS}/${uuid}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
+
+function removeComponentToCurrentPageAction(removedComponentId) {
+  const currentApp = $currentApplication.get();
+  const currentAppId = currentApp.uuid;
+  const currentPageId = ExecuteInstance.Vars.currentPage;
+  const currentPages = $pages.get();
+  const currentPage = currentPages[currentAppId].find((page) => page.uuid === currentPageId);
+  if (currentPage) {
+    const { component_ids = [] } = currentPage;
+    const updatedComponentIds = component_ids.filter(
+      (componentId) => componentId !== removedComponentId
+    );
+    const updatedPage = { ...currentPage, component_ids: updatedComponentIds };
+    const updatedPages = {
+      ...currentPages,
+      [currentAppId]: currentPages[currentAppId].map(
+        (page) => page.uuid === currentPageId ? updatedPage : page
+      )
+    };
+    $pages.set(updatedPages);
+    updatePageHandler(updatedPage);
+  }
+}
+
+async function deleteComponentAction(componentId, application_id) {
+  const components = $components.get()[application_id];
+  const componentToDelete = components.find(
+    (component) => component.uuid === componentId
+  );
+  if (componentToDelete) {
+    if (componentToDelete.root) {
+      removeComponentToCurrentPageAction(componentId);
+    } else {
+      components.forEach((component) => {
+        if (component.childrenIds) {
+          const originalChildrenIds = [...component.childrenIds];
+          component.childrenIds = component.childrenIds.filter(
+            (childId) => childId !== componentId
+          );
+          if (originalChildrenIds.length !== component.childrenIds.length) {
+            updateComponentHandler(component, application_id);
+          }
+        }
+      });
+      $components.set({
+        ...$components.get(),
+        [application_id]: components
+      });
+    }
+    $components.set({
+      ...$components.get(),
+      [application_id]: components.filter(
+        (component) => component.uuid !== componentId
+      )
+    });
+    await deleteComponentActionHandler(componentId);
+    eventDispatcher.emit("component:deleted");
+  }
+}
+
+function moveDraggedComponent(dropInComponentId, draggedComponentId, position = "inside") {
+  const appUUID = $currentApplication.get().uuid;
+  const components = $componentWithChildren(appUUID).get();
+  let draggedComponent;
+  let parentOfDragged;
+  let oldIndexInParent = -1;
+  function findDraggedRecursively(comp) {
+    if (comp.uuid === draggedComponentId) {
+      draggedComponent = { ...comp };
+      return;
+    }
+    if (comp.childrenIds) {
+      for (const childId of comp.childrenIds) {
+        const child = components.find((c) => c.uuid === childId);
+        if (child) {
+          findDraggedRecursively(child);
+          if (draggedComponent) return;
+        }
+      }
+    }
+  }
+  parentOfDragged = components.find((c) => c.childrenIds?.includes(draggedComponentId));
+  for (const rootComp of components) {
+    findDraggedRecursively(rootComp);
+    if (draggedComponent) break;
+  }
+  if (!draggedComponent || draggedComponent.uuid === dropInComponentId) {
+    return;
+  }
+  if (!components.some((c) => c.uuid === draggedComponentId)) {
+    components.push({ ...draggedComponent });
+  }
+  const currentPageId = ExecuteInstance.Vars.currentPage;
+  const pagesForApp = $pages.get()[appUUID];
+  const pageIndex = pagesForApp.findIndex((page2) => page2.uuid === currentPageId);
+  if (pageIndex < 0) return;
+  const page = pagesForApp[pageIndex];
+  if (parentOfDragged) {
+    oldIndexInParent = parentOfDragged.childrenIds?.indexOf(draggedComponentId) ?? -1;
+    parentOfDragged.childrenIds = parentOfDragged.childrenIds?.filter((id) => id !== draggedComponentId);
+    updateComponentHandler(parentOfDragged, appUUID);
+  } else {
+    oldIndexInParent = page.component_ids.indexOf(draggedComponentId);
+    page.component_ids = page.component_ids.filter((id) => id !== draggedComponentId);
+    if ("root" in draggedComponent) {
+      draggedComponent.root = false;
+    }
+  }
+  const dropInComponent = components.find((c) => c.uuid === dropInComponentId);
+  if (!dropInComponent) {
+    const insertionIndex = oldIndexInParent >= 0 && oldIndexInParent <= page.component_ids.length ? oldIndexInParent : page.component_ids.length;
+    page.component_ids.splice(insertionIndex, 0, draggedComponentId);
+    draggedComponent.root = true;
+  } else {
+    const dropInIsContainer = Array.isArray(dropInComponent.childrenIds);
+    if (position === "inside" && dropInIsContainer) {
+      dropInComponent.childrenIds = dropInComponent.childrenIds || [];
+      const insertionIndex = oldIndexInParent >= 0 && oldIndexInParent <= dropInComponent.childrenIds.length ? oldIndexInParent : dropInComponent.childrenIds.length;
+      dropInComponent.childrenIds.splice(insertionIndex, 0, draggedComponentId);
+      updateComponentHandler(dropInComponent, appUUID);
+    } else {
+      const parentOfDropIn = components.find((c) => c.childrenIds?.includes(dropInComponentId));
+      if (parentOfDropIn) {
+        const indexOfDropIn = parentOfDropIn.childrenIds?.indexOf(dropInComponentId);
+        if (indexOfDropIn != null && indexOfDropIn >= 0) {
+          let insertIndex = indexOfDropIn;
+          if (position === "after") insertIndex += 1;
+          else if (position === "before") insertIndex = Math.max(0, insertIndex);
+          parentOfDropIn.childrenIds?.splice(insertIndex, 0, draggedComponentId);
+        } else {
+          parentOfDropIn.childrenIds?.push(draggedComponentId);
+        }
+        updateComponentHandler(parentOfDropIn, appUUID);
+      } else {
+        draggedComponent.root = true;
+        const dropInIndex = page.component_ids.indexOf(dropInComponentId);
+        if (dropInIndex >= 0) {
+          let insertIndex = dropInIndex;
+          if (position === "after") insertIndex += 1;
+          else if (position === "before") insertIndex = Math.max(0, insertIndex);
+          page.component_ids.splice(insertIndex, 0, draggedComponentId);
+        } else {
+          const insertionIndex = oldIndexInParent >= 0 && oldIndexInParent <= page.component_ids.length ? oldIndexInParent : page.component_ids.length;
+          page.component_ids.splice(insertionIndex, 0, draggedComponentId);
+        }
+      }
+    }
+  }
+  updateComponentHandler(draggedComponent, appUUID);
+  $components.setKey(appUUID, components);
+  updatePageAction(page, appUUID);
+  updatePageHandler(page);
+  eventDispatcher.emit("component:refresh");
+  console.log(`Moved ${draggedComponent.uuid} to ${position} ${dropInComponentId}`, draggedComponent);
+}
+
+function setCurrentComponentIdAction(componentId) {
+  $currentComponentId.set(componentId);
+}
+
+function setDraggingComponentInfo(draggingComponentInfo) {
+  if (draggingComponentInfo) {
+    $draggingComponentInfo.set({
+      ...draggingComponentInfo
+    });
+  } else {
+    $draggingComponentInfo.set(null);
+  }
+}
+
+function setHoveredComponentAction(component) {
+  $hoveredComponent.set(component);
+}
+
+function updateComponentName(application_id, componentId, updatedName, save = true) {
+  const componentsStore = $components.get();
+  const applicationComponents = componentsStore[application_id] || [];
+  const componentIndex = applicationComponents.findIndex(
+    (component) => component.uuid === componentId
+  );
+  if (componentIndex !== -1) {
+    const componentToUpdate = applicationComponents[componentIndex];
+    const currentName = componentToUpdate.name || "";
+    if (!deepEqual(currentName, updatedName)) {
+      componentToUpdate.name = updatedName;
+      $components.setKey(`${application_id}[${componentIndex}]`, componentToUpdate);
+      if (save) {
+        setTimeout(() => {
+          updateComponentHandler(componentToUpdate, application_id);
+        }, 0);
+      }
+      const pagesStore = $pages.get();
+      Object.keys(pagesStore).forEach((key) => {
+        setVar(key, `${key}.appPages`, pagesStore[key]);
+        ExecuteInstance.VarsProxy[`${key}.appPages`] = [...pagesStore[key]];
+      });
+      eventDispatcher.emit("component:updated");
+      refreshPageStoreVar();
+    }
+  }
+}
+
+function formatValidationErrors(errors) {
+  if (errors.length === 0) return "";
+  if (errors.length === 1) {
+    return `Security violation: ${errors[0].message}`;
+  }
+  return `Found ${errors.length} security violations:
+${errors.map(
+    (e, i) => `${i + 1}. ${e.code || "Handler"}: ${e.message}`
+  ).join("\n")}`;
+}
+
+function updateComponentAttributes(application_id, componentId, updateType, updatedAttributes, save = true) {
+  const currentPlatform = ExecuteInstance.Vars.currentPlatform ?? {
+    platform: "desktop",
+    isMobile: false
+  };
+  const componentsStore = $components.get();
+  const applicationComponents = componentsStore[application_id] || [];
+  const componentIndex = applicationComponents.findIndex(
+    (component) => component.uuid === componentId
+  );
+  if (componentIndex !== -1) {
+    const componentToUpdate = applicationComponents[componentIndex];
+    let currentAttributes = {};
+    let desktopAttributes = {};
+    if (updateType === "style" || updateType === "input") {
+      desktopAttributes = componentToUpdate[updateType] || {};
+      if (currentPlatform.platform !== "desktop") {
+        componentToUpdate.breakpoints = componentToUpdate.breakpoints || {};
+        componentToUpdate.breakpoints[currentPlatform.width] = componentToUpdate.breakpoints[currentPlatform.width] || {};
+        componentToUpdate.breakpoints[currentPlatform.width][updateType] = componentToUpdate.breakpoints[currentPlatform.width][updateType] ?? {};
+        currentAttributes = componentToUpdate.breakpoints[currentPlatform.width][updateType];
+      } else {
+        currentAttributes = componentToUpdate[updateType] || {};
+      }
+    } else {
+      currentAttributes = componentToUpdate[updateType] || {};
+    }
+    let needsUpdate = false;
+    for (const key of Object.keys(updatedAttributes)) {
+      if (!deepEqual(currentAttributes[key], updatedAttributes[key])) {
+        needsUpdate = true;
+        break;
+      }
+    }
+    if (needsUpdate) {
+      const hasOriginalUpdateType = updateType in componentToUpdate;
+      const hasOriginalBreakpoints = "breakpoints" in componentToUpdate;
+      const originalState = {
+        [updateType]: hasOriginalUpdateType ? structuredClone(componentToUpdate[updateType]) : void 0,
+        breakpoints: hasOriginalBreakpoints ? structuredClone(componentToUpdate.breakpoints) : void 0,
+        hasUpdateType: hasOriginalUpdateType,
+        hasBreakpoints: hasOriginalBreakpoints
+      };
+      if ((updateType === "style" || updateType === "input" && updatedAttributes.type !== "handler") && currentPlatform.platform !== "desktop") {
+        componentToUpdate.breakpoints = componentToUpdate.breakpoints || {};
+        componentToUpdate.breakpoints[currentPlatform.width] = componentToUpdate.breakpoints[currentPlatform.width] || {};
+        for (const [key, value] of Object.entries(updatedAttributes)) {
+          if (deepEqual(value, desktopAttributes[key])) {
+            delete componentToUpdate.breakpoints[currentPlatform.width][updateType][key];
+          } else {
+            if (value.type === "handler") {
+              componentToUpdate[updateType][key] = value;
+            } else {
+              componentToUpdate.breakpoints[currentPlatform.width][updateType] = componentToUpdate.breakpoints[currentPlatform.width][updateType] || {};
+              componentToUpdate.breakpoints[currentPlatform.width][updateType][key] = value;
+            }
+          }
+        }
+        const breakpointAttributes = componentToUpdate.breakpoints[currentPlatform.width];
+        if (Object.keys(breakpointAttributes).every((type) => Object.keys(breakpointAttributes[type]).length === 0)) {
+          delete componentToUpdate.breakpoints[currentPlatform.width];
+        }
+        if (Object.keys(componentToUpdate.breakpoints).length === 0) {
+          delete componentToUpdate.breakpoints;
+        }
+      } else {
+        componentToUpdate[updateType] = {
+          ...currentAttributes,
+          ...updatedAttributes
+        };
+      }
+      const validationResult = validateComponentHandlers(componentToUpdate);
+      if (!validationResult.valid) {
+        if (originalState.hasUpdateType) {
+          componentToUpdate[updateType] = originalState[updateType];
+        } else {
+          delete componentToUpdate[updateType];
+        }
+        if (originalState.hasBreakpoints) {
+          componentToUpdate.breakpoints = originalState.breakpoints;
+        } else {
+          delete componentToUpdate.breakpoints;
+        }
+        const errorMessage = formatValidationErrors(validationResult.errors);
+        eventDispatcher.emit("component:validation-error", {
+          componentId: componentToUpdate.uuid,
+          errors: validationResult.errors,
+          message: errorMessage
+        });
+        eventDispatcher.emit("kernel:log", {
+          type: "error",
+          message: "Handler Validation Failed",
+          details: errorMessage,
+          errors: validationResult.errors
+        });
+        console.error("Handler validation failed:", validationResult.errors);
+        return;
+      }
+      $components.setKey(`${application_id}[${componentIndex}]`, componentToUpdate);
+      if (save) {
+        setTimeout(() => {
+          updateComponentHandler(componentToUpdate, application_id);
+        }, 0);
+      }
+      const selectedComponents = ExecuteInstance.VarsProxy.selectedComponents;
+      const index = selectedComponents.findIndex((c) => c.uuid === componentToUpdate.uuid);
+      if (index !== -1) {
+        ExecuteInstance.VarsProxy.selectedComponents[index] = componentToUpdate;
+      }
+      eventDispatcher.emit("component:updated");
+      eventDispatcher.emit(`component-updated:${String(componentId)}`);
+    }
+  }
+}
+
+function copyCpmponentToClipboard(component) {
+  delete component.parent;
+  delete component.children;
+  delete component.childrens;
+  const application_id = component.application_id;
+  const currentApplicationComponents = $applicationComponents(application_id).get();
+  const currentComponent = currentApplicationComponents.find((c) => c.uuid === component.uuid);
+  const componentChildrenIDs = extractAllChildrenIds(currentApplicationComponents, currentComponent);
+  const childrenComponents = componentChildrenIDs.map((childId) => currentApplicationComponents.find((c) => c.uuid === childId));
+  delete currentComponent.parent;
+  delete currentComponent.children;
+  delete currentComponent.childrens;
+  const schema = generateNuralyClipboardStructure(currentComponent, childrenComponents);
+  navigator.clipboard.writeText(JSON.stringify(schema, null, 2)).then(() => {
+  }).catch((err) => {
+    console.error("Error while copying:", err);
+  });
+}
+function pasteComponentFromClipboard() {
+  navigator.clipboard.readText().then((clipboardText) => {
+    traitCompoentFromSchema(clipboardText);
+  }).catch((err) => {
+    console.error("Error while reading the text:", err);
+  });
+}
+function traitCompoentFromSchema(clipboardText) {
+  try {
+    const schema = JSON.parse(clipboardText);
+    if (schema.version !== "1.0") {
+      console.error("Schema version not supported");
+      return;
+    } else {
+      const newSchema = transformSchemaWithNewUUIDs(schema);
+      const [rootComponents, childrens] = findRootAndChildren(newSchema);
+      const application_id = $currentApplication.get()?.uuid;
+      const currentPage = ExecuteInstance.Vars.currentPage;
+      childrens.forEach(
+        (component) => {
+          delete component.root;
+          addComponentAction(component, currentPage, application_id, false);
+        }
+      );
+      rootComponents.forEach((component) => {
+        delete component.root;
+        addComponentAction(component, currentPage, application_id);
+      });
+    }
+  } catch (err) {
+    console.error("Error while reading the text:", err);
+  }
+}
+function generateNuralyClipboardStructure(component, childrenComponents) {
+  const NuralySchema = {
+    version: "1.0",
+    components: [
+      component,
+      ...childrenComponents
+    ]
+  };
+  return NuralySchema;
+}
+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);
+    });
+  }
+  schema.components.forEach((component) => {
+    const newUUID = generateUUID();
+    uuidMap.set(component.uuid, newUUID);
+    component.uuid = newUUID;
+  });
+  schema.components.forEach((component) => {
+    component.childrenIds = component.childrenIds.map((oldUUID) => uuidMap.get(oldUUID) || oldUUID);
+    component.name += `_${Math.random().toString(36).substring(2, 6)}`;
+  });
+  return schema;
+}
+function findRootAndChildren(data) {
+  const allComponents = data.components;
+  const childIds = new Set(allComponents.flatMap((comp) => comp.childrenIds));
+  const rootComponents = allComponents.filter((comp) => !childIds.has(comp.uuid));
+  const otherComponents = allComponents.filter((comp) => childIds.has(comp.uuid));
+  return [rootComponents, otherComponents];
+}
+
+const GenerateName = (componentType) => {
+  const randomNumber = Math.floor(Math.random() * 1e4);
+  return `${componentType}_${randomNumber}`;
+};
+
+function createComponentFunctions(runtimeContext) {
+  const { applications } = runtimeContext;
+  return {
+    /**
+     * Gets a component by UUID
+     */
+    GetComponent: (componentUuid, application_id) => {
+      return EditorInstance.components.find((c) => c.uuid === componentUuid);
+    },
+    /**
+     * Gets multiple components by their IDs
+     */
+    GetComponents: (componentIds) => {
+      return Object.values(applications).flat().filter((c) => componentIds.includes(c.uuid));
+    },
+    /**
+     * Adds a new component to the page
+     */
+    AddComponent: ({ application_id, pageId, componentType, additionalData }) => {
+      const generatedName = GenerateName(componentType);
+      addComponentAction({ name: generatedName, component_type: componentType, ...additionalData }, pageId, application_id);
+    },
+    /**
+     * Deletes a component with confirmation
+     */
+    DeleteComponentAction: (component) => {
+      const userInput = confirm("Are you sure you want to delete this component?");
+      if (userInput) {
+        deleteComponentAction(component.uuid, component.application_id);
+      }
+    },
+    /**
+     * Copies component to clipboard
+     */
+    CopyComponentToClipboard: (component) => {
+      copyCpmponentToClipboard(component);
+    },
+    /**
+     * Pastes component from clipboard
+     */
+    PasteComponentFromClipboard: () => {
+      pasteComponentFromClipboard();
+    }
+  };
+}
+
+function createComponentPropertyFunctions() {
+  return {
+    /**
+     * Updates component name
+     */
+    updateName: (component, componentName) => {
+      updateComponentName(component.application_id, component.uuid, componentName);
+    },
+    /**
+     * Updates component input property
+     */
+    updateInput: (component, inputName, handlerType, handlerValue) => {
+      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
+     */
+    updateEvent: (component, symbol, value) => {
+      const eventData = { [symbol]: value };
+      updateComponentAttributes(component.application_id, component.uuid, "event", eventData);
+    },
+    /**
+     * Updates component style, supporting pseudo-states
+     */
+    updateStyle: (component, symbol, value) => {
+      const selectedState = ExecuteInstance.Vars.selected_component_style_state;
+      let eventData;
+      if (selectedState && selectedState !== "default") {
+        const existingPseudoStateStyles = component.style?.[selectedState] || {};
+        eventData = {
+          [selectedState]: {
+            ...existingPseudoStateStyles,
+            [symbol]: value
+          }
+        };
+      } else {
+        eventData = { [symbol]: value };
+      }
+      updateComponentAttributes(component.application_id, component.uuid, "style", eventData);
+    },
+    /**
+     * Updates component style handlers
+     */
+    updateStyleHandlers: (component, symbol, value) => {
+      updateComponentAttributes(component.application_id, component.uuid, "styleHandlers", { [symbol]: value });
+    }
+  };
+}
+
+const refreshPagesActionHandler = async (uuid) => {
+  try {
+    const response = await fetch(`${FRONT_API_URLS.REFRESH_PAGES}/${uuid}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const pages = await response.json();
+    $pages.set(
+      { ...$pages.get(), [uuid]: pages }
+    );
+    refreshPageStoreVar();
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
+
+const deletePageHandler = async (page, callback) => {
+  try {
+    const response = await fetch(`/api/pages/${page.uuid}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ page })
+    });
+    const res = await response.json();
+    refreshPagesActionHandler(page.application_id);
+    if (callback) {
+      callback(res);
+    }
+  } catch (error) {
+    console.error("Error deleting page:", error);
+  }
+};
+
+function deletePageAction(page) {
+  deletePageHandler(page);
+  $applicationPages(page.application_id).get();
+}
+
+function createPageFunctions() {
+  return {
+    /**
+     * Adds a new page
+     */
+    AddPage: (page) => {
+      return new Promise((resolve) => {
+        addPageHandler(page, (page2) => {
+          resolve(page2);
+        });
+      });
+    },
+    /**
+     * Updates an existing page
+     */
+    UpdatePage: (page) => {
+      return new Promise((resolve) => {
+        updatePageHandler(page, (page2) => {
+          resolve(page2);
+        });
+      });
+    },
+    /**
+     * Deletes a page with confirmation
+     */
+    deletePage: (page) => {
+      const userInput = confirm("Are you sure you want to delete this page?");
+      if (userInput) {
+        deletePageAction(page);
+      }
+    }
+  };
+}
+
+function addTempApplication(uuid, components) {
+  $components.set({
+    ...$components.get(),
+    [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);
+}
+
+function closeCreateApplicationModalAction() {
+  $showCreateApplicationModal.set(false);
+}
+
+function setPermissionMessage(message) {
+  $permissionsState.set({
+    ...$permissionsState.get(),
+    message
+  });
+}
+
+function loadOrRefreshApplications() {
+  fetch("/api/applications", {
+    method: "GET"
+  }).then((res) => res.json()).then((res) => {
+    setApplication(res);
+    closeCreateApplicationModalAction();
+  });
+}
+function createApplicationAction(application) {
+  fetch("/api/applications", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(application)
+  }).then((res) => res.json()).then((res) => {
+    loadOrRefreshApplications();
+  });
+}
+function deleteApplicationAction(application_id) {
+  fetch("/api/applications/" + application_id, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }).then((res) => res.json()).then((res) => {
+    loadOrRefreshApplications();
+  });
+}
+function updateApplicationActionHandler(application) {
+  const { uuid } = application;
+  delete application.uuid;
+  fetch("/api/applications/" + uuid, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(application)
+  }).then((res) => res.json()).then((res) => {
+    loadOrRefreshApplications();
+  });
+}
+function addPermission({ resource_id, resource_type, user_id, permission_type }) {
+  fetch("/api/permissions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      resource_id,
+      resource_type,
+      permission_type,
+      user_id
+    })
+  }).then((res) => res.json()).then((res) => {
+    setPermissionMessage(res.message);
+  });
+}
+
+function updateApplication(attribute) {
+  $currentApplication.set({
+    ...$currentApplication.get(),
+    ...attribute
+  });
+  updateApplicationActionHandler($currentApplication.get());
+}
+
+function createApplicationFunctions() {
+  return {
+    /**
+     * Updates an application
+     */
+    UpdateApplication: (application) => {
+      updateApplication(application);
+    }
+  };
+}
+
+function createNavigationFunctions() {
+  return {
+    /**
+     * Navigates to a URL
+     */
+    NavigateToUrl: (url) => {
+      window.location.href = url;
+      ExecuteInstance.Event?.preventDefault?.();
+      ExecuteInstance.Event?.stopPropagation?.();
+    },
+    /**
+     * Navigates to a hash anchor and scrolls to it
+     */
+    NavigateToHash: (hash) => {
+      window.location.hash = hash;
+      if (hash) {
+        const element = document.querySelector(hash);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+      ExecuteInstance.Event?.preventDefault?.();
+      ExecuteInstance.Event?.stopPropagation?.();
+    },
+    /**
+     * Navigates to a page by name within the current application
+     */
+    NavigateToPage: (pageName) => {
+      ExecuteInstance.Event?.preventDefault?.();
+      ExecuteInstance.Event?.stopPropagation?.();
+      const currentEditingApplication = ExecuteInstance.GetVar("currentEditingApplication");
+      const appPages = ExecuteInstance.GetContextVar(
+        currentEditingApplication?.uuid + ".appPages",
+        currentEditingApplication?.uuid
+      );
+      const targetPage = appPages?.find((pageItem) => pageItem.name === pageName);
+      if (targetPage) {
+        ExecuteInstance.VarsProxy.currentPage = targetPage.uuid;
+      }
+    }
+  };
+}
+
+function createStorageFunctions() {
+  return {
+    /**
+     * Uploads one or more files to storage
+     * 
+     * @param files - Single file or array of files to upload
+     * @param folderPath - Destination folder path
+     * @returns Upload result(s)
+     */
+    UploadFile: async (files, folderPath = "my-folder") => {
+      const fileArray = Array.isArray(files) ? files : [files];
+      const results = [];
+      for (const file of fileArray) {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("fileName", file.name);
+        formData.append("contentType", file.type || "");
+        try {
+          const response = await fetch(`/api/v1/storage/files/${folderPath}`, {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            throw new Error(`Upload failed with status ${response.status}`);
+          }
+          const result = await response.json();
+          EditorInstance.Console.log({ message: "Upload success", data: result });
+          results.push(result);
+        } catch (err) {
+          EditorInstance.Console.error({ message: "Upload failed", error: err });
+          throw err;
+        }
+      }
+      return results.length === 1 ? results[0] : results;
+    },
+    /**
+     * Browses files in a folder with pagination support
+     * 
+     * @param folderPath - Folder path to browse
+     * @param options - Browse options (continuation token, limit)
+     * @returns List of files and continuation token
+     */
+    BrowseFiles: async (folderPath = "my-folder", options = {}) => {
+      try {
+        const { continuation = null, limit = 100 } = options;
+        let url = `/api/v1/storage/browse/${folderPath}`;
+        const params = new URLSearchParams();
+        if (continuation) params.append("continuation", continuation);
+        if (limit) params.append("limit", limit.toString());
+        if (params.toString()) {
+          url += `?${params.toString()}`;
+        }
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "accept": "*/*"
+          }
+        });
+        if (!response.ok) {
+          throw new Error(`Browse failed with status ${response.status}`);
+        }
+        const result = await response.json();
+        EditorInstance.Console.log({ message: "Browse success", data: result });
+        return result;
+      } catch (err) {
+        EditorInstance.Console.error({ message: "Browse failed", error: err });
+        throw err;
+      }
+    }
+  };
+}
+
+const invokeFunctionHandler = (functionId, data) => {
+  return fetch(`${FRONT_API_URLS.FUNCTIONS}/invoke/${functionId}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      data
+    })
+  });
+};
+
+const loadFunctionsHandler = async () => {
+  return await fetch(`${FRONT_API_URLS.FUNCTIONS}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  }).then((res) => res.json());
+};
+
+function createFunctionInvocationFunctions() {
+  return {
+    /**
+     * Invokes a studio function by name
+     * 
+     * @param name - Function name to invoke
+     * @param payload - Data to pass to the function
+     * @returns Function execution result
+     */
+    InvokeFunction: async (name, payload = {}) => {
+      if (!ExecuteInstance.Vars.studio_functions) {
+        const functions = await loadFunctionsHandler();
+        ExecuteInstance.VarsProxy.studio_functions = [...functions];
+      }
+      const targetFunction = (ExecuteInstance.Vars.studio_functions ?? []).find((_function) => _function.label === name);
+      try {
+        const result = await invokeFunctionHandler(targetFunction.id, payload);
+        const contentType = result.headers?.get("Content-Type") || "";
+        if (contentType.includes("application/json")) {
+          const jsonData = await result.json();
+          return jsonData;
+        } else {
+          const textData = await result.text();
+          return textData;
+        }
+      } catch (error) {
+        console.error("Error in InvokeFunctionHandler:", error);
+      }
+    }
+  };
+}
+
+function openEditorTab(tab) {
+  const isTabOpen = $editorState.get().tabs.find((t) => t.id === tab.id);
+  if (!isTabOpen) {
+    $editorState.set({
+      ...$editorState.get(),
+      tabs: [...$editorState.get().tabs, tab]
+    });
+  }
+}
+
+function setCurrentEditorTab(tab) {
+  $editorState.set({
+    ...$editorState.get(),
+    currentTab: tab
+  });
+}
+
+var ViewMode = /* @__PURE__ */ ((ViewMode2) => {
+  ViewMode2["Edit"] = "edit";
+  ViewMode2["Preview"] = "preview";
+  return ViewMode2;
+})(ViewMode || {});
+const $environment = atom(
+  {
+    mode: "edit" /* Edit */
+  }
+);
+keepMount($environment);
+
+function createEditorFunctions() {
+  return {
+    /**
+     * Opens an editor tab
+     */
+    openEditorTab,
+    /**
+     * Sets the current active editor tab
+     */
+    setCurrentEditorTab,
+    /**
+     * Creates components from schema text
+     */
+    TraitCompoentFromSchema: (text) => {
+      traitCompoentFromSchema(text);
+    }
+  };
+}
+
+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');
+     */
+    ShowErrorToast: (message, duration = 5e3) => {
+      return showToast({ message, type: "error", duration });
+    },
+    /**
+     * Shows a warning toast (convenience function)
+     * @param message - Warning message
+     * @param duration - Display duration in milliseconds (default: 4000)
+     * @returns Toast ID
+     *
+     * @example
+     * ShowWarningToast('This action cannot be undone');
+     */
+    ShowWarningToast: (message, duration = 4e3) => {
+      return showToast({ message, type: "warning", duration });
+    },
+    /**
+     * Shows an info toast (convenience function)
+     * @param message - Info message
+     * @param duration - Display duration in milliseconds (default: 3000)
+     * @returns Toast ID
+     *
+     * @example
+     * ShowInfoToast('Loading data...');
+     */
+    ShowInfoToast: (message, duration = 3e3) => {
+      return showToast({ message, type: "info", duration });
+    },
+    /**
+     * Hides a specific toast by ID
+     * @param id - Toast ID returned from ShowToast
+     *
+     * @example
+     * const toastId = ShowToast('Processing...', 'info', { duration: 0 });
+     * // ... later
+     * HideToast(toastId);
+     */
+    HideToast: (id) => {
+      hideToast(id);
+    },
+    /**
+     * Clears all active toasts
+     *
+     * @example
+     * ClearAllToasts();
+     */
+    ClearAllToasts: () => {
+      clearAllToasts();
+    }
+  };
+}
+
+function createGlobalHandlerFunctions(runtimeContext) {
+  return {
+    ...createVariableFunctions(runtimeContext),
+    ...createComponentFunctions(runtimeContext),
+    ...createComponentPropertyFunctions(),
+    ...createPageFunctions(),
+    ...createApplicationFunctions(),
+    ...createNavigationFunctions(),
+    ...createStorageFunctions(),
+    ...createFunctionInvocationFunctions(),
+    ...createEditorFunctions(),
+    ...createToastFunctions()
+  };
+}
+
+function getContextFromComponent(component) {
+  return component?.__microAppContext?.runtimeContext || ExecuteInstance;
+}
+function executeHandler(component, code, EventData = {}, item = {}) {
+  const context = getContextFromComponent(component);
+  setupRuntimeContext(context, component, EventData);
+  if (isServer$2) {
+    return;
+  }
+  const runtimeContext = extractRuntimeContext(context);
+  const globalFunctions = createGlobalHandlerFunctions(runtimeContext);
+  let compiledFunction;
+  try {
+    compiledFunction = compileHandlerFunction(code);
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : "Unknown compilation error";
+    if (globalFunctions.ShowErrorToast) {
+      globalFunctions.ShowErrorToast(errorMessage, 5e3);
+    }
+    throw error;
+  }
+  const customConsole = {
+    log: EditorInstance.Console.log,
+    warn: EditorInstance.Console.warn,
+    error: EditorInstance.Console.error,
+    info: EditorInstance.Console.info,
+    debug: EditorInstance.Console.debug
+  };
+  return compiledFunction(
+    Database,
+    eventDispatcher,
+    runtimeContext.PropertiesProxy,
+    EditorInstance,
+    runtimeContext.Event,
+    JSON.parse(JSON.stringify(item ?? {})),
+    runtimeContext.Current,
+    runtimeContext.currentPlatform,
+    runtimeContext.Values,
+    runtimeContext.Apps,
+    runtimeContext.VarsProxy,
+    globalFunctions.SetVar,
+    globalFunctions.GetContextVar,
+    globalFunctions.UpdateApplication,
+    globalFunctions.GetVar,
+    globalFunctions.GetComponent,
+    globalFunctions.GetComponents,
+    globalFunctions.AddComponent,
+    globalFunctions.SetContextVar,
+    globalFunctions.AddPage,
+    globalFunctions.TraitCompoentFromSchema,
+    globalFunctions.NavigateToUrl,
+    globalFunctions.NavigateToHash,
+    globalFunctions.NavigateToPage,
+    globalFunctions.UpdatePage,
+    runtimeContext.context,
+    runtimeContext.applications,
+    globalFunctions.updateInput,
+    globalFunctions.updateInputHandlers,
+    globalFunctions.deletePage,
+    globalFunctions.CopyComponentToClipboard,
+    globalFunctions.PasteComponentFromClipboard,
+    globalFunctions.DeleteComponentAction,
+    globalFunctions.updateName,
+    globalFunctions.updateEvent,
+    globalFunctions.updateStyleHandlers,
+    EventData,
+    globalFunctions.updateStyle,
+    globalFunctions.openEditorTab,
+    globalFunctions.setCurrentEditorTab,
+    globalFunctions.InvokeFunction,
+    RuntimeHelpers,
+    // Passed as "Utils" parameter for handler code
+    customConsole,
+    globalFunctions.UploadFile,
+    globalFunctions.BrowseFiles,
+    component.Instance || {},
+    // Component instance state (used by micro-apps)
+    globalFunctions.ShowToast,
+    globalFunctions.ShowSuccessToast,
+    globalFunctions.ShowErrorToast,
+    globalFunctions.ShowWarningToast,
+    globalFunctions.ShowInfoToast,
+    globalFunctions.HideToast,
+    globalFunctions.ClearAllToasts
+  );
+}
+
+class RuntimeContextHelpers {
+  /**
+   * Create a reactive proxy for an object with configurable event dispatching.
+   *
+   * This proxy tracks property access and changes, maintains listeners,
+   * and emits events when properties are modified.
+   *
+   * @param target - Object to wrap with proxy
+   * @param config - Configuration for proxy behavior
+   * @returns Reactive proxy for the target object
+   *
+   * @example
+   * ```typescript
+   * const proxy = RuntimeContextHelpers.createReactiveProxy(myObject, {
+   *   eventPrefix: 'microapp:123',
+   *   scope: 'Vars',
+   *   listeners: this.listeners,
+   *   current: this.Current,
+   *   onPropertyChange: (prop, value, listeners) => {
+   *     listeners.forEach(name => {
+   *       eventDispatcher.emit(`${eventPrefix}:changed:${name}`, { prop, value });
+   *     });
+   *   }
+   * });
+   * ```
+   */
+  static createReactiveProxy(target, config) {
+    const { eventPrefix, scope, listeners, current, onPropertyChange, debug = false } = 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();
+        }
+        if (current.name) {
+          listeners[String(prop)].add(current.name);
+        }
+        if (typeof value === "object" && value !== null) {
+          return RuntimeContextHelpers.createNestedProxy(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) {
+          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)
+          });
+        }
+        return result;
+      }
+    });
+  }
+  /**
+   * Create a nested proxy for object properties.
+   *
+   * Nested proxies maintain the same reactive behavior as the parent proxy
+   * but track changes to nested properties separately.
+   *
+   * @param target - Nested object to wrap
+   * @param config - Configuration including parent property name
+   * @returns Reactive proxy for nested object
+   */
+  static createNestedProxy(target, config) {
+    const { eventPrefix, scope, listeners, current, parentProp, debug = false } = config;
+    return new Proxy(target, {
+      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 (!valuesEqual) {
+          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,
+              ctx: current
+            });
+          });
+          if (scope) {
+            const eventName = eventPrefix ? `${eventPrefix}:${scope}:${parentProp}.${String(prop)}` : `${scope}:${parentProp}.${String(prop)}`;
+            eventDispatcher.emit(eventName, {
+              prop,
+              value,
+              oldValue,
+              parent: parentProp
+            });
+          }
+        }
+        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
+            });
+          });
+        }
+        return result;
+      }
+    });
+  }
+  /**
+   * Create a values proxy for component Instance property.
+   *
+   * This proxy provides reactive access to component runtime values,
+   * reading from and writing to a configurable backend store.
+   *
+   * @param component - Component to create values proxy for
+   * @param backend - Backend store interface
+   * @param onValueChange - Callback when value changes
+   * @param cache - Optional WeakMap cache for proxy reuse
+   * @returns Reactive proxy for component values
+   *
+   * @example
+   * ```typescript
+   * // For global RuntimeContext
+   * const proxy = RuntimeContextHelpers.createValuesProxy(component, {
+   *   get: (id, prop) => $runtimeValues.get()[id]?.[prop],
+   *   set: (id, prop, value) => setComponentRuntimeValue(id, prop, value),
+   *   has: (id, prop) => prop in ($runtimeValues.get()[id] || {})
+   * }, (id, prop, value) => {
+   *   eventDispatcher.emit(`component:value:set:${id}`, { prop, value });
+   * });
+   *
+   * // For MicroAppRuntimeContext
+   * const proxy = RuntimeContextHelpers.createValuesProxy(component, {
+   *   get: (id, prop) => storeContext.getRuntimeValue(id, prop),
+   *   set: (id, prop, value) => storeContext.setRuntimeValue(id, prop, value),
+   *   has: (id, prop) => storeContext.getRuntimeValue(id, prop) !== undefined
+   * }, (id, prop, value) => {
+   *   eventDispatcher.emit(`${eventNamespace}:component-instance-changed:${id}`, { prop, value });
+   * });
+   * ```
+   */
+  static createValuesProxy(component, backend, onValueChange, cache) {
+    if (cache?.has(component)) {
+      return cache.get(component);
+    }
+    const componentId = component.uuid || component.uniqueUUID;
+    if (!componentId) {
+      console.error("Cannot create values proxy: component UUID is undefined", component);
+      return {};
+    }
+    const valuesProxy = new Proxy({}, {
+      get: (target, prop) => {
+        return backend.get(componentId, prop);
+      },
+      set: (target, prop, value) => {
+        const oldValue = backend.get(componentId, prop);
+        backend.set(componentId, prop, value);
+        if (!deepEqual(oldValue, value)) {
+          onValueChange(componentId, prop, value, oldValue);
+        }
+        return true;
+      },
+      has: (target, prop) => {
+        return backend.has(componentId, prop);
+      },
+      deleteProperty: (target, prop) => {
+        if (backend.delete) {
+          backend.delete(componentId, prop);
+          onValueChange(componentId, prop, void 0);
+        }
+        return true;
+      },
+      ownKeys: (target) => {
+        if (backend.keys) {
+          return backend.keys(componentId);
+        }
+        return [];
+      },
+      getOwnPropertyDescriptor: (target, prop) => {
+        if (backend.has(componentId, prop)) {
+          return {
+            enumerable: true,
+            configurable: true
+          };
+        }
+        return void 0;
+      }
+    });
+    if (cache) {
+      cache.set(component, valuesProxy);
+    }
+    return valuesProxy;
+  }
+  /**
+   * Register component hierarchy (parent-child relationships).
+   *
+   * This shared logic resolves component childrenIds into actual component
+   * references and sets up bidirectional parent-child relationships.
+   *
+   * @param components - Array of components to process
+   * @param getComponentByUUID - Function to retrieve component by UUID
+   * @param debug - Optional debug logging
+   *
+   * @example
+   * ```typescript
+   * RuntimeContextHelpers.registerComponentHierarchy(
+   *   components,
+   *   (uuid) => this.applications[appUUID][uuid],
+   *   DEBUG
+   * );
+   * ```
+   */
+  static registerComponentHierarchy(components, getComponentByUUID, debug = false) {
+    components.forEach((component) => {
+      if (!component.children) {
+        component.children = [];
+      }
+      if (component.childrenIds && Array.isArray(component.childrenIds) && component.childrenIds.length > 0) {
+        component.children = component.childrenIds.map((childId) => {
+          const child = getComponentByUUID(childId);
+          if (!child && debug) {
+            console.warn(
+              `Warning: Child component with UUID "${childId}" not found for parent "${component.name}" (UUID: ${component.uuid})`
+            );
+          }
+          return child;
+        }).filter(Boolean);
+        component.children.forEach((child) => {
+          child.parent = component;
+        });
+      }
+    });
+  }
+}
+
+const DEBUG = false;
+class RuntimeContext {
+  /**
+   * Private constructor to enforce singleton pattern.
+   * Initializes the executor system and sets up event listeners.
+   */
+  constructor() {
+    /** Global context registry */
+    this.context = {};
+    /** Applications registry by ID */
+    this.applications = {};
+    /** Applications registry by name */
+    this.Apps = {};
+    /** Component values registry */
+    this.Values = {};
+    /** Component properties registry */
+    this.Properties = {};
+    /** Variables registry */
+    this.Vars = {};
+    /** Reactive proxy for component properties */
+    this.PropertiesProxy = {};
+    /** Reactive proxy for variables */
+    this.VarsProxy = {};
+    /** Currently active component context */
+    this.Current = {};
+    /** Property change listeners map */
+    this.listeners = {};
+    /** Cache for style proxies to avoid recreation */
+    this.styleProxyCache = /* @__PURE__ */ new WeakMap();
+    /** Cache for values proxies to avoid recreation */
+    this.valuesProxyCache = /* @__PURE__ */ new WeakMap();
+    if (isServer$2) {
+      return;
+    }
+    this.PropertiesProxy = this.createProxy(this.Properties);
+    this.VarsProxy = this.createProxy(this.Vars, "Vars");
+    this.registerContext();
+    $applications.subscribe(() => this.registerApplications());
+    $components.subscribe(() => this.registerApplications());
+    eventDispatcher.on("component:refresh", () => this.registerApplications());
+    eventDispatcher.on("component:updated", () => this.registerApplications());
+  }
+  /**
+   * Updates the editor context with selected components.
+   * Filters the current application's components based on selection state.
+   */
+  updateEditorContext() {
+    const selectedComponensIds = this.Vars.selectedComponents || [];
+    const currentEditingApplicationUUID = getVar("global", "currentEditingApplication")?.value?.uuid;
+    EditorInstance.Vars = EditorInstance.Vars ?? {};
+    EditorInstance.selectedComponents = this.createProxy(Object.values(this.applications[currentEditingApplicationUUID] || {}).filter((c) => selectedComponensIds.includes(c.uuid)));
+  }
+  /**
+   * Creates a reactive proxy for the target object.
+   * Tracks property access and changes, triggers events on property updates.
+   *
+   * Uses RuntimeContextHelpers to eliminate code duplication with MicroAppRuntimeContext.
+   *
+   * @param target - Object to be proxied
+   * @param scope - Optional scope name for event namespacing
+   * @returns Reactive proxy for the target object
+   */
+  createProxy(target, scope) {
+    return RuntimeContextHelpers.createReactiveProxy(target, {
+      eventPrefix: "",
+      // Empty prefix for global context (no scoping)
+      scope,
+      listeners: this.listeners,
+      current: this.Current,
+      onPropertyChange: (prop, value, listeners) => {
+        listeners.forEach((componentName) => {
+          eventDispatcher.emit(`component-property-changed:${componentName}`, {
+            prop,
+            value,
+            // IMPORTANT: Include value in event data
+            ctx: this.Current
+          });
+        });
+        if (scope === "Vars") {
+          eventDispatcher.emit("global:variable:changed", {
+            varName: prop,
+            name: prop,
+            value,
+            oldValue: void 0
+            // Global context doesn't track oldValue
+          });
+        }
+      },
+      debug: DEBUG
+    });
+  }
+  /**
+   * Attaches a values property to the component that is backed by $runtimeValues.
+   * Creates a reactive proxy that interacts with the global runtime values store.
+   *
+   * Uses RuntimeContextHelpers to eliminate code duplication with MicroAppRuntimeContext.
+   *
+   * @param component - The component to attach the values property to
+   */
+  attachValuesProperty(component) {
+    const componentId = component.uniqueUUID;
+    if (!componentId) {
+      console.error("Cannot attach values property: component uniqueUUID is undefined");
+      return;
+    }
+    const valuesProxy = RuntimeContextHelpers.createValuesProxy(
+      component,
+      {
+        // Backend: Global runtime values store
+        get: (id, prop) => {
+          const runtimeValues = $runtimeValues.get();
+          return runtimeValues[id]?.[prop];
+        },
+        set: (id, prop, value) => {
+          setComponentRuntimeValue(id, prop, value);
+        },
+        has: (id, prop) => {
+          const runtimeValues = $runtimeValues.get();
+          return prop in (runtimeValues[id] || {});
+        },
+        delete: (id, prop) => {
+          const runtimeValues = $runtimeValues.get();
+          const componentValues = { ...runtimeValues[id] || {} };
+          if (prop in componentValues) {
+            delete componentValues[prop];
+            setComponentRuntimeValues(id, componentValues);
+            eventDispatcher.emit("component:value:remove", { componentId: id, key: prop });
+          }
+        },
+        keys: (id) => {
+          const runtimeValues = $runtimeValues.get();
+          return Object.keys(runtimeValues[id] || {});
+        }
+      },
+      (id, prop, value) => {
+        eventDispatcher.emit(`component:value:set:${id}`, { prop, value });
+      },
+      this.valuesProxyCache
+    );
+    component.Instance = valuesProxy;
+  }
+  /**
+   * Creates a proxy for style objects that tracks changes to style properties.
+   * Uses a cache to avoid recreating proxies for the same target objects.
+   * 
+   * @param target - The style object to watch
+   * @param callback - Function to call when a style property changes
+   * @returns A proxy that watches for style property changes
+   */
+  watchStyleChanges(target, callback) {
+    if (typeof target !== "object" || target === null) {
+      return target;
+    }
+    if (this.styleProxyCache.has(target)) {
+      return this.styleProxyCache.get(target);
+    }
+    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;
+        return true;
+      }
+    });
+    this.styleProxyCache.set(target, proxy);
+    return proxy;
+  }
+  /**
+   * Get component by UUID.
+   * Searches through all applications to find a component by its UUID.
+   *
+   * @param uuid - Component UUID to find
+   * @returns Component element or undefined if not found
+   */
+  getComponentByUUID(uuid) {
+    for (const appId in this.applications) {
+      const appComponents = this.applications[appId];
+      for (const componentName in appComponents) {
+        const component = appComponents[componentName];
+        if (component.uuid === uuid) {
+          return component;
+        }
+        const found = this.findComponentInChildren(component, uuid);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  }
+  /**
+   * Recursively search for component in children.
+   *
+   * @param parent - Parent component to search in
+   * @param uuid - UUID to find
+   * @returns Component or undefined
+   */
+  findComponentInChildren(parent, uuid) {
+    if (!parent.children || parent.children.length === 0) {
+      return void 0;
+    }
+    for (const child of parent.children) {
+      if (child.uuid === uuid) {
+        return child;
+      }
+      const found = this.findComponentInChildren(child, uuid);
+      if (found) return found;
+    }
+    return void 0;
+  }
+  /**
+   * Get component by name.
+   *
+   * @param name - Component name
+   * @param appId - Optional application ID (uses first available app if not provided)
+   * @returns Component element or undefined if not found
+   */
+  getComponent(name, appId) {
+    if (appId) {
+      return this.applications[appId]?.[name];
+    }
+    for (const applicationId in this.applications) {
+      const component = this.applications[applicationId][name];
+      if (component) return component;
+    }
+    return void 0;
+  }
+  /**
+   * Set variable value.
+   * Updates the variable in the reactive proxy, triggering change events.
+   *
+   * @param name - Variable name
+   * @param value - Value to set
+   */
+  setVar(name, value) {
+    this.VarsProxy[name] = value;
+  }
+  /**
+   * Set component runtime style attribute.
+   * Updates the component's runtime styles and triggers re-render.
+   *
+   * @param componentId - Component unique UUID
+   * @param attribute - Style attribute name (e.g., 'backgroundColor')
+   * @param value - Style value
+   */
+  setComponentRuntimeStyleAttribute(componentId, attribute, value) {
+    setcomponentRuntimeStyleAttribute(componentId, attribute, value);
+  }
+  /**
+   * Gets the singleton instance of the RuntimeContext class.
+   * Creates it if it doesn't exist yet.
+   *
+   * @returns The singleton RuntimeContext instance
+   */
+  static getInstance() {
+    if (!RuntimeContext.instance) {
+      RuntimeContext.instance = new RuntimeContext();
+    }
+    return RuntimeContext.instance;
+  }
+  /**
+   * Registers the global context.
+   * Sets up a listener for context changes and updates the internal context.
+   */
+  registerContext() {
+    $context.listen((context) => {
+      Object.assign(this.context, context);
+    });
+  }
+  /**
+   * Registers all applications and their components.
+   * Builds the component hierarchy, initializes runtime values,
+   * and sets up component relationships.
+   */
+  registerApplications() {
+    const components = $components.get();
+    const componentsList = Object.values(components).flat();
+    const runtimeValues = $runtimeValues.get();
+    const loadedApplications = $applications.get();
+    const loadedApplicationObj = {};
+    loadedApplications.forEach((app) => {
+      loadedApplicationObj[app.uuid] = app.name;
+    });
+    componentsList.forEach((component) => {
+      const application_id = component.application_id || component.application_id;
+      if (!this.context[application_id]) {
+        this.context[application_id] = {};
+      }
+      if (!this.context[application_id][component.uuid]) {
+        this.context[application_id][component.uuid] = { ...component };
+      }
+      if (!this.applications[application_id]) {
+        this.applications[application_id] = {};
+      }
+      if (!this.Apps[loadedApplicationObj[application_id]]) {
+        this.Apps[loadedApplicationObj[application_id]] = {};
+      }
+      component.children = [];
+      this.Apps[loadedApplicationObj[application_id]][component.name] = component;
+      this.applications[application_id][component.name] = component;
+      if (component.uniqueUUID) {
+        const existingValues = runtimeValues[component.uniqueUUID] || {};
+        const initialValues = component.Instance || {};
+        if (Object.keys(initialValues).length > 0) {
+          const mergedValues = { ...existingValues, ...initialValues };
+          if (JSON.stringify(existingValues) !== JSON.stringify(mergedValues)) {
+            setComponentRuntimeValues(component.uniqueUUID, mergedValues);
+          }
+        }
+        this.attachValuesProperty(component);
+      }
+    });
+    componentsList.forEach((component) => {
+      if (component.childrenIds && Array.isArray(component.childrenIds) && component.childrenIds.length > 0) {
+        component.childrenIds.forEach((childId) => {
+          const childComponent = componentsList.find((c) => c.uuid === childId);
+          if (childComponent) {
+            component.children.push(childComponent);
+            childComponent.parent = component;
+          }
+        });
+      }
+    });
+    EditorInstance.components = componentsList;
+    this.PropertiesProxy = componentsList;
+    this.updateEditorContext();
+  }
+}
+const RuntimeInstance = RuntimeContext.getInstance();
+RuntimeInstance.setcomponentRuntimeStyleAttribute = setcomponentRuntimeStyleAttribute;
+if (!isServer$2) {
+  globalThis.__NURALY_EXECUTE_INSTANCE__ = RuntimeInstance;
+}
+const ExecuteInstance = RuntimeInstance;
+
+const $debug = atom(
+  {
+    error: {
+      components: {}
+      // functions : {},
+    }
+  }
+);
+keepMount($debug);
+
+const $providers = atom([]);
+persistentAtom("$activeTables", {}, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+
+function setContextMenuEvent(e) {
+  $contextMenuEvent.set(e);
+}
+
+function setResizing(isResizing) {
+  $resizing.set(isResizing);
+}
+
+function addGeneratedComponents(structureComponent) {
+  structureComponent.forEach((component) => {
+    addComponentAction(
+      component,
+      getVar("global", "currentPage").value,
+      getVar("global", "currentEditingApplication").value.uuid
+    );
+  });
+  setTimeout(() => {
+    eventDispatcher.emit("component:refresh");
+  }, 1e3);
+}
+
+function addlogDebug({
+  errors
+}) {
+  const debug = $debug.get();
+  $debug.set({
+    error: {
+      components: {
+        ...debug.error?.components || {},
+        [errors.component.uuid]: errors.component
+      }
+    }
+  });
+}
+function resetComponentDebug() {
+  $debug.get();
+  $debug.set({
+    error: {
+      components: {}
+    }
+  });
+}
+
+const setupChangeDetection = () => {
+  eventDispatcher.onAny((eventName, { ctx } = {}) => {
+    if (eventName.startsWith("ccomponent-property-changed")) {
+      const chdilrensComponent = getAllChildrenRecursive(ctx.application_id, ctx.uuid).get();
+      chdilrensComponent.forEach((component) => {
+      });
+    }
+  });
+};
+
+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>`;
+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>`;
+const richTextTemplate = (props, isViewMode) => html`<rich-text-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></rich-text-block>`;
+const embedURLTemplate = (props, isViewMode) => html`<embed-url-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></embed-url-block>`;
+const linkTemplate = (props, isViewMode) => html`<link-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></link-block>`;
+const fileUploadTemplate = (props, isViewMode) => html`<file-upload-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></file-upload-block>`;
+const videoTemplate = (props, isViewMode) => html`<video-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></video-block>`;
+const documentTemplate = (props, isViewMode) => html`<document-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></document-block>`;
+const textareaTemplate = (props, isViewMode) => html`<textarea-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></textarea-block>`;
+const badgeTemplate = (props, isViewMode) => html`<badge-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></badge-block>`;
+const cardTemplate = (props, isViewMode) => html`<card-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></card-block>`;
+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>
+`;
+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:
+      return iconButtonTemplate(commonProps, isViewMode);
+    case ComponentType.ColorPicker:
+      return colorPickerTemplate(commonProps, isViewMode);
+    case ComponentType.NumberInput:
+      return numberInputTemplate(commonProps, isViewMode);
+    case ComponentType.TextInput:
+      return textInputTemplate(commonProps, isViewMode);
+    case ComponentType.TextLabel:
+      return textLabelTemplate(commonProps, isViewMode);
+    case ComponentType.Button:
+      return buttonTemplate(commonProps, isViewMode);
+    case ComponentType.Tabs:
+      return tabsTemplate(commonProps, isViewMode);
+    case ComponentType.Menu:
+      return menuTemplate(commonProps, isViewMode);
+    case ComponentType.Table:
+      return tableTemplate(commonProps, isViewMode);
+    case ComponentType.Container:
+      return verticalContainerTemplate(commonProps, isViewMode);
+    case ComponentType.Collection:
+      return collectionViewerTemplate(commonProps, isViewMode);
+    case ComponentType.Checkbox:
+      return checkboxTemplate(commonProps, isViewMode);
+    case ComponentType.DatePicker:
+      return datePickerTemplate(commonProps, isViewMode);
+    case ComponentType.Divider:
+      return dividerTemplate(commonProps, isViewMode);
+    case ComponentType.Icon:
+      return iconTemplate(commonProps, isViewMode);
+    case ComponentType.Image:
+      return imageTemplate(commonProps, isViewMode);
+    case ComponentType.RadioButton:
+      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:
+      return refComponentTemplate(commonProps, isViewMode);
+    case ComponentType.Code:
+      return codeTemplate(commonProps, isViewMode);
+    case ComponentType.RichText:
+      return richTextTemplate(commonProps, isViewMode);
+    case ComponentType.EmbedURL:
+      return embedURLTemplate(commonProps, isViewMode);
+    case ComponentType.Link:
+      return linkTemplate(commonProps, isViewMode);
+    case ComponentType.FileUpload:
+      return fileUploadTemplate(commonProps, isViewMode);
+    case ComponentType.Video:
+      return videoTemplate(commonProps, isViewMode);
+    case ComponentType.Document:
+      return documentTemplate(commonProps, isViewMode);
+    case ComponentType.Textarea:
+      return textareaTemplate(commonProps, isViewMode);
+    case ComponentType.Badge:
+      return badgeTemplate(commonProps, isViewMode);
+    case ComponentType.Card:
+      return cardTemplate(commonProps, isViewMode);
+    case ComponentType.Tag:
+      return tagTemplate(commonProps, isViewMode);
+    case ComponentType.Slider:
+      return sliderTemplate(commonProps, isViewMode);
+    case ComponentType.Panel:
+      return panelTemplate(commonProps, isViewMode);
+    default:
+      return html``;
+  }
+}
+function renderComponent(components, item, isViewMode, parent) {
+  if (!components || !components.length) return html``;
+  return html`
+    ${components.map((component) => {
+    const commonProps = { item: { ...item }, component, parent: { ...parent } };
+    return renderComponentElement(component, commonProps, isViewMode);
+  })}
+  `;
+}
+
+const LOG_LEVELS = {
+  ERROR: 0,
+  WARN: 1,
+  INFO: 2,
+  DEBUG: 3,
+  EXECUTION_TIME: 3
+};
+let logLevel = LOG_LEVELS.INFO;
+let loggingEnabled = false;
+let currentPrefix = "";
+function setLogLevel(level) {
+  logLevel = level;
+}
+function enableLogging(enabled) {
+  loggingEnabled = enabled;
+}
+function enableBenchmarking(enabled) {
+}
+function logMessage(level, message, ...args) {
+  if (!loggingEnabled || level > logLevel) return;
+  const styles = {
+    [LOG_LEVELS.ERROR]: "background: #FF6347; color: white; padding: 2px; border-radius: 3px;",
+    // Tomato
+    [LOG_LEVELS.WARN]: "background: #FFD700; color: black; padding: 2px; border-radius: 3px;",
+    // Gold
+    [LOG_LEVELS.INFO]: "background: #4682B4; color: white; padding: 2px; border-radius: 3px;",
+    // SteelBlue
+    [LOG_LEVELS.DEBUG]: "background: #D1D1D1; color: black; padding: 2px; border-radius: 3px;",
+    // LightGray
+    [LOG_LEVELS.EXECUTION_TIME]: "background: #90EE90; color: black; padding: 2px; border-radius: 3px;"
+    // LightGreen
+  };
+  const prefixStyle = "background: #8A2BE2; color: white; padding: 2px; border-radius: 3px;";
+  if (currentPrefix) {
+    console.log(`%c${currentPrefix} %c${message}`, prefixStyle, styles[level], ...args);
+    currentPrefix = "";
+  } else {
+    console.log(`%c${message}`, styles[level], ...args);
+  }
+}
+const log = {
+  error: (message, ...args) => logMessage(LOG_LEVELS.ERROR, message, ...args),
+  warn: (message, ...args) => logMessage(LOG_LEVELS.WARN, message, ...args),
+  info: (message, ...args) => logMessage(LOG_LEVELS.INFO, message, ...args),
+  debug: (message, ...args) => logMessage(LOG_LEVELS.DEBUG, message, ...args),
+  executionTime: (message, ...args) => logMessage(LOG_LEVELS.EXECUTION_TIME, message, ...args),
+  prefix: (prefix) => {
+    currentPrefix = prefix;
+    return log;
+  }
+};
+
+function getNestedAttribute(obj, path) {
+  return path.split(".").reduce((acc, key) => {
+    return acc && acc[key] !== void 0 ? acc[key] : void 0;
+  }, obj);
+}
+function hasOnlyEmptyObjects(error) {
+  if (!error || Object.keys(error).length === 0) {
+    return true;
+  }
+  return Object.values(error).every(
+    (value) => typeof value === "object" && value !== null && Object.keys(value).length === 0
+  );
+}
+
+const NO_EVENT_LISTENER = "";
+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 };