@pisell/materials 6.11.20 → 6.11.21

package/es/components/filter/components/items/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const fieldMaps: {
     text: {
         field: {
@@ -6,8 +7,8 @@ export declare const fieldMaps: {
             field_type: string;
             default_value: string;
         };
-        Preview: (props: any) => import("react").JSX.Element;
-        Editor: () => import("react").JSX.Element;
+        Preview: (props: any) => JSX.Element;
+        Editor: () => JSX.Element;
     };
 };
 export declare const fieldList: {
@@ -23,8 +24,8 @@ export declare const getFieldByType: (type: string) => {
         field_type: string;
         default_value: string;
     };
-    Preview: (props: any) => import("react").JSX.Element;
-    Editor: () => import("react").JSX.Element;
+    Preview: (props: any) => JSX.Element;
+    Editor: () => JSX.Element;
 };
 declare const _default: {
     text: {
@@ -34,8 +35,8 @@ declare const _default: {
             field_type: string;
             default_value: string;
         };
-        Preview: (props: any) => import("react").JSX.Element;
-        Editor: () => import("react").JSX.Element;
+        Preview: (props: any) => JSX.Element;
+        Editor: () => JSX.Element;
     };
 };
 export default _default;

package/es/components/filter/components/items/text/Editor/index.d.ts

@@ -1,2 +1,3 @@
-declare const Text: () => import("react").JSX.Element;
+/// <reference types="react" />
+declare const Text: () => JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/Preview/index.d.ts

@@ -1,2 +1,3 @@
-declare const Text: (props: any) => import("react").JSX.Element;
+/// <reference types="react" />
+declare const Text: (props: any) => JSX.Element;
 export default Text;

package/es/components/filter/components/items/text/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     field: {
         field_icon: string;
@@ -5,7 +6,7 @@ declare const _default: {
         field_type: string;
         default_value: string;
     };
-    Preview: (props: any) => import("react").JSX.Element;
-    Editor: () => import("react").JSX.Element;
+    Preview: (props: any) => JSX.Element;
+    Editor: () => JSX.Element;
 };
 export default _default;

package/es/components/filter/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { FilterProps } from "./types";
-declare const Filter: (props: FilterProps) => React.JSX.Element | null;
+declare const Filter: (props: FilterProps) => JSX.Element | null;
 export default Filter;

package/es/components/list/index.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import "./index.less";
 declare const List: {
-    (props: any): React.JSX.Element;
+    (props: any): JSX.Element;
     Item: import("antd/es/list/Item").ListItemTypeProps;
 };
 export default List;

package/es/components/lowCodePage/index.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare type LowCodePageProps = {
     id: number;
 };
-declare const LowCodePage: (props: LowCodePageProps) => React.JSX.Element;
+declare const LowCodePage: (props: LowCodePageProps) => JSX.Element;
 export default LowCodePage;

package/es/components/page-header/index.d.ts

@@ -10,5 +10,5 @@ interface PageHeaderProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const PageHeader: (props: PageHeaderProps) => React.JSX.Element | null;
+declare const PageHeader: (props: PageHeaderProps) => JSX.Element | null;
 export default PageHeader;

package/es/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { InputNumberProps } from 'antd/es/input-number';
 export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
     value?: number;
@@ -6,5 +6,5 @@ export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps
     defaultValue?: number;
     onChange?: (val: number) => void;
 }
-declare const PisellAdjustPriceInputNumber: (props: PisellAdjustPriceInputNumberProps) => React.JSX.Element;
+declare const PisellAdjustPriceInputNumber: (props: PisellAdjustPriceInputNumberProps) => JSX.Element;
 export default PisellAdjustPriceInputNumber;

package/es/components/pisellAlert/index.d.ts

