@icen.ai/ui 0.3.0 → 0.4.0

package/dist/behaviors/charts.mjs

@@ -258,6 +258,192 @@ function renderLine(el, opts) {
   wrap.append(svg, labelsRow(labels.slice(-7)));
   el.appendChild(wrap);
 }
+function renderArea(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const width = 360;
+  const height = 150;
+  const pad = 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),
+    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 gradientId = `icen-chart-area-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-area";
+  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+  const defs = svgEl("defs", {});
+  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.5" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.05" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  for (let i = 0; i < 4; i++) {
+    const y = pad + i * (height - pad * 2) / 3;
+    svg.appendChild(svgEl("line", {
+      x1: String(pad),
+      x2: String(width - pad),
+      y1: String(y),
+      y2: String(y),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+  }
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "1.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  for (const p of points) {
+    const title = svgEl("title", {});
+    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+    const inv = svgEl("circle", {
+      cx: p.x.toFixed(1),
+      cy: p.y.toFixed(1),
+      r: "2",
+      fill: "transparent"
+    });
+    inv.appendChild(title);
+    svg.appendChild(inv);
+  }
+  wrap.append(svg, labelsRow(labels.slice(-7)));
+  el.appendChild(wrap);
+}
+function renderRadar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const axes = opts.axes;
+  const n = axes.length;
+  if (n < 3 || opts.series.length === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  let maxVal = opts.max ?? 0;
+  if (opts.max == null) {
+    for (const s of opts.series) {
+      for (let i = 0; i < n; i++) maxVal = Math.max(maxVal, s.values[i] ?? 0);
+    }
+    maxVal = niceCeil(maxVal);
+  }
+  if (maxVal <= 0) maxVal = 1;
+  const size = 200;
+  const cx = size / 2;
+  const cy = size / 2;
+  const radius = 78;
+  const levels = Math.max(2, opts.levels ?? 4);
+  const angleOf = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+  const pointAt = (i, r) => ({
+    x: cx + r * Math.cos(angleOf(i)),
+    y: cy + r * Math.sin(angleOf(i))
+  });
+  const wrap = document.createElement("div");
+  wrap.className = "chart-radar";
+  const svg = svgEl("svg", { viewBox: `0 0 ${size} ${size}`, role: "img" });
+  for (let lv = 1; lv <= levels; lv++) {
+    const r = radius * lv / levels;
+    const pts = Array.from({ length: n }, (_, i) => {
+      const p = pointAt(i, r);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    svg.appendChild(svgEl("polygon", {
+      points: pts,
+      fill: "none",
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1",
+      "stroke-dasharray": lv === levels ? "0" : "3 2"
+    }));
+  }
+  for (let i = 0; i < n; i++) {
+    const edge = pointAt(i, radius);
+    svg.appendChild(svgEl("line", {
+      x1: String(cx),
+      y1: String(cy),
+      x2: edge.x.toFixed(1),
+      y2: edge.y.toFixed(1),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+    const labelP = pointAt(i, radius + 14);
+    const txt = svgEl("text", {
+      x: labelP.x.toFixed(1),
+      y: labelP.y.toFixed(1),
+      "text-anchor": "middle",
+      "dominant-baseline": "middle",
+      "font-size": "9",
+      fill: "var(--token-text-muted)"
+    });
+    txt.textContent = axes[i] ?? "";
+    svg.appendChild(txt);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const s of opts.series) {
+    const tone = toneVar(s.tone);
+    const pts = Array.from({ length: n }, (_, i) => {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      return `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    }).join(" ");
+    const polyFill = svgEl("polygon", {
+      points: pts,
+      fill: tone,
+      "fill-opacity": "0.16",
+      stroke: tone,
+      "stroke-width": "2",
+      "stroke-linejoin": "round"
+    });
+    const title = svgEl("title", {});
+    title.textContent = `${s.name}: ${s.values.map((v) => fmt(opts, v)).join(" / ")}`;
+    polyFill.appendChild(title);
+    svg.appendChild(polyFill);
+    for (let i = 0; i < n; i++) {
+      const v = Math.max(0, Math.min(maxVal, s.values[i] ?? 0));
+      const p = pointAt(i, v / maxVal * radius);
+      svg.appendChild(svgEl("circle", {
+        cx: p.x.toFixed(1),
+        cy: p.y.toFixed(1),
+        r: "2.5",
+        fill: "var(--token-card)",
+        stroke: tone,
+        "stroke-width": "1.5"
+      }));
+    }
+    legend.appendChild(legendItem(s.name, "", s.tone));
+  }
+  wrap.append(svg, legend);
+  el.appendChild(wrap);
+}
+function niceCeil(v) {
+  if (v <= 0) return 1;
+  const exp = Math.floor(Math.log10(v));
+  const base = Math.pow(10, exp);
+  const frac = v / base;
+  let nice;
+  if (frac <= 1) nice = 1;
+  else if (frac <= 2) nice = 2;
+  else if (frac <= 5) nice = 5;
+  else nice = 10;
+  return nice * base;
+}
 function isoDate(d) {
   const m = String(d.getMonth() + 1).padStart(2, "0");
   const day = String(d.getDate()).padStart(2, "0");
@@ -424,11 +610,13 @@ function renderGauge(el, opts) {
   el.appendChild(wrap);
 }
 export {
+  renderArea,
   renderDonut,
   renderGauge,
   renderHBar,
   renderHeatmap,
   renderLine,
+  renderRadar,
   renderSparkline,
   renderStack,
   renderVBar

package/dist/behaviors/datatable.mjs

@@ -155,6 +155,8 @@ function svgIcon(d, size = 12) {
 var ICON_SEARCH = "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.3-4.3";
 var ICON_FUNNEL = "M22 3H2l8 9.46V19l4 2v-8.54L22 3Z";
 var ICON_CHEVRON = "m6 9 6 6 6-6";
+var ICON_COLUMNS = "M3 3h7v18H3zM14 3h7v18h-7z";
+var ICON_DOWNLOAD = "M12 3v12m0 0-4-4m4 4 4-4M5 21h14";
 function defaultCompare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a ?? "").localeCompare(String(b ?? ""), "zh-CN", { numeric: true });
@@ -169,7 +171,11 @@ function noopHandle() {
     setFilter: noop,
     setSort: noop,
     refresh: noop,
-    destroy: noop
+    destroy: noop,
+    getData: () => [],
+    exportCSV: noop,
+    showColumn: noop,
+    hideColumn: noop
   };
 }
 function createTable(el, opts) {
@@ -184,13 +190,18 @@ function createTable(el, opts) {
   const filters = /* @__PURE__ */ new Map();
   const selected = /* @__PURE__ */ new Set();
   const expanded = /* @__PURE__ */ new Set();
+  const colWidths = /* @__PURE__ */ new Map();
+  const colHidden = /* @__PURE__ */ new Map();
+  let lastClickedIndex = -1;
   let destroyed = false;
   const virtual = opts.virtual === true;
-  const rowH = opts.rowHeight ?? 44;
+  const compact = opts.density === "compact";
+  const rowH = opts.rowHeight ?? (compact ? 32 : 44);
   const pageSizes = opts.pageSizes ?? [10, 20, 50];
   const selectable = opts.selectable === true;
   const expandable = !virtual ? opts.expandable : void 0;
-  const cols = () => opts.columns.filter((c) => !c.hidden);
+  const resizable = opts.resizable !== false;
+  const cols = () => opts.columns.filter((c) => !(c.hidden || colHidden.get(c.key)));
   const keyOf = (row, index) => {
     if (typeof opts.rowKey === "function") return opts.rowKey(row);
     if (typeof opts.rowKey === "string") return String(row[opts.rowKey]);
@@ -202,7 +213,12 @@ function createTable(el, opts) {
     keyCache = /* @__PURE__ */ new WeakMap();
     data.forEach((r, i) => keyCache.set(r, keyOf(r, i)));
   }
+  let pipelineCache = null;
+  function invalidate() {
+    pipelineCache = null;
+  }
   function pipeline() {
+    if (pipelineCache) return pipelineCache;
     let rows = data;
     if (search) {
       const q = search.toLowerCase();
@@ -223,6 +239,7 @@ function createTable(el, opts) {
       const cmp = col?.sortFn ? (a, b) => col.sortFn(a, b) : (a, b) => defaultCompare(a[sortKey], b[sortKey]);
       rows = [...rows].sort((a, b) => sortDir === "asc" ? cmp(a, b) : -cmp(a, b));
     }
+    pipelineCache = rows;
     return rows;
   }
   el.textContent = "";
@@ -230,21 +247,55 @@ function createTable(el, opts) {
   root.className = "datatable";
   if (opts.striped) root.classList.add("datatable--striped");
   if (virtual) root.classList.add("datatable--virtual");
+  if (compact) root.classList.add("datatable--compact");
+  if (opts.columns.some((c) => c.frozen)) root.classList.add("datatable--frozen");
   let searchInput = null;
-  if (opts.searchable) {
-    const bar = document.createElement("div");
-    bar.className = "dt-toolbar";
-    const box = document.createElement("div");
-    box.className = "dt-search";
-    box.appendChild(svgIcon(ICON_SEARCH, 14));
-    searchInput = document.createElement("input");
-    searchInput.className = "dt-search-input";
-    searchInput.type = "search";
-    searchInput.placeholder = opts.searchPlaceholder ?? "\u641C\u7D22\u2026";
-    searchInput.setAttribute("aria-label", "\u641C\u7D22\u8868\u683C");
-    box.appendChild(searchInput);
-    bar.appendChild(box);
-    root.appendChild(bar);
+  const needsToolbar = opts.searchable || opts.columnVisibility || opts.exportable;
+  let toolbar = null;
+  if (needsToolbar) {
+    toolbar = document.createElement("div");
+    toolbar.className = "dt-toolbar";
+    if (opts.searchable) {
+      const box = document.createElement("div");
+      box.className = "dt-search";
+      box.appendChild(svgIcon(ICON_SEARCH, 14));
+      searchInput = document.createElement("input");
+      searchInput.className = "dt-search-input";
+      searchInput.type = "search";
+      searchInput.placeholder = opts.searchPlaceholder ?? "\u641C\u7D22\u2026";
+      searchInput.setAttribute("aria-label", "\u641C\u7D22\u8868\u683C");
+      box.appendChild(searchInput);
+      toolbar.appendChild(box);
+    }
+    const actions = document.createElement("div");
+    actions.className = "dt-toolbar-actions";
+    if (opts.columnVisibility) {
+      const colBtn = document.createElement("button");
+      colBtn.type = "button";
+      colBtn.className = "dt-tool-btn";
+      colBtn.setAttribute("aria-label", "\u5217\u8BBE\u7F6E");
+      colBtn.appendChild(svgIcon(ICON_COLUMNS, 14));
+      colBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        if (openPanel?.key === "__cols") closeFilterPanel();
+        else {
+          closeFilterPanel();
+          openColumnPanel(colBtn);
+        }
+      });
+      actions.appendChild(colBtn);
+    }
+    if (opts.exportable) {
+      const expBtn = document.createElement("button");
+      expBtn.type = "button";
+      expBtn.className = "dt-tool-btn";
+      expBtn.setAttribute("aria-label", "\u5BFC\u51FA CSV");
+      expBtn.appendChild(svgIcon(ICON_DOWNLOAD, 14));
+      expBtn.addEventListener("click", () => exportCSV());
+      actions.appendChild(expBtn);
+    }
+    if (actions.children.length > 0) toolbar.appendChild(actions);
+    root.appendChild(toolbar);
   }
   const scroll = document.createElement("div");
   scroll.className = "dt-scroll";
@@ -269,11 +320,29 @@ function createTable(el, opts) {
   foot.className = "dt-foot";
   root.appendChild(foot);
   el.appendChild(root);
+  function frozenOffsets() {
+    const offsets = /* @__PURE__ */ new Map();
+    if (!opts.columns.some((c) => c.frozen)) return offsets;
+    const visible = cols();
+    let acc = 0;
+    if (selectable) acc += 40;
+    if (expandable) acc += 34;
+    for (const c of visible) {
+      if (c.frozen) offsets.set(c.key, acc);
+      const w = colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)";
+      acc += parsePx(w);
+    }
+    return offsets;
+  }
+  function parsePx(w) {
+    const m = /^(\d+(?:\.\d+)?)px/.exec(w);
+    return m ? Number(m[1]) : 0;
+  }
   function template() {
     const parts = [];
     if (selectable) parts.push("40px");
     if (expandable) parts.push("34px");
-    for (const c of cols()) parts.push(c.width ?? "minmax(0,1fr)");
+    for (const c of cols()) parts.push(colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)");
     return parts.join(" ");
   }
   function fillCell(cell, col, row, rowIndex) {
@@ -355,6 +424,7 @@ function createTable(el, opts) {
       const cell = document.createElement("div");
       cell.className = "dt-cell dt-cell--head";
       if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) cell.classList.add("dt-cell--frozen");
       const title = document.createElement("span");
       title.className = "dt-head-title";
       title.textContent = col.title;
@@ -376,10 +446,12 @@ function createTable(el, opts) {
             sortDir = "asc";
           } else if (sortDir === "asc") sortDir = "desc";
           else sortKey = null;
+          invalidate();
+          opts.onSortChange?.(sortKey, sortDir);
           renderAll();
         };
         cell.addEventListener("click", (ev) => {
-          if (ev.target.closest(".dt-filter-btn")) return;
+          if (ev.target.closest(".dt-filter-btn, .dt-resize")) return;
           toggleSort();
         });
         cell.addEventListener("keydown", (ev) => {
@@ -407,9 +479,102 @@ function createTable(el, opts) {
         });
         cell.appendChild(btn);
       }
+      if (resizable && col !== cols()[cols().length - 1]) {
+        const handle = document.createElement("div");
+        handle.className = "dt-resize";
+        handle.setAttribute("role", "separator");
+        handle.setAttribute("aria-orientation", "vertical");
+        handle.setAttribute("aria-label", `\u8C03\u6574\u300C${col.title}\u300D\u5217\u5BBD`);
+        attachResize(handle, col);
+        cell.appendChild(handle);
+      }
       headRow.appendChild(cell);
     }
   }
+  function attachResize(handle, col) {
+    handle.addEventListener("pointerdown", (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const startX = ev.clientX;
+      const startW = handle.closest(".dt-cell").getBoundingClientRect().width;
+      handle.setPointerCapture(ev.pointerId);
+      const onMove = (e) => {
+        const delta = e.clientX - startX;
+        const next = Math.max(48, Math.round(startW + delta));
+        colWidths.set(col.key, `${next}px`);
+        headRow.style.gridTemplateColumns = template();
+        body.querySelectorAll(".dt-row").forEach((r) => {
+          r.style.gridTemplateColumns = template();
+        });
+      };
+      const onUp = (e) => {
+        handle.releasePointerCapture(e.pointerId);
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", onUp);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+    });
+  }
+  function openColumnPanel(btn) {
+    const panel2 = document.createElement("div");
+    panel2.className = "dt-filter-panel dt-col-panel";
+    panel2.hidden = true;
+    panel2.addEventListener("click", (ev) => ev.stopPropagation());
+    const list = document.createElement("div");
+    list.className = "dt-filter-list";
+    for (const col of opts.columns) {
+      if (col.key === "__select" || col.key === "__expand") continue;
+      const row = document.createElement("label");
+      row.className = "dt-filter-item";
+      const isHidden = colHidden.get(col.key) ?? col.hidden ?? false;
+      const box = makeCheck(!isHidden, col.title);
+      box.addEventListener("change", () => {
+        if (box.checked) colHidden.delete(col.key);
+        else colHidden.set(col.key, true);
+        invalidate();
+        renderAll();
+      });
+      const text = document.createElement("span");
+      text.textContent = col.title;
+      row.append(box, text);
+      list.appendChild(row);
+    }
+    panel2.appendChild(list);
+    document.body.appendChild(panel2);
+    openPanel = { key: "__cols", el: panel2 };
+    const rect = btn.getBoundingClientRect();
+    const pr = panel2.getBoundingClientRect();
+    let x = rect.right - pr.width;
+    let y = rect.bottom + 4;
+    if (x < 8) x = 8;
+    if (y + pr.height > window.innerHeight - 8) y = rect.top - pr.height - 4;
+    panel2.style.left = `${x}px`;
+    panel2.style.top = `${y}px`;
+    panel2.hidden = false;
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+  }
+  function exportCSV(filename) {
+    const rows = pipeline();
+    const visible = cols();
+    const header = visible.map((c) => csvEscape(c.title)).join(",");
+    const lines = rows.map(
+      (row) => visible.map((c) => csvEscape(String(row[c.key] ?? ""))).join(",")
+    );
+    const csv = "\uFEFF" + [header, ...lines].join("\r\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? "export.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  function csvEscape(s) {
+    if (/[",\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+    return s;
+  }
   function buildFilterPanel(col) {
     const panel2 = document.createElement("div");
     panel2.className = "dt-filter-panel";
@@ -428,6 +593,7 @@ function createTable(el, opts) {
         else cur.delete(v);
         if (cur.size === values.length) filters.delete(col.key);
         else filters.set(col.key, cur);
+        invalidate();
         page = 1;
         renderAll();
       });
@@ -444,6 +610,7 @@ function createTable(el, opts) {
     reset.textContent = "\u91CD\u7F6E";
     reset.addEventListener("click", () => {
       filters.delete(col.key);
+      invalidate();
       page = 1;
       closeFilterPanel();
       renderAll();
@@ -459,15 +626,40 @@ function createTable(el, opts) {
     tr.style.gridTemplateColumns = template();
     if (virtual) tr.style.height = `${rowH}px`;
     if (selected.has(key)) tr.classList.add("is-selected");
+    if (opts.rowClassName) {
+      const extra = opts.rowClassName(row, rowIndex);
+      if (extra) tr.classList.add(...extra.split(/\s+/).filter(Boolean));
+    }
     if (selectable) {
       const cell = document.createElement("div");
       cell.className = "dt-cell dt-cell--check";
+      if (frozenOffsets().size > 0 && selectable) {
+        cell.classList.add("dt-cell--frozen");
+        cell.style.left = "0px";
+      }
       const box = makeCheck(selected.has(key), "\u9009\u62E9\u8BE5\u884C");
-      box.addEventListener("click", (ev) => ev.stopPropagation());
+      box.addEventListener("click", (ev) => {
+        box._shift = ev.shiftKey;
+        ev.stopPropagation();
+      });
       box.addEventListener("change", () => {
-        if (box.checked) selected.add(key);
-        else selected.delete(key);
-        tr.classList.toggle("is-selected", box.checked);
+        const shift = box._shift === true;
+        if (shift && lastClickedIndex >= 0 && lastClickedIndex !== rowIndex) {
+          const rows = pipeline();
+          const [lo, hi] = lastClickedIndex < rowIndex ? [lastClickedIndex, rowIndex] : [rowIndex, lastClickedIndex];
+          const willSelect = box.checked;
+          for (let i = lo; i <= hi; i++) {
+            const k = keyOfRow(rows[i]);
+            if (willSelect) selected.add(k);
+            else selected.delete(k);
+          }
+          renderBody();
+        } else {
+          if (box.checked) selected.add(key);
+          else selected.delete(key);
+          tr.classList.toggle("is-selected", box.checked);
+        }
+        lastClickedIndex = rowIndex;
         emitSelection();
         renderHead();
         renderFoot(pipeline().length);
@@ -493,10 +685,16 @@ function createTable(el, opts) {
       cell.appendChild(btn);
       tr.appendChild(cell);
     }
+    const offsets = frozenOffsets();
     for (const col of cols()) {
       const cell = document.createElement("div");
       cell.className = "dt-cell";
       if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) {
+        cell.classList.add("dt-cell--frozen");
+        const off = offsets.get(col.key);
+        if (off != null) cell.style.left = `${off}px`;
+      }
       fillCell(cell, col, row, rowIndex);
       tr.appendChild(cell);
     }
@@ -663,6 +861,7 @@ function createTable(el, opts) {
     window.clearTimeout(searchTimer);
     searchTimer = window.setTimeout(() => {
       search = searchInput?.value.trim() ?? "";
+      invalidate();
       page = 1;
       renderAll();
     }, 160);
@@ -676,7 +875,7 @@ function createTable(el, opts) {
   function onDocPointerDown(ev) {
     if (!openPanel) return;
     const t = ev.target;
-    if (t instanceof Node && (openPanel.el.contains(t) || headRow.contains(t))) return;
+    if (t instanceof Node && (openPanel.el.contains(t) || headRow.contains(t) || toolbar?.contains(t))) return;
     closeFilterPanel();
   }
   document.addEventListener("pointerdown", onDocPointerDown, true);
@@ -700,6 +899,7 @@ function createTable(el, opts) {
     setData(next) {
       data = next;
       rekey();
+      invalidate();
       page = 1;
       renderAll();
     },
@@ -714,21 +914,41 @@ function createTable(el, opts) {
     setSearch(q) {
       search = q;
       if (searchInput) searchInput.value = q;
+      invalidate();
       page = 1;
       renderAll();
     },
     setFilter(key, values) {
       if (values === null) filters.delete(key);
       else filters.set(key, new Set(values));
+      invalidate();
       page = 1;
       renderAll();
     },
     setSort(key, dir = "asc") {
       sortKey = key;
       sortDir = dir;
+      invalidate();
+      opts.onSortChange?.(sortKey, sortDir);
+      renderAll();
+    },
+    getData() {
+      return pipeline();
+    },
+    exportCSV,
+    showColumn(key) {
+      colHidden.delete(key);
+      opts.columns.find((c) => c.key === key).hidden = false;
+      invalidate();
+      renderAll();
+    },
+    hideColumn(key) {
+      colHidden.set(key, true);
+      invalidate();
       renderAll();
     },
     refresh() {
+      invalidate();
       renderAll();
     },
     destroy() {

package/dist/components/chart-area.css

@@ -0,0 +1,15 @@
+/*
+ * @icen.ai/ui — Component: chart-area（面积图专属样式）
+ * 依赖：charts.css（基座）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderArea 构建：
+ *   .chart-area > svg[viewBox="0 0 360 150"]
+ * 与折线同族，但以面积填充为视觉主体（渐变更浓、描边更细）。
+ */
+
+.chart-area > svg {
+  display: block;
+  width: 100%;
+  height: 150px;
+  overflow: visible;
+}

package/dist/components/chart-area.mjs

@@ -0,0 +1,4 @@
+// @icen.ai/ui — kit: chart-area（CSS + behavior 一行入口；构建产物，勿手改）
+import './chart-area.css';
+import './charts.css';
+export { renderArea } from '../behaviors/charts.mjs';