@icen.ai/ui 0.8.0 → 0.9.0

package/dist/behaviors/controls.mjs

@@ -0,0 +1,601 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/input.ts
+function trackComposing(target) {
+  let composing = false;
+  target.addEventListener("compositionstart", () => {
+    composing = true;
+  });
+  target.addEventListener("compositionend", () => {
+    composing = false;
+  });
+  return () => composing;
+}
+function setupClear(wrap) {
+  const btn = wrap.querySelector(".input-clear");
+  const field = wrap.querySelector("input.input, textarea.textarea");
+  if (!btn || !field) return;
+  btn.addEventListener("click", () => {
+    field.value = "";
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+    field.focus();
+  });
+}
+function setupPasswordToggle(wrap) {
+  const btn = wrap.querySelector(".input-pw-toggle");
+  const field = wrap.querySelector("input.input");
+  if (!btn || !field) return;
+  const iconShow = btn.querySelector('[data-icon="show"]');
+  const iconHide = btn.querySelector('[data-icon="hide"]');
+  btn.setAttribute("aria-label", "\u663E\u793A\u5BC6\u7801");
+  btn.addEventListener("click", () => {
+    const show = field.type === "password";
+    field.type = show ? "text" : "password";
+    if (iconShow) iconShow.hidden = show;
+    if (iconHide) iconHide.hidden = !show;
+    btn.setAttribute("aria-label", show ? "\u9690\u85CF\u5BC6\u7801" : "\u663E\u793A\u5BC6\u7801");
+  });
+}
+function resizeTextarea(ta) {
+  ta.style.height = "auto";
+  const cs = getComputedStyle(ta);
+  const lineHeight = parseFloat(cs.lineHeight) || 20;
+  const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+  const minRows = Number(ta.getAttribute("data-min-rows") ?? "3") || 3;
+  const maxAttr = ta.getAttribute("data-max-rows");
+  const maxRows = maxAttr ? Number(maxAttr) || 0 : 0;
+  const minH = minRows * lineHeight + padY;
+  const maxH = maxRows > 0 ? maxRows * lineHeight + padY : Infinity;
+  ta.style.height = `${Math.max(minH, Math.min(ta.scrollHeight, maxH))}px`;
+}
+function setupAutosize(ta) {
+  const el = ta;
+  if (el.__icenInputInit) return;
+  el.__icenInputInit = true;
+  ta.addEventListener("input", () => resizeTextarea(ta));
+  resizeTextarea(ta);
+}
+function setupCounter(field) {
+  const el = field;
+  if (el.__icenCounterInit) return;
+  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;
+  el.__icenCounterInit = true;
+  const isComposing = trackComposing(field);
+  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 el = field;
+  if (el.__icenMaskInit) return;
+  const mask = field.getAttribute("data-mask");
+  if (!mask) return;
+  el.__icenMaskInit = true;
+  const isComposing = trackComposing(field);
+  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 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;
+  const el = field;
+  if (el.__icenTrimInit) return;
+  el.__icenTrimInit = true;
+  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;
+  el.__icenInputInit = true;
+  const isComposing = trackComposing(group);
+  const cells = Array.from(group.querySelectorAll(".otp-cell"));
+  const syncFilled = (cell) => {
+    cell.classList.toggle("is-filled", cell.value.length > 0);
+  };
+  cells.forEach((cell, i) => {
+    if (!cell.hasAttribute("aria-label")) {
+      cell.setAttribute("aria-label", `\u7B2C ${i + 1} \u4F4D\uFF0C\u5171 ${cells.length} \u4F4D`);
+    }
+    syncFilled(cell);
+    cell.addEventListener("input", () => {
+      if (isComposing()) return;
+      const ch = cell.value.slice(-1);
+      cell.value = ch;
+      syncFilled(cell);
+      if (ch && i < cells.length - 1) cells[i + 1].focus();
+    });
+    cell.addEventListener("keydown", (ev) => {
+      if (ev.key === "Backspace" && !cell.value && i > 0) {
+        ev.preventDefault();
+        cells[i - 1].focus();
+      }
+      if (ev.key === "ArrowLeft" && i > 0) {
+        ev.preventDefault();
+        cells[i - 1].focus();
+      }
+      if (ev.key === "ArrowRight" && i < cells.length - 1) {
+        ev.preventDefault();
+        cells[i + 1].focus();
+      }
+    });
+    cell.addEventListener("paste", (ev) => {
+      ev.preventDefault();
+      const text = (ev.clipboardData?.getData("text") ?? "").replace(/\s/g, "").slice(0, cells.length - i);
+      for (let k = 0; k < text.length; k++) {
+        const target = cells[i + k];
+        target.value = text[k] ?? "";
+        syncFilled(target);
+      }
+      cells[Math.min(i + text.length, cells.length - 1)].focus();
+    });
+  });
+  const fireComplete = () => {
+    const code = cells.map((c) => c.value).join("");
+    if (code.length === cells.length && cells.every((c) => c.value.length > 0)) {
+      group.classList.add("is-complete");
+      emitIcen(group, "icen:otp-complete", { code });
+      group.dispatchEvent(new CustomEvent("otp:complete", { detail: { code }, bubbles: true }));
+    }
+  };
+  cells.forEach((cell) => cell.addEventListener("input", fireComplete));
+}
+function initInput(root) {
+  if (typeof document === "undefined") return;
+  const scope = root ?? document;
+  const wraps = [];
+  if (scope instanceof Element && scope.matches(".input-wrap")) wraps.push(scope);
+  wraps.push(...Array.from(scope.querySelectorAll(".input-wrap")));
+  for (const w of wraps) {
+    const el = w;
+    if (el.__icenInputInit) continue;
+    el.__icenInputInit = true;
+    setupClear(w);
+    setupPasswordToggle(w);
+  }
+  const textareas = [];
+  if (scope instanceof HTMLTextAreaElement && scope.matches("[data-autosize]")) textareas.push(scope);
+  textareas.push(...Array.from(scope.querySelectorAll("textarea[data-autosize]")));
+  for (const ta of textareas) setupAutosize(ta);
+  const countedFields = [];
+  if (scope instanceof Element) {
+    const fields = Array.from(scope.querySelectorAll(
+      "input[maxlength], input[data-count], textarea[maxlength], textarea[data-count]"
+    ));
+    countedFields.push(...fields);
+    if (scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) {
+      if (scope.hasAttribute("maxlength") || scope.hasAttribute("data-count")) countedFields.push(scope);
+    }
+  }
+  for (const f of countedFields) setupCounter(f);
+  const maskedInputs = [];
+  if (scope instanceof Element) {
+    maskedInputs.push(...Array.from(scope.querySelectorAll("input[data-mask]")));
+    if (scope instanceof HTMLInputElement && scope.hasAttribute("data-mask")) maskedInputs.push(scope);
+  }
+  for (const inp of maskedInputs) setupMask(inp);
+  const trimFields = [];
+  if (scope instanceof Element) {
+    trimFields.push(...Array.from(scope.querySelectorAll("[data-trim]")));
+    if ((scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) && scope.hasAttribute("data-trim")) {
+      trimFields.push(scope);
+    }
+  }
+  for (const f of trimFields) setupTrim(f);
+  const otps = [];
+  if (scope instanceof Element && scope.matches(".otp")) otps.push(scope);
+  otps.push(...Array.from(scope.querySelectorAll(".otp")));
+  for (const g of otps) setupOtp(g);
+}
+
+// src/behaviors/controls.ts
+function isDisabled(el) {
+  return el instanceof HTMLButtonElement && el.disabled || el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true" || el.classList.contains("is-disabled") || el.hasAttribute("data-disabled");
+}
+function isActivateKey(ev) {
+  return ev.key === "Enter" || ev.key === " ";
+}
+function createDelegatedInit(handlers) {
+  let inited = false;
+  return () => {
+    if (inited || typeof document === "undefined") return () => {
+    };
+    inited = true;
+    if (handlers.click) document.addEventListener("click", handlers.click);
+    if (handlers.keydown) document.addEventListener("keydown", handlers.keydown);
+    return () => {
+      if (handlers.click) document.removeEventListener("click", handlers.click);
+      if (handlers.keydown) document.removeEventListener("keydown", handlers.keydown);
+      inited = false;
+    };
+  };
+}
+var SWITCH_LIKE = '.switch[role="switch"], .checkbox[role="checkbox"], .radio-item[role="radio"], .radio[role="radio"], .radio-card[role="radio"]';
+var seenCheckboxes = /* @__PURE__ */ new WeakSet();
+function toggleSwitch(el) {
+  const checked = el.getAttribute("aria-checked") !== "true";
+  el.setAttribute("aria-checked", String(checked));
+  emitIcen(el, "icen:switch-change", { el, checked });
+}
+function toggleCheckbox(el) {
+  const cur = el.getAttribute("aria-checked") ?? "false";
+  const firstSeen = !seenCheckboxes.has(el);
+  seenCheckboxes.add(el);
+  let next;
+  if (cur === "mixed") next = firstSeen ? "false" : "true";
+  else next = cur === "true" ? "false" : "mixed";
+  el.setAttribute("aria-checked", next);
+  const checked = next === "mixed" ? "mixed" : next === "true";
+  emitIcen(el, "icen:check-change", { el, checked });
+}
+function selectRadio(el) {
+  if (el.getAttribute("aria-checked") === "true") return;
+  const group = el.closest('[data-radio-group], .radio-group, [role="radiogroup"], .radio-card-grid');
+  const peers = group ? Array.from(group.querySelectorAll('[role="radio"]')).filter(
+    (it) => it.closest('[data-radio-group], .radio-group, [role="radiogroup"], .radio-card-grid') === group
+  ) : [el];
+  for (const it of peers) {
+    const on = it === el;
+    it.classList.toggle("is-selected", on);
+    it.setAttribute("aria-checked", String(on));
+  }
+  emitIcen(el, "icen:check-change", { el, checked: true });
+}
+function activateSwitchLike(el) {
+  if (el.matches('.switch[role="switch"]')) toggleSwitch(el);
+  else if (el.matches('.checkbox[role="checkbox"]')) toggleCheckbox(el);
+  else selectRadio(el);
+}
+function resolveSwitchTarget(t) {
+  if (!(t instanceof Element)) return null;
+  const direct = t.closest(SWITCH_LIKE);
+  if (direct) return isDisabled(direct) ? null : direct;
+  const row = t.closest(".checkbox-row");
+  if (row && !t.closest("button, a, input, select, textarea, [contenteditable]")) {
+    const box = row.querySelector('.checkbox[role="checkbox"]');
+    if (box && !isDisabled(box)) return box;
+  }
+  return null;
+}
+function onSwitchClick(ev) {
+  const el = resolveSwitchTarget(ev.target);
+  if (el) activateSwitchLike(el);
+}
+function onSwitchKeydown(ev) {
+  if (!isActivateKey(ev)) return;
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const el = t.closest(SWITCH_LIKE);
+  if (!el || isDisabled(el)) return;
+  ev.preventDefault();
+  activateSwitchLike(el);
+}
+var initSwitch = createDelegatedInit({ click: onSwitchClick, keydown: onSwitchKeydown });
+function stepStepper(btn) {
+  const root = btn.closest(".stepper");
+  if (!root) return;
+  const input = root.querySelector('input.stepper-input, input[type="number"]');
+  if (!input || input.disabled) return;
+  const step = Number(btn.getAttribute("data-step")) || 1;
+  const minAttr = input.min;
+  const maxAttr = input.max;
+  const min = minAttr !== "" && Number.isFinite(Number(minAttr)) ? Number(minAttr) : -Infinity;
+  const max = maxAttr !== "" && Number.isFinite(Number(maxAttr)) ? Number(maxAttr) : Infinity;
+  const base = Number.isFinite(Number(input.value)) ? Number(input.value) : 0;
+  const next = Number(Math.min(max, Math.max(min, base + step)).toPrecision(12));
+  const delta = next - base;
+  input.value = String(next);
+  emitIcen(root, "icen:stepper-change", { el: root, value: next, delta });
+}
+function onStepperClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const btn = t.closest(".stepper-btn");
+  if (!btn || isDisabled(btn)) return;
+  stepStepper(btn);
+}
+var initStepper = createDelegatedInit({ click: onStepperClick });
+function selectSegmentedItem(item) {
+  const container = item.closest(".segmented");
+  if (!container) return;
+  const items = Array.from(container.querySelectorAll(".segmented-item")).filter(
+    (it) => it.closest(".segmented") === container
+  );
+  const index = items.indexOf(item);
+  if (index === -1) return;
+  if (item.classList.contains("is-active") || item.getAttribute("aria-checked") === "true") return;
+  for (const it of items) {
+    const on = it === item;
+    it.classList.toggle("is-active", on);
+    if (it.getAttribute("role") === "radio") it.setAttribute("aria-checked", String(on));
+  }
+  emitIcen(container, "icen:segmented-change", {
+    el: container,
+    value: item.getAttribute("data-value") ?? String(index),
+    index
+  });
+}
+function onSegmentedClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const item = t.closest(".segmented-item");
+  if (!item || isDisabled(item)) return;
+  selectSegmentedItem(item);
+}
+var initSegmented = createDelegatedInit({ click: onSegmentedClick });
+function activateStep(step) {
+  const container = step.closest(".steps");
+  if (!container) return;
+  const list = Array.from(container.querySelectorAll(".step")).filter(
+    (s) => s.closest(".steps") === container
+  );
+  const index = list.indexOf(step);
+  if (index === -1) return;
+  list.forEach((s, i) => {
+    s.classList.toggle("is-active", i === index);
+    if (i < index) {
+      s.classList.add("step--finish");
+      s.classList.remove("step--process", "step--wait");
+    } else if (i === index) {
+      s.classList.add("step--process");
+      s.classList.remove("step--finish", "step--wait", "step--error");
+    } else {
+      s.classList.add("step--wait");
+      s.classList.remove("step--finish", "step--process");
+    }
+  });
+  emitIcen(container, "icen:step-change", { step, index });
+}
+function onStepsClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const step = t.closest('.step[role="button"]');
+  if (!step || isDisabled(step)) return;
+  activateStep(step);
+}
+function onStepsKeydown(ev) {
+  if (!isActivateKey(ev)) return;
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const step = t.closest('.step[role="button"]');
+  if (!step) return;
+  ev.preventDefault();
+  activateStep(step);
+}
+var initSteps = createDelegatedInit({ click: onStepsClick, keydown: onStepsKeydown });
+function rateStar(star) {
+  const container = star.closest(".rating");
+  if (!container || container.classList.contains("rating--readonly")) return;
+  const stars = Array.from(container.querySelectorAll(".rating-star")).filter(
+    (s) => s.closest(".rating") === container
+  );
+  const index = stars.indexOf(star);
+  if (index === -1) return;
+  const value = index + 1;
+  stars.forEach((s, i) => {
+    s.classList.remove("is-half");
+    s.classList.toggle("is-filled", i <= index);
+  });
+  const valueEl = container.querySelector(".rating-value");
+  if (valueEl) valueEl.textContent = String(value);
+  emitIcen(container, "icen:rating-change", { el: container, value });
+}
+function onRatingClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const star = t.closest(".rating-star");
+  if (!star || isDisabled(star)) return;
+  rateStar(star);
+}
+var initRating = createDelegatedInit({ click: onRatingClick });
+function pageOf(btn, btns) {
+  const dp = btn.getAttribute("data-page");
+  if (dp != null && dp.trim() !== "" && Number.isFinite(Number(dp))) return Number(dp);
+  const text = Number((btn.textContent ?? "").trim());
+  if (Number.isFinite(text) && text > 0) return text;
+  return btns.indexOf(btn) + 1;
+}
+function dirOf(btn) {
+  const dir = (btn.getAttribute("data-dir") ?? "").toLowerCase();
+  if (dir === "prev" || dir === "-1" || dir === "previous") return -1;
+  if (dir === "next" || dir === "+1" || dir === "1") return 1;
+  const label = btn.getAttribute("aria-label");
+  if (label && /^上一页$|^上一张$|^向前$|^(prev|previous)$/i.test(label)) return -1;
+  if (label && /^下一页$|^下一张$|^向后$|^next$/i.test(label)) return 1;
+  return 0;
+}
+function setActivePage(btn, btns) {
+  for (const b of btns) {
+    const on = b === btn;
+    b.classList.toggle("is-active", on);
+    if (on) b.setAttribute("aria-current", "page");
+    else b.removeAttribute("aria-current");
+  }
+}
+function goPage(btn) {
+  const nav = btn.closest(".pagination");
+  if (!nav) return;
+  const btns = Array.from(nav.querySelectorAll(".page-btn")).filter(
+    (b) => b.closest(".pagination") === nav
+  );
+  const dir = dirOf(btn);
+  if (dir !== 0) {
+    const curBtn = btns.find(
+      (b) => b.classList.contains("is-active") || b.getAttribute("aria-current") === "page"
+    );
+    const cur = curBtn ? pageOf(curBtn, btns) : 1;
+    const target = Math.max(1, cur + dir);
+    const targetBtn = btns.find((b) => dirOf(b) === 0 && pageOf(b, btns) === target);
+    if (targetBtn) setActivePage(targetBtn, btns);
+    emitIcen(nav, "icen:page-change", { page: target });
+    return;
+  }
+  const page = pageOf(btn, btns);
+  setActivePage(btn, btns);
+  emitIcen(nav, "icen:page-change", { page });
+}
+function onPaginationClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const btn = t.closest(".page-btn");
+  if (!btn || isDisabled(btn)) return;
+  goPage(btn);
+}
+var initPagination = createDelegatedInit({ click: onPaginationClick });
+function sortKeyOf(th) {
+  const cur = th.getAttribute("data-sort") ?? "";
+  return th.getAttribute("data-sort-key") ?? (cur === "asc" || cur === "desc" ? "" : cur);
+}
+function resetSortHeader(th) {
+  th.setAttribute("data-sort", sortKeyOf(th));
+}
+function cycleSort(th) {
+  const cur = th.getAttribute("data-sort") ?? "";
+  const key = sortKeyOf(th);
+  if (!th.hasAttribute("data-sort-key") && key !== "") th.setAttribute("data-sort-key", key);
+  const dir = cur === "asc" ? "desc" : cur === "desc" ? null : "asc";
+  const table = th.closest("table");
+  if (table) {
+    for (const h of table.querySelectorAll("th[data-sort]")) {
+      if (h !== th) resetSortHeader(h);
+    }
+  }
+  th.setAttribute("data-sort", dir ?? key);
+  emitIcen(table ?? th, "icen:sort-change", { th, key, dir });
+}
+function onSortClick(ev) {
+  const t = ev.target;
+  if (!(t instanceof Element)) return;
+  const th = t.closest("th[data-sort]");
+  if (!th) return;
+  cycleSort(th);
+}
+var initTableSort = createDelegatedInit({ click: onSortClick });
+export {
+  initInput,
+  initPagination,
+  initRating,
+  initSegmented,
+  initStepper,
+  initSteps,
+  initSwitch,
+  initTableSort
+};

