dsh-token-pulse 0.4.3 → 0.4.5

package/lib/client.js

@@ -440,29 +440,7 @@ window.__ModuleLoader__.load({
 			if (day.totalTokens === 0) return `${day.dayKey}: No usage`;
 			return `${day.dayKey}: ${formatTokensShort$1(day.totalTokens)} tokens`;
 		}
-		function HeatCell({ day, level, size = 14 }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				title: tooltipTotal(day),
-				"aria-label": tooltipTotal(day),
-				style: {
-					width: size,
-					height: size,
-					borderRadius: 3,
-					background: {
-						0: "var(--dsw-alias-bg-layer-2, #ebedf0)",
-						1: "#c6e48b",
-						2: "#7bc96f",
-						3: "#239a3b",
-						4: "#196127"
-					}[level],
-					border: level === 0 ? "1px solid var(--dsw-alias-border-l2, #e5e7eb)" : "1px solid transparent",
-					boxSizing: "border-box",
-					cursor: "pointer",
-					flexShrink: 0
-				}
-			});
-		}
-		function HourStrip({ day, hourLevels }) {
+		function HourStrip({ day, hourLevels, baseDelay = 0 }) {
 			const hourly = day.hourlyTokens ?? new Array(24).fill(0);
 			const colors = {
 				0: "var(--dsw-alias-bg-layer-2, #ebedf0)",
@@ -483,9 +461,11 @@ window.__ModuleLoader__.load({
 					const lv = hourLevels[h] ?? 0;
 					const hh = v === 0 ? `${String(h).padStart(2, "0")}:00 — No usage` : `${String(h).padStart(2, "0")}:00 — ${formatTokensShort$1(v)} tokens`;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dtp-hm-bar",
 						title: hh,
 						"aria-label": hh,
 						style: {
+							animationDelay: `${baseDelay + h * 12}ms`,
 							flex: 1,
 							height: 6 + lv * 4,
 							borderRadius: 1,
@@ -527,49 +507,6 @@ window.__ModuleLoader__.load({
 				}, v))
 			});
 		}
-		function MonthHeader({ weeks, cellSize }) {
-			const seen = /* @__PURE__ */ new Set();
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					display: "flex",
-					gap: 3,
-					paddingLeft: cellSize + 20,
-					marginBottom: 2
-				},
-				children: weeks.map((week, i) => {
-					const m = week.find((d) => d.totalTokens !== -1)?.dayKey.slice(0, 7) ?? "";
-					let label = "";
-					if (m && !seen.has(m)) {
-						seen.add(m);
-						label = [
-							"Jan",
-							"Feb",
-							"Mar",
-							"Apr",
-							"May",
-							"Jun",
-							"Jul",
-							"Aug",
-							"Sep",
-							"Oct",
-							"Nov",
-							"Dec"
-						][Number(m.slice(5, 7)) - 1];
-					}
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						style: {
-							width: cellSize,
-							fontSize: 10,
-							color: "var(--dsw-alias-label-tertiary)",
-							lineHeight: "12px",
-							whiteSpace: "nowrap",
-							overflow: "visible"
-						},
-						children: label
-					}, i);
-				})
-			});
-		}
 		function GitHubGrid({ days, t, cellSize, twoRows, isEn, dayLevels }) {
 			const weeks = [];
 			let cur = [];
@@ -613,191 +550,207 @@ window.__ModuleLoader__.load({
 				});
 				weeks.push(cur);
 			}
