@nuraly/runtime 0.1.6 → 0.1.8

package/utils/component-registry.ts

@@ -0,0 +1,118 @@
+import { html, type TemplateResult } from "lit";
+import type { ComponentElement } from "../redux/store/component/component.interface";
+
+export interface ComponentRenderProps {
+  component: ComponentElement;
+  parent: ComponentElement;
+  item: any;
+}
+
+export type ComponentTemplateFunction = (
+  props: ComponentRenderProps,
+  isViewMode: boolean
+) => TemplateResult;
+
+export interface ComponentRegistrationOptions {
+  type: string;
+  tagName: string;
+  template?: ComponentTemplateFunction;
+  componentClass?: CustomElementConstructor;
+  displayName?: string;
+  category?: string;
+  icon?: string;
+  defaultInputs?: Record<string, any>;
+}
+
+export interface RegisteredComponent {
+  type: string;
+  tagName: string;
+  template: ComponentTemplateFunction;
+  displayName?: string;
+  category?: string;
+  icon?: string;
+  defaultInputs?: Record<string, any>;
+}
+
+class ComponentRegistryImpl {
+  private registry: Map<string, RegisteredComponent> = new Map();
+
+  register(options: ComponentRegistrationOptions): void {
+    const { type, tagName, componentClass, template } = options;
+
+    if (this.registry.has(type)) {
+      console.warn(`[ComponentRegistry] Component type "${type}" is already registered. Skipping.`);
+      return;
+    }
+
+    if (componentClass && !customElements.get(tagName)) {
+      customElements.define(tagName, componentClass);
+    }
+
+    const componentTemplate = template ?? this.createDefaultTemplate(tagName);
+
+    this.registry.set(type, {
+      type,
+      tagName,
+      template: componentTemplate,
+      displayName: options.displayName,
+      category: options.category,
+      icon: options.icon,
+      defaultInputs: options.defaultInputs,
+    });
+  }
+
+  unregister(type: string): boolean {
+    return this.registry.delete(type);
+  }
+
+  getTemplate(type: string): ComponentTemplateFunction | undefined {
+    return this.registry.get(type)?.template;
+  }
+
+  get(type: string): RegisteredComponent | undefined {
+    return this.registry.get(type);
+  }
+
+  has(type: string): boolean {
+    return this.registry.has(type);
+  }
+
+  getAll(): RegisteredComponent[] {
+    return Array.from(this.registry.values());
+  }
+
+  getByCategory(category: string): RegisteredComponent[] {
+    return this.getAll().filter((c) => c.category === category);
+  }
+
+  clear(): void {
+    this.registry.clear();
+  }
+
+  private createDefaultTemplate(tagName: string): ComponentTemplateFunction {
+    return (props: ComponentRenderProps, isViewMode: boolean) => {
+      const el = document.createElement(tagName);
+      (el as any).isViewMode = isViewMode;
+      (el as any).parentcomponent = props.parent;
+      (el as any).item = props.item;
+      (el as any).component = props.component;
+      return html`${el}`;
+    };
+  }
+}
+
+export const ComponentRegistry = new ComponentRegistryImpl();
+
+export function registerComponent(
+  type: string,
+  tagName: string,
+  componentClass?: CustomElementConstructor
+): void {
+  ComponentRegistry.register({ type, tagName, componentClass });
+}
+
+export function registerComponents(
+  components: ComponentRegistrationOptions[]
+): void {
+  components.forEach((options) => ComponentRegistry.register(options));
+}

package/utils/index.ts

@@ -9,6 +9,17 @@ import { setupChangeDetection } from '../components/ui/components/base/BaseEleme
 // Component Rendering
 export { renderComponent } from './render-util';
 
+// Component Registry
+export {
+  ComponentRegistry,
+  registerComponent,
+  registerComponents,
+  type ComponentRegistrationOptions,
+  type ComponentTemplateFunction,
+  type ComponentRenderProps,
+  type RegisteredComponent
+} from './component-registry';
+
 // Logging
 export { log as Logger, setLogLevel, enableLogging, enableBenchmarking, LOG_LEVELS } from './logger';
 
@@ -55,7 +66,6 @@ export { getNestedAttribute, hasOnlyEmptyObjects } from './object.utils';
 export { processHeaders } from './api-calls-utils';
 
 // Style Utilities
