@icen.ai/ui 0.5.0 → 0.8.0

package/dist/behaviors/command-palette.d.mts

@@ -0,0 +1,8 @@
+/** 打开指定 id 的命令面板。 */
+declare function openCommandPalette(id: string): void;
+/** 关闭指定 id 的命令面板（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。 */
+declare function closeCommandPalette(id: string): void;
+/** 初始化：委托监听触发器 / 搜索 / 外点 / 全局快捷键。 */
+declare function initCommandPalette(root?: ParentNode): void;
+
+export { closeCommandPalette, initCommandPalette, openCommandPalette };

package/dist/behaviors/command-palette.mjs

@@ -13,7 +13,9 @@ function findBackdrop(id) {
 }
 function getVisibleItems(panel) {
   return Array.from(
-    panel.querySelectorAll(".command-palette-item:not([hidden]):not([disabled])")
+    panel.querySelectorAll(
+      '.command-palette-item:not([hidden]):not([disabled]):not([aria-disabled="true"])'
+    )
   ).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
 }
 function isDisabledItem(el) {
@@ -55,7 +57,10 @@ function openCommandPalette(id) {
   if (openId === id) return;
   if (openId) closeCommandPalette(openId);
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
+  if (!backdrop) {
+    console.warn(`[@icen.ai/ui] command-palette: \u672A\u627E\u5230 data-command-palette="${id}" \u7684 .command-palette-backdrop\uFF0C\u5DF2\u8DF3\u8FC7\u6253\u5F00`);
+    return;
+  }
   const panel = backdrop.querySelector(".command-palette");
   if (!panel) return;
   if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
@@ -111,8 +116,7 @@ function openCommandPalette(id) {
 function closeCommandPalette(id) {
   if (typeof document === "undefined") return;
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
-  backdrop.hidden = true;
+  if (backdrop) backdrop.hidden = true;
   if (openId !== id) return;
   openId = null;
   if (keyHandler) {
@@ -123,10 +127,11 @@ function closeCommandPalette(id) {
   if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
   restoreFocusTo = null;
 }
-function initCommandPalette(root = document) {
+function initCommandPalette(root) {
   if (typeof document === "undefined") return;
   if (typeof window === "undefined") return;
-  root.querySelectorAll("[data-command-palette-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-command-palette-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
   if (initialized) return;
   initialized = true;
   document.addEventListener("click", (e) => {
@@ -159,13 +164,20 @@ function initCommandPalette(root = document) {
     if (panel) filterPanel(panel, e.target.value);
   });
   globalKeyHandler = (e) => {
-    if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    const key = e.key.toLowerCase();
+    const palettes = document.querySelectorAll(
+      ".command-palette-backdrop[data-command-palette]"
+    );
+    for (const backdrop of Array.from(palettes)) {
+      const paletteKey = (backdrop.dataset.commandPaletteKey ?? "k").toLowerCase();
+      if (paletteKey !== key) continue;
+      const id = backdrop.dataset.commandPalette;
+      if (!id) continue;
       e.preventDefault();
-      const first = document.querySelector(".command-palette-backdrop[data-command-palette]");
-      if (first?.dataset.commandPalette) {
-        if (openId === first.dataset.commandPalette) closeCommandPalette(openId);
-        else openCommandPalette(first.dataset.commandPalette);
-      }
+      if (openId === id) closeCommandPalette(id);
+      else openCommandPalette(id);
+      return;
     }
   };
   window.addEventListener("keydown", globalKeyHandler);

package/dist/behaviors/context-menu.d.mts

@@ -0,0 +1,36 @@
+interface ContextMenuEntry {
+    label: string;
+    subLabel?: string;
+    /** 可信 svg 字符串（唯一走 innerHTML 的字段） */
+    icon?: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface ContextMenuSeparator {
+    type: 'separator';
+}
+interface ContextMenuHeader {
+    type: 'header';
+    label: string;
+    description?: string;
+}
+type ContextMenuItem = ContextMenuEntry | ContextMenuSeparator | ContextMenuHeader;
+interface ContextMenuOptions {
+    /** 替换内置默认菜单（未命中任何注册 id 时使用） */
+    items?: ContextMenuItem[];
+}
+/** 注册指定 id 的右键菜单项（对应 DOM 中的 [data-context-menu="id"]）。 */
+declare function registerContextMenu(id: string, items: ContextMenuItem[]): void;
+/** 在 (x, y) 打开右键菜单（视口边缘自动翻转并 clamp）。 */
+declare function openContextMenu(x: number, y: number, items: ContextMenuItem[]): void;
+/** 关闭当前右键菜单（未打开时为 no-op）。 */
+declare function closeMenu(): void;
+/**
+ * 启动全局右键菜单（重复调用安全）。
+ * opts.items 提供时替换内置默认菜单。
+ */
+declare function initContextMenu(opts?: ContextMenuOptions): void;
+
+export { type ContextMenuEntry, type ContextMenuHeader, type ContextMenuItem, type ContextMenuOptions, type ContextMenuSeparator, closeMenu, initContextMenu, openContextMenu, registerContextMenu };

package/dist/behaviors/context-menu.mjs

@@ -127,7 +127,7 @@ function openContextMenu(x, y, items) {
     setFocused(0);
   });
   document.addEventListener("pointerdown", onOutsidePointerDown, true);
-  document.addEventListener("scroll", onCloseSignal, true);
+  document.addEventListener("scroll", onScrollSignal, true);
   window.addEventListener("resize", onCloseSignal);
   window.addEventListener("keydown", onKeyDown);
 }
@@ -138,7 +138,7 @@ function closeMenu() {
   focusableItems = [];
   focusedIndex = -1;
   document.removeEventListener("pointerdown", onOutsidePointerDown, true);
-  document.removeEventListener("scroll", onCloseSignal, true);
+  document.removeEventListener("scroll", onScrollSignal, true);
   window.removeEventListener("resize", onCloseSignal);
   window.removeEventListener("keydown", onKeyDown);
 }
@@ -152,6 +152,10 @@ function onOutsidePointerDown(e) {
   const target = e.target;
   if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
 }
+function onScrollSignal(e) {
+  if (panel && e.target instanceof Node && panel.contains(e.target)) return;
+  closeMenu();
+}
 function onCloseSignal() {
   closeMenu();
 }

package/dist/behaviors/copy.d.mts

@@ -0,0 +1,4 @@
+/** 委托监听 click；同一 root（含默认的 document）重复调用幂等。 */
+declare function initCopy(root?: ParentNode): void;
+
+export { initCopy };

package/dist/behaviors/copy.mjs

@@ -34,10 +34,10 @@ function flashDone(btn) {
   const iconOnly = btn.hasAttribute("data-copy-icon");
   const original = prev ? prev.original : iconOnly ? null : btn.textContent;
   if (!iconOnly) btn.textContent = "\u5DF2\u590D\u5236";
-  btn.classList.add("done");
+  btn.classList.add("is-done");
   const timer = window.setTimeout(() => {
     if (!iconOnly) btn.textContent = original;
-    btn.classList.remove("done");
+    btn.classList.remove("is-done");
     flashing.delete(btn);
   }, 1400);
   flashing.set(btn, { original, timer });
@@ -52,11 +52,12 @@ function onClick(root, ev) {
     if (ok) flashDone(btn);
   });
 }
-function initCopy(root = document) {
+function initCopy(root) {
   if (typeof document === "undefined") return;
-  if (initialized.has(root)) return;
-  initialized.add(root);
-  root.addEventListener("click", (ev) => onClick(root, ev));
+  const scope = root ?? document;
+  if (initialized.has(scope)) return;
+  initialized.add(scope);
+  scope.addEventListener("click", (ev) => onClick(scope, ev));
 }
 export {
   initCopy

package/dist/behaviors/datatable.d.mts

@@ -0,0 +1,78 @@
+import { ContextMenuItem } from './context-menu.js';
+
+interface TableColumn<Row = Record<string, unknown>> {
+    key: string;
+    title: string;
+    /** CSS 宽度：'72px' / '120px' / '2fr'；缺省 minmax(0,1fr) */
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    /** 自定义比较（默认：数字感知的 localeCompare） */
+    sortFn?: (a: Row, b: Row) => number;
+    filterable?: boolean;
+    /** 返回 Node 可嵌套任意组件；返回 string/number 走 textContent（安全） */
+    render?: (value: unknown, row: Row, rowIndex: number) => Node | string | number | null;
+    hidden?: boolean;
+    /** 冻结列（左固定，横向滚动时不跟随） */
+    frozen?: boolean;
+}
+interface TableOptions<Row = Record<string, unknown>> {
+    columns: TableColumn<Row>[];
+    data: Row[];
+    /** 行唯一键：字段名或函数（多选/展开跨页保持的依据），缺省用行索引 */
+    rowKey?: keyof Row | ((row: Row) => string);
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    /** 分页（默认开启，pageSize 默认 10 条/页；传 false 关闭；virtual 时忽略） */
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizes?: number[];
+    /** 虚拟滚动（大数据量；与 pagination 互斥，virtual 优先） */
+    virtual?: boolean;
+    /** 虚拟行高 px（默认 44）与窗口高度（默认 '420px'） */
+    rowHeight?: number;
+    height?: string;
+    /** 行展开内容（虚拟模式下忽略） */
+    expandable?: (row: Row) => Node | string;
+    /** 行右键菜单（复用 context-menu；需 menu.css，kit 入口已带） */
+    contextMenu?: (row: Row) => ContextMenuItem[];
+    striped?: boolean;
+    emptyLabel?: string;
+    loading?: boolean;
+    /** 密度：normal 默认 44px 行高 / compact 紧凑 32px */
+    density?: 'normal' | 'compact';
+    /** 列宽可拖拽调整（默认 true） */
+    resizable?: boolean;
+    /** 工具栏列显隐开关（默认 false） */
+    columnVisibility?: boolean;
+    /** 导出 CSV 按钮显示在工具栏（默认 false） */
+    exportable?: boolean;
+    /** 行自定义 class（条件着色 / 状态行） */
+    rowClassName?: (row: Row, index: number) => string;
+    onSelectionChange?: (rows: Row[]) => void;
+    onRowClick?: (row: Row) => void;
+    onSortChange?: (key: string | null, dir: 'asc' | 'desc') => void;
+}
+interface TableHandle<Row = Record<string, unknown>> {
+    setData(data: Row[]): void;
+    getSelected(): Row[];
+    clearSelection(): void;
+    setSearch(query: string): void;
+    /** values=null 清除该列筛选 */
+    setFilter(key: string, values: string[] | null): void;
+    setSort(key: string | null, dir?: 'asc' | 'desc'): void;
+    /** 获取当前管线（搜索→筛选→排序）后的数据 */
+    getData(): Row[];
+    /** 导出当前管线数据为 CSV 并触发下载 */
+    exportCSV(filename?: string): void;
+    /** 显示/隐藏列 */
+    showColumn(key: string): void;
+    hideColumn(key: string): void;
+    /** 数据被外部原地修改后重渲 */
+    refresh(): void;
+    destroy(): void;
+}
+declare function createTable<Row = Record<string, unknown>>(el: HTMLElement, opts: TableOptions<Row>): TableHandle<Row>;
+
+export { type TableColumn, type TableHandle, type TableOptions, createTable };

package/dist/behaviors/datatable.mjs

@@ -87,7 +87,7 @@ function openContextMenu(x, y, items) {
     setFocused(0);
   });
   document.addEventListener("pointerdown", onOutsidePointerDown, true);
-  document.addEventListener("scroll", onCloseSignal, true);
+  document.addEventListener("scroll", onScrollSignal, true);
   window.addEventListener("resize", onCloseSignal);
   window.addEventListener("keydown", onKeyDown);
 }
@@ -98,7 +98,7 @@ function closeMenu() {
   focusableItems = [];
   focusedIndex = -1;
   document.removeEventListener("pointerdown", onOutsidePointerDown, true);
-  document.removeEventListener("scroll", onCloseSignal, true);
+  document.removeEventListener("scroll", onScrollSignal, true);
   window.removeEventListener("resize", onCloseSignal);
   window.removeEventListener("keydown", onKeyDown);
 }
@@ -112,6 +112,10 @@ function onOutsidePointerDown(e) {
   const target = e.target;
   if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
 }
+function onScrollSignal(e) {
+  if (panel && e.target instanceof Node && panel.contains(e.target)) return;
+  closeMenu();
+}
 function onCloseSignal() {
   closeMenu();
 }
@@ -410,7 +414,7 @@ function createTable(el, opts) {
         else allKeys.forEach((k) => selected.delete(k));
         emitSelection();
         renderBody();
-        renderHead();
+        syncHeadState();
       });
       cell.appendChild(box);
       headRow.appendChild(cell);
@@ -466,6 +470,7 @@ function createTable(el, opts) {
         const btn = document.createElement("button");
         btn.type = "button";
         btn.className = "dt-filter-btn";
+        btn.dataset.colKey = col.key;
         if (hasFilter) btn.classList.add("is-active");
         btn.setAttribute("aria-label", `\u7B5B\u9009\u300C${col.title}\u300D`);
         btn.appendChild(svgIcon(ICON_FUNNEL, 12));
@@ -491,6 +496,33 @@ function createTable(el, opts) {
       headRow.appendChild(cell);
     }
   }
+  function syncHeadState() {
+    const headBox = headRow.querySelector(".dt-cell--check .dt-check");
+    if (headBox) {
+      const allKeys = pipeline().map((r) => keyOfRow(r));
+      const selCount = allKeys.filter((k) => selected.has(k)).length;
+      headBox.checked = selCount > 0 && selCount === allKeys.length;
+      headBox.indeterminate = selCount > 0 && selCount < allKeys.length;
+    }
+    headRow.querySelectorAll(".dt-filter-btn").forEach((b) => {
+      const key = b.dataset.colKey;
+      if (key) b.classList.toggle("is-active", filters.has(key));
+    });
+  }
+  function renderHeadKeepPanel() {
+    const keep = openPanel;
+    renderHead();
+    if (!keep) return;
+    openPanel = keep;
+    document.body.appendChild(keep.el);
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+    if (keep.key !== "__cols") {
+      headRow.querySelectorAll(".dt-filter-btn").forEach((b) => {
+        if (b.dataset.colKey === keep.key) b.classList.add("is-open");
+      });
+    }
+  }
   function attachResize(handle, col) {
     handle.addEventListener("pointerdown", (ev) => {
       ev.preventDefault();
@@ -508,12 +540,17 @@ function createTable(el, opts) {
         });
       };
       const onUp = (e) => {
-        handle.releasePointerCapture(e.pointerId);
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch {
+        }
         handle.removeEventListener("pointermove", onMove);
         handle.removeEventListener("pointerup", onUp);
+        handle.removeEventListener("pointercancel", onUp);
       };
       handle.addEventListener("pointermove", onMove);
       handle.addEventListener("pointerup", onUp);
+      handle.addEventListener("pointercancel", onUp);
     });
   }
   function openColumnPanel(btn) {
@@ -533,7 +570,8 @@ function createTable(el, opts) {
         if (box.checked) colHidden.delete(col.key);
         else colHidden.set(col.key, true);
         invalidate();
-        renderAll();
+        renderBody();
+        renderHeadKeepPanel();
       });
       const text = document.createElement("span");
       text.textContent = col.title;
@@ -569,7 +607,7 @@ function createTable(el, opts) {
     a.href = url;
     a.download = filename ?? "export.csv";
     a.click();
-    URL.revokeObjectURL(url);
+    window.setTimeout(() => URL.revokeObjectURL(url), 1e3);
   }
   function csvEscape(s) {
     if (/[",\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
@@ -595,7 +633,8 @@ function createTable(el, opts) {
         else filters.set(col.key, cur);
         invalidate();
         page = 1;
-        renderAll();
+        renderBody();
+        syncHeadState();
       });
       const text = document.createElement("span");
       text.textContent = v === "" ? "\uFF08\u7A7A\uFF09" : v;
@@ -612,8 +651,11 @@ function createTable(el, opts) {
       filters.delete(col.key);
       invalidate();
       page = 1;
-      closeFilterPanel();
-      renderAll();
+      list.querySelectorAll(".dt-check").forEach((b) => {
+        b.checked = true;
+      });
+      renderBody();
+      syncHeadState();
     });
     footRow.appendChild(reset);
     panel2.append(list, footRow);
@@ -661,7 +703,7 @@ function createTable(el, opts) {
         }
         lastClickedIndex = rowIndex;
         emitSelection();
-        renderHead();
+        syncHeadState();
         renderFoot(pipeline().length);
       });
       cell.appendChild(box);
@@ -797,7 +839,8 @@ function createTable(el, opts) {
       clear.addEventListener("click", () => {
         selected.clear();
         emitSelection();
-        renderAll();
+        renderBody();
+        syncHeadState();
       });
       sel.appendChild(clear);
       foot.appendChild(sel);

package/dist/behaviors/date-picker.d.mts

@@ -0,0 +1,4 @@
+/** 初始化：扫描 root 下的 .date-picker[data-date-picker]。 */
+declare function initDatePicker(root?: ParentNode): void;
+
+export { initDatePicker };

package/dist/behaviors/date-picker.mjs

@@ -3,6 +3,7 @@ var openPicker = null;
 var panelEl = null;
 var outsideHandler = null;
 var escHandler = null;
+var repositionHandler = null;
 function pad(n) {
   return n < 10 ? "0" + n : String(n);
 }
@@ -43,7 +44,38 @@ function positionPanel(panel, trigger) {
   panel.style.left = left + "px";
   panel.style.top = top + "px";
 }
-var CAL_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>';
+var SVG_NS = "http://www.w3.org/2000/svg";
+function buildCalIcon() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", "3");
+  rect.setAttribute("y", "4");
+  rect.setAttribute("width", "18");
+  rect.setAttribute("height", "18");
+  rect.setAttribute("rx", "2");
+  rect.setAttribute("ry", "2");
+  svg.appendChild(rect);
+  const lines = [
+    ["16", "16", "2", "6"],
+    ["8", "8", "2", "6"],
+    ["3", "21", "10", "10"]
+  ];
+  for (const [x1, x2, y1, y2] of lines) {
+    const line = document.createElementNS(SVG_NS, "line");
+    line.setAttribute("x1", x1);
+    line.setAttribute("x2", x2);
+    line.setAttribute("y1", y1);
+    line.setAttribute("y2", y2);
+    svg.appendChild(line);
+  }
+  return svg;
+}
 var WEEK_LABELS_ZH = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
 var WEEK_LABELS_SUN = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 function renderCalendar(panel, ctx) {
@@ -61,49 +93,74 @@ function renderCalendar(panel, ctx) {
   for (let i = 0; i < 42; i++) {
     cells.push(new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   }
-  let html = `<div class="date-picker-head">
-    <button class="date-picker-nav" data-dp-nav="-1" type="button" aria-label="\u4E0A\u4E00\u6708">\u2039</button>
-    <span class="date-picker-title">${year} \u5E74 ${month + 1} \u6708</span>
-    <button class="date-picker-nav" data-dp-nav="1" type="button" aria-label="\u4E0B\u4E00\u6708">\u203A</button>
-  </div><div class="date-picker-weekdays">${labels.map((l) => `<span>${l}</span>`).join("")}</div><div class="date-picker-grid">`;
+  panel.textContent = "";
+  const head = document.createElement("div");
+  head.className = "date-picker-head";
+  const prevBtn = document.createElement("button");
+  prevBtn.type = "button";
+  prevBtn.className = "date-picker-nav";
+  prevBtn.setAttribute("aria-label", "\u4E0A\u4E00\u6708");
+  prevBtn.textContent = "\u2039";
+  const title = document.createElement("span");
+  title.className = "date-picker-title";
+  title.textContent = `${year} \u5E74 ${month + 1} \u6708`;
+  const nextBtn = document.createElement("button");
+  nextBtn.type = "button";
+  nextBtn.className = "date-picker-nav";
+  nextBtn.setAttribute("aria-label", "\u4E0B\u4E00\u6708");
+  nextBtn.textContent = "\u203A";
+  head.append(prevBtn, title, nextBtn);
+  const weekdays = document.createElement("div");
+  weekdays.className = "date-picker-weekdays";
+  for (const label of labels) {
+    const s = document.createElement("span");
+    s.textContent = label;
+    weekdays.appendChild(s);
+  }
+  const grid = document.createElement("div");
+  grid.className = "date-picker-grid";
   for (const d of cells) {
     const isOutside = d.getMonth() !== month;
-    const ds = toDateStr(d);
     const isToday = d.getTime() === today.getTime();
-    const isSelected = selected && ds === toDateStr(selected);
-    const disabled = min && d < min || max && d > max;
+    const isSelected = selected !== null && toDateStr(d) === toDateStr(selected);
+    const disabled = min !== null && d < min || max !== null && d > max;
     const classes = ["date-picker-cell"];
     if (isOutside) classes.push("is-outside");
     if (isToday) classes.push("is-today");
     if (isSelected) classes.push("is-selected");
     if (disabled) classes.push("is-disabled");
-    html += `<button type="button" class="${classes.join(" ")}" data-dp-date="${ds}"${disabled ? " disabled" : ""}>${d.getDate()}</button>`;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = classes.join(" ");
+    btn.textContent = String(d.getDate());
+    if (disabled) btn.disabled = true;
+    btn.addEventListener("click", () => onPick(d));
+    grid.appendChild(btn);
   }
-  html += `</div><div class="date-picker-foot">
-    <button type="button" class="date-picker-today" data-dp-today>\u4ECA\u5929</button>
-    <button type="button" class="date-picker-clear" data-dp-clear>\u6E05\u9664</button>
-  </div>`;
-  panel.innerHTML = html;
-  panel.querySelector('[data-dp-nav="-1"]')?.addEventListener("click", () => {
+  const foot = document.createElement("div");
+  foot.className = "date-picker-foot";
+  const todayBtn = document.createElement("button");
+  todayBtn.type = "button";
+  todayBtn.className = "date-picker-today";
+  todayBtn.textContent = "\u4ECA\u5929";
+  const clearBtn = document.createElement("button");
+  clearBtn.type = "button";
+  clearBtn.className = "date-picker-clear";
+  clearBtn.textContent = "\u6E05\u9664";
+  foot.append(todayBtn, clearBtn);
+  panel.append(head, weekdays, grid, foot);
+  prevBtn.addEventListener("click", () => {
     ctx.view = new Date(year, month - 1, 15);
     renderCalendar(panel, { ...ctx, view: ctx.view });
   });
-  panel.querySelector('[data-dp-nav="1"]')?.addEventListener("click", () => {
+  nextBtn.addEventListener("click", () => {
     ctx.view = new Date(year, month + 1, 15);
     renderCalendar(panel, { ...ctx, view: ctx.view });
   });
-  panel.querySelectorAll("[data-dp-date]").forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const ds = btn.dataset.dpDate;
-      if (!ds) return;
-      const d = parseDateStr(ds);
-      if (d) onPick(d);
-    });
-  });
-  panel.querySelector("[data-dp-today]")?.addEventListener("click", () => {
+  todayBtn.addEventListener("click", () => {
     onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
   });
-  panel.querySelector("[data-dp-clear]")?.addEventListener("click", () => {
+  clearBtn.addEventListener("click", () => {
     onPick(null);
   });
 }
@@ -120,6 +177,11 @@ function closePanel() {
     window.removeEventListener("keydown", escHandler);
     escHandler = null;
   }
+  if (repositionHandler) {
+    window.removeEventListener("scroll", repositionHandler);
+    window.removeEventListener("resize", repositionHandler);
+    repositionHandler = null;
+  }
 }
 function setupPicker(container) {
   const el = container;
@@ -140,7 +202,12 @@ function setupPicker(container) {
     trigger = document.createElement("button");
     trigger.type = "button";
     trigger.className = "date-picker-trigger";
-    trigger.innerHTML = `<span class="date-picker-value${initialDate ? "" : " is-empty"}"></span><span class="date-picker-icon">${CAL_ICON}</span>`;
+    const value = document.createElement("span");
+    value.className = initialDate ? "date-picker-value" : "date-picker-value is-empty";
+    const icon = document.createElement("span");
+    icon.className = "date-picker-icon";
+    icon.appendChild(buildCalIcon());
+    trigger.append(value, icon);
     el.prepend(trigger);
   }
   trigger.setAttribute("aria-haspopup", "dialog");
@@ -169,7 +236,7 @@ function setupPicker(container) {
     const panel = ensurePanel();
     panel.hidden = false;
     const selected = hidden?.value ? parseDateStr(hidden.value) : null;
-    const view = selected ?? /* @__PURE__ */ new Date();
+    const view = selected ? new Date(selected.getTime()) : /* @__PURE__ */ new Date();
     view.setDate(15);
     positionPanel(panel, trigger);
     renderCalendar(panel, {
@@ -208,19 +275,20 @@ function setupPicker(container) {
       }
     };
     window.addEventListener("keydown", escHandler);
-    const reposition = () => {
-      if (openPicker === el && panel && !panel.hidden) positionPanel(panel, trigger);
+    repositionHandler = () => {
+      if (openPicker === el && !panel.hidden) positionPanel(panel, trigger);
     };
-    window.addEventListener("scroll", reposition, { passive: true, once: false });
-    window.addEventListener("resize", reposition, { passive: true });
+    window.addEventListener("scroll", repositionHandler, { passive: true });
+    window.addEventListener("resize", repositionHandler, { passive: true });
   });
 }
-function initDatePicker(root = document) {
+function initDatePicker(root) {
   if (typeof document === "undefined") return;
   if (typeof window === "undefined") return;
+  const scope = root ?? document;
   const pickers = [];
-  if (root instanceof Element && root.matches(".date-picker[data-date-picker]")) pickers.push(root);
-  pickers.push(...Array.from(root.querySelectorAll(".date-picker[data-date-picker]")));
+  if (scope instanceof Element && scope.matches(".date-picker[data-date-picker]")) pickers.push(scope);
+  pickers.push(...Array.from(scope.querySelectorAll(".date-picker[data-date-picker]")));
   for (const p of pickers) setupPicker(p);
 }
 export {

package/dist/behaviors/dropdown.d.mts

@@ -0,0 +1,4 @@
+/** 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。 */
+declare function initDropdown(root?: ParentNode): void;
+
+export { initDropdown };