@pisell/materials 1.0.1063 → 1.0.1064

package/lib/components/pisellFloorMapLayout/utils/floorMapElementKindUtils.js

@@ -21,9 +21,17 @@ var floorMapElementKindUtils_exports = {};
 __export(floorMapElementKindUtils_exports, {
   getElementKindConfig: () => getElementKindConfig,
   getSceneElementRenderIssue: () => getSceneElementRenderIssue,
+  getSwappableElementKindsInSameCategory: () => getSwappableElementKindsInSameCategory,
+  isFloorMapImageElementKind: () => isFloorMapImageElementKind,
+  patchSceneElementForKindSwitch: () => patchSceneElementForKindSwitch,
   resolveDataBindingPolicy: () => resolveDataBindingPolicy
 });
 module.exports = __toCommonJS(floorMapElementKindUtils_exports);
+var import_types = require("../types");
+var import_floorMapStageDefaults = require("./floorMapStageDefaults");
+function isFloorMapImageElementKind(kind) {
+  return kind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
+}
 function resolveDataBindingPolicy(kind) {
   return (kind == null ? void 0 : kind.dataBindingPolicy) ?? "none";
 }
@@ -32,6 +40,64 @@ function getElementKindConfig(config, elementKind) {
   if (!elementKind || !((_a = config == null ? void 0 : config.elementKinds) == null ? void 0 : _a.length)) return void 0;
   return config.elementKinds.find((k) => k.value === elementKind);
 }
