@nuraly/runtime 0.1.7 → 0.1.9

package/components/ui/components/display/BoxModel/BoxModel.ts

@@ -2,7 +2,6 @@ import type { ComponentElement } from '../../../../../redux/store/component/comp
 import { BaseElementBlock } from '../../base/BaseElement';
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { handleComponentEvent } from '../../base/BaseElement/execute-event.helpers.ts';
 
 @customElement("box-model-display")
 export class BoxModelDisplay extends BaseElementBlock {
@@ -15,44 +14,41 @@ export class BoxModelDisplay extends BaseElementBlock {
       }
 
       .box-model-container {
-        background-color: var(--box-model-margin-bg, #f6f6d8);
-        border: 2px dashed #9acd32;
-        border-radius: 4px;
-        padding: 20px;
+        background-color: var(--box-model-margin-bg, #fef9e7);
+        border: 1px dashed #d4ac0d;
+        border-radius: 6px;
+        padding:22px 34px 22px;
         position: relative;
         width: fit-content;
-        margin: 10px auto;
-        max-width: 500px;
+        margin: 8px auto;
       }
 
       .margin-label {
         position: absolute;
-        top: 8px;
+        top: 5px;
         left: 8px;
-        color: #666;
-        font-size: 11px;
-        font-weight: 500;
+        color: #9a7b0a;
+        font-size: 9px;
+        font-weight: 600;
+        text-transform: lowercase;
+        z-index: 1;
       }
 
       /* Shared styles for all box model value badges */
       .margin-values,
-      .border-values,
       .padding-values {
         position: absolute;
-        background: #666;
+        background: #5d6d7e;
         color: white;
-        border-radius: 10px;
-        width: 30px;
-        height: 20px;
+        border-radius: 8px;
+        min-width: 24px;
+        height: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 9px;
-      }
-
-      /* Override background for border values */
-      .border-values {
-        background: #444;
+        padding: 0 4px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
       }
 
       .editable-value {
@@ -74,11 +70,11 @@ export class BoxModelDisplay extends BaseElementBlock {
       }
 
       .editable-value:hover {
-        background: rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.15);
       }
 
       .editable-value:focus {
-        background: rgba(255, 255, 255, 0.2);
+        background: rgba(255, 255, 255, 0.25);
         cursor: text;
       }
 
@@ -87,58 +83,58 @@ export class BoxModelDisplay extends BaseElementBlock {
         color: rgba(255, 255, 255, 0.6);
       }
 
-      .margin-top,
-      .border-top,
-      .padding-top {
-        top: -10px;
+      .margin-top {
+        top: -8px;
         left: 50%;
         transform: translateX(-50%);
       }
 
-      .margin-right,
-      .border-right,
-      .padding-right {
-        right: -10px;
+      .margin-right {
+        right: -12px;
         top: 50%;
         transform: translateY(-50%);
       }
 
-      .margin-bottom,
-      .border-bottom,
-      .padding-bottom {
-        bottom: -10px;
+      .margin-bottom {
+        bottom: -8px;
         left: 50%;
         transform: translateX(-50%);
       }
 
-      .margin-left,
-      .border-left,
-      .padding-left {
-        left: -10px;
+      .margin-left {
+        left: -12px;
         top: 50%;
         transform: translateY(-50%);
       }
 
-      .border-container {
-        background-color: var(--box-model-border-bg, #656565);
-        border-radius: 3px;
-        padding: 18px;
-        position: relative;
+      .padding-top {
+        top: -8px;
+        left: 50%;
+        transform: translateX(-50%);
       }
 
-      .border-label {
-        position: absolute;
-        top: 5px;
-        left: 8px;
-        color: white;
-        font-size: 11px;
-        font-weight: 500;
+      .padding-right {
+        right: -12px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .padding-bottom {
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .padding-left {
+        left: -12px;
+        top: 50%;
+        transform: translateY(-50%);
       }
 
       .padding-container {
-        background-color: var(--box-model-padding-bg, #b8b8d1);
-        border-radius: 3px;
-        padding: 18px;
+        background-color: var(--box-model-padding-bg, #d5dbdb);
+        border-radius: 4px;
+        padding: 22px 16px 16px 16px;
         position: relative;
       }
 
@@ -146,33 +142,59 @@ export class BoxModelDisplay extends BaseElementBlock {
         position: absolute;
         top: 5px;
         left: 8px;
-        color: #333;
-        font-size: 11px;
-        font-weight: 500;
+        color: #5d6d7e;
+        font-size: 9px;
+        font-weight: 600;
+        text-transform: lowercase;
+        z-index: 1;
       }
 
       .content-box {
-        background-color: var(--box-model-content-bg, #8ac4d0);
-        border: 2px dashed #4a9db0;
-        border-radius: 3px;
-        padding: 15px 30px;
+        background-color: var(--box-model-content-bg, #aed6f1);
+        border: 1px dashed #5dade2;
+        border-radius: 4px;
+        padding: 10px 20px;
         text-align: center;
-        color: #333;
-        font-size: 14px;
+        color: #2471a3;
+        font-size: 12px;
         font-weight: 600;
-        min-width: 120px;
+        min-width: 100px;
       }
 
       .dimensions {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 5px;
+        gap: 4px;
       }
 
       .dimension-separator {
         font-weight: normal;
-        color: #666;
+        color: #5dade2;
+        font-size: 11px;
+      }
+
+      .dimension-value {
+        background: transparent;
+        border: none;
+        color: #2471a3;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 600;
+        outline: none;
+        cursor: text;
+        min-width: 35px;
+        padding: 2px 4px;
+        border-radius: 3px;
+        transition: background 0.15s ease;
+      }
+
+      .dimension-value:hover {
+        background: rgba(46, 134, 193, 0.1);
+      }
+
+      .dimension-value:focus {
+        background: rgba(46, 134, 193, 0.2);
       }
     `,
   ];
@@ -194,16 +216,9 @@ export class BoxModelDisplay extends BaseElementBlock {
     }
 
     // Trigger the onChange event handler
-    handleComponentEvent({
-      isViewMode: true,
-      component: this.component,
-      item: this.item,
-      eventName: "onChange",
-      event: event,
-      data: {
-        property,
-        value: numericValue ? `${numericValue}px` : "0px",
-      },
+    this.executeEvent("onChange", event, {
+      property,
+      value: numericValue ? `${numericValue}px` : "0px",
     });
   }
 
@@ -221,16 +236,9 @@ export class BoxModelDisplay extends BaseElementBlock {
       this.moveCursorToEnd(div);
 
       // Trigger update
-      handleComponentEvent({
-        isViewMode: true,
-        component: this.component,
-        item: this.item,
-        eventName: "onChange",
-        event: event,
-        data: {
-          property,
-          value: `${finalValue}px`,
-        },
+      this.executeEvent("onChange", event, {
+        property,
+        value: `${finalValue}px`,
       });
     } else if (event.key === "Enter") {
       event.preventDefault();
@@ -295,6 +303,77 @@ export class BoxModelDisplay extends BaseElementBlock {
     >${value}</div>`;
   }
 
+  private handleDimensionChange(property: string, event: Event) {
+    const div = event.target as HTMLDivElement;
+    const value = div.textContent?.trim() || "";
+
+    // Allow "auto" or numbers (with optional decimals)
+    const isAuto = value.toLowerCase() === "auto";
+    const numericValue = value.replace(/[^0-9.]/g, '');
+
+    if (!isAuto && value !== numericValue && value.toLowerCase() !== "a" && value.toLowerCase() !== "au" && value.toLowerCase() !== "aut") {
+      div.textContent = numericValue || "auto";
+      this.moveCursorToEnd(div);
+    }
+
+    // Trigger the onChange event handler
+    const finalValue = isAuto ? "auto" : (numericValue ? `${numericValue}px` : "auto");
+    this.executeEvent("onChange", event, {
+      property,
+      value: finalValue,
+    });
+  }
+
+  private handleDimensionKeyDown(property: string, event: KeyboardEvent) {
+    const div = event.target as HTMLDivElement;
+    const currentText = div.textContent?.trim() || "";
+
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const currentValue = parseFloat(currentText) || 0;
+      const step = event.shiftKey ? 10 : 1;
+      const newValue = event.key === "ArrowUp" ? currentValue + step : currentValue - step;
+      const finalValue = Math.max(0, newValue);
+
+      div.textContent = finalValue.toString();
+      this.moveCursorToEnd(div);
+
+      this.executeEvent("onChange", event, {
+        property,
+        value: `${finalValue}px`,
+      });
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      div.blur();
+    }
+  }
+
+  private handleDimensionBlur(property: string, event: FocusEvent) {
+    const div = event.target as HTMLDivElement;
+    const value = div.textContent?.trim() || "";
+
+    // Allow "auto" or ensure we have a valid number
+    if (value.toLowerCase() === "auto") {
+      div.textContent = "auto";
+    } else {
+      const numericValue = value.replace(/[^0-9.]/g, '');
+      div.textContent = numericValue || "auto";
+    }
+  }
+
+  private createEditableDimension(value: number | string, property: string) {
+    const displayValue = value || "auto";
+    return html`<div
+      class="dimension-value"
+      contenteditable="true"
+      spellcheck="false"
+      @input=${(e: Event) => this.handleDimensionChange(property, e)}
+      @keydown=${(e: KeyboardEvent) => this.handleDimensionKeyDown(property, e)}
+      @paste=${(e: ClipboardEvent) => this.handlePaste(e)}
+      @blur=${(e: FocusEvent) => this.handleDimensionBlur(property, e)}
+    >${displayValue}</div>`;
+  }
+
   override renderComponent() {
     const handlers = this.inputHandlersValue?.value;
 
@@ -321,16 +400,6 @@ export class BoxModelDisplay extends BaseElementBlock {
       left: handlers?.["padding-left"]?.value || 0,
     };
 
-    // Border handler also returns {value: number, unit: string}
-    const borderWidth = handlers?.["border"]?.value || 0;
-
-    const border = {
-      top: borderWidth,
-      right: borderWidth,
-      bottom: borderWidth,
-      left: borderWidth,
-    };
-
     // Get width and height from handler (already numeric values)
     const width = handlers?.["width"]?.value || 0;
     const height = handlers?.["height"]?.value || 0;
@@ -343,26 +412,18 @@ export class BoxModelDisplay extends BaseElementBlock {
         <div class="margin-values margin-bottom">${this.createEditableValue(margin.bottom, "margin-bottom")}</div>
         <div class="margin-values margin-left">${this.createEditableValue(margin.left, "margin-left")}</div>
 
-        <div class="border-container">
-          <div class="border-label">border</div>
-          <div class="border-values border-top">${this.createEditableValue(border.top, "border-top")}</div>
-          <div class="border-values border-right">${this.createEditableValue(border.right, "border-right")}</div>
-          <div class="border-values border-bottom">${this.createEditableValue(border.bottom, "border-bottom")}</div>
-          <div class="border-values border-left">${this.createEditableValue(border.left, "border-left")}</div>
-
-          <div class="padding-container">
-            <div class="padding-label">padding</div>
-            <div class="padding-values padding-top">${this.createEditableValue(padding.top, "padding-top")}</div>
-            <div class="padding-values padding-right">${this.createEditableValue(padding.right, "padding-right")}</div>
-            <div class="padding-values padding-bottom">${this.createEditableValue(padding.bottom, "padding-bottom")}</div>
-            <div class="padding-values padding-left">${this.createEditableValue(padding.left, "padding-left")}</div>
-
-            <div class="content-box">
-              <div class="dimensions">
-                <span>${width || "auto"}</span>
-                <span class="dimension-separator">×</span>
-                <span>${height || "auto"}</span>
-              </div>
+        <div class="padding-container">
+          <div class="padding-label">padding</div>
+          <div class="padding-values padding-top">${this.createEditableValue(padding.top, "padding-top")}</div>
+          <div class="padding-values padding-right">${this.createEditableValue(padding.right, "padding-right")}</div>
+          <div class="padding-values padding-bottom">${this.createEditableValue(padding.bottom, "padding-bottom")}</div>
+          <div class="padding-values padding-left">${this.createEditableValue(padding.left, "padding-left")}</div>
+
+          <div class="content-box">
+            <div class="dimensions">
+              ${this.createEditableDimension(width, "width")}
+              <span class="dimension-separator">×</span>
+              ${this.createEditableDimension(height, "height")}
             </div>
           </div>
         </div>

package/components/ui/components/display/Code/Code.ts

@@ -3,11 +3,8 @@ import { customElement, property, state } from "lit/decorators.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { executeHandler } from '../../../../../state/runtime-context.ts';
-import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
 import { ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
-// Removed static import
-// import "@shared/ui/CodeEditor/CodeEditor";
 
 @customElement("code-block")
 export class TextInputBlock extends BaseElementBlock {
@@ -31,8 +28,12 @@ export class TextInputBlock extends BaseElementBlock {
   @state()
   private isEditorLoaded: boolean = false;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
+    this.loadEditor();
+  }
+
+  private async loadEditor() {
     if (!this.isEditorLoaded) {
       await import("../../advanced/CodeEditor/CodeEditor.ts");
       this.isEditorLoaded = true;
@@ -43,32 +44,28 @@ export class TextInputBlock extends BaseElementBlock {
     super.disconnectedCallback();
   }
 
-  handleCheckboxChange = (e) => {
-    if (this.component.event?.checkboxChanged) {
-      executeHandler(
-        this.component,
-        getNestedAttribute(this.component, `event.onCodeChange`),
-        { value: e.detail.value }
-      );
-    }
-  };
+  private handleCodeEditorChange(event: CustomEvent) {
+    const value = event.detail.value;
 
-  private handleCodeEditorChange(value: string) {
+    // Update the input value in editor mode
     if (!this.isViewMode) {
       const serializedValue = JSON.stringify(value);
       executeHandler(
         this.component,
         /* js */ `
           try {
-              const selectedComponent = Utils.first(Vars.selectedComponents);
+              const selectedComponent = Utils.first($selectedComponents);
               updateInput(selectedComponent, "value", "string", ${serializedValue}, null);
           } catch (error) {
-              console.log(error);
+              console.error(error);
           }
         `,
         {}
       );
     }
+
+    // Execute the onChange event handler
+    this.executeEvent('onChange', event, { value });
   }
 
   renderComponent() {
@@ -76,24 +73,41 @@ export class TextInputBlock extends BaseElementBlock {
       ${this.isEditorLoaded
         ? html`
             <code-editor
-              @click=${(e) => {
-                this.executeEvent("onClick", e);
-              }}
               ${ref(this.inputRef)}
               style=${styleMap({
                 ...this.getStyles(),
                 display: "block"
               })}
               language="${this.inputHandlersValue?.language ?? "javascript"}"
-              theme="${this.inputHandlersValue?.theme ?? "vs"}"
+              theme="${this.inputHandlersValue?.theme ?? "vs-dark"}"
               .readonly=${this.inputHandlersValue?.readonly ?? this.isViewMode === true}
+              .code=${this.inputHandlersValue?.value ?? ""}
+              @click=${(e: MouseEvent) => {
+                this.executeEvent("onClick", e);
+              }}
               @change=${(event: CustomEvent) => {
-                const {
-                  detail: { value }
-                } = event;
-                this.handleCodeEditorChange(value);
+                this.handleCodeEditorChange(event);
+              }}
+              @editor-keydown=${(event: CustomEvent) => {
+                this.executeEvent("onKeyDown", event, {
+                  key: event.detail.key,
+                  code: event.detail.code,
+                  ctrlKey: event.detail.ctrlKey,
+                  shiftKey: event.detail.shiftKey,
+                  altKey: event.detail.altKey,
+                  metaKey: event.detail.metaKey
+                });
+              }}
+              @editor-keyup=${(event: CustomEvent) => {
+                this.executeEvent("onKeyUp", event, {
+                  key: event.detail.key,
+                  code: event.detail.code,
+                  ctrlKey: event.detail.ctrlKey,
+                  shiftKey: event.detail.shiftKey,
+                  altKey: event.detail.altKey,
+                  metaKey: event.detail.metaKey
+                });
               }}
-              .code=${this.inputHandlersValue?.value ?? ""}
             >
             </code-editor>
           `

package/components/ui/components/display/Divider/Divider.ts

@@ -41,8 +41,8 @@ export class DividerBlock extends BaseElementBlock {
   item: any;
   unsubscribe: () => void;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.registerCallback("value", () => {
     });
     // Set data-type attribute for CSS styling

package/components/ui/components/display/Icon/Icon.ts

@@ -26,9 +26,8 @@ export class IconBlock extends BaseElementBlock {
     this.registerCallback("icon", () => {
     });
   }
-  override async connectedCallback() {
-    await super.connectedCallback();
-
+  override connectedCallback() {
+    super.connectedCallback();
   }
 
   renderComponent() {