@nuraly/runtime 0.1.8 → 0.1.10

package/dist/{BaseElement-BNBn_IJk.js → BaseElement-pS6m_x6Q.js}

@@ -2822,13 +2822,6 @@ function createPageFunctions() {
   };
 }
 
-function addTempApplication(uuid, components) {
-  $components.set({
-    ...$components.get(),
-    [uuid]: components
-  });
-}
-
 function setApplication(apps) {
   $applications.set(apps);
 }
@@ -3251,6 +3244,11 @@ ToastContainer = __decorateClass$4([
   customElement("toast-container")
 ], ToastContainer);
 
+const ToastContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  get ToastContainer () { return ToastContainer; }
+}, Symbol.toStringTag, { value: 'Module' }));
+
 let toastIdCounter = 0;
 function generateToastId() {
   return `toast-${Date.now()}-${++toastIdCounter}`;
@@ -4350,19 +4348,6 @@ function setContextMenuEvent(e) {
   $contextMenuEvent.set(e);
 }
 
-function addGeneratedComponents(structureComponent) {
-  structureComponent.forEach((component) => {
-    addComponentAction(
-      component,
-      getVar("global", "currentPage").value,
-      getVar("global", "currentEditingApplication").value.uuid
-    );
-  });
-  setTimeout(() => {
-    eventDispatcher.emit("component:refresh");
-  }, 1e3);
-}
-
 function addlogDebug({
   errors
 }) {
@@ -4459,6 +4444,142 @@ function registerComponents(components) {
   components.forEach((options) => ComponentRegistry.register(options));
 }
 
+const loadedComponents = /* @__PURE__ */ new Set();
+const loadingPromises = /* @__PURE__ */ new Map();
+const componentImports = {
+  // Layout components with @nuralyui dependencies
+  "grid-row-block": () => import('./Row-Bb95f5DI.js'),
+  "grid-col-block": () => import('./Col-B_wpWUcU.js'),
+  "panel-block": () => import('./Panel-CwzW9iuA.js'),
+  "tabs-block": () => import('./Tabs-BDKEv1jn.js'),
+  "card-block": () => import('./Card-B70c8NFb.js'),
+  // Input components with @nuralyui dependencies
+  "select-block": () => import('./Select-DqA08VYb.js'),
+  "button-block": () => import('./Button-BHAN7npC.js'),
+  "checkbox-block": () => import('./Checkbox-LYTIBAUV.js'),
+  "radio-button-block": () => import('./Radio-button-Sii5iveh.js'),
+  "color-picker-block": () => import('./colorpicker-DhB0AygJ.js'),
+  "date-picker-block": () => import('./DatePicker-BmEOONiA.js'),
+  "dropdown-block": () => import('./Dropdown-BRtHvDa3.js'),
+  "text-input-block": () => import('./TextInput-KI6r9xET.js'),
+  "number-input-block": () => import('./NumberInput-eOAk0-fb.js'),
+  "textarea-block": () => import('./Textarea-Bzs3jSUm.js'),
+  "slider-block": () => import('./Slider-B2_Qecjz.js'),
+  "file-upload-block": () => import('./FileUpload-BBgPcRag.js'),
+  "form-block": () => import('./Form-BLq6U3In.js'),
+  "icon-button-block": () => import('./iconbutton-DfnrRmmB.js'),
+  // Display components with @nuralyui dependencies
+  "table-block": () => import('./Table-dEma50kw.js'),
+  "icon-block": () => import('./Icon-_UiLblGb.js'),
+  "image-block": () => import('./Image-B_VERIvH.js'),
+  "divider-block": () => import('./Divider-etMTYU3d.js'),
+  "text-label-block": () => import('./TextLabel-DkV26yaL.js'),
+  "badge-block": () => import('./Badge-DzNZFKtC.js'),
+  "tag-block": () => import('./Tag-DMZ0mu8y.js'),
+  "video-block": () => import('./Video-CL1lgcvB.js'),
+  "code-block": () => import('./Code-BWbiciC8.js'),
+  // Navigation components
+  "menu-block": () => import('./Menu-CembLIjO.js'),
+  "link-block": () => import('./Link-xSrPxOLt.js'),
+  "embed-url-block": () => import('./EmbedURL-BwbJRnY1.js'),
+  // Advanced components
+  "ai-chat-block": () => import('./AIChat-km1IYaR-.js'),
+  "collapse-block": () => import('./Collapse-Dkw6Ner6.js'),
+  "collection-viewer": () => import('./Collections-D5rwMFbv.js'),
+  "ref-component-container-block": () => import('./RefComponent-ZxafRVhZ.js'),
+  "rich-text-block": () => import('./RichText-CgYXXC_a.js'),
+  "micro-app-block": () => import('./MicroApp-DI1kQwJk.js'),
+  // Utility components
+  "document-block": () => import('./Document-Cj-TmjAf.js'),
+  "vertical-container-block": () => import('./Container-DMNh5U4Y.js'),
+  "toast-container": () => Promise.resolve().then(() => ToastContainer$1)
+};
+async function loadComponent(tagName) {
+  if (loadedComponents.has(tagName)) {
+    return;
+  }
+  if (loadingPromises.has(tagName)) {
+    return loadingPromises.get(tagName);
+  }
+  const importFn = componentImports[tagName];
+  if (!importFn) {
+    console.warn(`[LazyLoader] No import found for component: ${tagName}`);
+    return;
+  }
+  const loadPromise = importFn().then(() => {
+    loadedComponents.add(tagName);
+    loadingPromises.delete(tagName);
+  }).catch((error) => {
+    console.warn(`[LazyLoader] Failed to load component ${tagName}:`, error);
+    loadingPromises.delete(tagName);
+  });
+  loadingPromises.set(tagName, loadPromise);
+  return loadPromise;
+}
+async function loadComponents(tagNames) {
+  await Promise.all(tagNames.map(loadComponent));
+}
+function isComponentLoaded(tagName) {
+  return loadedComponents.has(tagName);
+}
+function getAvailableComponents() {
+  return Object.keys(componentImports);
+}
+
+const componentTypeToTagName = {
+  [ComponentType.Select]: "select-block",
+  [ComponentType.IconButton]: "icon-button-block",
+  [ComponentType.ColorPicker]: "color-picker-block",
+  [ComponentType.NumberInput]: "number-input-block",
+  [ComponentType.TextInput]: "text-input-block",
+  [ComponentType.TextLabel]: "text-label-block",
+  [ComponentType.Button]: "button-block",
+  [ComponentType.Tabs]: "tabs-block",
+  [ComponentType.Menu]: "menu-block",
+  [ComponentType.Table]: "table-block",
+  [ComponentType.Container]: "vertical-container-block",
+  [ComponentType.Collection]: "collection-viewer",
+  [ComponentType.Checkbox]: "checkbox-block",
+  [ComponentType.DatePicker]: "date-picker-block",
+  [ComponentType.Divider]: "divider-block",
+  [ComponentType.Icon]: "icon-block",
+  [ComponentType.Image]: "image-block",
+  [ComponentType.RadioButton]: "radio-button-block",
+  [ComponentType.AI]: "ai-chat-block",
+  [ComponentType.MicroApp]: "micro-app-block",
+  [ComponentType.Collapse]: "collapse-block",
+  [ComponentType.Dropdown]: "dropdown-block",
+  [ComponentType.RefComponent]: "ref-component-container-block",
+  [ComponentType.Code]: "code-block",
+  [ComponentType.RichText]: "rich-text-block",
+  [ComponentType.EmbedURL]: "embed-url-block",
+  [ComponentType.Link]: "link-block",
+  [ComponentType.FileUpload]: "file-upload-block",
+  [ComponentType.Video]: "video-block",
+  [ComponentType.Document]: "document-block",
+  [ComponentType.Textarea]: "textarea-block",
+  [ComponentType.Badge]: "badge-block",
+  [ComponentType.Card]: "card-block",
+  [ComponentType.Tag]: "tag-block",
+  [ComponentType.Slider]: "slider-block",
+  [ComponentType.Panel]: "panel-block",
+  [ComponentType.GridRow]: "grid-row-block",
+  [ComponentType.GridCol]: "grid-col-block",
+  [ComponentType.Form]: "form-block"
+};
+async function preloadComponents(components) {
+  const tagNames = /* @__PURE__ */ new Set();
+  function collectTagNames(comps) {
+    for (const comp of comps) {
+      const tagName = componentTypeToTagName[comp?.component_type];
+      if (tagName) {
+        tagNames.add(tagName);
+      }
+    }
+  }
+  collectTagNames(components);
+  await Promise.all(Array.from(tagNames).map(loadComponent));
+}
 const selectTemplate = (props, isViewMode) => html`<select-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></select-block>`;
 const iconButtonTemplate = (props, isViewMode) => html`<icon-button-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></icon-button-block>`;
 const colorPickerTemplate = (props, isViewMode) => html`<color-picker-block .isViewMode=${isViewMode} .parentcomponent=${props.parent} .item=${props.item} .component=${props.component}></color-picker-block>`;
@@ -4597,6 +4718,17 @@ function getComponentTemplate(component, commonProps, isViewMode) {
 }
 function renderComponent(components, item, isViewMode, parent) {
   if (!components || !components.length) return html``;
+  preloadComponents(components);
+  return html`
+    ${components.map((component) => {
+    const commonProps = { item: { ...item }, component, parent: { ...parent } };
+    return renderComponentElement(component, commonProps, isViewMode);
+  })}
+  `;
+}
+async function renderComponentAsync(components, item, isViewMode, parent) {
+  if (!components || !components.length) return html``;
+  await preloadComponents(components);
   return html`
     ${components.map((component) => {
     const commonProps = { item: { ...item }, component, parent: { ...parent } };
@@ -4671,9 +4803,6 @@ function hasOnlyEmptyObjects(error) {
   );
 }
 
-const NO_EVENT_LISTENER = "";
-const EMPTY_STRING = "";
-
 setupChangeDetection();
 
 class EventDebouncer {
@@ -6497,4 +6626,4 @@ class BaseElementBlock extends EditorModeMixin(BaseElementCore) {
   }
 }
 
-export { $components as $, $componentWithChildren as A, $runtimeStyles as B, $runtimeValues as C, $componentRuntimeValuesById as D, ExecuteInstance as E, FRONT_API_URLS as F, $componentRuntimeValueByKey as G, $componentsByUUIDs as H, $runtimeStylescomponentStyleByID as I, getAllChildrenRecursive as J, getDirectChildren as K, $componentById as L, setComponentRuntimeValue as M, setComponentRuntimeValues as N, setcomponentRuntimeStyleAttribute as O, clearComponentRuntimeValues as P, clearComponentRuntimeValue as Q, RuntimeInstance as R, clearAllRuntimeValues as S, clearComponentRuntimeStyleAttributes as T, fillComponentChildren as U, fillApplicationComponents as V, extractChildresIds as W, extractAllChildrenIds as X, $applications as Y, $currentPage as Z, $contextMenuEvent as _, $hoveredComponent as a, validateComponentHandlers as a$, $microAppCurrentPage as a0, $applicationPages as a1, refreshPageStoreVar as a2, $context as a3, ViewMode as a4, $toasts as a5, $debug as a6, $providers as a7, executeHandler as a8, getContextFromComponent as a9, addlogDebug as aA, resetComponentDebug as aB, addComponentHandler as aC, deleteComponentActionHandler as aD, validateAndEmitErrors as aE, updatePageHandler as aF, deletePageHandler as aG, refreshPagesActionHandler as aH, loadOrRefreshApplications as aI, createApplicationAction as aJ, deleteApplicationAction as aK, addPermission as aL, invokeFunctionHandler as aM, loadFunctionsHandler as aN, renderComponent as aO, log as aP, setLogLevel as aQ, enableLogging as aR, enableBenchmarking as aS, LOG_LEVELS as aT, eventDispatcher as aU, copyCpmponentToClipboard as aV, pasteComponentFromClipboard as aW, traitCompoentFromSchema as aX, generateNuralyClipboardStructure as aY, RuntimeContextHelpers as aZ, validateHandlerCode as a_, compileHandlerFunction as aa, ComponentRegistry as ab, registerComponent as ac, registerComponents as ad, BaseElementBlock as ae, BaseElementCore as af, addComponentAction as ag, addComponentToCurrentPageAction as ah, deleteComponentAction as ai, moveDraggedComponent as aj, setCurrentComponentIdAction as ak, setDraggingComponentInfo as al, updateComponentName as am, updateComponentAttributes as an, deletePageAction as ao, setContextMenuEvent as ap, updatePageAction as aq, addPageToApplicationAction as ar, addTempApplication as as, setApplication as at, setPermissionMessage as au, updateApplication as av, closeCreateApplicationModalAction as aw, openEditorTab as ax, setCurrentEditorTab as ay, addGeneratedComponents as az, $hoveredComponentId as b, isForbiddenGlobal as b0, isForbiddenProperty as b1, isAllowedGlobal as b2, isForbiddenFunction as b3, getErrorMessage as b4, FORBIDDEN_GLOBALS as b5, FORBIDDEN_PROPERTIES as b6, FORBIDDEN_FUNCTIONS as b7, VALIDATION_ERROR_MESSAGES as b8, formatValidationErrors as b9, getNestedAttribute as ba, hasOnlyEmptyObjects as bb, GenerateName as bc, showToast as bd, hideToast as be, clearAllToasts as bf, showSuccess as bg, showError as bh, showWarning as bi, showInfo as bj, NO_EVENT_LISTENER as bk, EMPTY_STRING as bl, ToastContainer as bm, getInitPlatform as bn, $showShareApplicationModal as c, $permissionsState as d, $applicationPermission as e, $currentApplication as f, updateApplicationActionHandler as g, $showCreateApplicationModal as h, $editorState as i, $environment as j, addPageHandler as k, $currentPageId as l, $currentPageViewPort as m, $resizing as n, $showBorder as o, $pageSize as p, $pages as q, removeComponentToCurrentPageAction as r, $pageZoom as s, EditorInstance as t, updateComponentHandler as u, RuntimeHelpers as v, $applicationComponents as w, $selectedComponent as x, $currentComponentId as y, $draggingComponentInfo as z };
+export { $components as $, $componentWithChildren as A, $runtimeStyles as B, $runtimeValues as C, $componentRuntimeValuesById as D, ExecuteInstance as E, FRONT_API_URLS as F, $componentRuntimeValueByKey as G, $componentsByUUIDs as H, $runtimeStylescomponentStyleByID as I, getAllChildrenRecursive as J, getDirectChildren as K, $componentById as L, setComponentRuntimeValue as M, setComponentRuntimeValues as N, setcomponentRuntimeStyleAttribute as O, clearComponentRuntimeValues as P, clearComponentRuntimeValue as Q, RuntimeInstance as R, clearAllRuntimeValues as S, clearComponentRuntimeStyleAttributes as T, fillComponentChildren as U, fillApplicationComponents as V, extractChildresIds as W, extractAllChildrenIds as X, $applications as Y, $currentPage as Z, $contextMenuEvent as _, $hoveredComponent as a, generateNuralyClipboardStructure as a$, $microAppCurrentPage as a0, $applicationPages as a1, refreshPageStoreVar as a2, $context as a3, ViewMode as a4, $toasts as a5, $debug as a6, $providers as a7, executeHandler as a8, getContextFromComponent as a9, addComponentHandler as aA, deleteComponentActionHandler as aB, validateAndEmitErrors as aC, updatePageHandler as aD, deletePageHandler as aE, refreshPagesActionHandler as aF, loadOrRefreshApplications as aG, createApplicationAction as aH, deleteApplicationAction as aI, addPermission as aJ, invokeFunctionHandler as aK, loadFunctionsHandler as aL, renderComponent as aM, renderComponentAsync as aN, loadComponent as aO, loadComponents as aP, isComponentLoaded as aQ, getAvailableComponents as aR, log as aS, setLogLevel as aT, enableLogging as aU, enableBenchmarking as aV, LOG_LEVELS as aW, eventDispatcher as aX, copyCpmponentToClipboard as aY, pasteComponentFromClipboard as aZ, traitCompoentFromSchema as a_, compileHandlerFunction as aa, ComponentRegistry as ab, registerComponent as ac, registerComponents as ad, BaseElementBlock as ae, BaseElementCore as af, addComponentAction as ag, addComponentToCurrentPageAction as ah, deleteComponentAction as ai, moveDraggedComponent as aj, setCurrentComponentIdAction as ak, setDraggingComponentInfo as al, updateComponentName as am, updateComponentAttributes as an, deletePageAction as ao, setContextMenuEvent as ap, updatePageAction as aq, addPageToApplicationAction as ar, setApplication as as, setPermissionMessage as at, updateApplication as au, closeCreateApplicationModalAction as av, openEditorTab as aw, setCurrentEditorTab as ax, addlogDebug as ay, resetComponentDebug as az, $hoveredComponentId as b, RuntimeContextHelpers as b0, validateHandlerCode as b1, validateComponentHandlers as b2, isForbiddenGlobal as b3, isForbiddenProperty as b4, isAllowedGlobal as b5, isForbiddenFunction as b6, getErrorMessage as b7, FORBIDDEN_GLOBALS as b8, FORBIDDEN_PROPERTIES as b9, FORBIDDEN_FUNCTIONS as ba, VALIDATION_ERROR_MESSAGES as bb, formatValidationErrors as bc, getNestedAttribute as bd, hasOnlyEmptyObjects as be, GenerateName as bf, showToast as bg, hideToast as bh, clearAllToasts as bi, showSuccess as bj, showError as bk, showWarning as bl, showInfo as bm, ToastContainer as bn, getInitPlatform as bo, getVar as bp, $showShareApplicationModal as c, $permissionsState as d, $applicationPermission as e, $currentApplication as f, updateApplicationActionHandler as g, $showCreateApplicationModal as h, $editorState as i, $environment as j, addPageHandler as k, $currentPageId as l, $currentPageViewPort as m, $resizing as n, $showBorder as o, $pageSize as p, $pages as q, removeComponentToCurrentPageAction as r, $pageZoom as s, EditorInstance as t, updateComponentHandler as u, RuntimeHelpers as v, $applicationComponents as w, $selectedComponent as x, $currentComponentId as y, $draggingComponentInfo as z };

package/dist/Button-BHAN7npC.js

@@ -0,0 +1,92 @@
+import { nothing, html, css } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ae as BaseElementBlock } from './BaseElement-pS6m_x6Q.js';
+import { ref } from 'lit/directives/ref.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(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([
+  property({ type: Object })
+], ButtonBlock.prototype, "component", 2);
+__decorateClass([
+  state()
+], ButtonBlock.prototype, "display", 2);
+ButtonBlock = __decorateClass([
+  customElement("button-block")
+], ButtonBlock);
+
+export { ButtonBlock };

package/dist/Button-DCqgsxrL.js

@@ -0,0 +1,80 @@
+import { B as p, n as c, A as e, o as h, b as d, i as b, c as $, d as f, t as y } from "./micro-app-entry-DiNqE6xi.js";
+var H = Object.defineProperty, V = Object.getOwnPropertyDescriptor, r = (i, l, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? V(l, t) : l, o = i.length - 1, u; o >= 0; o--)
+    (u = i[o]) && (n = (s ? u(l, t, n) : u(n)) || n);
+  return s && n && H(l, t, n), n;
+};
+try {
+  await import("@nuralyui/button");
+} catch {
+  console.warn("[@nuralyui/button] Package not found or failed to load. Button functionality may be limited.");
+}
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.display = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.registerCallback("value", () => {
+    });
+  }
+  renderComponent() {
+    const i = this.getStyles(), l = this.inputHandlersValue.icon ? [this.inputHandlersValue.icon] : [];
+    return d`
+            <nr-button
+              ${c(this.inputRef)}
+              size=${this.inputHandlersValue?.size || e}
+              type=${this.inputHandlersValue?.type || "default"}
+              .shape=${this.inputHandlersValue?.shape || e}
+              .disabled=${this.inputHandlersValue?.state == "disabled"}
+              .loading=${this.inputHandlersValue?.loading || !1}
+              .block=${this.inputHandlersValue?.block || !1}
+              .dashed=${this.inputHandlersValue?.dashed || !1}
+              .icon=${l}
+              .iconLeft=${this.inputHandlersValue?.iconLeft || e}
+              .iconRight=${this.inputHandlersValue?.iconRight || e}
+              .icons=${this.inputHandlersValue?.icons || e}
+              .iconPosition=${this.inputHandlersValue?.iconPosition || "left"}
+              .href=${this.inputHandlersValue?.href || e}
+              .target=${this.inputHandlersValue?.target || e}
+              .ripple=${this.inputHandlersValue?.ripple !== !1}
+              .buttonAriaLabel=${this.inputHandlersValue?.ariaLabel || e}
+              .htmlType=${this.inputHandlersValue?.htmlType || e}
+              @click=${(t) => {
+      this.executeEvent("onClick", t);
+    }}
+              @button-clicked=${(t) => {
+      this.executeEvent("onButtonClicked", t);
+    }}
+              @link-navigation=${(t) => {
+      this.executeEvent("onLinkNavigation", t);
+    }}
+              style=${h({
+      ...this.getStyles(),
+      width: i?.width,
+      height: i?.height
+    })}
+            >
+              ${this.inputHandlersValue.label ? this.inputHandlersValue.label : this.inputHandlersValue.iconOnly ? "" : "Button"}
+            </nr-button>
+    `;
+  }
+};
+a.styles = [
+  b`
+      :host {
+        --nuraly-button-icon-width: 19px;
+      }
+    `
+];
+r([
+  $({ type: Object })
+], a.prototype, "component", 2);
+r([
+  f()
+], a.prototype, "display", 2);
+a = r([
+  y("button-block")
+], a);
+export {
+  a as ButtonBlock
+};

package/dist/Card-B70c8NFb.js

@@ -0,0 +1,150 @@
+import { nothing, html, css } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ae as BaseElementBlock, $ as $components, aM as renderComponent, v as RuntimeHelpers, ap as setContextMenuEvent, ak as setCurrentComponentIdAction } from './BaseElement-pS6m_x6Q.js';
+import { ref } from 'lit/directives/ref.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(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([
+  property({ type: Object })
+], CardBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], CardBlock.prototype, "item", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CardBlock.prototype, "isViewMode", 2);
+__decorateClass([
+  state()
+], CardBlock.prototype, "childrenComponents", 2);
+__decorateClass([
+  state()
+], CardBlock.prototype, "dragOverSituation", 2);
+CardBlock = __decorateClass([
+  customElement("card-block")
+], CardBlock);
+
+export { CardBlock };

package/dist/Card-DhOCsGKC.js

@@ -0,0 +1,120 @@
+import { B as g, $ as C, A as c, n as h, o as u, g as m, r as v, R as b, b as d, a as f, s as w, i as y, c as p, d as $, t as V } from "./micro-app-entry-DiNqE6xi.js";
+var U = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (t, i, a, o) => {
+  for (var n = o > 1 ? void 0 : o ? D(i, a) : i, r = t.length - 1, e; r >= 0; r--)
+    (e = t[r]) && (n = (o ? e(i, a, n) : e(n)) || n);
+  return o && n && U(i, a, n), n;
+};
+try {
+  await import("@nuralyui/card");
+} catch {
+  console.warn("[@nuralyui/card] Package not found or failed to load.");
+}
+let s = class extends g {
+  constructor() {
+    super(...arguments), this.isViewMode = !1, this.childrenComponents = [], this.dragOverSituation = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateChildrenComponents();
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("component") && this.updateChildrenComponents();
+  }
+  updateChildrenComponents() {
+    this.childrenComponents = this.component?.childrenIds?.map((t) => C.get()[this.component?.application_id]?.find((i) => i.uuid === t)) ?? [];
+  }
+  renderView() {
+    const t = this.component?.style || {}, i = this.component?.input?.title?.value || this.inputHandlersValue?.title || "", a = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? !0, o = this.component?.input?.hoverable?.value ?? this.inputHandlersValue?.hoverable ?? !1, n = this.component?.input?.loading?.value ?? this.inputHandlersValue?.loading ?? !1, r = this.component?.input?.size?.value || this.inputHandlersValue?.size || "default";
+    return d`
+      <nr-card
+        id=${this.inputHandlersValue.id ?? c}
+        ${h(this.inputRef)}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        style=${u({
+      width: b.extractUnit(t?.width) === "%" ? "100%" : t?.width ?? "auto",
+      ...t
+    })}
+        class=${m({
+      "drag-over": this.dragOverSituation
+    })}
+        .header=${i}
+        .size=${r}
+        ?bordered=${a}
+        ?hoverable=${o}
+        ?loading=${n}
+        @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 ? v(this.childrenComponents.map((e) => ({ ...e, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : c}
+        </div>
+      </nr-card>
+    `;
+  }
+  renderComponent() {
+    const t = this.component?.style || {}, i = this.component?.input?.title?.value || this.inputHandlersValue?.title || "", a = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? !0, o = this.component?.input?.hoverable?.value ?? this.inputHandlersValue?.hoverable ?? !1, n = this.component?.input?.loading?.value ?? this.inputHandlersValue?.loading ?? !1, r = this.component?.input?.size?.value || this.inputHandlersValue?.size || "default";
+    return d`
+      ${this.isViewMode ? this.renderView() : d`
+            <nr-card
+              ${h(this.inputRef)}
+              data-component-uuid=${this.component?.uuid}
+              data-component-name=${this.component?.name}
+              style=${u(t)}
+              class=${m({
+      "drag-over": this.dragOverSituation
+    })}
+              .header=${i}
+              .size=${r}
+              ?bordered=${a}
+              ?hoverable=${o}
+              ?loading=${n}
+              @click=${(e) => {
+      f(null), this.executeEvent("onClick", e);
+    }}
+            >
+              <div slot="content" style=${u({ "min-height": this.childrenComponents.length ? "auto" : "100px" })}>
+                ${this.childrenComponents.length ? v(this.childrenComponents.map((e) => ({ ...e, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : d`
+                      <div
+                        style="padding: 20px; text-align: center; color: #999;"
+                        @click="${() => w(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>
+          `}
+    `;
+  }
+};
+s.styles = [y``];
+l([
+  p({ type: Object })
+], s.prototype, "component", 2);
+l([
+  p({ type: Object })
+], s.prototype, "item", 2);
+l([
+  p({ type: Boolean })
+], s.prototype, "isViewMode", 2);
+l([
+  $()
+], s.prototype, "childrenComponents", 2);
+l([
+  $()
+], s.prototype, "dragOverSituation", 2);
+s = l([
+  V("card-block")
+], s);
+export {
+  s as CardBlock
+};