dolphin-client 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -997,6 +997,82 @@ function attachDOMBinding(clientProto) {
   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 @@ function attachDOMBinding(clientProto) {
     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 @@ function attachDOMBinding(clientProto) {
     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 @@ function attachDOMBinding(clientProto) {
       });
     }
   }
-  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 @@ function attachDOMBinding(clientProto) {
     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 @@ function attachDOMBinding(clientProto) {
   };
   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 @@ function attachDOMBinding(clientProto) {
         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 @@ function attachDOMBinding(clientProto) {
       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 @@ function attachDOMBinding(clientProto) {
             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 @@ function attachDOMBinding(clientProto) {
             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 @@ function attachDOMBinding(clientProto) {
             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 @@ function attachDOMBinding(clientProto) {
           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 @@ function attachDOMBinding(clientProto) {
             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 @@ function attachDOMBinding(clientProto) {
         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 @@ function attachDOMBinding(clientProto) {
           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 @@ function attachDOMBinding(clientProto) {
           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 @@ function attachDOMBinding(clientProto) {
           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 @@ function attachDOMBinding(clientProto) {
         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 @@ function attachPwa(clientProto) {
 }
 
 // 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 DolphinTestUtils = class {
       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 DolphinTestUtils = class {
   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 DolphinTestUtils = class {
     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));