@icen.ai/ui 0.10.0 → 0.11.1

package/dist/react.mjs

@@ -166,6 +166,7 @@ var ICEN_LOCALE_ZH_CN = {
   "aiChat.roleTool": "\u5DE5",
   "aiChat.roleUser": "\u6211",
   "aiChat.thinking": "\u601D\u8003 {p0}",
+  "aiChat.thinkingNow": "\u6B63\u5728\u601D\u8003\u2026",
   /* ── aiComposer ── */
   "aiComposer.attachAgent": "\u4EE3\u7406",
   "aiComposer.library": "\u6DFB\u52A0\u4E0A\u4E0B\u6587\u4E0E\u547D\u4EE4",
@@ -348,6 +349,19 @@ var ICEN_LOCALE_ZH_CN = {
   "charts.noData": "\u6682\u65E0\u6570\u636E",
   "charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
   "charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
+  "charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
+  "charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
+  "charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
+  "charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
+  "charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
+  "charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
+  "charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
+  "charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
+  "charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
+  "charts.a11y.trendDown": "\u4E0B\u964D",
+  "charts.a11y.trendFlat": "\u6301\u5E73",
+  "charts.a11y.trendUp": "\u4E0A\u5347",
   "charts.type.area": "\u9762\u79EF\u56FE",
   "charts.type.donut": "\u73AF\u5F62\u56FE",
   "charts.type.gauge": "\u4EEA\u8868\u76D8",
@@ -1213,7 +1227,8 @@ function withChrome(el, opts, hasLegend, paint, state, extras) {
     emitIcen(el, "icen:chart-legend-visibility", { visible: hidden ? false : true });
   });
   syncEye();
-  head.append(title, eye);
+  if (hasLegend) head.append(title, eye);
+  else head.append(title);
   el.append(head, body);
   paint(body);
 }
@@ -1314,7 +1329,7 @@ function renderVBar(el, opts) {
       wrap.appendChild(track);
     }
     body.append(wrap, labelsRow(labelsUsed));
-    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone ?? (si === 0 ? opts.tone : void 0), si })), wrap));
+    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: `${si}:${s.name}`, label: s.name, tone: s.tone ?? (si === 0 ? opts.tone : void 0), si })), wrap));
   });
   attachChartInteraction(el, "vbar");
   return el;
@@ -1409,8 +1424,10 @@ function renderDonut(el, opts) {
       "stroke-width": "14"
     }));
     let offset = 0;
+    const gap = opts.segments.length > 1 ? 2.5 : 0;
     opts.segments.forEach((seg, segIndex) => {
-      const dash = seg.value / total * circumference;
+      const arcLength = Math.max(0, seg.value / total * circumference);
+      const dash = arcLength - Math.min(gap, arcLength * 0.1);
       const arc = svgEl("circle", {
         cx: "60",
         cy: "60",
@@ -1424,7 +1441,7 @@ function renderDonut(el, opts) {
       });
       setMarkData(arc, { index: segIndex, label: seg.label, value: seg.value });
       svg.appendChild(arc);
-      offset += dash;
+      offset += arcLength;
     });
     const legend = document.createElement("div");
     legend.className = "icen-chart-legend";
@@ -1459,8 +1476,9 @@ function renderLine(el, opts) {
     const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": chartAriaLabel(opts.title, t("charts.type.line")) });
     const defs = svgEl("defs", {});
     for (let i = 0; i < 4; i++) {
-      const y = pad + i * (height - pad * 2) / 3;
+      const y = Math.round(pad + i * (height - pad * 2) / 3) + 0.5;
       svg.appendChild(svgEl("line", {
+        class: i === 3 ? "icen-chart-grid icen-chart-baseline" : "icen-chart-grid",
         x1: String(pad),
         x2: String(width - pad),
         y1: String(y),
@@ -1544,7 +1562,7 @@ function renderLine(el, opts) {
     if (defs.firstChild) svg.insertBefore(defs, svg.firstChild);
     wrap.append(svg, pointLabelsRow(labelsUsed, width, pad));
     body.appendChild(wrap);
-    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: s.name, label: s.name, tone: s.tone ?? (si === 0 ? opts.tone : void 0), si })), wrap));
+    if (seriesList.length > 1) body.appendChild(toggleLegend(seriesList.map((s, si) => ({ key: `${si}:${s.name}`, label: s.name, tone: s.tone ?? (si === 0 ? opts.tone : void 0), si })), wrap));
   });
   if (el.dataset.icenChartBody == null) observeFluidWidth(el, () => renderLine(el, opts));
   attachChartInteraction(el, "line");