+function getSwappableElementKindsInSameCategory(config, elementKind) {
+  var _a, _b;
+  if (!elementKind || !((_a = config.elementKinds) == null ? void 0 : _a.length)) return [];
+  const rawCats = config.elementKindCategories ?? [];
+  const sorted = [...rawCats].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const fallbackId = ((_b = sorted[0]) == null ? void 0 : _b.id) ?? "_uncat";
+  const self = config.elementKinds.find((k) => k.value === elementKind);
+  if (!self) return [];
+  const cid = self.categoryId ?? fallbackId;
+  return config.elementKinds.filter((k) => {
+    if (k.showInPalette === false) return false;
+    if (k.value === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND) return false;
+    if (k.value === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND) return false;
+    return (k.categoryId ?? fallbackId) === cid;
+  });
+}
+var DEFAULT_PLACE_W = 180;
+var DEFAULT_PLACE_H = 120;
+var IMAGE_PLACE_W = 400;
+var IMAGE_PLACE_H = 240;
+var DECO_SIZE = 48;
+function patchSceneElementForKindSwitch(config, element, nextKindValue) {
+  var _a, _b;
+  const nextCfg = getElementKindConfig(config, nextKindValue);
+  const nextPol = resolveDataBindingPolicy(nextCfg);
+  const binding = element.dataBinding;
+  const isNextImage = isFloorMapImageElementKind(nextKindValue);
+  const isNextStage = nextKindValue === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+  let clearBinding = false;
+  if (nextPol === "none") {
+    clearBinding = true;
+  } else if (binding && ((_a = nextCfg == null ? void 0 : nextCfg.allowedDataSourceKeys) == null ? void 0 : _a.length)) {
+    if (!nextCfg.allowedDataSourceKeys.includes(binding.dataSourceKey)) {
+      clearBinding = true;
+    }
+  }
+  const nextW = isNextImage ? IMAGE_PLACE_W : isNextStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.width : DEFAULT_PLACE_W;
+  const nextH = isNextImage ? IMAGE_PLACE_H : isNextStage ? import_floorMapStageDefaults.STAGE_DECO_DEFAULT.height : DEFAULT_PLACE_H;
+  const useDecoSize = nextPol === "none" && nextKindValue !== import_types.FLOOR_MAP_STAGE_ELEMENT_KIND && !isNextImage;
+  const width = useDecoSize ? Math.max(element.width ?? DECO_SIZE, DECO_SIZE) : Math.max(element.width ?? nextW, nextW);
+  const height = useDecoSize ? Math.max(element.height ?? DECO_SIZE, DECO_SIZE) : Math.max(element.height ?? nextH, nextH);
+  const patch = {
+    elementKind: nextKindValue,
+    shape: isNextStage || isNextImage ? "rect" : nextCfg == null ? void 0 : nextCfg.defaultShape,
+    width,
+    height,
+    name: ((_b = nextCfg == null ? void 0 : nextCfg.defaultPresentation) == null ? void 0 : _b.title) != null && String(nextCfg.defaultPresentation.title).trim() !== "" ? String(nextCfg.defaultPresentation.title) : element.name
+  };
+  if (clearBinding) {
+    patch.dataBinding = void 0;
+  }
+  if (isNextImage) {
+    patch.imageUrl = element.imageUrl ?? "";
+  } else {
+    patch.imageUrl = void 0;
+  }
+  return patch;
+}
 function getSceneElementRenderIssue(element, kind, dataSources) {
   const policy = resolveDataBindingPolicy(kind);
   const binding = element.dataBinding;
@@ -66,5 +132,8 @@ function getSceneElementRenderIssue(element, kind, dataSources) {
 0 && (module.exports = {
   getElementKindConfig,
   getSceneElementRenderIssue,
+  getSwappableElementKindsInSameCategory,
+  isFloorMapImageElementKind,
+  patchSceneElementForKindSwitch,
   resolveDataBindingPolicy
 });

package/lib/components/pisellFloorMapLayout/utils/floorMapFallbackRender.js

@@ -35,6 +35,7 @@ __export(floorMapFallbackRender_exports, {
 module.exports = __toCommonJS(floorMapFallbackRender_exports);
 var import_react = __toESM(require("react"));
 var import_types = require("../types");
+var import_floorMapElementKindUtils = require("./floorMapElementKindUtils");
 var import_FloorMapImageElement = require("../components/FloorMapImageElement");
 var import_floorMapStageDefaults = require("./floorMapStageDefaults");
 function renderFloorMapRenderError(message) {
@@ -67,7 +68,7 @@ function renderFloorMapFallbackPlaceholder(item) {
   const isStage = kind === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
   const nameText = (item == null ? void 0 : item.name) != null ? String(item.name).trim() : "";
   const fallbackLabel = nameText || kind;
-  if (kind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND) {
+  if ((0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(kind)) {
     const url = (_a = item._sceneElement) == null ? void 0 : _a.imageUrl;
     return /* @__PURE__ */ import_react.default.createElement(
       import_FloorMapImageElement.FloorMapImageElement,

package/lib/components/pisellRecordBoard/PisellRecordBoard.js

@@ -92,6 +92,7 @@ function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
     floorMapLayoutContext: void 0,
     defaultBodyView: void 0,
     floorMapLayoutRef: void 0,
+    floorMapFooter: void 0,
     dataSources: void 0,
     gridDataSourceKey: void 0
   };
@@ -116,6 +117,7 @@ var PisellRecordBoard = (props) => {
     defaultBodyView,
     bodyViewStorageKey,
     floorMapLayoutRef,
+    floorMapFooter,
     className: classNameProp,
     style: styleProp,
     ...rest
@@ -285,7 +287,8 @@ var PisellRecordBoard = (props) => {
       floorMapProps: floorMapProp,
       floorMapLayoutContext: floorMapLayoutContextProp,
       defaultBodyView,
-      floorMapLayoutRef
+      floorMapLayoutRef,
+      floorMapFooter
     };
   }, [
     layoutType,
@@ -315,6 +318,7 @@ var PisellRecordBoard = (props) => {
     floorMapLayoutContextProp,
     defaultBodyView,
     floorMapLayoutRef,
+    floorMapFooter,
     bodyView,
     setBodyView
   ]);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { RecordBoardToolBarProps as ToolBarPropsType } from '../../types';
 import './ToolBarFilter.less';
+import './recordBoardToolbar.less';
 /**
  * RecordBoard 下的工具栏：使用 PisellToolBar。
  * 左侧默认 PisellFind（inline）；右侧默认 PisellFilter。通过 childComponentProps.toolBar.search / toolBar.filter 为对象时透传对应组件 props，为 false 时不渲染。

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

@@ -33,6 +33,7 @@ __export(ToolBar_exports, {
 });
 module.exports = __toCommonJS(ToolBar_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_antd = require("antd");
 var import_SwitchVertical01 = __toESM(require("@pisell/icon/es/SwitchVertical01"));
 var import_ToolBar = __toESM(require("../../../pisellGridPro/ToolBar"));
@@ -47,6 +48,7 @@ var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
 var import_utils = require("@pisell/utils");
 var import_locales = require("../../../../locales");
 var import_ToolBarFilter = require("./ToolBarFilter.less");
+var import_recordBoardToolbar = require("./recordBoardToolbar.less");
 var import_recordBoardColumns = require("../../utils/recordBoardColumns");
 function getSortButtonText() {
   const key = "pisell2.recordBoard.toolbar.sort";
@@ -155,7 +157,9 @@ var RecordBoardToolBar = (props) => {
       style: { marginRight: 8 }
     }
   ) : null;
-  const topLeft = /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-top-left" }, bodyViewToggle, quickFilterNode, searchNode ? /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-find-wrap" }, searchNode) : null, slots.topLeft);
+  const compactFloorMapToolbar = bodyView === "floorMap" && showTableFloorToggle;
+  const hideBodyViewToggleInToolbarRow = showTableFloorToggle && Boolean(slots.tabs) && bodyView === "floorMap";
+  const topLeft = compactFloorMapToolbar ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-top-left" }, !hideBodyViewToggleInToolbarRow ? bodyViewToggle : null, quickFilterNode, searchNode ? /* @__PURE__ */ import_react.default.createElement("div", { className: "record-board-toolbar-find-wrap" }, searchNode) : null, slots.topLeft);
   const sortConfig = slots.sort;
   const hideSort = sortConfig === false;
   const sortValue = searchParams == null ? void 0 : searchParams[SORT_PARAMS_FIELD];
@@ -273,17 +277,21 @@ var RecordBoardToolBar = (props) => {
     }
   );
   const showColumnSetting = slots.columnSetting !== false && Array.isArray(gridColumns) && gridColumns.length > 0;
-  const topRight = /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, showColumnSetting ? /* @__PURE__ */ import_react.default.createElement(import_ColumnSetting.default, null) : null, sortNode, filterNode, /* @__PURE__ */ import_react.default.createElement(import_ToolBarReset.default, { size: "large" }), slots.topRight);
+  const topRight = compactFloorMapToolbar ? null : /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, showColumnSetting ? /* @__PURE__ */ import_react.default.createElement(import_ColumnSetting.default, null) : null, sortNode, filterNode, /* @__PURE__ */ import_react.default.createElement(import_ToolBarReset.default, { size: "large" }), slots.topRight);
   return /* @__PURE__ */ import_react.default.createElement(
     import_ToolBar.default,
     {
-      className: slots.className,
+      className: (0, import_classnames.default)(
+        bodyView === "floorMap" && "pisell-record-board-toolbar--floor-map",
+        bodyView === "grid" && "pisell-record-board-toolbar--grid",
+        slots.className
+      ),
       style: slots.style,
       tabs: slots.tabs,
       topLeft,
       topRight,
-      bottomLeft: slots.bottomLeft,
-      bottomRight: slots.bottomRight
+      bottomLeft: compactFloorMapToolbar ? null : slots.bottomLeft,
+      bottomRight: compactFloorMapToolbar ? null : slots.bottomRight
     }
   );
 };

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

@@ -0,0 +1,23 @@
+/**
+ * 平面视图：工具栏常仅一行（ScheduleBand），去掉 GridPro 默认底内边距。
+ * 不用仅依赖 #body：Story/本地预览可能没有 id=body，低代码若再包一层 #body 会导致双前缀失效。
+ * !important：确保晚于 @pisellGridPro/ToolBar 中单类 .pisell-grid-pro-toolbar 的 padding-bottom。
+ */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--floor-map {
+  padding-bottom: 0 !important;
+}
+
+#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--floor-map {
+  padding-bottom: 0 !important;
+}
+
+/* 表格态工具栏与内容对齐：左右留白 16；平面图态不加此内边距 */
+.pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+#body .pisell-grid-pro-toolbar.pisell-record-board-toolbar--grid {
+  padding-left: 16px;
+  padding-right: 16px;
+}

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

@@ -3,6 +3,7 @@ import RecordBoardToolBar from './ToolBar';
 import RecordBoardBatchActionBar from './BatchActionBar';
 import RecordBoardPagination from './Pagination';
 import RecordBoardSearch from './Search';
+import './shellFrameFloorMap.less';
 import ToolBarReset from './ToolBarReset';
 import ToolBarQuickFilter from './ToolBarQuickFilter';
 import RecordBoardFloorMap from './FloorMap';
@@ -18,3 +19,4 @@ declare const RecordBoardShellFrame: React.FC<{
 }>;
 export default RecordBoardShellFrame;
 export { RecordBoardToolBar, RecordBoardBatchActionBar, RecordBoardPagination, RecordBoardSearch, ToolBarReset, ToolBarQuickFilter, RecordBoardFloorMap };
+export { useRecordBoardShellBodyMeta } from './ShellBodyMetaContext';

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

@@ -36,7 +36,8 @@ __export(shellFrame_exports, {
   RecordBoardToolBar: () => import_ToolBar.default,
   ToolBarQuickFilter: () => import_ToolBarQuickFilter.default,
   ToolBarReset: () => import_ToolBarReset.default,
-  default: () => shellFrame_default
+  default: () => shellFrame_default,
+  useRecordBoardShellBodyMeta: () => import_ShellBodyMetaContext2.useRecordBoardShellBodyMeta
 });
 module.exports = __toCommonJS(shellFrame_exports);
 var import_react = __toESM(require("react"));
@@ -48,10 +49,12 @@ var import_ToolBar = __toESM(require("./ToolBar"));
 var import_BatchActionBar = __toESM(require("./BatchActionBar"));
 var import_Pagination = __toESM(require("./Pagination"));
 var import_Search = __toESM(require("./Search"));
+var import_shellFrameFloorMap = require("./shellFrameFloorMap.less");
 var import_ToolBarReset = __toESM(require("./ToolBarReset"));
 var import_ToolBarQuickFilter = __toESM(require("./ToolBarQuickFilter"));
 var import_FloorMap = __toESM(require("./FloorMap"));
 var import_ShellBodyMetaContext = require("./ShellBodyMetaContext");
+var import_ShellBodyMetaContext2 = require("./ShellBodyMetaContext");
 var FILL_HEIGHT_SCROLL_STYLE = {
   flex: 1,
   minHeight: 0,
@@ -152,12 +155,14 @@ var RecordBoardShellFrame = ({ children, className, style }) => {
   const floorMapNode = effectiveFloorMapProps && !showGrid ? /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
+      className: "pisell-record-board-floor-map-viewport",
       style: {
         flex: 1,
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
-        overflow: "hidden"
+        overflow: "hidden",
+        position: "relative"
       }
     },
     /* @__PURE__ */ import_react.default.createElement(import_pisellFloorMapLayout.FloorMapLayoutProvider, { value: floorMapLayoutProviderValue }, /* @__PURE__ */ import_react.default.createElement(
@@ -174,7 +179,8 @@ var RecordBoardShellFrame = ({ children, className, style }) => {
           ...effectiveFloorMapProps.style ?? {}
         }
       }
-    ))
+    )),
+    ctx.floorMapFooter ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-record-board-floor-map-floating-slot" }, ctx.floorMapFooter) : null
   ) : null;
   const bodyContent = fillHeight ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showGrid ? /* @__PURE__ */ import_react.default.createElement(
     ScrollAreaMeasurer,
@@ -215,5 +221,6 @@ var shellFrame_default = RecordBoardShellFrame;
   RecordBoardSearch,
   RecordBoardToolBar,
   ToolBarQuickFilter,
-  ToolBarReset
+  ToolBarReset,
+  useRecordBoardShellBodyMeta
 });

