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

package/registry/ui/combobox.tsx

@@ -29,6 +29,7 @@ function ComboboxTrigger({
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
+      aria-label="Toggle options"
       className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
       {...props}
     >
@@ -44,6 +45,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
   return (
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
+      aria-label="Clear"
       render={<InputGroupButton variant="ghost" size="icon-xs" />}
       className={cn(className)}
       {...props}
@@ -263,6 +265,11 @@ function ComboboxChip({
           render={<Button variant="ghost" size="icon-xs" />}
           className="-ml-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
+          aria-label={
+            typeof children === "string" || typeof children === "number"
+              ? `Remove ${children}`
+              : "Remove"
+          }
         >
           <XIcon
             className="pointer-events-none"

package/registry/ui/context-menu.tsx

@@ -0,0 +1,71 @@
+// Copied by `vantage add ui context-menu`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/context-menu.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+
+import { cn } from "@squadbase/vantage/ui"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@squadbase/vantage/ui"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+/** The area that opens the menu on right-click (long-press on touch). */
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+// The popup is the same as DropdownMenu's (same look); only the anchor differs: the pointer, not a button.
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="context-menu-content"
+      align="start"
+      side="right"
+      sideOffset={0}
+      className={cn("w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  DropdownMenuGroup as ContextMenuGroup,
+  DropdownMenuLabel as ContextMenuLabel,
+  DropdownMenuItem as ContextMenuItem,
+  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
+  DropdownMenuRadioGroup as ContextMenuRadioGroup,
+  DropdownMenuRadioItem as ContextMenuRadioItem,
+  DropdownMenuSeparator as ContextMenuSeparator,
+  DropdownMenuShortcut as ContextMenuShortcut,
+  DropdownMenuSub as ContextMenuSub,
+  DropdownMenuSubTrigger as ContextMenuSubTrigger,
+  DropdownMenuSubContent as ContextMenuSubContent,
+}

package/registry/ui/dashboard-card.tsx

@@ -3,7 +3,9 @@
 "use client"
 
 /**
- * DashboardCard — the tighter card used for dashboard tiles: smaller padding
+ * DashboardCardPreset — a card (title, description, action, content) for one tile that holds a chart, ranking or table; not for a single KPI, since `KpiCard` is itself a card.
+ *
+ * `DashboardCard` is the tighter card used for dashboard tiles: smaller padding
  * than the plain `Card`, a title/description/action header, and a matching
  * skeleton for the loading state. `DashboardCardPreset` wires the common
  * arrangement in one prop-driven component.
@@ -127,7 +129,7 @@ export const DashboardCardFooter = forwardRef<HTMLDivElement, DashboardCardFoote
     <div
       ref={ref}
       data-slot="dashboard-card-footer"
-      className={cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className)}
+      className={cn("-mx-1 -mb-1 flex min-w-0 items-center justify-between gap-3 border-t px-4 py-2.5 text-xs text-muted-foreground tabular-nums group-data-[size=sm]:px-3", className)}
       {...props}
     />
   ),
@@ -159,7 +161,10 @@ export interface DashboardCardPresetProps
     Pick<DashboardCardProps, "subgrid" | "size"> {
   title?: ReactNode
   description?: ReactNode
+  /** One headline number or status at the right end of the header ("212 tasks", a `StatusBadge`). Put the number in `<span className="font-medium text-foreground">`. */
+  headline?: ReactNode
   actions?: ReactNode
+  /** One line at the bottom of the card: a summary fact on the left, an action or hint on the right. */
   footer?: ReactNode
   headerClassName?: string
   contentClassName?: string
@@ -169,6 +174,7 @@ export interface DashboardCardPresetProps
 export function DashboardCardPreset({
   title,
   description,
+  headline,
   actions,
   footer,
   children,
@@ -181,21 +187,28 @@ export function DashboardCardPreset({
 }: DashboardCardPresetProps) {
   // Inside SampleData the card shows the mark in its header, and the parts inside it do not repeat it.
   const sample = useSampleMark()
-  const hasHeader = title || description || actions || sample
+  const hasTitle = Boolean(title || description)
+  // A card with no title of its own (the chart inside has it) floats the mark in the corner instead of adding a row of its own.
+  const floatingMark = sample && !hasTitle && !headline && !actions
+  const hasHeader = hasTitle || headline || actions || (sample && !floatingMark)
   return (
-    <DashboardCard className={className} subgrid={subgrid} {...props}>
+    <DashboardCard className={cn(floatingMark && "relative", className)} subgrid={subgrid} {...props}>
       <SampleClaim>
+        {floatingMark && <SampleBadge label={sample.label} className="absolute top-2 right-2 z-10" />}
         {hasHeader && (
           <DashboardCardHeader className={cn(subgrid && "row-start-1", headerClassName)}>
-            {(title || description) && (
-              <div>
-                {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+            {(hasTitle || sample) && (
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                  {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+                  {sample && <SampleBadge label={sample.label} />}
+                </div>
                 {description && <DashboardCardDescription>{description}</DashboardCardDescription>}
               </div>
             )}
-            {(actions || sample) && (
-              <DashboardCardAction className={cn(sample && actions && "flex items-center gap-2")}>
-                {sample && <SampleBadge label={sample.label} />}
+            {(headline || actions) && (
+              <DashboardCardAction className="flex items-center gap-2">
+                {headline && <div data-slot="dashboard-card-headline" className="text-sm tabular-nums text-muted-foreground">{headline}</div>}
                 {actions}
               </DashboardCardAction>
             )}

package/registry/ui/data-table.tsx

@@ -3,7 +3,9 @@
 "use client"
 
 /**
- * DataTable — a compound table over TanStack Table. `<DataTable>` owns the
+ * DataTablePreset — a table (toolbar, body, pagination) over TanStack Table.
+ *
+ * `DataTable` is the compound form: `<DataTable>` owns the
  * table instance and publishes it on context; the toolbar, body, pagination and
  * column-visibility parts read from that context, so a page composes only the
  * pieces it wants. `DataTablePreset` assembles the usual arrangement.
@@ -309,6 +311,8 @@ const TEXT = {
     trend: (points: number, first: string, last: string, min: string, max: string) =>
       `${points}点の推移、${first}から${last}、最小${min}、最大${max}`,
     noData: "データがありません",
+    search: "検索",
+    pageSizeLabel: "1ページの表示件数",
     pageSize: (size: number) => `${size}件`,
     range: (total: number, start: number, end: number) => `${total}件中 ${start} - ${end} を表示`,
     first: "最初",
@@ -326,6 +330,8 @@ const TEXT = {
     trend: (points: number, first: string, last: string, min: string, max: string) =>
       `Trend over ${points} points: ${first} to ${last}, min ${min}, max ${max}`,
     noData: "No results.",
+    search: "Search",
+    pageSizeLabel: "Rows per page",
     pageSize: (size: number) => `${size} / page`,
     range: (total: number, start: number, end: number) => `Showing ${start}–${end} of ${total}`,
     first: "First",
@@ -918,6 +924,7 @@ export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps
   ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
     const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } =
       useDataTable()
+    const t = useText()
 
     const showSearchEffective = showSearch ?? enableFiltering
 
@@ -936,6 +943,7 @@ export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps
           <div className="relative">
             <Search className="absolute top-2.5 left-2.5 size-4 text-muted-foreground" />
             <Input
+              aria-label={t.search}
               value={globalFilter}
               onChange={(e) => setGlobalFilter(e.target.value)}
               className="max-w-sm pl-8"
@@ -1205,7 +1213,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             value={String(currentPageSize)}
             onValueChange={(value) => table.setPageSize(Number(value))}
           >
-            <SelectTrigger size="sm" className="min-w-[80px]">
+            <SelectTrigger size="sm" className="min-w-[80px]" aria-label={t.pageSizeLabel}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/registry/ui/date-range-picker.tsx

@@ -12,6 +12,7 @@ import { forwardRef, useCallback, useMemo, useState } from "react"
 import { CalendarIcon } from "lucide-react"
 import {
   addMonths,
+  differenceInCalendarDays,
   endOfDay,
   endOfMonth,
   endOfWeek,
@@ -20,6 +21,7 @@ import {
   startOfMonth,
   startOfWeek,
   subDays,
+  subYears,
   subMonths,
   subWeeks,
 } from "date-fns"
@@ -28,7 +30,7 @@ import type { DateRange as RdpDateRange } from "react-day-picker"
 
 import { cn } from "@squadbase/vantage/ui"
 import { useIsMobile } from "@squadbase/vantage/ui"
-import { formatDate } from "@squadbase/vantage/components"
+import { formatDate, formatDateRange as formatRange } from "@squadbase/vantage/components"
 import { Button } from "@squadbase/vantage/ui"
 import { Calendar } from "@squadbase/vantage/ui"
 import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
@@ -213,6 +215,23 @@ export function fiscalPeriodRange(
   return { from: periodStart, to: endOfMonth(addMonths(periodStart, length - 1)) }
 }
 
+/**
+ * 選択範囲の比較期間を計算する。`previous-period` は同じ日数だけ直前にずらした範囲、
+ * `previous-year` は両端を 1 年前にした範囲（うるう日は 2/28 に丸める）。
+ *
+ * @example
+ * comparisonRange({ from: new Date(2026, 2, 1), to: new Date(2026, 2, 31) }, "previous-period")
+ * // 2026-01-29〜2026-02-28
+ */
+export function comparisonRange(
+  { from, to }: { from: Date; to: Date },
+  kind: "previous-period" | "previous-year",
+): { from: Date; to: Date } {
+  if (kind === "previous-year") return { from: subYears(from, 1), to: subYears(to, 1) }
+  const days = differenceInCalendarDays(to, from) + 1
+  return { from: subDays(from, days), to: subDays(from, 1) }
+}
+
 const PRESET_LABELS = {
   ja: {
     today: "今日",
@@ -251,8 +270,14 @@ const PRESET_LABELS = {
 } as const
 
 const TEXT = {
-  ja: { placeholder: "期間を選択", rangeSeparator: " - " },
-  en: { placeholder: "Pick a date range", rangeSeparator: " – " },
+  ja: {
+    placeholder: "期間を選択",
+    comparison: { "previous-period": "前期間", "previous-year": "前年同期" },
+  },
+  en: {
+    placeholder: "Pick a date range",
+    comparison: { "previous-period": "vs. previous period", "previous-year": "vs. same period last year" },
+  },
 }
 
 /** カレンダーに渡す date-fns の locale。`ja*` なら日本語、それ以外は react-day-picker の既定（英語）。 */
@@ -398,6 +423,14 @@ export interface DateRangePickerProps {
    * <DateRangePicker fiscalYearStartMonth={1} />
    */
   fiscalYearStartMonth?: number
+  /**
+   * 比較期間。渡すと選択範囲から比較する範囲を計算し、トリガーに添える。
+   * `previous-period` は直前の同じ日数、`previous-year` は 1 年前の同じ日付。比較の日付は渡さない。
+   *
+   * @example
+   * <DateRangePicker comparison="previous-year" />
+   */
+  comparison?: "previous-period" | "previous-year"
   maxDate?: Date
   minDate?: Date
   placeholder?: string
@@ -415,6 +448,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       showPresets = true,
       locale: localeProp,
       fiscalYearStartMonth,
+      comparison,
       maxDate,
       minDate,
       placeholder,
@@ -451,11 +485,19 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     const formatDateRange = () => {
       if (!value?.from) return placeholder ?? t.placeholder
       if (!value.to) return formatDate(value.from, "date", locale)
-      return `${formatDate(value.from, "date", locale)}${t.rangeSeparator}${formatDate(value.to, "date", locale)}`
+      // The same writer as the page header's period chip, so one range reads the same in both places.
+      return formatRange(value.from, value.to, { locale })
     }
     // 選んだ期間がプリセットの結果と一致するときは、日付の前にそのプリセット名を出す。
     const selectedPreset = findMatchingPreset(presets, value)
     const presetLabel = selectedPreset?.label
+    const comparisonText =
+      comparison && value?.from && value.to
+        ? (() => {
+            const c = comparisonRange({ from: value.from, to: value.to }, comparison)
+            return `${t.comparison[comparison]} ${formatRange(c.from, c.to, { locale })}`
+          })()
+        : undefined
 
     // 開いたとき、右の月が終了月・左がその前月になるよう、表示月（左の月）を決める。1 か月表示（モバイル）は終了月。
     const endMonth = value?.to ?? value?.from
@@ -492,6 +534,11 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             ) : (
               <span>{formatDateRange()}</span>
             )}
+            {comparisonText && (
+              <span data-slot="date-range-picker-comparison" className="text-muted-foreground">
+                {comparisonText}
+              </span>
+            )}
           </PopoverTrigger>
           <PopoverContent
             align={align}

package/registry/ui/delta.tsx

@@ -3,7 +3,9 @@
 "use client"
 
 /**
- * Delta — the change of a value against a comparison, rendered as arrow + signed
+ * Delta — the change of a value against a comparison, as arrow + signed change + comparison label on one line; it is not a card, so place it beside a value.
+ *
+ * It renders as arrow + signed
  * change + comparison label ("↑ +12.4% vs. prior month"; ja: "↑ +12.4% 前月比") on one line, in the page's
  * language (`<html lang>`) unless `locale` is given.
  *
@@ -191,7 +193,7 @@ const deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
+        badge: "h-5 rounded-md px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5",
       },
       sentiment: {
@@ -201,9 +203,9 @@ const deltaVariants = cva(
       },
     },
     compoundVariants: [
-      { variant: "badge", sentiment: "positive", className: "border-positive/20 bg-positive-subtle dark:border-positive/25" },
-      { variant: "badge", sentiment: "negative", className: "border-negative/20 bg-negative-subtle dark:border-negative/25" },
-      { variant: "badge", sentiment: "neutral", className: "border-neutral/20 bg-neutral-subtle dark:border-neutral/25" },
+      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
+      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
+      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" },
     ],
     defaultVariants: {
       variant: "badge",
@@ -285,6 +287,8 @@ export function deltaAriaLabel(
   return t.change(label, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up")
 }
 
+const SENTIMENT_TEXT = { positive: "text-positive", negative: "text-negative", neutral: "text-neutral" } as const
+
 export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
   (
     {
@@ -328,18 +332,41 @@ export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
         data-sentiment={result.sentiment}
         aria-label={deltaAriaLabel(result, locale, display, format, changeDigits)}
         className={cn(
-          deltaVariants({ variant, sentiment: result.sentiment }),
+          variant === "badge"
+            ? "inline-flex w-fit shrink-0 items-center gap-1.5 font-medium whitespace-nowrap tabular-nums"
+            : deltaVariants({ variant, sentiment: result.sentiment }),
+          // The chip carries the colour of the change; the root repeats it for the "—" case and for `className` consumers.
+          variant === "badge" && SENTIMENT_TEXT[result.sentiment],
           !comparable && "text-muted-foreground",
           className,
         )}
         {...props}
       >
-        {comparable && <Icon aria-hidden="true" />}
-        <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
-        {showLabel && (
-          <span aria-hidden="true" className="font-normal text-muted-foreground">
-            {result.label}
-          </span>
+        {variant === "badge" ? (
+          <>
+            <span
+              data-slot="delta-chip"
+              className={cn(deltaVariants({ variant, sentiment: result.sentiment }), !comparable && "text-muted-foreground")}
+            >
+              {comparable && <Icon aria-hidden="true" />}
+              <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+            </span>
+            {showLabel && (
+              <span aria-hidden="true" className="text-xs font-normal text-muted-foreground">
+                {result.label}
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            {comparable && <Icon aria-hidden="true" />}
+            <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+            {showLabel && (
+              <span aria-hidden="true" className="font-normal text-muted-foreground">
+                {result.label}
+              </span>
+            )}
+          </>
         )}
       </span>
     )

package/registry/ui/donut-chart.tsx

@@ -176,10 +176,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
@@ -403,6 +418,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,
@@ -2278,6 +2295,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
@@ -2491,6 +2512,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 */
@@ -2700,15 +2723,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) => {
@@ -3004,6 +3029,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
@@ -3149,6 +3182,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,
@@ -3251,7 +3286,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",