@squadbase/vantage 0.7.0 → 0.7.1-dev1.0d13f9a

package/registry/ui/area-chart.tsx

@@ -170,10 +170,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
- */
-const ChartFrameContext = createContext(false)
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
+ */
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -397,6 +412,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2272,6 +2289,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2485,6 +2506,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2694,15 +2717,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -2998,6 +3023,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3143,6 +3176,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3245,7 +3280,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/bar-chart.tsx

@@ -7,7 +7,7 @@
  * (`index`) and the series keys (`categories`) instead of an ECharts option.
  * Grouped, stacked or 100%-stacked; vertical or horizontal bars. Colours are the
  * `--chart-1..5` tokens in fixed order (more than 5 series fold into「その他」)
- * and follow light/dark. The value axis always starts at 0. A horizontal bar chart of one
+ * and follow light/dark. The value axis always reaches 0 (negative values add a solid zero line on their own). A horizontal bar chart of one
  * series (`barOptions.layout: "vertical"`) is a light tint by default, like BarList; `barOptions.highlight`
  * names the one bar the page is about, drawn in the full colour.
  * Renders inside `ChartFrame` (title, summary, loading skeleton, empty state).
@@ -173,10 +173,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -400,6 +415,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2275,6 +2292,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2488,6 +2509,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2697,15 +2720,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -3001,6 +3026,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3146,6 +3179,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3248,7 +3283,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/bar-list.tsx

@@ -186,10 +186,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
- */
-const ChartFrameContext = createContext(false)
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
+ */
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -413,6 +428,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2288,6 +2305,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2501,6 +2522,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2710,15 +2733,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -3014,6 +3039,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3159,6 +3192,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3261,7 +3296,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/box-plot-chart.tsx

@@ -174,10 +174,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -401,6 +416,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1437,6 +1454,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -1650,6 +1671,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -1859,15 +1882,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -2163,6 +2188,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -2308,6 +2341,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -2410,7 +2445,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/category-bar.tsx

@@ -163,10 +163,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -390,6 +405,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1439,8 +1456,11 @@ export const CategoryBar = forwardRef<HTMLDivElement, CategoryBarProps>(function
     />
   )
 
