@pisell/materials 1.8.54 → 1.8.56

package/lib/components/pisellFloorMapLayout/components/FloorMapEdgeEditPanel.js

@@ -0,0 +1,134 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_edgeRouting = require("../utils/edgeRouting.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _pisell_utils = require("@pisell/utils");
+let antd = require("antd");
+let _ant_design_icons = require("@ant-design/icons");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+require("./FloorMapEdgeEditPanel.less");
+//#region src/components/pisellFloorMapLayout/components/FloorMapEdgeEditPanel.tsx
+/**
+* FloorMapEdgeEditPanel - 选中连线后的侧栏编辑
+*/
+const PREFIX = "pisell-floor-map-layout";
+const I18N = "pisell-floor-map-layout.edge-panel";
+const STATUS_OPTIONS = [
+	{
+		value: "online",
+		labelKey: `${I18N}.status-online`
+	},
+	{
+		value: "offline",
+		labelKey: `${I18N}.status-offline`
+	},
+	{
+		value: "warning",
+		labelKey: `${I18N}.status-warning`
+	},
+	{
+		value: "unknown",
+		labelKey: `${I18N}.status-unknown`
+	}
+];
+const ANCHOR_OPTIONS = require_edgeRouting.ANCHORS.map((a) => ({
+	value: a,
+	label: a
+}));
+function nodeLabel(config, instanceId) {
+	var _config$sceneElements, _el$name;
+	const el = ((_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : []).find((e) => e.instanceId === instanceId);
+	return (el === null || el === void 0 || (_el$name = el.name) === null || _el$name === void 0 ? void 0 : _el$name.trim()) || instanceId;
+}
+function FloorMapEdgeEditPanel(props) {
+	var _edge$sourceAnchor, _edge$targetAnchor, _edge$sourceLabel, _edge$targetLabel, _edge$label, _edge$status, _edge$color, _edge$strokeWidth;
+	const { edge, config, onUpdate, onClose, onDelete, layoutDraftDirty, className } = props;
+	const t = (0, react.useCallback)((key) => _pisell_utils.locales.getText(key), []);
+	const panelScrollRef = (0, react.useRef)(null);
+	/** 与图元编辑面板一致：下拉挂到表单项父节点，避免侧栏 overflow 裁切 */
+	const getSelectPopupContainer = (0, react.useCallback)((node) => {
+		var _ref, _node$parentElement;
+		return (_ref = (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : panelScrollRef.current) !== null && _ref !== void 0 ? _ref : document.body;
+	}, []);
+	return /* @__PURE__ */ react.default.createElement("div", {
+		ref: panelScrollRef,
+		className: (0, classnames.default)(`${PREFIX}-edge-edit-panel`, className)
+	}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edge-edit-panel-header` }, /* @__PURE__ */ react.default.createElement("span", { className: `${PREFIX}-edge-edit-panel-title` }, t(`${I18N}.title`)), /* @__PURE__ */ react.default.createElement(antd.Button, {
+		type: "text",
+		size: "large",
+		className: `${PREFIX}-edge-edit-panel-close`,
+		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.CloseOutlined, null),
+		onClick: onClose,
+		"aria-label": "close"
+	})), layoutDraftDirty ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edge-edit-panel-dirty-hint` }, t(`${I18N}.dirty-hint`)) : null, /* @__PURE__ */ react.default.createElement(antd.Form, {
+		layout: "vertical",
+		size: "large",
+		className: `${PREFIX}-edge-edit-form`
+	}, /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-node`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: nodeLabel(config, edge.sourceId),
+		disabled: true
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-node`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: nodeLabel(config, edge.targetId),
+		disabled: true
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-anchor`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
+		value: (_edge$sourceAnchor = edge.sourceAnchor) !== null && _edge$sourceAnchor !== void 0 ? _edge$sourceAnchor : "right",
+		options: ANCHOR_OPTIONS,
+		getPopupContainer: getSelectPopupContainer,
+		onChange: (v) => onUpdate({ sourceAnchor: v })
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-anchor`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
+		value: (_edge$targetAnchor = edge.targetAnchor) !== null && _edge$targetAnchor !== void 0 ? _edge$targetAnchor : "left",
+		options: ANCHOR_OPTIONS,
+		getPopupContainer: getSelectPopupContainer,
+		onChange: (v) => onUpdate({ targetAnchor: v })
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: (_edge$sourceLabel = edge.sourceLabel) !== null && _edge$sourceLabel !== void 0 ? _edge$sourceLabel : "",
+		onChange: (e) => onUpdate({ sourceLabel: e.target.value }),
+		placeholder: "G3/WAN"
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: (_edge$targetLabel = edge.targetLabel) !== null && _edge$targetLabel !== void 0 ? _edge$targetLabel : "",
+		onChange: (e) => onUpdate({ targetLabel: e.target.value })
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.center-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: (_edge$label = edge.label) !== null && _edge$label !== void 0 ? _edge$label : "",
+		onChange: (e) => onUpdate({ label: e.target.value })
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.status`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
+		value: (_edge$status = edge.status) !== null && _edge$status !== void 0 ? _edge$status : "unknown",
+		options: STATUS_OPTIONS.map((o) => ({
+			value: o.value,
+			label: t(o.labelKey)
+		})),
+		getPopupContainer: getSelectPopupContainer,
+		onChange: (v) => onUpdate({ status: v })
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.color`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
+		value: (_edge$color = edge.color) !== null && _edge$color !== void 0 ? _edge$color : "",
+		onChange: (e) => onUpdate({ color: e.target.value || void 0 }),
+		placeholder: "#12B76A"
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.stroke-width`) }, /* @__PURE__ */ react.default.createElement(antd.InputNumber, {
+		min: .5,
+		max: 8,
+		step: .5,
+		value: (_edge$strokeWidth = edge.strokeWidth) !== null && _edge$strokeWidth !== void 0 ? _edge$strokeWidth : 1.5,
+		onChange: (v) => onUpdate({ strokeWidth: v !== null && v !== void 0 ? v : void 0 }),
+		style: { width: "100%" }
+	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.dashed`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
+		value: edge.dashed ? "yes" : "no",
+		options: [{
+			value: "no",
+			label: t(`${I18N}.dashed-no`)
+		}, {
+			value: "yes",
+			label: t(`${I18N}.dashed-yes`)
+		}],
+		getPopupContainer: getSelectPopupContainer,
+		onChange: (v) => onUpdate({ dashed: v === "yes" })
+	})), onDelete ? /* @__PURE__ */ react.default.createElement(antd.Popconfirm, {
+		title: t(`${I18N}.delete-confirm`),
+		onConfirm: onDelete
+	}, /* @__PURE__ */ react.default.createElement(antd.Button, {
+		danger: true,
+		block: true,
+		size: "large"
+	}, t(`${I18N}.delete`))) : null));
+}
+//#endregion
+exports.FloorMapEdgeEditPanel = FloorMapEdgeEditPanel;

