@pisell/materials 1.0.1060 → 1.0.1062

package/es/components/pisellRecordBoard/PisellRecordBoard.stories.js

@@ -539,8 +539,8 @@ function filterDataByCriteria(list, filterValues) {
 /** 平面图：与列表一致，未命中左侧快筛 / PisellFind 关键词时图元透明度 */
 var FLOOR_MAP_DIM_OPACITY = 0.2;
 
-/**
- * 是否与 RecordBoard ToolBar 左侧快筛 + 搜索关键词同时匹配（用于表格行过滤与平面图压暗未命中图元）。
+/**
+ * 是否与 RecordBoard ToolBar 左侧快筛 + 搜索关键词同时匹配（用于表格行过滤与平面图压暗未命中图元）。
  */
 function recordBoardStoryRowMatchesToolbar(row, searchParams) {
   var _searchParams$filter, _searchParams$keyword;
@@ -604,9 +604,9 @@ function createInitialCondimentStations() {
     flavorCount: 8,
     area: '露台'
   },
-  /**
-   * 以下记录在初始平面图**无落位**，用于编辑态「蘸料摆台」新建时可选绑定；
-   * 若列表与落位一一占满是，工具栏会提示「均已落位，或列表为空」。
+  /**
+   * 以下记录在初始平面图**无落位**，用于编辑态「蘸料摆台」新建时可选绑定；
+   * 若列表与落位一一占满是，工具栏会提示「均已落位，或列表为空」。
    */
   {
     id: 'cs4',
@@ -816,8 +816,8 @@ function createInitialRestaurantFloorMapConfig() {
       dataBindingPolicy: 'none',
       showInPalette: true
     }],
-    /**
-     * 四列栅格（同原 dataSourcePlacements 布局），现统一为 sceneElements + dataBinding
+    /**
+     * 四列栅格（同原 dataSourcePlacements 布局），现统一为 sceneElements + dataBinding
      */
     sceneElements: [{
       instanceId: 'elm_t1',
@@ -1092,8 +1092,8 @@ var condimentRecordFormColumns = [{
   type: 'string'
 }];
 
-/**
- * Story 演示：`dataSourceRecordForm` 自定义侧栏「数据源记录」表单（复杂逻辑可走独立 Form）
+/**
+ * Story 演示：`dataSourceRecordForm` 自定义侧栏「数据源记录」表单（复杂逻辑可走独立 Form）
  */
 function RestaurantTableRecordCustomForm(props) {
   var ctx = props.ctx;
@@ -1190,8 +1190,8 @@ var restaurantRecordFormColumns = [{
   type: 'string'
 }];
 
-/**
- * **默认 Story**：餐厅 **多数据源**——**餐桌** + **蘸料摆台**；根级 `dataSources` 同时包含两者；**表格只绑定餐桌一路**（`gridDataSourceKey`）；平面图同时渲染两类落位，无需 Segmented 切换列表。
+/**
+ * **默认 Story**：餐厅 **多数据源**——**餐桌** + **蘸料摆台**；根级 `dataSources` 同时包含两者；**表格只绑定餐桌一路**（`gridDataSourceKey`）；平面图同时渲染两类落位，无需 Segmented 切换列表。
  */
 export var Default = {
   parameters: {
@@ -1475,8 +1475,8 @@ export var Default = {
   }
 };
 
-/**
- * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
+/**
+ * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
  */
 export var GridLayoutWithTable = {
   parameters: {
@@ -1581,8 +1581,8 @@ export var GridLayoutWithTable = {
   }
 };
 
-/**
- * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
+/**
+ * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
  */
 export var GridWithMultiplePages = {
   parameters: {
@@ -1675,8 +1675,8 @@ export var GridWithMultiplePages = {
   }
 };
 
-/**
- * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
+/**
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
  */
 export var GridLayoutWithCollapseUniformColumns = {
   parameters: {
@@ -1790,8 +1790,8 @@ export var GridLayoutWithCollapseUniformColumns = {
   }
 };
 
-/**
- * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
  */
 export var GridLayoutWithUniformCompare = {
   parameters: {
@@ -1908,8 +1908,8 @@ export var GridLayoutWithUniformCompare = {
   }
 };
 
-/**
- * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
  */
 export var GridWithOnRow = {
   parameters: {
@@ -2022,8 +2022,8 @@ export var GridWithOnRow = {
   }
 };
 
-/**
- * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
+/**
+ * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
  */
 export var GridLayoutWithColumnType = {
   parameters: {
@@ -2128,9 +2128,9 @@ export var GridLayoutWithColumnType = {
   }
 };
 
-/**
- * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
- * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
+/**
+ * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
+ * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
  */
 export var GridLayoutToolBarSortAndFilter = {
   parameters: {
@@ -2346,8 +2346,8 @@ export var GridLayoutToolBarSortAndFilter = {
   }
 };
 
-/**
- * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
+/**
+ * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
  */
 export var GridLayoutWithQuickFilterOnLeft = {
   parameters: {
@@ -2453,8 +2453,8 @@ export var GridLayoutWithQuickFilterOnLeft = {
   }
 };
 
-/**
- * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
+/**
+ * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
  */
 export var CustomQuickFilterAndColumnsRender = {
   parameters: {
@@ -2593,11 +2593,11 @@ export var CustomQuickFilterAndColumnsRender = {
   }
 };
 
-/**
- * 自定义 filter、自定义 sort、自定义 render
- * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
- * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
- * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
+/**
+ * 自定义 filter、自定义 sort、自定义 render
+ * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
+ * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
+ * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
  */
 export var CustomFilterSortRender = {
   parameters: {
@@ -2699,8 +2699,8 @@ export var CustomFilterSortRender = {
   }
 };
 
-/**
- * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
+/**
+ * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
  */
 export var GridLayoutWithPisellFindInToolBar = {
   render: function GridLayoutWithPisellFindInToolBarRender() {
@@ -2792,8 +2792,8 @@ export var GridLayoutWithPisellFindInToolBar = {
   }
 };
 
-/**
- * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
+/**
+ * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
  */
 export var GridLayoutToolBarSearchInput = {
   render: function GridLayoutToolBarSearchInputRender() {
@@ -2877,8 +2877,8 @@ export var GridLayoutToolBarSearchInput = {
   }
 };
 
-/**
- * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
+/**
+ * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
  */
 export var GridLayoutFull = {
   parameters: {
@@ -2982,8 +2982,8 @@ export var GridLayoutFull = {
   }
 };
 
-/**
- * 占位 / 设计态（不传 value，无数据源）
+/**
+ * 占位 / 设计态（不传 value，无数据源）
  */
 export var Placeholder = {
   parameters: {
@@ -3006,8 +3006,8 @@ export var Placeholder = {
   }
 };
 
-/**
- * Card 布局占位
+/**
+ * Card 布局占位
  */
 export var CardLayoutPlaceholder = {
   parameters: {
@@ -3031,8 +3031,8 @@ export var CardLayoutPlaceholder = {
   }
 };
 
-/**
- * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
+/**
+ * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
  */
 export var CustomComposition = {
   parameters: {
@@ -3120,8 +3120,8 @@ export var CustomComposition = {
   }
 };
 
-/**
- * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
+/**
+ * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
  */
 export var WithPisellFindSearch = {
   render: function WithPisellFindSearchRender() {
@@ -3210,8 +3210,8 @@ export var WithPisellFindSearch = {
   }
 };
 
-/**
- * 仅 Search + Grid + 分页（无 ToolBar）
+/**
+ * 仅 Search + Grid + 分页（无 ToolBar）
  */
 export var SearchAndGridOnly = {
   render: function SearchAndGridOnlyRender() {

package/es/components/pisellRecordBoard/shellFrame/ToolBar/index.js

@@ -61,10 +61,10 @@ function getDefaultFilterValue() {
   };
 }
 
-/**
- * RecordBoard 下的工具栏：使用 PisellToolBar。
- * 左侧默认 PisellFind（inline）；右侧默认 PisellFilter。通过 childComponentProps.toolBar.search / toolBar.filter 为对象时透传对应组件 props，为 false 时不渲染。
- * 可透传 topLeft、topRight、bottomLeft、bottomRight、tabs。
+/**
+ * RecordBoard 下的工具栏：使用 PisellToolBar。
+ * 左侧默认 PisellFind（inline）；右侧默认 PisellFilter。通过 childComponentProps.toolBar.search / toolBar.filter 为对象时透传对应组件 props，为 false 时不渲染。
+ * 可透传 topLeft、topRight、bottomLeft、bottomRight、tabs。
  */
 var RecordBoardToolBar = function RecordBoardToolBar(props) {
   var _shellMeta$hasGridCon, _shellMeta$hasFloorMa, _shellMeta$effectiveF, _ctx$childComponentPr, _ctx$childComponentPr2, _searchParams$DEFAULT, _ctx$childComponentPr3, _formFiltersPrefix, _size, _filterResetKey;

package/es/components/pisellRecordBoard/shellFrame/index.js

@@ -67,7 +67,7 @@ var FILL_HEIGHT_WRAPPER_STYLE = {
  * 仅表格侧、仅平面图侧、或双视图（出现 Segmented 切换）由子节点组合决定。根级 `floorMap` props 仍支持（如低代码透传），与 FloorMap 子组件 props 合并，**子组件优先**。
  */
 var RecordBoardShellFrame = function RecordBoardShellFrame(_ref2) {
-  var _effectiveFloorMapPro, _effectiveFloorMapPro2, _effectiveFloorMapPro3, _ctx$setScrollAreaHei, _ctx$childComponentPr;
+  var _ctx$floorMapLayoutRe, _effectiveFloorMapPro, _effectiveFloorMapPro2, _effectiveFloorMapPro3, _ctx$setScrollAreaHei, _ctx$childComponentPr;
   var children = _ref2.children,
     className = _ref2.className,
     style = _ref2.style;
@@ -143,7 +143,9 @@ var RecordBoardShellFrame = function RecordBoardShellFrame(_ref2) {
     }
   }, /*#__PURE__*/React.createElement(FloorMapLayoutProvider, {
     value: floorMapLayoutProviderValue
-  }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, _extends({}, effectiveFloorMapProps, mergedFloorMapDataSources !== undefined ? {
+  }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, _extends({
+    ref: (_ctx$floorMapLayoutRe = ctx.floorMapLayoutRef) !== null && _ctx$floorMapLayoutRe !== void 0 ? _ctx$floorMapLayoutRe : undefined
+  }, effectiveFloorMapProps, mergedFloorMapDataSources !== undefined ? {
     dataSources: mergedFloorMapDataSources
   } : {}, {
     items: (_effectiveFloorMapPro = effectiveFloorMapProps.items) !== null && _effectiveFloorMapPro !== void 0 ? _effectiveFloorMapPro : [],

package/es/components/pisellRecordBoard/types.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Key, ComponentType } from 'react';
-import type { PisellFloorMapLayoutProps, FloorMapDataSources, FloorMapLayoutContextValue } from '../pisellFloorMapLayout/types';
+import type { ReactNode, Key, ComponentType, Ref } from 'react';
+import type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapDataSources, FloorMapLayoutContextValue } from '../pisellFloorMapLayout/types';
 import type { TableProps } from 'antd';
 /**
  * 布局类型：一种 layout 对应一种「视图的集合」
@@ -202,6 +202,8 @@ export interface RecordBoardContextValue {
     floorMapLayoutContext?: FloorMapLayoutContextValue;
     /** 双视图并存时首屏偏好（根 props，与 PisellRecordBoard.defaultBodyView 一致） */
     defaultBodyView?: RecordBoardBodyView;
+    /** 挂到 ShellFrame 内 PisellFloorMapLayout，供外部 imperative 调用（如 saveLayout / fitBounds） */
+    floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
 }
 /**
  * 各 layout 下子组件的可选透传配置（类似 ChildComponentProps）
@@ -364,6 +366,10 @@ export interface RecordBoardProps {
      * 仅声明 FloorMap 而无 Grid/Card 内容时由 ShellFrame 固定为平面图，不出现切换器。
      */
     defaultBodyView?: RecordBoardBodyView;
+    /** 与 bodyView 同步持久化到 localStorage 的 key（双视图时生效） */
+    bodyViewStorageKey?: string;
+    /** 平面图 Layout 实例 ref，由 ShellFrame 注入 */
+    floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
     /** 其他 */
     [key: string]: any;
 }

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -17,7 +17,7 @@
   column-gap: 12px;
   box-sizing: border-box;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: 0;
   background: #141824;
   border: 1px solid rgba(255, 255, 255, 0.06);
 }

package/es/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -14,7 +14,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import dayjs from 'dayjs';
 import classNames from 'classnames';
 import PisellScrollView from "../PisellScrollView";
-import { parseValue, getRangeBounds, snapToStepMinutes, isInDisabledRanges as checkDisabledRanges } from "./utils";
+import { parseValue, getRangeBounds, snapToStepMinutes, isInDisabledRanges as checkDisabledRanges, getHorizontalAxisSlotCount } from "./utils";
 import { useTimeAxis, useRealtime, useDragInertia } from "./hooks";
 import { BackgroundLayer, CursorLayer, GestureLayer, NowButton, ScaleLayer } from "./components";
 import { locales } from '@pisell/utils';
@@ -22,10 +22,16 @@ import pisellTimeNavigatorLocales from "./locales";
 import "./PisellTimeNavigator.less";
 import useEngineContext from "../../hooks/useEngineContext";
 
-/** 横向每格宽度（px），Figma 约 82 */
+/** 横向每格宽度（px），Figma 约 82；axis-moves 固定用此值，cursor-moves 时按视口压缩以看全 range */
 var CELL_SIZE_H = 82;
 /** 竖向每格高度（px） */
 var CELL_SIZE_V = 20;
+/** 横向「Now」按钮占位，避免刻度被挡 */
+var CURSOR_MOVES_NOW_RESERVE_PX = 56;
+/** cursor-moves 横向：轴与视口左右边距 */
+var CURSOR_MOVES_H_PADDING_PX = 8;
+/** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
+var CURSOR_MOVES_MIN_CELL_PX = 8;
 
 /**
  * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
@@ -67,7 +73,8 @@ export function PisellTimeNavigator(props) {
     locale = props.locale,
     _props$timeFormat = props.timeFormat,
     timeFormat = _props$timeFormat === void 0 ? 'HH:mm' : _props$timeFormat,
-    renderNowButton = props.renderNowButton;
+    renderNowButton = props.renderNowButton,
+    onUserInteraction = props.onUserInteraction;
   var context = useEngineContext();
   locales.init(pisellTimeNavigatorLocales, (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');
 
@@ -81,7 +88,53 @@ export function PisellTimeNavigator(props) {
   }, [referenceDateProp]);
   var referenceDate = referenceDateFromProp !== null && referenceDateFromProp !== void 0 ? referenceDateFromProp : dayjs().startOf('day');
   var isHorizontal = orientation === 'horizontal';
-  var cellSizePx = isHorizontal ? CELL_SIZE_H : CELL_SIZE_V;
+  var isAxisMoves = cursorMode === 'axis-moves';
+  var _useState = useState({
+      w: 0,
+      h: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewportSize = _useState2[0],
+    setViewportSize = _useState2[1];
+
+  /** 挂载和视口变化时同步尺寸（需在 cellSize 计算之前声明 state） */
+  var viewportWrapRef = useRef(null);
+  useEffect(function () {
+    var el = viewportWrapRef.current;
+    if (!el) return;
+    var setSize = function setSize() {
+      var w = el.clientWidth;
+      var h = el.clientHeight;
+      setViewportSize(function (prev) {
+        return prev.w === w && prev.h === h ? prev : {
+          w: w,
+          h: h
+        };
+      });
+    };
+    setSize();
+    var ro = new ResizeObserver(setSize);
+    ro.observe(el);
+    return function () {
+      return ro.disconnect();
+    };
+  }, []);
+  var horizontalSlotCount = useMemo(function () {
+    return isHorizontal ? getHorizontalAxisSlotCount(range, referenceDate, stepMinutes) : 0;
+  }, [isHorizontal, range === null || range === void 0 ? void 0 : range.start, range === null || range === void 0 ? void 0 : range.end, referenceDate, stepMinutes]);
+
+  /** cursor-moves + 横向：整段 range 压进一条可视区域，等比例缩小格宽 */
+  var cellSizePx = useMemo(function () {
+    if (!isHorizontal) return CELL_SIZE_V;
+    if (isAxisMoves) return CELL_SIZE_H;
+    var n = horizontalSlotCount;
+    if (n <= 0) return CELL_SIZE_H;
+    var vpW = Math.max(1, viewportSize.w || 400);
+    var reserve = showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0;
+    var usable = Math.max(40, vpW - reserve - CURSOR_MOVES_H_PADDING_PX * 2);
+    var raw = Math.floor(usable / n);
+    return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
+  }, [isHorizontal, isAxisMoves, horizontalSlotCount, viewportSize.w, showNowButton]);
   var axis = useTimeAxis({
     range: range,
     stepMinutes: stepMinutes,
@@ -90,37 +143,29 @@ export function PisellTimeNavigator(props) {
     cellSizePx: cellSizePx
   });
   var isControlled = valueProp !== undefined;
-  var _useState = useState(function () {
+  var _useState3 = useState(function () {
       var v = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue;
       return parseValue(v, referenceDate);
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalValue = _useState2[0],
-    setInternalValue = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
   var value = isControlled ? valueProp != null ? parseValue(valueProp, referenceDate) : null : internalValue;
   var effectiveValue = value !== null && value !== void 0 ? value : axis.rangeStart;
   var scrollRef = useRef(null);
-  var viewportWrapRef = useRef(null);
   /** 标记当前是否为「程序性滚动到中心」：其触发的 onScrollEnd 不再做时间判定 */
   var scrollToCenterInProgressRef = useRef(false);
   /** 标记 value 是否由滚动/松手更新：若是则不再根据 value 做「滚动到中心」 */
   var valueUpdatedByScrollRef = useRef(false);
   /** 手指是否仍按在滚动区域上；仅当完全松手后才执行吸附 */
   var isPointerDownRef = useRef(false);
-  var _useState3 = useState({
+  var _useState5 = useState({
       scrollLeft: 0,
       scrollTop: 0
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrollPosition = _useState4[0],
-    setScrollPosition = _useState4[1];
-  var _useState5 = useState({
-      w: 0,
-      h: 0
-    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    viewportSize = _useState6[0],
-    setViewportSize = _useState6[1];
+    scrollPosition = _useState6[0],
+    setScrollPosition = _useState6[1];
   /** 每分钟更新一次，使当前时间线/渐变块随真实时间移动 */
   var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
@@ -135,33 +180,17 @@ export function PisellTimeNavigator(props) {
       return clearInterval(id);
     };
   }, []);
-  var isAxisMoves = cursorMode === 'axis-moves';
+
+  /** cursor-moves：拖指针时禁止程序性滚动抢焦点 */
+  var cursorDragActiveRef = useRef(false);
+  var cursorDragBaseRef = useRef({
+    startClient: 0,
+    startOffset: 0
+  });
   var getScrollContainer = useCallback(function () {
     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;
   }, []);
-
-  /** 挂载和视口变化时同步尺寸，保证两端半屏留白从首帧就正确 */
-  useEffect(function () {
-    var el = viewportWrapRef.current;
-    if (!el) return;
-    var setSize = function setSize() {
-      var w = el.clientWidth;
-      var h = el.clientHeight;
-      setViewportSize(function (prev) {
-        return prev.w === w && prev.h === h ? prev : {
-          w: w,
-          h: h
-        };
-      });
-    };
-    setSize();
-    var ro = new ResizeObserver(setSize);
-    ro.observe(el);
-    return function () {
-      return ro.disconnect();
-    };
-  }, []);
   var inertiaHandlers = useDragInertia({
     enabled: inertia && !userInteractionLocked,
     orientation: orientation,
@@ -175,7 +204,8 @@ export function PisellTimeNavigator(props) {
   var halfViewportW = effectiveViewportW / 2;
   var halfViewportH = effectiveViewportH / 2;
   var dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
-  var axisStartMarginW = Math.max(0, halfViewportW - dotOffsetPx);
+  /** cursor-moves 横向：左右小边距，整轴落在视口内；axis-moves 保持半屏留白可滚动 */
+  var axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
   var axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
 
   /** 拖动中：用连续映射按 1 分钟步长显示时间（不吸附到 stepMinutes） */
@@ -305,12 +335,25 @@ export function PisellTimeNavigator(props) {
   var verticalWrapHeight = axisStartMarginH + axis.totalLengthPx + verticalTailPx;
   var maxScrollPx = isHorizontal ? Math.max(0, axis.totalLengthPx - cellSizePx) : Math.max(0, verticalWrapHeight - effectiveViewportH);
   useEffect(function () {
-    var _scrollRef$current3, _scrollRef$current3$g;
+    var _scrollRef$current4, _scrollRef$current4$g;
+    /** 横向 cursor-moves：整段 range 已压进视口，禁止程序性横滚 */
+    if (!isAxisMoves && isHorizontal) {
+      var _scrollRef$current3, _scrollRef$current3$g;
+      var _container = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$g = _scrollRef$current3.getScrollContainer) === null || _scrollRef$current3$g === void 0 ? void 0 : _scrollRef$current3$g.call(_scrollRef$current3);
+      if (_container && _container.scrollLeft !== 0) {
+        _container.scrollTo({
+          left: 0,
+          behavior: 'auto'
+        });
+      }
+      return;
+    }
+    if (!isAxisMoves && cursorDragActiveRef.current) return;
     if (valueUpdatedByScrollRef.current) {
       valueUpdatedByScrollRef.current = false;
       return;
     }
-    var container = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$g = _scrollRef$current3.getScrollContainer) === null || _scrollRef$current3$g === void 0 ? void 0 : _scrollRef$current3$g.call(_scrollRef$current3);
+    var container = (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 || (_scrollRef$current4$g = _scrollRef$current4.getScrollContainer) === null || _scrollRef$current4$g === void 0 ? void 0 : _scrollRef$current4$g.call(_scrollRef$current4);
     if (!container) return;
     var viewportPx = isHorizontal ? container.clientWidth : container.clientHeight;
     var targetScroll = hasScrollPadding ? Math.max(0, Math.min(cursorOffsetPx - dotOffsetPx, maxScrollPx)) : Math.max(0, Math.min(cursorOffsetPx - viewportPx / 2, Math.max(0, axis.totalLengthPx - viewportPx)));
@@ -328,7 +371,7 @@ export function PisellTimeNavigator(props) {
         behavior: 'smooth'
       });
     }
-  }, [effectiveValue.valueOf(), isHorizontal, cursorOffsetPx, maxScrollPx, hasScrollPadding, dotOffsetPx, cellSizePx, axis.totalLengthPx]);
+  }, [effectiveValue.valueOf(), isHorizontal, cursorOffsetPx, maxScrollPx, hasScrollPadding, dotOffsetPx, cellSizePx, axis.totalLengthPx, isAxisMoves]);
   var scrollToCenterTime = useCallback(function (t) {
     var container = getScrollContainer();
     if (!container) return;
@@ -359,6 +402,50 @@ export function PisellTimeNavigator(props) {
     var clamped = wall.isBefore(rangeStart) ? rangeStart : wall.isAfter(rangeEnd) ? rangeEnd : wall;
     handleChange(clamped);
   }, [range, referenceDate, handleChange]);
+  var applyOffsetToNavigatorValue = useCallback(function (offsetPx, snap) {
+    var maxO = Math.max(0, axis.totalLengthPx - 0.001);
+    var nextOff = Math.max(0, Math.min(offsetPx, maxO));
+    var t = axis.offsetToTimeContinuous(nextOff);
+    if (!t) return;
+    var out = snap ? snapToStep ? snapToStepMinutes(t, stepMinutes) : t.startOf('minute') : t.startOf('minute');
+    if (checkDisabledRanges(out, disabledRanges)) return;
+    if (!isControlled) setInternalValue(out);
+    onChange === null || onChange === void 0 || onChange(out);
+  }, [axis.totalLengthPx, axis.offsetToTimeContinuous, snapToStep, stepMinutes, disabledRanges, isControlled, onChange]);
+  var handleCursorDragPointerDown = useCallback(function (e) {
+    if (userInteractionLocked || isAxisMoves) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
+    cursorDragActiveRef.current = true;
+    cursorDragBaseRef.current = {
+      startClient: isHorizontal ? e.clientX : e.clientY,
+      startOffset: cursorOffsetPx
+    };
+    valueUpdatedByScrollRef.current = true;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [userInteractionLocked, isAxisMoves, isHorizontal, cursorOffsetPx, onUserInteraction]);
+  var handleCursorDragPointerMove = useCallback(function (e) {
+    if (!cursorDragActiveRef.current) return;
+    var client = isHorizontal ? e.clientX : e.clientY;
+    var delta = client - cursorDragBaseRef.current.startClient;
+    var nextOff = cursorDragBaseRef.current.startOffset + delta;
+    applyOffsetToNavigatorValue(nextOff, false);
+  }, [isHorizontal, applyOffsetToNavigatorValue]);
+  var handleCursorDragPointerUp = useCallback(function (e) {
+    if (!cursorDragActiveRef.current) return;
+    cursorDragActiveRef.current = false;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch (_unused) {
+      /* already released */
+    }
+    var client = isHorizontal ? e.clientX : e.clientY;
+    var delta = client - cursorDragBaseRef.current.startClient;
+    var nextOff = cursorDragBaseRef.current.startOffset + delta;
+    valueUpdatedByScrollRef.current = false;
+    applyOffsetToNavigatorValue(nextOff, true);
+  }, [isHorizontal, applyOffsetToNavigatorValue]);
   var businessHoursPx = useMemo(function () {
     if (!businessHours) return undefined;
     var _getRangeBounds5 = getRangeBounds(businessHours, referenceDate),
@@ -425,15 +512,19 @@ export function PisellTimeNavigator(props) {
     snapFn: snapFn,
     scrollPosition: scrollPosition,
     viewportSize: viewportSize,
+    onUserInteraction: onUserInteraction,
     onPointerDown: inertiaHandlers.onPointerDown,
     onPointerMove: inertiaHandlers.onPointerMove,
     onPointerUp: inertiaHandlers.onPointerUp,
     onPointerLeave: inertiaHandlers.onPointerUp
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-time-navigator-axis-wrap",
-    style: isHorizontal ? {
+    style: isHorizontal ? isAxisMoves ? {
       width: axis.totalLengthPx + (effectiveViewportW - cellSizePx),
       minHeight: 48
+    } : {
+      width: CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX,
+      minHeight: 48
     } : {
       width: '100%'
       /* 不设 height，由轴（marginTop + 内容 + marginBottom）自然撑开，避免固定高度与 margin 的 CSS 盒模型歧义 */
@@ -441,9 +532,9 @@ export function PisellTimeNavigator(props) {
   }, isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /*#__PURE__*/React.createElement("div", {
     className: "pisell-time-navigator-current-gradient pisell-time-navigator-current-gradient--horizontal",
     style: {
-      left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - CELL_SIZE_H),
+      left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - cellSizePx),
       top: 0,
-      width: Math.min(CELL_SIZE_H, currentTimeOffsetPx),
+      width: Math.min(cellSizePx, currentTimeOffsetPx),
       height: 48
     },
     "aria-hidden": true
@@ -471,7 +562,8 @@ export function PisellTimeNavigator(props) {
     majorStepMinutes: majorStepMinutes,
     timeFormat: timeFormat,
     locale: locale,
-    style: scaleStyle
+    style: scaleStyle,
+    horizontalCellSizePx: isHorizontal ? cellSizePx : undefined
   }), !isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /*#__PURE__*/React.createElement("div", {
     className: "pisell-time-navigator-current-line",
     style: {
@@ -489,7 +581,12 @@ export function PisellTimeNavigator(props) {
     locale: locale,
     isRealtime: realtime,
     offsetPx: cursorOffsetPx,
-    style: cursorStyle
+    style: cursorStyle,
+    dragInteractive: !userInteractionLocked,
+    onDragPointerDown: handleCursorDragPointerDown,
+    onDragPointerMove: handleCursorDragPointerMove,
+    onDragPointerUp: handleCursorDragPointerUp,
+    onDragPointerCancel: handleCursorDragPointerUp
   })))))), isAxisMoves && /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-cursor-fixed', "pisell-time-navigator-cursor-fixed--".concat(orientation)),
     "aria-hidden": true