hyper-scheduler 1.0.1 → 1.1.1

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/public/logo.svg" width="120" height="120" alt="Hyper Scheduler Logo">
+  <img src="public/logo.svg" width="120" height="120" alt="Hyper Scheduler Logo">
 </p>
 
 <h1 align="center">Hyper Scheduler</h1>
@@ -14,6 +14,8 @@ A lightweight, dependency-free (core) JavaScript task scheduler supporting Cron
 ## Features
 - 🚀 **Cross-platform**: Works in Node.js and Browser.
 - ⏰ **Precise Timing**: Uses Web Workers in browser to avoid background throttling.
+- 🏷️ **Namespaces**: Isolate tasks into logical groups for batch control.
+- ⚡ **Immediate Trigger**: Option to execute tasks immediately upon start.
 - 🛠 **Debuggable**: Built-in debug panel and CLI output.
 - 📦 **Tiny**: < 20KB gzipped.
 
@@ -27,12 +29,27 @@ npm install hyper-scheduler
 import { Scheduler } from 'hyper-scheduler';
 
 const scheduler = new Scheduler({ debug: true });
+
+// Standard task
 scheduler.createTask({
   id: 'hello',
   schedule: '*/5 * * * * *',
   handler: () => console.log('Hello World')
 });
+
+// Task in a namespace with immediate execution
+scheduler.createTask({
+  id: 'system-check',
+  schedule: '1h',
+  handler: () => console.log('System Check'),
+  options: {
+    namespace: 'system',
+    runImmediately: true
+  }
+});
+
 scheduler.start();
+// Or start only 'system' namespace: scheduler.start('system');
 ```
 
 See [Documentation](docs/guide/getting-started.md) for more details.

package/dist/{devtools-4xVHTaUz.js → devtools-_ah1nNTk.js}

@@ -327,6 +327,9 @@ const themeStyles = `
     --hs-panel-width: 400px;
     --hs-panel-height: 300px;
     
+    /* 等宽数字字体 */
+    --hs-font-monospaced-num: var(--hs-font-mono);
+
     /* Light Theme (Default) */
     --hs-bg: #ffffff;
     --hs-bg-secondary: #f3f4f6;
