@pisell/materials 6.11.42 → 6.11.44

package/lib/components/pisellRecordBoard/shellFrame/ToolBar/recordBoardToolbar.less

@@ -34,16 +34,19 @@
 }
 
 /**
- * 两行工具栏：快筛独占首行，Find + 排序/筛选次行（与窄屏设计稿一致）。
- * 用于 ≤768px 视口；或工具栏节点带修饰类 .pisell-record-board-toolbar--narrow-stack（如预约 HUD 侧栏）。
+ * 窄屏 / narrow-stack：顶栏仍为单行——左侧快筛与右侧操作同一行；
+ * 快筛区内按钮组仍可换行（Space wrap / BucketButtonGroup）。
+ * 用于 ≤768px 视口；或工具栏带 `.pisell-record-board-toolbar--narrow-stack`（如预约 HUD）。
  */
-.record-board-toolbar-grid-narrow-two-rows() {
+.record-board-toolbar-grid-narrow-one-row() {
   > .toolbar-row {
     flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
+    flex-wrap: nowrap;
+    /** 左侧快筛多行时，右侧 search / 齿轮与顶缘对齐，不随整坨内容垂直居中 */
+    align-items: flex-start;
     row-gap: 8px;
     column-gap: 8px;
+    min-width: 0;
   }
 
   > .toolbar-row > .toolbar-row-left,
@@ -57,20 +60,31 @@
 
   .record-board-toolbar-quick-filter-slot {
     order: 0;
-    flex: 1 0 100%;
-    width: 100%;
+    flex: 1 1 auto;
+    width: auto;
     max-width: 100%;
     min-width: 0;
   }
 
+  /**
+   * 快筛区在 narrow-stack 模式下允许内部按钮自动换行（HUD 抽屉等窄容器场景）：
+   * - `flex-wrap: wrap` 让多组桶在空间不够时挤到下一行；
+   * - `display: flex; width: 100%` 让 form 撑满 quick-filter-slot，从而触发 wrap 阈值；
+   * - 这样右侧 search / 齿轮所在 row 永远是第一行最右，不会因桶过多被顶到下一行。
+   */
   .record-board-toolbar-quick-filter-slot .record-board-toolbar-quick-filter-form {
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
   }
 
   .record-board-toolbar-quick-filter-slot .pisell-lowcode-form,
   .record-board-toolbar-quick-filter-slot .ant-form {
-    width: 100%;
+    width: auto;
     max-width: 100%;
+    min-width: 0;
   }
 
   .record-board-toolbar-body-view-segmented {
@@ -99,12 +113,12 @@
 
 @media (max-width: 768px) {
   .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid {
-    .record-board-toolbar-grid-narrow-two-rows();
+    .record-board-toolbar-grid-narrow-one-row();
   }
 }
 
 .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack {
-  .record-board-toolbar-grid-narrow-two-rows();
+  .record-board-toolbar-grid-narrow-one-row();
 }
 
 /**
@@ -144,3 +158,155 @@
     flex-wrap: nowrap;
   }
 }
+
+/**
+ * `record-board-toolbar-grid-narrow-one-row` 对顶栏行使用 `align-items: flex-start`，
+ * 但上一段 `--compact` 对同一行写了 `align-items: center !important`，会压过 mixin，
+ * 导致 HUD（compact-narrow + narrow-stack）里左侧快筛换行时右侧搜索/齿轮仍整列垂直居中。
+ * 在「grid + narrow-stack + compact」组合下把行对齐改回顶缘。
+ */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid.pisell-record-board-toolbar--narrow-stack.pisell-record-board-toolbar--compact {
+  > .pisell-grid-pro-toolbar-row.toolbar-row,
+  > .toolbar-row {
+    align-items: flex-start !important;
+  }
+}
+
+/**
+ * 极窄模式：HUD 抽屉这类宽度有限的内嵌表。
+ *  - search 为纯图标触发器，与右侧齿轮并排
+ *  - 列显示 / 排序 / 筛选 / 重置 合并到齿轮 Popover 内
+ */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--compact-narrow {
+  padding-bottom: 6px !important;
+  gap: 4px !important;
+
+  > .pisell-grid-pro-toolbar-row.toolbar-row,
+  > .toolbar-row {
+    gap: 4px !important;
+  }
+
+  /** 顶栏右侧 search-icon 与齿轮之间的间距 */
+  .record-board-toolbar-right-actions.ant-space {
+    gap: 10px !important;
+  }
+
+  /**
+   * Find icon 触发器（PisellFind triggerType="icon"）：与右侧齿轮统一为 32×32，icon 18px。
+   * `className` 由 PisellFind/PisellLookup 挂在最外层 `.pisell-lookup`，不会透到内部 trigger，
+   * 所以选择器写成「外层 className → 内层 .pisell-lookup-trigger-icon」。
+   */
+  .pisell-lookup.record-board-toolbar-find-icon .pisell-lookup-trigger-icon {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    color: rgba(0, 0, 0, 0.65);
+    transition: background 0.15s, color 0.15s;
+
+    &:hover {
+      background: rgba(22, 119, 255, 0.08);
+      color: rgba(0, 0, 0, 0.88);
+    }
+
+    .anticon {
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .anticon svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  /**
+   * 齿轮按钮：与 find-icon 对齐到 32×32，icon 18px。
+   * 同时命中 antd 原生 `.ant-btn` 与低代码包裹的 `.pisell-lowcode-btn`，并兼容 `-sm` 尺寸变体；
+   * 用 !important 压过全局基线 28×28 与 antd small button 自带的 24px 高度。
+   */
+  .record-board-toolbar-settings-gear-btn,
+  .record-board-toolbar-settings-gear-btn.ant-btn,
+  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn,
+  .record-board-toolbar-settings-gear-btn.pisell-lowcode-btn.pisell-lowcode-btn-sm {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    padding: 0 !important;
+    border-radius: 6px;
+
+    .anticon {
+      font-size: 18px !important;
+      line-height: 1;
+    }
+
+    .anticon svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
+  }
+
+  /**
+   * 自定义 `trigger` 进入 PisellLookup 时会被包裹在 `pisell-lookup-trigger-custom`
+   */
+  .record-board-toolbar-right-actions .pisell-lookup-trigger-custom {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+/** 齿轮按钮：低视觉权重，hover 浅色背景；激活态由 antd Popover 自带 */
+.record-board-toolbar-settings-gear-btn.ant-btn {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 6px;
+  color: rgba(0, 0, 0, 0.65);
+
+  &:hover,
+  &:focus {
+    background: rgba(22, 119, 255, 0.08);
+    color: rgba(0, 0, 0, 0.88);
+  }
+}
+
+/**
+ * 齿轮 popover 内容：竖排三组（列显示 / 排序 / 筛选），每组保留各自原本的
+ * 按钮 + 子 popover 触发逻辑，外层只承担「分组承载 + 标签提示」。
+ * 子 popover 仍按各组件 placement 弹，会浮在齿轮 popover 之上。
+ */
+.record-board-toolbar-settings-gear-overlay .ant-popover-inner-content {
+  padding: 8px;
+  min-width: 180px;
+}
+
+.record-board-toolbar-settings-gear-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+/**
+ * 行容器只承担「分组与上下间距」，不再做包裹 hover 反馈：
+ * 每一项内部的按钮（Eye / Sort / Filter）已自带各自的 hover/active 反馈，
+ * 外层再加 hover 会出现「按钮反馈 + 行底色」双层叠加，视觉很乱。
+ *
+ * justify-content: center 让每行内的按钮在 popover 内横向居中——三组操作宽度
+ * 不一致（眼睛 ≪ Sort ≪ Filter），整列居中比左对齐视觉更稳，避免「梯形」错位。
+ */
+.record-board-toolbar-settings-gear-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0;
+  background: transparent;
+  cursor: default;
+}

package/lib/components/pisellRecordBoard/shellFrame/ToolBarQuickFilter/index.js

@@ -50,6 +50,14 @@ var ToolBarQuickFilter = ({
   (0, import_react.useEffect)(() => {
     const next = typeof currentValues === "object" && currentValues !== null ? currentValues : {};
     const byNames = filterList.reduce((acc, item) => {
+      var _a;
+      const composite = (_a = item == null ? void 0 : item.other) == null ? void 0 : _a.compositeFilterFieldNames;
+      if (Array.isArray(composite) && composite.length > 0) {
+        for (const field of composite) {
+          acc[String(field)] = next[String(field)] ?? void 0;
+        }
+        return acc;
+      }
       const name = item.name ?? item.key;
       if (name != null) acc[String(name)] = next[String(name)] ?? void 0;
       return acc;

package/lib/components/pisellRecordBoard/shellFrame/index.d.ts

@@ -18,6 +18,12 @@ declare const RecordBoardShellFrame: React.FC<{
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * 工具栏与表格主体之间的「附加条」插槽，透传给底层 PisellShellFrame.belowToolbar。
+     * 用于在不改 ToolBar 内部结构的前提下，紧贴 toolbar 下方插入轻量条目
+     * （例如 HUD 抽屉里的「当日总览」摘要栏）。
+     */
+    belowToolbar?: React.ReactNode;
 }>;
 export default RecordBoardShellFrame;
 export { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, ToolBarReset, ToolBarQuickFilter, RecordBoardFloorMap, RecordBoardCalendar, RecordBoardResourceWall, };

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

@@ -118,7 +118,7 @@ var FILL_HEIGHT_WRAPPER_STYLE = {
   display: "flex",
   flexDirection: "column"
 };
-var RecordBoardShellFrame = ({ children, className, style }) => {
+var RecordBoardShellFrame = ({ children, className, style, belowToolbar }) => {
   var _a, _b, _c;
   const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)();
   const fillHeight = (ctx == null ? void 0 : ctx.fillHeight) === true;
@@ -324,6 +324,7 @@ var RecordBoardShellFrame = ({ children, className, style }) => {
         showBatchActionBar: true
       },
       toolbar: /* @__PURE__ */ import_react.default.createElement(import_ToolBar.default, null),
+      belowToolbar,
       batchActionBar: /* @__PURE__ */ import_react.default.createElement(import_BatchActionBar.default, null)
     },
     bodyContent

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

@@ -535,6 +535,11 @@ export interface RecordBoardContextValue {
     onColumnOrderChange?: (columnKeys: string[]) => void;
     /** 各子组件透传 props，由 Provider 注入 */
     childComponentProps?: RecordBoardChildComponentProps;
+    /**
+     * 业务方完全自定义的分页渲染（从根 props 透传过来）。
+     * `<RecordBoardPagination />` 优先级：组件 `render` prop > 此 ctx 字段 > 默认 materials Pagination。
+     */
+    paginationRender?: (ctx: RecordBoardContextValue) => React.ReactNode;
     /** 是否占满父容器高度，供 ShellFrame 做弹性布局（内容区纯 CSS 滚动 + 表头 sticky；scroll.autoCalc 时用测量高度） */
     fillHeight?: boolean;
     /** 内容区滚动容器高度（fillHeight 且 grid.scroll.autoCalc 时由 ShellFrame 测量），供 Grid 计算 scroll.y */
@@ -589,9 +594,13 @@ export declare type RecordBoardFilterProps = Record<string, any>;
 export interface RecordBoardToolBarProps {
     /**
      * `compact`：Find / 快筛 / 排序筛选 / 重置 / 视图切换等统一小号，用于窄容器（如 HUD 内嵌表）。
+     * `compact-narrow`：极窄容器（如 HUD 抽屉）下的进一步压缩 ──
+     *   - Find 退化为图标触发器（弹搜索 Modal/Drawer），不再常驻 input
+     *   - 列显示 / 排序 / 筛选合并到一个齿轮按钮的 Popover 内
+     *   - Reset 仍单独保留（快捷高频动作）
      * @default 'default'
      */
-    toolbarDensity?: 'default' | 'compact';
+    toolbarDensity?: 'default' | 'compact' | 'compact-narrow';
     className?: string;
     style?: React.CSSProperties;
     tabs?: React.ReactNode;
@@ -719,6 +728,16 @@ export interface RecordBoardProps {
     search?: RecordBoardSearchProps;
     /** 分页组件透传配置（与 pagination 状态区分，此处为 Pagination 组件 props） */
     paginationConfig?: Record<string, any>;
+    /**
+     * 完全自定义分页渲染：传入则 ShellFrame 内置的 `<RecordBoardPagination />` 用此函数替换默认渲染。
+     *
+     * 适用场景：业务方需要在窄容器（如 hud 抽屉）里不要 materials Pagination
+     * 那套 50px 高、Previous/Next 大按钮、灰底边框容器，直接用 antd 原生 small Pagination
+     * 或其它紧凑实现。比 `paginationConfig` 更彻底（后者只是 props 透传，外壳样式仍在）。
+     *
+     * 入参 ctx 包含 pagination/total/onPageChange 等当前分页所需上下文。
+     */
+    paginationRender?: (ctx: RecordBoardContextValue) => React.ReactNode;
     /** 多选操作栏配置 */
     batchActionBar?: RecordBoardBatchActionBarProps;
     /** 卡片列表配置 */

package/lib/components/pisellShellFrame/PisellShellFrame.js

@@ -55,6 +55,7 @@ var PisellShellFrame = (props) => {
     subtitle,
     titleExtra,
     toolbar,
+    belowToolbar,
     statisticList,
     children,
     batchActionBar,
@@ -79,7 +80,7 @@ var PisellShellFrame = (props) => {
       style,
       "data-shell-frame": true
     },
-    /* @__PURE__ */ import_react.default.createElement("header", { className: "pisell-shell-frame-header" }, hasTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title" }, /* @__PURE__ */ import_react.default.createElement("span", null, title != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-main" }, title), subtitle != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-sub" }, subtitle)), titleExtra != null && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title-extra" }, titleExtra)), hasToolbar && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-toolbar" }, toolbar), hasStatistic && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-statistic" }, config.statisticCollapsible ? /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("header", { className: "pisell-shell-frame-header" }, hasTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title" }, /* @__PURE__ */ import_react.default.createElement("span", null, title != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-main" }, title), subtitle != null && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-shell-frame-title-sub" }, subtitle)), titleExtra != null && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-title-extra" }, titleExtra)), hasToolbar && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-toolbar" }, toolbar), belowToolbar != null && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-below-toolbar" }, belowToolbar), hasStatistic && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-shell-frame-statistic" }, config.statisticCollapsible ? /* @__PURE__ */ import_react.default.createElement(
       import_antd.Collapse,
       {
         ghost: true,

package/lib/components/pisellShellFrame/PisellShellFrame.less

@@ -45,6 +45,19 @@
     margin-bottom: 0;
   }
 
+  /**
+   * 工具栏正下方的「附加条」：默认与 toolbar 留 8px 缝隙，让插入的轻量摘要
+   * 与 toolbar 视觉上分开但不破坏顶栏整体节奏。空内容时塌陷不占位。
+   */
+  &-below-toolbar {
+    margin-bottom: 8px;
+
+    &:empty {
+      display: none;
+      margin-bottom: 0;
+    }
+  }
+
   &-statistic {
     margin-bottom: 8px;
 

package/lib/components/pisellShellFrame/types.d.ts

@@ -45,6 +45,12 @@ export interface PisellShellFrameProps {
     titleExtra?: ReactNode;
     /** 工具栏内容 */
     toolbar?: ReactNode;
+    /**
+     * 工具栏正下方、统计/正文之上的"附加条"插槽，渲染于 header 内部。
+     * 适用于「统计摘要 / 当前所选筛选标签」等需要紧贴 toolbar 的轻量条目。
+     * 当为空时不占位、不渲染外壳。
+     */
+    belowToolbar?: ReactNode;
     /** 统计列表内容（如 PisellStatisticList 或自定义） */
     statisticList?: ReactNode;
     /** 主内容（表格/看板/日历/楼层图等），当 config.scroll 为 true 时会被滚动容器包裹 */

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -43,13 +43,7 @@ var import_utils2 = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
 var import_PisellTimeNavigator = require("./PisellTimeNavigator.less");
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
-var CELL_SIZE_H = 82;
-var CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
-var CELL_SIZE_V = 20;
-var CURSOR_MOVES_NOW_RESERVE_PX = 56;
-var CURSOR_MOVES_H_PADDING_PX = 8;
-var CURSOR_MOVES_MIN_CELL_PX = 8;
-var DENSITY_LAYER_HEIGHT = 46;
+var import_timeNavigatorConstants = require("./timeNavigatorConstants");
 function PisellTimeNavigator(props) {
   var _a, _b;
   const {
@@ -150,15 +144,15 @@ function PisellTimeNavigator(props) {
     [isHorizontal, range == null ? void 0 : range.start, range == null ? void 0 : range.end, referenceDate, stepMinutes]
   );
   const cellSizePx = (0, import_react.useMemo)(() => {
-    if (!isHorizontal) return CELL_SIZE_V;
-    if (isAxisMoves) return CELL_SIZE_H;
+    if (!isHorizontal) return import_timeNavigatorConstants.CELL_SIZE_V;
+    if (isAxisMoves) return import_timeNavigatorConstants.CELL_SIZE_H;
     const n = horizontalSlotCount;
-    if (n <= 0) return CELL_SIZE_H;
+    if (n <= 0) return import_timeNavigatorConstants.CELL_SIZE_H;
     const vpW = Math.max(1, viewportSize.w || 400);
-    const reserve = showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0;
-    const usable = Math.max(40, vpW - reserve - CURSOR_MOVES_H_PADDING_PX * 2);
+    const reserve = showNowButton ? import_timeNavigatorConstants.CURSOR_MOVES_NOW_RESERVE_PX : 0;
+    const usable = Math.max(40, vpW - reserve - import_timeNavigatorConstants.CURSOR_MOVES_H_PADDING_PX * 2);
     const raw = Math.floor(usable / n);
-    return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
+    return Math.max(import_timeNavigatorConstants.CURSOR_MOVES_MIN_CELL_PX, Math.min(import_timeNavigatorConstants.CELL_SIZE_H, raw));
   }, [
     isHorizontal,
     isAxisMoves,
@@ -182,7 +176,7 @@ 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;
+    const h = import_timeNavigatorConstants.DENSITY_LAYER_HEIGHT;
     const points = slice.map((v, i) => {
       const x = i * cellSizePx + cellSizePx / 2;
       const t = (v - minV) / span;
@@ -236,7 +230,36 @@ function PisellTimeNavigator(props) {
     return () => clearInterval(id);
   }, []);
   const cursorDragActiveRef = (0, import_react.useRef)(false);
-  const cursorDragBaseRef = (0, import_react.useRef)({ startClient: 0, startOffset: 0 });
+  const cursorDragBaseRef = (0, import_react.useRef)({
+    startClient: 0,
+    startOffset: 0,
+    pxPerClient: 1
+  });
+  const measureWrapPxPerClient = (0, import_react.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 <= 0.01) return 1;
+    return 1 / scale;
+  }, [isHorizontal]);
+  const [isCursorDragging, setIsCursorDragging] = (0, import_react.useState)(false);
+  const [dragVisualOffsetPx, setDragVisualOffsetPx] = (0, import_react.useState)(
+    null
+  );
+  const pendingDragOffsetRef = (0, import_react.useRef)(null);
+  const dragRafIdRef = (0, import_react.useRef)(null);
+  const cancelPendingDragFrame = (0, import_react.useCallback)(() => {
+    if (dragRafIdRef.current != null) {
+      cancelAnimationFrame(dragRafIdRef.current);
+      dragRafIdRef.current = null;
+    }
+    pendingDragOffsetRef.current = null;
+  }, []);
+  (0, import_react.useEffect)(() => cancelPendingDragFrame, [cancelPendingDragFrame]);
   const getScrollContainer = (0, import_react.useCallback)(
     () => {
       var _a2, _b2;
@@ -254,7 +277,7 @@ function PisellTimeNavigator(props) {
   const halfViewportW = effectiveViewportW / 2;
   const halfViewportH = effectiveViewportH / 2;
   const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
-  const axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
+  const axisStartMarginW = isHorizontal && !isAxisMoves ? import_timeNavigatorConstants.CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
   const axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
   const horizontalAxisWrapStyle = (0, import_react.useMemo)(() => {
     if (!isHorizontal) return null;
@@ -271,7 +294,7 @@ function PisellTimeNavigator(props) {
       }
       return { width: natural2, minHeight };
     }
-    const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+    const natural = import_timeNavigatorConstants.CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + import_timeNavigatorConstants.CURSOR_MOVES_H_PADDING_PX;
     if (!showNowButton) {
       return {
         width: "100%",
@@ -435,6 +458,11 @@ function PisellTimeNavigator(props) {
     });
   }, [referenceDayMs, isControlled, defaultValue]);
   const cursorOffsetPx = axis.timeToOffset(effectiveValue);
+  const visualCursorOffsetPx = dragVisualOffsetPx ?? cursorOffsetPx;
+  const visualValue = (0, import_react.useMemo)(() => {
+    if (dragVisualOffsetPx == null) return effectiveValue;
+    return axis.offsetToTimeContinuous(dragVisualOffsetPx) ?? effectiveValue;
+  }, [dragVisualOffsetPx, axis.offsetToTimeContinuous, effectiveValue]);
   const wallAligned = (0, import_dayjs.default)().startOf("minute");
   const currentTimeInRange = !wallAligned.isBefore(axis.rangeStart) && !wallAligned.isAfter(axis.rangeEnd);
   const currentTimeOffsetPx = currentTimeInRange ? axis.timeToOffset(wallAligned) : void 0;
@@ -442,7 +470,7 @@ function PisellTimeNavigator(props) {
     if (!isHorizontal || currentTimeOffsetPx == null || currentTimeOffsetPx < 0) {
       return null;
     }
-    const w = Math.min(CURRENT_TIME_GRADIENT_WIDTH_H_PX, currentTimeOffsetPx);
+    const w = Math.min(import_timeNavigatorConstants.CURRENT_TIME_GRADIENT_WIDTH_H_PX, currentTimeOffsetPx);
     return {
       left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - w),
       top: 0,
@@ -568,9 +596,11 @@ 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);
     },
     [
@@ -578,34 +608,51 @@ function PisellTimeNavigator(props) {
       isAxisMoves,
       isHorizontal,
       cursorOffsetPx,
-      onUserInteraction
+      onUserInteraction,
+      measureWrapPxPerClient
     ]
   );
   const handleCursorDragPointerMove = (0, import_react.useCallback)(
     (e) => {
       if (!cursorDragActiveRef.current) return;
       const client = isHorizontal ? e.clientX : e.clientY;
-      const delta = client - cursorDragBaseRef.current.startClient;
+      const screenDelta = client - cursorDragBaseRef.current.startClient;
+      const delta = screenDelta * (cursorDragBaseRef.current.pxPerClient || 1);
       const nextOff = cursorDragBaseRef.current.startOffset + delta;
-      applyOffsetToNavigatorValue(nextOff, false);
+      pendingDragOffsetRef.current = nextOff;
+      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 - 1e-3);
+        const clamped = Math.max(0, Math.min(pending, maxO));
+        setDragVisualOffsetPx(clamped);
+      });
     },
-    [isHorizontal, applyOffsetToNavigatorValue]
+    [isHorizontal, axis.totalLengthPx]
   );
   const handleCursorDragPointerUp = (0, import_react.useCallback)(
     (e) => {
       if (!cursorDragActiveRef.current) return;
       cursorDragActiveRef.current = false;
+      setIsCursorDragging(false);
       try {
         e.currentTarget.releasePointerCapture(e.pointerId);
       } catch {
       }
       const client = isHorizontal ? e.clientX : e.clientY;
-      const delta = client - cursorDragBaseRef.current.startClient;
+      const screenDelta = client - cursorDragBaseRef.current.startClient;
+      const delta = screenDelta * (cursorDragBaseRef.current.pxPerClient || 1);
       const nextOff = cursorDragBaseRef.current.startOffset + delta;
       valueUpdatedByScrollRef.current = false;
+      cancelPendingDragFrame();
+      setDragVisualOffsetPx(null);
       applyOffsetToNavigatorValue(nextOff, true);
     },
-    [isHorizontal, applyOffsetToNavigatorValue]
+    [isHorizontal, applyOffsetToNavigatorValue, cancelPendingDragFrame]
   );
   const businessHoursPx = (0, import_react.useMemo)(() => {
     if (!businessHours) return void 0;
@@ -680,6 +727,7 @@ function PisellTimeNavigator(props) {
               cellSizePx,
               axisStartMarginPx: isHorizontal ? axisStartMarginW : axisStartMarginH,
               offsetToTime: axis.offsetToTime,
+              offsetToTimeContinuous: axis.offsetToTimeContinuous,
               onSelectTime: handleSelectTime,
               isInDisabledRanges: isInDisabled,
               snapToStep,
@@ -841,13 +889,14 @@ function PisellTimeNavigator(props) {
                   import_components.CursorLayer,
                   {
                     orientation,
-                    value: effectiveValue,
+                    value: visualValue,
                     timeFormat,
                     locale,
                     isRealtime: realtime,
-                    offsetPx: cursorOffsetPx,
+                    offsetPx: visualCursorOffsetPx,
                     style: cursorStyle,
                     dragInteractive: !userInteractionLocked,
+                    isDragging: isCursorDragging,
                     onDragPointerDown: handleCursorDragPointerDown,
                     onDragPointerMove: handleCursorDragPointerMove,
                     onDragPointerUp: handleCursorDragPointerUp,
@@ -859,6 +908,26 @@ function PisellTimeNavigator(props) {
           )
         )
       ),
+      !isAxisMoves && isHorizontal && isCursorDragging && visualValue != null && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-time-navigator-drag-bubble-overlay",
+          "aria-hidden": true
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: (0, import_classnames.default)(
+              "pisell-time-navigator-drag-bubble",
+              realtime && "pisell-time-navigator-drag-bubble--realtime"
+            ),
+            style: {
+              left: axisStartMarginW + visualCursorOffsetPx - scrollPosition.scrollLeft
+            }
+          },
+          locale ? visualValue.locale(locale).format(timeFormat) : visualValue.format(timeFormat)
+        )
+      ),
       isAxisMoves && /* @__PURE__ */ import_react.default.createElement(
         "div",
         {