@squadbase/vantage 0.6.2-dev1.d594c56 → 0.6.2-dev1.e333781

package/registry/ui/area-chart.tsx

@@ -15,7 +15,7 @@ import { forwardRef, useMemo, type ForwardedRef, type ReactElement, type Ref } f
 import { ChartFrame } from "@squadbase/vantage/components"
 import { EChart } from "@squadbase/vantage/components"
 import type { ChartComparison, ChartForecast, NumericKeys } from "@squadbase/vantage/components"
-import { createContext, useCallback, useEffect, useRef, useState } from "react"
+import { createContext, useCallback, useEffect, useRef, useState, type RefObject } from "react"
 import type { ChartTone } from "@squadbase/vantage/components"
 import { DEFAULT_LOCALE, EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
 import type { ChartColor, ChartColors, ChartSeriesColor, ValueFormatter } from "@squadbase/vantage/components"
@@ -48,6 +48,8 @@ const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--ch
 interface ChartTokens {
   /** Resolved `--chart-1..5`, in order. */
   series: string[]
+  /** Computed `font-family` of the container, so canvas text matches the DOM. Optional. */
+  fontFamily?: string
   /** Body text: titles and the default `textStyle`. */
   foreground: string | null
   /** Secondary text: axis labels, legend, subtitles. */
@@ -56,10 +58,23 @@ interface ChartTokens {
   border: string | null
   /** Tooltip surface. */
   popover: string | null
+  /** Semantic and surface dependencies used by typed chart options. Optional for hand-built tokens. */
+  colors?: Record<string, string>
+  /** Actual inherited painting surface (may change without a token changing). */
+  surface?: string | null
   /** Tooltip text. */
   popoverForeground: string | null
 }
 
+// Keep scope out of the public token shape. A resolved snapshot remembers where arbitrary
+// var(--token) expressions must be read, without retaining unmounted charts globally.
+const tokenScopes = new WeakMap<ChartTokens, Element>()
+const OPTION_COLOR_TOKENS = [
+  "--background", "--card", "--muted", "--primary", "--destructive",
+  ...["positive", "negative", "warning", "neutral", "info"].flatMap((tone) =>
+    ["", "-fill", "-subtle"].map((suffix) => `--${tone}${suffix}`)),
+]
+
 let normalizeContext: CanvasRenderingContext2D | null | undefined
 
 /** The forms `fillStyle` serializes legacy colours to, and zrender can parse. */
@@ -115,14 +130,19 @@ function readChartTokens(el?: Element | null): ChartTokens | null {
     const color = read(token)
     if (color) series.push(color)
   }
-  return {
+  const tokens: ChartTokens = {
     series,
+    colors: Object.fromEntries(OPTION_COLOR_TOKENS.map((name) => [name, styles.getPropertyValue(name).trim()])),
+    surface: readChartSurface(target),
+    ...(styles.fontFamily ? { fontFamily: styles.fontFamily } : {}),
     foreground: read("--foreground"),
     mutedForeground: read("--muted-foreground"),
     border: read("--border"),
     popover: read("--popover"),
     popoverForeground: read("--popover-foreground"),
   }
+  tokenScopes.set(tokens, target)
+  return tokens
 }
 
 /** Structural equality, so a theme toggle that changes nothing doesn't re-init. */
@@ -130,8 +150,13 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
   if (a === b) return true
   if (!a || !b) return false
   return (
+    tokenScopes.get(a) === tokenScopes.get(b) &&
+    a.surface === b.surface &&
+    Object.keys(a.colors ?? {}).length === Object.keys(b.colors ?? {}).length &&
+    Object.entries(a.colors ?? {}).every(([name, value]) => b.colors?.[name] === value) &&
     a.series.length === b.series.length &&
     a.series.every((color, i) => color === b.series[i]) &&
+    a.fontFamily === b.fontFamily &&
     a.foreground === b.foreground &&
     a.mutedForeground === b.mutedForeground &&
     a.border === b.border &&
@@ -154,7 +179,7 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
  *    attributes alone leaves the chart painted in the previous palette until a
  *    reload — the tokens in the DOM are new, the canvas is not.
  */
-function watchChartTokens(onChange: () => void): () => void {
+function watchChartTokens(onChange: () => void, scope?: Element | null): () => void {
   if (typeof document === "undefined") return () => {}
   // Style edits arrive as bursts of mutations; coalesce them into one read, and
   // take it after the next frame so a swapped stylesheet has been applied.
@@ -169,8 +194,11 @@ function watchChartTokens(onChange: () => void): () => void {
 
   const themeObserver = new MutationObserver(schedule)
   const attributeFilter = ["class", "style", "data-theme"]
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter })
-  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter })
+  // Only the chart and its ancestors can change its inherited theme. Never observe
+  // the document subtree: canvas/tooltip/rendering mutations would trigger every chart.
+  for (let node: Element | null = scope ?? document.body ?? document.documentElement; node; node = node.parentElement) {
+    themeObserver.observe(node, { attributes: true, attributeFilter })
+  }
 
   const styleObserver = new MutationObserver(schedule)
   if (document.head) {
@@ -226,7 +254,7 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     // Let the page background show through: charts sit on cards, not on a canvas.
     backgroundColor: "transparent",
     ...(tokens.series.length > 0 ? { color: tokens.series } : {}),
-    textStyle: { color: text },
+    textStyle: { color: text, ...(tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}) },
     title: { textStyle: { color: text }, subtextStyle: { color: muted } },
     legend: { textStyle: { color: muted } },
     categoryAxis: axisTheme(tokens, false),
@@ -242,7 +270,11 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
       padding: [8, 12],
       // Rounded card with a soft shadow; in dark mode the shadow barely shows, so the border carries the edge.
       extraCssText: "border-radius:8px;box-shadow:var(--shadow-card, 0 4px 12px rgb(0 0 0 / 0.08));",
-      textStyle: { color: tokens.popoverForeground ?? undefined, fontSize: 12 },
+      textStyle: {
+        color: tokens.popoverForeground ?? undefined,
+        fontSize: 12,
+        ...(tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}),
+      },
       axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } },
     },
   }