@@ -344,6 +347,7 @@ const themeStyles = `
     --hs-radius: 6px;
     --hs-header-height: 40px;
     --hs-z-index: 9999;
+    --hs-z-index-overlay: 9998;
 
     /* Default display styles for the host itself */
     background: var(--hs-bg);
@@ -387,6 +391,8 @@ const ICONS = {
   dockRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>`,
   chart: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>`
 };
+const STORAGE_KEY_POS = "hs-trigger-position";
+const STORAGE_KEY_COLLAPSED = "hs-trigger-collapsed";
 class FloatingTrigger extends HTMLElement {
   constructor() {
     super();
@@ -395,43 +401,230 @@ class FloatingTrigger extends HTMLElement {
     __publicField(this, "_position", "bottom-right");
     __publicField(this, "_bgColor", "");
     __publicField(this, "_textColor", "");
+    __publicField(this, "_isDragging", false);
+    __publicField(this, "_wasDragging", false);
+    // 标记是否发生过拖拽
+    __publicField(this, "_offsetX", 0);
+    __publicField(this, "_offsetY", 0);
+    __publicField(this, "_isCollapsed", false);
     this._shadow = this.attachShadow({ mode: "open" });
   }
+  // 新增：收起状态
   static get observedAttributes() {
     return ["position", "bg-color", "text-color"];
   }
   connectedCallback() {
+    this.loadState();
     this.render();
     this.addEventListeners();
+    this.applyPosition();
+    window.addEventListener("resize", this.onResize.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onResize.bind(this));
+  }
+  onResize() {
+    this.applyPosition();
   }
   attributeChangedCallback(name, _oldVal, newVal) {
-    console.log("[FloatingTrigger] attributeChangedCallback:", name, newVal);
     if (name === "position") {
       this._position = newVal || "bottom-right";
+      this.applyPosition();
     } else if (name === "bg-color") {
       this._bgColor = newVal || "";
+      this.updateStyles();
     } else if (name === "text-color") {
       this._textColor = newVal || "";
+      this.updateStyles();
     }
-    if (this._shadow.querySelector("button")) {
-      console.log("[FloatingTrigger] re-rendering with:", this._position, this._bgColor, this._textColor);
-      this.render();
-      this.addEventListeners();
+  }
+  loadState() {
+    try {
+      const savedPos = localStorage.getItem(STORAGE_KEY_POS);
+      if (savedPos) {
+        const { x, y } = JSON.parse(savedPos);
+        this.style.setProperty("--hs-trigger-left", `${x}px`);
+        this.style.setProperty("--hs-trigger-top", `${y}px`);
+        this.style.setProperty("--hs-trigger-position-set", "true");
+      }
+      const savedCollapsed = localStorage.getItem(STORAGE_KEY_COLLAPSED);
+      if (savedCollapsed === "true") {
+        this._isCollapsed = true;
+      }
+    } catch (e) {
+      console.warn("[FloatingTrigger] Failed to load state:", e);
+    }
+  }
+  saveState() {
+    const button = this._shadow.querySelector("button");
+    if (!button) return;
+    localStorage.setItem(STORAGE_KEY_COLLAPSED, String(this._isCollapsed));
+    if (!this._isCollapsed) {
+      const rect = button.getBoundingClientRect();
+      localStorage.setItem(STORAGE_KEY_POS, JSON.stringify({ x: rect.left, y: rect.top }));
+    } else {
+      try {
+        const savedPos = localStorage.getItem(STORAGE_KEY_POS);
+        if (savedPos) {
+          const { x } = JSON.parse(savedPos);
+          const rect = button.getBoundingClientRect();
+          localStorage.setItem(STORAGE_KEY_POS, JSON.stringify({ x, y: rect.top }));
+        }
+      } catch (e) {
+      }
+    }
+  }
+  applyPosition() {
+    const button = this._shadow.querySelector("button");
+    if (!button) return;
+    const maxX = window.innerWidth - button.offsetWidth;
+    const maxY = window.innerHeight - button.offsetHeight;
+    if (this._isCollapsed) {
+      let currentY = parseFloat(this.style.getPropertyValue("--hs-trigger-top") || "20");
+      currentY = Math.max(0, Math.min(currentY, maxY));
+      button.style.right = "0px";
+      button.style.left = "auto";
+      button.style.top = `${currentY}px`;
+      button.style.bottom = "auto";
+      this.style.setProperty("--hs-trigger-top", `${currentY}px`);
+    } else {
+      if (!this.style.getPropertyValue("--hs-trigger-position-set")) {
+        const pos = this._position;
+        button.style.top = pos.includes("top") ? "20px" : "auto";
+        button.style.bottom = pos.includes("bottom") ? "20px" : "auto";
+        button.style.left = pos.includes("left") ? "20px" : "auto";
+        button.style.right = pos.includes("right") ? "20px" : "auto";
+      } else {
+        let currentX = parseFloat(this.style.getPropertyValue("--hs-trigger-left") || "0");
+        let currentY = parseFloat(this.style.getPropertyValue("--hs-trigger-top") || "0");
+        currentX = Math.max(0, Math.min(currentX, maxX));
+        currentY = Math.max(0, Math.min(currentY, maxY));
+        this.style.setProperty("--hs-trigger-left", `${currentX}px`);
+        this.style.setProperty("--hs-trigger-top", `${currentY}px`);
+        button.style.left = `${currentX}px`;
+        button.style.top = `${currentY}px`;
+        button.style.right = "auto";
+        button.style.bottom = "auto";
+      }
+    }
+    this.updateCollapsedState();
+  }
+  updateStyles() {
+    const button = this._shadow.querySelector("button");
+    if (button) {
+      button.style.background = this._bgColor || "var(--hs-primary)";
+      button.style.color = this._textColor || "white";
+      if (this._bgColor) {
+        button.style.setProperty("--hs-trigger-bg-hover", `${this._bgColor}; filter: brightness(1.1);`);
+      } else {
+        button.style.removeProperty("--hs-trigger-bg-hover");
+      }
+    }
+  }
+  updateCollapsedState() {
+    const button = this._shadow.querySelector("button");
+    if (button) {
+      if (this._isCollapsed) {
+        button.classList.add("collapsed");
+      } else {
+        button.classList.remove("collapsed");
+      }
     }
   }
   addEventListeners() {
     const btn = this._shadow.querySelector("button");
-    btn == null ? void 0 : btn.addEventListener("click", () => {
+    if (!btn) return;
+    btn.addEventListener("click", (e) => {
+      if (this._wasDragging) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._wasDragging = false;
+        return;
+      }
       this.dispatchEvent(new CustomEvent("toggle", { bubbles: true, composed: true }));
     });
+    const collapseBtn = this._shadow.querySelector(".collapse-btn");
+    collapseBtn == null ? void 0 : collapseBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this._isCollapsed = !this._isCollapsed;
+      this.applyPosition();
+      this.saveState();
+    });
+    btn.addEventListener("dblclick", (e) => {
+      if (this._isCollapsed) {
+        e.stopPropagation();
+        this._isCollapsed = false;
+        this.applyPosition();
+        this.saveState();
+      }
+    });
+    btn.addEventListener("mousedown", (e) => {
+      if (e.button !== 0) return;
+      if (e.target.closest(".collapse-btn")) return;
+      this._isDragging = true;
+      this._wasDragging = false;
+      this._offsetX = e.clientX - btn.getBoundingClientRect().left;
+      this._offsetY = e.clientY - btn.getBoundingClientRect().top;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      let hasMoved = false;
+      const onMouseMove = (moveEvent) => {
+        if (!this._isDragging) return;
+        if (!hasMoved && (Math.abs(moveEvent.clientX - startX) > 2 || Math.abs(moveEvent.clientY - startY) > 2)) {
+          hasMoved = true;
+          this._wasDragging = true;
+          btn.style.cursor = "grabbing";
+          btn.style.transition = "none";
+        }
+        if (hasMoved) {
+          let newX = moveEvent.clientX - this._offsetX;
+          let newY = moveEvent.clientY - this._offsetY;
+          const maxX = window.innerWidth - btn.offsetWidth;
+          const maxY = window.innerHeight - btn.offsetHeight;
+          newX = Math.max(0, Math.min(newX, maxX));
+          newY = Math.max(0, Math.min(newY, maxY));
+          if (this._isCollapsed) {
+            btn.style.left = "auto";
+            btn.style.right = "0px";
+          } else {
+            btn.style.left = `${newX}px`;
+            btn.style.right = "auto";
+            this.style.setProperty("--hs-trigger-left", `${newX}px`);
+          }
+          btn.style.top = `${newY}px`;
+          btn.style.bottom = "auto";
+          this.style.setProperty("--hs-trigger-position-set", "true");
+          this.style.setProperty("--hs-trigger-top", `${newY}px`);
+        }
+      };
+      const onMouseUp = () => {
+        if (!this._isDragging) return;
+        this._isDragging = false;
+        btn.style.cursor = "pointer";
+        btn.style.transition = "";
+        if (hasMoved) {
+          this.saveState();
+          const preventClick = (e2) => {
+            e2.stopPropagation();
+            e2.preventDefault();
+          };
+          window.addEventListener("click", preventClick, { capture: true, once: true });
+        }
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      };
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    });
   }
   render() {
-    const pos = this._position;
     const posStyles = `