-export { getStyleFronmAttribute } from './styleUtil';
 
 // Time/Performance Utilities
 export { debounce } from './performance-utils';
@@ -65,3 +75,6 @@ export { GenerateName } from './naming-generator';
 
 // Constants
 export * from './constants';
+
+// Toast
+export { showToast, hideToast, clearAllToasts, showSuccess, showError, showWarning, showInfo } from './toast';

package/utils/naming-generator.ts

@@ -1,6 +1,8 @@
 import { type ComponentType } from '../redux/store/component/component.interface';
 
 export const GenerateName = (componentType: ComponentType) => {
-  const randomNumber = Math.floor(Math.random() * 10000);
+  // Use cryptographically secure random number generation
+  const randomBytes = crypto.getRandomValues(new Uint32Array(1));
+  const randomNumber = randomBytes[0] % 10000;
   return `${componentType}_${randomNumber}`;
 };

package/utils/randomness.ts

@@ -1,3 +1,5 @@
 export const generateRandomId = () => {
-  return Math.random().toString(36).substr(2, 9);
+  // Generate cryptographically secure random ID
+  const randomBytes = crypto.getRandomValues(new Uint8Array(9));
+  return Array.from(randomBytes, byte => byte.toString(36)).join('').substring(0, 9);
 };

package/utils/register-components.ts

@@ -1,49 +1,41 @@
-// Component registration - import all components for side-effects (custom element registration)
-// This file is separate from render-util.ts to avoid circular dependencies
+// Runtime component registration (side-effects for custom element definition)
 import "../components/ui/components/layout/Tabs/Tabs";
 import "../components/ui/components/layout/Containers/Container";
+import "../components/ui/components/layout/Card/Card";
+import "../components/ui/components/layout/Panel/Panel";
+import "../components/ui/components/layout/Grid/Row";
+import "../components/ui/components/layout/Grid/Col";
 import "../components/ui/components/navigation/Menu/Menu";
+import "../components/ui/components/navigation/EmbedURL/EmbedURL";
+import "../components/ui/components/navigation/Link/Link";
 import "../components/ui/components/inputs/ColorPicker/colorpicker";
 import "../components/ui/components/inputs/NumberInput/NumberInput";
 import "../components/ui/components/inputs/TextInput/TextInput";
-import "../components/ui/components/wrappers/GenerikWrapper/GenerikWrapper";
 import "../components/ui/components/inputs/IconButton/iconbutton";
 import "../components/ui/components/inputs/Select/Select";
-import "../components/ui/components/Event/EventValue/EventValue";
-import "../components/ui/components/utility/Border/Border";
-import "../components/ui/components/utility/BoxShadow/BoxShadow";
-import "../components/ui/components/display/BoxModel/BoxModel";
-import "../components/ui/components/display/Table/Table";
 import "../components/ui/components/inputs/Checkbox/Checkbox";
 import "../components/ui/components/inputs/Dropdown/Dropdown";
 import "../components/ui/components/inputs/DatePicker/DatePicker";
+import "../components/ui/components/inputs/RadioButton/Radio-button";
+import "../components/ui/components/inputs/Button/Button";
+import "../components/ui/components/inputs/FileUpload/FileUpload";
+import "../components/ui/components/inputs/Textarea/Textarea";
+import "../components/ui/components/inputs/Slider/Slider";
+import "../components/ui/components/inputs/Form/Form";
+import "../components/ui/components/display/Table/Table";
 import "../components/ui/components/display/Icon/Icon";
 import "../components/ui/components/display/Image/Image";
-import "../components/ui/components/inputs/RadioButton/Radio-button";
+import "../components/ui/components/display/Divider/Divider";
+import "../components/ui/components/display/TextLabel/TextLabel";
+import "../components/ui/components/display/Code/Code";
+import "../components/ui/components/display/Video/Video";
+import "../components/ui/components/display/Badge/Badge";
+import "../components/ui/components/display/Tag/Tag";
 import "../components/ui/components/advanced/AIChat/AIChat";
-import "../components/ui/components/inputs/IconPicker/IconPicker";
 import "../components/ui/components/advanced/MicroApp/MicroApp";