@@ -254,22 +286,23 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
  * components that build an ECharts option from token colours themselves (the
  * typed charts), so their palette follows light/dark like `EChart`'s theme.
  */
-function useChartTokens(): ChartTokens | null {
+function useChartTokens(scope?: Element | null | RefObject<Element | null>): ChartTokens | null {
   const [tokens, setTokens] = useState<ChartTokens | null>(() => readChartTokens())
   // Compared here, not inside a `setTokens` updater: an updater that reads the DOM is
   // replayed by React on every rebase and returns a fresh object each time, so the state
   // never settles ("Maximum update depth exceeded" once the tokens change after mount).
   const tokensRef = useRef(tokens)
   useEffect(() => {
+    const target = scope && "current" in scope ? scope.current : scope
     const sync = () => {
-      const next = readChartTokens()
+      const next = readChartTokens(target)
       if (sameChartTokens(tokensRef.current, next)) return
       tokensRef.current = next
       setTokens(next)
     }
     sync()
-    return watchChartTokens(sync)
-  }, [])
+    return watchChartTokens(sync, target)
+  }, [scope])
   return tokens
 }
 
@@ -281,7 +314,7 @@ const EMBEDDED_VAR_RE = /var\(\s*(--[\w-]+)\s*\)/g
 /**
  * Turn chart colours into canvas-safe strings. `"chart-1"`〜`"chart-5"` come from
  * the resolved series tokens; `"positive"` / `"warning"` / `"negative"` / `"neutral"` (and the area
- * variants `"positive-fill"`, …) are read off the document root (`--positive`, …); `var(--token)` is read off the document root; any
+ * variants `"positive-fill"`, …) are read in the snapshot's inherited scope (`--positive`, …); `var(--token)` uses the same scope; any
  * other CSS colour is normalized like the tokens are. A colour that can't be
  * resolved comes back as `""`, which ECharts treats as "use the palette".
  */