-      top: ${pos.includes("top") ? "20px" : "auto"};
-      bottom: ${pos.includes("bottom") ? "20px" : "auto"};
-      left: ${pos.includes("left") ? "20px" : "auto"};
-      right: ${pos.includes("right") ? "20px" : "auto"};
+      top: var(--hs-trigger-top, ${this._position.includes("top") ? "20px" : "auto"});
+      bottom: var(--hs-trigger-bottom, ${this._position.includes("bottom") ? "20px" : "auto"});
+      left: var(--hs-trigger-left, ${this._position.includes("left") ? "20px" : "auto"});
+      right: var(--hs-trigger-right, ${this._position.includes("right") ? "20px" : "auto"});
+      transform: translateX(0);
     `;
     const bgStyle = this._bgColor ? `background: ${this._bgColor};` : "";
     const colorStyle = this._textColor ? `color: ${this._textColor};` : "";
@@ -443,33 +636,104 @@ class FloatingTrigger extends HTMLElement {
           ${posStyles}
           width: 48px;
           height: 48px;
-          border-radius: 50%;
+          border-radius: 12px; /* 更现代的圆角 */
           background: var(--hs-primary);
           color: white;
           ${bgStyle}
           ${colorStyle}
           border: none;
-          box-shadow: var(--hs-shadow);
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 更柔和的阴影 */
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-family: var(--hs-font-family);
           z-index: var(--hs-z-index);
+          transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s, box-shadow 0.2s;
+          overflow: visible; /* 允许子元素（收起按钮）溢出或显示 */
+        }
+        .icon {
           transition: transform 0.2s;
+          display: flex;
         }
         button:hover {
           ${this._bgColor ? `background: ${this._bgColor}; filter: brightness(1.1);` : "background: var(--hs-primary-hover);"}
+          box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+        }
+        button:hover .icon {
           transform: scale(1.1);
         }
-        button:active {
+        button:active .icon {
           transform: scale(0.95);
         }
+
+        /* 显式收起按钮 */
+        .collapse-btn {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 20px;
+          height: 20px;
+          background: rgba(0,0,0,0.1);
+          border-top-right-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 1; /* 默认可见 */
+          transition: opacity 0.2s, background 0.2s;
+          color: white;
+          font-weight: bold;
+        }
+        .collapse-btn::before {
+          content: '—'; /* 最小化图标 */
+          font-size: 12px;
+          color: currentColor;
+        }
+        button:hover .collapse-btn {
+          opacity: 1;
+        }
+        .collapse-btn:hover {
+          background: rgba(0,0,0,0.3);
+        }
+
+        /* 收起状态样式 */
+        button.collapsed {
+          width: 24px;
+          height: 48px;
+          border-radius: 12px 0 0 12px;
+          transform: none; /* 完全展示，不再隐藏 */
+          opacity: 1;
+          right: 0 !important; /* 强制右对齐 */
+          left: auto !important;
+        }
+        button.collapsed:hover {
+          width: 28px; /* hover 时稍微变宽 */
+          opacity: 1;
+        }
+        button.collapsed .icon {
+          display: none;
+        }
+        button.collapsed .collapse-btn {
+          position: static; /* 充满父容器 */
+          width: 100%;
+          height: 100%;
+          border-radius: 0;
+          background: transparent;
+        }
+        button.collapsed .collapse-btn::before {
+          content: '‹'; /* 展开图标 (左箭头) */
+          font-size: 20px;
+          line-height: 48px;
+        }
       </style>
       <button title="Toggle Hyper Scheduler DevTools">
-        ${ICONS.chart}
+        <div class="collapse-btn" title="Minimize"></div>
+        <span class="icon">${ICONS.chart}</span>
       </button>
     `;
