@hsu-react/ui 2.4.0 → 2.4.2

package/src/components/Chart/Heatmap/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
@@ -6,6 +7,8 @@ import {
   createDefaultHeatmapXAxis,
   createDefaultHeatmapYAxis,
 } from "../_utils/heatmap";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -72,7 +75,13 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
+  // colours have to be resolved against the active appearance here
+  const isDark = useIsDark();
+  const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
   // Process the data and generate the chart option
   const chartOption = useMemo(() => {
@@ -120,7 +129,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
       left: "right",
       top: "center",
       textStyle: {
-        color: "#373D48",
+        color: chrome.text,
       },
       inRange: {
         color: inRangeColor,
@@ -128,7 +137,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     };
 
     // Process xAxis config
-    const def_xAxis = createDefaultHeatmapXAxis(xAxisData);
+    const def_xAxis = createDefaultHeatmapXAxis(xAxisData, chrome);
     const processedXAxis = Array.isArray(xAxis)
       ? xAxis?.map((item) => ({
           ...def_xAxis,
@@ -142,7 +151,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
         };
 
     // Process yAxis config
-    const def_yAxis = createDefaultHeatmapYAxis(yAxisData);
+    const def_yAxis = createDefaultHeatmapYAxis(yAxisData, chrome);
     const processedYAxis = Array.isArray(yAxis)
       ? yAxis?.map((item) => ({
           ...def_yAxis,
@@ -244,16 +253,22 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     series,
     coreOption,
     zeroColor,
+    chrome,
   ]);
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -289,7 +304,9 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick]);
+  }, [chartOption, handleResize, onChart, onClick,
+    containerReady,
+  ]);
 
   // Clean up resources when the component unmounts
   useEffect(() => {

package/src/components/Chart/Line/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 
 import {
   ChartCommonProps,
@@ -21,6 +22,8 @@ import {
   percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
+import { resolveChartChrome } from "../_utils/chartTheme";
+import useIsDark from "../../../hooks/useIsDark";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -71,6 +74,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
@@ -80,11 +85,15 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     () => resolveScrollConfig(scrollConfig),
     [scrollConfig],
   );
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = useIsDark();
+  const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
-    const def_xAxis = createDefaultCategoryXAxis(xAxisData);
-    const def_yAxis = createDefaultValueYAxis("line");
+    const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
+    const def_yAxis = createDefaultValueYAxis("line", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis)
@@ -206,7 +215,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
           top: "5%",
           icon: "circle",
           textStyle: {
-            color: "#373D48",
+            color: chrome.text,
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -256,16 +265,22 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     series,
     enableLegendAutoScroll,
     coreOption,
+    chrome,
   ]);
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -460,6 +475,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     legendScrollInterval,
     // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
     normalizedScroll,
+    containerReady,
   ]);
 
   // Handle auto play

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../../_hooks/useContainerReady";
 import "echarts-gl";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
@@ -108,6 +109,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const hoveredIndexRef = useRef<number | "">("");
   const optionRef = useRef<ChartsOption | null>(null);
@@ -145,6 +148,11 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
   ]);
 
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
@@ -163,7 +171,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
   );
 
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     let chart = chartInstanceRef.current;
     if (!chart) {
@@ -205,6 +213,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleGlobalOut,
     onChart,
     onClick,
+    containerReady,
   ]);
 
   useEffect(() => {

package/src/components/Chart/Pie/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 
 import {
   ChartCommonProps,
@@ -66,6 +67,8 @@ const ChartPie: ChartPieFC = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null
@@ -241,12 +244,17 @@ const ChartPie: ChartPieFC = (props) => {
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -313,6 +321,7 @@ const ChartPie: ChartPieFC = (props) => {
     seriesData,
     legendVisibleCount,
     legendScrollInterval,
+    containerReady,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Polar/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 import {
   ChartCommonProps,
   ChartOptionType,
@@ -36,6 +37,8 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -170,12 +173,17 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -200,7 +208,9 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize]);
+  }, [chartOption, handleResize,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/Radar/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
@@ -55,6 +56,8 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const hoveredIndicatorRef = useRef<number>(-1);
 
@@ -188,11 +191,16 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
   ]);
 
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     let chart = chartInstanceRef.current;
     if (!chart) {
@@ -343,6 +351,7 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
     singleIndicatorHighlight,
     singleIndicatorHoverFill,
     color,
+    containerReady,
   ]);
 
   useEffect(() => {

package/src/components/Chart/Sankey/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
@@ -16,6 +17,8 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
   const { className, style, seriesData, seriesLinks, series, getImage } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -100,12 +103,17 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -141,7 +149,9 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage]);
+  }, [chartOption, handleResize, getImage,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/Tree/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import {
   ChartCommonProps,
@@ -19,6 +20,8 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
   const { className, style, seriesData, series, getImage } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -40,12 +43,17 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -81,7 +89,9 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage]);
