@pisell/materials 1.8.41 → 1.8.42

package/es/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -1,7 +1,7 @@
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import PisellScrollView_default from "../PisellScrollView/index.js";
 import useEngineContext from "../../hooks/useEngineContext.js";
-import { getHorizontalAxisSlotCount, getRangeBounds, isInDisabledRanges, parseValue, snapToStepMinutes } from "./utils/index.js";
+import { getHorizontalAxisSlotCount, getRangeBounds, isInDisabledRanges, parseValue, pickReferenceDateContainingNow, snapToStepMinutes } from "./utils/index.js";
 import { useTimeAxis } from "./hooks/useTimeAxis.js";
 import { useRealtime } from "./hooks/useRealtime.js";
 import { useDragInertia } from "./hooks/useDragInertia.js";
@@ -17,58 +17,73 @@ import classNames from "classnames";
 import dayjs from "dayjs";
 import "./PisellTimeNavigator.less";
 //#region src/components/pisellTimeNavigator/PisellTimeNavigator.tsx
-/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值，cursor-moves 时按视口压缩以看全 range */
-const CELL_SIZE_H = 82;
-/**
-* 横向「此刻」橙区目标宽度（px）：按 axis-moves 下一格多的比例换算，滚动轴与 cursor-moves 压格时同宽；
-* 不用压缩后的 cellSizePx，避免指针模式下渐变过窄。
-*/
-const CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
-/** 竖向每格高度（px） */
-const CELL_SIZE_V = 20;
-/** 横向「Now」按钮占位，避免刻度被挡 */
-const CURSOR_MOVES_NOW_RESERVE_PX = 56;
-/** cursor-moves 横向：轴与视口左右边距 */
-const CURSOR_MOVES_H_PADDING_PX = 8;
-/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
-const CURSOR_MOVES_MIN_CELL_PX = 8;
-/** 密度层高度：时间轴 48px 内留少量上下边距 */
-const DENSITY_LAYER_HEIGHT = 46;
+/** 默认横向轨道高度（px），与 Less 中 `--pisell-time-nav-track-h` 回退值一致 */
+const DEFAULT_HORIZONTAL_TRACK_HEIGHT_PX = 48;
+/** 与 `CURRENT_TIME_GRADIENT_WIDTH_H_PX = CELL_SIZE_H * 1.7` 同比例，随格宽变化 */
+const horizontalCurrentTimeGradientWidthPx = (cellPx) => Math.round(cellPx * 1.7);
 /**
 * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
 */
 function PisellTimeNavigator(props) {
 	var _context$engine;
-	const { value: valueProp, onChange, defaultValue, referenceDate: referenceDateProp, realtime = false, range, stepMinutes = 15, majorStepMinutes = 60, cursorMode = "axis-moves", orientation = "horizontal", disabledRanges, showNowButton = true, userInteractionLocked = false, snapToStep = false, inertia = false, businessHours, pastTimeFade, containerStyle, scaleStyle, cursorStyle, nowButtonStyle, className, style, locale, timeFormat = "HH:mm", renderNowButton, onUserInteraction, densitySeries: densitySeriesProp, loadDensity: loadDensityProp } = props;
+	const { value: valueProp, onChange, defaultValue, referenceDate: referenceDateProp, realtime = false, range, stepMinutes = 15, majorStepMinutes = 60, cursorMode = "axis-moves", orientation = "horizontal", horizontalAxisCellSizePx, horizontalTrackHeightPx, disabledRanges, showNowButton = true, userInteractionLocked = false, snapToStep = false, inertia = false, businessHours, pastTimeFade, containerStyle, scaleStyle, cursorStyle, nowButtonStyle, className, style, locale, timeFormat = "HH:mm", formatTimeLabel, renderNowButton, onUserInteraction, densitySeries: densitySeriesProp, loadDensity: loadDensityProp } = props;
 	const context = useEngineContext();
 	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
 	/**
-	* 锚定日历日：传入 prop 时以 prop 为准；不传则每帧取当天 0 点（与历史行为一致，便于跨自然日）
+	* 锚定日历日：
+	* - 显式传入 prop 时以 prop 为准（调用方可能在「看未来 / 过去某一天」的语义下指定）；
+	* - 未传 prop 时，自动挑选「能让 dayjs() 落入营业窗口 [refDay + range.start, refDay + range.end]」
+	*   的那一天，使得橙色「现在」高亮永远落在轴内。
+	*   例：营业边界 16:00（24h 窗口），now = 中午 12:00 → 选昨天，窗口 [昨 16:00, 今 16:00] 包含 now；
+	*       now = 下午 18:00 → 选今天，窗口 [今 16:00, 明 16:00] 包含 now。
 	*/
 	const referenceDateFromProp = useMemo(() => {
 		if (referenceDateProp == null) return void 0;
 		const d = parseValue(referenceDateProp, dayjs());
 		return (d !== null && d !== void 0 ? d : dayjs()).startOf("day");
 	}, [referenceDateProp]);
-	const referenceDate = referenceDateFromProp !== null && referenceDateFromProp !== void 0 ? referenceDateFromProp : dayjs().startOf("day");
+	const referenceDate = referenceDateFromProp !== null && referenceDateFromProp !== void 0 ? referenceDateFromProp : pickReferenceDateContainingNow(range, dayjs());
 	const isHorizontal = orientation === "horizontal";
-	/** 按自然日稳定依赖，避免无 referenceDate prop 时每次 render 新建 dayjs 触发重复 loadDensity */
-	const referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format("YYYY-MM-DD") : dayjs().format("YYYY-MM-DD");
+	/**
+	* 横向轨道高度（px）；刻度层、密度 SVG、ScrollView 与轴 inline 高度对齐。
+	* 竖向布局不使用本值（保持默认 48 不参与垂直轴样式）。
+	*/
+	const trackHeightPx = useMemo(() => {
+		const raw = horizontalTrackHeightPx;
+		if (raw == null || !Number.isFinite(Number(raw))) return DEFAULT_HORIZONTAL_TRACK_HEIGHT_PX;
+		const n = Math.round(Number(raw));
+		return Math.max(28, Math.min(96, n));
+	}, [horizontalTrackHeightPx]);
+	/**
+	* 按自然日稳定依赖，避免无 referenceDate prop 时每次 render 新建 dayjs 触发重复 loadDensity。
+	* 注：自动挑选的 referenceDate（可能为昨/明）也要带进 key，否则跨越营业边界后密度仍会停留在前一日。
+	*/
+	const referenceDayKey = referenceDate.format("YYYY-MM-DD");
 	const [densityLoaded, setDensityLoaded] = useState();
 	const densityReqId = useRef(0);
+	/**
+	* 仅当日历锚定日或 step 变化时清空密度折线；`loadDensity` 回调因上游 deps 变引用而变时
+	* 保留上一帧数据直至新请求返回，避免预约页列表/高光周期性更新导致整轴「闪一下」。
+	*/
+	const densityAxisKeyRef = useRef(null);
 	const densityGradientId = useMemo(() => `pisell-time-density-fill-${Math.random().toString(36).slice(2, 8)}`, []);
 	useEffect(() => {
+		const axisKey = `${referenceDayKey}|${stepMinutes}`;
+		const axisKeyChanged = densityAxisKeyRef.current === null || densityAxisKeyRef.current !== axisKey;
 		if (densitySeriesProp !== void 0) {
+			densityAxisKeyRef.current = null;
 			setDensityLoaded(void 0);
 			return;
 		}
 		if (!loadDensityProp) {
+			densityAxisKeyRef.current = null;
 			setDensityLoaded(void 0);
 			return;
 		}
+		densityAxisKeyRef.current = axisKey;
 		const req = ++densityReqId.current;
 		let cancelled = false;
-		setDensityLoaded(void 0);
+		if (axisKeyChanged) setDensityLoaded(void 0);
 		loadDensityProp({
 			referenceDate: dayjs(referenceDayKey).startOf("day"),
 			stepMinutes
@@ -121,17 +136,25 @@ function PisellTimeNavigator(props) {
 	]);
 	/** cursor-moves + 横向：整段 range 压进一条可视区域，等比例缩小格宽 */
 	const cellSizePx = useMemo(() => {
-		if (!isHorizontal) return CELL_SIZE_V;
-		if (isAxisMoves) return CELL_SIZE_H;
+		if (!isHorizontal) return 20;
+		if (isAxisMoves) {
+			const custom = horizontalAxisCellSizePx;
+			if (custom != null && Number.isFinite(custom)) {
+				const n = Number(custom);
+				if (n > 0) return Math.max(32, Math.min(n, 200));
+			}
+			return 82;
+		}
 		const n = horizontalSlotCount;
-		if (n <= 0) return CELL_SIZE_H;
+		if (n <= 0) return 82;
 		const vpW = Math.max(1, viewportSize.w || 400);
-		const usable = Math.max(40, vpW - (showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0) - CURSOR_MOVES_H_PADDING_PX * 2);
+		const usable = Math.max(40, vpW - (showNowButton ? 56 : 0) - 16);
 		const raw = Math.floor(usable / n);
-		return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
+		return Math.max(8, Math.min(82, raw));
 	}, [
 		isHorizontal,
 		isAxisMoves,
+		horizontalAxisCellSizePx,
 		horizontalSlotCount,
 		viewportSize.w,
 		showNowButton
@@ -152,9 +175,15 @@ function PisellTimeNavigator(props) {
 		const maxV = Math.max(...slice, 0);
 		const minV = Math.min(...slice, 0);
 		const span = Math.max(1, maxV - minV);
-		const h = DENSITY_LAYER_HEIGHT;
+		/** 与默认 48px 轴配 46px 密度层一致：轨道高度减 2px 上下留白 */
+		const h = Math.max(12, trackHeightPx - 2);
 		const points = slice.map((v, i) => {
-			const x = i * cellSizePx + cellSizePx / 2;
+			/**
+			* 用 `timeToOffset(ticks[i])` 而非 `i * cellSize + cellSize/2` 取 x：
+			* head/tail partial 格存在时，每格宽度不再等于 `cellSize`，按索引等比相乘会跑偏。
+			* `timeToOffset` 始终随时间线性映射（含两端 dotOffsetPx 留白），与刻度层视觉对齐。
+			*/
+			const x = axis.timeToOffset(axis.ticks[i]);
 			/** 映射到 [0,1]：最低值贴底，最高值接近顶部，基本吃满密度层高度 */
 			const t = (v - minV) / span;
 			return {
@@ -185,8 +214,10 @@ function PisellTimeNavigator(props) {
 		isHorizontal,
 		resolvedDensity,
 		axis.ticks,
+		axis.timeToOffset,
 		axis.totalLengthPx,
-		cellSizePx
+		cellSizePx,
+		trackHeightPx
 	]);
 	const isControlled = valueProp !== void 0;
 	const [internalValue, setInternalValue] = useState(() => {
@@ -213,10 +244,65 @@ function PisellTimeNavigator(props) {
 	}, []);
 	/** cursor-moves：拖指针时禁止程序性滚动抢焦点 */
 	const cursorDragActiveRef = useRef(false);
+	/**
+	* 拖拽起点 + 缩放系数。
+	* `pxPerClient` 把 `clientX` 的屏幕 CSS 像素换算成轴内本地像素（offsetPx 的单位）。
+	* 没有变换时为 1；当祖先元素带有 `transform: scale(n)` 或浏览器在 iPad 等设备上对页面整体做了
+	* 视觉缩放时，`getBoundingClientRect().width / offsetWidth` 会反映出渲染缩放系数 n。
+	* 不做这层换算的话，手指走的屏幕距离会被原样累加到 offsetPx 上，但光标视觉位置经过 scale(n) 后
+	* 只走 n*delta，于是用户感知"拖了 10 小时但时间只走了 9 小时"（典型 9/10 ≈ 0.9 倍 scale）。
+	*/
 	const cursorDragBaseRef = useRef({
 		startClient: 0,
-		startOffset: 0
+		startOffset: 0,
+		pxPerClient: 1
 	});
+	/**
+	* 计算 viewportWrapRef 当前的渲染缩放系数（screenPx → 本地 px 倍率）。
+	* 若元素未挂载或宽度异常则返回 1，永不放大放小本意外的 delta。
+	*/
+	const measureWrapPxPerClient = useCallback(() => {
+		const el = viewportWrapRef.current;
+		if (!el) return 1;
+		const rect = el.getBoundingClientRect();
+		const layout = isHorizontal ? el.offsetWidth : el.offsetHeight;
+		const rendered = isHorizontal ? rect.width : rect.height;
+		if (!layout || !rendered) return 1;
+		const scale = rendered / layout;
+		if (!Number.isFinite(scale) || scale <= .01) return 1;
+		return 1 / scale;
+	}, [isHorizontal]);
+	/**
+	* 指针气泡放大反馈：仅 down/up/cancel 各触发一次重渲染（move 事件不参与），
+	* 拖拽过程中不会引起轴体重排。
+	*/
+	const [isCursorDragging, setIsCursorDragging] = useState(false);
+	/**
+	* 拖拽性能：受控模式下 onChange 会让父级（如 PisellReservation）整页重渲，
+	* 触控环境下尤其明显（手指仍按着但光标卡帧）。
+	*
+	* 解决策略 = 「视觉本地 + onChange 提交一次」：
+	* - 拖拽过程中只更新本地 dragVisualOffsetPx（轻量 state，仅本组件重渲），
+	*   光标和气泡跟着这个 offset 移动，跟手且廉价；
+	* - 不调用 onChange / setInternalValue，父级和兄弟组件完全不知道在拖；
+	* - 松手时清空本地 offset 并一次性 applyOffsetToNavigatorValue(_, true)，
+	*   走 snap → onChange → 父级 setState 的正常路径。React 18 自动批处理，
+	*   父级 valueProp 更新与本地 dragVisualOffsetPx 清零会合并成一次 render，
+	*   不会出现「松手 → 旧值 → 新值」的回闪。
+	*
+	* 同帧多次 move 用 rAF 再折叠一层，应对高频鼠标 / 高刷设备。
+	*/
+	const [dragVisualOffsetPx, setDragVisualOffsetPx] = useState(null);
+	const pendingDragOffsetRef = useRef(null);
+	const dragRafIdRef = useRef(null);
+	const cancelPendingDragFrame = useCallback(() => {
+		if (dragRafIdRef.current != null) {
+			cancelAnimationFrame(dragRafIdRef.current);
+			dragRafIdRef.current = null;
+		}
+		pendingDragOffsetRef.current = null;
+	}, []);
+	useEffect(() => cancelPendingDragFrame, [cancelPendingDragFrame]);
 	const getScrollContainer = useCallback(() => {
 		var _scrollRef$current$ge, _scrollRef$current, _scrollRef$current$ge2;
 		return (_scrollRef$current$ge = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$ge2 = _scrollRef$current.getScrollContainer) === null || _scrollRef$current$ge2 === void 0 ? void 0 : _scrollRef$current$ge2.call(_scrollRef$current)) !== null && _scrollRef$current$ge !== void 0 ? _scrollRef$current$ge : null;
@@ -234,7 +320,7 @@ function PisellTimeNavigator(props) {
 	const halfViewportH = effectiveViewportH / 2;
 	const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
 	/** cursor-moves 横向：左右小边距，整轴落在视口内；axis-moves 保持半屏留白可滚动 */
-	const axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
+	const axisStartMarginW = isHorizontal && !isAxisMoves ? 8 : Math.max(0, halfViewportW - dotOffsetPx);
 	const axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
 	/**
 	* 横向 axis-wrap：无 Now 时用 width:100% + minWidth:自然内容宽，铺满滚动视口；内容更长时仍可横向滚动。
@@ -242,7 +328,7 @@ function PisellTimeNavigator(props) {
 	*/
 	const horizontalAxisWrapStyle = useMemo(() => {
 		if (!isHorizontal) return null;
-		const minHeight = 48;
+		const minHeight = trackHeightPx;
 		if (isAxisMoves) {
 			const natural = axis.totalLengthPx + (effectiveViewportW - cellSizePx);
 			if (!showNowButton) return {
@@ -256,7 +342,7 @@ function PisellTimeNavigator(props) {
 				minHeight
 			};
 		}
-		const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+		const natural = 8 + axis.totalLengthPx + 8;
 		if (!showNowButton) return {
 			width: "100%",
 			minWidth: natural,
@@ -273,7 +359,8 @@ function PisellTimeNavigator(props) {
 		axis.totalLengthPx,
 		effectiveViewportW,
 		cellSizePx,
-		showNowButton
+		showNowButton,
+		trackHeightPx
 	]);
 	/** 拖动中：用连续映射按 1 分钟步长显示时间（不吸附到 stepMinutes） */
 	const handleScroll = useCallback((data) => {
@@ -407,23 +494,50 @@ function PisellTimeNavigator(props) {
 		defaultValue
 	]);
 	const cursorOffsetPx = axis.timeToOffset(effectiveValue);
+	/**
+	* 拖拽视觉态：当用户正在拖动时，dragVisualOffsetPx 记录最新本地 offset，
+	* 光标和拖拽气泡都用 visualCursorOffsetPx / visualValue，本组件自己消化高频更新；
+	* 父级直到松手才会通过 onChange 收到一次最终值（带 snap）。
+	*/
+	const visualCursorOffsetPx = dragVisualOffsetPx !== null && dragVisualOffsetPx !== void 0 ? dragVisualOffsetPx : cursorOffsetPx;
+	const visualValue = useMemo(() => {
+		var _axis$offsetToTimeCon;
+		if (dragVisualOffsetPx == null) return effectiveValue;
+		return (_axis$offsetToTimeCon = axis.offsetToTimeContinuous(dragVisualOffsetPx)) !== null && _axis$offsetToTimeCon !== void 0 ? _axis$offsetToTimeCon : effectiveValue;
+	}, [
+		dragVisualOffsetPx,
+		axis.offsetToTimeContinuous,
+		effectiveValue
+	]);
 	/** 刻度「现在线」：真实系统时刻落在轴区间内时绘制（含跨日营业次日凌晨） */
 	const wallAligned = dayjs().startOf("minute");
 	const currentTimeOffsetPx = !wallAligned.isBefore(axis.rangeStart) && !wallAligned.isAfter(axis.rangeEnd) ? axis.timeToOffset(wallAligned) : void 0;
-	/** 横向轴「此刻」橙区：固定像素宽（见 CURRENT_TIME_GRADIENT_WIDTH_H_PX），右缘对齐当前时刻 */
+	/** 游标/「现在」/拖拽气泡共用：支持预约顶栏「次日 HH:mm」等自定义文案 */
+	const resolveTimeLabel = useCallback((t) => {
+		if (formatTimeLabel) return formatTimeLabel(t);
+		return locale ? t.locale(locale).format(timeFormat) : t.format(timeFormat);
+	}, [
+		formatTimeLabel,
+		locale,
+		timeFormat
+	]);
+	/** 横向轴「此刻」橙区：宽度按格宽 ×1.7，右缘对齐当前时刻 */
 	const horizontalCurrentTimeHighlightStyle = useMemo(() => {
 		if (!isHorizontal || currentTimeOffsetPx == null || currentTimeOffsetPx < 0) return null;
-		const w = Math.min(CURRENT_TIME_GRADIENT_WIDTH_H_PX, currentTimeOffsetPx);
+		const gradW = horizontalCurrentTimeGradientWidthPx(cellSizePx);
+		const w = Math.min(gradW, currentTimeOffsetPx);
 		return {
 			left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - w),
 			top: 0,
 			width: w,
-			height: 48
+			height: trackHeightPx
 		};
 	}, [
 		isHorizontal,
 		currentTimeOffsetPx,
-		axisStartMarginW
+		axisStartMarginW,
+		cellSizePx,
+		trackHeightPx
 	]);
 	const SCROLL_SYNC_THRESHOLD_PX = 2;
 	const hasScrollPadding = isHorizontal ? effectiveViewportW > 0 : effectiveViewportH > 0;
@@ -544,33 +658,75 @@ function PisellTimeNavigator(props) {
 		cursorDragActiveRef.current = true;
 		cursorDragBaseRef.current = {
 			startClient: isHorizontal ? e.clientX : e.clientY,
-			startOffset: cursorOffsetPx
+			startOffset: cursorOffsetPx,
+			pxPerClient: measureWrapPxPerClient()
 		};
 		valueUpdatedByScrollRef.current = true;
+		setIsCursorDragging(true);
 		e.currentTarget.setPointerCapture(e.pointerId);
 	}, [
 		userInteractionLocked,
 		isAxisMoves,
 		isHorizontal,
 		cursorOffsetPx,
-		onUserInteraction
+		onUserInteraction,
+		measureWrapPxPerClient
 	]);
 	const handleCursorDragPointerMove = useCallback((e) => {
 		if (!cursorDragActiveRef.current) return;
-		const delta = (isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient;
-		applyOffsetToNavigatorValue(cursorDragBaseRef.current.startOffset + delta, false);
-	}, [isHorizontal, applyOffsetToNavigatorValue]);
+		/**
+		* 把 clientX 的屏幕 CSS 像素 delta 折算成轴本地像素。
+		* 没有 CSS 缩放时 pxPerClient=1；祖先有 transform: scale(0.9) 等情况下，
+		* 1 屏幕 px 对应 1/0.9 ≈ 1.11 本地 px，否则 offsetPx 走得不够，
+		* 表现为"光标跟不上手指、时间轴比手指走得近"。
+		*/
+		const delta = ((isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient) * (cursorDragBaseRef.current.pxPerClient || 1);
+		/**
+		* rAF 节流 + 仅更新本地视觉 offset：
+		* - 不调用 onChange，避免父级（reservation 主页 / 楼层图 / 排程带等）
+		*   每帧重渲，触控环境下尤其明显；
+		* - 只更新本地 dragVisualOffsetPx，光标 + 拖拽气泡通过它定位，
+		*   再叠加 rAF 把同帧多次 move 合并成一次 setState。
+		* 真正提交 onChange 只发生在 pointerUp。
+		*/
+		pendingDragOffsetRef.current = cursorDragBaseRef.current.startOffset + delta;
+		if (dragRafIdRef.current != null) return;
+		dragRafIdRef.current = requestAnimationFrame(() => {
+			dragRafIdRef.current = null;
+			const pending = pendingDragOffsetRef.current;
+			pendingDragOffsetRef.current = null;
+			if (pending == null) return;
+			if (!cursorDragActiveRef.current) return;
+			const maxO = Math.max(0, axis.totalLengthPx - .001);
+			setDragVisualOffsetPx(Math.max(0, Math.min(pending, maxO)));
+		});
+	}, [isHorizontal, axis.totalLengthPx]);
 	const handleCursorDragPointerUp = useCallback((e) => {
 		if (!cursorDragActiveRef.current) return;
 		cursorDragActiveRef.current = false;
+		setIsCursorDragging(false);
 		try {
 			e.currentTarget.releasePointerCapture(e.pointerId);
 		} catch (_unused) {}
-		const delta = (isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient;
+		const delta = ((isHorizontal ? e.clientX : e.clientY) - cursorDragBaseRef.current.startClient) * (cursorDragBaseRef.current.pxPerClient || 1);
 		const nextOff = cursorDragBaseRef.current.startOffset + delta;
 		valueUpdatedByScrollRef.current = false;
+		/**
+		* 松手时：
+		* 1) 取消未消费的 rAF 帧（已被最终 offset 取代）；
+		* 2) 清空本地视觉 offset 并 apply 最终值（snap=true）。
+		*    React 18 自动批处理：setDragVisualOffsetPx(null) 与父级响应
+		*    onChange 后回填的 valueProp 会合并成同一次渲染，不会出现
+		*    「松手 → 旧值 → 新值」的回闪。
+		*/
+		cancelPendingDragFrame();
+		setDragVisualOffsetPx(null);
 		applyOffsetToNavigatorValue(nextOff, true);
-	}, [isHorizontal, applyOffsetToNavigatorValue]);
+	}, [
+		isHorizontal,
+		applyOffsetToNavigatorValue,
+		cancelPendingDragFrame
+	]);
 	const businessHoursPx = useMemo(() => {
 		if (!businessHours) return void 0;
 		const [s, e] = getRangeBounds(businessHours, referenceDate);
@@ -587,10 +743,10 @@ function PisellTimeNavigator(props) {
 	}), [isHorizontal, cellSizePx]);
 	return /* @__PURE__ */ React.createElement("div", {
 		className: classNames("pisell-time-navigator", `pisell-time-navigator--${orientation}`, userInteractionLocked && "pisell-time-navigator--interaction-locked", className),
-		style: isHorizontal ? style : _objectSpread2({
+		style: isHorizontal ? _objectSpread2(_objectSpread2({}, style !== null && style !== void 0 ? style : {}), {}, { ["--pisell-time-nav-track-h"]: `${trackHeightPx}px` }) : _objectSpread2({
 			height: "100%",
 			minHeight: 200
-		}, style)
+		}, style !== null && style !== void 0 ? style : {})
 	}, /* @__PURE__ */ React.createElement("div", {
 		ref: viewportWrapRef,
 		className: "pisell-time-navigator-viewport-wrap",
@@ -614,7 +770,7 @@ function PisellTimeNavigator(props) {
 		scrollActionsConfig: scrollConfig,
 		onScroll: handleScroll,
 		onScrollEnd: handleScrollEnd,
-		style: _objectSpread2(_objectSpread2({}, isHorizontal ? { height: 48 } : {
+		style: _objectSpread2(_objectSpread2({}, isHorizontal ? { height: trackHeightPx } : {
 			width: 54,
 			minHeight: 200,
 			height: "100%",
@@ -625,6 +781,7 @@ function PisellTimeNavigator(props) {
 		cellSizePx,
 		axisStartMarginPx: isHorizontal ? axisStartMarginW : axisStartMarginH,
 		offsetToTime: axis.offsetToTime,
+		offsetToTimeContinuous: axis.offsetToTimeContinuous,
 		onSelectTime: handleSelectTime,
 		isInDisabledRanges: isInDisabled,
 		snapToStep,
@@ -639,7 +796,7 @@ function PisellTimeNavigator(props) {
 		onPointerLeave: inertiaHandlers.onPointerUp
 	}, /* @__PURE__ */ React.createElement("div", {
 		className: "pisell-time-navigator-axis-wrap",
-		style: isHorizontal ? horizontalAxisWrapStyle !== null && horizontalAxisWrapStyle !== void 0 ? horizontalAxisWrapStyle : { minHeight: 48 } : { width: "100%" }
+		style: isHorizontal ? horizontalAxisWrapStyle !== null && horizontalAxisWrapStyle !== void 0 ? horizontalAxisWrapStyle : { minHeight: trackHeightPx } : { width: "100%" }
 	}, horizontalCurrentTimeHighlightStyle && /* @__PURE__ */ React.createElement("div", {
 		className: "pisell-time-navigator-current-gradient pisell-time-navigator-current-gradient--horizontal",
 		style: horizontalCurrentTimeHighlightStyle,
@@ -649,7 +806,7 @@ function PisellTimeNavigator(props) {
 		"data-time-navigator-axis": true,
 		style: isHorizontal ? {
 			width: axis.totalLengthPx,
-			height: 48,
+			height: trackHeightPx,
 			marginLeft: axisStartMarginW
 		} : {
 			height: axis.totalLengthPx,
@@ -705,12 +862,15 @@ function PisellTimeNavigator(props) {
 		timeFormat,
 		locale,
 		style: scaleStyle,
-		horizontalCellSizePx: isHorizontal ? cellSizePx : void 0
+		horizontalCellSizePx: isHorizontal ? cellSizePx : void 0,
+		cellWidthsPx: isHorizontal ? axis.cellWidthsPx : void 0,
+		leadingPaddingPx: isHorizontal ? dotOffsetPx : void 0,
+		trailingPaddingPx: isHorizontal ? dotOffsetPx : void 0
 	}), isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ React.createElement("span", {
 		className: "pisell-time-navigator-current-time-bubble",
 		style: { left: currentTimeOffsetPx },
 		"aria-hidden": true
-	}, locale ? wallAligned.locale(locale).format(timeFormat) : wallAligned.format(timeFormat)), !isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ React.createElement("div", {
+	}, resolveTimeLabel(wallAligned)), !isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ React.createElement("div", {
 		className: "pisell-time-navigator-current-line",
 		style: {
 			left: 0,
@@ -722,24 +882,33 @@ function PisellTimeNavigator(props) {
 		"aria-hidden": true
 	}), !isAxisMoves && /* @__PURE__ */ React.createElement(CursorLayer, {
 		orientation,
-		value: effectiveValue,
+		value: visualValue,
 		timeFormat,
+		formatTimeLabel,
 		locale,
 		isRealtime: realtime,
-		offsetPx: cursorOffsetPx,
+		offsetPx: visualCursorOffsetPx,
 		style: cursorStyle,
 		dragInteractive: !userInteractionLocked,
+		isDragging: isCursorDragging,
 		onDragPointerDown: handleCursorDragPointerDown,
 		onDragPointerMove: handleCursorDragPointerMove,
 		onDragPointerUp: handleCursorDragPointerUp,
 		onDragPointerCancel: handleCursorDragPointerUp
-	})))))), isAxisMoves && /* @__PURE__ */ React.createElement("div", {
+	})))))), !isAxisMoves && isHorizontal && isCursorDragging && visualValue != null && /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-time-navigator-drag-bubble-overlay",
+		"aria-hidden": true
+	}, /* @__PURE__ */ React.createElement("span", {
+		className: classNames("pisell-time-navigator-drag-bubble", realtime && "pisell-time-navigator-drag-bubble--realtime"),
+		style: { left: axisStartMarginW + visualCursorOffsetPx - scrollPosition.scrollLeft }
+	}, resolveTimeLabel(visualValue))), isAxisMoves && /* @__PURE__ */ React.createElement("div", {
 		className: classNames("pisell-time-navigator-cursor-fixed", `pisell-time-navigator-cursor-fixed--${orientation}`),
 		"aria-hidden": true
 	}, /* @__PURE__ */ React.createElement(CursorLayer, {
 		orientation,
 		value: effectiveValue,
 		timeFormat,
+		formatTimeLabel,
 		locale,
 		isRealtime: realtime,
 		offsetPx: 0,