@@ -18,5 +18,5 @@ export interface PisellAlertProps extends AlertProps {
  * @param props
  * @constructor
  */
-declare const PisellAlert: (props: PisellAlertProps) => false | React.JSX.Element;
+declare const PisellAlert: (props: PisellAlertProps) => false | JSX.Element;
 export default PisellAlert;

package/es/components/pisellCard/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { CardProps } from 'antd';
 import './index.less';
 export interface PisellCardProps extends CardProps {
@@ -16,5 +16,5 @@ export interface PisellCardProps extends CardProps {
  * @param props
  * @constructor
  */
-declare const PisellCard: (props: PisellCardProps) => React.JSX.Element;
+declare const PisellCard: (props: PisellCardProps) => JSX.Element;
 export default PisellCard;

package/es/components/pisellCountdown/index.d.ts

@@ -20,5 +20,5 @@ export declare type PisellCountdownProps = React.HTMLAttributes<HTMLSpanElement>
     /** 格式化倒计时展示 参考 dayjs */
     format?: string;
 };
-declare const PisellCountdown: (props: PisellCountdownProps) => React.JSX.Element;
+declare const PisellCountdown: (props: PisellCountdownProps) => JSX.Element;
 export default PisellCountdown;

package/es/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts

@@ -1,5 +1,5 @@
 declare const useDataSourceKey: () => {
-    dataSourceKey: string | undefined;
-    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
+    dataSourceKey: string | import("../../dataSourceComponents/provider/dataSource/DataSourceContext").DataSourceType | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | import("../../dataSourceComponents/provider/dataSource/DataSourceContext").DataSourceType | undefined>;
 };
 export default useDataSourceKey;

package/es/components/pisellDataSourceContainer/provider/HandleActions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DataSourceContainerProps, HandleActionContextType } from '../type';
 export declare const HandleActionContext: React.Context<HandleActionContextType | null>;
-export declare const HandleActionsProvider: (props: DataSourceContainerProps) => React.JSX.Element;
+export declare const HandleActionsProvider: (props: DataSourceContainerProps) => JSX.Element;
 export declare const useHandleActionProvider: () => HandleActionContextType;

package/es/components/pisellDatePicker/datePickerCpt.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { PickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { Dayjs } from 'dayjs';
 import './detePickerCpt.less';
@@ -18,5 +18,5 @@ export interface DatePickerCptProps extends PickerDateProps<Dayjs> {
  * @param props
  * @constructor
  */
-declare const DatePickerCpt: (props: DatePickerCptProps) => React.JSX.Element;
+declare const DatePickerCpt: (props: DatePickerCptProps) => JSX.Element;
 export default DatePickerCpt;

package/es/components/pisellDatePicker/index.d.ts

@@ -1,2 +1,3 @@
-declare const PisellDatePicker: (props: any) => import("react").JSX.Element;
+/// <reference types="react" />
+declare const PisellDatePicker: (props: any) => JSX.Element;
 export default PisellDatePicker;

package/es/components/pisellDraggable/components/Remove/Remove.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import { ActionProps } from '../Action';
-export declare function Remove(props: ActionProps): React.JSX.Element;
+export declare function Remove(props: ActionProps): JSX.Element;

package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts

@@ -5,5 +5,5 @@ interface Props extends TreeItemProps {
     id: UniqueIdentifier;
     __designMode?: string;
 }
-declare const _default: React.MemoExoticComponent<({ id, depth, ...props }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ id, depth, ...props }: Props) => JSX.Element>;
 export default _default;

package/es/components/pisellDraggable/index.d.ts

@@ -30,6 +30,6 @@ interface Props {
     /** 自定义拖拽判断函数，返回false时阻止拖拽 */
     canDrop?: (dragItem: FlattenedItem, dropTarget: FlattenedItem, parentId: UniqueIdentifier | null, parentNode: any) => boolean;
 }
-export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, maxLevel, canDrop, }: Props): React.JSX.Element;
-declare const Demo: (props: Props) => React.JSX.Element;
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, maxLevel, canDrop, }: Props): JSX.Element;
+declare const Demo: (props: Props) => JSX.Element;
 export default Demo;

package/es/components/pisellDropSort/components/SortableItem/index.d.ts

@@ -22,5 +22,5 @@ interface SortableItemProps {
     /** 获取item样式 */
     getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
 }
-declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
+declare const SortableItem: (props: SortableItemProps) => JSX.Element;
 export default SortableItem;

