@pisell/materials 1.8.24 → 1.8.25

package/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -48,7 +48,10 @@ function ViewControls(props) {
     isFullscreen = false,
     className,
     mapGridVisible = false,
-    onToggleMapGrid
+    onToggleMapGrid,
+    dockChrome = false,
+    dockExpandedTrailing,
+    autoCollapseDockMs = 1e4
   } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
@@ -56,26 +59,74 @@ function ViewControls(props) {
   const showFullscreen = config.showFullscreen === true;
   const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
   const scalePercent = Math.round(scale * 100);
-  const showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomOut(),
-      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+  const showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
+  const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
+  const dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+  const showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+  const [dockExpanded, setDockExpanded] = (0, import_react.useState)(false);
+  const [dockPanelMounted, setDockPanelMounted] = (0, import_react.useState)(false);
+  const dockExpandedRef = (0, import_react.useRef)(dockExpanded);
+  dockExpandedRef.current = dockExpanded;
+  const idleTimerRef = (0, import_react.useRef)(null);
+  const clearIdleTimer = (0, import_react.useCallback)(() => {
+    if (idleTimerRef.current != null) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  }, []);
+  const scheduleDockCollapse = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) {
+      return;
+    }
+    idleTimerRef.current = setTimeout(() => {
+      setDockExpanded(false);
+      idleTimerRef.current = null;
+    }, autoCollapseDockMs);
+  }, [
+    dockChrome,
+    dockHasExpandable,
+    dockExpanded,
+    autoCollapseDockMs,
+    clearIdleTimer
+  ]);
+  (0, import_react.useEffect)(() => {
+    return () => clearIdleTimer();
+  }, [clearIdleTimer]);
+  (0, import_react.useEffect)(() => {
+    if (dockExpanded && dockHasExpandable) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, dockHasExpandable, scheduleDockCollapse]);
+  const handleDockSlideTransitionEnd = (0, import_react.useCallback)(
+    (e) => {
+      if (e.propertyName !== "max-width" || e.target !== e.currentTarget) {
+        return;
+      }
+      if (!dockExpandedRef.current) {
+        setDockPanelMounted(false);
+      }
     },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
-  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-stepper-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomIn(),
-      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-  )), showToolsCapsule && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-tools-capsule` }, showReset && /* @__PURE__ */ import_react.default.createElement(
+    []
+  );
+  const handleDockExpand = (0, import_react.useCallback)(() => {
+    setDockPanelMounted(true);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setDockExpanded(true);
+      });
+    });
+  }, []);
+  const handleDockCollapseClick = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    setDockExpanded(false);
+  }, [clearIdleTimer]);
+  const handleDockBarPointerDown = (0, import_react.useCallback)(() => {
+    if (dockExpanded && autoCollapseDockMs > 0) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, autoCollapseDockMs, scheduleDockCollapse]);
+  const renderToolButtons = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showReset ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -83,8 +134,8 @@ function ViewControls(props) {
       onClick: () => api.resetTransform(),
       "aria-label": import_utils.locales.getText(`${I18N_VC}.reset-aria`)
     },
-    "⟲"
-  ), showFitBounds && api.fitBounds && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ReloadOutlined, null)
+  ) : null, showFitBounds && api.fitBounds ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -92,8 +143,8 @@ function ViewControls(props) {
       onClick: () => api.fitBounds(),
       "aria-label": import_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`)
     },
-    "⊞"
-  ), showGridToggle && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ExpandOutlined, null)
+  ) : null, showGridToggle ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -107,7 +158,7 @@ function ViewControls(props) {
       )
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.BorderInnerOutlined, null)
-  ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
+  ) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -118,7 +169,131 @@ function ViewControls(props) {
       )
     },
     isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-  )));