@@ -292,12 +325,13 @@ function resolveChartColors(colors: readonly string[], tokens: ChartTokens | nul
     // Meaning colours are the theme tokens of the same name: same path as `var(--positive)`.
     if (TONE_NAME_RE.test(color.trim())) {
       if (typeof document === "undefined") return ""
-      return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue(`--${color.trim()}`)) ?? ""
+      const target = (tokens && tokenScopes.get(tokens)) ?? document.documentElement
+      return toCanvasColor(getComputedStyle(target).getPropertyValue(`--${color.trim()}`)) ?? ""
     }
     if (typeof document === "undefined") return color
     let value = color.trim()
     const cssVar = CSS_VAR_RE.exec(value)
-    const styles = getComputedStyle(document.documentElement)
+    const styles = getComputedStyle((tokens && tokenScopes.get(tokens)) ?? document.documentElement)
     if (cssVar) {
       value = styles.getPropertyValue(cssVar[1]!).trim() || (cssVar[2] ?? "").trim()
     } else if (value.includes("var(")) {
@@ -343,7 +377,7 @@ function readChartSurface(el: Element | null): string | null {
       if (color) return color
     }
   }
-  return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--background"))
+  return toCanvasColor(getComputedStyle(el ?? document.documentElement).getPropertyValue("--background"))
 }
 
 /** Widths are bucketed so a resize only rebuilds the option when the label budget can change. */
@@ -357,9 +391,10 @@ const WIDTH_BUCKET = 40
  */
 function useChartSurface<E extends Element>(
   forwarded: ForwardedRef<E>,
-  tokens: ChartTokens | null,
-): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined } {
+  tokens?: ChartTokens | null,
+): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined; tokens: ChartTokens | null } {
   const [node, setNode] = useState<E | null>(null)
+  const scopedTokens = useChartTokens(node)
   const [surface, setSurface] = useState<string | undefined>(undefined)
   const [width, setWidth] = useState<number | undefined>(undefined)
   const ref = useCallback(
@@ -373,7 +408,7 @@ function useChartSurface<E extends Element>(
   useEffect(() => {
     if (!node) return
     setSurface(readChartSurface(node) ?? undefined)
-  }, [node, tokens])
+  }, [node, tokens, scopedTokens])
   useEffect(() => {
     if (!node || typeof ResizeObserver === "undefined") return
     const update = (w: number) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET)
@@ -382,7 +417,7 @@ function useChartSurface<E extends Element>(
     observer.observe(node)
     return () => observer.disconnect()
   }, [node])
-  return { ref, surface, width }
+  return { ref, surface, width, tokens: scopedTokens }
 }
 
 /* ---------- inlined from @squadbase/squadkit registry/lib/chart-utils.ts (internal to @squadbase/vantage) ---------- */
@@ -1536,6 +1571,10 @@ const toDate = (t: ParsedTime) => new Date(t.year, t.month - 1, t.day)
 
 /** How many x labels a time axis shows at most (the step is picked so the labels never crowd). */
 const TIME_AXIS_MAX_LABELS = 6