-import "../components/ui/components/inputs/UsersDropdown/UsersDropdown";
-import "../components/ui/components/inputs/InsertDropdown/InsertDropdown";
 import "../components/ui/components/advanced/Collapse/Collapse";
-import "../components/ui/components/display/Divider/Divider";
-import "../components/ui/components/utility/Handlers/Handlers";
-import "../components/ui/components/utility/Function/InvokeFunction";
-import "../components/ui/components/utility/Export-Import/Export-Import";
 import "../components/ui/components/advanced/Collections/Collections";
-import "../components/ui/components/inputs/Button/Button";
-import "../components/ui/components/display/TextLabel/TextLabel";
 import "../components/ui/components/advanced/RefComponent/RefComponent";
-import "../components/ui/components/display/Code/Code";
 import "../components/ui/components/advanced/RichText/RichText";
-import "../components/ui/components/navigation/EmbedURL/EmbedURL";
-import "../components/ui/components/navigation/Link/Link";
-import "../components/ui/components/inputs/FileUpload/FileUpload";
 import "../components/ui/components/utility/Document/Document";
-import "../components/ui/components/display/Video/Video";
-import "../components/ui/components/inputs/Textarea/Textarea";
-import "../components/ui/components/display/Badge/Badge";
-import "../components/ui/components/layout/Card/Card";
-import "../components/ui/components/display/Tag/Tag";
-import "../components/ui/components/inputs/Slider/Slider";
-// import "../components/ui/components/layout/Panel/Panel";
+import "../components/ui/components/ToastContainer/ToastContainer";

package/utils/render-util.ts

@@ -1,18 +1,11 @@
 import { type ComponentElement, ComponentType } from '../redux/store/component/component.interface';
 import { html, type TemplateResult } from "lit";
+import { ComponentRegistry, type ComponentRenderProps } from './component-registry';
 
-// Note: Components are registered in register-components.ts to avoid circular dependencies
-// Make sure to import './register-components' before using renderComponent
-
-// Reusable templates for common components
 const selectTemplate = (props: any, isViewMode: boolean)  => html`<select-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></select-block>`;
 const iconButtonTemplate = (props: any, isViewMode: boolean)  => html`<icon-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-button-block>`;
 const colorPickerTemplate = (props: any, isViewMode: boolean)  => html`<color-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></color-picker-block>`;
 const numberInputTemplate = (props: any, isViewMode: boolean)  => html`<number-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></number-input-block>`;
-const shadowBoxTemplate = (props: any, isViewMode: boolean)  => html`<attribute-box-shadow-value .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></attribute-box-shadow-value>`;
-const borderRadiusTemplate = (props: any, isViewMode: boolean)  => html`<attribute-border-value .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></attribute-border-value>`;
-const boxModelTemplate = (props: any, isViewMode: boolean)  => html`<box-model-display .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></box-model-display>`;
-const eventTemplate = (props: any, isViewMode: boolean)  => html`<parameter-event-handler .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></parameter-event-handler>`;
 const tableTemplate = (props: any, isViewMode: boolean)  => html`<table-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></table-block>`;
 const textInputTemplate = (props: any, isViewMode: boolean)  => html`<text-input-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-input-block>`;
 const textLabelTemplate = (props: any, isViewMode: boolean)  => html`<text-label-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></text-label-block>`;