package/lib/components/pisellRecordBoard/shellFrame/shellFrameFloorMap.less

@@ -0,0 +1,25 @@
+/** 平面图区域：画布 + 悬浮层共用，便于底部按钮叠在画布上 */
+.pisell-record-board-floor-map-viewport {
+  box-sizing: border-box;
+}
+
+/**
+ * 画布内底部居中悬浮插槽（如「编辑平面图」）。
+ * 容器不接收指针事件，避免挡画布拖拽/缩放；子节点恢复可点。
+ */
+.pisell-record-board-floor-map-floating-slot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  /* 高于 PisellFloorMapLayout 内 ViewControls(20)，避免与左下角控件叠次序模糊 */
+  z-index: 25;
+
+  > * {
+    pointer-events: auto;
+  }
+}

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

@@ -204,6 +204,10 @@ export interface RecordBoardContextValue {
     defaultBodyView?: RecordBoardBodyView;
     /** 挂到 ShellFrame 内 PisellFloorMapLayout，供外部 imperative 调用（如 saveLayout / fitBounds） */
     floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
+    /**
+     * 平面图视图下叠在画布内的底部居中悬浮区（如「编辑平面图」），不单独占一行 footer。
+     */
+    floorMapFooter?: ReactNode;
 }
 /**
  * 各 layout 下子组件的可选透传配置（类似 ChildComponentProps）
@@ -370,6 +374,8 @@ export interface RecordBoardProps {
     bodyViewStorageKey?: string;
     /** 平面图 Layout 实例 ref，由 ShellFrame 注入 */
     floorMapLayoutRef?: Ref<PisellFloorMapLayoutRef | null>;