package/es/components/pisellFloatingPanel/index.d.ts

@@ -13,5 +13,5 @@ export interface PisellFloatingPanelProps {
     style?: React.CSSProperties;
     retractIconStyle?: React.CSSProperties;
 }
-declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => React.JSX.Element;
+declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => JSX.Element;
 export default PisellFloatingPanel;

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -17,7 +17,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 import React, { useMemo, useRef, useImperativeHandle, useCallback, useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { theme } from 'antd';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import MapLayer from "./components/MapLayer";
 import ItemLayer from "./components/ItemLayer";
@@ -85,7 +85,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     floorMapFullscreenMode = p.floorMapFullscreenMode,
     showDataSourceRecordFormBlock = p.showDataSourceRecordFormBlock,
     floorMapViewportOverlay = p.floorMapViewportOverlay,
-    canvasTabsBarTrailing = p.canvasTabsBarTrailing;
+    canvasTabsBarTrailing = p.canvasTabsBarTrailing,
+    viewportDockTrailing = p.viewportDockTrailing;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var isFloorMapView = Boolean(floorMapConfigProp);
   var contentOffsetRef = useRef({
     x: 0,
@@ -128,7 +131,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     editPanelParams = edit.editPanelParams,
     placeOverlayClass = edit.placeOverlayClass,
     isLayoutDirty = edit.isLayoutDirty,
-    toggleDraftCanvasShowGrid = edit.toggleDraftCanvasShowGrid;
+    toggleDraftCanvasShowGrid = edit.toggleDraftCanvasShowGrid,
+    toggleSelectedLayoutLock = edit.toggleSelectedLayoutLock,
+    duplicateSelectedElement = edit.duplicateSelectedElement,
+    deleteSelectedElement = edit.deleteSelectedElement;
   var effectiveMapLayer = useMemo(function () {
     var _canvas$mapLayer;
     if (!isFloorMapView || !config || !currentCanvasId) {
@@ -157,30 +163,56 @@ function PisellFloorMapLayoutInner(props, ref) {
   var engineCtx = useEngineContext();
   var engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || 'zh-CN';
   var hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
+  var enabledCanvasCount = useMemo(function () {
+    return canvasesForTabs.filter(function (c) {
+      return c.enabled;
+    }).length;
+  }, [canvasesForTabs]);
   var showReadModeCanvasTabsBar = useMemo(function () {
     if (!isFloorMapView || mode !== 'read' || !config) return false;
     if (hasCanvasTabsBarTrailing) return true;
-    return canvasesForTabs.filter(function (c) {
-      return c.enabled;
-    }).length > 1;
-  }, [isFloorMapView, mode, config, canvasesForTabs, hasCanvasTabsBarTrailing]);
+    return enabledCanvasCount > 1;
+  }, [isFloorMapView, mode, config, hasCanvasTabsBarTrailing, enabledCanvasCount]);
   var readCanvasTabsAriaLabel = useMemo(function () {
     initFloorMapLayoutLocales(engineLocale);
     return locales.getText('pisell-floor-map-layout.read-canvas-tabs.aria');
   }, [engineLocale]);
-  var readCanvasTabsFsLabels = useMemo(function () {
-    initFloorMapLayoutLocales(engineLocale);
-    return {
-      fsEnterAria: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-enter-aria'),
-      fsEnterTitle: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-enter-title'),
-      fsExitAria: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-exit-aria'),
-      fsExitTitle: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-exit-title')
-    };
-  }, [engineLocale]);
+
+  /** 编辑态始终保留顶栏 Tab（单画布也要能「添加画布」）；仅阅读态在单画布时可隐藏 Tab 行 */
+  var showEditCompactTopBar = isFloorMapView && mode === 'edit' && Boolean(config) && !useFullTopChrome;
   var loadingLabel = useMemo(function () {
     initFloorMapLayoutLocales(engineLocale);
     return locales.getText('pisell-floor-map-layout.loading');
   }, [engineLocale]);
+
+  /** 选中图元旁：锁定（与侧栏同字段）/ 复制 / 删除；锁定时不展开右侧属性面板 */
+  var editQuickBar = useMemo(function () {
+    if (!isFloorMapView || mode !== 'edit' || !(config !== null && config !== void 0 && config.canvasUi.canEdit) || !selectedId) {
+      return null;
+    }
+    initFloorMapLayoutLocales(engineLocale);
+    var row = items.find(function (i) {
+      return i.id === selectedId;
+    });
+    if (!(row !== null && row !== void 0 && row._sceneElement)) return null;
+    return {
+      labels: {
+        lock: locales.getText('pisell-floor-map-layout.edit-quick.lock'),
+        unlock: locales.getText('pisell-floor-map-layout.edit-quick.unlock'),
+        duplicate: locales.getText('pisell-floor-map-layout.edit-quick.duplicate'),
+        delete: locales.getText('pisell-floor-map-layout.edit-quick.delete'),
+        popTitle: locales.getText('pisell-floor-map-layout.edit-panel.pop-title'),
+        popDesc: locales.getText('pisell-floor-map-layout.edit-panel.pop-desc'),
+        cancel: locales.getText('pisell-floor-map-layout.edit-panel.btn-cancel'),
+        okDelete: locales.getText('pisell-floor-map-layout.edit-panel.btn-ok-delete'),
+        ariaToolbar: locales.getText('pisell-floor-map-layout.edit-quick.aria-toolbar')
+      },
+      isLocked: Boolean(row._sceneElement.layoutTransformLocked),
+      onToggleLock: toggleSelectedLayoutLock,
+      onDuplicate: duplicateSelectedElement,
+      onDelete: deleteSelectedElement
+    };
+  }, [isFloorMapView, mode, config === null || config === void 0 ? void 0 : config.canvasUi.canEdit, selectedId, items, engineLocale, toggleSelectedLayoutLock, duplicateSelectedElement, deleteSelectedElement]);
   var cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : DEFAULT_CELL_SIZE;
   var itemGap = useMemo(function () {
     return gapToPx(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap);
@@ -221,15 +253,15 @@ function PisellFloorMapLayoutInner(props, ref) {
   /** 编辑态全屏策略：toggle 可切换；locked 始终全屏顶栏且不可在组件内退出；disabled 无全屏按钮 */
   var fsMode = floorMapFullscreenMode !== null && floorMapFullscreenMode !== void 0 ? floorMapFullscreenMode : 'toggle';
   var useFullTopChrome = isFloorMapView && mode === 'edit' && (fsMode === 'locked' || fsMode === 'toggle' && isFullscreen);
-  /** 仅 toggle 时向顶栏/控件传入，避免 locked/disabled 误显全屏按钮 */
-  var editToggleFullscreen = fsMode === 'toggle' ? toggleFullscreen : undefined;
-  var readToggleFullscreen = isFloorMapView && mode === 'read' && fsMode === 'toggle' ? toggleFullscreen : undefined;
+  /** toggle 时左下 Dock 展示全屏；locked/disabled 不传 API */
+  var dockToggleFullscreen = isFloorMapView && fsMode === 'toggle' ? toggleFullscreen : undefined;
   var viewControlsConfig = useMemo(function () {
-    if (!isFloorMapView || mode !== 'edit') return controls;
+    var _controls$showFullscr;
+    if (!isFloorMapView) return controls;
     return _objectSpread(_objectSpread({}, controls), {}, {
-      showFullscreen: false
+      showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen)
     });
-  }, [isFloorMapView, mode, controls]);
+  }, [isFloorMapView, controls, dockToggleFullscreen]);
   var topBarExtraActions = null;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -334,16 +366,35 @@ function PisellFloorMapLayoutInner(props, ref) {
     };
   }, [fitBounds, handleSave]);
   var showSidebar = isFloorMapView && mode === 'edit' && config && dataSources;
+
+  /** 右侧属性面板打开时给画布区留空，避免落点被挡在面板下 */
+  var editPanelVisible = isFloorMapView && mode === 'edit' && Boolean(editPanelParams) && Boolean(config) && Boolean(dataSources);
+
+  /**
+   * 在 map-area 上统一处理「点空白取消选中」：空白点击常落在 Transform 的 wrapper/content 上，
+   * 不会冒泡到 EditableItemLayer 根节点；图元内点击由 EditableItemLayer stopPropagation，避免误清。
+   */
+  var handleMapAreaBackgroundClick = useCallback(function (e) {
+    if (!isFloorMapView || mode !== 'edit') return;
+    var t = e.target;
+    if (t.closest(".".concat(PREFIX, "-editable-item"))) return;
+    if (t.closest(".".concat(PREFIX, "-edit-panel-wrap"))) return;
+    if (t.closest(".".concat(PREFIX, "-view-controls"))) return;
+    if (t.closest(".".concat(PREFIX, "-viewport-overlay"))) return;
+    if (t.closest(".".concat(PREFIX, "-place-overlay"))) return;
+    if (t.closest(".".concat(PREFIX, "-map-drop-layer"))) return;
+    setSelectedId(null);
+  }, [isFloorMapView, mode, setSelectedId]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: classNames(PREFIX, className, _defineProperty(_defineProperty({}, "".concat(PREFIX, "-floor-map-view"), isFloorMapView), "".concat(PREFIX, "-mode-edit"), isFloorMapView && mode === 'edit')),
-    style: _objectSpread(_objectSpread({
+    style: _objectSpread(_objectSpread(_objectSpread({
       display: 'flex',
       flexDirection: 'column'
     }, isFloorMapView ? {
       minHeight: 0
-    } : {}), style)
-  }, isFloorMapView && mode === 'edit' && config && !useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
+    } : {}), isFloorMapView ? _defineProperty({}, '--fmap-primary', token.colorPrimary) : {}), style)
+  }, showEditCompactTopBar && !useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
     mode: "compact",
     config: config,
     canvases: canvasesForTabs,
@@ -356,8 +407,6 @@ function PisellFloorMapLayoutInner(props, ref) {
     onAddCanvas: handleAddCanvas,
     onRemoveCanvas: handleRemoveCanvas,
     onRenameCanvas: handleRenameCanvas,
-    toggleFullscreen: editToggleFullscreen,
-    isFullscreen: false,
     controls: controls,
     canvasTabsBarTrailing: canvasTabsBarTrailing
   }), isFloorMapView && mode === 'edit' && config && useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
@@ -377,7 +426,6 @@ function PisellFloorMapLayoutInner(props, ref) {
     saving: saving,
     saveError: saveError,
     layoutDirty: isLayoutDirty,
-    toggleFullscreen: editToggleFullscreen,
     isFullscreen: isFullscreen,
     controls: controls,
     extraActions: topBarExtraActions,
@@ -397,17 +445,9 @@ function PisellFloorMapLayoutInner(props, ref) {
     },
     canEdit: false,
     className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
-  })), hasCanvasTabsBarTrailing || readToggleFullscreen ? /*#__PURE__*/React.createElement("div", {
+  })), hasCanvasTabsBarTrailing ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar-actions")
-  }, canvasTabsBarTrailing, readToggleFullscreen ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
-    onClick: function onClick() {
-      return readToggleFullscreen();
-    },
-    "aria-label": isFullscreen ? readCanvasTabsFsLabels.fsExitAria : readCanvasTabsFsLabels.fsEnterAria,
-    title: isFullscreen ? readCanvasTabsFsLabels.fsExitTitle : readCanvasTabsFsLabels.fsEnterTitle
-  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null) : null), loading && /*#__PURE__*/React.createElement("div", {
+  }, canvasTabsBarTrailing) : null), loading && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-loading")
   }, /*#__PURE__*/React.createElement("span", null, loadingLabel)), saveError && !(isFloorMapView && mode === 'edit' && config) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-save-error")
