@nuraly/runtime 0.1.0

package/redux/store/environment.ts

@@ -0,0 +1,20 @@
+import { atom, keepMount } from "nanostores";
+
+export enum ViewMode {
+  Edit = "edit",
+  Preview = "preview",
+}
+
+export interface Environment {
+  mode: ViewMode;
+}
+
+export const $environment = atom<Environment>(
+  {
+    mode: ViewMode.Edit
+  }
+);
+
+keepMount($environment);
+
+

package/redux/store/index.ts

@@ -0,0 +1,77 @@
+/**
+ * Redux Store - Core State Atoms
+ * Contains all nanostores atoms and reactive state management
+ */
+
+// Component Store
+export { 
+  $components,
+  $applicationComponents, 
+  $selectedComponent,
+  $currentComponentId,
+  $hoveredComponentId,
+  $hoveredComponent,
+  $draggingComponentInfo,
+  $componentWithChildren,
+  $runtimeStyles,
+  $runtimeValues,
+  $componentRuntimeValuesById,
+  $componentRuntimeValueByKey,
+  $componentsByUUIDs,
+  $runtimeStylescomponentStyleByID,
+  getAllChildrenRecursive,
+  getDirectChildren,
+  $componentById,
+  setComponentRuntimeValue,
+  setComponentRuntimeValues,
+  setcomponentRuntimeStyleAttribute,
+  clearComponentRuntimeValues,
+  clearComponentRuntimeValue,
+  clearAllRuntimeValues,
+  clearComponentRuntimeStyleAttributes
+} from './component/store';
+
+// Component Helpers
+export {
+  fillComponentChildren,
+  fillApplicationComponents,
+  extractChildresIds,
+  extractAllChildrenIds
+} from './component/helper';
+
+// Application Store  
+export { $applications, $currentApplication, $editorState, $resizing } from './apps';
+
+// Page Store
+export { 
+  $pages, 
+  $currentPage,
+  $currentPageViewPort,
+  $pageZoom,
+  $contextMenuEvent,
+  $showBorder,
+  $currentPageId,
+  $microAppCurrentPage,
+  $pageSize,
+  $applicationPages,
+  refreshPageStoreVar
+} from './page';
+
+// Context/Variables Store
+export { $context } from './context';
+
+// Environment Store
+export { ViewMode, $environment } from './environment';
+
+// Toast Store
+export { $toasts } from './toast';
+
+// Debug Store
+export { $debug } from './debug';
+
+// Provider Store
+export { $providers } from './provider';
+
+// Type Definitions
+export type { ComponentElement } from './component/component.interface';
+export type { PageElement } from '../handlers/pages/page.interface';

package/redux/store/interfaces/component.interfaces.ts

@@ -0,0 +1,4 @@
+export interface AddComponentAction {
+  name: string;
+  component_type: string;
+}

package/redux/store/page.ts

@@ -0,0 +1,105 @@
+import { atom, computed, deepMap, onMount, onNotify } from "nanostores";
+import { persistentAtom } from "@nanostores/persistent";
+import { type PageElement } from "../handlers/pages/page.interface";
+import { setVar } from './context';
+import { ExecuteInstance } from '../../state/runtime-context';
+
+/**
+ * Pages stores
+ */
+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__"] ?? [],
+  );
+}
+
+//
+interface PageStore {
+  [key: string]: PageElement[];
+}
+
+export const $pages = atom<PageStore>(initialState);
+export const $microAppCurrentPage = deepMap<any>({});
+
+export const $resetPageStore = () => {};
+
+// Persistent atom for currentPageId per application
+export const $currentPageId = ($application_id: string) =>
+  persistentAtom<string>(`page_id_${$application_id}`, null, {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  });
+
+export const $currentPageViewPort = persistentAtom<string>(
+  "current_page_view_port",
+  "",
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  },
+);
+
+export const $pageZoom = atom<string>("99");
+
+export const $pageSize = persistentAtom<any>(
+  "page_info",
+  {},
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse,
+  },
+);
+
+export const $showBorder = persistentAtom<boolean>("show_border", false, {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+});
+
+export const $contextMenuEvent = atom<object>();
+
+/**
+ * Selector for pages of a specific application
+ */
+export const $applicationPages = ($application_id: string) =>
+  computed([$pages], (pagesStore: PageStore) => {
+    return pagesStore[$application_id] || [];
+  });
+
+/**
+ * Computed store for the current page within a specific application
+ */
+export const $currentPage = ($application_id: string, currentPageId: string) =>
+  computed([$applicationPages($application_id)], (pages) => {
+    // SSR guard: ensure pages is an array
+    if (!Array.isArray(pages)) {
+      return undefined;
+    }
+
+    const currentPage = pages.find((page) => {
+      return page.uuid === currentPageId;
+    });
+    if (!currentPage && pages.length > 0) {
+      return pages[0];
+    }
+    return currentPage;
+  });
+export 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();
+});