+    this.applyPosition();
+    this.updateCollapsedState();
+    this.updateStyles();
   }
 }
 customElements.define("hs-floating-trigger", FloatingTrigger);
@@ -504,7 +768,7 @@ class TaskHeader extends HTMLElement {
     this._fps = Math.round(val);
     if (this.$fps) {
       const color = this._fps < 30 ? "var(--hs-danger)" : this._fps < 50 ? "var(--hs-warning)" : "var(--hs-success)";
-      this.$fps.innerHTML = `⚡ ${t("stats.fps")}: <span style="color:${color}">${this._fps}</span> (${t("stats.mainThread")})`;
+      this.$fps.innerHTML = `⚡ ${t("stats.fps")}: <span style="color:${color}; font-family:var(--hs-font-monospaced-num);">${this._fps}</span> (${t("stats.mainThread")})`;
     }
   }
   set stats(val) {
@@ -766,6 +1030,7 @@ class TaskList extends HTMLElement {
     __publicField(this, "_shadow");
     __publicField(this, "_tasks", []);
     __publicField(this, "_lastExecutionTimes", /* @__PURE__ */ new Map());
+    __publicField(this, "_expandedNamespaces", /* @__PURE__ */ new Set(["default"]));
     this._shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
@@ -782,6 +1047,17 @@ class TaskList extends HTMLElement {
     this._tasks = newTasks;
     this.renderRows();
   }
+  groupTasksByNamespace(tasks) {
+    const groups = /* @__PURE__ */ new Map();
+    tasks.forEach((task) => {
+      const ns = task.namespace || "default";
+      if (!groups.has(ns)) {
+        groups.set(ns, []);
+      }
+      groups.get(ns).push(task);
+    });
+    return groups;
+  }
   filter(text, map) {
     const all = Array.from(map.values());
     if (!text) {
@@ -789,7 +1065,7 @@ class TaskList extends HTMLElement {
     } else {
       const lower = text.toLowerCase();
       this._tasks = all.filter(
-        (t2) => t2.id.toLowerCase().includes(lower) || t2.tags.some((tag) => tag.toLowerCase().includes(lower))
+        (t2) => t2.id.toLowerCase().includes(lower) || t2.tags.some((tag) => tag.toLowerCase().includes(lower)) || t2.namespace && t2.namespace.toLowerCase().includes(lower)
       );
     }
     this.renderRows();
@@ -862,18 +1138,21 @@ class TaskList extends HTMLElement {
     }
     return `<span class="driver-badge main" title="${t("list.driverMain")}">M</span>`;
   }
-  renderRows() {
-    const tbody = this._shadow.querySelector("tbody");
-    if (!tbody) return;
-    tbody.innerHTML = this._tasks.map((task, index) => {
-      const lastExec = this._lastExecutionTimes.get(task.id);
-      const isRecentlyExecuted = lastExec && Date.now() - lastExec < 1e3;
-      const rowClass = isRecentlyExecuted ? "recently-executed" : "";
-      return `
-      <tr data-id="${task.id}" class="${rowClass}">
-        <td class="col-num">${index + 1}</td>
+  renderTaskRow(task, index, isNested = false) {
+    const lastExec = this._lastExecutionTimes.get(task.id);
+    const isRecentlyExecuted = lastExec && Date.now() - lastExec < 1e3;
+    const rowClass = isRecentlyExecuted ? "recently-executed" : "";
+    const nestedClass = isNested ? "nested-task" : "";
+    return `
+      <tr data-id="${task.id}" class="${rowClass} ${nestedClass}">
+        <td class="col-num">
+          ${isNested ? "" : index + 1}
+        </td>
         <td class="col-id">
-          <div class="task-id">${task.id}</div>
+          <div class="task-id">
+            ${task.id}
+            ${task.namespace && task.namespace !== "default" && !isNested ? `<span class="namespace-badge" title="Namespace">${task.namespace}</span>` : ""}
+          </div>
           <div class="tags">
             ${task.tags && task.tags.length > 0 ? task.tags.map((t2) => `<span class="tag">${t2}</span>`).join("") : `<span class="no-tags">${t("list.noTags")}</span>`}
           </div>
@@ -892,7 +1171,38 @@ class TaskList extends HTMLElement {
         </td>
       </tr>
     `;
-    }).join("");
+  }
+  renderRows() {
+    const tbody = this._shadow.querySelector("tbody");
+    if (!tbody) return;
+    const groups = this.groupTasksByNamespace(this._tasks);
+    let html = "";
+    let globalIndex = 0;
+    const defaultTasks = groups.get("default");
+    if (defaultTasks && defaultTasks.length > 0) {
+      html += defaultTasks.map((task) => this.renderTaskRow(task, ++globalIndex, false)).join("");
+    }
+    groups.delete("default");
+    const sortedNamespaces = Array.from(groups.keys()).sort((a, b) => a.localeCompare(b));
+    sortedNamespaces.forEach((ns) => {
+      const tasks = groups.get(ns);
+      const isExpanded = this._expandedNamespaces.has(ns);
+      const icon = isExpanded ? "▼" : "▶";
+      html += `
+            <tr class="namespace-row ${isExpanded ? "ns-expanded" : ""}" data-ns="${ns}">
+                <td colspan="8">
+                    <span class="ns-toggle">${icon}</span>
+                    <span class="ns-icon">📂</span>
+                    <span class="ns-name">${ns}</span>
+                    <span class="ns-count">(${tasks.length})</span>
+                </td>
+            </tr>
+        `;
+      if (isExpanded) {
+        html += tasks.map((task) => this.renderTaskRow(task, ++globalIndex, true)).join("");
+      }
+    });
+    tbody.innerHTML = html;
   }
   render() {
     this._shadow.innerHTML = `
@@ -974,6 +1284,18 @@ class TaskList extends HTMLElement {
         .task-id {
           font-weight: 600;
         }
+        .namespace-badge {
+          display: inline-block;
+          background: var(--hs-bg-secondary);
+          color: var(--hs-text-secondary);
+          border: 1px solid var(--hs-border);
+          border-radius: 4px;
+          padding: 0 4px;
+          font-size: 9px;
+          margin-left: 6px;
+          font-family: monospace;
+          vertical-align: middle;
+        }
         .tags {
           display: flex;
           gap: 4px;
@@ -1079,6 +1401,40 @@ class TaskList extends HTMLElement {
           color: var(--hs-text-secondary);
           border-color: var(--hs-border);
         }
+        /* Namespace Styles */
+        .namespace-row {
+          background: var(--hs-bg-secondary);
+          cursor: pointer;
+          font-weight: 600;
+          user-select: none;
+        }
+        .namespace-row:hover {
+          background: var(--hs-border);
+        }
+        .namespace-row td {
+          padding: 8px 12px;
+          border-bottom: 1px solid var(--hs-border);
+        }
+        .ns-toggle {
+          display: inline-block;
+          width: 20px;
+          text-align: center;
+          font-size: 10px;
+          color: var(--hs-text-secondary);
+          transition: transform 0.2s;
+        }
+        .ns-icon {
+          margin-right: 4px;
+        }
+        .ns-count {
+          font-weight: normal;
+          color: var(--hs-text-secondary);
+          font-size: 11px;
+          margin-left: 4px;
+        }
+        .nested-task .col-id {
+          padding-left: 32px !important;
+        }
       </style>
       <div class="table-container">
         <table>
@@ -1105,6 +1461,19 @@ class TaskList extends HTMLElement {
     `;
     this._shadow.addEventListener("click", (e) => {
       const target = e.target;
+      const nsRow = target.closest(".namespace-row");
+      if (nsRow) {
+        const ns = nsRow.dataset.ns;
+        if (ns) {
+          if (this._expandedNamespaces.has(ns)) {
+            this._expandedNamespaces.delete(ns);
+          } else {
+            this._expandedNamespaces.add(ns);
+          }
+          this.renderRows();
+        }
+        return;
+      }
       const btn = target.closest("button");
       if (btn) {
         const action = btn.dataset.action;
@@ -1119,7 +1488,7 @@ class TaskList extends HTMLElement {
         return;
       }
       const tr = target.closest("tr");
-      if (tr && !target.closest(".col-actions")) {
+      if (tr && !target.closest(".col-actions") && !tr.classList.contains("namespace-row")) {
         const id = tr.dataset.id;
         this.dispatchEvent(new CustomEvent("task-select", {
           detail: id,
@@ -1744,6 +2113,7 @@ class DevTools extends HTMLElement {
     __publicField(this, "$taskDetail");
     __publicField(this, "$timeline");
     __publicField(this, "$trigger");
+    __publicField(this, "$overlay");
     this._shadow = this.attachShadow({ mode: "open" });
     this.store = new DevToolsStore();
   }
@@ -1857,6 +2227,7 @@ class DevTools extends HTMLElement {
     this.$taskDetail = this._shadow.querySelector("hs-task-detail");
     this.$timeline = this._shadow.querySelector("hs-timeline");
     this.$trigger = this._shadow.querySelector("hs-floating-trigger");
+    this.$overlay = this._shadow.querySelector(".overlay");
   }
   bindStore() {
     try {
@@ -1872,6 +2243,7 @@ class DevTools extends HTMLElement {
       if (isOpen) {
         this.$panel.classList.add("open");
         this.$trigger.style.display = "none";
+        this.$overlay.style.display = "block";
         if (pos === "right") {
           this.$panel.style.right = "0";
         } else {
@@ -1880,6 +2252,7 @@ class DevTools extends HTMLElement {
       } else {
         this.$panel.classList.remove("open");
         this.$trigger.style.display = "block";
+        this.$overlay.style.display = "none";
         if (pos === "right") {
           this.$panel.style.right = `-${size.width}px`;
         } else {
@@ -2024,9 +2397,8 @@ class DevTools extends HTMLElement {
       const text = e.detail;
       this.store.setFilterText(text);
     });
-    this.addEventListener("resize", (e) => {
-      const size = e.detail;
-      this.store.setPanelSize(size);
+    this.$overlay.addEventListener("click", () => {
+      this.store.toggle();
     });
     this.$taskList.addEventListener("task-select", (e) => {
       const id = e.detail;
@@ -2078,6 +2450,16 @@ class DevTools extends HTMLElement {
           color: var(--hs-text);
           line-height: var(--hs-line-height);
         }
+        .overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: calc(var(--hs-z-index) - 1); /* 确保在面板之下，但在应用之上 */
+          display: none; /* 默认隐藏 */
+        }
         .panel {
           position: fixed;
           background: var(--hs-bg);
@@ -2141,6 +2523,7 @@ class DevTools extends HTMLElement {
         }
       </style>
       
+      <div class="overlay"></div>
       <hs-floating-trigger></hs-floating-trigger>
       
       <div class="panel dock-right">