@@ -434,7 +474,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       height: 120
     },
     decorationPreviewSize: 48,
-    onSave: onSave && config.canvasUi.canEdit && (!useFullTopChrome && toolbarShowSave !== false || useFullTopChrome && isFullscreen) ? handleSave : undefined,
+    onSave: onSave && config.canvasUi.canEdit && !useFullTopChrome && toolbarShowSave !== false ? handleSave : undefined,
     saving: saving,
     saveError: saveError,
     layoutDirty: isLayoutDirty,
@@ -442,13 +482,14 @@ function PisellFloorMapLayoutInner(props, ref) {
     consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
   }), /*#__PURE__*/React.createElement("div", {
     ref: mapAreaRef,
-    className: showSidebar ? "".concat(PREFIX, "-map-area") : undefined,
+    className: classNames(showSidebar && "".concat(PREFIX, "-map-area"), editPanelVisible && "".concat(PREFIX, "-map-area--edit-panel-inset")),
     style: {
       flex: 1,
       position: 'relative',
       minWidth: 0,
       overflow: 'hidden'
     },
+    onClick: handleMapAreaBackgroundClick,
     onDragEnter: function onDragEnter(e) {
       if (!isFloorMapView || mode !== 'edit') return;
       if (!isFloorMapPaletteDrag(e.dataTransfer)) return;
@@ -477,6 +518,12 @@ function PisellFloorMapLayoutInner(props, ref) {
     initialPositionY: initialPositionY,
     minScale: zoomConfig.minScale,
     maxScale: zoomConfig.maxScale
+    /**
+     * 库默认 limitToBounds=true，平移会被限制在内容包盒内。
+     * pan.boundary === 'none' 时关闭限制，可一直拖动画布（视觉上类似无限大底图）。
+     * 'clamp' / 'bounce' / 未传：保持限制（与历史行为一致）。
+     */,
+    limitToBounds: pan.boundary !== 'none'
     // v3 类型定义未包含 step，库仍支持缩放步进时使用
     ,
     step: zoomConfig.step,
@@ -538,7 +585,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       snapStep: (_effectiveMapLayer$sn = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.snapStep) !== null && _effectiveMapLayer$sn !== void 0 ? _effectiveMapLayer$sn : 0,
       scale: scale,
       onInteractionChange: setIsInteractingWithElement,
-      getMergedItemWrapperStyle: getMergedItemWrapperStyle
+      getMergedItemWrapperStyle: getMergedItemWrapperStyle,
+      editQuickBar: editQuickBar
     }) : /*#__PURE__*/React.createElement(ItemLayer, {
       items: items,
       renderItem: effectiveRenderItem,
@@ -551,6 +599,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       contentOffsetX: contentOffsetX,
       contentOffsetY: contentOffsetY,
       enableHover: enableHover,
+      itemHoverOutline: true,
       onItemClick: handleItemClick,
       onItemHover: onItemHover,
       onItemLeave: onItemLeave,
@@ -580,9 +629,12 @@ function PisellFloorMapLayoutInner(props, ref) {
       scale: scale,
       isFullscreen: isFullscreen,
       fitBounds: fitBounds,
-      toggleFullscreen: editToggleFullscreen,
+      toggleFullscreen: dockToggleFullscreen,
       mapGridVisible: Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
-      onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : undefined
+      onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : undefined,
+      dockChrome: isFloorMapView,
+      dockExpandedTrailing: viewportDockTrailing,
+      autoCollapseDockMs: 10000
     }), isFloorMapView && floorMapViewportOverlay != null ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-viewport-overlay")
     }, typeof floorMapViewportOverlay === 'function' ? floorMapViewportOverlay({

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -70,8 +70,10 @@
     &-active {
       pointer-events: auto;
       z-index: 100;
-      box-shadow: inset 0 0 0 2px #1677ff;
-      background: rgba(22, 119, 255, 0.06);
+      box-shadow: inset 0 0 0 2px var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 6%,
+      transparent);
     }
   }
 
@@ -89,4 +91,14 @@
       pointer-events: auto;
     }
   }