package/lib/components/pisellFloorMapLayout/components/FloorMapEdgeEditPanel.less

@@ -0,0 +1,65 @@
+/** 连线编辑侧栏：尺寸与图元 {@link FloorMapEditPanel} 对齐 */
+.pisell-floor-map-layout-edge-edit-panel {
+  width: 280px;
+  /** 未放入 edit-panel-wrap 时的兜底；wrap 内由父级 flex 限制为 100% 高度 */
+  max-height: 80vh;
+  overflow-y: auto;
+  touch-action: pan-y;
+  padding: 12px;
+  padding-bottom: calc(
+    12px + var(--fmap-viewport-dock-bottom-clearance, 78px)
+  );
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.pisell-floor-map-layout-edge-edit-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.pisell-floor-map-layout-edge-edit-panel-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+  line-height: 1.4;
+}
+
+.pisell-floor-map-layout-edge-edit-panel-close {
+  flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.45);
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.88);
+  }
+}
+
+.pisell-floor-map-layout-edge-edit-panel-dirty-hint {
+  margin: 0 0 10px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: #595959;
+}
+
+/** 手机抽屉内与图元面板同款铺满 */
+.pisell-floor-map-layout-edit-panel--phone-drawer.pisell-floor-map-layout-edge-edit-panel {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-height: none;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: calc(
+    12px + env(safe-area-inset-bottom, 0px) +
+      var(--fmap-viewport-dock-bottom-clearance, 78px)
+  );
+}

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -2,12 +2,12 @@ const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
 const require_types = require("../types.js");
 const require_floorMapBuiltinShapes = require("../utils/floorMapBuiltinShapes.js");
 const require_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils.js");
-const require_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel.js");
 const require_floorMapLayoutConstants = require("../floorMapLayoutConstants.js");
 const require_useEngineContext = require("../../../hooks/useEngineContext.js");
 const require_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay.js");
 const require_floorMapElementNameAsTitle = require("../utils/floorMapElementNameAsTitle.js");
 const require_FloorMapDataForm = require("./FloorMapDataForm.js");
