@icen.ai/ui 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@icen.ai/ui",
-  version: "0.4.0",
+  version: "0.5.0",
   description: "Icen Design System \u2014 \u8BBE\u8BA1 tokens\uFF086 \u9884\u8BBE \xD7 \u660E\u6697\uFF09\u3001\u65E0\u6846\u67B6\u7EC4\u4EF6 CSS \u4E0E\u884C\u4E3A JS",
   repository: {
     type: "git",
@@ -456,9 +456,18 @@ function initCopy(root = document) {
 }
 
 // src/behaviors/input.ts
+var isComposing = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("compositionstart", () => {
+    isComposing = true;
+  });
+  document.addEventListener("compositionend", () => {
+    isComposing = false;
+  });
+}
 function setupClear(wrap) {
   const btn = wrap.querySelector(".input-clear");
-  const field = wrap.querySelector("input.input");
+  const field = wrap.querySelector("input.input, textarea.textarea");
   if (!btn || !field) return;
   btn.addEventListener("click", () => {
     field.value = "";
@@ -500,6 +509,140 @@ function setupAutosize(ta) {
   ta.addEventListener("input", () => resizeTextarea(ta));
   resizeTextarea(ta);
 }
+function setupCounter(field) {
+  const maxAttr = field.getAttribute("maxlength");
+  const dataCount = field.getAttribute("data-count");
+  if (!maxAttr && dataCount === null) return;
+  const max = maxAttr ? Number(maxAttr) : 0;
+  let counter = null;
+  const wrap = field.closest(".input-wrap, .textarea-wrap");
+  if (wrap) {
+    counter = wrap.querySelector(".input-counter");
+    if (!counter) {
+      counter = document.createElement("span");
+      counter.className = "input-counter";
+      wrap.appendChild(counter);
+      if (wrap.classList.contains("input-wrap")) {
+        wrap.classList.add("input-wrap--has-counter");
+      }
+    }
+  }
+  const counterEl = counter;
+  if (!counterEl) return;
+  function update() {
+    const len = field.value.length;
+    counterEl.textContent = max > 0 ? `${len} / ${max}` : `${len}`;
+    counterEl.classList.remove("is-warn", "is-error");
+    if (max > 0) {
+      const ratio = len / max;
+      if (ratio >= 1) counterEl.classList.add("is-error");
+      else if (ratio >= 0.8) counterEl.classList.add("is-warn");
+    }
+  }
+  field.addEventListener("input", () => {
+    if (!isComposing) update();
+  });
+  update();
+}
+function setupMask(field) {
+  const mask = field.getAttribute("data-mask");
+  if (!mask) return;
+  const maskChars = [];
+  for (const ch of mask) maskChars.push(ch);
+  function isInputSlot(ch) {
+    return ch === "#" || ch === "A" || ch === "*";
+  }
+  function validate(rawChar, slotType) {
+    if (slotType === "#") return /[0-9]/.test(rawChar);
+    if (slotType === "A") return /[a-zA-Z]/.test(rawChar);
+    return true;
+  }
+  function applyMask(input) {
+    let result = "";
+    let rawIdx = 0;
+    const rawChars = input.split("");
+    for (let i = 0; i < maskChars.length && rawIdx < rawChars.length; i++) {
+      const slot = maskChars[i];
+      if (isInputSlot(slot)) {
+        while (rawIdx < rawChars.length && !validate(rawChars[rawIdx], slot)) {
+          rawIdx++;
+        }
+        if (rawIdx < rawChars.length) {
+          result += rawChars[rawIdx];
+          rawIdx++;
+        }
+      } else {
+        result += slot;
+      }
+    }
+    return result;
+  }
+  function extractRaw(formatted) {
+    let raw = "";
+    for (let i = 0; i < formatted.length && i < maskChars.length; i++) {
+      if (isInputSlot(maskChars[i])) raw += formatted[i];
+    }
+    return raw;
+  }
+  let lastFormatted = applyMask(field.value);
+  field.value = lastFormatted;
+  field.setAttribute("data-raw-value", extractRaw(lastFormatted));
+  field.addEventListener("input", () => {
+    if (isComposing) return;
+    const cursorPos = field.selectionStart ?? 0;
+    const oldRaw = extractRaw(lastFormatted);
+    const newFull = field.value;
+    const newRaw = extractRaw(newFull);
+    const formatted = applyMask(newRaw);
+    field.value = formatted;
+    field.setAttribute("data-raw-value", extractRaw(formatted));
+    lastFormatted = formatted;
+    const rawDelta = newRaw.length - oldRaw.length;
+    let targetCursor = cursorPos;
+    if (rawDelta > 0) {
+      let count = 0;
+      for (let i = 0; i < formatted.length; i++) {
+        if (isInputSlot(maskChars[i])) {
+          count++;
+          if (count >= newRaw.length) {
+            targetCursor = i + 1;
+            break;
+          }
+        }
+      }
+    } else if (rawDelta < 0) {
+      targetCursor = Math.min(cursorPos, formatted.length);
+    }
+    field.setSelectionRange(targetCursor, targetCursor);
+  });
+  field.addEventListener("keydown", (ev) => {
+    if (isComposing) return;
+    if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+    if (["Backspace", "Delete", "Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End", "Enter"].includes(ev.key)) return;
+    const currentRaw = extractRaw(field.value);
+    const nextSlotIdx = maskChars.findIndex((ch, i) => {
+      if (!isInputSlot(ch)) return false;
+      return i >= field.value.length || !isInputSlot(maskChars[Math.min(field.value.length, maskChars.length - 1)]);
+    });
+    const nextSlot = maskChars.find((ch, i) => {
+      const filledSlots = maskChars.slice(0, i).filter(isInputSlot).length;
+      return isInputSlot(ch) && filledSlots >= currentRaw.length;
+    });
+    if (nextSlot && !validate(ev.key, nextSlot)) {
+      ev.preventDefault();
+    }
+  });
+}
+function setupTrim(field) {
+  if (!field.hasAttribute("data-trim")) return;
+  field.addEventListener("blur", () => {
+    const trimmed = field.value.trim();
+    if (trimmed !== field.value) {
+      field.value = trimmed;
+      field.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+}
 function setupOtp(group) {
   const el = group;
   if (el.__icenInputInit) return;
@@ -514,6 +657,7 @@ function setupOtp(group) {
     }
     syncFilled(cell);
     cell.addEventListener("input", () => {
+      if (isComposing) return;
       const ch = cell.value.slice(-1);
       cell.value = ch;
       syncFilled(cell);
@@ -568,6 +712,31 @@ function initInput(root = document) {
   if (root instanceof HTMLTextAreaElement && root.matches("[data-autosize]")) textareas.push(root);
   textareas.push(...Array.from(root.querySelectorAll("textarea[data-autosize]")));
   for (const ta of textareas) setupAutosize(ta);
+  const countedFields = [];
+  if (root instanceof Element) {
+    const fields = Array.from(root.querySelectorAll(
+      "input[maxlength], input[data-count], textarea[maxlength], textarea[data-count]"
+    ));
+    countedFields.push(...fields);
+    if (root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) {
+      if (root.hasAttribute("maxlength") || root.hasAttribute("data-count")) countedFields.push(root);
+    }
+  }
+  for (const f of countedFields) setupCounter(f);
+  const maskedInputs = [];
+  if (root instanceof Element) {
+    maskedInputs.push(...Array.from(root.querySelectorAll("input[data-mask]")));
+    if (root instanceof HTMLInputElement && root.hasAttribute("data-mask")) maskedInputs.push(root);
+  }
+  for (const inp of maskedInputs) setupMask(inp);
+  const trimFields = [];
+  if (root instanceof Element) {
+    trimFields.push(...Array.from(root.querySelectorAll("[data-trim]")));
+    if ((root instanceof HTMLInputElement || root instanceof HTMLTextAreaElement) && root.hasAttribute("data-trim")) {
+      trimFields.push(root);
+    }
+  }
+  for (const f of trimFields) setupTrim(f);
   const otps = [];
   if (root instanceof Element && root.matches(".otp")) otps.push(root);
   otps.push(...Array.from(root.querySelectorAll(".otp")));
@@ -580,27 +749,44 @@ function setup2(container) {
   if (el.__icenSelectInit) return;
   el.__icenSelectInit = true;
   const triggerEl = container.querySelector(".select-trigger");
-  const panelEl = container.querySelector(".select-panel");
+  const panelEl2 = container.querySelector(".select-panel");
   const valueEl = container.querySelector(".select-value");
   const hiddenInput = container.querySelector("input[data-select-value]");
-  if (!triggerEl || !panelEl) return;
+  if (!triggerEl || !panelEl2) return;
   const trigger = triggerEl;
-  const panel2 = panelEl;
-  const options = () => Array.from(panel2.querySelectorAll(".select-option"));
-  const isOpen = () => !panel2.hidden;
+  const panel2 = panelEl2;
+  const isMultiple = container.hasAttribute("data-select-multiple");
+  const isSearchable = container.hasAttribute("data-select-search");
+  const maxSelect = Number(container.getAttribute("data-select-max")) || 0;
+  const placeholder = container.getAttribute("data-select-placeholder") ?? (valueEl?.classList.contains("is-empty") ? valueEl?.textContent ?? "" : "");
+  let searchInput = null;
   let focusIdx = -1;
+  if (isSearchable && !panel2.querySelector(".select-search-input")) {
+    const searchWrap = document.createElement("div");
+    searchWrap.className = "select-search";
+    const input = document.createElement("input");
+    input.className = "select-search-input";
+    input.type = "search";
+    input.placeholder = "\u641C\u7D22\u2026";
+    searchWrap.appendChild(input);
+    panel2.insertBefore(searchWrap, panel2.firstChild);
+  }
+  searchInput = panel2.querySelector(".select-search-input");
+  const allOptions = () => Array.from(panel2.querySelectorAll(".select-option"));
+  const visibleOptions = () => allOptions().filter((o) => !o.hidden);
+  const isOpen = () => !panel2.hidden;
   function setFocus(idx) {
-    const opts = options();
+    const opts = visibleOptions();
     focusIdx = Math.max(-1, Math.min(idx, opts.length - 1));
     opts.forEach((o, i) => o.classList.toggle("is-focused", i === focusIdx));
     const cur = focusIdx >= 0 ? opts[focusIdx] : void 0;
     cur?.scrollIntoView({ block: "nearest" });
   }
   function firstEnabled() {
-    return options().findIndex((o) => !o.classList.contains("is-disabled"));
+    return visibleOptions().findIndex((o) => !o.classList.contains("is-disabled"));
   }
   function moveFocus(delta) {
-    const opts = options();
+    const opts = visibleOptions();
     if (opts.length === 0) return;
     let n = focusIdx;
     for (let guard = 0; guard < opts.length; guard++) {
@@ -610,38 +796,135 @@ function setup2(container) {
     }
     setFocus(n);
   }
+  let emptyEl = panel2.querySelector(".select-empty");
+  if (!emptyEl) {
+    emptyEl = document.createElement("div");
+    emptyEl.className = "select-empty";
+    emptyEl.textContent = "\u65E0\u5339\u914D\u9879";
+    emptyEl.hidden = true;
+    panel2.appendChild(emptyEl);
+  }
+  function updateEmptyState() {
+    const hasVisible = visibleOptions().length > 0;
+    if (emptyEl) emptyEl.hidden = hasVisible;
+  }
+  function filterOptions(query) {
+    const q = query.trim().toLowerCase();
+    const groups = Array.from(panel2.querySelectorAll(".select-group"));
+    for (const opt of allOptions()) {
+      const text = (opt.textContent ?? "").toLowerCase();
+      const kw = (opt.getAttribute("data-keywords") ?? "").toLowerCase();
+      opt.hidden = q !== "" && !text.includes(q) && !kw.includes(q);
+    }
+    for (const g of groups) {
+      const hasVisible = Array.from(g.querySelectorAll(".select-option")).some((o) => !o.hidden);
+      g.hidden = !hasVisible;
+    }
+    updateEmptyState();
+    setFocus(firstEnabled());
+  }
+  if (searchInput) {
+    searchInput.addEventListener("input", () => filterOptions(searchInput.value));
+    searchInput.addEventListener("keydown", (ev) => {
+      if (ev.key === "Escape") {
+        ev.stopPropagation();
+        searchInput.value = "";
+        filterOptions("");
+        searchInput.focus();
+      }
+    });
+  }
   function openPanel() {
     if (isOpen()) return;
     panel2.hidden = false;
     container.classList.add("is-open");
     trigger.setAttribute("aria-expanded", "true");
-    const sel = options().findIndex((o) => o.classList.contains("is-selected"));
-    setFocus(sel >= 0 ? sel : firstEnabled());
+    if (searchInput) {
+      searchInput.value = "";
+      filterOptions("");
+      setTimeout(() => searchInput?.focus(), 0);
+    } else {
+      const sel = allOptions().findIndex((o) => o.classList.contains("is-selected"));
+      setFocus(sel >= 0 ? sel : firstEnabled());
+    }
   }
-  function closePanel() {
+  function closePanel2() {
     if (!isOpen()) return;
     panel2.hidden = true;
     container.classList.remove("is-open");
     trigger.setAttribute("aria-expanded", "false");
     setFocus(-1);
   }
-  function choose(opt) {
-    if (opt.classList.contains("is-disabled")) return;
-    options().forEach((o) => o.classList.toggle("is-selected", o === opt));
-    if (valueEl) {
-      valueEl.textContent = opt.textContent ?? "";
+  function getSelectedValues() {
+    return allOptions().filter((o) => o.classList.contains("is-selected")).map((o) => o.getAttribute("data-value") ?? "");
+  }
+  function updateMultiTrigger() {
+    if (!valueEl) return;
+    const selected = allOptions().filter((o) => o.classList.contains("is-selected"));
+    if (selected.length === 0) {
+      valueEl.textContent = placeholder;
+      valueEl.classList.add("is-empty");
+      container.removeAttribute("data-value");
+    } else {
       valueEl.classList.remove("is-empty");
+      const maxLabel = Number(container.getAttribute("data-select-max-label")) || 2;
+      if (selected.length <= maxLabel) {
+        valueEl.textContent = selected.map((o) => o.textContent ?? "").join("\u3001");
+      } else {
+        valueEl.textContent = `\u5DF2\u9009 ${selected.length} \u9879`;
+      }
     }
-    const v = opt.getAttribute("data-value") ?? "";
-    container.setAttribute("data-value", v);
-    if (hiddenInput) {
-      hiddenInput.value = v;
-      hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+    if (maxSelect > 0) {
+      const atMax = selected.length >= maxSelect;
+      allOptions().forEach((o) => {
+        if (!o.classList.contains("is-selected")) {
+          o.classList.toggle("is-disabled", atMax);
+        }
+      });
     }
-    closePanel();
-    trigger.focus();
   }
-  trigger.addEventListener("click", () => isOpen() ? closePanel() : openPanel());
+  function syncHiddenInput() {
+    if (!hiddenInput) return;
+    const values = getSelectedValues();
+    hiddenInput.value = isMultiple ? values.join(",") : values[0] ?? "";
+    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  function choose(opt) {
+    if (opt.classList.contains("is-disabled")) return;
+    if (isMultiple) {
+      opt.classList.toggle("is-selected");
+      container.setAttribute(
+        "data-value",
+        getSelectedValues().join(",")
+      );
+      updateMultiTrigger();
+      syncHiddenInput();
+      if (searchInput) searchInput.focus();
+      else opt.focus();
+    } else {
+      allOptions().forEach((o) => o.classList.toggle("is-selected", o === opt));
+      if (valueEl) {
+        valueEl.textContent = opt.textContent ?? "";
+        valueEl.classList.remove("is-empty");
+      }
+      const v = opt.getAttribute("data-value") ?? "";
+      container.setAttribute("data-value", v);
+      syncHiddenInput();
+      closePanel2();
+      trigger.focus();
+    }
+  }
+  const clearBtn = container.querySelector(".select-clear");
+  if (clearBtn && isMultiple) {
+    clearBtn.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      allOptions().forEach((o) => o.classList.remove("is-selected"));
+      updateMultiTrigger();
+      syncHiddenInput();
+    });
+    clearBtn.addEventListener("pointerdown", (ev) => ev.stopPropagation());
+  }
+  trigger.addEventListener("click", () => isOpen() ? closePanel2() : openPanel());
   trigger.addEventListener("keydown", (ev) => {
     if (!isOpen()) {
       if (ev.key === "ArrowDown" || ev.key === "ArrowUp" || ev.key === "Enter" || ev.key === " ") {
@@ -650,6 +933,20 @@ function setup2(container) {
       }
       return;
     }
+    if (searchInput && document.activeElement === searchInput) {
+      if (ev.key === "ArrowDown") {
+        ev.preventDefault();
+        moveFocus(1);
+      } else if (ev.key === "ArrowUp") {
+        ev.preventDefault();
+        moveFocus(-1);
+      } else if (ev.key === "Enter") {
+        ev.preventDefault();
+        const opt = visibleOptions()[focusIdx];
+        if (opt) choose(opt);
+      }
+      return;
+    }
     switch (ev.key) {
       case "ArrowDown":
         ev.preventDefault();
@@ -662,13 +959,13 @@ function setup2(container) {
       case "Enter":
       case " ": {
         ev.preventDefault();
-        const opt = options()[focusIdx];
+        const opt = visibleOptions()[focusIdx];
         if (opt) choose(opt);
         break;
       }
       case "Escape":
         ev.preventDefault();
-        closePanel();
+        closePanel2();
         break;
     }
   });
@@ -682,19 +979,20 @@ function setup2(container) {
     const t = ev.target;
     if (!(t instanceof Element)) return;
     const opt = t.closest(".select-option");
-    if (!opt) return;
-    const idx = options().indexOf(opt);
+    if (!opt || opt.hidden) return;
+    const idx = visibleOptions().indexOf(opt);
     if (idx >= 0 && !opt.classList.contains("is-disabled")) setFocus(idx);
   });
   document.addEventListener("pointerdown", (ev) => {
-    if (isOpen() && ev.target instanceof Node && !container.contains(ev.target)) closePanel();
+    if (isOpen() && ev.target instanceof Node && !container.contains(ev.target)) closePanel2();
   });
   document.addEventListener("keydown", (ev) => {
     if (ev.key === "Escape" && isOpen()) {
-      closePanel();
+      closePanel2();
       trigger.focus();
     }
   });
+  if (isMultiple) updateMultiTrigger();
 }
 function initSelect(root = document) {
   if (typeof document === "undefined") return;
@@ -890,47 +1188,198 @@ function initTagInput(root = document) {
 }
 
 // src/behaviors/upload.ts
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function isAccepted(file, accept) {
+  if (!accept.trim()) return true;
+  const types = accept.split(",").map((t) => t.trim().toLowerCase());
+  const fileName = file.name.toLowerCase();
+  const mime = file.type.toLowerCase();
+  return types.some((t) => {
+    if (t.startsWith(".")) return fileName.endsWith(t);
+    if (t.endsWith("/*")) return mime.startsWith(t.slice(0, -1));
+    return mime === t;
+  });
+}
+var fileIconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+var xIconSvg = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
 function setup5(zone) {
   const el = zone;
   if (el.__icenUploadInit) return;
   el.__icenUploadInit = true;
   const input = zone.querySelector('input[type="file"]');
   if (!input) return;
-  const openPicker = () => input.click();
+  const hasList = zone.hasAttribute("data-upload-list");
+  const maxSize = Number(zone.getAttribute("data-max-size")) || 0;
+  const maxFiles = Number(zone.getAttribute("data-max-files")) || 0;
+  const accept = input.getAttribute("accept") ?? "";
+  let currentFiles = [];
+  const urlMap = /* @__PURE__ */ new Map();
+  function getListEl() {
+    if (!hasList) return null;
+    let list = zone.querySelector(".upload-list");
+    if (!list) {
+      list = document.createElement("ul");
+      list.className = "upload-list";
+      zone.appendChild(list);
+    }
+    return list;
+  }
+  function renderList() {
+    const list = getListEl();
+    if (!list) return;
+    urlMap.forEach((url) => URL.revokeObjectURL(url));
+    urlMap.clear();
+    list.textContent = "";
+    if (currentFiles.length === 0) {
+      list.hidden = true;
+      return;
+    }
+    list.hidden = false;
+    for (const file of currentFiles) {
+      const li = document.createElement("li");
+      li.className = "upload-list-item";
+      const isImage = file.type.startsWith("image/");
+      if (isImage) {
+        try {
+          const url = URL.createObjectURL(file);
+          urlMap.set(file, url);
+          const img = document.createElement("img");
+          img.className = "upload-list-item-thumb";
+          img.src = url;
+          img.alt = file.name;
+          li.appendChild(img);
+        } catch {
+          const icon = document.createElement("span");
+          icon.className = "upload-list-item-icon";
+          icon.innerHTML = fileIconSvg;
+          li.appendChild(icon);
+        }
+      } else {
+        const icon = document.createElement("span");
+        icon.className = "upload-list-item-icon";
+        icon.innerHTML = fileIconSvg;
+        li.appendChild(icon);
+      }
+      const info = document.createElement("div");
+      info.className = "upload-list-item-info";
+      const name = document.createElement("span");
+      name.className = "upload-list-item-name";
+      name.textContent = file.name;
+      const size = document.createElement("span");
+      size.className = "upload-list-item-size";
+      size.textContent = formatSize(file.size);
+      info.appendChild(name);
+      info.appendChild(size);
+      li.appendChild(info);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "upload-list-item-x";
+      removeBtn.type = "button";
+      removeBtn.setAttribute("aria-label", `\u79FB\u9664 ${file.name}`);
+      removeBtn.innerHTML = xIconSvg;
+      removeBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        currentFiles = currentFiles.filter((f) => f !== file);
+        zone.dispatchEvent(new CustomEvent("icen:upload-remove", { bubbles: true, detail: { file } }));
+        renderList();
+        syncInputFiles();
+      });
+      li.appendChild(removeBtn);
+      list.appendChild(li);
+    }
+  }
+  function syncInputFiles() {
+    try {
+      const dt = new DataTransfer();
+      for (const f of currentFiles) dt.items.add(f);
+      input.files = dt.files;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    } catch {
+    }
+  }
+  function validate(file) {
+    if (accept && !isAccepted(file, accept)) return "\u6587\u4EF6\u7C7B\u578B\u4E0D\u652F\u6301";
+    if (maxSize > 0 && file.size > maxSize) return `\u6587\u4EF6\u8D85\u8FC7 ${formatSize(maxSize)}`;
+    return null;
+  }
+  function handleFiles(files) {
+    const valid = [];
+    for (const file of files) {
+      const reason = validate(file);
+      if (reason) {
+        zone.dispatchEvent(new CustomEvent("icen:upload-error", { bubbles: true, detail: { file, reason } }));
+        continue;
+      }
+      valid.push(file);
+    }
+    if (valid.length === 0) return;
+    if (hasList) {
+      if (maxFiles > 0) {
+        const remaining = maxFiles - currentFiles.length;
+        if (remaining <= 0) {
+          zone.dispatchEvent(new CustomEvent("icen:upload-error", {
+            bubbles: true,
+            detail: { reason: `\u6700\u591A ${maxFiles} \u4E2A\u6587\u4EF6` }
+          }));
+          return;
+        }
+        valid.splice(remaining);
+      }
+      currentFiles.push(...valid);
+      renderList();
+      syncInputFiles();
+    }
+    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: valid } }));
+  }
+  const openPicker2 = () => input.click();
   zone.addEventListener("click", (ev) => {
     if (ev.target === input) return;
-    openPicker();
+    const tgt = ev.target;
+    if (tgt instanceof Element && tgt.closest(".upload-list")) return;
+    openPicker2();
   });
   zone.addEventListener("keydown", (ev) => {
     if (ev.key === "Enter" || ev.key === " ") {
       ev.preventDefault();
-      openPicker();
+      openPicker2();
+    }
+  });
+  input.addEventListener("change", () => {
+    if (!input.files) return;
+    const files = Array.from(input.files);
+    if (hasList) {
+      handleFiles(files);
+      input.value = "";
+    } else {
+      handleFiles(files);
     }
   });
   zone.addEventListener("dragover", (ev) => {
     ev.preventDefault();
     zone.classList.add("is-drag");
   });
-  zone.addEventListener("dragleave", () => zone.classList.remove("is-drag"));
+  zone.addEventListener("dragleave", (ev) => {
+    if (ev.target === zone) zone.classList.remove("is-drag");
+  });
   zone.addEventListener("drop", (ev) => {
     ev.preventDefault();
     zone.classList.remove("is-drag");
     const files = ev.dataTransfer?.files;
     if (!files || files.length === 0) return;
-    let assigned = false;
-    try {
-      const dt = new DataTransfer();
-      for (const f of Array.from(files)) dt.items.add(f);
-      input.files = dt.files;
-      assigned = true;
-    } catch {
-      assigned = false;
-    }
-    if (assigned) {
-      input.dispatchEvent(new Event("change", { bubbles: true }));
+    handleFiles(Array.from(files));
+    if (!hasList) {
+      try {
+        const dt = new DataTransfer();
+        for (const f of Array.from(files)) dt.items.add(f);
+        input.files = dt.files;
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      } catch {
+      }
     }
-    const list = Array.from(files);
-    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: list } }));
   });
 }
 function initUpload(root = document) {
@@ -1997,19 +2446,19 @@ function renderLine(el, opts) {
   const values = opts.values.slice(0, n);
   const width = 360;
   const height = 150;
-  const pad = 14;
+  const pad2 = 14;
   const max = Math.max(...values, 1);
   const tone = toneVar(opts.tone);
   const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
+    x: values.length <= 1 ? width / 2 : pad2 + i / (values.length - 1) * (width - pad2 * 2),
+    y: height - pad2 - value / max * (height - pad2 * 2),
     value,
     label: labels[i] ?? ""
   }));
   const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
   const last = points[points.length - 1];
   const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const area = `${line} L${last.x.toFixed(1)},${height - pad2} L${first.x.toFixed(1)},${height - pad2} Z`;
   const gradientId = `icen-chart-line-${++lineGradientSeq}`;
   const wrap = document.createElement("div");
   wrap.className = "chart-line";
@@ -2021,10 +2470,10 @@ function renderLine(el, opts) {
   defs.appendChild(gradient);
   svg.appendChild(defs);
   for (let i = 0; i < 4; i++) {
-    const y = pad + i * (height - pad * 2) / 3;
+    const y = pad2 + i * (height - pad2 * 2) / 3;
     svg.appendChild(svgEl("line", {
-      x1: String(pad),
-      x2: String(width - pad),
+      x1: String(pad2),
+      x2: String(width - pad2),
       y1: String(y),
       y2: String(y),
       stroke: "var(--token-line-soft)",
@@ -2069,19 +2518,19 @@ function renderArea(el, opts) {
   const values = opts.values.slice(0, n);
   const width = 360;
   const height = 150;
-  const pad = 14;
+  const pad2 = 14;
   const max = Math.max(...values, 1);
   const tone = toneVar(opts.tone);
   const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
+    x: values.length <= 1 ? width / 2 : pad2 + i / (values.length - 1) * (width - pad2 * 2),
+    y: height - pad2 - value / max * (height - pad2 * 2),
     value,
     label: labels[i] ?? ""
   }));
   const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
   const last = points[points.length - 1];
   const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const area = `${line} L${last.x.toFixed(1)},${height - pad2} L${first.x.toFixed(1)},${height - pad2} Z`;
   const gradientId = `icen-chart-area-${++lineGradientSeq}`;
   const wrap = document.createElement("div");
   wrap.className = "chart-area";
@@ -2093,10 +2542,10 @@ function renderArea(el, opts) {
   defs.appendChild(gradient);
   svg.appendChild(defs);
   for (let i = 0; i < 4; i++) {
-    const y = pad + i * (height - pad * 2) / 3;
+    const y = pad2 + i * (height - pad2 * 2) / 3;
     svg.appendChild(svgEl("line", {
-      x1: String(pad),
-      x2: String(width - pad),
+      x1: String(pad2),
+      x2: String(width - pad2),
       y1: String(y),
       y2: String(y),
       stroke: "var(--token-line-soft)",
@@ -2276,8 +2725,8 @@ function renderHeatmap(el, opts) {
   grid.className = "chart-heatmap-grid";
   grid.setAttribute("role", "img");
   const first = /* @__PURE__ */ new Date(`${entries[0].date}T00:00:00`);
-  const pad = (first.getDay() + 6) % 7;
-  for (let i = 0; i < pad; i++) {
+  const pad2 = (first.getDay() + 6) % 7;
+  for (let i = 0; i < pad2; i++) {
     const blank = document.createElement("span");
     blank.className = "chart-heatmap-cell is-blank";
     grid.appendChild(blank);
@@ -2316,18 +2765,18 @@ function renderSparkline(el, opts) {
   }
   const width = 96;
   const height = 28;
-  const pad = 3;
+  const pad2 = 3;
   const max = Math.max(...values, 1);
   const tone = toneVar(opts.tone);
   const points = values.map((value, i) => ({
-    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
-    y: height - pad - value / max * (height - pad * 2),
+    x: values.length <= 1 ? width / 2 : pad2 + i / (values.length - 1) * (width - pad2 * 2),
+    y: height - pad2 - value / max * (height - pad2 * 2),
     value
   }));
   const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
   const last = points[points.length - 1];
   const first = points[0];
-  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const area = `${line} L${last.x.toFixed(1)},${height - pad2} L${first.x.toFixed(1)},${height - pad2} Z`;
   const gradientId = `icen-chart-line-${++lineGradientSeq}`;
   const wrap = document.createElement("div");
   wrap.className = "chart-sparkline";
@@ -2500,6 +2949,1337 @@ function initSidebar(root = document) {
   for (const s of sidebars) setup10(s);
 }
 
+// src/behaviors/notification.ts
+var KIND_ICON = {
+  success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
+  warning: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+  error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+  info: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'
+};
+var CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+var PROGRESS_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>';
+var cfg = {
+  position: "top-right",
+  maxStack: 5,
+  pauseOnHover: true,
+  persist: false,
+  sound: false
+};
+var store = /* @__PURE__ */ new Map();
+var globalInit = { done: false };
+function isBrowser3() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function genId() {
+  return "notif-" + Math.random().toString(36).slice(2, 10);
+}
+function ensureContainer2() {
+  const sel = `.notification-container[data-notif-default]`;
+  const existing = document.body.querySelector(sel);
+  if (existing) {
+    syncContainerPosition(existing);
+    return existing;
+  }
+  const el = document.createElement("div");
+  el.className = "notification-container";
+  el.setAttribute("role", "region");
+  el.setAttribute("aria-label", "\u901A\u77E5");
+  el.dataset.notifDefault = "";
+  syncContainerPosition(el);
+  document.body.appendChild(el);
+  return el;
+}
+function syncContainerPosition(el) {
+  el.dataset.position = cfg.position;
+}
+var DEFAULT_PERSIST_KEY = "icen.ui.notifications";
+function persistKey() {
+  if (cfg.persist === true) return DEFAULT_PERSIST_KEY;
+  if (typeof cfg.persist === "string") return cfg.persist;
+  return null;
+}
+function persistSave() {
+  const key = persistKey();
+  if (!key) return;
+  try {
+    const items = Array.from(store.values()).filter((r) => !r.opts.duration || r.opts.duration === 0).map((r) => ({
+      id: r.id,
+      title: r.title,
+      kind: r.kind,
+      description: r.opts.description ?? "",
+      tag: r.opts.tag,
+      unread: r.opts.unread,
+      priority: r.opts.priority,
+      progress: r.opts.progress,
+      progressLabel: r.opts.progressLabel,
+      link: r.opts.link,
+      linkLabel: r.opts.linkLabel,
+      data: r.opts.data,
+      createdAt: r.createdAt
+    }));
+    localStorage.setItem(key, JSON.stringify(items));
+  } catch {
+  }
+}
+function persistLoad() {
+  const key = persistKey();
+  if (!key) return [];
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr : [];
+  } catch {
+    return [];
+  }
+}
+var audioCtx = null;
+function playSound() {
+  if (!cfg.sound) return;
+  try {
+    if (typeof cfg.sound === "string") {
+      const audio = new Audio(cfg.sound);
+      void audio.play();
+      return;
+    }
+    if (!audioCtx) {
+      const Ctor = window.AudioContext ?? window.webkitAudioContext;
+      if (!Ctor) return;
+      audioCtx = new Ctor();
+    }
+    if (audioCtx.state === "suspended") void audioCtx.resume();
+    const now = audioCtx.currentTime;
+    [880, 1320].forEach((freq, i) => {
+      const osc = audioCtx.createOscillator();
+      const gain = audioCtx.createGain();
+      osc.connect(gain);
+      gain.connect(audioCtx.destination);
+      osc.frequency.value = freq;
+      osc.type = "sine";
+      const t = now + i * 0.08;
+      gain.gain.setValueAtTime(0, t);
+      gain.gain.linearRampToValueAtTime(0.08, t + 0.01);
+      gain.gain.exponentialRampToValueAtTime(1e-3, t + 0.12);
+      osc.start(t);
+      osc.stop(t + 0.13);
+    });
+  } catch {
+  }
+}
+function buildIcon(record) {
+  const wrap = document.createElement("span");
+  wrap.className = "notification-icon";
+  wrap.setAttribute("aria-hidden", "true");
+  const { icon, avatar } = record.opts;
+  if (avatar) {
+    const img = document.createElement("img");
+    img.className = "notification-avatar";
+    img.src = avatar;
+    img.alt = "";
+    img.loading = "lazy";
+    wrap.appendChild(img);
+    return wrap;
+  }
+  if (icon === false) {
+    wrap.style.display = "none";
+    return wrap;
+  }
+  if (typeof icon === "string" && icon.length > 0) {
+    if (/^https?:\/\/|^data:image\//.test(icon) || icon.endsWith(".png") || icon.endsWith(".jpg") || icon.endsWith(".svg") || icon.endsWith(".webp")) {
+      const img = document.createElement("img");
+      img.className = "notification-avatar";
+      img.src = icon;
+      img.alt = "";
+      wrap.appendChild(img);
+    } else {
+      wrap.innerHTML = icon;
+    }
+    return wrap;
+  }
+  if (record.opts.progress !== void 0 && record.opts.progress >= 0) {
+    wrap.innerHTML = PROGRESS_ICON;
+  } else {
+    wrap.innerHTML = KIND_ICON[record.kind];
+  }
+  return wrap;
+}
+function buildTitle(title) {
+  const el = document.createElement("p");
+  el.className = "notification-title";
+  el.textContent = title;
+  return el;
+}
+function buildDescription(text) {
+  const el = document.createElement("p");
+  el.className = "notification-message";
+  el.style.whiteSpace = "pre-wrap";
+  el.textContent = text;
+  return el;
+}
+function buildActions(record, getHandle) {
+  const actions = record.opts.actions?.length ? record.opts.actions : record.opts.actionLabel ? [{ label: record.opts.actionLabel, onClick: record.opts.onAction }] : null;
+  if (!actions || actions.length === 0) return null;
+  const wrap = document.createElement("div");
+  wrap.className = "notification-actions";
+  for (const a of actions) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "notification-action";
+    if (a.type === "primary") btn.classList.add("notification-action--primary");
+    else if (a.type === "danger") btn.classList.add("notification-action--danger");
+    btn.textContent = a.label;
+    btn.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      const h = getHandle();
+      if (a.onClick) {
+        const ret = a.onClick();
+        if (ret === false) return;
+      }
+      if (!a.keepOpen) dismissRecord(record.id);
+      else void h;
+    });
+    wrap.appendChild(btn);
+  }
+  return wrap;
+}
+function buildLink(record) {
+  const { link, linkLabel } = record.opts;
+  if (!link) return null;
+  const wrap = document.createElement("div");
+  wrap.className = "notification-link-wrap";
+  const a = document.createElement("a");
+  a.className = "notification-link";
+  a.href = link;
+  a.textContent = linkLabel ?? "\u67E5\u770B\u8BE6\u60C5";
+  a.addEventListener("click", (ev) => ev.stopPropagation());
+  wrap.appendChild(a);
+  return wrap;
+}
+function buildProgressBar(record) {
+  const { progress, progressLabel } = record.opts;
+  if (progress === void 0 || progress < 0) return null;
+  const wrap = document.createElement("div");
+  wrap.className = "notification-progress";
+  const track = document.createElement("div");
+  track.className = "notification-progress-track";
+  const fill = document.createElement("div");
+  fill.className = "notification-progress-bar";
+  const pct3 = Math.min(100, Math.max(0, progress * 100));
+  fill.style.width = pct3 + "%";
+  track.appendChild(fill);
+  wrap.appendChild(track);
+  if (progressLabel) {
+    const lbl = document.createElement("span");
+    lbl.className = "notification-progress-label";
+    lbl.textContent = progressLabel;
+    wrap.appendChild(lbl);
+  } else if (progress > 0) {
+    const lbl = document.createElement("span");
+    lbl.className = "notification-progress-label";
+    lbl.textContent = Math.round(pct3) + "%";
+    wrap.appendChild(lbl);
+  }
+  return wrap;
+}
+function buildCountdownBar(record) {
+  if (!record.duration || record.duration <= 0) return null;
+  if (record.opts.showCountdown === false) return null;
+  const bar = document.createElement("div");
+  bar.className = "notification-countdown";
+  bar.setAttribute("aria-hidden", "true");
+  const fill = document.createElement("div");
+  fill.className = "notification-countdown-fill";
+  fill.style.animationDuration = record.duration + "ms";
+  fill.style.animationPlayState = "running";
+  bar.appendChild(fill);
+  return bar;
+}
+function buildClose(record) {
+  if (record.opts.closable === false) return null;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "notification-close";
+  btn.setAttribute("aria-label", "\u5173\u95ED");
+  btn.innerHTML = CLOSE_SVG;
+  btn.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    dismissRecord(record.id);
+  });
+  return btn;
+}
+function renderNotification(record, container, getHandle) {
+  const el = document.createElement("div");
+  let cls = record.kind === "info" ? "notification" : `notification notif--${record.kind}`;
+  if (record.opts.priority === "high") cls += " is-priority";
+  if (record.opts.unread) cls += " is-unread";
+  if (record.opts.progress !== void 0 && record.opts.progress >= 0) cls += " is-progress";
+  if (record.opts.avatar) cls += " has-avatar";
+  if (record.opts.onClick) {
+    cls += " is-clickable";
+    el.setAttribute("role", "button");
+    el.tabIndex = 0;
+  } else {
+    el.setAttribute("role", "alert");
+  }
+  el.className = cls;
+  el.id = record.id;
+  const icon = buildIcon(record);
+  el.appendChild(icon);
+  const content = document.createElement("div");
+  content.className = "notification-content";
+  content.appendChild(buildTitle(record.title));
+  if (record.opts.description) content.appendChild(buildDescription(record.opts.description));
+  const actions = buildActions(record, getHandle);
+  if (actions) content.appendChild(actions);
+  const link = buildLink(record);
+  if (link) content.appendChild(link);
+  const progress = buildProgressBar(record);
+  if (progress) content.appendChild(progress);
+  el.appendChild(content);
+  const close = buildClose(record);
+  if (close) el.appendChild(close);
+  const countdown = buildCountdownBar(record);
+  if (countdown) el.appendChild(countdown);
+  if (record.opts.onClick) {
+    const onClick2 = record.opts.onClick;
+    const handleClick = () => onClick2(getHandle());
+    el.addEventListener("click", handleClick);
+    el.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        handleClick();
+      }
+    });
+  }
+  record.el = el;
+  return el;
+}
+function pushToContainer(container, el, priority) {
+  if (priority === "high") {
+    const firstNormal = Array.from(container.children).find(
+      (c) => c instanceof HTMLElement && !c.classList.contains("is-priority")
+    );
+    if (firstNormal) container.insertBefore(el, firstNormal);
+    else container.appendChild(el);
+  } else {
+    container.appendChild(el);
+  }
+}
+function removeOne(el, onClose) {
+  if (el.classList.contains("leaving")) return;
+  el.classList.add("leaving");
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.remove();
+    onClose?.();
+  };
+  el.addEventListener("transitionend", finish, { once: true });
+  window.setTimeout(finish, 360);
+}
+function trimStack2(container) {
+  for (; ; ) {
+    const items = Array.from(container.querySelectorAll(":scope > .notification"));
+    if (items.length <= cfg.maxStack) return;
+    const target = items.find((it) => !it.classList.contains("is-priority")) ?? items[0];
+    if (!target) return;
+    removeOne(target);
+  }
+}
+function attachTimer(record, handle) {
+  if (!record.duration || record.duration <= 0) return;
+  const el = record.el;
+  if (!el) return;
+  const start = () => {
+    if (record.timer) window.clearTimeout(record.timer);
+    record.timer = window.setTimeout(() => dismissRecord(record.id), record.remaining);
+    record.paused = false;
+  };
+  const pause = () => {
+    if (record.paused) return;
+    if (record.timer) {
+      window.clearTimeout(record.timer);
+      record.timer = 0;
+    }
+    record.paused = true;
+    el.classList.add("is-paused");
+    const fill = el.querySelector(".notification-countdown-fill");
+    if (fill) fill.style.animationPlayState = "paused";
+  };
+  const resume = () => {
+    if (!record.paused) return;
+    el.classList.remove("is-paused");
+    const fill = el.querySelector(".notification-countdown-fill");
+    if (fill) fill.style.animationPlayState = "running";
+    start();
+  };
+  const pauseOnHover = record.opts.pauseOnHover ?? cfg.pauseOnHover;
+  if (pauseOnHover) {
+    el.addEventListener("mouseenter", () => handle.pause());
+    el.addEventListener("mouseleave", () => handle.resume());
+  }
+  handle.pause = pause;
+  handle.resume = resume;
+  start();
+}
+function makeHandle(record) {
+  const handle = {
+    id: record.id,
+    el: record.el ?? document.createElement("div"),
+    dismiss: () => dismissRecord(record.id),
+    update: (patch) => updateRecord(record.id, patch),
+    setProgress: (value, label) => updateRecord(record.id, {
+      progress: Math.min(1, Math.max(0, value)),
+      progressLabel: label
+    }),
+    markRead: () => updateRecord(record.id, { unread: false }),
+    pause: () => {
+    },
+    resume: () => {
+    }
+  };
+  return handle;
+}
+function showRecord(title, kind, opts) {
+  if (!isBrowser3()) return null;
+  const container = ensureContainer2();
+  const id = opts.id ?? genId();
+  if (store.has(id)) dismissRecord(id);
+  const duration = opts.duration ?? 0;
+  const record = {
+    id,
+    title,
+    kind,
+    opts: { unread: opts.unread ?? false, ...opts, id },
+    el: null,
+    createdAt: Date.now(),
+    duration,
+    remaining: duration,
+    paused: false,
+    timer: 0
+  };
+  const handle = makeHandle(record);
+  const el = renderNotification(record, container, () => handle);
+  record.el = el;
+  handle.el = el;
+  pushToContainer(container, el, record.opts.priority ?? "normal");
+  store.set(id, record);
+  attachTimer(record, handle);
+  trimStack2(container);
+  persistSave();
+  playSound();
+  opts.onShow?.(handle);
+  return handle;
+}
+function dismissRecord(id) {
+  const record = store.get(id);
+  if (!record) {
+    const el = document.getElementById(id);
+    if (el && el.classList.contains("notification")) removeOne(el);
+    return;
+  }
+  if (record.timer) window.clearTimeout(record.timer);
+  const handle = makeHandle(record);
+  const onClose = record.opts.onClose;
+  store.delete(id);
+  if (record.el) removeOne(record.el, () => onClose?.(handle));
+  else onClose?.(handle);
+  persistSave();
+}
+function updateRecord(id, patch) {
+  const record = store.get(id);
+  if (!record) return;
+  if (patch.title !== void 0) record.title = patch.title;
+  if (patch.description !== void 0) record.opts.description = patch.description;
+  if (patch.duration !== void 0) {
+    record.duration = patch.duration;
+    record.remaining = patch.duration;
+  }
+  if (patch.unread !== void 0) record.opts.unread = patch.unread;
+  if (patch.progress !== void 0) record.opts.progress = patch.progress;
+  if (patch.progressLabel !== void 0) record.opts.progressLabel = patch.progressLabel;
+  if (patch.actions !== void 0) record.opts.actions = patch.actions;
+  if (patch.tag !== void 0) record.opts.tag = patch.tag;
+  if (patch.priority !== void 0) record.opts.priority = patch.priority;
+  if (patch.icon !== void 0) record.opts.icon = patch.icon;
+  if (patch.avatar !== void 0) record.opts.avatar = patch.avatar;
+  if (patch.link !== void 0) record.opts.link = patch.link;
+  if (patch.linkLabel !== void 0) record.opts.linkLabel = patch.linkLabel;
+  const el = record.el;
+  if (!el) return;
+  if (patch.title !== void 0) {
+    const t = el.querySelector(".notification-title");
+    if (t) t.textContent = patch.title;
+  }
+  if (patch.description !== void 0) {
+    let m = el.querySelector(".notification-message");
+    if (patch.description) {
+      if (!m) {
+        m = document.createElement("p");
+        m.className = "notification-message";
+        m.style.whiteSpace = "pre-wrap";
+        const content = el.querySelector(".notification-content");
+        const titleEl = content?.querySelector(".notification-title");
+        if (titleEl && titleEl.nextSibling) content?.insertBefore(m, titleEl.nextSibling);
+        else content?.appendChild(m);
+      }
+      m.textContent = patch.description;
+    } else if (m) {
+      m.remove();
+    }
+  }
+  if (patch.unread !== void 0) {
+    el.classList.toggle("is-unread", patch.unread);
+  }
+  if (patch.priority !== void 0) {
+    el.classList.toggle("is-priority", patch.priority === "high");
+  }
+  if (patch.progress !== void 0 || patch.progressLabel !== void 0) {
+    el.classList.add("is-progress");
+    let progWrap = el.querySelector(".notification-progress");
+    const pct3 = Math.min(100, Math.max(0, (record.opts.progress ?? 0) * 100));
+    if (!progWrap) {
+      progWrap = document.createElement("div");
+      progWrap.className = "notification-progress";
+      const track = document.createElement("div");
+      track.className = "notification-progress-track";
+      const fill2 = document.createElement("div");
+      fill2.className = "notification-progress-bar";
+      track.appendChild(fill2);
+      progWrap.appendChild(track);
+      el.querySelector(".notification-content")?.appendChild(progWrap);
+    }
+    const fill = progWrap.querySelector(".notification-progress-bar");
+    if (fill) fill.style.width = pct3 + "%";
+    let lbl = progWrap.querySelector(".notification-progress-label");
+    const labelText = record.opts.progressLabel ?? Math.round(pct3) + "%";
+    if (!lbl) {
+      lbl = document.createElement("span");
+      lbl.className = "notification-progress-label";
+      progWrap.appendChild(lbl);
+    }
+    lbl.textContent = labelText;
+  }
+  persistSave();
+}
+function confirmDialog(title, opts = {}) {
+  return new Promise((resolve) => {
+    if (!isBrowser3()) {
+      resolve(false);
+      return;
+    }
+    let resolved = false;
+    const settle = (val) => {
+      if (resolved) return;
+      resolved = true;
+      resolve(val);
+    };
+    const confirmLabel = opts.confirmLabel ?? "\u786E\u8BA4";
+    const cancelLabel = opts.cancelLabel ?? "\u53D6\u6D88";
+    const actions = [
+      {
+        label: cancelLabel,
+        type: "ghost",
+        onClick: () => settle(false)
+      },
+      {
+        label: confirmLabel,
+        type: "primary",
+        onClick: () => settle(true)
+      }
+    ];
+    const handle = showRecord(title, "info", {
+      ...opts,
+      actions,
+      closable: false,
+      onClose: () => settle(false)
+    });
+    if (!handle) settle(false);
+  });
+}
+function createNotificationCenter(parent = document.body, opts = {}) {
+  if (!isBrowser3()) {
+    return {
+      push: () => null,
+      dismiss() {
+      },
+      clear() {
+      },
+      markAllRead() {
+      },
+      get: () => null,
+      getAll: () => [],
+      config() {
+      },
+      el: {}
+    };
+  }
+  const local = {
+    position: opts.position ?? "top-right",
+    maxStack: opts.maxStack ?? 5,
+    pauseOnHover: opts.pauseOnHover ?? true,
+    persist: opts.persist ?? false,
+    sound: opts.sound ?? false
+  };
+  const container = document.createElement("div");
+  container.className = "notification-container";
+  container.setAttribute("role", "region");
+  container.setAttribute("aria-label", "\u901A\u77E5");
+  container.dataset.position = local.position;
+  parent.appendChild(container);
+  const localStore = /* @__PURE__ */ new Map();
+  function push(input) {
+    const kind = input.kind ?? "info";
+    const opts2 = input.options ?? {};
+    const id = opts2.id ?? genId();
+    const duration = opts2.duration ?? 0;
+    const record = {
+      id,
+      title: input.title,
+      kind,
+      opts: { unread: opts2.unread ?? false, ...opts2, id },
+      el: null,
+      createdAt: Date.now(),
+      duration,
+      remaining: duration,
+      paused: false,
+      timer: 0
+    };
+    const handle = makeHandle(record);
+    const el = renderNotification(record, container, () => handle);
+    record.el = el;
+    handle.el = el;
+    pushToContainer(container, el, record.opts.priority ?? "normal");
+    localStore.set(id, record);
+    store.set(id, record);
+    attachTimer(record, handle);
+    for (; ; ) {
+      const items = Array.from(container.querySelectorAll(":scope > .notification"));
+      if (items.length <= local.maxStack) break;
+      const target = items.find((it) => !it.classList.contains("is-priority")) ?? items[0];
+      if (!target) break;
+      const tid = target.id;
+      removeOne(target);
+      const rec = tid ? localStore.get(tid) : null;
+      if (rec) {
+        localStore.delete(tid);
+        store.delete(tid);
+      }
+    }
+    opts2.onShow?.(handle);
+    return handle;
+  }
+  function dismiss(id) {
+    if (id) {
+      const rec = localStore.get(id);
+      if (!rec) return;
+      if (rec.timer) window.clearTimeout(rec.timer);
+      const handle = makeHandle(rec);
+      localStore.delete(id);
+      store.delete(id);
+      if (rec.el) removeOne(rec.el, () => rec.opts.onClose?.(handle));
+      return;
+    }
+    Array.from(localStore.keys()).forEach((k) => dismiss(k));
+  }
+  function clear() {
+    dismiss();
+  }
+  function markAllRead() {
+    localStore.forEach((rec) => {
+      rec.opts.unread = false;
+      rec.el?.classList.remove("is-unread");
+    });
+  }
+  return {
+    push,
+    dismiss,
+    clear,
+    markAllRead,
+    get: (id) => localStore.get(id) ?? null,
+    getAll: () => Array.from(localStore.values()),
+    config: (next) => {
+      if (next.position) {
+        local.position = next.position;
+        container.dataset.position = next.position;
+      }
+      if (typeof next.maxStack === "number" && next.maxStack > 0) local.maxStack = next.maxStack;
+      if (typeof next.pauseOnHover === "boolean") local.pauseOnHover = next.pauseOnHover;
+      if (next.persist !== void 0) local.persist = next.persist;
+      if (next.sound !== void 0) local.sound = next.sound;
+    },
+    el: container
+  };
+}
+var notify = Object.assign(
+  (title, opts) => showRecord(title, "info", opts ?? {}),
+  {
+    success: (title, opts) => showRecord(title, "success", opts ?? {}),
+    warn: (title, opts) => showRecord(title, "warning", opts ?? {}),
+    error: (title, opts) => showRecord(title, "error", opts ?? {}),
+    info: (title, opts) => showRecord(title, "info", opts ?? {}),
+    progress: (title, opts) => showRecord(title, "info", { progress: opts?.progress ?? 0, ...opts }),
+    confirm: (title, opts) => confirmDialog(title, opts),
+    dismiss: (id) => {
+      if (!isBrowser3()) return;
+      if (id) {
+        dismissRecord(id);
+        return;
+      }
+      Array.from(store.keys()).forEach((k) => dismissRecord(k));
+    },
+    clear: () => {
+      if (!isBrowser3()) return;
+      Array.from(store.keys()).forEach((k) => dismissRecord(k));
+    },
+    markRead: (id) => {
+      if (!isBrowser3()) return;
+      if (id) {
+        updateRecord(id, { unread: false });
+        return;
+      }
+      store.forEach((_, k) => updateRecord(k, { unread: false }));
+    },
+    update: (id, patch) => updateRecord(id, patch),
+    get: (id) => store.get(id) ?? null,
+    getAll: () => Array.from(store.values()),
+    config: (opts) => {
+      if (opts.position) {
+        cfg.position = opts.position;
+        const c = document.body.querySelector(".notification-container[data-notif-default]");
+        if (c) c.dataset.position = opts.position;
+      }
+      if (typeof opts.maxStack === "number" && opts.maxStack > 0) cfg.maxStack = opts.maxStack;
+      if (typeof opts.pauseOnHover === "boolean") cfg.pauseOnHover = opts.pauseOnHover;
+      if (opts.persist !== void 0) cfg.persist = opts.persist;
+      if (opts.sound !== void 0) cfg.sound = opts.sound;
+    }
+  }
+);
+function initNotification() {
+  if (!isBrowser3()) return;
+  if (globalInit.done) return;
+  globalInit.done = true;
+  ensureContainer2();
+  if (cfg.persist) {
+    const items = persistLoad();
+    const container = ensureContainer2();
+    for (const item of items) {
+      const record = {
+        id: item.id,
+        title: item.title,
+        kind: item.kind,
+        opts: {
+          id: item.id,
+          description: item.description,
+          tag: item.tag,
+          unread: item.unread,
+          priority: item.priority,
+          progress: item.progress,
+          progressLabel: item.progressLabel,
+          link: item.link,
+          linkLabel: item.linkLabel,
+          data: item.data
+        },
+        el: null,
+        createdAt: item.createdAt ?? Date.now(),
+        duration: 0,
+        remaining: 0,
+        paused: false,
+        timer: 0
+      };
+      const handle = makeHandle(record);
+      const el = renderNotification(record, container, () => handle);
+      record.el = el;
+      handle.el = el;
+      pushToContainer(container, el, record.opts.priority ?? "normal");
+      store.set(record.id, record);
+    }
+  }
+}
+
+// src/behaviors/back-top.ts
+var AUTO_BTN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>';
+function prefersReducedMotion2() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getScrollTarget(target) {
+  if (!target) return { el: null, isWindow: true };
+  const el = document.querySelector(target);
+  return { el, isWindow: false };
+}
+function getScrollY(target) {
+  if (!target) return window.scrollY;
+  const el = document.querySelector(target);
+  return el ? el.scrollTop : window.scrollY;
+}
+function scrollToTop(target, offset = 0) {
+  const reduce = prefersReducedMotion2();
+  const behavior = reduce ? "auto" : "smooth";
+  if (!target) {
+    window.scrollTo({ top: offset, behavior });
+    return;
+  }
+  const el = document.querySelector(target);
+  if (el) el.scrollTo({ top: offset, behavior });
+}
+function setup11(btn, opts = {}) {
+  const el = btn;
+  if (el.__icenBackTopInit) return;
+  el.__icenBackTopInit = true;
+  const threshold = Number(btn.dataset.backTopThreshold ?? opts.threshold ?? 320) || 320;
+  const target = btn.dataset.backTopTarget ?? opts.target;
+  const offset = Number(btn.dataset.backTopOffset ?? opts.offset ?? 0) || 0;
+  let ticking = false;
+  const apply = () => {
+    ticking = false;
+    const y = getScrollY(target);
+    btn.classList.toggle("is-shown", y > threshold);
+  };
+  const onScroll2 = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(apply);
+  };
+  const { el: targetEl, isWindow } = getScrollTarget(target);
+  if (isWindow) {
+    window.addEventListener("scroll", onScroll2, { passive: true });
+  } else if (targetEl) {
+    targetEl.addEventListener("scroll", onScroll2, { passive: true });
+  }
+  window.addEventListener("resize", onScroll2, { passive: true });
+  btn.addEventListener("click", () => scrollToTop(target, offset));
+  apply();
+}
+function initBackTop(opts = {}) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  const root = opts.root ?? document;
+  if (opts.autoCreate) {
+    let btn = document.body.querySelector(".back-top[data-back-top-auto]");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "back-top";
+      btn.setAttribute("data-back-top", "");
+      btn.setAttribute("data-back-top-auto", "");
+      btn.setAttribute("aria-label", "\u56DE\u5230\u9876\u90E8");
+      btn.innerHTML = AUTO_BTN_SVG;
+      document.body.appendChild(btn);
+    }
+    setup11(btn, opts);
+  }
+  const candidates = [];
+  if (root instanceof Element && root.matches(".back-top[data-back-top]")) candidates.push(root);
+  candidates.push(...Array.from(root.querySelectorAll(".back-top[data-back-top]")));
+  for (const c of candidates) {
+    const el = c;
+    if (el.hasAttribute("data-back-top-auto") && opts.autoCreate) continue;
+    setup11(el, opts);
+  }
+}
+
+// src/behaviors/command-palette.ts
+var FOCUSABLE2 = 'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openId2 = null;
+var restoreFocusTo2 = null;
+var prevBodyOverflow2 = "";
+var keyHandler2 = null;
+var globalKeyHandler = null;
+var initialized5 = false;
+function findBackdrop2(id) {
+  return document.querySelector(
+    `.command-palette-backdrop[data-command-palette="${CSS.escape(id)}"]`
+  );
+}
+function getVisibleItems(panel2) {
+  return Array.from(
+    panel2.querySelectorAll(".command-palette-item:not([hidden]):not([disabled])")
+  ).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+}
+function isDisabledItem(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+}
+function setActive(panel2, idx) {
+  const items = getVisibleItems(panel2);
+  items.forEach((el, i) => el.classList.toggle("is-active", i === idx));
+  const active2 = items[idx];
+  if (active2 && typeof active2.scrollIntoView === "function") {
+    active2.scrollIntoView({ block: "nearest" });
+  }
+}
+function filterPanel(panel2, query) {
+  const q = query.trim().toLowerCase();
+  let visibleCount = 0;
+  panel2.querySelectorAll(".command-palette-item").forEach((item) => {
+    if (isDisabledItem(item)) return;
+    const label = (item.querySelector(".command-palette-item-label")?.textContent ?? "").toLowerCase();
+    const hint = (item.querySelector(".command-palette-item-hint")?.textContent ?? "").toLowerCase();
+    const keyword = (item.dataset.commandPaletteKeyword ?? "").toLowerCase();
+    const match = !q || label.includes(q) || hint.includes(q) || keyword.includes(q);
+    item.hidden = !match;
+    item.classList.remove("is-active");
+    if (match) visibleCount++;
+  });
+  panel2.querySelectorAll(".command-palette-group").forEach((group) => {
+    const hasVisible = Array.from(group.querySelectorAll(".command-palette-item")).some(
+      (it) => !it.hidden
+    );
+    group.hidden = !hasVisible;
+  });
+  const empty = panel2.querySelector(".command-palette-empty");
+  if (empty) empty.hidden = visibleCount !== 0;
+  if (visibleCount > 0) setActive(panel2, 0);
+}
+function openCommandPalette(id) {
+  if (typeof document === "undefined") return;
+  if (openId2 === id) return;
+  if (openId2) closeCommandPalette(openId2);
+  const backdrop = findBackdrop2(id);
+  if (!backdrop) return;
+  const panel2 = backdrop.querySelector(".command-palette");
+  if (!panel2) return;
+  if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
+  restoreFocusTo2 = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  openId2 = id;
+  backdrop.hidden = false;
+  prevBodyOverflow2 = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  const input = panel2.querySelector(".command-palette-input");
+  if (input) {
+    input.value = "";
+    input.focus();
+  } else {
+    panel2.focus();
+  }
+  filterPanel(panel2, "");
+  keyHandler2 = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeCommandPalette(id);
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = getVisibleItems(panel2);
+      if (items.length === 0) return;
+      const cur = items.findIndex((el) => el.classList.contains("is-active"));
+      const next = e.key === "ArrowDown" ? (cur + 1) % items.length : (cur - 1 + items.length) % items.length;
+      setActive(panel2, next);
+      return;
+    }
+    if (e.key === "Enter") {
+      const active2 = panel2.querySelector(".command-palette-item.is-active");
+      if (active2 && !isDisabledItem(active2)) {
+        e.preventDefault();
+        active2.click();
+      }
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const els = Array.from(panel2.querySelectorAll(FOCUSABLE2)).filter(
+        (el) => !el.hidden && el.offsetParent !== null
+      );
+      if (els.length === 0) return;
+      const cur = els.findIndex((el) => el === document.activeElement);
+      const next = e.shiftKey ? (cur - 1 + els.length) % els.length : (cur + 1) % els.length;
+      els[next]?.focus();
+    }
+  };
+  window.addEventListener("keydown", keyHandler2);
+}
+function closeCommandPalette(id) {
+  if (typeof document === "undefined") return;
+  const backdrop = findBackdrop2(id);
+  if (!backdrop) return;
+  backdrop.hidden = true;
+  if (openId2 !== id) return;
+  openId2 = null;
+  if (keyHandler2) {
+    window.removeEventListener("keydown", keyHandler2);
+    keyHandler2 = null;
+  }
+  document.body.style.overflow = prevBodyOverflow2;
+  if (restoreFocusTo2 && restoreFocusTo2.isConnected) restoreFocusTo2.focus();
+  restoreFocusTo2 = null;
+}
+function initCommandPalette(root = document) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  root.querySelectorAll("[data-command-palette-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  if (initialized5) return;
+  initialized5 = true;
+  document.addEventListener("click", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const opener = target.closest("[data-command-palette-open]");
+    if (opener?.dataset.commandPaletteOpen) {
+      openCommandPalette(opener.dataset.commandPaletteOpen);
+      return;
+    }
+    const item = target.closest(".command-palette-item");
+    if (item) {
+      const backdrop = item.closest("[data-command-palette]");
+      if (backdrop?.dataset.commandPalette) {
+        if (!item.hasAttribute("data-command-palette-keep-open")) {
+          closeCommandPalette(backdrop.dataset.commandPalette);
+        }
+      }
+      return;
+    }
+    if (target instanceof HTMLElement && target.classList.contains("command-palette-backdrop") && target.dataset.commandPalette) {
+      closeCommandPalette(target.dataset.commandPalette);
+    }
+  });
+  document.addEventListener("input", (e) => {
+    if (!(e.target instanceof HTMLElement)) return;
+    if (!e.target.matches(".command-palette-input")) return;
+    const backdrop = e.target.closest("[data-command-palette]");
+    const panel2 = backdrop?.querySelector(".command-palette");
+    if (panel2) filterPanel(panel2, e.target.value);
+  });
+  globalKeyHandler = (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+      e.preventDefault();
+      const first = document.querySelector(".command-palette-backdrop[data-command-palette]");
+      if (first?.dataset.commandPalette) {
+        if (openId2 === first.dataset.commandPalette) closeCommandPalette(openId2);
+        else openCommandPalette(first.dataset.commandPalette);
+      }
+    }
+  };
+  window.addEventListener("keydown", globalKeyHandler);
+}
+
+// src/behaviors/date-picker.ts
+var openPicker = null;
+var panelEl = null;
+var outsideHandler = null;
+var escHandler = null;
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function toDateStr(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseDateStr(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function format(d, fmt2) {
+  if (!d) return "";
+  return fmt2.replace(/yyyy/g, String(d.getFullYear())).replace(/yy/g, String(d.getFullYear()).slice(-2)).replace(/mm/g, pad(d.getMonth() + 1)).replace(/m/g, String(d.getMonth() + 1)).replace(/dd/g, pad(d.getDate())).replace(/d/g, String(d.getDate()));
+}
+function ensurePanel() {
+  if (panelEl && panelEl.isConnected) return panelEl;
+  const el = document.createElement("div");
+  el.className = "date-picker-panel";
+  el.setAttribute("role", "dialog");
+  el.setAttribute("aria-label", "\u9009\u62E9\u65E5\u671F");
+  el.hidden = true;
+  document.body.appendChild(el);
+  panelEl = el;
+  return el;
+}
+function positionPanel(panel2, trigger) {
+  const r = trigger.getBoundingClientRect();
+  const pw = 280;
+  const ph = panel2.offsetHeight || 320;
+  let left = r.left;
+  let top = r.bottom + 4;
+  if (left + pw > window.innerWidth - 12) left = window.innerWidth - pw - 12;
+  if (left < 12) left = 12;
+  if (top + ph > window.innerHeight - 12) top = r.top - ph - 4;
+  if (top < 12) top = 12;
+  panel2.style.left = left + "px";
+  panel2.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 WEEK_LABELS_ZH = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
+var WEEK_LABELS_SUN = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+function renderCalendar(panel2, ctx) {
+  const { view, selected, min, max, weekStart, onPick } = ctx;
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const labels = weekStart === 0 ? WEEK_LABELS_SUN : WEEK_LABELS_ZH;
+  const firstDay = new Date(year, month, 1);
+  const offsetRaw = firstDay.getDay();
+  const leadDays = weekStart === 0 ? offsetRaw : (offsetRaw + 6) % 7;
+  const gridStart = new Date(year, month, 1 - leadDays);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const cells = [];
+  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">`;
+  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 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>`;
+  }
+  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>`;
+  panel2.innerHTML = html;
+  panel2.querySelector('[data-dp-nav="-1"]')?.addEventListener("click", () => {
+    ctx.view = new Date(year, month - 1, 15);
+    renderCalendar(panel2, { ...ctx, view: ctx.view });
+  });
+  panel2.querySelector('[data-dp-nav="1"]')?.addEventListener("click", () => {
+    ctx.view = new Date(year, month + 1, 15);
+    renderCalendar(panel2, { ...ctx, view: ctx.view });
+  });
+  panel2.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);
+    });
+  });
+  panel2.querySelector("[data-dp-today]")?.addEventListener("click", () => {
+    onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
+  });
+  panel2.querySelector("[data-dp-clear]")?.addEventListener("click", () => {
+    onPick(null);
+  });
+}
+function closePanel() {
+  if (!panelEl) return;
+  panelEl.hidden = true;
+  openPicker?.querySelector(".date-picker-trigger")?.classList.remove("is-open");
+  openPicker = null;
+  if (outsideHandler) {
+    document.removeEventListener("mousedown", outsideHandler);
+    outsideHandler = null;
+  }
+  if (escHandler) {
+    window.removeEventListener("keydown", escHandler);
+    escHandler = null;
+  }
+}
+function setupPicker(container) {
+  const el = container;
+  if (el.__icenDatePickerInit) return;
+  el.__icenDatePickerInit = true;
+  const fmt2 = el.dataset.datePickerFormat ?? "yyyy-mm-dd";
+  const minStr = el.dataset.datePickerMin;
+  const maxStr = el.dataset.datePickerMax;
+  const weekStart = Number(el.dataset.datePickerWeekStart ?? "1");
+  const placeholder = el.dataset.datePickerPlaceholder ?? "\u9009\u62E9\u65E5\u671F";
+  const min = minStr ? parseDateStr(minStr) : null;
+  const max = maxStr ? parseDateStr(maxStr) : null;
+  const hidden = el.querySelector('input[type="hidden"]');
+  const initialStr = hidden?.value ?? "";
+  const initialDate = initialStr ? parseDateStr(initialStr) : null;
+  let trigger = el.querySelector(".date-picker-trigger");
+  if (!trigger) {
+    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>`;
+    el.prepend(trigger);
+  }
+  trigger.setAttribute("aria-haspopup", "dialog");
+  const valueEl = trigger.querySelector(".date-picker-value");
+  function paint() {
+    const v = hidden?.value ?? "";
+    const d = v ? parseDateStr(v) : null;
+    if (valueEl) {
+      valueEl.textContent = d ? format(d, fmt2) : placeholder;
+      valueEl.classList.toggle("is-empty", !d);
+    }
+  }
+  paint();
+  if (hidden) {
+    const obs = new MutationObserver(() => paint());
+    obs.observe(hidden, { attributes: true, attributeFilter: ["value"] });
+  }
+  trigger.addEventListener("click", () => {
+    if (openPicker === el) {
+      closePanel();
+      return;
+    }
+    closePanel();
+    openPicker = el;
+    trigger.classList.add("is-open");
+    const panel2 = ensurePanel();
+    panel2.hidden = false;
+    const selected = hidden?.value ? parseDateStr(hidden.value) : null;
+    const view = selected ?? /* @__PURE__ */ new Date();
+    view.setDate(15);
+    positionPanel(panel2, trigger);
+    renderCalendar(panel2, {
+      view,
+      selected,
+      min,
+      max,
+      weekStart,
+      onPick: (d) => {
+        if (d === null) {
+          if (hidden) {
+            hidden.value = "";
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        } else {
+          if (hidden) {
+            hidden.value = toDateStr(d);
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        }
+        paint();
+        closePanel();
+      }
+    });
+    outsideHandler = (ev) => {
+      const t = ev.target instanceof Node ? ev.target : null;
+      if (!t) return;
+      if (panel2.contains(t) || el.contains(t)) return;
+      closePanel();
+    };
+    document.addEventListener("mousedown", outsideHandler);
+    escHandler = (ev) => {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        closePanel();
+      }
+    };
+    window.addEventListener("keydown", escHandler);
+    const reposition = () => {
+      if (openPicker === el && panel2 && !panel2.hidden) positionPanel(panel2, trigger);
+    };
+    window.addEventListener("scroll", reposition, { passive: true, once: false });
+    window.addEventListener("resize", reposition, { passive: true });
+  });
+}
+function initDatePicker(root = document) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  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]")));
+  for (const p of pickers) setupPicker(p);
+}
+
+// src/behaviors/split-pane.ts
+var initialized6 = /* @__PURE__ */ new WeakSet();
+function pct2(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function setup12(container) {
+  const el = container;
+  if (el.__icenSplitPaneInit) return;
+  el.__icenSplitPaneInit = true;
+  const dividerQuery = el.querySelector(".split-pane-divider");
+  if (!dividerQuery) return;
+  const divider = dividerQuery;
+  const min = Number(el.dataset.splitMin ?? "10") || 10;
+  const max = Number(el.dataset.splitMax ?? "90") || 90;
+  const step = Number(el.dataset.splitStep ?? "2") || 2;
+  const vertical = el.classList.contains("split-pane--vertical");
+  const orientation = vertical ? "vertical" : "horizontal";
+  divider.setAttribute("role", "separator");
+  divider.setAttribute("aria-orientation", orientation === "vertical" ? "horizontal" : "vertical");
+  divider.setAttribute("aria-valuemin", String(min));
+  divider.setAttribute("aria-valuemax", String(max));
+  divider.tabIndex = 0;
+  function readCurrent() {
+    const v = parseFloat(getComputedStyle(el).getPropertyValue("--split"));
+    return Number.isFinite(v) ? v : 50;
+  }
+  function write(p) {
+    const v = pct2(p, min, max);
+    el.style.setProperty("--split", v + "%");
+    divider.setAttribute("aria-valuenow", String(Math.round(v)));
+  }
+  if (!el.style.getPropertyValue("--split")) write(50);
+  divider.setAttribute("aria-valuenow", String(Math.round(readCurrent())));
+  let dragging = false;
+  divider.addEventListener("pointerdown", (ev) => {
+    dragging = true;
+    divider.classList.add("is-dragging");
+    divider.setPointerCapture(ev.pointerId);
+    el.style.userSelect = "none";
+  });
+  const onUp = (ev) => {
+    if (!dragging) return;
+    dragging = false;
+    divider.classList.remove("is-dragging");
+    try {
+      divider.releasePointerCapture(ev.pointerId);
+    } catch {
+    }
+    el.style.userSelect = "";
+  };
+  divider.addEventListener("pointerup", onUp);
+  divider.addEventListener("pointercancel", () => {
+    dragging = false;
+    divider.classList.remove("is-dragging");
+    el.style.userSelect = "";
+  });
+  divider.addEventListener("pointermove", (ev) => {
+    if (!dragging) return;
+    const rect = el.getBoundingClientRect();
+    if (vertical) {
+      if (rect.height <= 0) return;
+      const p = (ev.clientY - rect.top) / rect.height * 100;
+      write(p);
+    } else {
+      if (rect.width <= 0) return;
+      const p = (ev.clientX - rect.left) / rect.width * 100;
+      write(p);
+    }
+  });
+  divider.addEventListener("dblclick", () => write(50));
+  divider.addEventListener("keydown", (ev) => {
+    const current = readCurrent();
+    let next = null;
+    if (vertical) {
+      if (ev.key === "ArrowUp") next = current - step;
+      else if (ev.key === "ArrowDown") next = current + step;
+    } else {
+      if (ev.key === "ArrowLeft") next = current - step;
+      else if (ev.key === "ArrowRight") next = current + step;
+    }
+    if (ev.key === "Home") next = min;
+    else if (ev.key === "End") next = max;
+    if (next === null) return;
+    ev.preventDefault();
+    write(next);
+  });
+}
+function initSplitPane(root = document) {
+  if (typeof document === "undefined") return;
+  const panes = [];
+  if (root instanceof Element && root.matches(".split-pane[data-split-pane]")) panes.push(root);
+  panes.push(...Array.from(root.querySelectorAll(".split-pane[data-split-pane]")));
+  for (const p of panes) {
+    const el = p;
+    if (initialized6.has(el)) continue;
+    initialized6.add(el);
+    setup12(el);
+  }
+}
+
 // src/index.ts
 var VERSION = package_default.version;
 export {
@@ -2508,28 +4288,37 @@ export {
   STYLES,
   VERSION,
   applyTheme,
+  closeCommandPalette,
   closeMenu,
   closeModal,
   closePopover,
   computePopoverLayout,
+  createNotificationCenter,
   getDefaultTheme,
   getTheme,
   initAccordion,
+  initBackTop,
   initCarousel,
+  initCommandPalette,
   initContextMenu,
   initCopy,
+  initDatePicker,
   initDropdown,
   initInput,
   initModal,
   initNav,
+  initNotification,
   initSelect,
   initSidebar,
   initSlider,
+  initSplitPane,
   initTabs,
   initTagInput,
   initTheme,
   initTree,
   initUpload,
+  notify,
+  openCommandPalette,
   openContextMenu,
   openModal,
   openPopover,