+
+  /** 编辑态：画布区域（含 Transform）为右侧 FloorMapEditPanel 预留宽度 */
+
+  &-map-area {
+    box-sizing: border-box;
+
+    &--edit-panel-inset {
+      padding-right: 336px;
+    }
+  }
 }

package/es/components/pisellFloorMapLayout/components/CanvasTabs.d.ts

@@ -1,9 +1,4 @@
-/**
- * CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
- * - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
- * - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
- */
-import React from 'react';
+/// <reference types="react" />
 import type { FloorMapCanvas, FloorMapCanvasNameI18n } from '../types';
 import './CanvasTabs.less';
 export interface CanvasTabsProps {
@@ -23,5 +18,5 @@ export interface CanvasTabsProps {
     onRenameCanvas?: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
     className?: string;
 }
-export declare function CanvasTabs(props: CanvasTabsProps): React.JSX.Element;
+export declare function CanvasTabs(props: CanvasTabsProps): JSX.Element;
 export default CanvasTabs;

package/es/components/pisellFloorMapLayout/components/CanvasTabs.less

@@ -34,14 +34,14 @@
     }
 
     &-active {
-      color: #1677ff;
+      color: var(--fmap-primary, #1677ff);
       font-weight: 600;
       background: #fff;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
       0 0 0 1px rgba(0, 0, 0, 0.04);
 
       &:hover {
-        color: #1677ff;
+        color: var(--fmap-primary, #1677ff);
         background: #fff;
       }
     }
@@ -55,7 +55,7 @@
       color: rgba(0, 0, 0, 0.45);
 
       .pisell-floor-map-layout-canvas-tabs-tab-active & {
-        color: rgba(22, 119, 255, 0.85);
+        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);
       }
     }
 