package/redux/store/provider.ts

@@ -0,0 +1,24 @@
+import { atom } from "nanostores";
+import type { Provider } from "../handlers/providers/interface";
+import { persistentAtom } from "@nanostores/persistent";
+
+
+export const $providers = atom<Provider[]>([]);
+
+export const $activeTables = persistentAtom<{ [providerId: string]: string }>("$activeTables", {}, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+
+// Define a function to set the active table for a provider
+export function setActiveTable(providerId: string, tableName: string) {
+  const activeTables = $activeTables.get();
+  activeTables[providerId] = tableName;
+  $activeTables.set(activeTables);
+}
+
+// Define a function to get the active table for a provider
+export function getActiveTable(providerId: string) {
+  const activeTables = $activeTables.get();
+  return activeTables[providerId] || null;
+}

package/redux/store/ssr/server-data.ts

@@ -0,0 +1,4 @@
+import { isServer } from '../../../../runtime/utils/envirement';
+
+export const currentLoadedApplication = isServer ? [] : JSON.parse(window["__INITIAL_CURRENT_APPLICATION_STATE__"] ?? null);
+ 

package/redux/store/toast.ts

@@ -0,0 +1,26 @@
+import { deepMap } from 'nanostores';
+
+/**
+ * Toast notification interface
+ */
+export interface Toast {
+  id: string;
+  message: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  closable?: boolean;
+}
+
+/**
+ * Toast store interface
+ */
+export interface ToastStore {
+  toasts: Toast[];
+}
+
+/**
+ * Global toast store - accessible everywhere in studio and micro-apps
+ */
+export const $toasts = deepMap<ToastStore>({
+  toasts: []
+});

package/state/editor.ts

@@ -0,0 +1,370 @@
+/**
+ * @fileoverview Editor State Management
+ * @module Runtime/State/Editor
+ * 
+ * @description
+ * Manages editor-specific state and platform detection for the Nuraly Studio.
+ * 
+ * The Editor class provides:
+ * - Platform detection (mobile, tablet, desktop)
+ * - Breakpoint-aware style retrieval
+ * - Component selection tracking
+ * - Editor mode management (edit vs preview)
+ * - Custom console for handler logging
+ * - Tab management for editor UI
+ * 
+ * **Platform Detection:**
+ * Automatically detects and updates platform based on window width:
+ * - Mobile: ≤500px
+ * - Tablet: 501-1024px
+ * - Desktop: >1024px
+ * 
+ * **Responsive Styles:**
+ * Components can have breakpoint-specific styles that override base styles
+ * based on the current platform. The Editor provides methods to retrieve
+ * the correct styles considering breakpoints.
+ * 
+ * **Editor vs Preview Mode:**
+ * - Edit Mode: Platform locked, no auto-resize
+ * - Preview Mode: Platform responsive, auto-resize on window resize
+ * 
+ * @example Basic Usage
+ * ```typescript
+ * import Editor from './editor';
+ * 
+ * // Check editor mode
+ * if (Editor.getEditorMode()) {
+ *   console.log('In editor');
+ * }
+ * 
+ * // Get platform
+ * const platform = Editor.getCurrentPlatform();
+ * console.log(platform.platform); // "desktop", "tablet", or "mobile"
+ * 
+ * // Get component styles (with breakpoint consideration)
+ * const styles = Editor.getComponentStyles(component);
+ * ```
+ * 
+ * @example Platform-Aware Styles
+ * ```typescript
+ * // Component has base styles and breakpoint styles
+ * const component = {
+ *   style: { backgroundColor: 'blue', fontSize: '16px' },
+ *   breakpoints: {
+ *     '430px': { // Mobile
+ *       style: { fontSize: '14px' }
+ *     }
+ *   }
+ * };
+ * 
+ * // On mobile (width ≤500px):
+ * Editor.updatePlatform(); // Sets platform to "mobile"
+ * const fontSize = Editor.getComponentStyle(component, 'fontSize');
+ * console.log(fontSize); // "14px" (breakpoint override)
+ * 
+ * // On desktop:
+ * Editor.updatePlatform(); // Sets platform to "desktop"
+ * const fontSize = Editor.getComponentStyle(component, 'fontSize');
+ * console.log(fontSize); // "16px" (base style)
+ * ```
+ * 
+ * @example Custom Console
+ * ```typescript
+ * // In handler code, console.log goes to Editor console:
+ * Editor.Console.log({ message: 'Debug info', data: {...} });
+ * Editor.Console.error({ message: 'Error occurred', error: err });
+ * 
+ * // These emit "kernel:log" events for the editor UI to display
+ * ```
+ * 
+ * @see {@link ExecuteInstance} for runtime context
+ * @see {@link RuntimeContext} for state management
+ */
+
+import { eventDispatcher } from '../utils/change-detection';
+import { isServer } from '../utils/envirement';
+import { $editorState } from '../redux/store/apps';
+
+/**
+ * @class Editor
+ * @description Manages editor state, platform detection, and component selection
+ * 
+ * **Key Features:**
+ * - Responsive platform detection with automatic updates
+ * - Breakpoint-aware style retrieval for components
+ * - Editor mode vs preview mode management
+ * - Component selection state tracking
+ * - Custom console for handler logging
+ * - Dark mode detection
+ * 
+ * **Platform System:**
+ * The platform is determined by window width and includes:
+ * - `platform`: "mobile" | "tablet" | "desktop"
+ * - `width`: Viewport width for the platform
+ * - `height`: Viewport height (optional)
+ * - `isMobile`: Boolean flag for mobile/tablet
+ * 
+ * **Breakpoint Resolution:**
+ * When retrieving component styles:
+ * 1. Get base styles from `component.style`
+ * 2. Get breakpoint styles from `component.breakpoints[width]`
+ * 3. Merge breakpoint styles over base styles
+ * 4. Return merged result
+ * 
+ * @example Platform Detection
+ * ```typescript
+ * // Automatically updates on window resize (preview mode)
+ * window.addEventListener('resize', () => {
+ *   const platform = Editor.updatePlatform();
+ *   console.log('Platform:', platform.platform);
+ * });
+ * ```
+ */
+class Editor {
+  components: any[] = [];
+  functions: any[] = [];
+  currentEditingApplication: any = {};
+  currentComponent: any = null;
+  selectedComponents: any[] = [];
+  currentPlatform: any = {};
+  isPreviewMode: boolean = false;
+  isEditorMode: boolean = false;
+  Vars: any = {};
+  currentSelection: any[] = []
+  Tabs: any[] = [];
+
+  /**
+   * Lazy getter for ExecuteInstance to avoid circular dependency.
+   * Uses dynamic import to load after module initialization.
+   */
+  private get ExecuteInstance() {
+    return (globalThis as any).__NURALY_EXECUTE_INSTANCE__;
+  }
+
+  constructor() {
+    if (!isServer) {
+      window.addEventListener("resize", this.handleResize);
+    }
+    eventDispatcher.on('Vars:currentPlatform', (data) => {
+      this.currentPlatform = {...this.ExecuteInstance.Vars.currentPlatform};
+    })
+    $editorState.subscribe(() =>{
+      this.Tabs = $editorState.get().tabs;
+    })
+
+  }
+
+  private handleResize = () => {
+    if (!this.isEditorMode) {
+      this.updatePlatform();
+    }
+  };
+
+  get isDarkMode() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+
+  public updatePlatform() {
+    if(isServer) return;
+    const width = window.innerWidth;
+    let currentPlatform: any = {};
+
+    // Simplified platform logic with clearer conditions
+    if (width <= 500) {
+      currentPlatform = createPlatform("mobile", "430px", "767px", true);
+    } else if (width <= 1024) {
+      currentPlatform = createPlatform("tablet", "1024px", "768px", true);
+    } else {
+      currentPlatform = createPlatform("desktop", "1366px", undefined, false);
+    }
+
+    // If platform has changed, update the state and trigger events
+    if (currentPlatform.platform !== this.currentPlatform.platform) {
+      this.currentPlatform = { ...currentPlatform };
+      this.ExecuteInstance.VarsProxy.currentPlatform = { ...this.currentPlatform };
+      eventDispatcher.emit("component:refresh");
+    }
+    return currentPlatform
+  }
+
+  private static createPlatform(platform: string, width: string, height?: string, isMobile: boolean = false) {
+    return { platform, width, height, isMobile };
+  }
+
+  setEditorMode(isEditorMode: boolean) {
+    this.isEditorMode = isEditorMode;
+    if (this.isEditorMode) {
+      this.updatePlatform();
+    }
+  }
+
+  getEditorMode() {
+    return this.isEditorMode;
+  }
+
+  getComponentStyle(component: any, attribute: string) {
+    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: any) {
+    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: any, attribute: string) {
+    const selectedState = this.ExecuteInstance.Vars.selected_component_style_state;
+    let baseStyle = component?.style ?? {};
+    
+    // Apply platform/breakpoint styles
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      baseStyle = { ...baseStyle, ...breakpointStyle };
+    }
+    
+    // If a pseudo-state is selected and not default, check if the attribute exists in that state
+    if (selectedState && selectedState !== "default") {
+      const pseudoStateStyle = baseStyle[selectedState];
+      if (pseudoStateStyle && typeof pseudoStateStyle === 'object' && attribute in pseudoStateStyle) {
+        return pseudoStateStyle[attribute];
+      }
+    }
+    
+    // Return base value (excluding pseudo-state objects)
+    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: any) {
+    const selectedState = this.ExecuteInstance.Vars.selected_component_style_state;
+    let baseStyle = component?.style ?? {};
+    
+    // Apply platform/breakpoint styles
+    if (this.currentPlatform.platform !== "desktop") {
+      const breakpointStyle = component?.breakpoints?.[this.currentPlatform.width]?.style;
+      baseStyle = { ...baseStyle, ...breakpointStyle };
+    }
+    
+    // If a pseudo-state is selected and not default, merge the pseudo-state styles
+    if (selectedState && selectedState !== "default") {
+      const pseudoStateStyle = baseStyle[selectedState];
+      if (pseudoStateStyle && typeof pseudoStateStyle === 'object') {
+        // Filter out pseudo-state keys from base
+        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;
+          }, {});
+        
+        // Merge: base styles overridden by pseudo-state styles
+        return { ...regularStyles, ...pseudoStateStyle };
+      }
+    }
+    
+    return baseStyle;
+  }
+
+  getCurrentPlatform() {
+    return this.currentPlatform;
+  }
+
+  getComponentBreakpointStyle(component: any, attribute: string) {
+    return component?.breakpoints?.[this.currentPlatform.width]?.style?.[attribute];
+  }
+
+  getComponentBreakpointInput(component: any, attributeName: string) {
+    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: any) {
+    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)
+  }
+  Console = {
+    log: (log: any) => {
+      this.log(log)
+    },
+    error: (log: any) => {
+      this.log(log)
+    },
+    warn: (log: any) => {
+      this.log(log)
+    },
+    info: (log: any) => {
+      this.log(log)
+    },
+    debug: (log: any) => {
+      this.log(log)
+    }
+  }
+  
+
+
+
+}
+
+const EditorInstance = new Editor();
+export default EditorInstance;
+const createPlatform = (platform: string, width: string, height?: string, isMobile: boolean = false)=> {
+  return { platform, width, height, isMobile };
+}
+
+export const  getInitPlatform = () => {
+  if(isServer) return;
+  const width = window.innerWidth;
+  let currentPlatform: any = {};
+
+  // Simplified platform logic with clearer conditions
+  if (width <= 500) {
+    currentPlatform = createPlatform("mobile", "430px", "932px", true);
+  } else if (width <= 1024) {
+    currentPlatform = createPlatform("tablet", "1024px", "768px", true);
+  } else {
+    currentPlatform = createPlatform("desktop", "1366px", undefined, false);
+  }
+
+  // If platform has changed, update the state and trigger events
+  return currentPlatform
+}

package/state/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Runtime State Module
+ * 
+ * This module provides the core runtime state system for Nuraly components,
+ * including context management, component lifecycle, and state tracking.
+ * 
+ * @example
+ * ```typescript
+ * // Import from state module
+ * import { ExecuteInstance, Editor } from './';
+ * 
+ * // Access runtime state
+ * ExecuteInstance.VarsProxy.username = 'John';
+ * const theme = ExecuteInstance.GetVar('theme');
+ * ```
+ */
+
+export {
+  RuntimeInstance,
+  ExecuteInstance,
+  executeHandler
+} from './runtime-context';
+
+import Editor from './editor';
+export { Editor };
+export { default } from './editor';
+export { RuntimeHelpers } from '../utils/runtime-helpers';