+const require_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
@@ -112,8 +112,9 @@ function FloorMapEditPanel(props) {
 		var _builtinDef$defaultSi, _builtinDef$defaultSi2, _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr, _sceneElement$builtin;
 		/** 内置图形宽高优先采用当前选定预设的 defaultSize，未选则给一个保底正方形 */
 		const builtinDef = isBuiltinShapeKind ? require_floorMapBuiltinShapes.getFloorMapBuiltinShapeDef(sceneElement.builtinShapeKey) : void 0;
-		const dw = isImageKind ? 400 : isBuiltinShapeKind ? (_builtinDef$defaultSi = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.width) !== null && _builtinDef$defaultSi !== void 0 ? _builtinDef$defaultSi : 96 : 180;
-		const dh = isImageKind ? 240 : isBuiltinShapeKind ? (_builtinDef$defaultSi2 = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.height) !== null && _builtinDef$defaultSi2 !== void 0 ? _builtinDef$defaultSi2 : 96 : 120;
+		const bindingPolicy = require_floorMapElementKindUtils.resolveDataBindingPolicy(kindConfig);
+		const dw = isImageKind ? 400 : isBuiltinShapeKind ? (_builtinDef$defaultSi = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.width) !== null && _builtinDef$defaultSi !== void 0 ? _builtinDef$defaultSi : 96 : bindingPolicy !== "none" ? require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.width : 48;
+		const dh = isImageKind ? 240 : isBuiltinShapeKind ? (_builtinDef$defaultSi2 = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.height) !== null && _builtinDef$defaultSi2 !== void 0 ? _builtinDef$defaultSi2 : 96 : bindingPolicy !== "none" ? require_floorMapElementKindUtils.FLOOR_MAP_RESOURCE_PLACE_DEFAULT.height : 48;
 		return {
 			x: sceneElement.x,
 			y: sceneElement.y,

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -1,10 +1,18 @@
 .pisell-floor-map-layout-edit-panel {
   width: 280px;
   padding: 12px;
+  /**
+   * 桌面编辑面板可纵向滚动：底部多留一截，避免 Apply 等被右下 ViewControls Dock 挡住。
+   * 手机抽屉用 `--phone-drawer` 单独处理 safe-area，不叠加此项。
+   */
+  padding-bottom: calc(
+    12px + var(--fmap-viewport-dock-bottom-clearance, 78px)
+  );
   background: #fff;
   border: 1px solid #e8e8e8;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  /** 未放入 edit-panel-wrap 时的兜底；wrap 内由父级 flex 限制为 100% 高度 */
   max-height: 80vh;
   overflow-y: auto;
   touch-action: pan-y;
@@ -155,7 +163,10 @@
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(
+    12px + env(safe-area-inset-bottom, 0px) +
+      var(--fmap-viewport-dock-bottom-clearance, 78px)
+  );
 }
 
 .pisell-floor-map-layout-edit-panel-wrap-constrained .pisell-floor-map-layout-edit-panel {

package/lib/components/pisellFloorMapLayout/components/FloorMapEditQuickActions.js

@@ -11,14 +11,21 @@ classnames = require_runtime.__toESM(classnames);
 */
 const PREFIX = "pisell-floor-map-layout";
 function FloorMapEditQuickActions(props) {
-	const { className, labels, isLocked, onToggleLock, onDuplicate, onDelete } = props;
+	const { className, labels, isLocked, onToggleLock, onDuplicate, onDelete, viewportScale = 1 } = props;
 	const stopBubble = (0, react.useCallback)((e) => {
 		e.stopPropagation();
 	}, []);
+	const safeScale = Math.max(viewportScale, .01);
+	const inv = 1 / safeScale;
+	const gap = 10 / safeScale;
 	return /* @__PURE__ */ react.default.createElement("div", {
 		role: "toolbar",
 		"aria-label": labels.ariaToolbar,
 		className: (0, classnames.default)(`${PREFIX}-edit-quick-actions`, isLocked && `${PREFIX}-edit-quick-actions--locked`, className),
+		style: {
+			transform: `translate(-50%, ${gap}px) scale(${inv})`,
+			transformOrigin: "top center"
+		},
 		onPointerDown: (e) => e.stopPropagation()
 	}, /* @__PURE__ */ react.default.createElement(antd.Tooltip, { title: isLocked ? labels.unlock : labels.lock }, /* @__PURE__ */ react.default.createElement(antd.Button, {
 		type: "text",

package/lib/components/pisellFloorMapLayout/components/FloorMapOverview.js

@@ -21,9 +21,10 @@ require("./FloorMapOverview.less");
 * 设计要点：
 * - 不再自带 TransformWrapper / ResizeObserver / fit 算法；
 * - 每个画布作为独立区域，仅一条细边框作分隔，无背景色/网格；
-* - 区域左上角用小 chip 显示画布名；chip 不拦截图元交互；
+* - 画布名显示在边框外的标题带；标题不拦截图元交互；
 * - 仅渲染 ItemLayer（阅读态），与单画布的 hover/click 行为一致；编辑层不渲染。
 */
+const I18N_OVERVIEW_AREA_BADGE = "pisell-floor-map-layout.overview.area-title-badge";
 const I18N_EMPTY = "pisell-floor-map-layout.overview.empty";
 function FloorMapOverview(props) {
 	var _engineCtx$engine;
@@ -57,23 +58,30 @@ function FloorMapOverview(props) {
 		const inverseScale = 1 / safeScale;
 		return /* @__PURE__ */ react.default.createElement("div", {
 			key: area.canvasId,
-			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area`,
+			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-block`,
 			style: {
 				position: "absolute",
 				left: area.x,
 				top: area.y,
-				width: area.contentWidth,
-				height: area.contentHeight
+				width: area.contentWidth
 			}
-		}, /* @__PURE__ */ react.default.createElement("span", {
+		}, /* @__PURE__ */ react.default.createElement("div", {
 			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title`,
 			title: displayName,
 			style: {
+				height: area.titleBandHeight,
 				transform: `scale(${inverseScale})`,
 				transformOrigin: "top left",
-				maxWidth: `calc((100% - 16px) * ${safeScale})`
+				width: `${100 * safeScale}%`,
+				maxWidth: `${area.contentWidth * safeScale}px`
+			}
+		}, /* @__PURE__ */ react.default.createElement("span", { className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-inner` }, /* @__PURE__ */ react.default.createElement("span", { className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-badge` }, _pisell_utils.locales.getText(I18N_OVERVIEW_AREA_BADGE)), /* @__PURE__ */ react.default.createElement("span", { className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title-text` }, displayName))), /* @__PURE__ */ react.default.createElement("div", {
+			className: `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area`,
+			style: {
+				width: area.contentWidth,
+				height: area.contentHeight
 			}
-		}, displayName), /* @__PURE__ */ react.default.createElement(require_ItemLayer.default, {
+		}, /* @__PURE__ */ react.default.createElement(require_ItemLayer.default, {
 			items: area.items,
 			renderItem,
 			viewportScale,
@@ -90,7 +98,7 @@ function FloorMapOverview(props) {
 			onItemLeave,
 			getMergedItemWrapperStyle,
 			readModeSelectedItemId
-		}));
+		})));
 	}));
 }
 //#endregion

package/lib/components/pisellFloorMapLayout/components/FloorMapOverview.less

@@ -5,10 +5,15 @@
  * 视觉规则：
  * - 大画布自身没有背景（沿用外层 map-area 背景）；
  * - 每个区域只有一条细边框 + 圆角；
- * - 区域左上角小 chip 显示画布名，半透明白底 + 模糊，不拦截图元交互。
+ * - 标题条在画布边框外（上方），装箱时为标题带预留高度；
+ * - 区内资源图元与标题分层，标题不拦截交互。
  */
 
 .pisell-floor-map-layout-overview {
+  &-area-block {
+    box-sizing: border-box;
+  }
+
   &--empty {
     display: flex;
     align-items: center;
@@ -39,27 +44,74 @@
   }
 
   /**
-   * 区域标题：左上角 chip，半透明白底 + 模糊；不占独立行高。
-   * pointer-events: none 让标题不拦截图元交互（点击/拖拽）。
+   * 外置标题带：占布局预留高度，标签在带内底对齐，与下方画布边框留出间距。
    */
   &-area-title {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    z-index: 2;
-    display: inline-block;
-    max-width: calc(100% - 16px);
-    padding: 2px 10px;
-    font-size: 12px;
-    line-height: 1.5;
-    color: rgba(0, 0, 0, 0.65);
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(8px);
-    border-radius: 999px;
+    display: flex;
+    align-items: flex-end;
+    box-sizing: border-box;
+    padding-bottom: 8px;
     pointer-events: none;
+    overflow: visible;
+  }
+
+  &-area-title-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 4px 12px 4px 8px;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-left: 3px solid var(--fmap-primary, #1677ff);
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
+    line-height: 1.35;
+    box-sizing: border-box;
+
+    [data-appearance-mode='dark'] & {
+      background: rgba(28, 28, 30, 0.94);
+      border-color: rgba(255, 255, 255, 0.18);
+      border-left-color: var(--fmap-primary, #1677ff);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+    }
+  }
+
+  &-area-title-badge {
+    flex-shrink: 0;
+    padding: 1px 6px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--fmap-primary, #1677ff);
+    background: color-mix(
+      in srgb,
+      var(--fmap-primary, #1677ff) 14%,
+      #fff
+    );
+    border-radius: 4px;
+
+    [data-appearance-mode='dark'] & {
+      background: color-mix(
+        in srgb,
+        var(--fmap-primary, #1677ff) 22%,
+        rgba(28, 28, 30, 1)
+      );
+    }
+  }
+
+  &-area-title-text {
+    min-width: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #101828;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-weight: 500;
+
+    [data-appearance-mode='dark'] & {
+      color: #f5f5f5;
+    }
   }
 }