@@ -27,13 +20,9 @@ const iconTemplate = (props: any, isViewMode: boolean)  => html`<icon-block .isV
 const imageTemplate = (props: any, isViewMode: boolean)  => html`<image-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></image-block>`;
 const radioButtonTemplate = (props: any, isViewMode: boolean)  => html`<radio-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></radio-button-block>`;
 const aiTemplate = (props: any, isViewMode: boolean)  => html`<ai-chat-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></ai-chat-block>`;
-const iconPickerTemplate = (props: any, isViewMode: boolean)  => html`<icon-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-picker-block>`;
-const usersDropdownTemplate = (props: any, isViewMode: boolean)  => html`<users-dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></users-dropdown-block>`;
-const insertDropdownTemplate = (props: any, isViewMode: boolean)  => html`<insert-dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></insert-dropdown-block>`;
 const microAppTemplate = (props: any, isViewMode: boolean)  => html`<micro-app-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></micro-app-block>`;
 const collapseTemplate = (props: any, isViewMode: boolean)  => html`<collapse-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></collapse-block>`;
 const dividerTemplate = (props: any, isViewMode: boolean)  => html`<divider-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></divider-block>`;
-const handlersTemplate = (props: any, isViewMode: boolean)  => html`<handler-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></handler-block>`;
 const dropDownTemplate = (props: any, isViewMode: boolean)  => html`<dropdown-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></dropdown-block>`;
 const refComponentTemplate = (props: any, isViewMode: boolean)  => html`<ref-component-container-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></ref-component-container-block>`;
 const codeTemplate = (props: any, isViewMode: boolean)  => html`<code-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></code-block>`;
@@ -49,14 +38,9 @@ const cardTemplate = (props: any, isViewMode: boolean)  => html`<card-block .isV
 const tagTemplate = (props: any, isViewMode: boolean)  => html`<tag-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></tag-block>`;
 const sliderTemplate = (props: any, isViewMode: boolean)  => html`<slider-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></slider-block>`;
 const panelTemplate = (props: any, isViewMode: boolean)  => html`<panel-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></panel-block>`;
