@djvlc/runtime-web 1.1.4 → 1.1.5

package/dist/runtime.esm.js

@@ -1,4 +1,4 @@
-const RUNTIME_VERSION = "1.1.3";
+const RUNTIME_VERSION = "1.1.4";
 var ErrorCode = /* @__PURE__ */ ((ErrorCode2) => {
   ErrorCode2["SYSTEM_INTERNAL_ERROR"] = "SYSTEM_INTERNAL_ERROR";
   ErrorCode2["SYSTEM_SERVICE_UNAVAILABLE"] = "SYSTEM_SERVICE_UNAVAILABLE";
@@ -2338,7 +2338,7 @@ var $ = v, x = class {
     if (this.depth++, this.depth > (this.options.maxDepth ?? 100)) throw new h("", "Maximum recursion depth exceeded");
     if (Date.now() - this.startTime > (this.options.timeout ?? 1e3)) throw new h("", "Expression evaluation timeout");
   }
-}, I = class {
+}, j = class {
   constructor(t3 = {}) {
     this.astCache = /* @__PURE__ */ new Map(), this.options = { cacheAST: true, maxCacheSize: 1e3, ...t3 }, this.evaluator = new E(t3);
   }
@@ -2421,7 +2421,7 @@ var $ = v, x = class {
   log(t3, e, ...n) {
     this.options.logger ? this.options.logger[t3](e, ...n) : this.options.debug;
   }
-}, j = class {
+}, I = class {
   constructor(t3) {
     this.loadingCount = 0, this.loadingElement = null, this.clipboard = { write: async (t4) => {
       try {
@@ -2831,7 +2831,7 @@ var $ = v, x = class {
     this.log("debug", "Renderer initialized");
   }
   render(t3, e) {
-    this.container = e, this.log("debug", "Rendering page", t3.pageId), this.cleanup(), e.innerHTML = "", this.applyPageConfig(t3, e), this.initializePageState(t3);
+    this.container = e, this.log("debug", "Rendering page", t3.pageId), this.cleanup(), e.innerHTML = "", this.applyPageConfig(t3, e), this.applySEO(t3), this.initializePageState(t3);
     const n = this.renderNode(t3.root);
     n && e.appendChild(n), this.log("info", `Page rendered with root component: ${t3.root.componentType}`);
   }
@@ -2846,7 +2846,7 @@ var $ = v, x = class {
     return { ...this.expressionContext };
   }
   destroy() {
-    this.cleanup(), this.container && (this.container.innerHTML = ""), this.log("debug", "Renderer destroyed");
+    this.cleanup(), this.container && (this.container.innerHTML = ""), document.querySelectorAll('[data-djvlc="true"]').forEach((t3) => t3.remove()), this.log("debug", "Renderer destroyed");
   }
   cleanup() {
     this.componentEventListeners.forEach((t3, e) => {
@@ -3040,6 +3040,30 @@ var $ = v, x = class {
     const e = [];
     return void 0 !== t3.x && e.push(`left: ${t3.x}px`), void 0 !== t3.y && e.push(`top: ${t3.y}px`), void 0 !== t3.width && e.push(`width: ${t3.width}px`), void 0 !== t3.height && e.push(`height: ${t3.height}px`), void 0 !== t3.rotation && e.push(`transform: rotate(${t3.rotation}deg)`), void 0 !== t3.zIndex && e.push(`z-index: ${t3.zIndex}`), e.join("; ");
   }
+  applySEO(t3) {
+    const e = t3.seo, n = t3.meta, s = (e == null ? void 0 : e.title) || (n == null ? void 0 : n.title);
+    s && (document.title = s);
+    const i2 = (e == null ? void 0 : e.description) || (n == null ? void 0 : n.description);
+    i2 && this.t("description", i2), (e == null ? void 0 : e.keywords) && e.keywords.length > 0 && this.t("keywords", e.keywords.join(",")), (e == null ? void 0 : e.canonicalUrl) && this.i("canonical", e.canonicalUrl), false === (e == null ? void 0 : e.indexable) && this.t("robots", "noindex, nofollow"), s && this.o("og:title", s), i2 && this.o("og:description", i2), (e == null ? void 0 : e.ogImage) && this.o("og:image", e.ogImage), (e == null ? void 0 : e.ogType) && this.o("og:type", e.ogType), (e == null ? void 0 : e.canonicalUrl) && this.o("og:url", e.canonicalUrl), (e == null ? void 0 : e.structuredData) && Object.keys(e.structuredData).length > 0 && this.l(e.structuredData), this.log("debug", "SEO applied", { title: s, description: i2, keywords: e == null ? void 0 : e.keywords });
+  }
+  t(t3, e) {
+    let n = document.querySelector(`meta[name="${t3}"]`);
+    n || (n = document.createElement("meta"), n.name = t3, document.head.appendChild(n)), n.content = e, n.setAttribute("data-djvlc", "true");
+  }
+  o(t3, e) {
+    let n = document.querySelector(`meta[property="${t3}"]`);
+    n || (n = document.createElement("meta"), n.setAttribute("property", t3), document.head.appendChild(n)), n.content = e, n.setAttribute("data-djvlc", "true");
+  }
+  i(t3, e) {
+    let n = document.querySelector(`link[rel="${t3}"][data-djvlc]`);
+    n || (n = document.createElement("link"), n.rel = t3, document.head.appendChild(n)), n.href = e, n.setAttribute("data-djvlc", "true");
+  }
+  l(t3) {
+    const e = document.querySelector('script[type="application/ld+json"][data-djvlc]');
+    e && e.remove();
+    const n = document.createElement("script");
+    n.type = "application/ld+json", n.setAttribute("data-djvlc", "true"), n.textContent = JSON.stringify(t3), document.head.appendChild(n);
+  }
   applyPageConfig(t3, e) {
     e.classList.add("djvlc-page"), e.setAttribute("data-page-id", t3.pageId), e.setAttribute("data-page-version", t3.pageVersion), e.setAttribute("data-schema-version", t3.schemaVersion);
     const n = t3.config;
@@ -3217,7 +3241,7 @@ function L(t3, e, n) {
   Object.defineProperty(t3, e, { get() {
     return this[s] ?? n;
   }, set(t4) {
-    this[s] = t4, "function" == typeof this.t && this.t();
+    this[s] = t4, "function" == typeof this.u && this.u();
   }, configurable: true, enumerable: true });
 }
 var O = class extends HTMLElement {
@@ -3225,9 +3249,9 @@ var O = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.content ?? "请输入文本", e = this.fontSize ?? 14, n = this.textAlign ?? "left", s = this.fontWeight ?? 400, i2 = this.lineHeight ?? 1.6, r2 = this.color ?? "#333333";
     this.shadowRoot.innerHTML = `
@@ -3247,10 +3271,10 @@ var O = class extends HTMLElement {
           white-space: pre-wrap;
         }
       </style>
-      <p class="text">${this.i(t3)}</p>
+      <p class="text">${this.p(t3)}</p>
     `;
   }
-  i(t3) {
+  p(t3) {
     return t3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 };
@@ -3260,9 +3284,9 @@ var P = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.src ?? "", e = this.alt ?? "", n = this.objectFit ?? "cover", s = this.borderRadius ?? 0, i2 = this.placeholder ?? "";
     this.shadowRoot.innerHTML = `
@@ -3282,10 +3306,10 @@ var P = class extends HTMLElement {
           border-radius: ${s}px;
         }
       </style>
-      ${t3 ? `<img src="${this.o(t3)}" alt="${this.o(e)}" loading="lazy" />` : `<div class="placeholder">${i2 || "暂无图片"}</div>`}
+      ${t3 ? `<img src="${this.m(t3)}" alt="${this.m(e)}" loading="lazy" />` : `<div class="placeholder">${i2 || "暂无图片"}</div>`}
     `;
   }
-  o(t3) {
+  m(t3) {
     return t3.replace(/"/g, "&quot;").replace(/</g, "&lt;");
   }
 };
@@ -3295,9 +3319,9 @@ var V = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.text ?? "按钮", e = this.type ?? "primary", n = this.size ?? "middle", s = this.block ?? false, i2 = this.shape ?? "default", r2 = this.disabled ?? false, o2 = { small: { h: 28, px: 12, fs: 12 }, middle: { h: 36, px: 16, fs: 14 }, large: { h: 44, px: 20, fs: 16 } }, a2 = o2[n] || o2.middle, c2 = { primary: { bg: "#1677ff", fg: "#fff", border: "#1677ff", hoverBg: "#4096ff" }, default: { bg: "#fff", fg: "#333", border: "#d9d9d9", hoverBg: "#f5f5f5" }, danger: { bg: "#ff4d4f", fg: "#fff", border: "#ff4d4f", hoverBg: "#ff7875" }, link: { bg: "transparent", fg: "#1677ff", border: "transparent", hoverBg: "transparent" } }, h2 = c2[e] || c2.primary, l2 = "round" === i2 ? a2.h / 2 + "px" : "circle" === i2 ? "50%" : "6px";
     this.shadowRoot.innerHTML = `
@@ -3323,14 +3347,14 @@ var V = class extends HTMLElement {
           transform: scale(0.97);
         }
       </style>
-      <button ${r2 ? "disabled" : ""}>${this.i(t3)}</button>
+      <button ${r2 ? "disabled" : ""}>${this.p(t3)}</button>
     `;
     const d2 = this.shadowRoot.querySelector("button");
     d2 == null ? void 0 : d2.addEventListener("click", (t4) => {
       r2 || this.dispatchEvent(new CustomEvent("onClick", { detail: { originalEvent: t4 }, bubbles: true, composed: true }));
     });
   }
-  i(t3) {
+  p(t3) {
     return t3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
@@ -3340,9 +3364,9 @@ var B = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.name ?? "star", e = this.size ?? 16, n = this.color ?? "currentColor";
     this.shadowRoot.innerHTML = `
@@ -3360,9 +3384,9 @@ var U = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.href ?? "#", e = this.text ?? "链接", n = this.target ?? "_self", s = this.color ?? "#1677ff", i2 = false !== this.underline;
     this.shadowRoot.innerHTML = `
@@ -3375,26 +3399,26 @@ var U = class extends HTMLElement {
         }
         a:hover { opacity: 0.8; }
       </style>
-      <a href="${t3}" target="${n}" rel="noopener noreferrer">${this.i(e)}</a>
+      <a href="${t3}" target="${n}" rel="noopener noreferrer">${this.p(e)}</a>
     `;
     const r2 = this.shadowRoot.querySelector("a");
     r2 == null ? void 0 : r2.addEventListener("click", (e2) => {
       this.dispatchEvent(new CustomEvent("onClick", { detail: { href: t3, originalEvent: e2 }, bubbles: true, composed: true }));
     });
   }
-  i(t3) {
+  p(t3) {
     return t3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
 L(U.prototype, "href", "#"), L(U.prototype, "text", "链接"), L(U.prototype, "target", "_self"), L(U.prototype, "color", "#1677ff"), L(U.prototype, "underline", true);
-var z = class extends HTMLElement {
+var _ = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.direction ?? "horizontal", e = this.color ?? "#e8e8e8", n = this.thickness ?? 1, s = this.dashed ?? false, i2 = this.text ?? "", r2 = s ? "dashed" : "solid";
     this.shadowRoot.innerHTML = "vertical" === t3 ? `
@@ -3424,23 +3448,23 @@ var z = class extends HTMLElement {
       `;
   }
 };
-function _(t3, e, n) {
+function z(t3, e, n) {
   const s = `__${e}`;
   Object.defineProperty(t3, e, { get() {
     return this[s] ?? n;
   }, set(t4) {
-    this[s] = t4, "function" == typeof this.t && this.t();
+    this[s] = t4, "function" == typeof this.u && this.u();
   }, configurable: true, enumerable: true });
 }
-L(z.prototype, "direction", "horizontal"), L(z.prototype, "color", "#e8e8e8"), L(z.prototype, "thickness", 1), L(z.prototype, "dashed", false), L(z.prototype, "text", "");
+L(_.prototype, "direction", "horizontal"), L(_.prototype, "color", "#e8e8e8"), L(_.prototype, "thickness", 1), L(_.prototype, "dashed", false), L(_.prototype, "text", "");
 var H = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.background ?? "transparent", e = this.overflow ?? "visible";
     this.shadowRoot.innerHTML = `
@@ -3463,15 +3487,15 @@ var H = class extends HTMLElement {
     `;
   }
 };
-_(H.prototype, "direction", "column"), _(H.prototype, "align", "stretch"), _(H.prototype, "justify", "flex-start"), _(H.prototype, "gap", 0), _(H.prototype, "padding", 0), _(H.prototype, "background", "transparent"), _(H.prototype, "overflow", "visible");
+z(H.prototype, "direction", "column"), z(H.prototype, "align", "stretch"), z(H.prototype, "justify", "flex-start"), z(H.prototype, "gap", 0), z(H.prototype, "padding", 0), z(H.prototype, "background", "transparent"), z(H.prototype, "overflow", "visible");
 var F = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.gutter ?? 0, e = this.align ?? "stretch", n = this.justify ?? "flex-start", s = false !== this.wrap;
     this.shadowRoot.innerHTML = `
@@ -3491,15 +3515,15 @@ var F = class extends HTMLElement {
     `;
   }
 };
-_(F.prototype, "gutter", 0), _(F.prototype, "align", "stretch"), _(F.prototype, "justify", "flex-start"), _(F.prototype, "wrap", true);
+z(F.prototype, "gutter", 0), z(F.prototype, "align", "stretch"), z(F.prototype, "justify", "flex-start"), z(F.prototype, "wrap", true);
 var q = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = Math.min(24, Math.max(1, this.span ?? 24)), e = Math.min(23, Math.max(0, this.offset ?? 0)), n = (t3 / 24 * 100).toFixed(4), s = e > 0 ? `${(e / 24 * 100).toFixed(4)}%` : "0";
     this.shadowRoot.innerHTML = `
@@ -3517,15 +3541,15 @@ var q = class extends HTMLElement {
     `;
   }
 };
-_(q.prototype, "span", 24), _(q.prototype, "offset", 0);
+z(q.prototype, "span", 24), z(q.prototype, "offset", 0);
 var K = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.size ?? 16, e = "horizontal" === (this.direction ?? "vertical");
     this.shadowRoot.innerHTML = `
@@ -3540,23 +3564,23 @@ var K = class extends HTMLElement {
     `;
   }
 };
-function Q(t3, e, n) {
+function J(t3, e, n) {
   const s = `__${e}`;
   Object.defineProperty(t3, e, { get() {
     return this[s] ?? n;
   }, set(t4) {
-    this[s] = t4, "function" == typeof this.t && this.t();
+    this[s] = t4, "function" == typeof this.u && this.u();
   }, configurable: true, enumerable: true });
 }
-_(K.prototype, "size", 16), _(K.prototype, "direction", "vertical");
-var J = class extends HTMLElement {
+z(K.prototype, "size", 16), z(K.prototype, "direction", "vertical");
+var Q = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = "horizontal" === (this.layout ?? "vertical");
     this.shadowRoot.innerHTML = `
@@ -3592,18 +3616,18 @@ function W(t3, e, n) {
   Object.defineProperty(t3, e, { get() {
     return this[s] ?? n;
   }, set(t4) {
-    this[s] = t4, "function" == typeof this.t && this.t();
+    this[s] = t4, "function" == typeof this.u && this.u();
   }, configurable: true, enumerable: true });
 }
-Q(J.prototype, "layout", "vertical"), Q(J.prototype, "labelWidth", 80), Q(J.prototype, "labelAlign", "right"), Q(J.prototype, "disabled", false);
+J(Q.prototype, "layout", "vertical"), J(Q.prototype, "labelWidth", 80), J(Q.prototype, "labelAlign", "right"), J(Q.prototype, "disabled", false);
 var Y = class extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.src ?? "", e = this.size ?? "cover", n = this.position ?? "center", s = this.repeat ?? "no-repeat", i2 = this.opacity ?? 1;
     this.shadowRoot.innerHTML = `
@@ -3642,7 +3666,7 @@ function G(t3, e, n) {
   Object.defineProperty(t3, e, { get() {
     return this[s] ?? n;
   }, set(t4) {
-    this[s] = t4, "function" == typeof this.t && this.t();
+    this[s] = t4, "function" == typeof this.u && this.u();
   }, configurable: true, enumerable: true });
 }
 W(Y.prototype, "src", ""), W(Y.prototype, "size", "cover"), W(Y.prototype, "position", "center"), W(Y.prototype, "repeat", "no-repeat"), W(Y.prototype, "opacity", 1);
@@ -3651,7 +3675,7 @@ var Z = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
   open() {
     this.visible = true;
@@ -3659,7 +3683,7 @@ var Z = class extends HTMLElement {
   close() {
     this.visible = false;
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.title ?? "", e = this.content ?? "", n = this.variant ?? "center", s = this.visible ?? false, i2 = false !== this.showClose, r2 = false !== this.showConfirm, o2 = this.showCancel ?? false, a2 = this.confirmText ?? "确定", c2 = this.cancelText ?? "取消", h2 = false !== this.maskClosable, l2 = this.maskColor ?? "#000000", d2 = this.maskOpacity ?? 50, u = this.widthPercent ?? 80, p2 = this.borderRadius ?? 12, f2 = this.backgroundColor ?? "#ffffff", m2 = this.backgroundImage ?? "", g2 = "bottom" === n ? "flex-end" : "center", y2 = "fullscreen" === n ? "100%" : `${u}%`, b2 = "fullscreen" === n ? "100%" : "480px", w2 = "fullscreen" === n ? "0" : "bottom" === n ? `${p2}px ${p2}px 0 0` : `${p2}px`, v2 = m2 ? `background-image: url(${m2}); background-size: cover; background-position: center;` : `background: ${f2};`;
     this.shadowRoot.innerHTML = `
@@ -3743,33 +3767,33 @@ var Z = class extends HTMLElement {
         <div class="mask"></div>
         <div class="dialog">
           <div class="header">
-            <h3 class="title">${this.i(t3)}</h3>
+            <h3 class="title">${this.p(t3)}</h3>
             <button class="close-btn">✕</button>
           </div>
           <div class="body">
-            ${this.i(e)}
+            ${this.p(e)}
             <slot></slot>
           </div>
           <div class="footer">
-            <button class="btn btn-cancel">${this.i(c2)}</button>
-            <button class="btn btn-confirm">${this.i(a2)}</button>
+            <button class="btn btn-cancel">${this.p(c2)}</button>
+            <button class="btn btn-confirm">${this.p(a2)}</button>
           </div>
         </div>
       </div>
     `;
     const $2 = this.shadowRoot.querySelector(".mask"), x2 = this.shadowRoot.querySelector(".close-btn"), k2 = this.shadowRoot.querySelector(".btn-cancel"), S2 = this.shadowRoot.querySelector(".btn-confirm");
-    h2 && ($2 == null ? void 0 : $2.addEventListener("click", () => this.l())), x2 == null ? void 0 : x2.addEventListener("click", () => this.l()), k2 == null ? void 0 : k2.addEventListener("click", () => this.u()), S2 == null ? void 0 : S2.addEventListener("click", () => this.p());
+    h2 && ($2 == null ? void 0 : $2.addEventListener("click", () => this.v())), x2 == null ? void 0 : x2.addEventListener("click", () => this.v()), k2 == null ? void 0 : k2.addEventListener("click", () => this.$()), S2 == null ? void 0 : S2.addEventListener("click", () => this.k());
   }
-  l() {
+  v() {
     this.visible = false, this.dispatchEvent(new CustomEvent("onClose", { detail: {}, bubbles: true, composed: true }));
   }
-  u() {
+  $() {
     this.visible = false, this.dispatchEvent(new CustomEvent("onCancel", { detail: {}, bubbles: true, composed: true }));
   }
-  p() {
+  k() {
     this.visible = false, this.dispatchEvent(new CustomEvent("onConfirm", { detail: {}, bubbles: true, composed: true }));
   }
-  i(t3) {
+  p(t3) {
     return t3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
@@ -3779,9 +3803,9 @@ var X = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.text ?? "", e = this.size ?? "default", n = this.color ?? "#1677ff", s = { small: 20, default: 32, large: 48 }, i2 = s[e] || s.default;
     this.shadowRoot.innerHTML = `
@@ -3812,9 +3836,9 @@ var tt = class extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.t();
+    this.u();
   }
-  t() {
+  u() {
     if (!this.shadowRoot) return;
     const t3 = this.description ?? "暂无数据", e = this.image ?? "", n = this.imageSize ?? 80, s = `
       <svg width="${n}" height="${n}" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -3847,7 +3871,7 @@ var tt = class extends HTMLElement {
   }
 };
 G(tt.prototype, "description", "暂无数据"), G(tt.prototype, "image", ""), G(tt.prototype, "imageSize", 80);
-var et = { "djvlc-text": O, "djvlc-image": P, "djvlc-button": V, "djvlc-icon": B, "djvlc-link": U, "djvlc-divider": z, "djvlc-container": H, "djvlc-row": F, "djvlc-col": q, "djvlc-spacer": K, "djvlc-form": J, "djvlc-background-image": Y, "djvlc-dialog": Z, "djvlc-loading": X, "djvlc-empty": tt };
+var et = { "djvlc-text": O, "djvlc-image": P, "djvlc-button": V, "djvlc-icon": B, "djvlc-link": U, "djvlc-divider": _, "djvlc-container": H, "djvlc-row": F, "djvlc-col": q, "djvlc-spacer": K, "djvlc-form": Q, "djvlc-background-image": Y, "djvlc-dialog": Z, "djvlc-loading": X, "djvlc-empty": tt };
 function nt(t3 = false) {
   for (const t4 of BUILTIN_COMPONENT_NAMES) {
     if (customElements.get(t4)) continue;
@@ -3927,7 +3951,7 @@ function ot(t3) {
 var at = class {
   constructor(t3) {
     if (this.container = null, !t3.pageId) throw new Error("pageId is required");
-    if (this.options = { channel: "prod", debug: false, enableSRI: true, env: "production", ...t3 }, this.logger = this.createLogger(), this.stateManager = new y(), this.eventBus = new w({ debug: t3.debug, logger: this.logger }), this.expressionEngine = new I({ debug: t3.debug, logger: this.logger }), !t3.userApiAdapter) throw new Error("userApiAdapter is required. Inject a UserApiAdapter implementation (e.g. from @djvlc/runtime-web or your host).");
+    if (this.options = { channel: "prod", debug: false, enableSRI: true, env: "production", ...t3 }, this.logger = this.createLogger(), this.stateManager = new y(), this.eventBus = new w({ debug: t3.debug, logger: this.logger }), this.expressionEngine = new j({ debug: t3.debug, logger: this.logger }), !t3.userApiAdapter) throw new Error("userApiAdapter is required. Inject a UserApiAdapter implementation (e.g. from @djvlc/runtime-web or your host).");
     this.userApiAdapter = t3.userApiAdapter, this.pageLoader = new p({ apiBaseUrl: t3.apiBaseUrl, userApiAdapter: this.userApiAdapter, channel: t3.channel, previewToken: t3.previewToken, headers: t3.headers, logger: this.logger }), this.componentLoader = new m({ cdnBaseUrl: t3.cdnBaseUrl, enableSRI: t3.enableSRI, headers: t3.headers, logger: this.logger });
     const e = this.safeParseHost(t3.cdnBaseUrl), n = this.safeParseHost(t3.apiBaseUrl);
     this.assetLoader = new g({ cdnHosts: e ? [e] : [], apiHosts: n ? [n] : [] }), this.securityManager = new A({ enableSRI: t3.enableSRI, cdnDomains: e ? [e] : [], apiDomains: n ? [n] : [], logger: this.logger }), this.log("info", "Runtime created", { version: rt });
@@ -4054,7 +4078,7 @@ var at = class {
     return t3;
   }
   initHostApi(t3) {
-    this.hostApi = new j({ userApiAdapter: this.userApiAdapter, stateManager: this.stateManager, eventBus: this.eventBus, expressionEngine: this.expressionEngine, context: { pageId: t3.pageId, pageVersionId: t3.pageVersionId, runtimeVersion: rt, userId: this.options.userId, deviceId: this.options.deviceId, channel: this.options.channel, appId: this.options.appId || "", env: this.options.env || "production", isEditMode: false, isPreviewMode: t3.isPreview || false }, debug: this.options.debug, logger: this.logger });
+    this.hostApi = new I({ userApiAdapter: this.userApiAdapter, stateManager: this.stateManager, eventBus: this.eventBus, expressionEngine: this.expressionEngine, context: { pageId: t3.pageId, pageVersionId: t3.pageVersionId, runtimeVersion: rt, userId: this.options.userId, deviceId: this.options.deviceId, channel: this.options.channel, appId: this.options.appId || "", env: this.options.env || "production", isEditMode: false, isPreviewMode: t3.isPreview || false }, debug: this.options.debug, logger: this.logger });
   }
   initActionBridge() {
     this.actionBridge = new $({ executor: { executeAction: (t3, e) => this.hostApi.executeAction(t3, e), requestData: (t3, e) => this.hostApi.requestData(t3, e), navigate: (t3) => this.hostApi.navigate(t3), openDialog: (t3) => this.hostApi.openDialog(t3), closeDialog: () => this.hostApi.closeDialog(), showToast: (t3) => this.hostApi.showToast(t3), showLoading: (t3) => this.hostApi.showLoading(t3), hideLoading: () => this.hostApi.hideLoading(), track: (t3) => this.hostApi.track(t3), setState: (t3, e) => this.stateManager.setVariable(t3, e), getState: (t3) => this.stateManager.getVariable(t3), refreshData: (t3) => this.refreshData(t3) }, expressionEngine: this.expressionEngine, debug: this.options.debug, logger: this.logger, onActionStart: (t3, e) => {