dolphin-client 1.1.1 → 1.1.3

package/dist/dolphin-client.js

@@ -997,6 +997,82 @@ var DolphinModule = (() => {
     function escapeRegExp(str) {
       return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
+    function evaluateExpression(expr, ctx) {
+      if (!ctx || typeof ctx !== "object") return void 0;
+      try {
+        const safeCtx = new Proxy(ctx, {
+          has(target, prop) {
+            return true;
+          },
+          get(target, prop) {
+            if (typeof prop === "string") {
+              if (prop in target) return target[prop];
+              if (typeof globalThis !== "undefined" && prop in globalThis) return globalThis[prop];
+              if (typeof window !== "undefined" && prop in window) return window[prop];
+            }
+            return void 0;
+          }
+        });
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        return fn(safeCtx);
+      } catch {
+        return ctx[expr];
+      }
+    }
+    function splitByUnquotedChar(str, char) {
+      const parts = [];
+      let current = "";
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === char && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          parts.push(current);
+          current = "";
+        } else {
+          current += c;
+        }
+      }
+      parts.push(current);
+      return parts;
+    }
+    function splitFirstUnquotedColon(str) {
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === ":" && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          return [str.slice(0, i), str.slice(i + 1)];
+        }
+      }
+      return null;
+    }
     function resolveTemplate(el) {
       const template = el.getAttribute("data-rt-template");
       if (!template) return null;
@@ -1013,9 +1089,26 @@ var DolphinModule = (() => {
       if (!templateStr.includes("{#if") && !templateStr.includes("{#each")) {
         let result = templateStr;
         for (let key in context) {
-          const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          result = result.replace(new RegExp(`\\{\\{${escapedKey}\\}\\}`, "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
-        }
+          const escapedKey = key.replace(/[.*+?^$${}()|[\]\\]/g, "\\$&");
+          result = result.replace(new RegExp("\\{\\{" + escapedKey + "\\}}", "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
+        }
+        result = result.replace(/\{\{([\s\S]*?)\}\}/g, (match, expr) => {
+          const trimmed = expr.trim();
+          if (!trimmed) return "";
+          if (/^[a-zA-Z_$][a-zA-Z0-9_$]*(?:\??\.[a-zA-Z_$][a-zA-Z0-9_$]*)+$/.test(trimmed)) {
+            const parts = trimmed.split(/\??\./);
+            let val = context;
+            for (const part of parts) {
+              if (val === void 0 || val === null) {
+                val = void 0;
+                break;
+              }
+              val = val[part];
+            }
+            return val !== void 0 && val !== null ? val : "";
+          }
+          return match;
+        });
         return result;
       }
       try {
@@ -1135,7 +1228,9 @@ var DolphinModule = (() => {
       if (typeof document === "undefined") return html;
       try {
         const parser = new DOMParser();
-        const doc = parser.parseFromString(html, "text/html");
+        const hasBodyOrHtml = /<\s*(?:body|html)\b/i.test(html);
+        const parseString = hasBodyOrHtml ? html : `<body>${html}</body>`;
+        const doc = parser.parseFromString(parseString, "text/html");
         const body = doc.body;
         const sanitizeNode = (el) => {
           const tag = el.tagName.toLowerCase();
@@ -1249,7 +1344,7 @@ var DolphinModule = (() => {
         });
       }
     }
-    clientProto.setStoreState = function(storeName, key, val) {
+    clientProto.setStoreState = function(storeName, key, val, originEl) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
       if (!this.uiStores.has(storeName)) {
         this.uiStores.set(storeName, {});
@@ -1262,6 +1357,7 @@ var DolphinModule = (() => {
       if (typeof document !== "undefined") {
         const readElements = document.querySelectorAll(`[data-store-read="${storeName}.${key}"]`);
         readElements.forEach((el) => {
+          if (el === originEl) return;
           if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
             if (el.type === "checkbox") {
               el.checked = !!val;
@@ -1285,6 +1381,73 @@ var DolphinModule = (() => {
     };
     clientProto._scanStoreBinds = function() {
       if (typeof document === "undefined") return;
+      const storeElements = document.querySelectorAll("dolphin-store");
+      storeElements.forEach((el) => {
+        if (typeof el.getAttribute !== "function") return;
+        const storeName = el.getAttribute("name") || el.getAttribute("data-store");
+        if (!storeName) return;
+        const hasChildren = el.children && el.children.length > 0;
+        if (hasChildren) {
+          if (typeof el.setAttribute === "function") {
+            el.setAttribute("data-rt-bind", `store/${storeName}`);
+            el.setAttribute("data-rt-type", "context");
+          }
+        } else {
+          if (el.style) {
+            el.style.display = "none";
+          }
+        }
+        if (!hasChildren) {
+          const content = el.textContent ? el.textContent.trim() : "";
+          if (content && content.startsWith("{")) {
+            try {
+              const parsed = JSON.parse(content);
+              if (parsed && typeof parsed === "object") {
+                Object.keys(parsed).forEach((key) => {
+                  this.setStoreState(storeName, key, parsed[key]);
+                });
+              }
+            } catch (err) {
+              console.error(`[Dolphin Store Init Error] Failed to parse JSON inside <dolphin-store name="${storeName}">:`, err);
+            }
+          }
+        }
+        const templateSelector = el.getAttribute("template");
+        if (el.attributes) {
+          const excludeAttrs = ["name", "data-store", "style", "data-rt-bind", "data-rt-type", "template"];
+          Array.from(el.attributes).forEach((attr) => {
+            if (!excludeAttrs.includes(attr.name)) {
+              let val = attr.value;
+              if (val === "true") val = true;
+              else if (val === "false") val = false;
+              else if (val === "null") val = null;
+              else if (!isNaN(Number(val)) && val.trim() !== "") val = Number(val);
+              this.setStoreState(storeName, attr.name, val);
+            }
+          });
+        }
+        if (templateSelector && !hasChildren && el.parentNode && typeof document !== "undefined") {
+          const markerId = `_ds_${storeName}_${templateSelector.replace(/[^a-z0-9]/gi, "_")}`;
+          let wrapper = document.querySelector(`[data-ds-wired="${markerId}"]`);
+          if (!wrapper) {
+            wrapper = document.createElement("div");
+            wrapper.setAttribute("data-rt-bind", `store/${storeName}`);
+            wrapper.setAttribute("data-rt-template", templateSelector);
+            wrapper.setAttribute("data-ds-wired", markerId);
+            el.parentNode.insertBefore(wrapper, el.nextSibling);
+          }
+          if (typeof this._updateDOM === "function") {
+            this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
+            const currentStore = this.uiStores.get(storeName) || {};
+            this._updateDOM(`store/${storeName}`, currentStore);
+          }
+        }
+        if (hasChildren && typeof this._updateDOM === "function") {
+          this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
+          const currentStore = this.uiStores.get(storeName) || {};
+          this._updateDOM(`store/${storeName}`, currentStore);
+        }
+      });
       const writeEls = document.querySelectorAll("[data-store-write]");
       writeEls.forEach((el) => {
         const writeBind = el.getAttribute("data-store-write");
@@ -1337,20 +1500,49 @@ var DolphinModule = (() => {
           if (key) return ctx[key];
           return ctx;
         }
-        current = current.parentElement;
+        current = current.parentElement || current.parentNode;
       }
       return null;
     };
     clientProto._executeStoreAction = function(expression, element) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
+      const parentCtx = element && typeof this.getClosestContext === "function" ? this.getClosestContext(element) : null;
       const context = new Proxy({}, {
         has: (target, prop) => {
           return true;
         },
         get: (target, prop) => {
           if (typeof prop === "string") {
+            if (prop === "log") {
+              return (arg) => {
+                if (arg === void 0) {
+                  const allStores = {};
+                  this.uiStores.forEach((val, key) => {
+                    allStores[key] = { ...val };
+                  });
+                  console.log(`%c\u{1F4CA} [Dolphin All UI Stores]:`, "color: #06b6d4; font-weight: bold;", allStores);
+                } else if (arg && typeof arg === "object" && arg.__isStoreProxy__) {
+                  const storeName = arg.__storeName__;
+                  const store = this.uiStores.get(storeName);
+                  console.log(`%c\u{1F4CA} [Dolphin Store: ${storeName}]:`, "color: #06b6d4; font-weight: bold;", store ? { ...store } : {});
+                } else {
+                  console.log(`%c\u{1F4CA} [Dolphin Log]:`, "color: #06b6d4; font-weight: bold;", arg);
+                }
+              };
+            }
+            if (parentCtx && parentCtx[prop] !== void 0) {
+              return parentCtx[prop];
+            }
+            if (typeof globalThis !== "undefined" && prop in globalThis) {
+              return globalThis[prop];
+            }
+            if (typeof window !== "undefined" && prop in window) {
+              return window[prop];
+            }
             return new Proxy({}, {
               get: (subTarget, subProp) => {
+                if (subProp === "__storeName__") return prop;
+                if (subProp === "__isStoreProxy__") return true;
                 if (typeof subProp === "string") {
                   return this.getStoreState(prop, subProp);
                 }
@@ -1377,86 +1569,6 @@ var DolphinModule = (() => {
         console.error("%cFailed Expression:", "color: #3b82f6; font-style: italic;", expression);
       }
     };
-    clientProto._showAlert = function(id, duration) {
-      if (typeof document === "undefined") return;
-      const el = document.getElementById(id) || document.querySelector(`[id="${id}"]`);
-      if (!el) return;
-      el.removeAttribute("hidden");
-      el.style.display = "";
-      if (duration && duration > 0) {
-        setTimeout(() => {
-          el.setAttribute("hidden", "");
-        }, duration);
-      }
-    };
-    clientProto._showToast = function(message, type = "success") {
-      if (typeof document === "undefined") return;
-      const colors = {
-        success: { bg: "rgba(16,185,129,0.15)", border: "#10b981", icon: "\u2705" },
-        error: { bg: "rgba(239,68,68,0.15)", border: "#ef4444", icon: "\u274C" },
-        info: { bg: "rgba(59,130,246,0.15)", border: "#3b82f6", icon: "\u2139\uFE0F" }
-      };
-      const c = colors[type] || colors.success;
-      const toast = document.createElement("div");
-      toast.setAttribute("data-dolphin-toast", "");
-      const existing = document.querySelectorAll("[data-dolphin-toast]");
-      const offset = existing.length * 72;
-      toast.style.cssText = [
-        "position:fixed",
-        `bottom:${24 + offset}px`,
-        "right:24px",
-        "z-index:2147483647",
-        `background:${c.bg}`,
-        `border:1px solid ${c.border}`,
-        "color:#fff",
-        "padding:14px 20px",
-        "border-radius:14px",
-        "font-size:14px",
-        "font-weight:600",
-        "font-family:system-ui,sans-serif",
-        "box-shadow:0 8px 32px rgba(0,0,0,0.4)",
-        "display:flex",
-        "align-items:center",
-        "gap:10px",
-        "max-width:380px",
-        "word-break:break-word",
-        "transform:translateY(80px)",
-        "opacity:0",
-        "transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease",
-        "pointer-events:auto",
-        "backdrop-filter:blur(12px)"
-      ].join(";");
-      toast.innerHTML = `<span style="font-size:18px">${c.icon}</span><span>${message}</span>`;
-      document.body.appendChild(toast);
-      const restack = () => {
-        const remaining = document.querySelectorAll("[data-dolphin-toast]");
-        remaining.forEach((el, i) => {
-          el.style.bottom = `${24 + i * 72}px`;
-        });
-      };
-      const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
-      raf(() => raf(() => {
-        toast.style.transform = "translateY(0)";
-        toast.style.opacity = "1";
-      }));
-      const removeToast = () => {
-        clearTimeout(toast._removeTimer);
-        if (toast.parentNode) {
-          toast.parentNode.removeChild(toast);
-          restack();
-        }
-      };
-      const hideTimer = setTimeout(() => {
-        toast.style.transform = "translateY(80px)";
-        toast.style.opacity = "0";
-        toast._removeTimer = setTimeout(removeToast, 400);
-      }, 3500);
-      toast._hideTimer = hideTimer;
-      toast.addEventListener("click", () => {
-        clearTimeout(toast._hideTimer);
-        removeToast();
-      }, { once: true });
-    };
     clientProto._initDOMBinding = function() {
       if (this._domInitialized) return;
       this._domInitialized = true;
@@ -1472,7 +1584,7 @@ var DolphinModule = (() => {
               const storeName = parts[0];
               const key = parts[1];
               const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
-              this.setStoreState(storeName, key, val);
+              this.setStoreState(storeName, key, val, e.target);
             }
           }
           const rules = e.target.getAttribute("data-rt-validate");
@@ -1555,11 +1667,6 @@ var DolphinModule = (() => {
               resolvedTopic = resolvedTopic.replace(new RegExp(`\\{\\{${escapedK}\\}\\}`, "g"), parentCtx[k] !== void 0 && parentCtx[k] !== null ? parentCtx[k] : "");
             }
             this.publish(resolvedTopic, data);
-            const rtSuccessId = e.target.getAttribute("data-rt-api-success");
-            if (rtSuccessId) {
-              const rtSuccessEl = document.getElementById(rtSuccessId);
-              if (rtSuccessEl) this._showToast(rtSuccessEl.textContent || rtSuccessEl.innerText || "", "success");
-            }
           } else if (apiTarget) {
             let resolvedTarget = apiTarget;
             for (const k in parentCtx) {
@@ -1576,40 +1683,16 @@ var DolphinModule = (() => {
               const result = await this.api.request(method, path, data);
               const resultBind = e.target.getAttribute("data-api-result");
               if (resultBind) this._updateDOM(resultBind, result);
-              const successToast = e.target.getAttribute("data-api-toast");
-              if (successToast) this._showToast(successToast, "success");
-              const successElId = e.target.getAttribute("data-rt-api-success");
-              if (successElId) {
-                const duration = parseInt(e.target.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(successElId, duration);
-                const errElId = e.target.getAttribute("data-rt-api-error");
-                if (errElId) {
-                  const errEl = document.getElementById(errElId);
-                  if (errEl) errEl.setAttribute("hidden", "");
-                }
-              }
               const redirect = e.target.getAttribute("data-api-redirect");
               if (redirect) window.location.href = redirect;
               if (e.target.hasAttribute("data-api-reload")) window.location.reload();
             } catch (err) {
               console.error("[Dolphin] API Submit Error:", err);
-              const errorToast = e.target.getAttribute("data-api-error-toast");
-              if (errorToast) this._showToast(errorToast, "error");
-              const errorElId = e.target.getAttribute("data-rt-api-error");
-              if (errorElId) {
-                const duration = parseInt(e.target.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(errorElId, duration);
-                const sucElId = e.target.getAttribute("data-rt-api-success");
-                if (sucElId) {
-                  const sucEl = document.getElementById(sucElId);
-                  if (sucEl) sucEl.setAttribute("hidden", "");
-                }
-              }
             }
           }
         }
       });
-      const INTERACTION_EVENTS = ["click", "change", "input", "keydown", "keyup", "dblclick", "focus", "blur", "mouseenter", "mouseleave"];
+      const INTERACTION_EVENTS = ["click", "change", "submit", "input", "keydown", "keyup", "dblclick", "focus", "blur", "mouseenter", "mouseleave"];
       INTERACTION_EVENTS.forEach((evtName) => {
         this.addDomListener(document, evtName, async (e) => {
           if (!e.target || !e.target.closest) return;
@@ -1640,12 +1723,7 @@ var DolphinModule = (() => {
             const apiTarget = apiBtn.getAttribute(`data-api-${evtName}`);
             const actionData = apiBtn.getAttribute("data-api-payload");
             const parentCtx = this.getClosestContext(apiBtn) || {};
-            let resolvedApiTarget = apiTarget;
-            for (const k in parentCtx) {
-              const escapedK = escapeRegExp(k);
-              resolvedApiTarget = resolvedApiTarget.replace(new RegExp(`\\{\\{${escapedK}\\}\\}`, "g"), parentCtx[k] !== void 0 && parentCtx[k] !== null ? parentCtx[k] : "");
-            }
-            const parts = resolvedApiTarget.trim().split(" ");
+            const parts = apiTarget.trim().split(" ");
             const method = parts.length > 1 ? parts[0].toUpperCase() : "POST";
             const path = parts.length > 1 ? parts[1] : parts[0];
             let payload = null;
@@ -1665,35 +1743,11 @@ var DolphinModule = (() => {
               const result = await this.api.request(method, path, payload);
               const resultBind = apiBtn.getAttribute("data-api-result");
               if (resultBind) this._updateDOM(resultBind, result);
-              const successToast = apiBtn.getAttribute("data-api-toast");
-              if (successToast) this._showToast(successToast, "success");
-              const successElId = apiBtn.getAttribute("data-rt-api-success");
-              if (successElId) {
-                const duration = parseInt(apiBtn.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(successElId, duration);
-                const errElId = apiBtn.getAttribute("data-rt-api-error");
-                if (errElId) {
-                  const errEl = document.getElementById(errElId);
-                  if (errEl) errEl.setAttribute("hidden", "");
-                }
-              }
               const redirect = apiBtn.getAttribute("data-api-redirect");
               if (redirect) window.location.href = redirect;
               if (apiBtn.hasAttribute("data-api-reload")) window.location.reload();
             } catch (err) {
               console.error(`[Dolphin] API ${evtName} Error:`, err);
-              const errorToast = apiBtn.getAttribute("data-api-error-toast");
-              if (errorToast) this._showToast(errorToast, "error");
-              const errorElId = apiBtn.getAttribute("data-rt-api-error");
-              if (errorElId) {
-                const duration = parseInt(apiBtn.getAttribute("data-rt-alert-duration") || "0", 10);
-                this._showAlert(errorElId, duration);
-                const sucElId = apiBtn.getAttribute("data-rt-api-success");
-                if (sucElId) {
-                  const sucEl = document.getElementById(sucElId);
-                  if (sucEl) sucEl.setAttribute("hidden", "");
-                }
-              }
             }
           }
           const storeActionBtn = e.target.closest(`[data-store-${evtName}]`);
@@ -1890,24 +1944,33 @@ var DolphinModule = (() => {
           const processNode = (node) => {
             if (node.hasAttribute("data-rt-text")) {
               const key = node.getAttribute("data-rt-text");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) node.textContent = processedPayload[key];
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) node.textContent = val;
+              }
             }
             if (node.hasAttribute("data-rt-html")) {
               const key = node.getAttribute("data-rt-html");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                node.innerHTML = sanitizeHTML(processedPayload[key]);
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) {
+                  node.innerHTML = sanitizeHTML(val);
+                }
               }
             }
             if (node.hasAttribute("data-rt-attr")) {
               const attrStr = node.getAttribute("data-rt-attr");
               if (attrStr) {
-                attrStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const attrName = parts[0].trim();
-                    const key = parts[1].trim();
-                    if (attrName && key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                      node.setAttribute(attrName, processedPayload[key]);
+                splitByUnquotedChar(attrStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const attrName = pair[0].trim();
+                    const key = pair[1].trim();
+                    if (attrName && key) {
+                      const val = evaluateExpression(key, processedPayload);
+                      if (val !== void 0 && val !== null) {
+                        node.setAttribute(attrName, val);
+                      }
                     }
                   }
                 });
@@ -1916,13 +1979,13 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-class")) {
               const classStr = node.getAttribute("data-rt-class");
               if (classStr) {
-                classStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const className = parts[0].trim();
-                    const key = parts[1].trim();
+                splitByUnquotedChar(classStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const className = pair[0].trim();
+                    const key = pair[1].trim();
                     const classNames = className.split(/\s+/).filter(Boolean);
-                    if (processedPayload[key]) {
+                    if (evaluateExpression(key, processedPayload)) {
                       classNames.forEach((c) => node.classList.add(c));
                     } else {
                       classNames.forEach((c) => node.classList.remove(c));
@@ -1934,7 +1997,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-if")) {
               const key = node.getAttribute("data-rt-if");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "";
                 } else {
                   node.style.display = "none";
@@ -1944,7 +2007,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-hide")) {
               const key = node.getAttribute("data-rt-hide");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "none";
                 } else {
                   node.style.display = "";
@@ -1994,21 +2057,35 @@ var DolphinModule = (() => {
           return;
         }
         resolvingSet.add(src);
-        let promise = componentPromiseCache.get(src);
+        const hashIndex = src.indexOf("#");
+        const url = hashIndex !== -1 ? src.substring(0, hashIndex) : src;
+        const selector = hashIndex !== -1 ? src.substring(hashIndex) : null;
+        let promise = componentPromiseCache.get(url);
         if (!promise) {
-          promise = fetch(src).then((res) => {
+          promise = fetch(url).then((res) => {
             if (!res.ok) throw new Error(`HTTP ${res.status}`);
             return res.text();
           });
-          promise.catch(() => componentPromiseCache.delete(src));
-          componentPromiseCache.set(src, promise);
+          promise.catch(() => componentPromiseCache.delete(url));
+          componentPromiseCache.set(url, promise);
         }
         let content = "";
         try {
           content = await promise;
+          if (selector && typeof DOMParser !== "undefined") {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, "text/html");
+            const targetEl = doc.querySelector(selector);
+            if (targetEl) {
+              content = targetEl.outerHTML;
+            } else {
+              console.warn(`[Dolphin Component Warning]: Selector "${selector}" not found in imported file "${url}".`);
+              content = `<span style="color:orange;font-weight:bold;">Selector ${selector} not found in ${url}</span>`;
+            }
+          }
         } catch (err) {
-          console.error(`[Dolphin Component Error]: Failed to fetch component "${src}":`, err);
-          content = `<span style="color:red;font-weight:bold;">Failed to import ${src}</span>`;
+          console.error(`[Dolphin Component Error]: Failed to fetch component "${url}":`, err);
+          content = `<span style="color:red;font-weight:bold;">Failed to import ${url}</span>`;
         }
         el.innerHTML = sanitizeHTML(content);
         el.removeAttribute("data-import");
@@ -2776,6 +2853,32 @@ var DolphinModule = (() => {
   }
 
   // src/testing.ts
+  function createMockFn() {
+    if (typeof jest !== "undefined" && typeof jest.fn === "function") {
+      return jest.fn();
+    }
+    const fn = (...args) => {
+      fn.mock.calls.push(args);
+      if (fn._implementation) {
+        return fn._implementation(...args);
+      }
+      return fn._returnValue;
+    };
+    fn.mock = {
+      calls: []
+    };
+    fn._returnValue = void 0;
+    fn._implementation = null;
+    fn.mockReturnValue = (val) => {
+      fn._returnValue = val;
+      return fn;
+    };
+    fn.mockImplementation = (impl) => {
+      fn._implementation = impl;
+      return fn;
+    };
+    return fn;
+  }
   var DolphinTestUtils = class {
     static render(html) {
       if (typeof document === "undefined") {
@@ -2802,11 +2905,11 @@ var DolphinModule = (() => {
         send: (data) => {
           sentMessages.push(data);
         },
-        close: jest.fn(),
-        onopen: jest.fn(),
-        onmessage: jest.fn(),
-        onclose: jest.fn(),
-        onerror: jest.fn(),
+        close: createMockFn(),
+        onopen: createMockFn(),
+        onmessage: createMockFn(),
+        onclose: createMockFn(),
+        onerror: createMockFn(),
         sentMessages
       };
       global.WebSocket = class {
@@ -2841,8 +2944,8 @@ var DolphinModule = (() => {
     static simulateClick(el) {
       const clickEvt = {
         target: el,
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
+        preventDefault: createMockFn(),
+        stopPropagation: createMockFn()
       };
       const clickListeners = global.document._listeners?.["click"] || [];
       clickListeners.forEach((listener) => listener(clickEvt));
@@ -2851,8 +2954,8 @@ var DolphinModule = (() => {
       el.value = value;
       const changeEvt = {
         target: el,
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
+        preventDefault: createMockFn(),
+        stopPropagation: createMockFn()
       };
       const changeListeners = global.document._listeners?.["change"] || [];
       changeListeners.forEach((listener) => listener(changeEvt));