@nuraly/runtime 0.1.9 → 0.1.10

package/dist/micro-app.js

@@ -1,4977 +1,14 @@
-import { ae as BaseElementBlock, bl as EMPTY_STRING, aO as renderComponent, w as $applicationComponents, $ as $components, v as RuntimeHelpers, ap as setContextMenuEvent, ak as setCurrentComponentIdAction, a8 as executeHandler, ba as getNestedAttribute, az as addGeneratedComponents, as as addTempApplication, a0 as $microAppCurrentPage, j as $environment, a4 as ViewMode, n as $resizing, aU as eventDispatcher, q as $pages, aZ as RuntimeContextHelpers, bm as ToastContainer, E as ExecuteInstance, bn as getInitPlatform, t as EditorInstance, a1 as $applicationPages, Z as $currentPage } from './BaseElement-BNBn_IJk.js';
-import { css, nothing, html, LitElement as LitElement$1 } from 'lit';
+import { $ as $components, q as $pages, aX as eventDispatcher, b0 as RuntimeContextHelpers, a4 as ViewMode, w as $applicationComponents, bn as ToastContainer, E as ExecuteInstance, bo as getInitPlatform, t as EditorInstance, a0 as $microAppCurrentPage, a1 as $applicationPages, Z as $currentPage, aM as renderComponent } from './BaseElement-pS6m_x6Q.js';
+import { css, LitElement, nothing, html } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
+import './TextLabel-DkV26yaL.js';
+import './Container-DMNh5U4Y.js';
+import { Subscription, merge, Observable } from 'rxjs';
 import { styleMap } from 'lit/directives/style-map.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { PanelMode, PanelSize, PanelPosition, MaximizePosition } from '@nuralyui/panel';
 import { v4 } from 'uuid';
