@icen.ai/ui 0.10.0 → 0.11.0

package/dist/behaviors/ai-tool.mjs

@@ -21,6 +21,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",
@@ -1241,6 +1242,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");
@@ -1250,10 +1260,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") {
@@ -1263,7 +1272,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";
@@ -1273,7 +1282,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";
@@ -1282,7 +1291,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";
@@ -1294,7 +1303,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";
@@ -1307,7 +1316,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;
@@ -1534,7 +1543,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);
 }
@@ -1635,7 +1645,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;
@@ -1730,8 +1740,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",
@@ -1745,7 +1757,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";
@@ -1780,8 +1792,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),
@@ -1865,7 +1878,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");
@@ -1972,7 +1985,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);
@@ -1994,6 +2007,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");
@@ -2089,7 +2107,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(" ");
@@ -2214,6 +2233,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) => {
@@ -2272,8 +2292,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),
@@ -2289,12 +2310,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),
@@ -2311,7 +2333,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) {
@@ -2675,6 +2697,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":
@@ -2810,7 +2833,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);
@@ -3368,6 +3391,12 @@ 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;
@@ -3605,8 +3634,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);