+  }, [chartOption, handleResize, getImage,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/_hooks/useContainerReady.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Whether the referenced element has a non-zero box yet.
+ *
+ * `echarts.init` on a 0×0 element logs `Can't get DOM width or height` and builds a canvas with no
+ * size, recovering only on the next `resize()`. A chart hits that path whenever it mounts before
+ * layout has given it space — inside a keep-alive tab that is not the active one, a collapsed
+ * panel, a modal that has not opened yet — so consuming apps see the warning for charts that end
+ * up rendering perfectly well.
+ *
+ * Gating `init` on this flag defers it to the first frame the element actually occupies space.
+ *
+ * It **latches**: once measured, the element going back to 0×0 (a keep-alive tab losing focus)
+ * must not read as "not ready" again, or the init effect would tear the chart down and re-create
+ * it on every tab switch.
+ */
+const useContainerReady = (ref: RefObject<HTMLElement | null>): boolean => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (ready) return;
+
+    const el = ref.current;
+    if (!el) return;
+
+    const measure = (): boolean => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width > 0 && height > 0) {
+        setReady(true);
+        return true;
+      }
+      return false;
+    };
+
+    // Already laid out on mount — the common case, and it must not cost an extra frame
+    if (measure()) return;
+
+    const observer = new ResizeObserver(() => {
+      if (measure()) observer.disconnect();
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [ready, ref]);
+
+  return ready;
+};
+
+export default useContainerReady;

package/src/components/Chart/_utils/cartesian.ts

@@ -1,5 +1,6 @@
 import * as echarts from "echarts";
 import { ChartOptionType, SeriesData, SeriesDataType } from "..";
+import { ChartChrome } from "./chartTheme";
 
 export interface ChartScrollConfig {
   enabled?: boolean;
@@ -50,7 +51,8 @@ export const percentWindowToIndexWindow = (
 };
 
 export const createDefaultCategoryXAxis = (
-  xAxisData?: Array<string>,
+  xAxisData: Array<string> | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   boundaryGap: true,
@@ -58,10 +60,10 @@ export const createDefaultCategoryXAxis = (
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    // echarts removed the `textStyle` nesting under `axisLabel` in v4: keeping it means both
+    // properties are silently dropped *and* a deprecation warning is logged on every render.
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,
@@ -70,19 +72,18 @@ export const createDefaultCategoryXAxis = (
 
 export const createDefaultValueYAxis = (
   mode: "bar" | "line" = "bar",
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "value",
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   splitLine:
     mode === "line"
       ? {
           lineStyle: {
-            color: "#C9CED6",
+            color: chrome.splitLine,
             type: "dashed",
           },
         }

package/src/components/Chart/_utils/chartTheme.ts

@@ -0,0 +1,34 @@
+import { darkTokens, fontTokens, lightTokens } from "../../../styles/tokens";
+
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+export interface ChartChrome {
+  /** Legend labels — a real label, so it sits on the foreground ramp */
+  text: string;
+  /** Axis tick labels — secondary information, one step down */
+  axis: string;
+  /** Split lines behind the plot area */
+  splitLine: string;
+  /** Base font size, same scale the rest of the library uses */
+  fontSize: number;
+}
+
+export const resolveChartChrome = (dark: boolean): ChartChrome => {
+  const t = dark ? darkTokens : lightTokens;
+
+  return {
+    text: t.foreground,
+    axis: t.mutedForeground,
+    splitLine: t.border,
+    fontSize: fontTokens.size,
+  };
+};

package/src/components/Chart/_utils/heatmap.ts

@@ -1,7 +1,9 @@
 import { ChartOptionType } from "..";
+import { ChartChrome } from "./chartTheme";
 
 export const createDefaultHeatmapXAxis = (
-  xAxisData?: string[],
+  xAxisData: string[] | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   data: xAxisData,
@@ -11,10 +13,9 @@ export const createDefaultHeatmapXAxis = (
   axisLabel: {
     interval: 0,
     hideOverlap: true,
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    // See the note in `cartesian.ts`: `axisLabel.textStyle` has been deprecated since echarts 4
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,
@@ -22,7 +23,8 @@ export const createDefaultHeatmapXAxis = (
 });
 
 export const createDefaultHeatmapYAxis = (
-  yAxisData?: string[],
+  yAxisData: string[] | undefined,
+  chrome: ChartChrome,
 ): ChartOptionType => ({
   type: "category",
   data: yAxisData,
@@ -30,10 +32,8 @@ export const createDefaultHeatmapYAxis = (
     show: true,
   },
   axisLabel: {
-    textStyle: {
-      fontSize: 14,
-      color: "#373D48",
-    },
+    fontSize: chrome.fontSize,
+    color: chrome.axis,
   },
   axisTick: {
     show: false,

package/src/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -21,8 +21,18 @@
 
   height: 100%;
 
+  // Inside a modal the Search must not keep its card chrome. On a page it is an outlined white
+  // card standing on the grey page background; in a modal the body is already `--vita-surface`,
+  // so the same treatment paints a white card on white and only the border survives — a stray
+  // outline around the search row. The padding was already being cleared here; the background and
+  // border are the other half of the same intent, and `.tableContainer` below is flush for
+  // exactly this reason.
   .search {
     padding: 0px;
+
+    background: transparent;
+
+    border: none;
   }
 
   .tableContainer {