package/dist/behaviors/copy.d.mts

@@ -1,4 +1,7 @@
-/** 委托监听 click；同一 root（含默认的 document）重复调用幂等。 */
-declare function initCopy(root?: ParentNode): void;
+/**
+ * 委托监听 click；同一 root（含默认的 document）重复调用幂等。
+ * 返回销毁函数：移除委托监听并复位幂等标记（销毁后可重新 init）。SSR 下返回 no-op。
+ */
+declare function initCopy(root?: ParentNode): () => void;
 
 export { initCopy };

package/dist/behaviors/copy.mjs

@@ -1,5 +1,12 @@
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/copy.ts
-var initialized = /* @__PURE__ */ new WeakSet();
+var handlers = /* @__PURE__ */ new WeakMap();
 var flashing = /* @__PURE__ */ new WeakMap();
 function legacyCopy(text) {
   const ta = document.createElement("textarea");
@@ -19,14 +26,20 @@ function legacyCopy(text) {
   return ok;
 }
 async function copyText(text) {
-  try {
-    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+  const hasApi = typeof navigator !== "undefined" && !!navigator.clipboard?.writeText;
+  if (hasApi) {
+    try {
       await navigator.clipboard.writeText(text);
-      return true;
+      return { ok: true };
+    } catch (err) {
+      const fallbackOk = legacyCopy(text);
+      if (fallbackOk) return { ok: true };
+      const reason = err instanceof Error ? err.message : String(err);
+      return { ok: false, reason: `clipboard API \u88AB\u62D2\uFF08${reason}\uFF09\u4E14\u56DE\u9000 execCommand \u5931\u8D25` };
     }
-  } catch {
   }
-  return legacyCopy(text);
+  if (legacyCopy(text)) return { ok: true };
+  return { ok: false, reason: "\u526A\u8D34\u677F\u4E0D\u53EF\u7528\uFF08\u65E0 clipboard API \u4E14 execCommand \u56DE\u9000\u5931\u8D25\uFF09" };
 }
 function flashDone(btn) {
   const prev = flashing.get(btn);
@@ -48,16 +61,28 @@ function onClick(root, ev) {
   const btn = target.closest(".copy-btn[data-copy]");
   if (!btn || !root.contains(btn)) return;
   const text = btn.getAttribute("data-copy") ?? "";
-  void copyText(text).then((ok) => {
-    if (ok) flashDone(btn);
+  void copyText(text).then((outcome) => {
+    if (outcome.ok) {
+      flashDone(btn);
+      emitIcen(btn, "icen:copy-success", { text });
+    } else {
+      emitIcen(btn, "icen:copy-error", { text, reason: outcome.reason ?? "\u672A\u77E5\u9519\u8BEF" });
+    }
   });
 }
 function initCopy(root) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return () => {
+  };
   const scope = root ?? document;
-  if (initialized.has(scope)) return;
-  initialized.add(scope);
-  scope.addEventListener("click", (ev) => onClick(scope, ev));
+  if (handlers.has(scope)) return () => {
+  };
+  const handler = (ev) => onClick(scope, ev);
+  handlers.set(scope, handler);
+  scope.addEventListener("click", handler);
+  return () => {
+    scope.removeEventListener("click", handler);
+    handlers.delete(scope);
+  };
 }
 export {
   initCopy