@@ -1651,7 +1669,7 @@ function renderRadar(el, opts) {
         setMarkData(dot, { index: i, seriesIndex: si, seriesName: s.name || void 0, label: axes[i] ?? "", value: s.values[i] ?? 0 });
         svg.appendChild(dot);
       }
-      legendItems.push({ key: s.name || t("charts.seriesName", { p0: si + 1 }), label: s.name || t("charts.seriesName", { p0: si + 1 }), tone: s.tone, si });
+      legendItems.push({ key: `${si}:${s.name || t("charts.seriesName", { p0: si + 1 })}`, label: s.name || t("charts.seriesName", { p0: si + 1 }), tone: s.tone, si });
     });
     wrap.appendChild(svg);
     body.appendChild(wrap);
@@ -1673,6 +1691,11 @@ function niceCeil(v) {
   else nice = 10;
   return nice * base;
 }
+function tickPrecision(min, max, steps) {
+  const span = Math.abs(max - min);
+  if (!Number.isFinite(span) || span <= 0) return 0;
+  return Math.max(0, Math.ceil(-Math.log10(span / steps)));
+}
 function isoDate(d) {
   const m = String(d.getMonth() + 1).padStart(2, "0");
   const day = String(d.getDate()).padStart(2, "0");
@@ -1768,7 +1791,8 @@ function renderSparkline(el, opts) {
     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),
+      /* 负值钳到基线（与折线图同口径）：viewBox 仅 28 高，反向射出更刺眼 */
+      y: height - pad - Math.max(0, value) / max * (height - pad * 2),
       value
     }));
     const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
@@ -1893,6 +1917,7 @@ function renderCalendar(el, opts) {
       weekdayRow.appendChild(s);
     });
     const max = maxOf(entries.map((e) => e.value));