-			const renderWeeks = (ws) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					display: "flex",
-					gap: cellSize >= 22 ? 10 : 5
-				},
-				children: ws.map((week, wi) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 3
-					},
-					children: week.map((d) => d.totalTokens === -1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-						width: cellSize,
-						height: cellSize
-					} }, d.dayKey) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatCell, {
-						day: d,
-						level: dayLevels.get(d.dayKey) ?? 0,
-						size: cellSize
-					}, d.dayKey))
-				}, wi))
-			});
-			if (twoRows && weeks.length > 26) {
+			const specHistoryRef = react.useRef(/* @__PURE__ */ new Map());
+			const labelHistoryRef = react.useRef(/* @__PURE__ */ new Set());
+			const gap = 3;
+			const colGap = cellSize >= 22 ? 10 : 5;
+			const headerH = 16;
+			const blockH = 7 * cellSize + 18;
+			const rowGap = 34;
+			const twoRowsSplit = !!(twoRows && weeks.length > 26);
+			const labelW = cellSize + 24;
+			const dayByKey = new Map(days.map((d) => [d.dayKey, d]));
+			const specs = /* @__PURE__ */ new Map();
+			const monthLabels = [];
+			const colX = (wi) => labelW + wi * (cellSize + colGap);
+			const place = (ws, yBase) => {
+				const seen = /* @__PURE__ */ new Set();
+				ws.forEach((week, wi) => {
+					const m = week.find((d) => d.totalTokens !== -1)?.dayKey.slice(0, 7) ?? "";
+					if (m && !seen.has(m)) {
+						seen.add(m);
+						monthLabels.push({
+							key: m,
+							x: colX(wi),
+							y: yBase - 14
+						});
+					}
+					week.forEach((d, r) => {
+						if (d.totalTokens === -1) return;
+						specs.set(d.dayKey, {
+							x: colX(wi),
+							y: yBase + r * (cellSize + gap)
+						});
+					});
+				});
+			};
+			let ncols;
+			if (twoRowsSplit) {
 				const mid = Math.ceil(weeks.length / 2);
 				const top = weeks.slice(0, mid);
 				const bot = weeks.slice(mid);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 16,
-						alignItems: "center"
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthHeader, {
-						weeks: top,
-						cellSize
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							gap: 3
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								gap: 3
-							},
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Sun" : "Mon"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Tue" : "Wed"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Thu" : "Fri"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } })
-							]
-						}), renderWeeks(top)]
-					})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthHeader, {
-						weeks: bot,
-						cellSize
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							gap: 3
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								gap: 3
-							},
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Sun" : "Mon"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Tue" : "Wed"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: {
-										height: cellSize,
-										fontSize: cellSize >= 22 ? 13 : 10,
-										color: "var(--dsw-alias-label-tertiary)",
-										lineHeight: `${cellSize}px`
-									},
-									children: isEn ? "Thu" : "Fri"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: cellSize } })
-							]
-						}), renderWeeks(bot)]
-					})] })]
-				});
+				place(top, headerH);
+				place(bot, headerH + blockH + rowGap);
+				ncols = Math.max(top.length, bot.length);
+			} else {
+				place(weeks, headerH);
+				ncols = weeks.length;
 			}
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			const width = labelW + ncols * cellSize + Math.max(0, ncols - 1) * colGap;
+			const height = twoRowsSplit ? 32 + blockH * 2 + rowGap : headerH + blockH;
+			const prevSpecs = specHistoryRef.current;
+			const items = [...specs.entries()].map(([k, s]) => ({
+				k,
+				s,
+				isNew: !prevSpecs.has(k)
+			}));
+			specHistoryRef.current = new Map(specs);
+			const prevLabelKeys = labelHistoryRef.current;
+			const labelIsNew = (k) => !prevLabelKeys.has(k);
+			labelHistoryRef.current = new Set(monthLabels.map((m) => m.key));
+			const [ghosts, setGhosts] = react.useState([]);
+			react.useEffect(() => {
+				const removed = [];
+				for (const [k, s] of prevSpecs) if (!specs.has(k)) removed.push({
+					k,
+					x: s.x,
+					y: s.y
+				});
+				if (removed.length) {
+					setGhosts(removed);
+					const id = setTimeout(() => setGhosts([]), 300);
+					return () => clearTimeout(id);
+				}
+			});
+			const colors = {
+				0: "var(--dsw-alias-bg-layer-2, #ebedf0)",
+				1: "#c6e48b",
+				2: "#7bc96f",
+				3: "#239a3b",
+				4: "#196127"
+			};
+			const dayNames = isEn ? [
+				"Sun",
+				"Mon",
+				"Tue",
+				"Wed",
+				"Thu",
+				"Fri",
+				"Sat"
+			] : [
+				"Mon",
+				"Tue",
+				"Wed",
+				"Thu",
+				"Fri",
+				"Sat",
+				"Sun"
+			];
+			const wdIdx = twoRowsSplit ? [
+				0,
+				2,
+				4
+			] : [
+				0,
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			];
+			const wdFontSize = cellSize >= 22 ? 13 : 10;
+			const monthName = (m) => [
+				"Jan",
+				"Feb",
+				"Mar",
+				"Apr",
+				"May",
+				"Jun",
+				"Jul",
+				"Aug",
+				"Sep",
+				"Oct",
+				"Nov",
+				"Dec"
+			][Number(m.slice(5, 7)) - 1];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: {
-					overflowX: "auto",
+					overflowX: twoRowsSplit ? "auto" : "hidden",
 					paddingBottom: 4,
 					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					gap: 6
+					justifyContent: "center"
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthHeader, {
-					weeks,
-					cellSize
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					style: {
-						display: "flex",
-						gap: cellSize >= 22 ? 10 : 5,
-						justifyContent: "center"
+						position: "relative",
+						width,
+						height,
+						flexShrink: 0
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							display: "flex",
-							flexDirection: "column",
-							gap: 3,
-							fontSize: cellSize >= 22 ? 13 : 10,
-							color: "var(--dsw-alias-label-tertiary)"
-						},
-						children: (isEn ? [
-							"Sun",
-							"Mon",
-							"Tue",
-							"Wed",
-							"Thu",
-							"Fri",
-							"Sat"
-						] : [
-							"Mon",
-							"Tue",
-							"Wed",
-							"Thu",
-							"Fri",
-							"Sat",
-							"Sun"
-						]).map((w, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: [
+						monthLabels.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `dtp-hm-label${labelIsNew(m.key) ? " dtp-hm-new" : ""}`,
 							style: {
-								height: cellSize,
-								lineHeight: `${cellSize}px`,
+								transform: `translate(${m.x}px, ${m.y}px)`,
+								fontSize: 10,
+								color: "var(--dsw-alias-label-tertiary)",
+								lineHeight: "12px"
+							},
+							children: monthName(m.key)
+						}, m.key)),
+						wdIdx.map((i) => [{
+							y: headerH + i * (cellSize + gap),
+							k: `top-${i}`
+						}, ...twoRowsSplit ? [{
+							y: headerH + blockH + rowGap + i * (cellSize + gap),
+							k: `bot-${i}`
+						}] : []].map(({ y, k }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dtp-hm-label",
+							style: {
+								transform: `translate(0px, ${y}px)`,
+								fontSize: wdFontSize,
+								width: labelW - 6,
 								textAlign: "right",
 								paddingRight: 4,
+								color: "var(--dsw-alias-label-tertiary)",
+								lineHeight: `${cellSize}px`,
 								fontWeight: 500
 							},
-							children: w
-						}, w))
-					}), renderWeeks(weeks)]
-				})]
+							children: dayNames[i]
+						}, k))),
+						items.map(({ k, s, isNew }) => {
+							const d = dayByKey.get(k);
+							const lv = dayLevels.get(k) ?? 0;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								title: tooltipTotal(d),
+								"aria-label": tooltipTotal(d),
+								className: `dtp-hm-cell${isNew ? " dtp-hm-new" : ""}`,
+								style: {
+									transform: `translate(${s.x}px, ${s.y}px)`,
+									width: cellSize,
+									height: cellSize,
+									borderRadius: 3,
+									background: colors[lv],
+									border: lv === 0 ? "1px solid var(--dsw-alias-border-l2, #e5e7eb)" : "1px solid transparent"
+								}
+							}, k);
+						}),
+						ghosts.map((g) => {
+							const lv = dayByKey.get(g.k) ? dayLevels.get(g.k) ?? 0 : 0;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dtp-hm-cell dtp-hm-ghost",
+								style: {
+									transform: `translate(${g.x}px, ${g.y}px)`,
+									width: cellSize,
+									height: cellSize,
+									borderRadius: 3,
+									background: colors[lv]
+								}
+							}, g.k);
+						})
+					]
+				})
 			});
 		}
 		function CalendarGrid({ days, t, dayLevels, selectedKey, onSelect, isEn }) {
@@ -846,7 +799,7 @@ window.__ModuleLoader__.load({
 					] : header).map((w) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						style: {
 							textAlign: "center",
-							fontSize: 11,
+							fontSize: 10,
 							fontWeight: 500,
 							color: "var(--dsw-alias-label-tertiary)"
 						},
@@ -911,6 +864,20 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
+		const HM_ANIM_CSS = `
+@keyframes dtp-hm-in { from { opacity: 0; transform: translateY(8px); } }
+@keyframes dtp-hm-row { from { opacity: 0; transform: translateX(-14px); } }
+@keyframes dtp-hm-grow { from { transform: scaleY(0); } }
+@keyframes dtp-hm-fade { from { opacity: 0; } }
+@keyframes dtp-hm-fadeout { to { opacity: 0; } }
+.dtp-hm-view { animation: dtp-hm-in 0.4s ease; }
+.dtp-hm-row { animation: dtp-hm-row 0.4s ease both; }
+.dtp-hm-bar { transform-origin: bottom; animation: dtp-hm-grow 0.45s ease both; }
+.dtp-hm-cell { position: absolute; box-sizing: border-box; transition: transform 0.45s ease, width 0.45s ease, height 0.45s ease, opacity 0.45s ease; }
+.dtp-hm-new { animation: dtp-hm-fade 0.45s ease both; }
+.dtp-hm-ghost { animation: dtp-hm-fadeout 0.25s ease forwards; }
+.dtp-hm-label { position: absolute; white-space: nowrap; transition: transform 0.45s ease, opacity 0.45s ease; }
+`;
 		function HeatmapGrid({ t, days, view, onViewChange, selectedKey, onSelect, isEn, thresholds = DEFAULT_THRESHOLDS }) {
 			const isWeek = view === "week";
 			const hasAny = days.some((d) => d.totalTokens > 0);
@@ -928,6 +895,7 @@ window.__ModuleLoader__.load({
 					gap: 6
 				},
 				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: HM_ANIM_CSS }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewSwitcher, {
 						t,
 						value: view,
@@ -950,7 +918,7 @@ window.__ModuleLoader__.load({
 							flexDirection: "column",
 							gap: 5
 						},
-						children: days.map((d) => {
+						children: days.map((d, di) => {
 							const wd = (/* @__PURE__ */ new Date(d.dayKey + "T12:00:00+08:00")).getDay();
 							const weekday = isEn ? [
 								"Sun",
@@ -971,9 +939,11 @@ window.__ModuleLoader__.load({
 							][(wd + 6) % 7];
 							const sel = d.dayKey === selectedKey;
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								className: "dtp-hm-row",
 								onClick: () => onSelect?.(sel ? null : d.dayKey),
 								title: tooltipTotal(d),
 								style: {
+									animationDelay: `${di * 45}ms`,
 									display: "flex",
 									alignItems: "center",
 									gap: 10,
@@ -1014,7 +984,8 @@ window.__ModuleLoader__.load({
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HourStrip, {
 										day: d,
-										hourLevels: hourLevels.get(d.dayKey) ?? new Array(24).fill(0)
+										hourLevels: hourLevels.get(d.dayKey) ?? new Array(24).fill(0),
+										baseDelay: di * 45 + 140
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										style: {
@@ -1029,27 +1000,27 @@ window.__ModuleLoader__.load({
 								]
 							}, d.dayKey);
 						})
-					}) : view === "month" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {
-						days,
-						t,
-						dayLevels,
-						selectedKey: selectedKey ?? null,
-						onSelect: onSelect ?? (() => {}),
-						isEn
-					}) : view === "year" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GitHubGrid, {
-						days,
-						t,
-						cellSize,
-						twoRows: true,
-						isEn,
-						dayLevels
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GitHubGrid, {
-						days,
-						t,
-						cellSize,
-						isEn,
-						dayLevels
-					}),
+					}, "week") : view === "month" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dtp-hm-view",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGrid, {
+							days,
+							t,
+							dayLevels,
+							selectedKey: selectedKey ?? null,
+							onSelect: onSelect ?? (() => {}),
+							isEn
+						})
+					}, "month") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dtp-hm-view",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GitHubGrid, {
+							days,
+							t,
+							cellSize,
+							twoRows: view === "year",
+							isEn,
+							dayLevels
+						})
+					}, "github"),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
 							display: "flex",