+  ) : null);
+  const renderDockExpandableBarContents = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomOut(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomIn(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+  )) : null, showZoom && (showTools || hasTrailingSlot) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-bar-divider`, "aria-hidden": true }) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: handleDockCollapseClick,
+      "aria-expanded": dockExpanded,
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.collapse-tools-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
+  ));
+  if (!showBar) {
+    return null;
+  }
+  if (dockChrome && dockHasExpandable) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          `${PREFIX}-view-controls`,
+          `${PREFIX}-view-controls--dock`,
+          className
+        )
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-expand-btn`, {
+            [`${PREFIX}-view-controls-dock-expand-btn--panel-open`]: dockExpanded
+          }),
+          onClick: handleDockExpand,
+          "aria-expanded": dockExpanded,
+          "aria-hidden": dockExpanded,
+          tabIndex: dockExpanded ? -1 : 0,
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.expand-tools-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
+      ), dockPanelMounted ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-slide`, {
+            [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded
+          }),
+          onTransitionEnd: handleDockSlideTransitionEnd
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              `${PREFIX}-view-controls-bar`,
+              `${PREFIX}-view-controls-bar--dock`
+            ),
+            role: "group",
+            onPointerDown: handleDockBarPointerDown
+          },
+          renderDockExpandableBarContents()
+        )
+      ) : null)
+    );
+  }
+  const barClass = (0, import_classnames.default)(`${PREFIX}-view-controls-bar`, {
+    [`${PREFIX}-view-controls-bar--dock`]: dockChrome
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className, {
+        [`${PREFIX}-view-controls--dock`]: dockChrome
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: barClass,
+        role: "group",
+        onPointerDown: dockChrome ? handleDockBarPointerDown : void 0
+      },
+      showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomOut(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+      ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomIn(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+      )) : null,
+      !dockChrome && showTools ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}-view-controls-bar-divider`,
+          "aria-hidden": true
+        }
+      ) : null, renderToolButtons()) : null
+    )
+  );
 }
 var ViewControls_default = ViewControls;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellFloorMapLayout/components/ViewControls.less