+/** Under this plot width (px) the axis, legend and labels switch to their compact form. */
+const NARROW_PLOT_WIDTH = 400
+/** The most x labels a narrow plot shows (a 262px plot reads 4 at most). */
+const NARROW_TIME_AXIS_MAX_LABELS = 4
 
 /** Calendar-friendly label steps per granularity (every 3 months, every week …). */
 const TIME_AXIS_STEPS: Record<TimeGranularity, readonly number[]> = {
@@ -1981,7 +2020,9 @@ const LEGEND_LINE_BUDGET = 320
 /** How many lines the plain legend takes, estimated from its labels (12px text + 8px dot + gaps). */
 function legendLines(items: readonly string[], plotWidth?: number, reserve = 0): number {
   const width = items.reduce((sum, name) => sum + [...name].length * 12 + 8 + 5 + 16, 0)
-  const budget = Math.max(80, (plotWidth ? Math.min(LEGEND_LINE_BUDGET, plotWidth) : LEGEND_LINE_BUDGET) - reserve)
+  // A narrow plot has no room for the PNG buttons beside the legend: they move off its line, so no reserve.
+  const narrow = plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
+  const budget = Math.max(80, (plotWidth ? (narrow ? plotWidth : Math.min(LEGEND_LINE_BUDGET, plotWidth)) : LEGEND_LINE_BUDGET) - (narrow ? 0 : reserve))
   return Math.min(3, Math.max(1, Math.ceil(width / budget)))
 }
 
@@ -2236,7 +2277,15 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     ? null
     : timeAxisLabelStep(
         rawIndex,
-        plotWidth ? Math.max(2, Math.min(TIME_AXIS_MAX_LABELS, Math.floor(plotWidth / TIME_LABEL_WIDTH))) : undefined,
+        plotWidth
+          ? Math.max(
+              2,
+              Math.min(
+                plotWidth < NARROW_PLOT_WIDTH ? NARROW_TIME_AXIS_MAX_LABELS : TIME_AXIS_MAX_LABELS,
+                Math.floor(plotWidth / TIME_LABEL_WIDTH),
+              ),
+            )
+          : undefined,
       )
   // Plain (non-date) x labels of a line chart: thinned to every n-th so they never touch, never rotated.
   const plainStep = (() => {
@@ -2282,8 +2331,12 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           : []
   // On a narrow plot the max and the latest label would print over each other: keep the latest.
   const pointGap = plotWidth && labels.length > 1 ? plotWidth / (kind === "bar" ? labels.length : labels.length - 1) : null
+  // By default only the latest value is labelled; an explicit `highlight` keeps its max + latest.
+  const latestOnly = cfg.highlight === undefined && !shareHighlight && picked.length === 2
   const highlightPoints =
-    picked.length === 2 && pointGap !== null && Math.abs(picked[1]!.index - picked[0]!.index) * pointGap < HIGHLIGHT_LABEL_WIDTH
+    latestOnly
+      ? [picked[1]!]
+      : picked.length === 2 && pointGap !== null && Math.abs(picked[1]!.index - picked[0]!.index) * pointGap < HIGHLIGHT_LABEL_WIDTH
       ? [picked[1]!]
       : picked
 
@@ -2494,6 +2547,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           ? { width: 0, color, opacity: 0 }
           : { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
       itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
+      // Hovering a series fades the others (not for a stack, where the bands read together).
+      emphasis: stacked ? undefined : { focus: "series" as const },
       areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
       markPoint: markPointFor(c, color),
       markLine: undefined,
@@ -2940,7 +2995,10 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     legend: {
       show: showLegend,
       top: 0,
-      right: reserveActions ? ACTIONS_RESERVE : 0,
+      // 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 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -3001,7 +3059,12 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           }
         }
         const shares = percent ? cartesianSeriesValues(i <= lastActual ? [row] : [], categories, "percent") : null
-        for (const p of list) {
+        // Rows follow the legend order (categories first), not ECharts' own series order.
+        const legendRank = (p: AxisTooltipParam) => {
+          const at = categories.indexOf(p.seriesName ?? "")
+          return at === -1 ? categories.length : at
+        }
+        for (const p of [...list].sort((a, b) => legendRank(a) - legendRank(b))) {
           const color = typeof p.color === "string" ? p.color : "currentColor"
           if (p.seriesId === FORECAST_SERIES_ID) {
             // At and before the boundary the forecast repeats the actual value.
@@ -3521,9 +3584,8 @@ function AreaChartImpl<T extends Record<string, unknown>>(
   }: AreaChartProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const tokens = useChartTokens()
   // Highlight labels are backed by the surface the chart sits on (a card, the page).
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens)
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref)
   // Ticks and on-plot labels read short (¥1億); the tooltip reads the value as `format` says.
   const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format), [valueFormatter, format])
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format), [valueFormatter, format])

package/registry/ui/attention-list.tsx

@@ -0,0 +1,303 @@
+// Copied by `vantage add ui attention-list`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/attention-list.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * AttentionList — 期日超過・期限間近・リスク・滞留に当たる行を上に寄せ、理由と次の一手を添えて並べる要対応一覧。
+ * 判定は `judgeAttention`（純関数）が行い、部品は並べ替えと描画だけをする。区分の文言としきい値
+ * （`dueSoonDays` / `staleDays`）は props で渡す。業務の意味（請求・商談・契約など）は呼び元が決める。
+ *
+ * - 区分は 1 行に 1 つ。複数に当たるときは 期日超過 ＞ リスク ＞ 期限間近 ＞ 滞留 の順で強いほうを採る。
+ * - 並びは区分の強さ、同じ区分では日数の大きい（遅れている・止まっている）行が先。日数が同じなら元の順。
+ * - 区分の色は StatusBadge の意味色（negative / warning / info）。色だけでなく区分名と日数の文で伝える。
+ * - 判定に当たらない行は既定で出さない（`includeUnflagged` で末尾に出す）。当たる行がなければ Empty を出す。
+ * - 行の項目は関数（`getDueDate` など）か列名（`dueDateKey` など）で渡す。列名は JSON で書けるので、下書きはこちらを使う。
+ *   両方あれば関数が先。どちらも無ければ、期日・動き・リスクは「無い」として判定せず、行の ID は行の順番、見出しは空になる。
+ * - 行を押すと `onRowClick(row)` を呼ぶ。渡さなければ押せない行（button ではなく li）になる。
+ *
+ * @example
+ * import { AttentionList } from "@/components/attention-list"
+ * // Vantage: import { AttentionList } from "@squadbase/vantage/components"
+ *
+ * <AttentionList
+ *   rows={receivables}
+ *   asOf="2026-10-23"
+ *   dueSoonDays={7}
+ *   getRowId={(r) => r.id}
+ *   getTitle={(r) => r.customer}
+ *   getDueDate={(r) => r.dueDate}
+ *   getNextAction={(r) => r.nextAction}
+ *   onRowClick={(r) => openDetail(r.id)}
+ * />
+ */
+import { differenceInCalendarDays, parseISO } from "date-fns"
+import { useMemo, type HTMLAttributes, type ReactNode } from "react"
+
+import { formatDate } from "@squadbase/vantage/components"
+import { cn } from "@squadbase/vantage/ui"
+import { Empty } from "@squadbase/vantage/ui"
+import { StatusBadge } from "@squadbase/vantage/components"
+
+export type AttentionKind = "overdue" | "risk" | "dueSoon" | "stale"
+
+/** 強い順。並びと、複数に当たったときの採用に使う。 */
+const KIND_ORDER: readonly AttentionKind[] = ["overdue", "risk", "dueSoon", "stale"]
+
+const KIND_TONES: Record<AttentionKind, string> = {
+  overdue: "negative",
+  risk: "negative",
+  dueSoon: "warning",
+  stale: "info",
+}
+
+export const DEFAULT_ATTENTION_LABELS: Record<AttentionKind, string> = {
+  overdue: "期日超過",
+  risk: "リスク",
+  dueSoon: "期限間近",
+  stale: "滞留",
+}
+
+type DateInput = Date | string | null | undefined
+
+export interface AttentionJudgement {
+  kind: AttentionKind
+  /**
+   * overdue: 期日を過ぎた日数（1 以上）／ dueSoon: 期日までの日数（0 = 当日）／
+   * stale: 最終の動きからの日数／ risk: 0。
+   */
+  days: number
+}
+
+export interface JudgeAttentionInput {
+  /** 期日。無ければ期日の判定（超過・間近）はしない。 */
+  dueDate?: DateInput
+  /** 最後に動きがあった日。無ければ滞留の判定はしない。 */
+  lastActivityAt?: DateInput
+  /** 呼び元がリスクと判定した行。 */
+  risk?: boolean
+  /** 基準日。必ず渡す（部品の内で「今日」を決めない）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。当日を含み、この日数ちょうども含む。既定 7。 */
+  dueSoonDays?: number
+  /** 何日動きがなければ「滞留」にするか。この日数ちょうどから滞留。未指定なら滞留は判定しない。 */
+  staleDays?: number
+}
+
+function toDate(value: DateInput): Date | null {
+  if (value === null || value === undefined || value === "") return null
+  const date = typeof value === "string" ? parseISO(value) : value
+  return Number.isFinite(date.getTime()) ? date : null
+}
+
+/**
+ * 1 行が要対応かを判定する。当たらなければ `null`。日数は暦日（時刻は無視）で数える。
+ * 期日の当日は「超過」ではなく「期限間近（0 日）」。
+ */
+export function judgeAttention(input: JudgeAttentionInput): AttentionJudgement | null {
+  const asOf = toDate(input.asOf)
+  if (!asOf) return null
+  const dueSoonDays = input.dueSoonDays ?? 7
+
+  const due = toDate(input.dueDate)
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue < 0) return { kind: "overdue", days: -untilDue }
+  }
+  if (input.risk) return { kind: "risk", days: 0 }
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue <= dueSoonDays) return { kind: "dueSoon", days: untilDue }
+  }
+  const last = toDate(input.lastActivityAt)
+  if (last && input.staleDays !== undefined) {
+    const idle = differenceInCalendarDays(asOf, last)
+    if (idle >= input.staleDays) return { kind: "stale", days: idle }
+  }
+  return null
+}
+
+/** 区分の強さ → 日数の大きい順（dueSoon は期日が近い順）。同順位は 0 を返し、元の順を保つ。 */
+export function compareAttention(a: AttentionJudgement | null, b: AttentionJudgement | null): number {
+  if (!a || !b) return a ? -1 : b ? 1 : 0
+  const byKind = KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind)
+  if (byKind !== 0) return byKind
+  return a.kind === "dueSoon" ? a.days - b.days : b.days - a.days
+}
+
+function defaultReason(j: AttentionJudgement, labels: Record<AttentionKind, string>): string {
+  switch (j.kind) {
+    case "overdue":
+      return `期日を ${j.days} 日過ぎています`
+    case "dueSoon":
+      return j.days === 0 ? "期日は今日です" : `期日まであと ${j.days} 日です`
+    case "stale":
+      return `${j.days} 日間動きがありません`
+    case "risk":
+      return labels.risk
+  }
+}
+
+export interface AttentionListProps<T> {
+  rows: T[]
+  /** 基準日（`"2026-10-23"` か Date）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。既定 7。 */
+  dueSoonDays?: number
+  /** この日数動きがなければ「滞留」。未指定なら滞留は判定しない。 */
+  staleDays?: number
+  /** 区分名の差し替え（例: `{ overdue: "入金遅れ" }`）。 */
+  labels?: Partial<Record<AttentionKind, string>>
+  /** 行の ID。省略時は `idKey` の列、それも無ければ行の順番。 */
+  getRowId?: (row: T) => string
+  /** 行の見出し（顧客名・案件名など）。省略時は `titleKey` の列、それも無ければ空。 */
+  getTitle?: (row: T) => ReactNode
+  getDueDate?: (row: T) => DateInput
+  getLastActivityAt?: (row: T) => DateInput
+  /** リスクと判定する行。期日・滞留より先に出す。 */
+  isRisk?: (row: T) => boolean
+  /** 行の ID の列名（JSON で書ける `getRowId`）。 */
+  idKey?: string
+  /** 見出しの列名（JSON で書ける `getTitle`）。 */
+  titleKey?: string
+  /** 期日の列名（JSON で書ける `getDueDate`）。値は `"2026-10-23"` 形式の日付か Date。 */
+  dueDateKey?: string
+  /** 最後に動きがあった日の列名（JSON で書ける `getLastActivityAt`）。 */
+  lastActivityAtKey?: string
+  /** リスクの列名（JSON で書ける `isRisk`）。値が真の行をリストにする。 */
+  riskKey?: string
+  /** 次の一手の列名（JSON で書ける `getNextAction`）。値が空の行には添えない。 */
+  nextActionKey?: string
+  /** 理由の文。省略すると区分と日数から作る。 */
+  getReason?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 次の一手。判定に当たる行に添える。 */
+  getNextAction?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 見出しの右に出す補足（金額・担当者など）。 */
+  getMeta?: (row: T) => ReactNode
+  /** 行を押したとき。渡すと行が button になる。 */
+  onRowClick?: (row: T) => void
+  /** 判定に当たらない行も末尾に出す。既定 false。 */
+  includeUnflagged?: boolean
+  /** 該当なしのときの見出し・説明。 */
+  emptyTitle?: string
+  emptyDescription?: string
+  className?: string
+}
+
+function cell(row: unknown, key: string | undefined): unknown {
+  if (!key || row === null || typeof row !== "object") return undefined
+  return (row as Record<string, unknown>)[key]
+}
+
+function asDateInput(value: unknown): DateInput {
+  return typeof value === "string" || value instanceof Date ? value : undefined
+}
+
+function asNode(value: unknown): ReactNode {
+  return typeof value === "string" || typeof value === "number" ? value : null
+}
+
+export function AttentionList<T>({
+  rows,
+  asOf,
+  dueSoonDays,
+  staleDays,
+  labels,
+  getRowId,
+  getTitle,
+  getDueDate,
+  getLastActivityAt,
+  isRisk,
+  idKey,
+  titleKey,
+  dueDateKey,
+  lastActivityAtKey,
+  riskKey,
+  nextActionKey,
+  getReason,
+  getNextAction,
+  getMeta,
+  onRowClick,
+  includeUnflagged = false,
+  emptyTitle = "対応が必要な項目はありません",
+  emptyDescription,
+  className,
+  ...rest
+}: AttentionListProps<T> & Omit<HTMLAttributes<HTMLUListElement>, keyof AttentionListProps<T>>) {
+  const mergedLabels = useMemo(() => ({ ...DEFAULT_ATTENTION_LABELS, ...labels }), [labels])
+  const colorMap = KIND_TONES
+  const dueOf = (row: T) => (getDueDate ? getDueDate(row) : asDateInput(cell(row, dueDateKey)))
+  const nextActionOf = (row: T, j: AttentionJudgement): ReactNode =>
+    getNextAction ? getNextAction(row, j) : asNode(cell(row, nextActionKey))
+
+  // アクセサは呼び元の判定そのものなので、rows が同じ参照でも毎回かけ直す（メモ化すると古い判定が残る）
+  const items = (rows ?? [])
+    .map((row, index) => ({
+      row,
+      index,
+      judgement: judgeAttention({
+        dueDate: dueOf(row),
+        lastActivityAt: getLastActivityAt ? getLastActivityAt(row) : asDateInput(cell(row, lastActivityAtKey)),
+        risk: isRisk ? isRisk(row) : Boolean(cell(row, riskKey)),
+        asOf,
+        dueSoonDays,
+        staleDays,
+      }),
+    }))
+    .filter((item) => includeUnflagged || item.judgement)
+    .sort((a, b) => compareAttention(a.judgement, b.judgement) || a.index - b.index)
+
+  if (items.length === 0) {
+    return <Empty title={emptyTitle} description={emptyDescription} className={className} />
+  }
+
+  return (
+    <ul data-slot="attention-list" className={cn("divide-y divide-border", className)} {...rest}>
+      {items.map(({ row, index, judgement }) => {
+        const due = dueOf(row)
+        const body = (
+          <>
+            <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+              {judgement && (
+                <StatusBadge status={judgement.kind} label={mergedLabels[judgement.kind]} colorMap={colorMap} />
+              )}
+              <span className="min-w-0 font-medium">{getTitle ? getTitle(row) : asNode(cell(row, titleKey))}</span>
+              {getMeta && <span className="text-sm tabular-nums text-muted-foreground">{getMeta(row)}</span>}
+              {due ? (
+                <span className="ml-auto text-sm tabular-nums text-muted-foreground">
+                  期日 {formatDate(due)}
+                </span>
+              ) : null}
+            </div>
+            {judgement && (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels)}
+              </p>
+            )}
+            {judgement && (getNextAction || nextActionKey) && nextActionOf(row, judgement) ? (
+              <p className="mt-1 text-sm">
+                <span className="text-muted-foreground">次の一手: </span>
+                {nextActionOf(row, judgement)}
+              </p>
+            ) : null}
+          </>
+        )
+        return (
+          <li key={getRowId ? getRowId(row) : String(cell(row, idKey) ?? index)} data-slot="attention-list-row">
+            {onRowClick ? (
+              <button
+                type="button"
+                onClick={() => onRowClick(row)}
+                className="block w-full px-3 py-3 text-left transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {body}
+              </button>
+            ) : (
+              <div className="px-3 py-3">{body}</div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+AttentionList.displayName = "AttentionList"