-import { css as css$1, LitElement, html as html$1 } from 'lit-element';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { Subscription, merge, Observable } from 'rxjs';
 import { deepMap, map, atom } from 'nanostores';
 import deepEqual from 'fast-deep-equal';
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/tabs');
-} catch (error) {
-  console.warn("[@nuralyui/tabs] Package not found or failed to load. Tab functionality may be limited.");
-}
-let TabsBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.editableTabs = [];
-    this.componentsWithChildren = [];
-    this.registerCallback("tabs", () => {
-      this.updateComponents();
-      this.editableTabs = this.generateTabs();
-    });
-  }
-  update(changedProperties) {
-    super.update(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateComponents();
-    }
-  }
-  renderComponent() {
-    const tabStyle = this.getStyles();
-    return html`
-      ${this.editableTabs?.length > 0 ? html`
-        <nr-tabs
-          style=${styleMap({
-      ...tabStyle
-    })}
-          .activeTab=${this.inputHandlersValue.index ?? 0}
-          .tabs=${this.editableTabs}
-          size=${this.inputHandlersValue?.size ?? "medium"}
-          align=${this.inputHandlersValue?.align ?? nothing}
-          .panelConfig=${this.inputHandlersValue?.panelConfig ?? nothing}
-          .popOut=${this.inputHandlersValue?.popOut ?? nothing}
-          @nr-tab-click=${(e) => {
-      this.executeEvent("onTabChanged", e, {
-        tab: this.editableTabs.find((tab, index) => index === e.detail.index)
-      });
-    }}
-          @nr-tabs-panel-close=${(e) => {
-      this.executeEvent("onPanelClose", e);
-    }}
-          @nr-tabs-panel-minimize=${(e) => {
-      this.executeEvent("onPanelMinimize", e);
-    }}
-          @nr-tabs-panel-resize=${(e) => {
-      this.executeEvent("onPanelResize", e);
-    }}
-          @nr-tab-pop-out=${(e) => {
-      this.executeEvent("onTabPopOut", e, {
-        tab: e.detail.tab,
-        index: e.detail.index,
-        popOutId: e.detail.popOutId
-      });
-    }}
-          @nr-tab-pop-in=${(e) => {
-      this.executeEvent("onTabPopIn", e, {
-        tab: e.detail.tab,
-        originalIndex: e.detail.originalIndex,
-        popOutId: e.detail.popOutId
-      });
-    }}
-          .editable=${{
-      canDeleteTab: false,
-      canEditTabTitle: false,
-      canAddTab: false,
-      canMove: false
-    }}
-        ></nr-tabs>
-      ` : EMPTY_STRING}
-    `;
-  }
-  generateComponent(childrensIds) {
-    const childrens = childrensIds?.map(
-      (id) => this.componentsWithChildren.find((component) => component.uuid === id)
-    ).filter(Boolean) || [];
-    return html`${renderComponent(childrens, null, true)}`;
-  }
-  generateTabs() {
-    return this.inputHandlersValue.tabs?.map((tab) => ({
-      label: tab.label.value,
-      key: tab.key,
-      icon: tab.icon?.value || null,
-      content: html`
-        <div>${this.generateComponent(tab.childrends.value)}</div>`
-    }));
-  }
-  updateComponents() {
-    const components = $applicationComponents(this.component.application_id).get();
-    this.componentsWithChildren = [...components];
-  }
-};
-TabsBlock.styles = css`
-      :host {
-          display: block;
-          height: 100%;
-          /* CSS variables for tab text alignment customization */
-          --nuraly-tabs-text-align: center; /* Default center alignment */
-      }
-  `;
-__decorateClass$E([
-  property({ type: Object, reflect: false })
-], TabsBlock.prototype, "component", 2);
-__decorateClass$E([
-  state()
-], TabsBlock.prototype, "editableTabs", 2);
-__decorateClass$E([
-  state()
-], TabsBlock.prototype, "componentsWithChildren", 2);
-TabsBlock = __decorateClass$E([
-  customElement("tabs-block")
-], TabsBlock);
-
-const styles$5 = css`
-  :host{
-    display: block;
-  }
-  
-  .container {
-    /* --container-bg-color-local: var(--container-bg-color); */
-    display: flex;
-    width: fit-content;
-    min-height: 300px;
-    height: 100%;
-    flex-wrap: wrap;
-    /* background-color: var(--container-bg-color-local, var(--container-bg-color)); */
-  }
-
-  .boxed{
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-  }
-  
-  .vertical {
-    flex-direction: column;
-  }
-  
-  .empty-message-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height:100%
-  }
-
-  .container-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #64748b;
-    min-height: 200px;
-    width: 100%;
-    border-radius: 8px;
-    border: 2px dashed #cbd5e1;
-    gap: 12px;
-    cursor: pointer;
-  }
-
-  .container-placeholder nr-icon {
-    --nuraly-icon-size: 48px;
-  }
-`;
-
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
-  return result;
-};
-let VerticalContainer = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.dragOverSituation = false;
-    this.wrapperStyle = {};
-    this.containerRef = createRef();
-    this.childrenComponents = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }) ?? [];
-  }
-  renderView() {
-    return html`
-      <div
-      id=${this.inputHandlersValue.id ?? nothing}
-        ${ref(this.inputRef)}
-        data-component-uuid=${this.component?.uuid}
-        data-component-name=${this.component?.name}
-        style=${styleMap({
-      "width": RuntimeHelpers.extractUnit(this.componentStyles?.width) === "%" ? "100%" : this.componentStyles?.width ?? "auto",
-      ...this.getStyles(),
-      "min-height": this.childrenComponents.length ? "auto" : "300px"
-    })}
-        class=${classMap({
-      container: true,
-      vertical: this.inputHandlersValue.direction === "vertical",
-      boxed: this.inputHandlersValue.layout === "boxed",
-      "drag-over": this.dragOverSituation
-    })}
-        @mouseenter="${(e) => this.executeEvent("onMouseEnter", { ...e, unique: this.uniqueUUID })}"
-        @mouseleave="${(e) => this.executeEvent("onMouseLeave", { ...e, unique: this.uniqueUUID })}"
-        @click="${(e) => this.executeEvent("onClick", e)}"
-      >
-        ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : html`
-              <div class="container-placeholder">
-                <nr-icon name="layout-grid"></nr-icon>
-                <nr-label>No content</nr-label>
-              </div>
-            `}
-      </div>
-    `;
-  }
-  renderComponent() {
-    return html`
-      ${this.isViewMode ? this.renderView() : html`
-            <div
-              ${ref(this.inputRef)}
-              data-component-uuid=${this.component?.uuid}
-              data-component-name=${this.component?.name}
-              ${ref(this.containerRef)}
-              @click="${(e) => {
-      setContextMenuEvent(null);
-      this.executeEvent("onClick", e);
-    }}"
-              style=${styleMap({
-      ...this.getStyles(),
-      "min-height": this.childrenComponents.length ? "auto" : "300px"
-    })}
-              class=${classMap({
-      container: true,
-      vertical: this.inputHandlersValue.direction === "vertical",
-      horizontal: this.inputHandlersValue.direction !== "vertical",
-      boxed: this.inputHandlersValue.layout == "boxed"
-    })}
-            >
-              ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : html`
-                    <div
-                      class="container-placeholder"
-                      @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
-                    >
-                      <nr-icon name="layout-grid"></nr-icon>
-                      <nr-label>Add or drag an item into this container</nr-label>
-                      <drag-wrapper
-                        .where=${"inside"}
-                        .message=${"Drop inside"}
-                        .component=${{ ...this.component }}
-                        .inputRef=${this.inputRef}
-                        .isDragInitiator=${this.isDragInitiator}
-                      >
-                      </drag-wrapper>
-                    </div>
-                  `}
-            </div>
-          `}
-    `;
-  }
-};
-VerticalContainer.styles = styles$5;
-__decorateClass$D([
-  property({ type: Object })
-], VerticalContainer.prototype, "component", 2);
-__decorateClass$D([
-  property({ type: Object })
-], VerticalContainer.prototype, "item", 2);
-__decorateClass$D([
-  property({ type: Object })
-], VerticalContainer.prototype, "draggingComponentInfo", 2);
-__decorateClass$D([
-  property({ type: Boolean })
-], VerticalContainer.prototype, "isViewMode", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "dragOverSituation", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "selectedComponent", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "hoveredComponent", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "wrapperStyle", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "containerRef", 2);
-__decorateClass$D([
-  state()
-], VerticalContainer.prototype, "childrenComponents", 2);
-VerticalContainer = __decorateClass$D([
-  customElement("vertical-container-block")
-], VerticalContainer);
-
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/card');
-} catch (error) {
-  console.warn("[@nuralyui/card] Package not found or failed to load.");
-}
-let CardBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.childrenComponents = [];
-    this.dragOverSituation = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }) ?? [];
-  }
-  renderView() {
-    const cardStyles = this.component?.style || {};
-    const title = this.component?.input?.title?.value || this.inputHandlersValue?.title || "";
-    const bordered = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? true;
-    const hoverable = this.component?.input?.hoverable?.value ?? this.inputHandlersValue?.hoverable ?? false;
-    const loading = this.component?.input?.loading?.value ?? this.inputHandlersValue?.loading ?? false;
-    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || "default";
-    return html`
-      <nr-card
-        id=${this.inputHandlersValue.id ?? nothing}
-        ${ref(this.inputRef)}
-        data-component-uuid=${this.component?.uuid}
-        data-component-name=${this.component?.name}
-        style=${styleMap({
-      "width": RuntimeHelpers.extractUnit(cardStyles?.width) === "%" ? "100%" : cardStyles?.width ?? "auto",
-      ...cardStyles
-    })}
-        class=${classMap({
-      "drag-over": this.dragOverSituation
-    })}
-        .header=${title}
-        .size=${size}
-        ?bordered=${bordered}
-        ?hoverable=${hoverable}
-        ?loading=${loading}
-        @mouseenter="${(e) => this.executeEvent("onMouseEnter", { ...e, unique: this.uniqueUUID })}"
-        @mouseleave="${(e) => this.executeEvent("onMouseLeave", { ...e, unique: this.uniqueUUID })}"
-        @click=${(e) => this.executeEvent("onClick", e)}
-      >
-        <div slot="content">
-          ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : nothing}
-        </div>
-      </nr-card>
-    `;
-  }
-  renderComponent() {
-    const cardStyles = this.component?.style || {};
-    const title = this.component?.input?.title?.value || this.inputHandlersValue?.title || "";
-    const bordered = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? true;
-    const hoverable = this.component?.input?.hoverable?.value ?? this.inputHandlersValue?.hoverable ?? false;
-    const loading = this.component?.input?.loading?.value ?? this.inputHandlersValue?.loading ?? false;
-    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || "default";
-    return html`
-      ${this.isViewMode ? this.renderView() : html`
-            <nr-card
-              ${ref(this.inputRef)}
-              data-component-uuid=${this.component?.uuid}
-              data-component-name=${this.component?.name}
-              style=${styleMap(cardStyles)}
-              class=${classMap({
-      "drag-over": this.dragOverSituation
-    })}
-              .header=${title}
-              .size=${size}
-              ?bordered=${bordered}
-              ?hoverable=${hoverable}
-              ?loading=${loading}
-              @click=${(e) => {
-      setContextMenuEvent(null);
-      this.executeEvent("onClick", e);
-    }}
-            >
-              <div slot="content" style=${styleMap({ "min-height": this.childrenComponents.length ? "auto" : "100px" })}>
-                ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : html`
-                      <div
-                        style="padding: 20px; text-align: center; color: #999;"
-                        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
-                      >
-                        Add or Drag an item into this card
-                        <drag-wrapper
-                          .where=${"inside"}
-                          .message=${"Drop inside"}
-                          .component=${{ ...this.component }}
-                          .inputRef=${this.inputRef}
-                          .isDragInitiator=${this.isDragInitiator}
-                        >
-                        </drag-wrapper>
-                      </div>
-                    `}
-              </div>
-            </nr-card>
-          `}
-    `;
-  }
-};
-CardBlock.styles = [css``];
-__decorateClass$C([
-  property({ type: Object })
-], CardBlock.prototype, "component", 2);
-__decorateClass$C([
-  property({ type: Object })
-], CardBlock.prototype, "item", 2);
-__decorateClass$C([
-  property({ type: Boolean })
-], CardBlock.prototype, "isViewMode", 2);
-__decorateClass$C([
-  state()
-], CardBlock.prototype, "childrenComponents", 2);
-__decorateClass$C([
-  state()
-], CardBlock.prototype, "dragOverSituation", 2);
-CardBlock = __decorateClass$C([
-  customElement("card-block")
-], CardBlock);
-
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/panel');
-} catch (error) {
-  console.warn("[@nuralyui/panel] Package not found or failed to load. Panel functionality may be limited.");
-}
-let PanelBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.childrenComponents = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }) ?? [];
-  }
-  renderComponent() {
-    const panelStyles = this.component?.style || {};
-    const mode = this.component?.input?.mode?.value || this.inputHandlersValue?.mode || PanelMode.Panel;
-    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || PanelSize.Medium;
-    const position = this.component?.input?.position?.value || this.inputHandlersValue?.position || PanelPosition.Right;
-    const maximizePosition = this.component?.input?.maximizePosition?.value || this.inputHandlersValue?.maximizePosition || MaximizePosition.Center;
-    const draggable = this.component?.input?.draggable?.value ?? this.inputHandlersValue?.draggable ?? true;
-    const resizable = this.component?.input?.resizable?.value ?? this.inputHandlersValue?.resizable ?? false;
-    const collapsible = this.component?.input?.collapsible?.value ?? this.inputHandlersValue?.collapsible ?? false;
-    const minimizable = this.component?.input?.minimizable?.value ?? this.inputHandlersValue?.minimizable ?? true;
-    const closable = this.component?.input?.closable?.value ?? this.inputHandlersValue?.closable ?? true;
-    const animated = this.component?.input?.animated?.value ?? this.inputHandlersValue?.animated ?? false;
-    const title = this.component?.input?.title?.value || this.inputHandlersValue?.title || "";
-    const icon = this.component?.input?.icon?.value || this.inputHandlersValue?.icon || "";
-    const width = this.component?.input?.width?.value || this.inputHandlersValue?.width || "";
-    const height = this.component?.input?.height?.value || this.inputHandlersValue?.height || "";
-    const open = this.component?.input?.open?.value ?? this.inputHandlersValue?.open ?? true;
-    return html`
-      <nr-panel
-        ${ref(this.inputRef)}
-        style=${styleMap(panelStyles)}
-        .mode=${mode}
-        .size=${size}
-        .position=${position}
-        .maximizePosition=${maximizePosition}
-        ?draggable=${draggable}
-        ?resizable=${resizable}
-        ?collapsible=${collapsible}
-        ?minimizable=${minimizable}
-        ?closable=${closable}
-        ?animated=${animated}
-        .title=${title}
-        .icon=${icon}
-        .width=${width}
-        .height=${height}
-        ?open=${open}
-        @panel-mode-change=${(e) => {
-      this.executeEvent("onPanelModeChange", e);
-    }}
-        @panel-close=${(e) => {
-      this.executeEvent("onPanelClose", e);
-    }}
-        @panel-minimize=${(e) => {
-      this.executeEvent("onPanelMinimize", e);
-    }}
-        @panel-maximize=${(e) => {
-      this.executeEvent("onPanelMaximize", e);
-    }}
-        @panel-drag-start=${(e) => {
-      this.executeEvent("onPanelDragStart", e);
-    }}
-        @panel-drag-end=${(e) => {
-      this.executeEvent("onPanelDragEnd", e);
-    }}
-        @panel-resize=${(e) => {
-      this.executeEvent("onPanelResize", e);
-    }}
-        @panel-maximize-embedded=${(e) => {
-      this.executeEvent("onPanelMaximizeEmbedded", e);
-    }}
-        @panel-restore-embedded=${(e) => {
-      this.executeEvent("onPanelRestoreEmbedded", e);
-    }}
-      >
-        ${this.childrenComponents.length ? renderComponent(
-      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
-      this.item,
-      this.isViewMode,
-      { ...this.component, uniqueUUID: this.uniqueUUID }
-    ) : nothing}
-        ${this.renderHeaderSlot()}
-        ${this.renderFooterSlot()}
-      </nr-panel>
-    `;
-  }
-  /**
-   * Render custom header slot if content is provided
-   */
-  renderHeaderSlot() {
-    const headerContent = this.component?.input?.headerContent?.value || this.inputHandlersValue?.headerContent;
-    if (!headerContent) return nothing;
-    return html`
-      <div slot="header">
-        ${headerContent}
-      </div>
-    `;
-  }
-  /**
-   * Render custom footer slot if content is provided
-   */
-  renderFooterSlot() {
-    const footerContent = this.component?.input?.footerContent?.value || this.inputHandlersValue?.footerContent;
-    if (!footerContent) return nothing;
-    return html`
-      <div slot="footer">
-        ${footerContent}
-      </div>
-    `;
-  }
-};
-PanelBlock.styles = [css``];
-__decorateClass$B([
-  property({ type: Object })
-], PanelBlock.prototype, "component", 2);
-__decorateClass$B([
-  property({ type: Object })
-], PanelBlock.prototype, "item", 2);
-__decorateClass$B([
-  property({ type: Boolean })
-], PanelBlock.prototype, "isViewMode", 2);
-__decorateClass$B([
-  state()
-], PanelBlock.prototype, "childrenComponents", 2);
-PanelBlock = __decorateClass$B([
-  customElement("panel-block")
-], PanelBlock);
-
-const styles$4 = css`
-  :host {
-    display: block;
-    width: 100%;
-  }
-
-  .grid-row {
-    display: flex;
-    flex-flow: row wrap;
-    min-width: 0;
-    width: 100%;
-  }
-
-  .grid-row.no-wrap {
-    flex-wrap: nowrap;
-  }
-
-  /* Alignment */
-  .grid-row.align-top {
-    align-items: flex-start;
-  }
-
-  .grid-row.align-middle {
-    align-items: center;
-  }
-
-  .grid-row.align-bottom {
-    align-items: flex-end;
-  }
-
-  .grid-row.align-stretch {
-    align-items: stretch;
-  }
-
-  /* Justify */
-  .grid-row.justify-start {
-    justify-content: flex-start;
-  }
-
-  .grid-row.justify-end {
-    justify-content: flex-end;
-  }
-
-  .grid-row.justify-center {
-    justify-content: center;
-  }
-
-  .grid-row.justify-space-around {
-    justify-content: space-around;
-  }
-
-  .grid-row.justify-space-between {
-    justify-content: space-between;
-  }
-
-  .grid-row.justify-space-evenly {
-    justify-content: space-evenly;
-  }
-
-  .empty-message {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-height: 100px;
-    border: 2px dashed #ccc;
-    color: #999;
-    font-size: 14px;
-    position: relative;
-  }
-`;
-
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/grid');
-} catch (error) {
-  console.warn("[@nuralyui/grid] Package not found or failed to load.");
-}
-const ROW_INPUT_PROPS = ["gutter", "align", "justify", "wrap"];
-let GridRow = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.childrenComponents = [];
-    this.containerRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-    ROW_INPUT_PROPS.forEach((prop) => this.registerCallback(prop, () => this.requestUpdate()));
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }).filter(Boolean) ?? [];
-  }
-  /**
-   * Parse gutter value - supports number, [h, v] array, or responsive object
-   */
-  parseGutter(gutter) {
-    if (!gutter) return 0;
-    if (typeof gutter === "number" || Array.isArray(gutter)) return gutter;
-    if (typeof gutter === "string" && !isNaN(Number(gutter))) return Number(gutter);
-    return gutter;
-  }
-  /**
-   * Get all row properties from input handlers
-   */
-  getRowProps() {
-    const input = this.inputHandlersValue;
-    return {
-      gutter: this.parseGutter(input?.gutter),
-      align: input?.align || "",
-      justify: input?.justify || "",
-      wrap: input?.wrap !== false
-    };
-  }
-  /**
-   * Render children components
-   */
-  renderChildren() {
-    return this.childrenComponents.length ? renderComponent(
-      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
-      this.item,
-      this.isViewMode,
-      { ...this.component, uniqueUUID: this.uniqueUUID }
-    ) : nothing;
-  }
-  /**
-   * Render empty state placeholder for editor mode
-   */
-  renderEmptyState() {
-    return html`
-      <div
-        class="empty-message"
-        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
-      >
-        Add Grid Columns (nr-col) to this row
-        <drag-wrapper
-          .where=${"inside"}
-          .message=${"Drop inside"}
-          .component=${{ ...this.component }}
-          .inputRef=${this.inputRef}
-          .isDragInitiator=${this.isDragInitiator}
-        >
-        </drag-wrapper>
-      </div>
-    `;
-  }
-  renderComponent() {
-    const props = this.getRowProps();
-    if (this.isViewMode) {
-      return html`
-        <nr-row
-          ${ref(this.inputRef)}
-          data-component-uuid=${this.component?.uuid}
-          data-component-name=${this.component?.name}
-          style=${styleMap(this.getStyles())}
-          .gutter=${props.gutter}
-          align=${props.align || nothing}
-          justify=${props.justify || nothing}
-          ?wrap=${props.wrap}
-        >
-          ${this.renderChildren()}
-        </nr-row>
-      `;
-    }
-    return html`
-      <nr-row
-        ${ref(this.inputRef)}
-        ${ref(this.containerRef)}
-        data-component-uuid=${this.component?.uuid}
-        data-component-name=${this.component?.name}
-        @click="${(e) => {
-      setContextMenuEvent(null);
-      this.executeEvent("onClick", e);
-    }}"
-        style=${styleMap({
-      ...this.getStyles(),
-      "min-height": this.childrenComponents.length ? "auto" : "100px"
-    })}
-        .gutter=${props.gutter}
-        align=${props.align || nothing}
-        justify=${props.justify || nothing}
-        ?wrap=${props.wrap}
-      >
-        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
-      </nr-row>
-    `;
-  }
-};
-GridRow.styles = styles$4;
-__decorateClass$A([
-  property({ type: Object })
-], GridRow.prototype, "component", 2);
-__decorateClass$A([
-  property({ type: Object })
-], GridRow.prototype, "item", 2);
-__decorateClass$A([
-  property({ type: Boolean })
-], GridRow.prototype, "isViewMode", 2);
-__decorateClass$A([
-  state()
-], GridRow.prototype, "childrenComponents", 2);
-__decorateClass$A([
-  state()
-], GridRow.prototype, "containerRef", 2);
-GridRow = __decorateClass$A([
-  customElement("grid-row-block")
-], GridRow);
-
-const styles$3 = css`
-  :host {
-    display: block;
-  }
-
-  .grid-col {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 1px;
-  }
-
-  .empty-message {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-height: 60px;
-    border: 1px dashed #ccc;
-    color: #999;
-    font-size: 12px;
-    position: relative;
-    background: rgba(0, 0, 0, 0.02);
-  }
-`;
-
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/grid');
-} catch (error) {
-  console.warn("[@nuralyui/grid] Package not found or failed to load.");
-}
-const COL_INPUT_PROPS = ["span", "offset", "order", "pull", "push", "flex", "xs", "sm", "md", "lg", "xl", "xxl"];
-let GridCol = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.childrenComponents = [];
-    this.containerRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-    COL_INPUT_PROPS.forEach((prop) => this.registerCallback(prop, () => this.requestUpdate()));
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }).filter(Boolean) ?? [];
-  }
-  /**
-   * Parse numeric value from input (handles string or number)
-   */
-  parseNumeric(value, defaultValue) {
-    if (value === void 0 || value === null || value === "") return defaultValue;
-    const num = Number(value);
-    return isNaN(num) ? defaultValue : num;
-  }
-  /**
-   * Parse responsive breakpoint value
-   * Can be a number or an object { span, offset, order, pull, push }
-   */
-  parseBreakpoint(value) {
-    if (value === void 0 || value === null || value === "") return void 0;
-    if (typeof value === "number") return value;
-    if (typeof value === "string" && !isNaN(Number(value))) return Number(value);
-    if (typeof value === "object") return value;
-    return void 0;
-  }
-  /**
-   * Get all column properties from input handlers
-   */
-  getColProps() {
-    const input = this.inputHandlersValue;
-    return {
-      span: this.parseNumeric(input?.span),
-      offset: this.parseNumeric(input?.offset, 0),
-      order: this.parseNumeric(input?.order),
-      pull: this.parseNumeric(input?.pull, 0),
-      push: this.parseNumeric(input?.push, 0),
-      flex: input?.flex || "",
-      xs: this.parseBreakpoint(input?.xs),
-      sm: this.parseBreakpoint(input?.sm),
-      md: this.parseBreakpoint(input?.md),
-      lg: this.parseBreakpoint(input?.lg),
-      xl: this.parseBreakpoint(input?.xl),
-      xxl: this.parseBreakpoint(input?.xxl)
-    };
-  }
-  /**
-   * Render children components
-   */
-  renderChildren() {
-    return this.childrenComponents.length ? renderComponent(
-      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
-      this.item,
-      this.isViewMode,
-      { ...this.component, uniqueUUID: this.uniqueUUID }
-    ) : nothing;
-  }
-  /**
-   * Render empty state placeholder for editor mode
-   */
-  renderEmptyState() {
-    return html`
-      <div
-        class="empty-message"
-        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
-      >
-        Drop content here
-        <drag-wrapper
-          .where=${"inside"}
-          .message=${"Drop inside"}
-          .component=${{ ...this.component }}
-          .inputRef=${this.inputRef}
-          .isDragInitiator=${this.isDragInitiator}
-        >
-        </drag-wrapper>
-      </div>
-    `;
-  }
-  renderComponent() {
-    const props = this.getColProps();
-    if (this.isViewMode) {
-      return html`
-        <nr-col
-          ${ref(this.inputRef)}
-          data-component-uuid=${this.component?.uuid}
-          data-component-name=${this.component?.name}
-          style=${styleMap(this.getStyles())}
-          span=${props.span ?? nothing}
-          offset=${props.offset}
-          order=${props.order ?? nothing}
-          pull=${props.pull}
-          push=${props.push}
-          flex=${props.flex || nothing}
-          .xs=${props.xs}
-          .sm=${props.sm}
-          .md=${props.md}
-          .lg=${props.lg}
-          .xl=${props.xl}
-          .xxl=${props.xxl}
-        >
-          ${this.renderChildren()}
-        </nr-col>
-      `;
-    }
-    return html`
-      <nr-col
-        ${ref(this.inputRef)}
-        ${ref(this.containerRef)}
-        data-component-uuid=${this.component?.uuid}
-        data-component-name=${this.component?.name}
-        @click="${(e) => {
-      setContextMenuEvent(null);
-      this.executeEvent("onClick", e);
-    }}"
-        style=${styleMap({
-      ...this.getStyles(),
-      "min-height": this.childrenComponents.length ? "auto" : "60px"
-    })}
-        span=${props.span ?? nothing}
-        offset=${props.offset}
-        order=${props.order ?? nothing}
-        pull=${props.pull}
-        push=${props.push}
-        flex=${props.flex || nothing}
-        .xs=${props.xs}
-        .sm=${props.sm}
-        .md=${props.md}
-        .lg=${props.lg}
-        .xl=${props.xl}
-        .xxl=${props.xxl}
-      >
-        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
-      </nr-col>
-    `;
-  }
-};
-GridCol.styles = styles$3;
-__decorateClass$z([
-  property({ type: Object })
-], GridCol.prototype, "component", 2);
-__decorateClass$z([
-  property({ type: Object })
-], GridCol.prototype, "item", 2);
-__decorateClass$z([
-  property({ type: Boolean })
-], GridCol.prototype, "isViewMode", 2);
-__decorateClass$z([
-  state()
-], GridCol.prototype, "childrenComponents", 2);
-__decorateClass$z([
-  state()
-], GridCol.prototype, "containerRef", 2);
-GridCol = __decorateClass$z([
-  customElement("grid-col-block")
-], GridCol);
-
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/menu');
-} catch (error) {
-  console.warn("[@nuralyui/menu] Package not found or failed to load. Menu functionality may be limited.");
-}
-let MenuBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-  }
-  renderComponent() {
-    return html`
-
-        <nr-menu
-                    ${ref(this.inputRef)}
-     class="${`drop-${this.component.uuid}`}"
-
-         
-          placeholder="Select an option"
-          size=${this.inputHandlersValue?.size ?? "medium"}
-          arrowPosition=${this.inputHandlersValue?.arrowPosition ?? "right"}
-          .items=${this.inputHandlersValue?.options ?? []}
-          @change="${(e) => {
-      const selectedOptionPath = e.detail.path;
-      const selectedPage = this.inputHandlersValue.options[selectedOptionPath[0]]?.id;
-      const option = selectedOptionPath.reduce((acc, curr) => acc && acc.children && acc.children[curr], { children: this.inputHandlersValue?.options });
-      this.executeEvent("onSelect", e, {
-        id: option?.id,
-        text: option?.text,
-        type: option?.type,
-        page: selectedPage,
-        path: selectedOptionPath,
-        value: e.detail.value
-      });
-    }}"
-          @action-click="${(e) => {
-      this.executeEvent("onActionClick", e, {
-        value: e.detail.additionalData,
-        action: e.detail.value
-      });
-    }}">
-        </nr-menu>
-    `;
-  }
-};
-MenuBlock.styles = [
-  css`
-        nr-menu {
-            --nuraly-menu-width: 100%;
-
-        }
-        :host {
-            display: block;
-        }
-        .error {
-            color: red;
-            background-color: black;
-            font-size: smaller;
-        }
-    `
-];
-__decorateClass$y([
-  property({ type: Object, reflect: false })
-], MenuBlock.prototype, "component", 2);
-MenuBlock = __decorateClass$y([
-  customElement("menu-block")
-], MenuBlock);
-
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
-  return result;
-};
-let EmbedUrlBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.currentUrl = "";
-    this._isUserFocused = false;
-    this._focusResetTimeout = null;
-    this.iframeRef = ref();
-    this.onFocus = (e) => {
-      this._isUserFocused = true;
-      this.executeEvent("onFocus", e);
-    };
-    this.onBlur = (e) => {
-      this._isUserFocused = false;
-      this.executeEvent("onBlur", e);
-    };
-  }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    this.registerCallback("url", (url) => {
-      if (!this._isUserFocused && this.currentUrl !== url) {
-        this.currentUrl = url ?? "";
-      }
-    });
-  }
-  handleIframeLoad(e) {
-    this.executeEvent("onLoad", e, {
-      url: this.currentUrl || this.inputHandlersValue?.url || ""
-    });
-  }
-  handleIframeError(e) {
-    this.executeEvent("onError", e, {
-      url: this.currentUrl || this.inputHandlersValue?.url || "",
-      error: "Failed to load iframe content"
-    });
-  }
-  resetFocusAfterInactivity() {
-    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
-    this._focusResetTimeout = setTimeout(() => {
-      this._isUserFocused = false;
-    }, 3e3);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) this.unsubscribe();
-    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
-  }
-  renderComponent() {
-    const embedStyles = this.getStyles() || {};
-    const embedStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
-      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
-    ) : {};
-    const url = this.currentUrl || this.inputHandlersValue?.url || "";
-    if (!url) {
-      return html`
-        <div
-          ${ref(this.inputRef)}
-          class="embed-placeholder"
-          style=${styleMap({
-        ...this.getStyles(),
-        width: embedStyleHandlers?.width || embedStyles?.width || "100%",
-        height: embedStyleHandlers?.height || embedStyles?.height || "200px"
-      })}
-          @click=${(e) => this.executeEvent("onClick", e)}
-        >
-          <nr-icon name="globe"></nr-icon>
-          <nr-label>No URL provided</nr-label>
-        </div>
-      `;
-    }
-    return html`
-      <div
-        ${ref(this.inputRef)}
-        tabindex="0"
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        @click=${(e) => this.executeEvent("onClick", e)}
-        style=${styleMap(this.getStyles())}
-      >
-        <iframe
-          ${ref(this.iframeRef)}
-          src=${url}
-          @load=${(e) => this.handleIframeLoad(e)}
-          @error=${(e) => this.handleIframeError(e)}
-        ></iframe>
-      </div>
-    `;
-  }
-};
-EmbedUrlBlock.styles = [css`
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-    .embed-placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: #64748b;
-      min-height: 200px;
-      border-radius: 8px;
-      border: 2px dashed #cbd5e1;
-      gap: 12px;
-    }
-    .embed-placeholder nr-icon {
-      --nuraly-icon-size: 48px;
-    }
-  `];
-__decorateClass$x([
-  property({ type: Object })
-], EmbedUrlBlock.prototype, "component", 2);
-__decorateClass$x([
-  property({ type: Object })
-], EmbedUrlBlock.prototype, "item", 2);
-__decorateClass$x([
-  state()
-], EmbedUrlBlock.prototype, "currentUrl", 2);
-__decorateClass$x([
-  state()
-], EmbedUrlBlock.prototype, "_isUserFocused", 2);
-EmbedUrlBlock = __decorateClass$x([
-  customElement("embed-url-block")
-], EmbedUrlBlock);
-
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
-  return result;
-};
-let LinkBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.childrenComponents = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find(
-        (component) => component.uuid === id
-      );
-    }).filter(Boolean) ?? [];
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  renderComponent() {
-    const url = this.inputHandlersValue?.url ?? "#";
-    const target = this.inputHandlersValue?.target ?? "_self";
-    const label = this.inputHandlersValue?.label ?? this.inputHandlersValue?.placeholder ?? "";
-    return html`
-      <a
-            ${ref(this.inputRef)}
-            href=${this.isViewMode ? url : nothing}
-            target=${target}
-            style=${styleMap({
-      ...this.getStyles()
-    })}
-            @click=${(e) => {
-      if (!this.isViewMode) {
-        e.preventDefault();
-      }
-      this.executeEvent("onClick", e, { url, target });
-    }}
-            @mouseenter=${(e) => {
-      this.executeEvent("onMouseEnter", e);
-    }}
-            @mouseleave=${(e) => {
-      this.executeEvent("onMouseLeave", e);
-    }}
-            >
-       <span>
-        ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode) : html`
-                     <nr-label
-                style=${styleMap({
-      "--resolved-text-label-color": this.getStyles()["title-color"]
-    })}
-                >${label}</nr-label>
-
-                <drag-wrapper
-                        .where=${"inside"}
-                        .message=${"Drop inside"}
-                        .component=${{ ...this.component }}
-                        .inputRef=${this.inputRef}
-                        .isDragInitiator=${this.isDragInitiator}
-                      >
-                      </drag-wrapper>
-
-                  `}
-       </span>
-      </a>
-    `;
-  }
-};
-__decorateClass$w([
-  property({ type: Object })
-], LinkBlock.prototype, "component", 2);
-__decorateClass$w([
-  state()
-], LinkBlock.prototype, "childrenComponents", 2);
-LinkBlock = __decorateClass$w([
-  customElement("link-block")
-], LinkBlock);
-
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/color-picker');
-} catch (error) {
-  console.warn("[@nuralyui/color-picker] Package not found or failed to load.");
-}
-let ColorPickerBlock = class extends BaseElementBlock {
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerCallback("value", () => {
-    });
-  }
-  renderComponent() {
-    const colorPickerStyles = this.component?.style || {};
-    const size = colorPickerStyles.size || "default";
-    return html`
-      <nr-color-picker
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      width: "28px",
-      height: "28px",
-      ...this.getStyles()
-    })}
-        .color=${this.inputHandlersValue.value ?? EMPTY_STRING}
-        .disabled=${this.inputHandlersValue?.state == "disabled"}
-        .size=${size}
-        .trigger=${this.inputHandlersValue?.trigger || "click"}
-        .placement=${this.inputHandlersValue?.placement || "auto"}
-        .animation=${this.inputHandlersValue?.animation || "fade"}
-        .closeOnSelect=${this.inputHandlersValue?.closeOnSelect || false}
-        .closeOnOutsideClick=${this.inputHandlersValue?.closeOnOutsideClick !== false}
-        .closeOnEscape=${this.inputHandlersValue?.closeOnEscape !== false}
-        .showInput=${this.inputHandlersValue?.showInput !== false}
-        .showCopyButton=${this.inputHandlersValue?.showCopyButton !== false}
-        .format=${this.inputHandlersValue?.format || "hex"}
-        .inputPlaceholder=${this.inputHandlersValue?.inputPlaceholder || "Enter color"}
-        .label=${this.inputHandlersValue?.label || ""}
-        .helperText=${this.inputHandlersValue?.helperText || ""}
-        .defaultColorSets=${this.inputHandlersValue?.defaultColorSets || []}
-        @nr-color-change=${(e) => {
-      this.executeEvent("onChange", e, { value: e.detail.color });
-    }}
-        @nr-colorpicker-open=${(e) => {
-      this.executeEvent("onOpen", e);
-    }}
-        @nr-colorpicker-close=${(e) => {
-      this.executeEvent("onClose", e);
-    }}
-      ></nr-color-picker>
-    `;
-  }
-};
-ColorPickerBlock.styles = [
-  css``
-];
-__decorateClass$v([
-  property({ type: Object })
-], ColorPickerBlock.prototype, "component", 2);
-ColorPickerBlock = __decorateClass$v([
-  customElement("color-picker-block")
-], ColorPickerBlock);
-
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/input');
-} catch (error) {
-  console.warn("[@nuralyui/input] Package not found or failed to load.");
-}
-let NumberInputBlock = class extends BaseElementBlock {
-  render() {
-    const inputStyles = this.getStyles();
-    const componentStyles = this.component?.style || {};
-    const size = componentStyles?.size || "medium";
-    return html`
-      <span> 
-        <nr-input
-          ${ref(this.inputRef)}
-          style=${styleMap({
-      ...inputStyles,
-      "--nuraly-input-local-border-top-left-radius": inputStyles?.["border-top-left-radius"] ?? "",
-      "--nuraly-input-local-border-top-right-radius": inputStyles?.["border-top-right-radius"] ?? "",
-      "--nuraly-input-local-border-bottom-left-radius": inputStyles?.["border-bottom-left-radius"] ?? "",
-      "--nuraly-input-local-border-bottom-right-radius": inputStyles?.["border-bottom-right-radius"] ?? ""
-    })}
-          .value=${this.inputHandlersValue?.value ?? nothing}
-          .size=${size}
-          .state=${this.inputHandlersValue?.status ?? nothing}
-          .type=${"number"}
-          .variant=${this.inputHandlersValue?.variant ?? nothing}
-          .disabled=${this.inputHandlersValue?.state === "disabled"}
-          .readonly=${this.inputHandlersValue?.readonly || false}
-          .placeholder=${this.inputHandlersValue?.placeholder ?? "Number input"}
-          .step=${this.inputHandlersValue?.step ?? nothing}
-          .min=${this.inputHandlersValue?.min ?? "0"}
-          .max=${this.inputHandlersValue?.max ?? nothing}
-          .name=${this.inputHandlersValue?.name ?? nothing}
-          .required=${this.inputHandlersValue?.required || false}
-          .rules=${this.inputHandlersValue?.rules ?? []}
-          .validateOnChangeInput=${this.inputHandlersValue?.validateOnChange !== false}
-          .validateOnBlurInput=${this.inputHandlersValue?.validateOnBlur !== false}
-          .hasFeedback=${this.inputHandlersValue?.hasFeedback || false}
-          @nr-input=${(e) => {
-      this.executeEvent("onChange", e, {
-        value: e.detail.value,
-        oldValue: e.detail.oldValue
-      });
-    }}
-          @nr-focus=${(e) => {
-      this.executeEvent("onFocus", e);
-    }}
-          @nr-blur=${(e) => {
-      this.executeEvent("onBlur", e);
-    }}
-          @nr-enter=${(e) => {
-      this.executeEvent("onEnter", e);
-    }}
-        >
-          <span slot="label">
-            ${this.inputHandlersValue?.label ?? ""}
-          </span>
-          <span slot="helper-text">
-            ${this.inputHandlersValue?.helper ?? ""}
-          </span>
-        </nr-input>
-      </span>
-    `;
-  }
-};
-NumberInputBlock.styles = [
-  css``
-];
-__decorateClass$u([
-  property({ type: Object })
-], NumberInputBlock.prototype, "component", 2);
-__decorateClass$u([
-  property({ type: Object })
-], NumberInputBlock.prototype, "item", 2);
-NumberInputBlock = __decorateClass$u([
-  customElement("number-input-block")
-], NumberInputBlock);
-
-function registerWithParentForm(element, nrElement) {
-  const name = element.inputHandlersValue?.name;
-  if (!name || !nrElement) {
-    return;
-  }
-  element.dispatchEvent(new CustomEvent("nr-field-register", {
-    bubbles: true,
-    composed: true,
-    detail: {
-      element: nrElement,
-      name,
-      blockElement: element
-    }
-  }));
-}
-function unregisterFromParentForm(element) {
-  const name = element.inputHandlersValue?.name;
-  if (!name) {
-    return;
-  }
-  element.dispatchEvent(new CustomEvent("nr-field-unregister", {
-    bubbles: true,
-    composed: true,
-    detail: {
-      name,
-      blockElement: element
-    }
-  }));
-}
-
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/input');
-} catch (error) {
-  console.warn("[@nuralyui/input] Package not found or failed to load.");
-}
-let TextInputBlock$2 = class TextInputBlock extends BaseElementBlock {
-  constructor() {
-    super();
-    this.currentValue = "";
-    this._isUserFocused = false;
-    this._focusResetTimeout = null;
-    this._inputElement = null;
-  }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    this.registerCallback("value", (value) => {
-      if (!this._isUserFocused && this.currentValue !== value) {
-        this.currentValue = value ?? "";
-      }
-    });
-    this._inputElement = this.renderRoot.querySelector("nr-input");
-    if (this._inputElement && this.inputHandlersValue?.name) {
-      registerWithParentForm(this, this._inputElement);
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) this.unsubscribe();
-    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
-    if (this.inputHandlersValue?.name) {
-      unregisterFromParentForm(this);
-    }
-  }
-  resetFocusAfterInactivity() {
-    if (this._focusResetTimeout) {
-      clearTimeout(this._focusResetTimeout);
-    }
-    this._focusResetTimeout = setTimeout(() => {
-      this._isUserFocused = false;
-    }, 3e3);
-  }
-  renderComponent() {
-    this.getStyles();
-    const componentStyles = this.component?.style || {};
-    componentStyles?.size || "medium";
-    return html`
-        <nr-input
-        ${ref(this.inputRef)}
-     class="${`drop-${this.component.uuid}`}"
-         
-          .value=${this.inputHandlersValue?.value ?? nothing}
-          .size=${this.inputHandlersValue?.size ?? "medium"}
-          .state=${this.inputHandlersValue.status ?? nothing}
-          .type=${this.inputHandlersValue.type ?? nothing}
-          .variant=${this.inputHandlersValue.variant ?? nothing}
-          .disabled=${this.inputHandlersValue.state === "disabled"}
-          .readonly=${this.inputHandlersValue.readonly || false}
-          .placeholder=${this.inputHandlersValue?.placeholder ?? "Text input"}
-          .step=${this.inputHandlersValue?.step ?? nothing}
-          .min=${this.inputHandlersValue?.min ?? nothing}
-          .max=${this.inputHandlersValue?.max ?? nothing}
-          .name=${this.inputHandlersValue?.name ?? nothing}
-          .required=${this.inputHandlersValue?.required || false}
-          .withCopy=${this.inputHandlersValue?.withCopy || false}
-          .allowClear=${this.inputHandlersValue?.allowClear || false}
-          .showCount=${this.inputHandlersValue?.showCount || false}
-          .maxLength=${this.inputHandlersValue?.maxLength ?? nothing}
-          .rules=${this.inputHandlersValue?.rules ?? []}
-          .validateOnChangeInput=${this.inputHandlersValue?.validateOnChange !== false}
-          .validateOnBlurInput=${this.inputHandlersValue?.validateOnBlur !== false}
-          .hasFeedback=${this.inputHandlersValue?.hasFeedback || false}
-          .autocomplete=${this.inputHandlersValue?.autocomplete ?? "off"}
-          @nr-input=${(e) => {
-      this._isUserFocused = true;
-      this.executeEvent(
-        "onChange",
-        e,
-        {
-          value: e.detail.value,
-          oldValue: e.detail.oldValue
-        }
-      );
-      this.resetFocusAfterInactivity();
-    }}
-          @nr-focus=${(e) => {
-      this._isUserFocused = true;
-      this.executeEvent("onFocus", e, {
-        value: e.detail.value
-      });
-    }}
-          @nr-blur=${(e) => {
-      this._isUserFocused = false;
-      this.executeEvent("onBlur", e, {
-        value: e.detail.value
-      });
-    }}
-          @nr-enter=${(e) => {
-      this.executeEvent("onEnter", e, {
-        value: e.detail.value
-      });
-    }}
-          @nr-clear=${(e) => {
-      this.executeEvent("onClear", e, {
-        value: e.detail.value
-      });
-    }}
-          @keydown=${(e) => {
-      if (e.key === "ArrowUp") {
-        this.executeEvent("onArrowUp", e);
-      } else if (e.key === "ArrowDown") {
-        this.executeEvent("onArrowDown", e);
-      }
-    }}
-        >
-          <span
-            slot="label"
-           
-          >
-            ${this.inputHandlersValue?.label ?? ""}
-          </span>
-          <span
-            slot="helper-text"
-           
-          >
-            ${this.inputHandlersValue?.helper ?? ""}
-          </span>
-        </nr-input>
-    `;
-  }
-};
-TextInputBlock$2.styles = [css``];
-__decorateClass$t([
-  property({ type: Object })
-], TextInputBlock$2.prototype, "component", 2);
-__decorateClass$t([
-  property({ type: Object })
-], TextInputBlock$2.prototype, "item", 2);
-__decorateClass$t([
-  state()
-], TextInputBlock$2.prototype, "currentValue", 2);
-__decorateClass$t([
-  state()
-], TextInputBlock$2.prototype, "_isUserFocused", 2);
-TextInputBlock$2 = __decorateClass$t([
-  customElement("text-input-block")
-], TextInputBlock$2);
-
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/button');
-} catch (error) {
-  console.warn("[@nuralyui/button] Package not found or failed to load.");
-}
-let IconButtonBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.handleClick = () => {
-      setTimeout(() => {
-        if (this.component?.event?.click) {
-          executeHandler(this.component, getNestedAttribute(this.component, `event.click`));
-        }
-      }, 0);
-    };
-  }
-  renderComponent() {
-    const buttonStyles = this.getStyles();
-    const { icon } = this.component?.parameters ?? {};
-    const iconArray = icon ? [icon] : [];
-    const type = this.inputHandlersValue.value || buttonStyles?.type || "default";
-    const size = buttonStyles?.size || "medium";
-    return html`
-      <nr-button 
-        ${ref(this.inputRef)}
-        .size=${size}
-        .type=${type}
-        .disabled=${this.inputHandlersValue.state == "disabled"}
-        .loading=${this.inputHandlersValue.loading || false}
-        .block=${this.inputHandlersValue.block || false}
-        .dashed=${this.inputHandlersValue.dashed || false}
-        .icon=${iconArray}
-        .iconPosition=${this.inputHandlersValue.iconPosition || "left"}
-        @click=${this.handleClick}
-        style=${styleMap({
-      ...this.getStyles(),
-      width: buttonStyles?.width,
-      height: buttonStyles?.height
-    })}
-      >
-      </nr-button>
-    `;
-  }
-};
-IconButtonBlock.styles = css``;
-__decorateClass$s([
-  property({ type: Object })
-], IconButtonBlock.prototype, "component", 2);
-IconButtonBlock = __decorateClass$s([
-  customElement("icon-button-block")
-], IconButtonBlock);
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/select');
-} catch (error) {
-  console.warn("[@nuralyui/select] Package not found or failed to load.");
-}
-let SelectBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerCallback("value", (v) => {
-      this.requestUpdate();
-    });
-  }
-  renderComponent() {
-    return html`
-      <nr-select
-            ${ref(this.inputRef)}
-            style=${styleMap({
-      ...this.getStyles(),
-      "--nuraly-select-width": this.getStyles()["--nuraly-select-width"] ?? this.getStyles().width
-    })}
-                 ?multiple=${this.inputHandlersValue?.selectionMode === "multiple"}
-                 ?searchable=${this.inputHandlersValue?.searchable ?? false}
-                 ?clearable=${this.inputHandlersValue?.clearable ?? false}
-                 ?required=${this.inputHandlersValue?.required ?? false}
-                 ?block=${this.inputHandlersValue?.block ?? false}
-                 .options=${this.inputHandlersValue?.options ?? []}
-                 .value=${this.inputHandlersValue?.value ?? EMPTY_STRING}
-                 .placeholder=${this.inputHandlersValue?.placeholder || "Select an option"}
-                 .searchPlaceholder=${this.inputHandlersValue?.searchPlaceholder || "Search options..."}
-                 .status=${this.inputHandlersValue?.state ?? nothing}
-                 .size=${this.inputHandlersValue?.size ?? nothing}
-                 .disabled=${this.inputHandlersValue?.disabled ?? this.inputHandlersValue.state == "disabled"}
-                 .type=${this.inputHandlersValue?.type || "default"}
-                 @nr-change=${(e) => {
-      this.executeEvent("onChange", e, {
-        value: e.detail.value ?? EMPTY_STRING
-      });
-    }}
-                 @nr-focus=${(e) => {
-      this.executeEvent("onFocus", e);
-    }}
-                 @nr-blur=${(e) => {
-      this.executeEvent("onBlur", e);
-    }}
-                 @nr-dropdown-open=${(e) => {
-      this.executeEvent("onDropdownOpen", e);
-    }}
-                 @nr-dropdown-close=${(e) => {
-      this.executeEvent("onDropdownClose", e);
-    }}
-                 @nr-validation=${(e) => {
-      this.executeEvent("onValidation", e, {
-        isValid: e.detail.isValid,
-        message: e.detail.message
-      });
-    }}
-      >
-        <span slot="label">${this.inputHandlersValue.label ?? nothing}</span>
-        <span slot="helper-text">${this.inputHandlersValue.helper ?? nothing}</span>
-      </nr-select>
-    `;
-  }
-};
-__decorateClass$r([
-  property({ type: Object })
-], SelectBlock.prototype, "component", 2);
-SelectBlock = __decorateClass$r([
-  customElement("select-block")
-], SelectBlock);
-
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-try {
-  await import('@nuralyui/checkbox');
-} catch (error) {
-  console.warn("[@nuralyui/checkbox] Package not found or failed to load.");
-}
-let CheckboxBlock = class extends BaseElementBlock {
-  renderComponent() {
-    return html`
-      <nr-checkbox
-        class="${`drop-${this.component.uuid}`}"
-        ${ref(this.inputRef)}
-        .checked=${this.inputHandlersValue?.value === true}
-        .indeterminate=${this.inputHandlersValue?.value === "indeterminate"}
-        .disabled=${this.inputHandlersValue?.disabled}
-        .size=${this.inputHandlersValue?.size || "medium"}
-        .name=${this.inputHandlersValue?.name || ""}
-        .value=${this.inputHandlersValue?.value || ""}
-        .autoFocus=${this.inputHandlersValue?.autoFocus || false}
-        .id=${this.inputHandlersValue?.id || ""}
-        .title=${this.inputHandlersValue?.title || ""}
-        .tabIndex=${this.inputHandlersValue?.tabIndex || 0}
-        @nr-change=${(e) => {
-      this.executeEvent("onChange", e, {
-        checked: e.detail.checked
-      });
-    }}
-        @nr-focus=${(e) => {
-      this.executeEvent("onFocus", e);
-    }}
-        @nr-blur=${(e) => {
-      this.executeEvent("onBlur", e);
-    }}
-        @nr-keydown=${(e) => {
-      this.executeEvent("onKeydown", e);
-    }}
-        @nr-mouseenter=${(e) => {
-      this.executeEvent("onMouseEnter", e);
-    }}
-        @nr-mouseleave=${(e) => {
-      this.executeEvent("onMouseLeave", e);
-    }}
-      >
-       <nr-label .size=${this.inputHandlersValue?.size || "medium"}> ${this.inputHandlersValue?.label ?? ""}</nr-label>
-      </nr-checkbox>
-    `;
-  }
-};
-CheckboxBlock = __decorateClass$q([
-  customElement("checkbox-block")
-], CheckboxBlock);
-
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/dropdown');
-} catch (error) {
-  console.warn("[@nuralyui/dropdown] Package not found or failed to load. Dropdown functionality may be limited.");
-}
-let DropdownBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.childrenComponents = [];
-    this.options = [
-      { label: "Copy", value: "Copy", icon: "copy" },
-      { label: "Paste", value: "Paste", icon: "paste" },
-      { label: "Delete", value: "Delete", icon: "trash" },
-      { label: "Export", value: "value12" },
-      { label: "Import", value: "value12" }
-    ];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerCallback("value", (v) => {
-      this.requestUpdate();
-    });
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find(
-        (component) => component.uuid === id
-      );
-    }).filter(Boolean) ?? [];
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  renderComponent() {
-    const options = this.inputHandlersValue?.value?.[0] ?? [];
-    const dropdownStyles = this.component?.style || {};
-    const size = dropdownStyles.size || "medium";
-    const placement = dropdownStyles.placement || "bottom";
-    const trigger = dropdownStyles.trigger || "click";
-    const animation = dropdownStyles.animation || "fade";
-    return html`
-      <nr-dropdown  
-        .open=${this.inputHandlersValue.show || false}
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...this.getStyles()
-    })} 
-        .trigger=${trigger}
-        .placement=${placement}
-        .size=${size}
-        .animation=${animation}
-        .disabled=${this.inputHandlersValue?.state == "disabled"}
-        .items=${this.inputHandlersValue.options || options}
-        .arrow=${dropdownStyles.arrow === "true" || this.inputHandlersValue.arrow || false}
-        .autoClose=${dropdownStyles.autoClose !== "false" && this.inputHandlersValue.autoClose !== false}
-        .closeOnOutsideClick=${dropdownStyles.closeOnOutsideClick !== "false" && this.inputHandlersValue.closeOnOutsideClick !== false}
-        .closeOnEscape=${dropdownStyles.closeOnEscape !== "false" && this.inputHandlersValue.closeOnEscape !== false}
-        .offset=${this.inputHandlersValue.offset || 4}
-        .delay=${this.inputHandlersValue.delay || 50}
-        .maxHeight=${this.inputHandlersValue.maxHeight || "300px"}
-        .minWidth=${this.inputHandlersValue.minWidth || "auto"}
-        .cascadeDirection=${this.inputHandlersValue.cascadeDirection || "auto"}
-        .cascadeDelay=${this.inputHandlersValue.cascadeDelay || 50}
-        .cascadeOnHover=${this.inputHandlersValue.cascadeOnHover !== false}
-        @nr-dropdown-item-click=${(e) => {
-      const item = e.detail.item;
-      this.executeEvent("onItemClick", e, {
-        value: item.value,
-        item,
-        additionalData: item.additionalData
-      });
-    }}
-        @nr-dropdown-open=${(e) => {
-      this.executeEvent("onOpen", e);
-    }}
-        @nr-dropdown-close=${(e) => {
-      this.executeEvent("onClose", e);
-    }}
-      >
-        <span slot="trigger">
-          ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode) : html`
-                <nr-label
-                  style=${styleMap({
-      "--resolved-text-label-color": this.getStyles()["title-color"]
-    })}
-                >${this.inputHandlersValue?.label ?? this.inputHandlersValue?.placeholder ?? nothing}</nr-label>
-                  
-                <drag-wrapper
-                  .where=${"inside"}
-                  .message=${"Drop inside"}
-                  .component=${{ ...this.component }}
-                  .inputRef=${this.inputRef}
-                  .isDragInitiator=${this.isDragInitiator}
-                >
-                </drag-wrapper>
-              `}
-        </span>
-      </nr-dropdown>
-    `;
-  }
-};
-__decorateClass$p([
-  property({ type: Object })
-], DropdownBlock.prototype, "component", 2);
-__decorateClass$p([
-  state()
-], DropdownBlock.prototype, "childrenComponents", 2);
-__decorateClass$p([
-  state()
-], DropdownBlock.prototype, "options", 2);
-DropdownBlock = __decorateClass$p([
-  customElement("dropdown-block")
-], DropdownBlock);
-
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/datepicker');
-} catch (error) {
-  console.warn("[@nuralyui/datepicker] Package not found or failed to load.");
-}
-let DatepickertBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.handleDateChange = (customEvent) => {
-      this.executeEvent("onDateChange", customEvent, {
-        value: customEvent.detail?.value || customEvent.detail?.date || customEvent.detail
-      });
-    };
-    this.handleRangeChange = (customEvent) => {
-      this.executeEvent("onRangeChange", customEvent, {
-        startDate: customEvent.detail?.startDate,
-        endDate: customEvent.detail?.endDate,
-        value: customEvent.detail?.value
-      });
-    };
-    this.handleCalendarOpen = (customEvent) => {
-      this.executeEvent("onCalendarOpen", customEvent);
-    };
-    this.handleCalendarClose = (customEvent) => {
-      this.executeEvent("onCalendarClose", customEvent);
-    };
-    this.handleFocus = (customEvent) => {
-      this.executeEvent("onFocus", customEvent);
-    };
-    this.handleBlur = (customEvent) => {
-      this.executeEvent("onBlur", customEvent);
-    };
-    this.handleValidation = (customEvent) => {
-      this.executeEvent("onValidation", customEvent, {
-        isValid: customEvent.detail?.isValid,
-        message: customEvent.detail?.message
-      });
-    };
-  }
-  renderComponent() {
-    const datePickerStyles = this.component?.style || {};
-    const size = datePickerStyles.size || "medium";
-    const variant = datePickerStyles.variant || "default";
-    const placement = datePickerStyles.placement || "auto";
-    const state = datePickerStyles?.state || "default";
-    return html`
-      <nr-datepicker
-        ${ref(this.inputRef)}
-             class="${`drop-${this.component.uuid}`}"
-
-        .helper=${this.inputHandlersValue.helper || ""}
-        .label=${this.inputHandlersValue.label || ""}
-        .placeholder=${this.inputHandlersValue.placeholder || ""}
-        .locale=${this.inputHandlersValue.locale || "en"}
-        .state=${state}
-        .size=${this.inputHandlersValue.size ?? size}
-        .variant=${variant}
-        .placement=${placement}
-        ?disabled=${this.inputHandlersValue.disabled ?? false}
-        .dateValue=${this.inputHandlersValue.value || ""}
-        .fieldFormat=${this.inputHandlersValue.format || "DD/MM/YYYY"}
-        ?range=${this.inputHandlersValue.range ?? false}
-        .minDate=${this.inputHandlersValue.minDate}
-        .maxDate=${this.inputHandlersValue.maxDate}
-        ?required=${this.inputHandlersValue.required ?? false}
-        @nr-date-change=${this.handleDateChange}
-        @nr-range-change=${this.handleRangeChange}
-        @nr-calendar-open=${this.handleCalendarOpen}
-        @nr-calendar-close=${this.handleCalendarClose}
-        @nr-focus=${this.handleFocus}
-        @nr-blur=${this.handleBlur}
-        @nr-validation=${this.handleValidation}
-      ></nr-datepicker>
-    `;
-  }
-};
-__decorateClass$o([
-  property({ type: Object })
-], DatepickertBlock.prototype, "component", 2);
-DatepickertBlock = __decorateClass$o([
-  customElement("date-picker-block")
-], DatepickertBlock);
-
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/radio-group');
-} catch (error) {
-  console.warn("[@nuralyui/radio-group] Package not found or failed to load.");
-}
-let RadioButtonBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const radioStyles = this.component?.style || {};
-    const options = this.inputHandlersValue?.value?.options || [];
-    const defaultValue = this.inputHandlersValue?.value?.currentValue ?? "";
-    const type = this.inputHandlersValue?.value?.type || "default";
-    const direction = this.inputHandlersValue?.direction || "vertical";
-    const position = this.inputHandlersValue?.position || "left";
-    const size = this.inputHandlersValue?.size?.value || this.inputHandlersValue?.size || "medium";
-    const disabled = this.inputHandlersValue?.state === "disabled";
-    const required = this.inputHandlersValue?.required || false;
-    const name = this.inputHandlersValue?.name || "radioGroup";
-    const autoWidth = this.inputHandlersValue?.autoWidth?.value || this.inputHandlersValue?.autoWidth || false;
-    return html`
-      <span style=${styleMap(radioStyles)}>
-        <nr-radio-group
-        
-          .options=${options}
-          .defaultValue=${defaultValue}
-          .value=${defaultValue}
-          .type=${type}
-          .direction=${direction}
-          .position=${position}
-          .size=${size}
-          .name=${name}
-          ?disabled=${disabled}
-          ?required=${required}
-          ?auto-width=${autoWidth}
-          @nr-change=${(e) => {
-      this.executeEvent("onChange", e, {
-        value: e.detail.value,
-        option: e.detail.option,
-        oldValue: e.detail.oldValue
-      });
-    }}
-        >
-          <span slot="helper-text" style="display: block; margin-top: 4px;">
-            ${this.inputHandlersValue?.helper ?? ""}
-          </span>
-        </nr-radio-group>
-      </span>
-    `;
-  }
-};
-__decorateClass$n([
-  property({ type: Object })
-], RadioButtonBlock.prototype, "component", 2);
-__decorateClass$n([
-  property({ type: Object })
-], RadioButtonBlock.prototype, "item", 2);
-RadioButtonBlock = __decorateClass$n([
-  customElement("radio-button-block")
-], RadioButtonBlock);
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/button');
-} catch (error) {
-  console.warn("[@nuralyui/button] Package not found or failed to load. Button functionality may be limited.");
-}
-let ButtonBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.display = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerCallback("value", () => {
-    });
-  }
-  renderComponent() {
-    const buttonStyles = this.getStyles();
-    const iconArray = this.inputHandlersValue.icon ? [this.inputHandlersValue.icon] : [];
-    return html`
-            <nr-button
-              ${ref(this.inputRef)}
-              size=${this.inputHandlersValue?.size || nothing}
-              type=${this.inputHandlersValue?.type || "default"}
-              .shape=${this.inputHandlersValue?.shape || nothing}
-              .disabled=${this.inputHandlersValue?.state == "disabled"}
-              .loading=${this.inputHandlersValue?.loading || false}
-              .block=${this.inputHandlersValue?.block || false}
-              .dashed=${this.inputHandlersValue?.dashed || false}
-              .icon=${iconArray}
-              .iconLeft=${this.inputHandlersValue?.iconLeft || nothing}
-              .iconRight=${this.inputHandlersValue?.iconRight || nothing}
-              .icons=${this.inputHandlersValue?.icons || nothing}
-              .iconPosition=${this.inputHandlersValue?.iconPosition || "left"}
-              .href=${this.inputHandlersValue?.href || nothing}
-              .target=${this.inputHandlersValue?.target || nothing}
-              .ripple=${this.inputHandlersValue?.ripple !== false}
-              .buttonAriaLabel=${this.inputHandlersValue?.ariaLabel || nothing}
-              .htmlType=${this.inputHandlersValue?.htmlType || nothing}
-              @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-              @button-clicked=${(e) => {
-      this.executeEvent("onButtonClicked", e);
-    }}
-              @link-navigation=${(e) => {
-      this.executeEvent("onLinkNavigation", e);
-    }}
-              style=${styleMap({
-      ...this.getStyles(),
-      width: buttonStyles?.width,
-      height: buttonStyles?.height
-    })}
-            >
-              ${this.inputHandlersValue.label ? this.inputHandlersValue.label : this.inputHandlersValue.iconOnly ? "" : "Button"}
-            </nr-button>
-    `;
-  }
-};
-ButtonBlock.styles = [
-  css`
-      :host {
-        --nuraly-button-icon-width: 19px;
-      }
-    `
-];
-__decorateClass$m([
-  property({ type: Object })
-], ButtonBlock.prototype, "component", 2);
-__decorateClass$m([
-  state()
-], ButtonBlock.prototype, "display", 2);
-ButtonBlock = __decorateClass$m([
-  customElement("button-block")
-], ButtonBlock);
-
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-try {
-  await import('@nuralyui/file-upload');
-} catch (error) {
-  console.warn("[@nuralyui/file-upload] Package not found or failed to load.");
-}
-let FileUploadBlock = class extends BaseElementBlock {
-  renderComponent() {
-    return html`
-      <nr-file-upload
-      style=${styleMap({
-      ...this.getStyles()
-    })}
-      
-        ${ref(this.inputRef)}
-        accept="*/*"
-        drag
-        limit="5"
-        tip="JPG/PNG files up to 500kb"
-        @files-changed=${(e) => {
-      const files = e.detail;
-      this.executeEvent("onFilesChanged", e, {
-        files
-      });
-    }}
-      ></nr-file-upload>
-    `;
-  }
-};
-FileUploadBlock.styles = [
-  css`
-      :host {
-        display: block;
-      }
-    `
-];
-FileUploadBlock = __decorateClass$l([
-  customElement("file-upload-block")
-], FileUploadBlock);
-
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/textarea');
-} catch (error) {
-  console.warn("[@nuralyui/textarea] Package not found or failed to load.");
-}
-let TextareaBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const textareaStyles = this.component?.style || {};
-    const value = this.inputHandlersValue?.value ?? "";
-    const placeholder = this.inputHandlersValue?.placeholder ?? "";
-    const label = this.inputHandlersValue?.label ?? "";
-    const helperText = this.inputHandlersValue?.helperText ?? this.inputHandlersValue?.helper ?? "";
-    const disabled = this.inputHandlersValue?.disabled ?? (this.inputHandlersValue?.state === "disabled" || false);
-    const readonly = this.inputHandlersValue?.readonly ?? false;
-    const required = this.inputHandlersValue?.required ?? false;
-    const allowClear = this.inputHandlersValue?.allowClear ?? false;
-    const showCount = this.inputHandlersValue?.showCount ?? false;
-    const autoResize = this.inputHandlersValue?.autoResize ?? false;
-    const size = this.inputHandlersValue?.size ?? "medium";
-    const variant = this.inputHandlersValue?.variant ?? "";
-    const state = this.inputHandlersValue?.state ?? "default";
-    const resize = this.inputHandlersValue?.resize ?? "vertical";
-    const rows = this.inputHandlersValue?.rows ?? 4;
-    const cols = this.inputHandlersValue?.cols;
-    const maxLength = this.inputHandlersValue?.maxLength;
-    const minHeight = this.inputHandlersValue?.minHeight;
-    const maxHeight = this.inputHandlersValue?.maxHeight;
-    const rules = this.inputHandlersValue?.rules ?? [];
-    const name = this.inputHandlersValue?.name;
-    const autocomplete = this.inputHandlersValue?.autocomplete ?? "off";
-    const validateOnChange = this.inputHandlersValue?.validateOnChange ?? true;
-    const validateOnBlur = this.inputHandlersValue?.validateOnBlur ?? true;
-    const hasFeedback = this.inputHandlersValue?.hasFeedback ?? false;
-    return html`
-      <nr-textarea
-        ${ref(this.inputRef)}
-        style=${styleMap(textareaStyles)}
-        .value=${value}
-        .placeholder=${placeholder}
-        .label=${label}
-        .helperText=${helperText}
-        .size=${size}
-        .variant=${variant}
-        .state=${state}
-        .resize=${resize}
-        .rows=${rows}
-        .cols=${cols}
-        .maxLength=${maxLength}
-        .minHeight=${minHeight}
-        .maxHeight=${maxHeight}
-        .rules=${rules}
-        .name=${name}
-        .autocomplete=${autocomplete}
-        ?disabled=${disabled}
-        ?readonly=${readonly}
-        ?required=${required}
-        ?allowClear=${allowClear}
-        ?showCount=${showCount}
-        ?autoResize=${autoResize}
-        ?validateOnChange=${validateOnChange}
-        ?validateOnBlur=${validateOnBlur}
-        ?hasFeedback=${hasFeedback}
-        @nr-textarea-change=${(e) => {
-      this.executeEvent("onChange", e, {
-        value: e.detail.value,
-        characterCount: e.detail.characterCount
-      });
-    }}
-        @nr-focus=${(e) => {
-      this.executeEvent("onFocus", e);
-    }}
-        @nr-blur=${(e) => {
-      this.executeEvent("onBlur", e, {
-        value: e.detail.value
-      });
-    }}
-        @nr-clear=${(e) => {
-      this.executeEvent("onClear", e);
-    }}
-        @nr-resize=${(e) => {
-      this.executeEvent("onResize", e, {
-        height: e.detail.height,
-        width: e.detail.width
-      });
-    }}
-      ></nr-textarea>
-    `;
-  }
-};
-TextareaBlock.styles = [css``];
-__decorateClass$k([
-  property({ type: Object })
-], TextareaBlock.prototype, "component", 2);
-__decorateClass$k([
-  property({ type: Object })
-], TextareaBlock.prototype, "item", 2);
-TextareaBlock = __decorateClass$k([
-  customElement("textarea-block")
-], TextareaBlock);
-
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/slider-input');
-} catch (error) {
-  console.warn("[@nuralyui/slider-input] Package not found or failed to load.");
-}
-let SliderBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const sliderStyles = this.component?.style || {};
-    const value = this.component?.input?.value?.value ?? this.inputHandlersValue?.value ?? 0;
-    const min = this.component?.input?.min?.value ?? this.inputHandlersValue?.min ?? 0;
-    const max = this.component?.input?.max?.value ?? this.inputHandlersValue?.max ?? 100;
-    const step = this.component?.input?.step?.value ?? this.inputHandlersValue?.step ?? 1;
-    const disabled = this.component?.input?.disabled?.value ?? this.inputHandlersValue?.disabled ?? false;
-    const vertical = this.component?.input?.vertical?.value ?? this.inputHandlersValue?.vertical ?? false;
-    const showTooltip = this.component?.input?.showTooltip?.value ?? this.inputHandlersValue?.showTooltip ?? true;
-    const showMarks = this.component?.input?.showMarks?.value ?? this.inputHandlersValue?.showMarks ?? false;
-    const range = this.component?.input?.range?.value ?? this.inputHandlersValue?.range ?? false;
-    const marks = this.inputHandlersValue?.marks;
-    return html`
-      <nr-slider-input
-        ${ref(this.inputRef)}
-        style=${styleMap(sliderStyles)}
-        .value=${value}
-        .min=${min}
-        .max=${max}
-        .step=${step}
-        .marks=${marks}
-        ?disabled=${disabled}
-        ?vertical=${vertical}
-        ?showTooltip=${showTooltip}
-        ?showMarks=${showMarks}
-        ?range=${range}
-        @nr-change=${(e) => {
-      this.executeEvent("onChange", e, {
-        value: e.detail.value
-      });
-    }}
-        @nr-after-change=${(e) => {
-      this.executeEvent("onAfterChange", e, {
-        value: e.detail.value
-      });
-    }}
-      ></nr-slider-input>
-    `;
-  }
-};
-SliderBlock.styles = [css``];
-__decorateClass$j([
-  property({ type: Object })
-], SliderBlock.prototype, "component", 2);
-__decorateClass$j([
-  property({ type: Object })
-], SliderBlock.prototype, "item", 2);
-SliderBlock = __decorateClass$j([
-  customElement("slider-block")
-], SliderBlock);
-
-const formStyles = css`
-  :host {
-    display: block;
-    width: 100%;
-  }
-
-  .form-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #64748b;
-    min-height: 200px;
-    width: 100%;
-    border-radius: 8px;
-    border: 2px dashed #cbd5e1;
-    gap: 12px;
-    cursor: pointer;
-  }
-
-  .form-placeholder nr-icon {
-    --nuraly-icon-size: 48px;
-  }
-`;
-
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/forms');
-} catch (error) {
-  console.warn("[@nuralyui/forms] Package not found or failed to load.");
-}
-try {
-  await import('@nuralyui/icon');
-} catch (error) {
-  console.warn("[@nuralyui/icon] Package not found or failed to load.");
-}
-try {
-  await import('@nuralyui/label');
-} catch (error) {
-  console.warn("[@nuralyui/label] Package not found or failed to load.");
-}
-let FormBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this._formElement = null;
-    this._registeredFields = /* @__PURE__ */ new Map();
-    this.childrenComponents = [];
-    this._fieldRegisterHandler = this._handleFieldRegister.bind(this);
-    this._fieldUnregisterHandler = this._handleFieldUnregister.bind(this);
-    this._fieldValueChangeHandler = this._handleFieldValueChange.bind(this);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-    this.addEventListener("nr-field-register", this._fieldRegisterHandler);
-    this.addEventListener("nr-field-unregister", this._fieldUnregisterHandler);
-    this.addEventListener("nr-field-value-change", this._fieldValueChangeHandler);
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    this.childrenComponents = this.component?.childrenIds?.map((id) => {
-      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
-    }).filter(Boolean) ?? [];
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("nr-field-register", this._fieldRegisterHandler);
-    this.removeEventListener("nr-field-unregister", this._fieldUnregisterHandler);
-    this.removeEventListener("nr-field-value-change", this._fieldValueChangeHandler);
-    this._registeredFields.clear();
-  }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    this._formElement = this.renderRoot.querySelector("nr-form");
-    this.registerCallback("disabled", (value) => {
-      if (this._formElement) {
-        this._formElement.disabled = value;
-      }
-    });
-  }
-  /**
-   * Handle field registration from child input blocks
-   */
-  _handleFieldRegister(event) {
-    event.stopPropagation();
-    const { element, name, blockElement } = event.detail;
-    if (!name || !element) {
-      console.warn("[FormBlock] Field registration missing name or element");
-      return;
-    }
-    this._registeredFields.set(name, { element, blockElement });
-    if (this._formElement?.validationController) {
-      try {
-        this._formElement.validationController.registerField(element);
-      } catch (error) {
-        console.warn("[FormBlock] Failed to register field with validation controller:", error);
-      }
-    }
-  }
-  /**
-   * Handle field unregistration when child input blocks are removed
-   */
-  _handleFieldUnregister(event) {
-    event.stopPropagation();
-    const { name } = event.detail;
-    if (name && this._registeredFields.has(name)) {
-      if (this._formElement?.validationController) {
-        try {
-          this._formElement.validationController.unregisterField(name);
-        } catch (error) {
-          console.warn("[FormBlock] Failed to unregister field:", error);
-        }
-      }
-      this._registeredFields.delete(name);
-    }
-  }
-  /**
-   * Handle field value changes for form data collection
-   */
-  _handleFieldValueChange(event) {
-    const { name, value } = event.detail;
-    if (name && this._registeredFields.has(name)) {
-      const fieldInfo = this._registeredFields.get(name);
-      fieldInfo.value = value;
-    }
-  }
-  /**
-   * Get all form field values
-   */
-  getFieldsValue() {
-    if (this._formElement?.getFieldsValue) {
-      return this._formElement.getFieldsValue();
-    }
-    const values = {};
-    for (const [name, fieldInfo] of this._registeredFields) {
-      values[name] = fieldInfo.element?.value ?? fieldInfo.value;
-    }
-    return values;
-  }
-  /**
-   * Set form field values
-   */
-  setFieldsValue(values) {
-    if (this._formElement?.setFieldsValue) {
-      this._formElement.setFieldsValue(values);
-    }
-  }
-  /**
-   * Validate all form fields
-   */
-  async validate() {
-    if (this._formElement?.validate) {
-      return this._formElement.validate();
-    }
-    return true;
-  }
-  /**
-   * Submit the form programmatically
-   */
-  async submit(customData) {
-    if (this._formElement?.submit) {
-      await this._formElement.submit(customData);
-    }
-  }
-  /**
-   * Reset the form
-   */
-  reset() {
-    if (this._formElement?.reset) {
-      this._formElement.reset();
-    }
-  }
-  /**
-   * Get form state summary
-   */
-  getFormState() {
-    if (this._formElement?.getFormState) {
-      return this._formElement.getFormState();
-    }
-    return {
-      isValid: true,
-      isSubmitting: false,
-      hasErrors: false,
-      errorCount: 0,
-      fieldCount: this._registeredFields.size
-    };
-  }
-  /**
-   * Render placeholder when form is empty in editor mode
-   */
-  renderPlaceholder() {
-    return html`
-      <div
-        class="form-placeholder"
-        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
-      >
-        <nr-icon name="file-text"></nr-icon>
-        <nr-label>Add form fields to this form</nr-label>
-        <drag-wrapper
-          .where=${"inside"}
-          .message=${"Drop inside"}
-          .component=${{ ...this.component }}
-          .inputRef=${this.inputRef}
-          .isDragInitiator=${this.isDragInitiator}
-        >
-        </drag-wrapper>
-      </div>
-    `;
-  }
-  /**
-   * Render children components
-   */
-  renderChildren() {
-    return renderComponent(
-      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
-      this.item,
-      this.isViewMode,
-      { ...this.component, uniqueUUID: this.uniqueUUID }
-    );
-  }
-  renderComponent() {
-    const inputStyles = this.getStyles();
-    const hasChildren = this.childrenComponents.length > 0;
-    if (this.isViewMode) {
-      return html`
-        <nr-form
-          ${ref(this.inputRef)}
-          class="${`drop-${this.component.uuid}`}"
-          style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(";")}
-          .disabled=${this.inputHandlersValue?.disabled || false}
-          .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
-          .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
-          .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
-          .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
-          .action=${this.inputHandlersValue?.action ?? nothing}
-          .method=${this.inputHandlersValue?.method ?? "POST"}
-          @nr-form-submit-success=${(e) => {
-        this.executeEvent("onSubmitSuccess", e, {
-          formData: e.detail?.formData,
-          values: this.getFieldsValue()
-        });
-      }}
-          @nr-form-submit-error=${(e) => {
-        this.executeEvent("onSubmitError", e, {
-          error: e.detail?.error
-        });
-      }}
-          @nr-form-validation-changed=${(e) => {
-        this.executeEvent("onValidationChange", e, {
-          validationResult: e.detail?.validationResult
-        });
-      }}
-          @nr-form-field-changed=${(e) => {
-        this.executeEvent("onFieldChange", e, {
-          field: e.detail?.field
-        });
-      }}
-          @nr-form-reset=${(e) => {
-        this.executeEvent("onReset", e, {});
-      }}
-        >
-          ${hasChildren ? this.renderChildren() : nothing}
-        </nr-form>
-      `;
-    }
-    return html`
-      <nr-form
-        ${ref(this.inputRef)}
-        class="${`drop-${this.component.uuid}`}"
-        style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(";")}
-        .disabled=${this.inputHandlersValue?.disabled || false}
-        .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
-        .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
-        .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
-        .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
-        .action=${this.inputHandlersValue?.action ?? nothing}
-        .method=${this.inputHandlersValue?.method ?? "POST"}
-        @nr-form-submit-success=${(e) => {
-      this.executeEvent("onSubmitSuccess", e, {
-        formData: e.detail?.formData,
-        values: this.getFieldsValue()
-      });
-    }}
-        @nr-form-submit-error=${(e) => {
-      this.executeEvent("onSubmitError", e, {
-        error: e.detail?.error
-      });
-    }}
-        @nr-form-validation-changed=${(e) => {
-      this.executeEvent("onValidationChange", e, {
-        validationResult: e.detail?.validationResult
-      });
-    }}
-        @nr-form-field-changed=${(e) => {
-      this.executeEvent("onFieldChange", e, {
-        field: e.detail?.field
-      });
-    }}
-        @nr-form-reset=${(e) => {
-      this.executeEvent("onReset", e, {});
-    }}
-      >
-        ${hasChildren ? this.renderChildren() : this.renderPlaceholder()}
-      </nr-form>
-    `;
-  }
-};
-FormBlock.styles = [formStyles];
-__decorateClass$i([
-  property({ type: Object })
-], FormBlock.prototype, "component", 2);
-__decorateClass$i([
-  property({ type: Object })
-], FormBlock.prototype, "item", 2);
-__decorateClass$i([
-  state()
-], FormBlock.prototype, "_formElement", 2);
-__decorateClass$i([
-  state()
-], FormBlock.prototype, "_registeredFields", 2);
-__decorateClass$i([
-  state()
-], FormBlock.prototype, "childrenComponents", 2);
-FormBlock = __decorateClass$i([
-  customElement("form-block")
-], FormBlock);
-
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/table');
-} catch (error) {
-  console.warn("[@nuralyui/table] Package not found or failed to load.");
-}
-let TextInputBlock$1 = class TextInputBlock extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.headers = [
-      {
-        name: "Id",
-        key: "id"
-      },
-      {
-        name: "Status",
-        key: "status"
-      },
-      {
-        name: "Priority",
-        key: "priority"
-      },
-      {
-        name: "Title",
-        key: "title"
-      },
-      {
-        name: "Assignee",
-        key: "assignee"
-      }
-    ];
-    this.rows = [
-      {
-        id: 1,
-        status: "Open",
-        priority: "Normal",
-        title: "Product Details Page - Variant Component (1)",
-        assignee: "William Jones"
-      },
-      {
-        id: 2,
-        status: "Open",
-        priority: "High",
-        title: "Product Details Page - Variant Component (2)",
-        assignee: "Natalia Hayward"
-      },
-      {
-        id: 3,
-        status: "Closed",
-        priority: "Normal",
-        title: "Product Details Page - Variant Component (3)",
-        assignee: "Jess Plant"
-      },
-      {
-        id: 4,
-        status: "Open",
-        priority: "Normal",
-        title: "Product Details Page - Variant Component (4)",
-        assignee: "William Jones"
-      },
-      {
-        id: 5,
-        status: "Open",
-        priority: "Normal",
-        title: "Product Details Page - Variant Component (5)",
-        assignee: "Kathleen Knowles"
-      },
-      {
-        id: 6,
-        status: "Open",
-        priority: "High",
-        title: "Product Details Page - Variant Component (6)",
-        assignee: "Mel Young"
-      },
-      {
-        id: 7,
-        status: "Closed",
-        priority: "Normal",
-        title: "Product Details Page - Variant Component (7)",
-        assignee: "Zahid Allison"
-      },
-      {
-        id: 8,
-        status: "Closed",
-        priority: "High",
-        title: "Product Details Page - Variant Component (8)",
-        assignee: "William Jones"
-      }
-    ];
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) this.unsubscribe();
-  }
-  renderComponent() {
-    const tableStyles = this.component?.style || {};
-    const tableAutoWidth = this.inputHandlersValue?.width;
-    this.inputHandlersValue?.height;
-    const headers = this.inputHandlersValue?.data ? this.inputHandlersValue?.data?.headers : this.headers;
-    const rows = this.inputHandlersValue?.data ? this.inputHandlersValue?.data?.rows : this.rows;
-    const size = tableStyles.size || "normal";
-    const selectionModeValue = this.component?.input?.selectionMode?.value || this.inputHandlersValue?.selectionMode;
-    const selectionMode = selectionModeValue === "multiple" ? "multiple" : selectionModeValue === "single" ? "single" : void 0;
-    const filter = this.inputHandlersValue?.filter;
-    const fixedHeader = this.inputHandlersValue?.fixedHeader ?? false;
-    const loading = this.inputHandlersValue?.loading ?? false;
-    const expandable = this.inputHandlersValue?.expandable ?? false;
-    const emptyText = this.inputHandlersValue?.emptyText ?? "No data available";
-    const emptyIcon = this.inputHandlersValue?.emptyIcon;
-    const expansionRenderer = this.inputHandlersValue?.expansionRenderer;
-    const scrollConfig = this.inputHandlersValue?.scrollConfig;
-    return html`
-      <nr-table
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...tableStyles,
-      width: tableAutoWidth ? "auto" : tableStyles.width,
-      "overflow": "auto"
-    })}
-        .headers="${headers}"
-        .rows="${rows}"
-        .size=${size}
-        .withFilter=${filter === "filter"}
-        .expandable=${expandable ?? nothing}
-        .expansionRenderer=${expansionRenderer ?? nothing}
-        .selectionMode=${selectionMode}
-        .fixedHeader=${fixedHeader}
-        .scrollConfig=${scrollConfig ?? nothing}
-        .loading=${loading}
-        .emptyText=${emptyText}
-        .emptyIcon=${emptyIcon ?? nothing}
-        @onPaginate=${(e) => {
-      this.executeEvent("onPaginate", e);
-    }}
-        @nr-select=${(e) => {
-      this.executeEvent("onSelect", e);
-    }}
-        @onSearch=${(e) => {
-      this.executeEvent("onSearch", e);
-    }}
-        @onSort=${(e) => {
-      this.executeEvent("onSort", e);
-    }}
-      >
-      </nr-table>
-
-    `;
-  }
-};
-TextInputBlock$1.styles = [
-  css``
-];
-__decorateClass$h([
-  property({ type: Object })
-], TextInputBlock$1.prototype, "component", 2);
-__decorateClass$h([
-  property({ type: Object })
-], TextInputBlock$1.prototype, "item", 2);
-__decorateClass$h([
-  state()
-], TextInputBlock$1.prototype, "headers", 2);
-__decorateClass$h([
-  state()
-], TextInputBlock$1.prototype, "rows", 2);
-TextInputBlock$1 = __decorateClass$h([
-  customElement("table-block")
-], TextInputBlock$1);
-
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/icon');
-} catch (error) {
-  console.warn("[@nuralyui/icon] Package not found or failed to load.");
-}
-let IconBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.registerCallback("icon", () => {
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  renderComponent() {
-    const iconStyles = this.getStyles();
-    return html`
-      <nr-icon
-      ${ref(this.inputRef)}
-        .name=${this.inputHandlersValue.icon ?? "smile"}
-        .type=${this.inputHandlersValue.type || "solid"}
-        .alt=${this.inputHandlersValue.alt || ""}
-        .size=${this.inputHandlersValue.size || nothing}
-        .color=${this.inputHandlersValue.color || nothing}
-        .width=${iconStyles?.width || nothing}
-        .height=${iconStyles?.height || nothing}
-        .clickable=${this.inputHandlersValue.clickable || false}
-        .disabled=${this.inputHandlersValue.state === "disabled"}
-        @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-        @icon-click=${(e) => {
-      this.executeEvent("onIconClick", e);
-    }}
-        @icon-keyboard-activation=${(e) => {
-      this.executeEvent("onIconKeyboardActivation", e);
-    }}
-        style=${styleMap({
-      display: "block",
-      ...this.getStyles(),
-      "--nuraly-icon-width": iconStyles?.width,
-      "--nuraly-icon-height": iconStyles?.height
-    })}>
-      </nr-icon>
-    `;
-  }
-};
-__decorateClass$g([
-  property({ type: Object })
-], IconBlock.prototype, "component", 2);
-__decorateClass$g([
-  property({ type: Object })
-], IconBlock.prototype, "item", 2);
-IconBlock = __decorateClass$g([
-  customElement("icon-block")
-], IconBlock);
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/image');
-} catch (error) {
-  console.warn("[@nuralyui/image] Package not found or failed to load.");
-}
-let ImageBlock = class extends BaseElementBlock {
-  connectedCallback() {
-    super.connectedCallback();
-    this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-      this.isDarkMode = event.matches;
-      this.requestUpdate();
-    });
-  }
-  renderComponent() {
-    const fallbackStyles = this.getStyles();
-    const imageStyles = this.getStyles() || {};
-    const imageStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
-      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
-    ) : {};
-    const imageSrc = this.isDarkMode ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src : this.inputHandlersValue?.src;
-    if (!imageSrc) {
-      return html`
-        <div
-          ${ref(this.inputRef)}
-          class="image-placeholder"
-          style=${styleMap({
-        width: imageStyleHandlers?.width || imageStyles?.width || "100%",
-        height: imageStyleHandlers?.height || imageStyles?.height || "200px"
-      })}
-          @click=${(e) => this.executeEvent("onClick", e)}
-        >
-          <nr-icon name="image"></nr-icon>
-          <nr-label>No image source</nr-label>
-        </div>
-      `;
-    }
-    return html`
-      <nr-image
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...this.getStyles(),
-      "display": "block",
-      "--nuraly-image-local-border-top-left-radius": fallbackStyles?.["border-top-left-radius"] ?? "",
-      "--nuraly-image-local-border-top-right-radius": fallbackStyles?.["border-top-right-radius"] ?? "",
-      "--nuraly-image-local-border-bottom-left-radius": fallbackStyles?.["border-bottom-left-radius"] ?? "",
-      "--nuraly-image-local-border-bottom-right-radius": fallbackStyles?.["border-bottom-right-radius"] ?? ""
-    })}
-        .src=${imageSrc}
-        .fallback=${this.inputHandlersValue?.fallback ?? nothing}
-        .previewable=${this.inputHandlersValue?.previewable ?? false}
-        .fit=${this.inputHandlersValue?.fit ?? nothing}
-        .block=${this.inputHandlersValue?.block ?? false}
-        .width=${imageStyleHandlers?.width || imageStyles?.width}
-        .height=${imageStyleHandlers?.height || imageStyles?.height}
-        .alt=${this.inputHandlersValue?.alt ?? "image"}
-        @click=${(e) => this.executeEvent("onClick", e)}
-        @nr-image-error=${(e) => this.executeEvent("onError", e)}
-        @nr-image-load=${(e) => this.executeEvent("onLoad", e)}
-        @nr-image-preview-open=${(e) => this.executeEvent("onPreviewOpen", e)}
-        @nr-image-preview-close=${(e) => this.executeEvent("onPreviewClose", e)}
-      >
-      </nr-image>
-    `;
-  }
-};
-ImageBlock.styles = [css`
-    :host {
-      display: block;
-    }
-    .image-placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: #64748b;
-      min-height: 200px;
-      min-width: 200px;
-      border-radius: 8px;
-      border: 2px dashed #cbd5e1;
-      gap: 12px;
-      box-sizing: border-box;
-    }
-    .image-placeholder nr-icon {
-      --nuraly-icon-size: 48px;
-    }
-  `];
-__decorateClass$f([
-  property({ type: Object })
-], ImageBlock.prototype, "component", 2);
-ImageBlock = __decorateClass$f([
-  customElement("image-block")
-], ImageBlock);
-
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/divider');
-} catch (error) {
-  console.warn("[@nuralyui/divider] Package not found or failed to load.");
-}
-let DividerBlock = class extends BaseElementBlock {
-  connectedCallback() {
-    super.connectedCallback();
-    this.registerCallback("value", () => {
-    });
-    this.updateHostAttribute();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    this.updateHostAttribute();
-  }
-  updateHostAttribute() {
-    const direction = this.inputHandlersValue?.direction ?? "horizontal";
-    this.setAttribute("data-type", direction);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) this.unsubscribe();
-  }
-  render() {
-    const dividerStyles = this.component?.style || {};
-    const dividerAutoWidth = this.inputHandlersValue?.width;
-    const dividerAutoHeight = this.inputHandlersValue?.height;
-    const isVertical = (this.inputHandlersValue?.direction ?? "horizontal") === "vertical";
-    const filteredStyles = { ...dividerStyles };
-    if (isVertical && dividerAutoHeight) {
-      delete filteredStyles.height;
-    }
-    return html`
-    ${!this.inputHandlersValue?.display || this.inputHandlersValue.display == "show" ? html`
-      <nr-divider
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...filteredStyles,
-      width: dividerAutoWidth ? "100%" : dividerStyles.width,
-      height: !isVertical && dividerAutoHeight ? "auto" : filteredStyles.height
-    })}
-        type=${this.inputHandlersValue?.direction ?? "horizontal"}
-        .variant=${this.inputHandlersValue?.variant || "solid"}
-        .orientation=${this.inputHandlersValue?.textOrientation || "center"}
-        .orientationMargin=${this.inputHandlersValue?.orientationMargin ?? nothing}
-        .plain=${this.inputHandlersValue?.plain !== false}
-        .size=${this.inputHandlersValue?.size ?? nothing}
-        .dashed=${this.inputHandlersValue?.dashed || false}
-        @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-      >
-        ${this.inputHandlersValue?.text || ""}
-      </nr-divider>
-      ` : nothing}
-    `;
-  }
-};
-DividerBlock.styles = [
-  css`
-    :host { 
-        display: block;
-        width: 100%;
-    }
-    
-    :host([data-type="vertical"]) {
-        display: inline-flex;
-        width: auto;
-        align-self: stretch; /* This makes it fill the parent's height in flexbox */
-    }
-    
-    :host([data-type="vertical"]) nr-divider {
-        height: 100%;
-        display: flex;
-        align-items: stretch;
-    }
-    `
-];
-__decorateClass$e([
-  property({ type: Object })
-], DividerBlock.prototype, "component", 2);
-__decorateClass$e([
-  property({ type: Object })
-], DividerBlock.prototype, "item", 2);
-DividerBlock = __decorateClass$e([
-  customElement("divider-block")
-], DividerBlock);
-
-const textLabelStyles = css`
-label{
-    color:var(--text-label-color);
-    user-select: none
-}
-
-:host{
-    display: flex;
-    width:fit-content;
-}
-
-@media (prefers-color-scheme: dark) {
-    :host { 
-      }
- }
-
-`;
-const styles$2 = [textLabelStyles];
-
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/label');
-} catch (error) {
-  console.warn("[@nuralyui/label] Package not found or failed to load.");
-}
-let TextLabelBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.isEditable = false;
-    this.registerCallback("innerAlignment", (value) => {
-      if (this.closestGenericComponentWrapper) {
-        if (this.inputHandlersValue?.innerAlignment === "end") {
-          this.closestGenericComponentWrapper.style.marginLeft = "auto";
-        } else {
-          this.closestGenericComponentWrapper.style.marginLeft = "unset";
-        }
-      }
-    });
-  }
-  renderComponent() {
-    return html`
-     <nr-label
-     class="${`drop-${this.component.uuid}`}"
-     @input=${(e) => {
-      const eventData = { ["value"]: { type: "string", value: e.target.innerText } };
-      this.executeEvent("onInput", e, eventData);
-    }}
-          ${ref(this.inputRef)}
-            id=${this.component.uuid}
-            .size=${this.inputHandlersValue.size ?? "medium"}
-            .variant=${this.inputHandlersValue.variant || "default"}
-            .required=${this.inputHandlersValue.required || false}
-            .disabled=${this.inputHandlersValue.state === "disabled"}
-            .for=${this.inputHandlersValue.for || nothing}
-            .value=${this.inputHandlersValue.value || ""}
-            contentEditable="${this.isEditable}"
-            @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-            @mouseenter=${(e) => {
-      this.executeEvent("onMouseEnter", e);
-    }}
-            @mouseleave=${(e) => {
-      this.executeEvent("onMouseLeave", e);
-    }}
-      
-            @dblclick=${(e) => {
-      e.preventDefault();
-      this.isEditable = true;
-    }}>${this.inputHandlersValue.value || "Text label"}</nr-label>
-    `;
-  }
-};
-TextLabelBlock.styles = styles$2;
-__decorateClass$d([
-  property({ type: Object })
-], TextLabelBlock.prototype, "component", 2);
-__decorateClass$d([
-  property({ type: Object })
-], TextLabelBlock.prototype, "item", 2);
-__decorateClass$d([
-  state()
-], TextLabelBlock.prototype, "isEditable", 2);
-TextLabelBlock = __decorateClass$d([
-  customElement("text-label-block")
-], TextLabelBlock);
-
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
-  return result;
-};
-let TextInputBlock = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isEditorLoaded = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.loadEditor();
-  }
-  async loadEditor() {
-    if (!this.isEditorLoaded) {
-      await import('./CodeEditor-Cpph-xRc.js');
-      this.isEditorLoaded = true;
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  handleCodeEditorChange(event) {
-    const value = event.detail.value;
-    if (!this.isViewMode) {
-      const serializedValue = JSON.stringify(value);
-      executeHandler(
-        this.component,
-        /* js */
-        `
-          try {
-              const selectedComponent = Utils.first($selectedComponents);
-              updateInput(selectedComponent, "value", "string", ${serializedValue}, null);
-          } catch (error) {
-              console.error(error);
-          }
-        `,
-        {}
-      );
-    }
-    this.executeEvent("onChange", event, { value });
-  }
-  renderComponent() {
-    return html`
-      ${this.isEditorLoaded ? html`
-            <code-editor
-              ${ref(this.inputRef)}
-              style=${styleMap({
-      ...this.getStyles(),
-      display: "block"
-    })}
-              language="${this.inputHandlersValue?.language ?? "javascript"}"
-              theme="${this.inputHandlersValue?.theme ?? "vs-dark"}"
-              .readonly=${this.inputHandlersValue?.readonly ?? this.isViewMode === true}
-              .code=${this.inputHandlersValue?.value ?? ""}
-              @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-              @change=${(event) => {
-      this.handleCodeEditorChange(event);
-    }}
-              @editor-keydown=${(event) => {
-      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) => {
-      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-editor>
-          ` : html`<p>Loading editor...</p>`}
-    `;
-  }
-};
-TextInputBlock.styles = [
-  css`
-      :host {
-      }
-      code-editor {
-        display: block;
-        height: 100px;
-      }
-    `
-];
-__decorateClass$c([
-  property({ type: Object })
-], TextInputBlock.prototype, "component", 2);
-__decorateClass$c([
-  property({ type: Object })
-], TextInputBlock.prototype, "item", 2);
-__decorateClass$c([
-  state()
-], TextInputBlock.prototype, "isEditorLoaded", 2);
-TextInputBlock = __decorateClass$c([
-  customElement("code-block")
-], TextInputBlock);
-
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/video');
-} catch (error) {
-  console.warn("[@nuralyui/video] Package not found or failed to load.");
-}
-let VideoBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const videoStyles = this.getStyles() || {};
-    const videoStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
-      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
-    ) : {};
-    const src = this.inputHandlersValue?.src;
-    const poster = this.inputHandlersValue?.poster;
-    const autoplay = this.inputHandlersValue?.autoplay ?? false;
-    const controls = this.inputHandlersValue?.controls ?? true;
-    const loop = this.inputHandlersValue?.loop ?? false;
-    const muted = this.inputHandlersValue?.muted ?? false;
-    const preload = this.inputHandlersValue?.preload ?? "metadata";
-    if (!src) {
-      return html`
-        <div
-          ${ref(this.inputRef)}
-          class="video-placeholder"
-          style=${styleMap({
-        ...this.getStyles(),
-        width: videoStyleHandlers?.width || videoStyles?.width || "100%",
-        height: videoStyleHandlers?.height || videoStyles?.height || "200px"
-      })}
-          @click=${(e) => this.executeEvent("onClick", e)}
-        >
-          <nr-icon name="video"></nr-icon>
-          <nr-label>No video source</nr-label>
-        </div>
-      `;
-    }
-    return html`
-      <nr-video-player
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...this.getStyles(),
-      "display": "block"
-    })}
-        .src=${src}
-        .poster=${poster ?? nothing}
-        .autoplay=${autoplay}
-        .controls=${controls}
-        .loop=${loop}
-        .muted=${muted}
-        .preload=${preload}
-        .width=${videoStyleHandlers?.width || videoStyles?.width}
-        .height=${videoStyleHandlers?.height || videoStyles?.height}
-        @click=${(e) => this.executeEvent("onClick", e)}
-        @play=${(e) => this.executeEvent("onPlay", e)}
-        @pause=${(e) => this.executeEvent("onPause", e)}
-        @ended=${(e) => this.executeEvent("onEnded", e)}
-        @loadeddata=${(e) => this.executeEvent("onLoad", e)}
-        @error=${(e) => this.executeEvent("onError", e)}
-        @timeupdate=${(e) => {
-      const video = e.target;
-      this.executeEvent("onTimeUpdate", e, {
-        currentTime: video?.currentTime,
-        duration: video?.duration
-      });
-    }}
-        @volumechange=${(e) => {
-      const video = e.target;
-      this.executeEvent("onVolumeChange", e, {
-        volume: video?.volume,
-        muted: video?.muted
-      });
-    }}
-      >
-      </nr-video-player>
-    `;
-  }
-};
-VideoBlock.styles = [css`
-    .video-placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: #64748b;
-      min-height: 200px;
-      border-radius: 8px;
-      border: 2px dashed #cbd5e1;
-      gap: 12px;
-    }
-    .video-placeholder nr-icon {
-      --nuraly-icon-size: 48px;
-    }
-    .video-placeholder span {
-      font-size: 14px;
-      font-weight: 500;
-    }
-  `];
-__decorateClass$b([
-  property({ type: Object })
-], VideoBlock.prototype, "component", 2);
-VideoBlock = __decorateClass$b([
-  customElement("video-block")
-], VideoBlock);
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/badge');
-} catch (error) {
-  console.warn("[@nuralyui/badge] Package not found or failed to load.");
-}
-let BadgeBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const badgeStyles = this.component?.style || {};
-    const count = this.component?.input?.count?.value ?? this.inputHandlersValue?.count;
-    const text = this.component?.input?.text?.value || this.inputHandlersValue?.text || "";
-    const dot = this.component?.input?.dot?.value ?? this.inputHandlersValue?.dot ?? false;
-    const showZero = this.component?.input?.showZero?.value ?? this.inputHandlersValue?.showZero ?? false;
-    const overflowCount = this.component?.input?.overflowCount?.value || this.inputHandlersValue?.overflowCount || 99;
-    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || "default";
-    const color = this.component?.input?.color?.value || this.inputHandlersValue?.color;
-    const status = this.component?.input?.status?.value || this.inputHandlersValue?.status;
-    const ribbon = this.component?.input?.ribbon?.value || this.inputHandlersValue?.ribbon;
-    const ribbonPlacement = this.component?.input?.ribbonPlacement?.value || this.inputHandlersValue?.ribbonPlacement || "end";
-    const offsetX = this.component?.input?.offsetX?.value || this.inputHandlersValue?.offsetX;
-    const offsetY = this.component?.input?.offsetY?.value || this.inputHandlersValue?.offsetY;
-    const offset = offsetX || offsetY ? [offsetX || 0, offsetY || 0] : void 0;
-    return html`
-      <nr-badge
-        ${ref(this.inputRef)}
-        style=${styleMap(badgeStyles)}
-        .count=${count}
-        .text=${text}
-        .size=${size}
-        .color=${color}
-        .status=${status}
-        .ribbon=${ribbon}
-        .ribbonPlacement=${ribbonPlacement}
-        .overflowCount=${overflowCount}
-        .offset=${offset}
-        ?dot=${dot}
-        ?showZero=${showZero}
-      >
-        <slot></slot>
-      </nr-badge>
-    `;
-  }
-};
-BadgeBlock.styles = [css``];
-__decorateClass$a([
-  property({ type: Object })
-], BadgeBlock.prototype, "component", 2);
-__decorateClass$a([
-  property({ type: Object })
-], BadgeBlock.prototype, "item", 2);
-BadgeBlock = __decorateClass$a([
-  customElement("badge-block")
-], BadgeBlock);
-
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/tag');
-} catch (error) {
-  console.warn("[@nuralyui/tag] Package not found or failed to load.");
-}
-let TagBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const tagStyles = this.component?.style || {};
-    const label = this.component?.input?.label?.value || this.inputHandlersValue?.label || "";
-    const closable = this.component?.input?.closable?.value ?? this.inputHandlersValue?.closable ?? false;
-    const color = this.component?.input?.color?.value || this.inputHandlersValue?.color;
-    const icon = this.component?.input?.icon?.value || this.inputHandlersValue?.icon;
-    const bordered = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? true;
-    return html`
-      <nr-tag
-        ${ref(this.inputRef)}
-        style=${styleMap(tagStyles)}
-        .color=${color}
-        ?closable=${closable}
-        ?bordered=${bordered}
-        @nr-tag-close=${(e) => {
-      this.executeEvent("onClose", e);
-    }}
-        @click=${(e) => {
-      this.executeEvent("onClick", e);
-    }}
-      >
-        ${icon ? html`<nr-icon slot="icon" .name=${icon}></nr-icon>` : ""}
-        ${label}
-      </nr-tag>
-    `;
-  }
-};
-TagBlock.styles = [css``];
-__decorateClass$9([
-  property({ type: Object })
-], TagBlock.prototype, "component", 2);
-__decorateClass$9([
-  property({ type: Object })
-], TagBlock.prototype, "item", 2);
-TagBlock = __decorateClass$9([
-  customElement("tag-block")
-], TagBlock);
-
-const styles$1 = css`
-            :host {
-              display:flex;
-              align-items:center;
-            }
-            .chat-input-container {
-                position: relative;
-                display: inline-block;
-                width: 100%;
-            }
-            .chat-input {
-                display: flex;
-                margin-top: 10px;
-                width: 100%;
-            }
-            .chat-input nr-input {
-                flex: 1;
-                margin-right: 10px;
-            }
-            .chat-messages {
-                margin-top: 10px;
-                max-height: 200px;
-                overflow-y: auto;
-                background-color: #f9f9f9;
-                border: 1px solid #ccc;
-                border-radius: 8px;
-                padding: 10px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            }
-            .chat-message {
-                border-radius: 16px;
-                padding: 8px 12px;
-                margin-bottom: 8px;
-                max-width: 80%;
-                word-wrap: break-word;
-            }
-            .ai-message {
-                background-color: #d1fae5;
-                align-self: flex-start;
-            }
-            .error-message {
-                color: red;
-                margin-top: 10px;
-            }
-            .loading-indicator {
-                margin-top: 10px;
-                font-size: 14px;
-                color: #555;
-            }
-        `;
-
-function createChat() {
-  return fetch("/api/chat", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    }
-  }).then((response) => {
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return response.json();
-  }).then((data) => {
-    return data;
-  }).catch((error) => {
-    console.error("Error creating chat:", error);
-    throw error;
-  });
-}
-
-function replaceUUIDs(data) {
-  const uuidMapping = {};
-  data.forEach((item) => {
-    const newUUID = v4();
-    uuidMapping[item.uuid] = newUUID;
-  });
-  data.forEach((item) => {
-    if (uuidMapping[item.uuid]) {
-      item.uuid = uuidMapping[item.uuid];
-    }
-    if (item.childrenIds) {
-      item.childrenIds = item.childrenIds.map((childId) => {
-        return uuidMapping[childId] || childId;
-      });
-    }
-  });
-  return data;
-}
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/slider-input');
-} catch (error) {
-  console.warn("[@nuralyui/slider-input] Package not found or failed to load.");
-}
-try {
-  await import('@nuralyui/button');
-} catch (error) {
-  console.warn("[@nuralyui/button] Package not found or failed to load.");
-}
-try {
-  await import('@nuralyui/input');
-} catch (error) {
-  console.warn("[@nuralyui/input] Package not found or failed to load.");
-}
-let AiChat = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.preview = false;
-    this.rootUUID = "";
-    this.isChatBoxVisible = false;
-    this.chatUuid = "";
-    this.messages = [];
-    this.errorMessage = "";
-    this.inputValue = "";
-    this.isLoading = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    const aiChatStyle = this.component?.style || {};
-    return html`
-            <div class="chat-input-container" style=${styleMap({ ...aiChatStyle })}>
-                <nr-button @click=${this.toggleChatBox}>Ask AI</nr-button>
-                ${this.isChatBoxVisible ? html`
-                    <div class="chat-input">
-                        <nr-input value=${this.inputValue} placeholder="Type your message" @valueChange=${this.handleInputChange} @keyup=${this.handleKeyUp} ></nr-input>
-                        <nr-button @click=${this.handleSendMessage}>Send</nr-button>
-                    </div>
-                    ${this.messages.length > 0 ? html`
-                        <div class="chat-messages">
-                            ${this.preview ? html`<micro-app uuid=${this.chatUuid} componentToRenderUUID=${this.rootUUID}></micro-app>` : ""}
-                        <nr-button @click=${() => addGeneratedComponents(this.structureComponent)}>Insert</nr-button>
-                        </div>
-                    ` : ""}
-                    ${this.errorMessage ? html`<div class="error-message">${this.errorMessage}</div>` : ""}
-                    ${this.isLoading ? html`<div class="loading-indicator">Loading...</div>` : ""}
-                ` : ""}
-            </div>
-        `;
-  }
-  async toggleChatBox() {
-    this.isChatBoxVisible = !this.isChatBoxVisible;
-    if (this.isChatBoxVisible) {
-      await this.getChatUuid();
-    } else {
-      this.errorMessage = "";
-    }
-  }
-  async getChatUuid() {
-    this.isLoading = true;
-    createChat().then((data) => {
-      this.chatUuid = data.chat_id;
-      this.errorMessage = "";
-    }).catch((error) => {
-      console.error("Error getting chat UUID:", error);
-      this.errorMessage = "Cannot connect to server. Please try again.";
-    }).finally(() => {
-      this.isLoading = false;
-    });
-  }
-  async sendMessage(message) {
-    this.isLoading = true;
-    try {
-      const response = await fetch(`/api/chat/${this.chatUuid}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ query: message })
-      });
-      const aiResponse = (await response.json()).response;
-      this.messages.push({ type: "ai", content: aiResponse });
-      this.structureComponent = [];
-      const result = aiResponse.components ?? aiResponse;
-      if (Array.isArray(result)) {
-        this.structureComponent = result.map((component) => {
-          component.application_id = this.chatUuid;
-          return component;
-        });
-      }
-      this.structureComponent = replaceUUIDs(this.structureComponent);
-      const structureComponentRoot = this.structureComponent.find((component) => component.component_type === "vertical-container-block");
-      this.rootUUID = structureComponentRoot.uuid;
-      addTempApplication(this.chatUuid, [...this.structureComponent]);
-      requestAnimationFrame(() => {
-        this.preview = true;
-      });
-    } catch (error) {
-      console.error("Error sending message:", error);
-    } finally {
-      this.isLoading = false;
-    }
-  }
-  handleSendMessage(event) {
-    const message = this.inputValue;
-    if (message.trim()) {
-      this.sendMessage(message);
-      this.inputValue = "";
-    }
-  }
-  handleInputChange(event) {
-    this.inputValue = event.detail.value;
-  }
-  handleKeyUp(event) {
-    if (event.key === "Enter") {
-      this.handleSendMessage(event);
-    }
-  }
-};
-AiChat.styles = styles$1;
-__decorateClass$8([
-  property({ type: Object })
-], AiChat.prototype, "component", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "preview", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "rootUUID", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "isChatBoxVisible", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "chatUuid", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "messages", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "errorMessage", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "inputValue", 2);
-__decorateClass$8([
-  state()
-], AiChat.prototype, "isLoading", 2);
-AiChat = __decorateClass$8([
-  customElement("ai-chat-block")
-], AiChat);
-
-function debounce(func, wait = 300) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
-  };
-}
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
-};
-let MicroAppBlock = class extends BaseElementBlock {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const pageUUID = $microAppCurrentPage.get()["84105b5d-49fe-4724-bc0e-325b578cbe17"];
-    this.registerCallback("appUUID", debounce((appUUID) => {
-      if (appUUID) {
-        const appLoaded = $components.get()[appUUID];
-        if (appLoaded === void 0) {
-          fetch("/api/components/application/" + appUUID).then((response) => response.json()).then((data) => {
-            return data.map((component) => component.component);
-          }).then((data) => {
-            if (pageUUID)
-              data = data.filter((component) => component.pageId === pageUUID);
-            $components.setKey(appUUID, data);
-            this.requestUpdate();
-          });
-        }
-      }
-    }, 0));
-    this.unsubscribe = $environment.subscribe((environment) => {
-      this.mode = environment.mode;
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unregisterCallback("appUUID");
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-  render() {
-    const isPreviewMode = this.inputHandlersValue.mode === ViewMode.Preview;
-    return html`
-      ${this.inputHandlersValue.appUUID ? html`
-          <micro-app
-            uuid=${this.inputHandlersValue.appUUID}
-            componentToRenderUUID=${this.inputHandlersValue.componentToRenderUUID ?? nothing}
-            style=${styleMap({
-      pointerEvents: isPreviewMode ? "auto" : "none"
-    })}
-          ></micro-app>
-        ` : html`
-          <div class="no-app-selected">
-            No micro-app selected
-          </div>
-        `}
-    `;
-  }
-};
-MicroAppBlock.styles = [
-  css`
-      .no-app-selected {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 200px;
-        width:400px;
-        border: 2px dashed gray;
-        color: gray;
-        text-align: center;
-      }
-    `
-];
-__decorateClass$7([
-  property({ type: Object })
-], MicroAppBlock.prototype, "component", 2);
-__decorateClass$7([
-  property({ type: Object })
-], MicroAppBlock.prototype, "item", 2);
-MicroAppBlock = __decorateClass$7([
-  customElement("micro-app-block")
-], MicroAppBlock);
-
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/collapse');
-} catch (error) {
-  console.warn("[@nuralyui/collapse] Package not found or failed to load. Collapse functionality may be limited.");
-}
-let Collapse = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.sections = [];
-    this.openStates = [];
-    this.componentsWithChildren = [];
-    this.registerCallback("components", () => {
-      this.updateComponents();
-    });
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("component")) {
-      this.updateComponents();
-    }
-  }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    const application_id = this.component.application_id;
-    this.componentsWithChildren = $applicationComponents(application_id).get();
-  }
-  updateComponents() {
-    this.sections = this.generateSection();
-  }
-  render() {
-    return html`
-      <nr-collapse
-        style=${styleMap(this.component.style)}
-        .sections=${[...this.sections]}
-        .size=${this.inputHandlersValue?.size ?? nothing}
-        @section-toggled=${this.handleSectionToggled}
-      ></nr-collapse>
-    `;
-  }
-  handleSectionToggled(e) {
-    const index = e.detail.index;
-    this.openStates[index] = !this.openStates[index];
-    this.sections[index].open = this.openStates[index];
-    this.requestUpdate();
-  }
-  generateComponent(blockName) {
-    const children = this.componentsWithChildren.filter(
-      (component) => blockName === component.uuid
-    );
-    return renderComponent(children, null, true);
-  }
-  generateSection() {
-    const components = this.inputHandlersValue?.components;
-    if (!components || !Array.isArray(components)) {
-      return [];
-    }
-    return components.map(
-      (section, index) => {
-        return {
-          header: section.label,
-          content: html`<div>${this.generateComponent(section.blockName)}</div>`,
-          open: this.openStates[index] ?? section.open
-        };
-      }
-    );
-  }
-};
-__decorateClass$6([
-  state()
-], Collapse.prototype, "sections", 2);
-__decorateClass$6([
-  state()
-], Collapse.prototype, "openStates", 2);
-__decorateClass$6([
-  state()
-], Collapse.prototype, "componentsWithChildren", 2);
-Collapse = __decorateClass$6([
-  customElement("collapse-block")
-], Collapse);
-
-const styles = css`
-    .collection_viewer {
-        --columns: 1;
-        min-width: 200px;
-        max-height: 400px;
-        display: flex;
-        flex-wrap: wrap; /* Allows items to wrap into new rows */
-    }
-
-    .vertical {
-        flex-direction: column;
-        flex-wrap: nowrap
-        
-    }
-
-    .collection{
-        flex: 0 0 calc(100% / var(--columns) - 10px); /* Fixed width */
-    }
-`;
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
-  return result;
-};
-let CollectionViewer = class extends BaseElementBlock {
-  constructor() {
-    super(...arguments);
-    this.isViewMode = false;
-    this.dropDragPalceHolderStyle = {
-      display: "none",
-      height: "auto",
-      width: "auto",
-      minWidth: "80px",
-      backgroundColor: "rgb(202 235 255)",
-      zIndex: "7",
-      borderRadius: "2px"
-    };
-    this.childrenComponents = [];
-    this.containerRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateChildrenComponents();
-    if (this.component?.event?.onInit) {
-      executeHandler(
-        this.component,
-        getNestedAttribute(this.component, "event.onInit")
-      );
-    }
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("component")) {
-      this.updateChildrenComponents();
-    }
-  }
-  updateChildrenComponents() {
-    const applicationComponents = $components.get()[this.component?.application_id];
-    if (!applicationComponents || !this.component?.childrenIds?.length) {
-      this.childrenComponents = [];
-      return;
-    }
-    this.childrenComponents = this.component.childrenIds.map((id) => applicationComponents.find((component) => component.uuid === id)).filter(Boolean);
-  }
-  handleCollectionClick(e) {
-    setContextMenuEvent(null);
-    if ($resizing.get()) return;
-    setCurrentComponentIdAction(this.component?.uuid);
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  renderRow(item) {
-    return html`
-      <div class="collection" ${ref(this.containerRef)}
-           @click="${(e) => this.handleCollectionClick(e)}">
-        ${this.childrenComponents.length ? html`${renderComponent(
-      this.childrenComponents.map((component) => ({ ...component, item })),
-      item,
-      this.isViewMode
-    )}` : html`<div class="empty-message">Add or Drag an item into this collection</div>`}
-      </div>`;
-  }
-  getData() {
-    if (Array.isArray(this.inputHandlersValue.data)) {
-      return this.inputHandlersValue.data;
-    }
-    return this.component.input?.data ? [] : [
-      { title: "Function 1" },
-      { title: "Function 2" },
-      { title: "Function 3" }
-    ];
-  }
-  renderComponent() {
-    const isVertical = this.inputHandlersValue.direction?.value === "vertical";
-    const data = this.getData();
-    return html`
-      <div
-        ${ref(this.inputRef)}
-        style=${styleMap(this.getStyles())}
-        class=${classMap({
-      collection_viewer: true,
-      vertical: isVertical
-    })}
-      >
-        ${data.map((item, index) => this.renderRow({ ...item, index }))}
-      </div>
-    `;
-  }
-};
-CollectionViewer.styles = styles;
-__decorateClass$5([
-  property({ type: Object })
-], CollectionViewer.prototype, "component", 2);
-__decorateClass$5([
-  property({ type: Boolean })
-], CollectionViewer.prototype, "isViewMode", 2);
-__decorateClass$5([
-  property({ type: String })
-], CollectionViewer.prototype, "mode", 2);
-__decorateClass$5([
-  state()
-], CollectionViewer.prototype, "hoveredComponent", 2);
-__decorateClass$5([
-  state()
-], CollectionViewer.prototype, "currentEditingApplication", 2);
-__decorateClass$5([
-  state()
-], CollectionViewer.prototype, "draggingComponentInfo", 2);
-__decorateClass$5([
-  state()
-], CollectionViewer.prototype, "dropDragPalceHolderStyle", 2);
-__decorateClass$5([
-  state()
-], CollectionViewer.prototype, "childrenComponents", 2);
-CollectionViewer = __decorateClass$5([
-  customElement("collection-viewer")
-], CollectionViewer);
-
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
-  return result;
-};
-let RefComponentContainer = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.dragOverSituation = false;
-    this.isViewMode = false;
-    this.wrapperStyle = {};
-    this.containerRef = createRef();
-    this.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setCurrentComponentIdAction(this.component.uuid);
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  firstUpdated(_changedProperties) {
-    eventDispatcher.on(`component-property-changed:${String(this.component.name)}`, () => {
-      this.requestUpdate();
-    });
-    $applicationComponents(this.component.application_id).subscribe(
-      (components) => {
-        this.components = [...components];
-      }
-    );
-    eventDispatcher.on(
-      "component:refresh",
-      () => {
-        this.components = $applicationComponents(this.component.application_id).get();
-      }
-    );
-  }
-  renderComponent() {
-    const componentToRender = this.components?.find(
-      (component) => component.uuid === this.inputHandlersValue?.ref && this.component.uuid !== this.inputHandlersValue?.ref
-    );
-    return html`
-        ${renderComponent(
-      [componentToRender],
-      {},
-      true
-    )}
-       
-        `;
-  }
-};
-__decorateClass$4([
-  property({ type: Object })
-], RefComponentContainer.prototype, "component", 2);
-__decorateClass$4([
-  property({ type: Object })
-], RefComponentContainer.prototype, "item", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "dragOverSituation", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "selectedComponent", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "hoveredComponent", 2);
-__decorateClass$4([
-  property({ type: Object })
-], RefComponentContainer.prototype, "draggingComponentInfo", 2);
-__decorateClass$4([
-  property({ type: Boolean })
-], RefComponentContainer.prototype, "isViewMode", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "wrapperStyle", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "containerRef", 2);
-__decorateClass$4([
-  state()
-], RefComponentContainer.prototype, "components", 2);
-RefComponentContainer = __decorateClass$4([
-  customElement("ref-component-container-block")
-], RefComponentContainer);
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
-  return result;
-};
-const svgIcons = {
-  format_clear: '<svg viewBox="0 0 24 24"><path d="M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21 18 19.73 3.55 5.27 3.27 5zM6 5v.18L8.82 8h2.4l-.72 1.68 2.1 2.1L14.21 8H20V5H6z"></path></svg>',
-  format_bold: '<svg viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path></svg>',
-  format_italic: '<svg viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path></svg>',
-  format_underlined: '<svg viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path></svg>',
-  format_align_left: '<svg viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"></path></svg>',
-  format_align_center: '<svg viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"></path></svg>',
-  format_align_right: '<svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"></path></svg>',
-  format_list_numbered: '<svg viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"></path></svg>',
-  format_list_bulleted: '<svg viewBox="0 0 24 24"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path></svg>',
-  format_quote: '<svg viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path></svg>',
-  format_indent_decrease: '<svg viewBox="0 0 24 24"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>',
-  format_indent_increase: '<svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>',
-  link_off: '<svg viewBox="0 0 24 24"><path d="M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4.01 1.41-1.41L3.41 2.86 2 4.27z"></path></svg>',
-  add_link: '<svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>',
-  format_color_text: '<svg viewBox="0 0 24 24"><path d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"></path></svg>',
-  border_color: '<svg viewBox="0 0 24 24"><path d="M17.75 7L14 3.25l-10 10V17h3.75l10-10zm2.96-2.96c.39-.39.39-1.02 0-1.41L18.37.29c-.39-.39-1.02-.39-1.41 0L15 2.25 18.75 6l1.96-1.96z"></path></svg>',
-  title: '<svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z"></path></svg>',
-  text_format: '<svg viewBox="0 0 24 24"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z"></path></svg>',
-  format_size: '<svg viewBox="0 0 24 24"><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"></path></svg>',
-  undo: '<svg viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path></svg>',
-  redo: '<svg viewBox="0 0 24 24"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path></svg>',
-  content_cut: '<svg viewBox="0 0 24 24"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"></path></svg>',
-  content_copy: '<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>',
-  content_paste: '<svg viewBox="0 0 24 24"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path></svg>'
-};
-let RichTextEditor = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.content = "";
-    this.root = null;
-  }
-  render() {
-    return html$1`<main>
-    
-      <div id="editor-actions">
-        <div id="toolbar">
-          ${toolbar(this.shadowRoot, this.getSelection(), (command, val) => {
-      document.execCommand(command, false, val);
-    })}
-            <input id="bg" type="color" style="display: none" />
-            <input id="fg" type="color" style="display: none" />
-        </div>
-      </div>
-      <div id="editor" @input=${(e) => {
-      this.dispatchEvent(new CustomEvent("content-change", {
-        detail: {
-          value: this.root?.innerHTML
-        }
-      }));
-    }}>${this.root}</div>
-    </main> `;
-  }
-  async firstUpdated() {
-    this.parentElement?.querySelector("rich-text-editor template");
-    this.reset();
-  }
-  reset() {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(this.content, "text/html");
-    document.execCommand("defaultParagraphSeparator", false, "br");
-    document.addEventListener("selectionchange", () => {
-      this.requestUpdate();
-    });
-    const root = doc.querySelector("body");
-    root.setAttribute("contenteditable", "true");
-    this.root = root;
-    this.root.style.height = "100%";
-  }
-  getSelection() {
-    if (this.shadowRoot?.getSelection) return this.shadowRoot?.getSelection();
-    return null;
-  }
-};
-RichTextEditor.styles = css$1`
-    :host {
-      /* --editor-width: 600px; */
-      /* --editor-height: 600px; */
-      /* --editor-background: #f1f1f1; */
-      --editor-toolbar-height: 33px;
-      --editor-toolbar-background: #454545;
-      --editor-toolbar-on-background: white;
-      /* --editor-toolbar-on-active-background: #a4a4a4; */
-    }
-    main {
-  width: var(--editor-width);
-  height: var(--editor-height);
-  display: grid;
-  grid-template-areas:
-    "toolbar toolbar"
-    "editor editor";
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto auto;
-}
-    #editor-actions {
-      grid-area: toolbar;
-width: var(--editor-width);
-/* height: var(--editor-toolbar-height); */
-background-color: var(--editor-toolbar-background);
-color: var(--editor-toolbar-on-background);
-overscroll-behavior: contain;
-/* overflow-y: auto; */
--ms-overflow-style: none;
-scrollbar-width: none;
-overflow:auto;
-
-/* Add these lines for vertical alignment */
-display: flex;
-align-items: center; /* vertically center items */
-    }
-    #editor-actions::-webkit-scrollbar {
-      display: none;
-    }
-    #editor {
-      width: var(--editor-width);
-      grid-area: editor;
-      background-color: var(--editor-background);
-      border: 1px solid var(--editor-toolbar-background);
-    }
-    #toolbar {
-      width: 1080px;
-      height: var(--editor-toolbar-height);
-    }
-    [contenteditable] {
-      outline: 0px solid transparent;
-    }
-    .icon-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 30px;
-      height: 30px;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      padding: 0;
-      color: var(--editor-toolbar-on-background);
-    }
-    .icon-button svg {
-      width: 20px;
-      height: 20px;
-      fill: currentColor;
-    }
-    .icon-button.active {
-      color: var(--editor-toolbar-on-active-background);
-    }
-    select {
-      margin-top: -5px;
-    height: calc(var(--editor-toolbar-height) - 10px);
-    vertical-align: middle;
-    }
-    input[type="color"] {
-      height: calc(var(--editor-toolbar-height) - 15px);
-      -webkit-appearance: none;
-      border: none;
-      width: 22px;
-    }
-    input[type="color"]::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-    input[type="color"]::-webkit-color-swatch {
-      border: none;
-    }
-  `;
-__decorateClass$3([
-  property()
-], RichTextEditor.prototype, "content", 2);
-__decorateClass$3([
-  state()
-], RichTextEditor.prototype, "root", 2);
-RichTextEditor = __decorateClass$3([
-  customElement("rich-text-editor-block")
-], RichTextEditor);
-function toolbar(shadowRoot, selection, command) {
-  const tags = [];
-  if (selection?.type === "Range") {
-    let parentNode = selection?.baseNode;
-    if (parentNode) {
-      const checkNode = () => {
-        const parentTagName = parentNode?.tagName?.toLowerCase()?.trim();
-        if (parentTagName) tags.push(parentTagName);
-      };
-      while (parentNode != null) {
-        checkNode();
-        parentNode = parentNode?.parentNode;
-      }
-    }
-  }
-  const commands = [
-    {
-      icon: "format_clear",
-      command: "removeFormat"
-    },
-    {
-      icon: "format_bold",
-      command: "bold",
-      active: tags.includes("b")
-    },
-    {
-      icon: "format_italic",
-      command: "italic",
-      active: tags.includes("i")
-    },
-    {
-      icon: "format_underlined",
-      command: "underline",
-      active: tags.includes("u")
-    },
-    {
-      icon: "format_align_left",
-      command: "justifyleft"
-    },
-    {
-      icon: "format_align_center",
-      command: "justifycenter"
-    },
-    {
-      icon: "format_align_right",
-      command: "justifyright"
-    },
-    {
-      icon: "format_list_numbered",
-      command: "insertorderedlist",
-      active: tags.includes("ol")
-    },
-    {
-      icon: "format_list_bulleted",
-      command: "insertunorderedlist",
-      active: tags.includes("ul")
-    },
-    {
-      icon: "format_quote",
-      command: "formatblock",
-      command_value: "blockquote"
-    },
-    {
-      icon: "format_indent_decrease",
-      command: "outdent"
-    },
-    {
-      icon: "format_indent_increase",
-      command: "indent"
-    },
-    tags.includes("a") ? { icon: "link_off", command: "unlink" } : {
-      icon: "add_link",
-      command: () => {
-        const newLink = prompt("Write the URL here", "http://");
-        if (newLink && newLink != "" && newLink != "http://") {
-          command("createlink", newLink);
-        }
-      }
-    },
-    {
-      icon: "format_color_text",
-      command: () => {
-        const input = shadowRoot.querySelector("#fg");
-        input.addEventListener("input", (e) => {
-          const val = e.target.value;
-          command("forecolor", val);
-        });
-        input.click();
-      },
-      type: "color"
-    },
-    {
-      icon: "border_color",
-      command: () => {
-        const input = shadowRoot.querySelector("#bg");
-        input.addEventListener("input", (e) => {
-          const val = e.target.value;
-          command("backcolor", val);
-        });
-        input.click();
-      },
-      type: "color"
-    },
-    {
-      icon: "format_size",
-      command: "fontsize",
-      values: [
-        { name: "Font Size", value: "--" },
-        { name: "Very Small", value: "1" },
-        { name: "Small", value: "2" },
-        { name: "Normal", value: "3" },
-        { name: "Medium Large", value: "4" },
-        { name: "Large", value: "5" },
-        { name: "Very Large", value: "6" },
-        { name: "Maximum", value: "7" }
-      ]
-    },
-    {
-      icon: "undo",
-      command: "undo"
-    },
-    {
-      icon: "redo",
-      command: "redo"
-    },
-    {
-      icon: "content_cut",
-      command: "cut"
-    },
-    {
-      icon: "content_copy",
-      command: "copy"
-    },
-    {
-      icon: "content_paste",
-      command: "paste"
-    }
-  ];
-  return html$1`
-    ${commands.map((n) => {
-    if (n.values) {
-      return html$1`
-          <select
-            id="${n.icon}"
-            @change=${(e) => {
-        const val = e.target.value;
-        if (val === "--") {
-          command("removeFormat", void 0);
-        } else if (typeof n.command === "string") {
-          command(n.command, val);
-        }
-      }}
-          >
-            ${n.values.map(
-        (v) => html$1`<option value=${v.value}>${v.name}</option>`
-      )}
-          </select>
-        `;
-    } else {
-      return html$1`
-          <button
-            class="icon-button ${n.active ? "active" : ""}"
-            @click=${() => {
-        if (typeof n.command === "string") {
-          command(n.command, n.command_value);
-        } else {
-          n.command();
-        }
-      }}
-            .innerHTML=${svgIcons[n.icon]}
-          ></button>
-        `;
-    }
-  })}
-  `;
-}
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
-  return result;
-};
-let RichTextContainer = class extends BaseElementBlock {
-  constructor() {
-    super();
-    this.isViewMode = false;
-    this.dragOverSituation = false;
-    this.wrapperStyle = {};
-    this.editing = false;
-    this.handleKeyDown = (e) => {
-      if (e.key === "Escape" && this.editing) {
-        this.editing = false;
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    this.handleDoubleClick = () => {
-      this.editing = true;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("keydown", this.handleKeyDown);
-  }
-  handleCodeEditorChange(value) {
-    if (!this.isViewMode) {
-      const serializedValue = JSON.stringify(value);
-      executeHandler(
-        this.component,
-        /* js */
-        `
-                  try {
-                      const selectedComponent = Utils.first($selectedComponents);
-                      updateInput(selectedComponent, "value", "string", ${serializedValue}, null);
-                  } catch (error) {
-                      console.error(error);
-                  }
-                `,
-        {}
-      );
-    }
-  }
-  renderComponent() {
-    return html`
-    
-      <div ${ref(this.inputRef)}
-     class="${`drop-${this.component.uuid}`}"
-      style=${styleMap({
-      width: this.editing ? "auto" : this.getStyles().width,
-      display: "block"
-    })}
-      >
-        ${this.editing && !this.isViewMode ? html`
-              <rich-text-editor-block
-              @content-change=${(e) => {
-      this.handleCodeEditorChange(e.detail.value);
-    }}
-                .content=${this.inputHandlersValue.value}
-              ></rich-text-editor-block>
-            ` : html`
-              <p @dblclick=${this.handleDoubleClick}>
-                ${unsafeHTML(this.inputHandlersValue.value)}
-              </p>
-            `}
-      </div>
-    `;
-  }
-  firstUpdated(_changedProperties) {
-  }
-};
-__decorateClass$2([
-  property({ type: Object })
-], RichTextContainer.prototype, "component", 2);
-__decorateClass$2([
-  property({ type: Object })
-], RichTextContainer.prototype, "item", 2);
-__decorateClass$2([
-  property({ type: Object })
-], RichTextContainer.prototype, "draggingComponentInfo", 2);
-__decorateClass$2([
-  property({ type: Boolean })
-], RichTextContainer.prototype, "isViewMode", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "dragOverSituation", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "selectedComponent", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "hoveredComponent", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "wrapperStyle", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "components", 2);
-__decorateClass$2([
-  state()
-], RichTextContainer.prototype, "editing", 2);
-RichTextContainer = __decorateClass$2([
-  customElement("rich-text-block")
-], RichTextContainer);
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
-};
-try {
-  await import('@nuralyui/document');
-} catch (error) {
-  console.warn("[@nuralyui/document] Package not found or failed to load.");
-}
-let DocumentBlock = class extends BaseElementBlock {
-  renderComponent() {
-    const documentStyles = this.getStyles() || {};
-    const documentStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
-      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
-    ) : {};
-    const src = this.inputHandlersValue?.src;
-    const type = this.inputHandlersValue?.type ?? "pdf";
-    const previewable = this.inputHandlersValue?.previewable ?? false;
-    if (!src) {
-      return html`
-        <div
-          ${ref(this.inputRef)}
-          class="document-placeholder"
-          style=${styleMap({
-        ...this.getStyles(),
-        width: documentStyleHandlers?.width || documentStyles?.width || "100%",
-        height: documentStyleHandlers?.height || documentStyles?.height || "200px"
-      })}
-          @click=${(e) => this.executeEvent("onClick", e)}
-        >
-          <nr-icon name="file-text"></nr-icon>
-          <nr-label>No document source</nr-label>
-        </div>
-      `;
-    }
-    return html`
-      <nr-document-viewer
-        ${ref(this.inputRef)}
-        style=${styleMap({
-      ...this.getStyles()
-    })}
-        .src=${src}
-        .type=${type}
-        .previewable=${previewable}
-        .width=${documentStyleHandlers?.width || documentStyles?.width}
-        .height=${documentStyleHandlers?.height || documentStyles?.height}
-        @click=${(e) => this.executeEvent("onClick", e)}
-        @load=${(e) => this.executeEvent("onLoad", e, { src })}
-        @error=${(e) => this.executeEvent("onError", e, { src, error: "Failed to load document" })}
-      >
-      </nr-document-viewer>
-    `;
-  }
-};
-DocumentBlock.styles = [css`
-    .document-placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: #64748b;
-      min-height: 200px;
-      border-radius: 8px;
-      border: 2px dashed #cbd5e1;
-      gap: 12px;
-    }
-    .document-placeholder nr-icon {
-      --nuraly-icon-size: 48px;
-    }
-  `];
-__decorateClass$1([
-  property({ type: Object })
-], DocumentBlock.prototype, "component", 2);
-DocumentBlock = __decorateClass$1([
-  customElement("document-block")
-], DocumentBlock);
-
 var VariableScope = /* @__PURE__ */ ((VariableScope2) => {
   VariableScope2["LOCAL"] = "local";
   VariableScope2["GLOBAL"] = "global";
@@ -6416,7 +1453,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const STUDIO_APP_UUID = "1";
-let MicroApp = class extends LitElement$1 {
+let MicroApp = class extends LitElement {
   constructor() {
     super();
     this.subscription = new Subscription();