@@ -1,87 +1,106 @@
-/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式；z-index 保证在画布之上可点击 */
+/* 左下角：缩放 + 工具同一横条，圆角矩形（非胶囊） */
 .pisell-floor-map-layout-view-controls {
+  @vc-btn-size: 32px;
+  @vc-bar-padding-y: 1px;
+  @vc-bar-padding-x: 4px;
+  @vc-bar-height: (@vc-btn-size + 2 * @vc-bar-padding-y + 2px); /* + 上下 border */
+
   position: absolute;
   left: 12px;
   bottom: 12px;
   z-index: 20;
   pointer-events: auto;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  /* Stepper：胶囊形 [减] 数值% [加] */
+  flex-direction: row;
+  align-items: center;
 
-  &-zoom-stepper {
+  &-bar {
     display: flex;
     align-items: center;
-    height: 56px;
-    padding: 0 4px;
+    flex-wrap: nowrap;
+    gap: 2px;
+    height: @vc-bar-height;
+    min-height: @vc-bar-height !important;
+    max-height: @vc-bar-height !important;
+    padding: @vc-bar-padding-y @vc-bar-padding-x;
+    box-sizing: border-box;
     background: #fff;
     border: 1px solid #98a2b3;
-    border-radius: 100px;
+    border-radius: 6px;
     box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
+    width: max-content;
+    max-width: 100%;
   }
 
-  &-zoom-stepper-btn {
-    width: 52px;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    color: #101828;
-    font-size: 18px;
-
-    &:hover {
-      background: #f2f4f7;
-      color: #101828;
-    }
+  &-bar-divider {
+    flex-shrink: 0;
+    width: 1px;
+    height: 22px;
+    margin: 0 4px;
+    background: #e4e7ec;
+    align-self: center;
   }
 
-  &-zoom-stepper-value {
-    min-width: 56px;
-    padding: 0 8px;
+  &-zoom-value {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-width: 40px;
+    height: @vc-btn-size;
+    padding: 0 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-weight: 600;
-    font-size: 18px;
-    line-height: 1;
+    font-size: 13px;
+    line-height: @vc-btn-size;
     color: #101828;
   }
 
-  /* 复位 / 区域定位 / 全屏 / 网格：与 Stepper 同系胶囊条 */
+  @vc-icon-px: 14px;
 
-  &-tools-capsule {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 4px;
-    min-height: 56px;
-    padding: 2px 6px;
-    background: #fff;
-    border: 1px solid #98a2b3;
-    border-radius: 100px;
-    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
-  }
-
-  &-tool-btn {
-    width: 52px;
-    height: 52px;
-    display: flex;
+  &-bar > &-tool-btn {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: @vc-btn-size;
+    height: @vc-btn-size;
+    min-width: @vc-btn-size;
+    min-height: @vc-btn-size !important;
+    max-width: @vc-btn-size;
+    max-height: @vc-btn-size !important;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0;
+    margin: 0;
     border: none;
-    border-radius: 50%;
+    border-radius: 4px;
     background: transparent;
     cursor: pointer;
     color: #101828;
-    font-size: 20px;
+    font-size: @vc-icon-px;
     line-height: 1;
+    appearance: none;
+    vertical-align: middle;
+
+    .anticon,
+    .pisell-lowcode-icon,
+    span[role='img'] {
+      font-size: @vc-icon-px;
+      line-height: 0;
+      vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .anticon svg,
+    .pisell-lowcode-icon svg,
+    span[role='img'] svg {
+      width: @vc-icon-px;
+      height: @vc-icon-px;
+      display: block;
+    }
 
     &:hover {
       background: #f2f4f7;
@@ -89,7 +108,7 @@
     }
   }
 
-  &-tool-btn--active {
+  &-bar > &-tool-btn--active {
     background: #fff4ed;
     color: #ff692e;
 
@@ -98,4 +117,195 @@
       color: #ff692e;
     }
   }
+
+  /* —— 平面图 Dock：折叠入口与展开横条共用同一外框高度，避免切换时跳动 —— */
+  @dock-btn-size: 42px;
+  @dock-icon-px: 18px;
+  /** 折叠按钮正方形边长 = 展开条高度（含 1px 边框的 border-box） */
+  @dock-chrome-outer: 56px;
+
+  &--dock {
+    left: 14px;
+    bottom: 14px;
+
+    /** 折叠键与可伸缩展开区同一行 */
+
+    .pisell-floor-map-layout-view-controls-dock-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+      min-height: 0;
+    }
+
+    /**
+     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content
+     */
+
+    .pisell-floor-map-layout-view-controls-dock-slide {
+      box-sizing: border-box;
+      max-width: 0;
+      overflow: hidden;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .pisell-floor-map-layout-view-controls-dock-slide--open {
+      max-width: min(90vw, 720px);
+    }
+
+    .pisell-floor-map-layout-view-controls-dock-slide .pisell-floor-map-layout-view-controls-bar--dock {
+      flex-shrink: 0;
+      width: max-content;
+      max-width: none;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock {
+      border-radius: 14px;
+      border-color: #e8eaed;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      gap: 5px;
+      box-sizing: border-box;
+      height: @dock-chrome-outer;
+      min-height: @dock-chrome-outer !important;
+      max-height: @dock-chrome-outer !important;
+      padding: 0 12px;
+      align-items: center;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn {
+      width: @dock-btn-size;
+      min-width: @dock-btn-size;
+      max-width: @dock-btn-size;
+      height: @dock-btn-size;
+      min-height: @dock-btn-size !important;
+      max-height: @dock-btn-size !important;
+      border-radius: 8px;
+      font-size: @dock-icon-px;
+      line-height: 0;
+
+      .anticon,
+      .pisell-lowcode-icon,
+      span[role='img'] {
+        font-size: @dock-icon-px !important;
+        line-height: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .anticon svg,
+      .pisell-lowcode-icon svg,
+      span[role='img'] svg {
+        width: @dock-icon-px !important;
+        height: @dock-icon-px !important;
+        display: block;
+      }
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-zoom-value {
+      min-width: 50px;
+      height: @dock-btn-size;
+      line-height: @dock-btn-size;
+      font-size: 15px;
+      padding: 0 6px;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-bar-divider {
+      height: 28px;
+      margin: 0 6px;
+    }
+  }
+
+  &-dock-expand-btn {
+    box-sizing: border-box;
+    width: @dock-chrome-outer;
+    height: @dock-chrome-outer;
+    min-width: @dock-chrome-outer;
+    min-height: @dock-chrome-outer;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e8eaed;
+    border-radius: 14px;
+    background: #fff;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    color: #101828;
+    font-size: @dock-icon-px;
+    line-height: 0;
+    appearance: none;
+    flex-shrink: 0;
+    overflow: hidden;
+    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease,
+    margin 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+
+    /** 与右侧条带同时：条带变长时入口收起为 0 宽；收起条带时入口从 0 拉回到正方形 */
+
+    &--panel-open {
+      width: 0;
+      min-width: 0;
+      max-width: 0;
+      margin: 0;
+      opacity: 0;
+      border-color: transparent;
+      box-shadow: none;
+      pointer-events: none;
+      cursor: default;
+    }
+
+    &:hover {
+      background: #f9fafb;
+    }
+
+    .anticon {
+      font-size: @dock-icon-px !important;
+      line-height: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .anticon svg {
+      width: @dock-icon-px !important;
+      height: @dock-icon-px !important;
+      display: block;
+    }
+  }
+
+  &-dock-trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 4px;
+    max-width: min(300px, 58vw);
+
+    .pisell-lowcode-btn,
+    .ant-btn {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-height: @dock-btn-size;
+      height: @dock-btn-size;
+      padding: 0 16px;
+      font-size: 14px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-slide,
+  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-expand-btn {
+    transition-duration: 0.01ms;
+  }
 }

package/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * 在 TransformWrapper 内用 useControls 拿到 zoom 控制并渲染 ViewControls，确保点击加减能缩放
+ */
+import React from 'react';
 import type { FloorMapControlsConfig } from '../types';
 export interface ViewControlsWithZoomProps {
     config?: FloorMapControlsConfig;
@@ -9,5 +12,8 @@ export interface ViewControlsWithZoomProps {
     toggleFullscreen?: () => void;
     mapGridVisible?: boolean;
     onToggleMapGrid?: () => void;
+    dockChrome?: boolean;
+    dockExpandedTrailing?: React.ReactNode;
+    autoCollapseDockMs?: number;
 }
 export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -55,7 +55,10 @@ function ViewControlsWithZoom(props) {
       scale: props.scale,
       isFullscreen: props.isFullscreen,
       mapGridVisible: props.mapGridVisible,
-      onToggleMapGrid: props.onToggleMapGrid
+      onToggleMapGrid: props.onToggleMapGrid,
+      dockChrome: props.dockChrome,
+      dockExpandedTrailing: props.dockExpandedTrailing,
+      autoCollapseDockMs: props.autoCollapseDockMs
     }
   );
 }

package/lib/components/pisellFloorMapLayout/context/FloorMapLayoutContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 平面图数据/保存等注入上下文；单独页面包 `FloorMapLayoutProvider`，RecordBoard 由 Shell 内置 Provider。
+ */
+import React from 'react';
+import type { FloorMapLayoutContextValue } from '../types';
+/**
+ * 未传 `floorMapLayoutContext` 时 Shell 使用该稳定引用，避免无意义变更引用。
+ */
+export declare const EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: FloorMapLayoutContextValue;
+export declare function useFloorMapLayoutContext(): FloorMapLayoutContextValue | undefined;
+export interface FloorMapLayoutProviderProps {
+    value: FloorMapLayoutContextValue;
+    children: React.ReactNode;
+}
+/** 注入 `FloorMapLayoutContextValue`；`value` 建议由调用方 `useMemo` 稳定化 */
+export declare function FloorMapLayoutProvider({ value, children, }: FloorMapLayoutProviderProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.d.ts

@@ -0,0 +1,5 @@
+import type { FloorMapItemBase, FloorMapLayoutContextValue, PisellFloorMapLayoutProps } from '../types';
+/**
+ * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
+ */
+export declare function mergeFloorMapLayoutPropsFromContext<T extends FloorMapItemBase>(props: PisellFloorMapLayoutProps<T>, ctx: FloorMapLayoutContextValue | undefined): PisellFloorMapLayoutProps<T>;