@@ -68,14 +68,14 @@
       line-height: 1.4;
       color: #262626;
       background: #fff;
-      border: 1px solid #1677ff;
+      border: 1px solid var(--fmap-primary, #1677ff);
       border-radius: 6px;
       outline: none;
       box-sizing: border-box;
 
       &:focus {
-        border-color: #1677ff;
-        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+        border-color: var(--fmap-primary, #1677ff);
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--fmap-primary, #1677ff) 20%, transparent);
       }
     }
 
@@ -100,19 +100,19 @@
       -webkit-tap-highlight-color: transparent;
 
       &:hover {
-        color: #1677ff;
-        background: rgba(22, 119, 255, 0.08);
+        color: var(--fmap-primary, #1677ff);
+        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 8%, transparent);
       }
 
       &:active {
-        background: rgba(22, 119, 255, 0.14);
+        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 14%, transparent);
       }
 
       .pisell-floor-map-layout-canvas-tabs-tab-active & {
-        color: rgba(22, 119, 255, 0.85);
+        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);
 
         &:hover {
-          color: #1677ff;
+          color: var(--fmap-primary, #1677ff);
         }
       }
     }
@@ -161,9 +161,9 @@
     padding: 7px 12px;
     font-size: 13px;
     font-weight: 500;
-    color: #1677ff;
+    color: var(--fmap-primary, #1677ff);
     background: rgba(255, 255, 255, 0.7);
-    border: 1px dashed rgba(22, 119, 255, 0.35);
+    border: 1px dashed color-mix(in srgb, var(--fmap-primary, #1677ff) 35%, transparent);
     border-radius: 8px;
     cursor: pointer;
     transition: color 0.2s,

package/es/components/pisellFloorMapLayout/components/EditableItemLayer.d.ts

@@ -3,6 +3,7 @@
  */
 import React, { type CSSProperties } from 'react';
 import type { FloorMapItemBase, FloorMapMergedItem, FloorMapRenderOptions } from '../types';
+import { type FloorMapEditQuickActionLabels } from './FloorMapEditQuickActions';
 import './EditableItemLayer.less';
 export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMergedItem> {
     items: T[];
@@ -32,6 +33,14 @@ export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMer
     /** 每项外层容器额外样式（与定位样式合并） */
     getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
     className?: string;
+    /** 编辑态选中时图元旁快捷栏（上锁 / 复制 / 删除） */
+    editQuickBar?: {
+        labels: FloorMapEditQuickActionLabels;
+        isLocked: boolean;
+        onToggleLock: () => void;
+        onDuplicate: () => void;
+        onDelete: () => void;
+    } | null;
 }
-export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): React.JSX.Element;
+export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): JSX.Element;
 export default EditableItemLayer;