-const invokeFunctionTemplate = (props: any, isViewMode: boolean)  => html`
-  <invoke-function-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></invoke-function-block>
-`;
-
-
-const importExportTemplate = (props: any, isViewMode: boolean)  => html`
-  <export-import-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></export-import-block>
-`;
+const gridRowTemplate = (props: any, isViewMode: boolean)  => html`<grid-row-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></grid-row-block>`;
+const gridColTemplate = (props: any, isViewMode: boolean)  => html`<grid-col-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></grid-col-block>`;
+const formTemplate = (props: any, isViewMode: boolean)  => html`<form-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></form-block>`;
 
 function renderComponentElement(component: ComponentElement, commonProps: any, isViewMode?: boolean): TemplateResult {
   const template = getComponentTemplate(component, commonProps, isViewMode);
@@ -65,14 +49,6 @@ function renderComponentElement(component: ComponentElement, commonProps: any, i
 
 function getComponentTemplate(component: ComponentElement, commonProps: any, isViewMode?: boolean): TemplateResult {
   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:
@@ -111,22 +87,10 @@ function getComponentTemplate(component: ComponentElement, commonProps: any, isV
       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:
@@ -142,22 +106,37 @@ function getComponentTemplate(component: ComponentElement, commonProps: any, isV
     case ComponentType.FileUpload:
       return fileUploadTemplate(commonProps, isViewMode);
     case ComponentType.Video:
-        return videoTemplate(commonProps, isViewMode);
+      return videoTemplate(commonProps, isViewMode);
     case ComponentType.Document:
-        return documentTemplate(commonProps, isViewMode);
+      return documentTemplate(commonProps, isViewMode);
     case ComponentType.Textarea:
-        return textareaTemplate(commonProps, isViewMode);
+      return textareaTemplate(commonProps, isViewMode);
     case ComponentType.Badge:
-        return badgeTemplate(commonProps, isViewMode);
+      return badgeTemplate(commonProps, isViewMode);
     case ComponentType.Card:
-        return cardTemplate(commonProps, isViewMode);
+      return cardTemplate(commonProps, isViewMode);
     case ComponentType.Tag:
-        return tagTemplate(commonProps, isViewMode);
+      return tagTemplate(commonProps, isViewMode);
     case ComponentType.Slider:
-        return sliderTemplate(commonProps, isViewMode);
+      return sliderTemplate(commonProps, isViewMode);
     case ComponentType.Panel:
-        return panelTemplate(commonProps, isViewMode);
+      return panelTemplate(commonProps, isViewMode);
+    case ComponentType.GridRow:
+      return gridRowTemplate(commonProps, isViewMode);
+    case ComponentType.GridCol:
+      return gridColTemplate(commonProps, isViewMode);
+    case ComponentType.Form:
+      return formTemplate(commonProps, isViewMode);
     default:
+      const registeredTemplate = ComponentRegistry.getTemplate(component?.component_type as string);
+      if (registeredTemplate) {
+        const renderProps: ComponentRenderProps = {
+          component: commonProps.component,
+          parent: commonProps.parent,
+          item: commonProps.item,
+        };
+        return registeredTemplate(renderProps, isViewMode ?? false);
+      }
       return html``;
   }
 }

package/utils/toast.ts

@@ -0,0 +1,97 @@
+import { $toasts, type Toast } from '../redux/store/toast';
+import { eventDispatcher } from './change-detection';
+import { ToastContainer } from '../components/ui/components/ToastContainer/ToastContainer';
+
+let toastIdCounter = 0;
+
+function generateToastId(): string {
+  return `toast-${Date.now()}-${++toastIdCounter}`;
+}
+
+// Initialize ToastContainer singleton on first use
+let initialized = false;
+function ensureToastContainer() {
+  if (!initialized && typeof window !== 'undefined') {
+    initialized = true;
+    setTimeout(() => {
+      ToastContainer.getInstance();
+    }, 0);
+  }
+}
+
+/**
+ * Shows a toast notification
+ */
+export function showToast(options: {
+  message: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  closable?: boolean;
+}): string {
+  ensureToastContainer();
+
+  const id = generateToastId();
+  const toast: Toast = {
+    id,
+    type: 'info',
+    duration: 3000,
+    closable: true,
+    ...options
+  };
+
+  const current = $toasts.get();
+  ($toasts as any).setKey('toasts', [...current.toasts, toast]);
+
+  eventDispatcher.emit('toast:show', toast);
+
+  if (toast.duration && toast.duration > 0) {
+    setTimeout(() => hideToast(id), toast.duration);
+  }
+
+  return id;
+}
+
+/**
+ * Hides a specific toast by ID
+ */
+export function hideToast(id: string): void {
+  const current = $toasts.get();
+  ($toasts as any).setKey('toasts', current.toasts.filter(t => t.id !== id));
+  eventDispatcher.emit('toast:hide', { id });
+}
+
+/**
+ * Clears all active toasts
+ */
+export function clearAllToasts(): void {
+  ($toasts as any).setKey('toasts', []);
+  eventDispatcher.emit('toast:clear');
+}
+
+/**
+ * Shows a success toast
+ */
+export function showSuccess(message: string, duration = 3000): string {
+  return showToast({ message, type: 'success', duration });
+}
+
+/**
+ * Shows an error toast
+ */
+export function showError(message: string, duration = 5000): string {
+  return showToast({ message, type: 'error', duration });
+}
+
+/**
+ * Shows a warning toast
+ */
+export function showWarning(message: string, duration = 4000): string {
+  return showToast({ message, type: 'warning', duration });
+}
+
+/**
+ * Shows an info toast
+ */
+export function showInfo(message: string, duration = 3000): string {
+  return showToast({ message, type: 'info', duration });
+}

package/vite.config.ts

@@ -1,9 +1,22 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
+import { existsSync } from 'fs';
 
 // Check if we're building the bundle version
 const isBundleBuild = process.env.BUILD_BUNDLE === 'true';
 
+// Helper to find node_modules - check local first, then parent (for monorepo)
+function findNodeModule(moduleName: string): string {
+  const localPath = resolve(__dirname, 'node_modules', moduleName);
+  const parentPath = resolve(__dirname, '../../../node_modules', moduleName);
+
+  // Prefer local node_modules (standalone build), fallback to parent (monorepo)
+  if (existsSync(localPath)) {
+    return localPath;
+  }
+  return parentPath;
+}
+
 export default defineConfig({
   define: {
     // Replace process.env.NODE_ENV with a static value for browser bundles
@@ -41,7 +54,6 @@ export default defineConfig({
           'immer',
           'uuid',
           '@nuralyui/',
-          '@nuraly/dbclient',
           'acorn',
           'acorn-walk',
           'fast-deep-equal'
@@ -70,17 +82,22 @@ export default defineConfig({
   resolve: {
     alias: [
       { find: '@', replacement: resolve(__dirname, './') },
-      // Resolve dependencies from the main studio node_modules
-      { find: 'lit', replacement: resolve(__dirname, '../../../node_modules/lit') },
-      { find: 'nanostores', replacement: resolve(__dirname, '../../../node_modules/nanostores') },
-      { find: 'rxjs', replacement: resolve(__dirname, '../../../node_modules/rxjs') },
-      { find: 'immer', replacement: resolve(__dirname, '../../../node_modules/immer') },
-      { find: 'uuid', replacement: resolve(__dirname, '../../../node_modules/uuid') },
-      { find: 'acorn', replacement: resolve(__dirname, '../../../node_modules/acorn') },
-      { find: 'acorn-walk', replacement: resolve(__dirname, '../../../node_modules/acorn-walk') },
-      { find: 'fast-deep-equal', replacement: resolve(__dirname, '../../../node_modules/fast-deep-equal') },
-      // Resolve all nuralyui packages using a regex pattern
-      { find: /^@nuralyui\/(.*)$/, replacement: resolve(__dirname, '../../../node_modules/@nuralyui/$1') }
+      // Resolve dependencies - automatically finds local or parent node_modules
+      { find: 'lit', replacement: findNodeModule('lit') },
+      { find: 'nanostores', replacement: findNodeModule('nanostores') },
+      { find: 'rxjs', replacement: findNodeModule('rxjs') },
+      { find: 'immer', replacement: findNodeModule('immer') },
+      { find: 'uuid', replacement: findNodeModule('uuid') },
+      { find: 'acorn', replacement: findNodeModule('acorn') },
+      { find: 'acorn-walk', replacement: findNodeModule('acorn-walk') },
+      { find: 'fast-deep-equal', replacement: findNodeModule('fast-deep-equal') },
+      // Resolve all nuralyui packages - check local first, then parent
+      {
+        find: /^@nuralyui\/(.*)$/,
+        replacement: existsSync(resolve(__dirname, 'node_modules/@nuralyui'))
+          ? resolve(__dirname, 'node_modules/@nuralyui/$1')
+          : resolve(__dirname, '../../../node_modules/@nuralyui/$1')
+      }
     ]
   }
 });

package/components/ui/components/Event/EventAttribute/EventAttribute.style.ts

@@ -1,11 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  .container {
-    display: flex;
-    flex-direction: row;
-  }
-  .first_column {
-    width: 45%;
-  }
-`;

package/components/ui/components/Event/EventAttribute/EventAttribute.ts

@@ -1,28 +0,0 @@
-import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "../EventLabel/EventLabel.ts";
-import "../EventValue/EventValue.ts";
-import styles from "./EventAttribute.style.ts";
-
-@customElement("parameter-event")
-export class ParameterEvent extends LitElement {
-  static styles = styles;
-  @property({ type: Object })
-  component: ComponentElement;
-  @property()
-  eventName: string;
-
-  render() {
-    return html` <div class="container">
-      <parameter-event-label
-        class="first_column"
-        .eventName=${this.eventName}
-      ></parameter-event-label>
-      <parameter-event-handler
-        .component=${this.component}
-        .eventName=${this.eventName}
-      ></parameter-event-handler>
-    </div>`;
-  }
-}

package/components/ui/components/base/BaseElement/calculateStyles.ts

@@ -1,31 +0,0 @@
-import { RuntimeHelpers } from '../../../../../utils/runtime-helpers.ts';
-import Editor from '../../../../../state/editor.ts';
-
-export function calculateStyles(ctx: {
-  component: any;
-  inputHandlersValue: Record<string, any>;
-  calculatedStyles: Record<string, any>;
-  style: CSSStyleDeclaration;
-}) {
-  ctx.calculatedStyles = {
-    ...Editor.getComponentStyles(ctx.component),
-    ...ctx.calculatedStyles,
-  };
-
-  const { innerAlignment } = ctx.inputHandlersValue;
-
-  ctx.style.removeProperty("align-self");
-  ctx.style.removeProperty("margin");
-  ctx.style.removeProperty("margin-left");
-
-  if (innerAlignment === "end") ctx.style.marginLeft = "auto";
-  else if (innerAlignment === "middle") {
-    ctx.style.alignSelf = "center";
-    ctx.style.margin = "auto";
-  }
-
-  const { width, flex, cursor } = ctx.calculatedStyles;
-  if (width && RuntimeHelpers.extractUnit(width) === "%") ctx.style.width = width;
-  if (flex) ctx.style.flex = flex;
-  if (cursor) ctx.style.cursor = cursor;
-}