+    entries.sort((a, b) => a.date.localeCompare(b.date));
     const pad = padFirstWeek(grid, entries[0].date, weekStart);
     let lastMonth = -1;
     entries.forEach((entry, i) => {
@@ -1951,8 +1976,9 @@ function renderScatter(el, opts) {
     const xAt = (x) => pad + (x - xMin) / (xMax - xMin) * (width - pad * 2);
     const yAt = (y) => height - pad - (y - yMin) / (yMax - yMin) * (height - pad * 2);
     for (let i = 0; i <= 3; i++) {
-      const y = pad + i * (height - pad * 2) / 3;
+      const y = Math.round(pad + i * (height - pad * 2) / 3) + 0.5;
       svg.appendChild(svgEl("line", {
+        class: i === 3 ? "icen-chart-grid icen-chart-baseline" : "icen-chart-grid",
         x1: String(pad),
         x2: String(width - pad),
         y1: String(y),
@@ -1968,12 +1994,13 @@ function renderScatter(el, opts) {
         "font-size": "8",
         fill: "var(--icen-token-text-faint)"
       });
-      txt.textContent = fmt(opts, Math.round(tv * 10) / 10);
+      txt.textContent = fmt(opts, +tv.toFixed(tickPrecision(yMin, yMax, 3)));
       svg.appendChild(txt);
     }
     for (let i = 0; i <= 4; i++) {
-      const x = pad + i * (width - pad * 2) / 4;
+      const x = Math.round(pad + i * (width - pad * 2) / 4) + 0.5;
       svg.appendChild(svgEl("line", {
+        class: i === 0 ? "icen-chart-grid icen-chart-grid--v icen-chart-axis" : "icen-chart-grid icen-chart-grid--v",
         x1: String(x),
         x2: String(x),
         y1: String(pad),
@@ -1990,7 +2017,7 @@ function renderScatter(el, opts) {
         "font-size": "8",
         fill: "var(--icen-token-text-faint)"
       });
-      txt.textContent = fmt(opts, Math.round(tv * 10) / 10);
+      txt.textContent = fmt(opts, +tv.toFixed(tickPrecision(xMin, xMax, 4)));
       svg.appendChild(txt);
     }
     if (opts.yLabel) {
@@ -2227,6 +2254,14 @@ function normalizeChartSpec(raw) {
   }
   if (s.zoom === "x" || s.zoom === "brush") spec.zoom = s.zoom;
   if (typeof s.loading === "boolean") spec.loading = s.loading;
+  if (s.a11y && typeof s.a11y === "object") {
+    const a = s.a11y;
+    const a11y = {};
+    if (typeof a.summary === "boolean") a11y.summary = a.summary;
+    if (typeof a.table === "boolean") a11y.table = a.table;
+    if (typeof a.keyboard === "boolean") a11y.keyboard = a.keyboard;
+    if (Object.keys(a11y).length > 0) spec.a11y = a11y;
+  }
   if (Array.isArray(s.marks)) {
     const marks = [];
     for (const raw2 of s.marks) {
@@ -2354,6 +2389,7 @@ function renderChartSkeleton(body) {
   body.appendChild(box);
 }
 var CHART_MARK_ACCENT = "var(--icen-token-accent)";
+var CHART_MARK_ACCENT_TEXT = "var(--icen-token-accent-text)";
 function markToneVar(tone) {
   switch (tone) {
     case "success":
@@ -2489,7 +2525,7 @@ function paintSvgChartMarks(root, view, marks, formatValue, warned) {
         y: String(clampNum(y - 10, 8, CHART_LINE_H - 4)),
         "text-anchor": "middle",
         "font-size": "8",
-        fill: CHART_MARK_ACCENT
+        fill: CHART_MARK_ACCENT_TEXT
       });
       label.textContent = mark.text ?? mark.label;
       g.appendChild(label);
@@ -2581,6 +2617,81 @@ function paintVBarChartMarks(root, view, spec, marks, formatValue, warned) {
 function chartAriaLabel(title, typeName) {
   return title ? `${typeName}\uFF1A${title}` : typeName;
 }
+function summarizeChart(view, type, fmt2) {
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const parts = [];
+  if (series.length > 1) parts.push(t("charts.a11y.seriesCount", { p0: series.length }));
+  if (type === "scatter") {
+    const pts = view.points ?? [];
+    if (pts.length > 0) {
+      const xs = pts.map((p) => p.x);
+      const ys = pts.map((p) => p.y);
+      parts.push(t("charts.a11y.scatterRange", { p0: fmt2(Math.min(...xs)), p1: fmt2(Math.max(...xs)), p2: fmt2(Math.min(...ys)), p3: fmt2(Math.max(...ys)) }));
+    }
+    return parts.join("\uFF1B");
+  }
+  const labels = view.labels ?? [];
+  if (labels.length > 1) parts.push(t("charts.a11y.range", { p0: labels[0], p1: labels[labels.length - 1] }));
+  let min = Infinity;
+  let max = -Infinity;
+  let minAt = "";
+  let maxAt = "";
+  for (const s of series) {
+    s.values.forEach((v, i) => {
+      if (v < min) {
+        min = v;
+        minAt = labels[i] ?? String(i + 1);
+      }
+      if (v > max) {
+        max = v;
+        maxAt = labels[i] ?? String(i + 1);
+      }
+    });
+  }
+  if (Number.isFinite(min) && Number.isFinite(max)) {
+    parts.push(t("charts.a11y.min", { p0: fmt2(min), p1: minAt }));
+    parts.push(t("charts.a11y.max", { p0: fmt2(max), p1: maxAt }));
+  }
+  const first = series[0]?.values ?? [];
+  if (first.length > 1) {
+    const d = first[first.length - 1] - first[0];
+    const key = Math.abs(d) < 1e-9 ? "charts.a11y.trendFlat" : d > 0 ? "charts.a11y.trendUp" : "charts.a11y.trendDown";
+    parts.push(t("charts.a11y.trend", { p0: t(key) }));
+  }
+  return parts.join("\uFF1B");
+}
+function buildChartTable(view, spec, type, fmt2) {
+  const table = document.createElement("table");
+  table.className = "icen-chart-table";
+  const caption = document.createElement("caption");
+  caption.textContent = t("charts.a11y.tableCaption", { p0: spec.title ?? String(type) });
+  table.appendChild(caption);
+  const addRow = (target, cells, head) => {
+    const tr = document.createElement("tr");
+    for (const c of cells) {
+      const cell = document.createElement(head ? "th" : "td");
+      if (head) cell.scope = target.tagName === "THEAD" ? "col" : "row";
+      cell.textContent = c;
+      tr.appendChild(cell);
+    }
+    target.appendChild(tr);
+  };
+  const thead = table.createTHead();
+  const tbody = table.createTBody();
+  if (type === "scatter") {
+    addRow(thead, ["x", "y"], true);
+    for (const p of view.points ?? []) addRow(tbody, [fmt2(p.x), fmt2(p.y)], false);
+    return table;
+  }
+  const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const labels = view.labels ?? [];
+  addRow(thead, ["", ...series.map((s, i) => s.name || String(i + 1))], true);
+  const n = Math.max(labels.length, ...series.map((s) => s.values.length));
+  for (let i = 0; i < n; i++) {
+    addRow(tbody, [labels[i] ?? String(i + 1), ...series.map((s) => fmt2(s.values[i] ?? 0))], false);
+  }
+  return table;
+}
 function svgDimsOf(svg) {
   const vb = (svg.getAttribute("viewBox") ?? "").split(/\s+/).map(Number);
   const w = Number.isFinite(vb[2]) && (vb[2] ?? 0) > 0 ? vb[2] : CHART_LINE_W;
@@ -2921,6 +3032,7 @@ function renderChart(el, raw) {
     if (!isZoomableType(t2) || fullLength() < 2) return;
     const plot = t2 === "vbar" ? root.querySelector(".icen-chart-vbar") : root.querySelector(".icen-chart-line svg");
     if (!plot) return;
+    plot.style.touchAction = current2.zoom === "x" ? "pan-y" : "none";
     const on = (type, fn) => {
       plot.addEventListener(type, fn);
     };
@@ -2976,6 +3088,149 @@ function renderChart(el, raw) {
       render();
     });
   };
+  const KB_TYPES = /* @__PURE__ */ new Set(["line", "area", "vbar", "hbar", "scatter"]);
+  const kbCursor = { si: 0, i: 0, active: false };
+  let liveRegion = null;
+  let a11ySeq = 0;
+  const a11yOf = () => ({
+    summary: current2.a11y?.summary !== false,
+    table: current2.a11y?.table === true,
+    keyboard: current2.a11y?.keyboard !== false
+  });
+  const seriesViewOf = (view) => view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
+  const kbPointCount = (view) => typeOf() === "scatter" ? view.points?.length ?? 0 : Math.max(0, ...seriesViewOf(view).map((s) => s.values.length), view.labels?.length ?? 0);
+  const kbCursorEl = () => {
+    const t2 = typeOf();
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return null;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, n - 1);
+    if (t2 === "line" || t2 === "area") {
+      const svg = root.querySelector(".icen-chart-line svg");
+      if (!svg) return null;
+      const dots = svg.querySelectorAll("circle");
+      let base = 0;
+      for (let k = 0; k < si; k++) base += Math.min(series[k].values.length, n);
+      return dots.item(base + i) ?? null;
+    }
+    if (t2 === "scatter") return root.querySelector(".icen-chart-scatter svg")?.querySelectorAll("circle").item(i) ?? null;
+    if (t2 === "vbar") return root.querySelectorAll(".icen-chart-vbar-bar").item(series.length > 1 ? i * series.length + si : i) ?? null;
+    if (t2 === "hbar") return root.querySelectorAll(".icen-chart-hbar-bar").item(i) ?? null;
+    return null;
+  };
+  const announceKb = (text) => {
+    if (!liveRegion || !liveRegion.isConnected) {
+      liveRegion = document.createElement("div");
+      liveRegion.className = "icen-chart-live";
+      liveRegion.setAttribute("aria-live", "polite");
+      root.appendChild(liveRegion);
+    }
+    liveRegion.textContent = "";
+    liveRegion.textContent = text;
+  };
+  const applyKbCursor = () => {
+    for (const el2 of root.querySelectorAll(".icen-chart-kb-focus")) el2.classList.remove("icen-chart-kb-focus");
+    if (!kbCursor.active) return;
+    kbCursorEl()?.classList.add("icen-chart-kb-focus");
+  };
+  const announceCursor = () => {
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
+    const i = clampNum(kbCursor.i, 0, Math.max(0, n - 1));
+    const fmt2 = chartFormatValue(current2.format);
+    if (typeOf() === "scatter") {
+      const p = view.points?.[i];
+      if (!p) return;
+      announceKb(t("charts.a11y.point", { p0: `x ${fmt2(p.x)}`, p1: `y ${fmt2(p.y)}`, p2: i + 1, p3: n }));
+      return;
+    }
+    const label = view.labels?.[i] ?? String(i + 1);
+    const value = series[si]?.values[i] ?? 0;
+    if (series.length > 1) announceKb(t("charts.a11y.pointSeries", { p0: series[si].name || String(si + 1), p1: label, p2: fmt2(value), p3: i + 1, p4: n }));
+    else announceKb(t("charts.a11y.point", { p0: label, p1: fmt2(value), p2: i + 1, p3: n }));
+  };
+  const onKbKeydown = (e) => {
+    const conf = a11yOf();
+    if (!conf.keyboard || !KB_TYPES.has(typeOf())) return;
+    const g = root.querySelector("[data-icen-chart-kb]");
+    if (!g || e.target !== g) return;
+    if (e.key === "Escape") {
+      if (zoomWindow) {
+        zoomWindow = null;
+        kbCursor.active = false;
+        render();
+      }
+      return;
+    }
+    const view = viewOf();
+    const series = seriesViewOf(view);
+    const n = kbPointCount(view);
+    if (n < 1) return;
+    const siMax = Math.max(0, series.length - 1);
+    let moved = true;
+    switch (e.key) {
+      case "ArrowRight":
+        kbCursor.i = clampNum(kbCursor.i + 1, 0, n - 1);
+        break;
+      case "ArrowLeft":
+        kbCursor.i = clampNum(kbCursor.i - 1, 0, n - 1);
+        break;
+      case "ArrowDown":
+        kbCursor.si = clampNum(kbCursor.si + 1, 0, siMax);
+        break;
+      case "ArrowUp":
+        kbCursor.si = clampNum(kbCursor.si - 1, 0, siMax);
+        break;
+      case "Home":
+        kbCursor.i = 0;
+        break;
+      case "End":
+        kbCursor.i = n - 1;
+        break;
+      default:
+        moved = false;
+    }
+    if (!moved) return;
+    e.preventDefault();
+    kbCursor.active = true;
+    applyKbCursor();
+    announceCursor();
+  };
+  root.addEventListener("keydown", onKbKeydown);
+  const applyChartA11yPlus = (view, spec, type, formatValue) => {
+    const conf = a11yOf();
+    const graphic = root.querySelector('[role="img"]');
+    if (!graphic) return;
+    const body = root.querySelector(".icen-chart-body") ?? graphic.parentElement ?? root;
+    const summaryParts = [];
+    if (conf.summary) summaryParts.push(summarizeChart(view, type, formatValue));
+    if (conf.keyboard && KB_TYPES.has(type)) summaryParts.push(t("charts.a11y.keyboardHint"));
+    const summaryText = summaryParts.filter(Boolean).join("\uFF1B");
+    if (summaryText) {
+      const p = document.createElement("p");
+      p.className = "icen-chart-summary";
+      p.id = `icen-chart-a11y-${++a11ySeq}`;
+      p.textContent = summaryText;
+      body.appendChild(p);
+      graphic.setAttribute("aria-describedby", p.id);
+    } else {
+      graphic.removeAttribute("aria-describedby");
+    }
+    if (conf.keyboard && KB_TYPES.has(type)) {
+      graphic.setAttribute("tabindex", "0");
+      graphic.setAttribute("data-icen-chart-kb", "");
+    } else {
+      graphic.removeAttribute("tabindex");
+      graphic.removeAttribute("data-icen-chart-kb");
+    }
+    if (conf.table) body.appendChild(buildChartTable(view, spec, type, formatValue));
+    applyKbCursor();
+  };
   const render = () => {
     if (!current2.type) current2 = { ...current2, type: inferChartType(current2) };
     const spec = current2;
@@ -3047,9 +3302,16 @@ function renderChart(el, raw) {
       const graphic = root.querySelector('[role="img"]');
       if (graphic && !graphic.getAttribute("aria-label")) {
         graphic.setAttribute("aria-label", spec.title ? `${spec.title}\uFF08${type}\uFF09` : type);
+      } else if (!graphic) {
+        const dom = root.querySelector(".icen-chart-vbar, .icen-chart-hbar");
+        if (dom) {
+          dom.setAttribute("role", "img");
+          dom.setAttribute("aria-label", spec.title ? `${spec.title}\uFF08${type}\uFF09` : type);
+        }
       }
     }
     if (loading) return;
+    applyChartA11yPlus(view, spec, type, formatValue);
     paintChartMarks(root, view, spec, formatValue, warnedMarks);
     bindZoomGesture();
   };
@@ -3131,6 +3393,7 @@ function renderChart(el, raw) {
       releaseFluidWidth(root);
       hiddenLegendKeys.delete(root);
       zoomDragCleanup?.();
+      root.removeEventListener("keydown", onKbKeydown);
       root.textContent = "";
       root.classList.remove("is-loading");
       unbindEvents();
@@ -3759,7 +4022,13 @@ function onKeyDown2(e) {
 
 // src/behaviors/datatable.ts
 function defaultCompare(a, b) {
-  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "number" && typeof b === "number") {
+    if (Number.isNaN(a) || Number.isNaN(b)) {
+      if (Number.isNaN(a) && Number.isNaN(b)) return 0;
+      return Number.isNaN(a) ? 1 : -1;
+    }
+    return a - b;
+  }
   return String(a ?? "").localeCompare(String(b ?? ""), "zh-CN", { numeric: true });
 }
 function toNum2(v) {
@@ -4048,11 +4317,13 @@ function createTable(el, opts) {
   const body = document.createElement("div");
   body.className = "icen-dt-body";
   body.setAttribute("role", "rowgroup");
-  const summaryEl = document.createElement("div");
-  summaryEl.className = "icen-dt-row icen-dt-row--summary";
-  summaryEl.setAttribute("role", "row");
-  summaryEl.hidden = true;
-  canvas.append(head, body, summaryEl);
+  const summaryEl = opts.summaryRow ? document.createElement("div") : null;
+  if (summaryEl) {
+    summaryEl.className = "icen-dt-row icen-dt-row--summary";
+    summaryEl.setAttribute("role", "row");
+    summaryEl.hidden = true;
+  }
+  canvas.append(head, body, ...summaryEl ? [summaryEl] : []);
   scroll.appendChild(canvas);
   root.appendChild(scroll);
   const foot = document.createElement("div");
@@ -4866,6 +5137,7 @@ function createTable(el, opts) {
     return wrap;
   }
   function renderSummary() {
+    if (!summaryEl) return;
     summaryEl.textContent = "";
     summaryEl.hidden = true;
     const cfg = opts.summaryRow;
@@ -5062,9 +5334,9 @@ function createTable(el, opts) {
     }
   }
   let currentTotal = 0;
-  function visibleRange(total) {
+  function visibleRange(total, avail) {
     if (!virtual) {
-      if (opts.remote || opts.pagination === false) return [0, total];
+      if (opts.remote || opts.pagination === false) return [0, Math.min(total, avail)];
       const start2 = (page - 1) * pageSize;
       return [start2, Math.min(total, start2 + pageSize)];
     }
@@ -5079,6 +5351,10 @@ function createTable(el, opts) {
     const rows = pipeline();
     const entries = groupFn ? flatEntries() : null;
     const total = entries ? entries.length : opts.remote ? opts.totalCount ?? data.length : rows.length;
+    if (!opts.remote && opts.pagination !== false) {
+      const pages = Math.max(1, Math.ceil(total / pageSize));
+      if (page > pages) page = pages;
+    }
     navTotal = entries ? entries.length : rows.length;
     currentTotal = total;
     const keepTop = virtual ? scroll.scrollTop : 0;
@@ -5107,7 +5383,7 @@ function createTable(el, opts) {
       renderSummary();
       return;
     }
-    const [start, end] = visibleRange(total);
+    const [start, end] = visibleRange(total, rows.length);
     const frag = document.createDocumentFragment();
     const offsets = frozenOffsets();
     if (virtual && start > 0) {
@@ -5170,11 +5446,21 @@ function createTable(el, opts) {
     const pages = Math.ceil(total / pageSize);
     const pager = document.createElement("nav");
     pager.className = "icen-dt-pager";
-    pager.setAttribute("aria-label", t("datatable.paginationAria"));
+    {
+      const base = t("datatable.paginationAria");
+      const used = /* @__PURE__ */ new Set();
+      for (const el2 of document.querySelectorAll(".icen-dt-pager[aria-label]")) {
+        if (!root.contains(el2)) used.add(el2.getAttribute("aria-label") ?? "");
+      }
+      let label = base, n = 2;
+      while (used.has(label)) label = `${base} ${n++}`;
+      pager.setAttribute("aria-label", label);
+    }
     const sizeSel = document.createElement("select");
     sizeSel.className = "icen-dt-page-size";
     sizeSel.setAttribute("aria-label", t("datatable.pageSizeAria"));
-    for (const s of pageSizes) {
+    const sizeOptions = pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize].sort((a, b) => a - b);
+    for (const s of sizeOptions) {
       const o = document.createElement("option");
       o.value = String(s);
       o.textContent = t("pagination.pageSize", { p0: s });
@@ -5266,6 +5552,7 @@ function createTable(el, opts) {
     if (destroyed) return;
     renderHead();
     renderBody();
+    syncFrozenWidths();
   }
   rekey();
   renderAll();
@@ -5286,12 +5573,52 @@ function createTable(el, opts) {
     opts.onPageChange?.(page, pageSize);
     renderAll();
   }
+  function hasFluidFrozen() {
+    return cols().some((c) => frozenSide(c) != null && !/^(\d+(?:\.\d+)?)px/.test(colWidths.get(c.key) ?? c.width ?? ""));
+  }
+  function syncFrozenWidths() {
+    if (!hasFluidFrozen()) return;
+    const visible = cols();
+    const headCells = Array.from(headRow.children);
+    const lead = headCells.length - visible.length;
+    const left = /* @__PURE__ */ new Map();
+    const right = /* @__PURE__ */ new Map();
+    let acc = headCells.slice(0, lead).reduce((s, c) => s + c.offsetWidth, 0);
+    for (let i = 0; i < visible.length; i++) {
+      const c = visible[i];
+      if (frozenSide(c) === "left") left.set(c.key, acc);
+      acc += headCells[lead + i]?.offsetWidth ?? 0;
+    }
+    let accR = 0;
+    for (let i = visible.length - 1; i >= 0; i--) {
+      const c = visible[i];
+      if (frozenSide(c) === "right") right.set(c.key, accR);
+      accR += headCells[lead + i]?.offsetWidth ?? 0;
+    }
+    const rows = [headRow, ...summaryEl ? [summaryEl] : [], ...Array.from(body.querySelectorAll(".icen-dt-row"))];
+    for (const row of rows) {
+      const cells = Array.from(row.children);
+      if (cells.length !== headCells.length) continue;
+      cells.forEach((cell, i) => {
+        const col = i >= lead ? visible[i - lead] : void 0;
+        if (!col) return;
+        const l = left.get(col.key);
+        if (l != null && cell.classList.contains("icen-dt-cell--frozen")) cell.style.left = `${l}px`;
+        const r = right.get(col.key);
+        if (r != null && cell.classList.contains("icen-dt-cell--frozen-right")) cell.style.right = `${r}px`;
+      });
+    }
+  }
   return {
     setPage,
     setPageSize,
     setData(next) {
       if (editing) cancelEdit(true);
       data = next;
+      if (typeof opts.rowKey !== "function" && typeof opts.rowKey !== "string" && selected.size > 0) {
+        selected.clear();
+        emitSelection();
+      }
       rekey();
       invalidate();
       page = 1;
@@ -5662,6 +5989,15 @@ function svgIcon(svg) {
   return parseSvg(svg);
 }
 
+// src/behaviors/url-safety.ts
+function safeUrl(uri) {
+  const s = uri.replace(/[\t\n\r\0-\x1f\x7f]/g, "").trim().toLowerCase();
+  if (!s) return void 0;
+  if (s.startsWith("javascript:") || s.startsWith("vbscript:")) return void 0;
+  if (/^data:\s*text\/html/.test(s)) return void 0;
+  return uri;
+}
+
 // src/behaviors/ai-chat.ts
 var ICON_COPY = iconHTML("copy");
 var ICON_RETRY = iconHTML("refresh");
@@ -5689,6 +6025,8 @@ function createAiStream(el) {
   el.setAttribute("aria-busy", "true");
   if (reasoning) {
     reasoning.classList.add("is-streaming");
+    const timeEl = reasoning.querySelector(".icen-ai-reasoning-time");
+    if (timeEl) timeEl.textContent = t("aiChat.thinkingNow");
     setReasoningOpen(reasoning, true);
     const head = reasoning.querySelector(".icen-ai-reasoning-head");
     if (head && head.dataset.icenReasoningStart == null) head.dataset.icenReasoningStart = String(startedAt);
@@ -5776,10 +6114,9 @@ var ROLE_AVATAR = {
   system: t("aiChat.roleSystem"),
   tool: t("aiChat.roleTool")
 };
-function safeHref(uri) {
-  const s = uri.trim().toLowerCase();
-  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
-  return uri;
+function safeContentUrl(part) {
+  const src = aiContentUrl(part);
+  return src ? safeUrl(src) : void 0;
 }
 function renderAiContentPart(part) {
   if (part.type === "text") {
@@ -5789,7 +6126,7 @@ function renderAiContentPart(part) {
     return span;
   }
   if (part.type === "image") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const img = document.createElement("img");
     img.className = "icen-ai-msg-media icen-ai-msg-media--image";
@@ -5799,7 +6136,7 @@ function renderAiContentPart(part) {
     return img;
   }
   if (part.type === "audio") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const audio = document.createElement("audio");
     audio.className = "icen-ai-msg-media icen-ai-msg-media--audio";
@@ -5808,7 +6145,7 @@ function renderAiContentPart(part) {
     return audio;
   }
   if (part.type === "video") {
-    const src = aiContentUrl(part);
+    const src = safeContentUrl(part);
     if (!src) return void 0;
     const video = document.createElement("video");
     video.className = "icen-ai-msg-media icen-ai-msg-media--video";
@@ -5820,7 +6157,7 @@ function renderAiContentPart(part) {
   if (part.type === "file") {
     const chip = h("span", "icen-ai-msg-file");
     chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? t("aiChat.file")));
-    const href2 = part.url ? safeHref(part.url) : void 0;
+    const href2 = part.url ? safeUrl(part.url) : void 0;
     if (href2 && /^(https?:|data:)/i.test(href2)) {
       const a2 = document.createElement("a");
       a2.className = "icen-ai-msg-file-link";
@@ -5833,7 +6170,7 @@ function renderAiContentPart(part) {
   }
   const a = document.createElement("a");
   a.className = "icen-ai-msg-link";
-  const href = safeHref(part.uri);
+  const href = safeUrl(part.uri);
   if (href) a.href = href;
   a.textContent = part.name ?? part.uri;
   a.title = part.uri;
@@ -5895,7 +6232,7 @@ function renderAiMessage(scrollEl, model) {
       errEl.textContent = message;
     },
     stream() {
-      const span = h("span", "ai-msg-stream-text");
+      const span = h("span", "icen-ai-msg-text ai-msg-stream-text");
       body.appendChild(span);
       return createAiStream(span);
     }
@@ -6035,8 +6372,12 @@ function buildApproval() {
 }
 function applyTint(item, model) {
   const tint = getAiKind(model.kind).tint;
-  if (tint) item.style.setProperty("--ai-item-tint", `var(--icen-token-${tint})`);
-  else item.style.removeProperty("--ai-item-tint");
+  if (tint) {
+    const slot = tint === "muted" ? "text-muted" : tint;
+    item.style.setProperty("--ai-item-tint", `var(--icen-token-${slot})`);
+  } else {
+    item.style.removeProperty("--ai-item-tint");
+  }
 }
 function applyKindVisual(parts, model) {
   const kind = getAiKind(model.kind);