+  // aria-label is prohibited on a role-less div: a labelled bar is a group (the label names it, the marker stays reachable).
+  const labelled = props["aria-label"] != null || props["aria-labelledby"] != null
+
   return (
-    <div ref={ref} data-slot="category-bar" className={cn("w-full", className)} {...props}>
+    <div ref={ref} data-slot="category-bar" role={labelled ? "group" : undefined} className={cn("w-full", className)} {...props}>
       {showLabels && labels.length > 0 && (
         <div data-slot="category-bar-labels" className="relative mb-2 h-4 text-xs text-muted-foreground tabular-nums">
           {labels.map((label, i) => (
@@ -1481,7 +1501,7 @@ export const CategoryBar = forwardRef<HTMLDivElement, CategoryBarProps>(function
           >
             {marker.tooltip ? (
               <Tooltip>
-                <TooltipTrigger render={<span aria-label={marker.tooltip} className="block py-1" />}>
+                <TooltipTrigger render={<button type="button" aria-label={marker.tooltip} className="block cursor-default py-1" />}>
                   {markerDot}
                 </TooltipTrigger>
                 <TooltipContent>{marker.tooltip}</TooltipContent>

package/registry/ui/chart-frame.tsx

@@ -8,20 +8,23 @@
  * by the title and described by the summary, so a screen reader hears what the
  * chart says, not just that there is one.
  *
- * The plot area is the frame's one `role="img"` (`EChart` inside it drops its
- * own); `dataTable` adds the numbers as a visually-hidden table beside it, so a
- * screen reader can read the values the canvas only draws.
+ * The plot is the frame's one `role="img"`. When it is an `EChart`, that
+ * canvas takes the role (and the frame's name and description) and the plot
+ * area drops it, so the copy / download buttons are not inside the image;
+ * any other plot keeps the role on the plot area. `dataTable` adds the numbers
+ * as a visually-hidden table beside it, so a screen reader can read the values
+ * the canvas only draws.
  *
  * The plot area keeps its height in every state: while loading it shows a
  * skeleton shaped like the final chart, and with no data it says so (and offers
  * one action) instead of drawing empty axes.
  */
-import { forwardRef, useId, type HTMLAttributes, type ReactNode } from "react"
+import { forwardRef, useCallback, useId, useMemo, useState, type HTMLAttributes, type ReactNode } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import type { ChartEmptyState } from "@squadbase/vantage/components"
 import { useSyncExternalStore } from "react"
-import { createContext, useCallback, useEffect, useRef, useState, type ForwardedRef, type RefObject } from "react"
+import { createContext, useEffect, useRef, type ForwardedRef, type RefObject } from "react"
 import type { ChartTone } from "@squadbase/vantage/components"
 import { EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
 import type { ChartColor, ChartColors, ChartSeriesColor, ValueFormatter } from "@squadbase/vantage/components"
@@ -170,10 +173,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -397,6 +415,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1422,12 +1442,15 @@ export interface ChartFrameProps extends Omit<HTMLAttributes<HTMLElement>, "titl
   /** 見出しが無いときのプロット領域のラベル。 */
   ariaLabel?: string
   /**
-   * プロット領域の役割。既定 `"img"`(canvas のグラフ)。行がボタンやリンクになる
+   * プロットの役割。既定 `"img"`(canvas のグラフ。`role="img"` と名前・要約は
+   * `EChart` が canvas にだけ付け、操作ボタンは画像の外に置く)。行がボタンやリンクになる
    * HTML のグラフ(BarList・FunnelSteps)は `"group"` にして、中身を読ませる。
    */
   plotRole?: "img" | "group"
   /** 値の表。画面には出さず(`sr-only`)、スクリーンリーダー向けに図の中に置く。`chartDataTable` で作る。 */
   dataTable?: ChartDataTable
+  /** プロットの下に常に出す小さな注記(近似値である旨など)。読み込み中・空のときも出す。 */
+  footnote?: string
   /** プロット(チャート本体)。読み込み中・空のときは描かない。 */
   children?: ReactNode
 }
@@ -1448,6 +1471,7 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
     ariaLabel,
     plotRole = "img",
     dataTable,
+    footnote,
     className,
     children,
     ...props
@@ -1459,6 +1483,18 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
   const titleId = title ? `${id}-title` : undefined
   const summaryId = summary ? `${id}-summary` : undefined
   const state = isLoading ? "loading" : isEmpty ? "empty" : "ready"
+  // An EChart inside takes the image role for its canvas (see ChartFramePlot).
+  const [claims, setClaims] = useState(0)
+  const claim = useCallback(() => {
+    setClaims((n) => n + 1)
+    return () => setClaims((n) => n - 1)
+  }, [])
+  const claimed = claims > 0 && plotRole === "img"
+  const plotOwnsImage = state === "ready" && claimed
+  const plot = useMemo(
+    () => ({ image: plotRole === "img", claimed, claim, ariaLabel: titleId ? undefined : ariaLabel, ariaLabelledBy: titleId, ariaDescribedBy: summaryId }),
+    [plotRole, claimed, claim, titleId, ariaLabel, summaryId],
+  )
 
   return (
     <figure data-slot="chart-frame" className={cn("m-0 flex w-full min-w-0 flex-col gap-3", className)} {...props}>
@@ -1480,10 +1516,10 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
         ref={ref}
         data-slot="chart-frame-body"
         data-state={state}
-        role={state === "ready" ? plotRole : "group"}
-        aria-label={titleId ? undefined : ariaLabel}
-        aria-labelledby={titleId}
-        aria-describedby={summaryId}
+        role={plotOwnsImage ? undefined : state === "ready" ? plotRole : "group"}
+        aria-label={plotOwnsImage || titleId ? undefined : ariaLabel}
+        aria-labelledby={plotOwnsImage ? undefined : titleId}
+        aria-describedby={plotOwnsImage ? undefined : summaryId}
         aria-busy={isLoading || undefined}
         className="relative w-full min-w-0"
         style={{ height: typeof height === "number" ? `${height}px` : height }}
@@ -1493,9 +1529,14 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
         ) : state === "empty" ? (
           <ChartEmpty {...emptyState} defaultTitle={t.emptyTitle} />
         ) : (
-          <ChartFrameContext.Provider value>{children}</ChartFrameContext.Provider>
+          <ChartFrameContext.Provider value={plot}>{children}</ChartFrameContext.Provider>
         )}
       </div>
+      {footnote && (
+        <p data-slot="chart-frame-footnote" className="text-xs leading-snug text-muted-foreground">
+          {footnote}
+        </p>
+      )}
       {state === "ready" && dataTable && dataTable.rows.length > 0 && (
         <ChartDataTableView table={dataTable} fallbackCaption={title ?? ariaLabel} />
       )}