+    /** 平面图画布内底部悬浮插槽（如编辑入口），注入 Context 供 ShellFrame 渲染 */
+    floorMapFooter?: ReactNode;
     /** 其他 */
     [key: string]: any;
 }

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -53,6 +53,7 @@ function PisellReservationScheduleBand(props) {
     timeNavigatorProps,
     scheduleStartSlot,
     scheduleEndSlot,
+    scheduleAfterDateSlot,
     className,
     style
   } = props;
@@ -108,7 +109,7 @@ function PisellReservationScheduleBand(props) {
         onChange: handleDateChange,
         ...scheduleProps
       }
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-end" }, scheduleEndSlot)),
+    ), scheduleAfterDateSlot ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-after-date" }, scheduleAfterDateSlot) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-slot-end" }, scheduleEndSlot)),
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-reservation-schedule-band-navigator" }, /* @__PURE__ */ import_react.default.createElement(
       import_pisellTimeNavigator.PisellTimeNavigator,
       {

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: stretch;
   width: 100%;
-  gap: 12px;
+  gap: 0;
   box-sizing: border-box;
 }
 
@@ -40,7 +40,24 @@
   justify-self: center;
   min-width: 0;
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
   justify-content: center;
+  gap: 8px;
+}
+
+/** 日程组件根节点默认 width:100%，在中间栏会与「日期右侧」插槽分两行；此处收窄为内容宽，保证与 after-date 同一行 */
+.pisell-reservation-schedule-band-schedule > .pisell-reservation-schedule {
+  width: auto;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.pisell-reservation-schedule-band-after-date {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .pisell-reservation-schedule-band-navigator {

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

@@ -40,6 +40,10 @@ export interface PisellReservationScheduleBandProps {
      * 顶栏日程行：PisellReservationSchedule 右侧自定义内容（如状态、主按钮）
      */
     scheduleEndSlot?: ReactNode;
+    /**
+     * 顶栏日程行：紧挨在选日组件之后（如「跟随当前」），与中间列同一 flex 区
+     */
+    scheduleAfterDateSlot?: ReactNode;
     className?: string;
     style?: CSSProperties;
 }

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -48,6 +48,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;
 function PisellTimeNavigator(props) {
   var _a, _b;
   const {
@@ -77,7 +78,9 @@ function PisellTimeNavigator(props) {
     locale,
     timeFormat = "HH:mm",
     renderNowButton,
-    onUserInteraction
+    onUserInteraction,
+    densitySeries: densitySeriesProp,
+    loadDensity: loadDensityProp
   } = props;
   const context = (0, import_useEngineContext.default)();
   import_utils2.locales.init(
@@ -91,6 +94,38 @@ function PisellTimeNavigator(props) {
   }, [referenceDateProp]);
   const referenceDate = referenceDateFromProp ?? (0, import_dayjs.default)().startOf("day");
   const isHorizontal = orientation === "horizontal";
+  const referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format("YYYY-MM-DD") : (0, import_dayjs.default)().format("YYYY-MM-DD");
+  const [densityLoaded, setDensityLoaded] = (0, import_react.useState)();
+  const densityReqId = (0, import_react.useRef)(0);
+  const densityGradientId = (0, import_react.useMemo)(
+    () => `pisell-time-density-fill-${Math.random().toString(36).slice(2, 8)}`,
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (densitySeriesProp !== void 0) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    if (!loadDensityProp) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    const req = ++densityReqId.current;
+    let cancelled = false;
+    setDensityLoaded(void 0);
+    const refDay = (0, import_dayjs.default)(referenceDayKey).startOf("day");
+    void loadDensityProp({ referenceDate: refDay, stepMinutes }).then((arr) => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(Array.isArray(arr) ? arr : []);
+    }).catch(() => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(void 0);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [referenceDayKey, stepMinutes, loadDensityProp, densitySeriesProp]);
+  const resolvedDensity = densitySeriesProp !== void 0 ? densitySeriesProp : densityLoaded;
   const isAxisMoves = cursorMode === "axis-moves";
   const [viewportSize, setViewportSize] = (0, import_react.useState)({ w: 0, h: 0 });
   const viewportWrapRef = (0, import_react.useRef)(null);
@@ -122,10 +157,7 @@ function PisellTimeNavigator(props) {
     const reserve = showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0;
     const usable = Math.max(40, vpW - reserve - 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(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
   }, [
     isHorizontal,
     isAxisMoves,
@@ -140,6 +172,48 @@ function PisellTimeNavigator(props) {
     orientation,
     cellSizePx
   });
+  const horizontalDensityCurve = (0, import_react.useMemo)(() => {
+    if (!isHorizontal || !(resolvedDensity == null ? void 0 : resolvedDensity.length)) return null;
+    const ticksN = axis.ticks.length;
+    const n = Math.min(resolvedDensity.length, ticksN);
+    if (n < 2) return null;
+    const slice = resolvedDensity.slice(0, n);
+    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 points = slice.map((v, i) => {
+      const x = i * cellSizePx + cellSizePx / 2;
+      const t = (v - minV) / span;
+      const y = h - 1 - t * (h - 3);
+      return { x, y };
+    });
+    const first = points[0];
+    const last = points[points.length - 1];
+    let linePath = `M ${first.x} ${first.y}`;
+    for (let i = 0; i < points.length - 1; i += 1) {
+      const p0 = points[i];
+      const p1 = points[i + 1];
+      const cx = (p0.x + p1.x) / 2;
+      const cy = (p0.y + p1.y) / 2;
+      linePath += ` Q ${p0.x} ${p0.y} ${cx} ${cy}`;
+    }
+    linePath += ` T ${last.x} ${last.y}`;
+    const areaPath = `${linePath} L ${last.x} ${h} L ${first.x} ${h} Z`;
+    return {
+      points,
+      linePath,
+      areaPath,
+      h,
+      w: axis.totalLengthPx
+    };
+  }, [
+    isHorizontal,
+    resolvedDensity,
+    axis.ticks,
+    axis.totalLengthPx,
+    cellSizePx
+  ]);
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
     const v = valueProp ?? defaultValue;
@@ -181,6 +255,39 @@ function PisellTimeNavigator(props) {
   const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
   const axisStartMarginW = isHorizontal && !isAxisMoves ? 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;
+    const minHeight = 48;
+    if (isAxisMoves) {
+      const natural2 = axis.totalLengthPx + (effectiveViewportW - cellSizePx);
+      if (!showNowButton) {
+        return {
+          width: "100%",
+          minWidth: natural2,
+          minHeight,
+          boxSizing: "border-box"
+        };
+      }
+      return { width: natural2, minHeight };
+    }
+    const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+    if (!showNowButton) {
+      return {
+        width: "100%",
+        minWidth: natural,
+        minHeight,
+        boxSizing: "border-box"
+      };
+    }
+    return { width: natural, minHeight };
+  }, [
+    isHorizontal,
+    isAxisMoves,
+    axis.totalLengthPx,
+    effectiveViewportW,
+    cellSizePx,
+    showNowButton
+  ]);
   const handleScroll = (0, import_react.useCallback)(
     (data) => {
       if (scrollToCenterInProgressRef.current) return;
@@ -577,13 +684,7 @@ function PisellTimeNavigator(props) {
               "div",
               {
                 className: "pisell-time-navigator-axis-wrap",
-                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
-                } : {
+                style: isHorizontal ? horizontalAxisWrapStyle ?? { minHeight: 48 } : {
                   width: "100%"
                   /* 不设 height，由轴（marginTop + 内容 + marginBottom）自然撑开，避免固定高度与 margin 的 CSS 盒模型歧义 */
                 }
@@ -628,6 +729,70 @@ function PisellTimeNavigator(props) {
                     businessHoursPx
                   }
                 ),
+                horizontalDensityCurve ? /* @__PURE__ */ import_react.default.createElement(
+                  "svg",
+                  {
+                    className: "pisell-time-navigator-density-layer",
+                    width: horizontalDensityCurve.w,
+                    height: horizontalDensityCurve.h,
+                    viewBox: `0 0 ${horizontalDensityCurve.w} ${horizontalDensityCurve.h}`,
+                    preserveAspectRatio: "none",
+                    "aria-hidden": true
+                  },
+                  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement(
+                    "linearGradient",
+                    {
+                      id: densityGradientId,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1"
+                    },
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.32"
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.02"
+                      }
+                    )
+                  )),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.areaPath,
+                      fill: `url(#${densityGradientId})`
+                    }
+                  ),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.linePath,
+                      fill: "none",
+                      stroke: "#ff8a4a",
+                      strokeWidth: 1.8,
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ),
+                  horizontalDensityCurve.points.map((p, i) => /* @__PURE__ */ import_react.default.createElement(
+                    "circle",
+                    {
+                      key: i,
+                      cx: p.x,
+                      cy: p.y,
+                      r: 1.4,
+                      fill: "#ff8a4a"
+                    }
+                  ))
+                ) : null,
                 /* @__PURE__ */ import_react.default.createElement(
                   import_components.ScaleLayer,
                   {