@@ -1443,9 +1414,13 @@ window.__ModuleLoader__.load({
 		* has an identical command count no matter how many days it represents, so
 		* CSS `transition: d` can morph lines across range switches too — where raw
 		* bezier paths (M + n-1 C) have mismatched structures and would jump.
-		* Visual output is indistinguishable at this density.
+		*
+		* Default density 712 = 8 × 89 keeps the polyline visually identical to the
+		* spline (≥ 8 samples per data interval for a 90-day series — the sparse 89
+		* sample grid cut spike corners and left dots floating above the line) while
+		* letting a 90-day series' sample xs land exactly ON its data points.
 		*/
-		function seriesPathFixed(points, samples = 89) {
+		function seriesPathFixed(points, samples = 712) {
 			if (points.length === 0) return "";
 			const x0 = points[0][0];
 			const x1 = points[points.length - 1][0];
@@ -1729,6 +1704,20 @@ window.__ModuleLoader__.load({
 				color: active ? "var(--dsw-alias-bg-layer-3)" : "var(--dsw-alias-label-secondary)",
 				transition: "background .25s ease, color .25s ease"
 			});
+			const linePaths = react.useMemo(() => {
+				const m = /* @__PURE__ */ new Map();
+				if (chartType === "line") for (const s of series) {
+					const pts = s.points.map((v, i) => [xOf(i), yOf(v)]);
+					m.set(s.model, seriesPathFixed(pts));
+				}
+				return m;
+			}, [
+				series,
+				yMax,
+				chartType,
+				dayKeys,
+				hidden
+			]);
 			const labelsNode = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: tickIdx.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 				x: 0,
 				y: 0,
@@ -1780,7 +1769,7 @@ window.__ModuleLoader__.load({
 					onAnimationEnd: onAnimEnd,
 					style: { transition: T_FADE },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: seriesPathFixed(pts),
+						d: linePaths.get(s.model) ?? "",
 						fill: "none",
 						stroke: color,
 						strokeWidth: 2,
@@ -2607,7 +2596,7 @@ window.__ModuleLoader__.load({
 									color: "var(--dsw-alias-label-tertiary)",
 									verticalAlign: "middle"
 								},
-								children: ["v", "0.4.3"]
+								children: ["v", "0.4.5"]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							style: {
@@ -2905,73 +2894,71 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}),
-					view === "week" || view === "month" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: 8,
-							justifyContent: "space-between"
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								onClick: () => setAnchor((a) => {
-									const d = /* @__PURE__ */ new Date(a + "T12:00:00+08:00");
-									if (view === "week") d.setDate(d.getDate() - 7);
-									else d.setMonth(d.getMonth() - 1);
-									const ms = d.getTime();
-									return new Date(ms).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" });
+					(() => {
+						const dOf = (a) => /* @__PURE__ */ new Date(a + "T12:00:00+08:00");
+						const btn = {
+							padding: "4px 10px",
+							fontSize: 12,
+							borderRadius: 6,
+							border: "1px solid var(--dsw-alias-border-l2)",
+							background: "var(--dsw-alias-bg-layer-3)",
+							cursor: "pointer"
+						};
+						const shiftDays = (n) => setAnchor((a) => {
+							const d = dOf(a);
+							d.setDate(d.getDate() + n);
+							return new Date(d.getTime()).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" });
+						});
+						const shiftMonth = (n) => setAnchor((a) => {
+							const d = dOf(a);
+							d.setMonth(d.getMonth() + n);
+							return new Date(d.getTime()).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" });
+						});
+						const aD = dOf(anchor);
+						const fmtCn = (x) => `${x.getMonth() + 1}月${x.getDate()}日`;
+						const prevLabel = view === "week" ? "‹ 上一周" : view === "month" ? "‹ 上一月" : view === "quarter" ? "‹ 上一季度" : "‹ 上一年";
+						const nextLabel = view === "week" ? "下一周 ›" : view === "month" ? "下一月 ›" : view === "quarter" ? "下一季度 ›" : "下一年 ›";
+						const prevLabelEn = view === "week" ? "‹ Prev Week" : view === "month" ? "‹ Prev Month" : view === "quarter" ? "‹ Prev Quarter" : "‹ Prev Year";
+						const nextLabelEn = view === "week" ? "Next Week ›" : view === "month" ? "Next Month ›" : view === "quarter" ? "Next Quarter ›" : "Next Year ›";
+						const label = view === "week" ? (() => {
+							const d = aD;
+							const dow = (d.getDay() + 6) % 7;
+							const mon = new Date(d);
+							mon.setDate(d.getDate() - dow);
+							const sun = new Date(mon);
+							sun.setDate(mon.getDate() + 6);
+							const fmt = (x) => `${x.getMonth() + 1}/${x.getDate()}`;
+							return lang === "en" ? `Week of ${fmt(mon)} - ${fmt(sun)}` : `${mon.getMonth() + 1}月${mon.getDate()}日 - ${sun.getMonth() + 1}月${sun.getDate()}日`;
+						})() : view === "month" ? `${Number(anchor.slice(0, 4))}年${Number(anchor.slice(5, 7))}月` + (lang === "en" ? ` ${anchor.slice(0, 7)}` : "") : view === "quarter" ? lang === "en" ? `${(/* @__PURE__ */ new Date(aD.getTime() - 76896e5)).toLocaleDateString("en-CA")} - ${aD.toLocaleDateString("en-CA")}` : `${fmtCn(/* @__PURE__ */ new Date(aD.getTime() - 76896e5))} - ${fmtCn(aD)}` : lang === "en" ? `${aD.getFullYear()}` : `${aD.getFullYear()}年`;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8,
+								justifyContent: "space-between"
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: view === "month" ? () => shiftMonth(-1) : () => shiftDays(view === "week" ? -7 : view === "quarter" ? -90 : -365),
+									style: btn,
+									children: lang === "en" ? prevLabelEn : prevLabel
 								}),
-								style: {
-									padding: "4px 10px",
-									fontSize: 12,
-									borderRadius: 6,
-									border: "1px solid var(--dsw-alias-border-l2)",
-									background: "var(--dsw-alias-bg-layer-3)",
-									cursor: "pointer"
-								},
-								children: [lang === "en" ? "‹ Prev" : "‹ 上一", view === "week" ? lang === "en" ? " Week" : "周" : lang === "en" ? " Month" : "月"]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								style: {
-									fontSize: 12,
-									color: "var(--dsw-alias-label-secondary)",
-									fontWeight: 500
-								},
-								children: [view === "week" ? (() => {
-									const d = /* @__PURE__ */ new Date(anchor + "T12:00:00+08:00");
-									const dow = (d.getDay() + 6) % 7;
-									const mon = new Date(d);
-									mon.setDate(d.getDate() - dow);
-									const sun = new Date(mon);
-									sun.setDate(mon.getDate() + 6);
-									const fmt = (x) => `${x.getMonth() + 1}/${x.getDate()}`;
-									return lang === "en" ? `Week of ${fmt(mon)} - ${fmt(sun)}` : `${mon.getMonth() + 1}月${mon.getDate()}日 - ${sun.getMonth() + 1}月${sun.getDate()}日`;
-								})() : `${Number(anchor.slice(0, 4))}年${Number(anchor.slice(5, 7))}月`, lang === "en" && view === "month" ? ` ${anchor.slice(0, 7)}` : ""]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								onClick: () => setAnchor((a) => {
-									const d = /* @__PURE__ */ new Date(a + "T12:00:00+08:00");
-									if (view === "week") d.setDate(d.getDate() + 7);
-									else d.setMonth(d.getMonth() + 1);
-									const ms = d.getTime();
-									return new Date(ms).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" });
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										fontSize: 12,
+										color: "var(--dsw-alias-label-secondary)",
+										fontWeight: 500
+									},
+									children: label
 								}),
-								style: {
-									padding: "4px 10px",
-									fontSize: 12,
-									borderRadius: 6,
-									border: "1px solid var(--dsw-alias-border-l2)",
-									background: "var(--dsw-alias-bg-layer-3)",
-									cursor: "pointer"
-								},
-								children: [
-									lang === "en" ? "Next ›" : "下一",
-									view === "week" ? lang === "en" ? " Week" : "周" : lang === "en" ? " Month" : "月",
-									" ›"
-								]
-							})
-						]
-					}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: view === "month" ? () => shiftMonth(1) : () => shiftDays(view === "week" ? 7 : view === "quarter" ? 90 : 365),
+									style: btn,
+									children: lang === "en" ? nextLabelEn : nextLabel
+								})
+							]
+						});
+					})(),
 					totals ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsCards, {
 						t: lang === "en" ? (k, p) => {
 							const enMap = {