@godxjp/ui 33.15.0 → 33.16.0

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 170 components, 2251 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.15.0.
+> A Japanese-enterprise React design system: 171 components, 2257 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.16.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.15.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.16.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -16,10 +16,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 28 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 53 KB — all 170 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 54 KB — all 171 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–38 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.3 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 218 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1920 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 218 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1926 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 44 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 35 shapes that make generated UI look generated, each with its fix.
@@ -27,7 +27,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v33.15.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.16.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -5291,6 +5291,42 @@
     "tier": "component",
     "value": "var(--space-1)"
   },
+  {
+    "description": "Gap between DashboardGrid tiles, both axes (#1397).",
+    "name": "--dashboard-grid-gap",
+    "tier": "component",
+    "value": "var(--space-4)"
+  },
+  {
+    "description": "Height of one grid row; a tile's `h` is a multiple of it.",
+    "name": "--dashboard-grid-row-height",
+    "tier": "component",
+    "value": "var(--space-20)"
+  },
+  {
+    "description": "Size of the drag and resize handles in edit mode (≥24px target).",
+    "name": "--dashboard-grid-handle-size",
+    "tier": "component",
+    "value": "var(--control-height)"
+  },
+  {
+    "description": "Inset of the resize handle from the tile's bottom-end corner.",
+    "name": "--dashboard-grid-handle-inset",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
+  {
+    "description": "Corner radius of a tile; defaults to the Card radius.",
+    "name": "--dashboard-grid-item-radius",
+    "tier": "component",
+    "value": "var(--card-radius)"
+  },
+  {
+    "description": "Colour of the drop-preview ring while moving or resizing (role-mirror knob; defaults to the focus ring colour).",
+    "name": "--dashboard-grid-preview-ring-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Accordion chevron and Carousel arrow. Both were bare 1rem literals in data-display-layout.css — glyphs with no tier-2 route, invisible to the icon ratchet because neither selector contains the word \"icon\".",
     "name": "--accordion-chevron-size",
@@ -12588,7 +12624,7 @@
     "value": "0px"
   },
   {
-    "description": "Table · stacked-record-collection preset (gh#293 restore — SCR-215) — the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a bordered key-value card; these tokens own the card's own geometry (unlike action-collection, there is no column-priority measure to retune — the whole row becomes one block).",
+    "description": "Table · stacked-record-collection preset (gh#293 restore — SCR-215) — the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a continuous key-value record; these tokens own the record's geometry (unlike action-collection, there is no column-priority measure to retune — the whole row becomes one block).",
     "name": "--table-stacked-collection-card-padding-y",
     "tier": "component",
     "value": "var(--space-stack-sm)"
@@ -12603,7 +12639,7 @@
     "description": "Table component tokens: row height, cell padding.",
     "name": "--table-stacked-collection-card-gap",
     "tier": "component",
-    "value": "var(--space-stack-sm)"
+    "value": "0"
   },
   {
     "description": "Table component tokens: row height, cell padding.",

package/dist/components/charts/chart-cartesian.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChartDatum, ChartSeriesProp } from "../../props/components/charts.prop.js";
+import type { ChartDatum, ChartSeriesProp, ChartDatumSelect } from "../../props/components/charts.prop.js";
 /**
  * Shared cartesian renderer for Line / Bar / Area. Internal — the filename pascal
  * (`ChartCartesian`) is intentionally NOT exported, so this is not a catalog entry.
@@ -21,6 +21,7 @@ type CartesianChartProps = {
     valueTicks?: number[];
     numberFormat?: Intl.NumberFormatOptions;
     emptyMessage?: string;
+    onDatumSelect?: ChartDatumSelect;
     onCategoryClick?: (datum: ChartDatum, index: number) => void;
     className?: string;
     id?: string;
@@ -33,5 +34,5 @@ type CartesianChartProps = {
     /** bar */
     horizontal?: boolean;
 };
-export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, valueDomain, valueTicks, numberFormat, emptyMessage, onCategoryClick, className, id, curved, showDots, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
+export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, valueDomain, valueTicks, numberFormat, emptyMessage, onCategoryClick, onDatumSelect, className, id, curved, showDots, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
 export {};

package/dist/components/charts/chart-cartesian.js

@@ -2,6 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
+  Dot,
+  Rectangle,
   Area,
   AreaChart as RAreaChart,
   Bar,
@@ -22,6 +24,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
 import { buildCartesianSummary } from "./chart-summary.js";
 import { useCategoryAxisMetrics } from "./chart-category-axis.js";
+import { useChartDatumSelection } from "./chart-datum-selection.js";
 import { listFormat } from "../../lib/intl-cache.js";
 function CartesianChart({
   kind,
@@ -40,6 +43,7 @@ function CartesianChart({
   numberFormat,
   emptyMessage,
   onCategoryClick,
+  onDatumSelect,
   className,
   id,
   curved = false,
@@ -51,6 +55,71 @@ function CartesianChart({
   const { t, locale } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
   const list = React.useMemo(() => listFormat(locale, { style: "narrow", type: "unit" }), [locale]);
+  const points = series.flatMap(
+    (s, seriesIndex) => data.flatMap(
+      (datum, index) => typeof datum[s.dataKey] === "number" && Number.isFinite(datum[s.dataKey]) ? [{ index, series: seriesIndex }] : []
+    )
+  );
+  const markProps = useChartDatumSelection(points);
+  const mark = (seriesIndex, shape, raw) => {
+    const s = series[seriesIndex];
+    const props = raw;
+    const { x = 0, y = 0, width = 0, height: height2 = 0 } = props;
+    const index = props.index;
+    const datum = data[index];
+    if (!datum || typeof datum[s.dataKey] !== "number" || !Number.isFinite(datum[s.dataKey]))
+      return /* @__PURE__ */ jsx("g", {});
+    const action = markProps(
+      index,
+      seriesIndex,
+      t("chart.datumLabel", {
+        label: String(datum[categoryKey] ?? ""),
+        series: s.label ?? s.dataKey,
+        value: fmt.format(Number(datum[s.dataKey]))
+      }),
+      () => onDatumSelect?.(datum, { seriesKey: s.dataKey, index })
+    );
+    return shape === "bar" ? /* @__PURE__ */ jsxs("g", { ...action, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: Math.min(x, x + width),
+          y: Math.min(y, y + height2),
+          width: Math.abs(width),
+          height: Math.abs(height2),
+          className: "ui-chart-bar-hit",
+          fill: "transparent",
+          style: {
+            "--chart-mark-width": `${Math.abs(width)}px`,
+            "--chart-mark-height": `${Math.abs(height2)}px`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Rectangle,
+        {
+          x: props.x,
+          y: props.y,
+          width: props.width,
+          height: props.height,
+          fill: props.fill,
+          radius: 2
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("g", { ...action, children: [
+      /* @__PURE__ */ jsx("circle", { cx: props.cx, cy: props.cy, className: "ui-chart-point-hit", fill: "transparent" }),
+      /* @__PURE__ */ jsx(Dot, { cx: props.cx, cy: props.cy, fill: chartColor(seriesIndex, s.color) })
+    ] });
+  };
+  const markRef = React.useRef(mark);
+  markRef.current = mark;
+  const shapes = React.useMemo(
+    () => Array.from({ length: series.length }, (_, i) => ({
+      bar: (raw) => markRef.current(i, "bar", raw),
+      dot: (raw) => markRef.current(i, "dot", raw)
+    })),
+    [series.length]
+  );
   const hasData = data.length > 0 && series.length > 0;
   const summary = buildCartesianSummary(
     data,
@@ -161,59 +230,90 @@ function CartesianChart({
   const onBarClick = onCategoryClick ? (_entry, index) => pickCategory(index) : void 0;
   const chart = () => {
     if (kind === "line") {
-      return /* @__PURE__ */ jsxs(RLineChart, { data, onClick: onChartClick, children: [
-        axes(true),
-        series.map((s, i) => /* @__PURE__ */ jsx(
-          Line,
-          {
-            type: curve,
-            dataKey: s.dataKey,
-            name: s.label ?? s.dataKey,
-            stroke: chartColor(i, s.color),
-            dot: showDots
-          },
-          s.dataKey
-        ))
-      ] });
+      return /* @__PURE__ */ jsxs(
+        RLineChart,
+        {
+          accessibilityLayer: onDatumSelect ? false : void 0,
+          data,
+          onClick: onChartClick,
+          children: [
+            axes(true),
+            series.map((s, i) => /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: curve,
+                dataKey: s.dataKey,
+                name: s.label ?? s.dataKey,
+                stroke: chartColor(i, s.color),
+                dot: onDatumSelect ? shapes[i].dot : showDots,
+                activeDot: onDatumSelect ? false : void 0,
+                isAnimationActive: onDatumSelect ? false : void 0
+              },
+              s.dataKey
+            ))
+          ]
+        }
+      );
     }
     if (kind === "area") {
-      return /* @__PURE__ */ jsxs(RAreaChart, { data, onClick: onChartClick, children: [
-        axes(true),
-        series.map((s, i) => /* @__PURE__ */ jsx(
-          Area,
-          {
-            type: curve,
-            dataKey: s.dataKey,
-            name: s.label ?? s.dataKey,
-            stackId: stacked ? "stack" : void 0,
-            stroke: chartColor(i, s.color),
-            fill: s.fillColor ?? chartColor(i, s.color),
-            dot: showDots
-          },
-          s.dataKey
-        ))
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(RBarChart, { data, layout: horizontal ? "vertical" : "horizontal", children: [
-      axes(!horizontal),
-      series.map((s, i) => /* @__PURE__ */ jsx(
-        Bar,
+      return /* @__PURE__ */ jsxs(
+        RAreaChart,
         {
-          dataKey: s.dataKey,
-          name: s.label ?? s.dataKey,
-          stackId: stacked ? "stack" : void 0,
-          fill: chartColor(i, s.color),
-          radius: 2,
-          onClick: onBarClick,
-          background: onCategoryClick ? { fill: "transparent" } : void 0
-        },
-        s.dataKey
-      ))
-    ] });
+          accessibilityLayer: onDatumSelect ? false : void 0,
+          data,
+          onClick: onChartClick,
+          children: [
+            axes(true),
+            series.map((s, i) => /* @__PURE__ */ jsx(
+              Area,
+              {
+                type: curve,
+                dataKey: s.dataKey,
+                name: s.label ?? s.dataKey,
+                stackId: stacked ? "stack" : void 0,
+                stroke: chartColor(i, s.color),
+                fill: s.fillColor ?? chartColor(i, s.color),
+                dot: onDatumSelect ? shapes[i].dot : showDots,
+                activeDot: onDatumSelect ? false : void 0,
+                isAnimationActive: onDatumSelect ? false : void 0
+              },
+              s.dataKey
+            ))
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      RBarChart,
+      {
+        accessibilityLayer: onDatumSelect ? false : void 0,
+        data,
+        layout: horizontal ? "vertical" : "horizontal",
+        children: [
+          axes(!horizontal),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.label ?? s.dataKey,
+              stackId: stacked ? "stack" : void 0,
+              fill: chartColor(i, s.color),
+              radius: 2,
+              shape: onDatumSelect ? shapes[i].bar : void 0,
+              isAnimationActive: onDatumSelect ? false : void 0,
+              onClick: onBarClick,
+              background: onCategoryClick ? { fill: "transparent" } : void 0
+            },
+            s.dataKey
+          ))
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
+      interactive: !!onDatumSelect,
       label,
       showCaption,
       description,

package/dist/components/charts/chart-datum-selection.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+/** Roving mark focus. Geometry stays in recharts; data identity stays in the original array. */
+export declare function useChartDatumSelection(points: {
+    index: number;
+    series: number;
+}[]): (index: number, series: number, name: string, select: () => void) => {
+    role: string;
+    "aria-label": string;
+    "data-chart-datum": string;
+    className: string;
+    tabIndex: number;
+    onFocus: (event: React.FocusEvent<SVGElement>) => void;
+    onClick: (event: React.MouseEvent<SVGElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<SVGElement>) => void;
+};

package/dist/components/charts/chart-datum-selection.js

@@ -0,0 +1,97 @@
+"use client";
+import * as React from "react";
+function useChartDatumSelection(points) {
+  const active = React.useRef("");
+  const recovery = React.useRef(null);
+  React.useEffect(() => () => recovery.current?.(), []);
+  const key = (index, series) => `${series}:${index}`;
+  const keys = points.map((p) => key(p.index, p.series));
+  const current = keys.includes(active.current) ? active.current : keys[0];
+  const activate = (node, select) => {
+    const canvas = node.closest(".ui-chart-canvas");
+    const identity = node.dataset.chartDatum;
+    recovery.current?.();
+    let focused = node;
+    const stop = () => {
+      observer.disconnect();
+      document.removeEventListener("keydown", stop, true);
+      document.removeEventListener("pointerdown", stop, true);
+      document.removeEventListener("focusin", onFocusIn, true);
+    };
+    const onFocusIn = (event) => {
+      if (event.target !== focused) stop();
+    };
+    const observer = new MutationObserver(() => {
+      if (focused.isConnected || !canvas?.isConnected || document.activeElement !== document.body)
+        return;
+      const replacement = Array.from(
+        canvas.querySelectorAll("[data-chart-datum]")
+      ).find((mark) => mark.dataset.chartDatum === identity);
+      if (replacement) {
+        focused = replacement;
+        replacement.focus();
+      }
+    });
+    recovery.current = stop;
+    if (canvas) observer.observe(canvas, { childList: true, subtree: true });
+    document.addEventListener("keydown", stop, true);
+    document.addEventListener("pointerdown", stop, true);
+    document.addEventListener("focusin", onFocusIn, true);
+    select();
+  };
+  return (index, series, name, select) => ({
+    role: "button",
+    "aria-label": name,
+    "data-chart-datum": key(index, series),
+    className: "ui-chart-datum ui-focus-ring",
+    tabIndex: current === key(index, series) ? 0 : -1,
+    onFocus: (event) => {
+      event.stopPropagation();
+      active.current = key(index, series);
+      event.currentTarget.closest(".ui-chart-canvas")?.querySelectorAll("[data-chart-datum]").forEach((node) => {
+        node.tabIndex = node === event.currentTarget ? 0 : -1;
+      });
+    },
+    onClick: (event) => {
+      event.stopPropagation();
+      event.currentTarget.focus();
+      activate(event.currentTarget, select);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.repeat) activate(event.currentTarget, select);
+        return;
+      }
+      const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+      let target;
+      const along = event.key === "ArrowRight" ? rtl ? -1 : 1 : event.key === "ArrowLeft" ? rtl ? 1 : -1 : 0;
+      const across = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+      if (along) {
+        const row = points.filter((p) => p.series === series);
+        const at = row.findIndex((p) => p.index === index);
+        target = row[Math.max(0, Math.min(row.length - 1, at + along))];
+      } else if (across) {
+        const column = points.filter((p) => p.index === index);
+        const at = column.findIndex((p) => p.series === series);
+        target = column[Math.max(0, Math.min(column.length - 1, at + across))];
+      } else if (event.key === "Home" || event.key === "End") {
+        const row = event.ctrlKey || event.metaKey ? points : points.filter((p) => p.series === series);
+        target = event.key === "Home" ? row[0] : row.at(-1);
+      } else return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!target) return;
+      const next = key(target.index, target.series);
+      const canvas = event.currentTarget.closest(".ui-chart-canvas");
+      const mark = Array.from(
+        canvas?.querySelectorAll("[data-chart-datum]") ?? []
+      ).find((node) => node.dataset.chartDatum === next);
+      mark?.focus();
+    }
+  });
+}
+export {
+  useChartDatumSelection
+};

package/dist/components/charts/chart-frame.d.ts

@@ -16,6 +16,7 @@ export declare function chartHeight(size?: "xs" | "sm" | "md" | "lg", height?: n
 /** A locale-bound number formatter for the active app locale. */
 export declare function useChartNumberFormat(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 type ChartFrameProps = {
+    interactive?: boolean;
     /** Visible caption; also the accessible name via `aria-labelledby` → `<figcaption>`. */
     label: React.ReactNode;
     /**
@@ -54,5 +55,5 @@ type ChartFrameProps = {
  * in a `role="img"` element with a short `aria-label`; the full data is exposed as
  * a sibling visually-hidden list referenced by the figure's `aria-describedby`.
  */
-export declare function ChartFrame({ label, showCaption, description, summaryRows, imgSummary, hasData, height, size, footer, className, id, children, ref, canvasRef, canvasExtra, }: ChartFrameProps): React.JSX.Element;
+export declare function ChartFrame({ interactive, label, showCaption, description, summaryRows, imgSummary, hasData, height, size, footer, className, id, children, ref, canvasRef, canvasExtra, }: ChartFrameProps): React.JSX.Element;
 export {};

package/dist/components/charts/chart-frame.js

@@ -29,6 +29,7 @@ function useChartNumberFormat(options) {
   return React.useMemo(() => numberFormat(locale, options), [locale, options]);
 }
 function ChartFrame({
+  interactive = false,
   label,
   showCaption = true,
   description,
@@ -66,7 +67,7 @@ function ChartFrame({
             ref: canvasRef,
             className: "ui-chart-canvas",
             style: { height },
-            role: "img",
+            role: interactive ? "group" : "img",
             "aria-label": imgSummary,
             children: [
               children,

package/dist/components/charts/heatmap-chart.d.ts

@@ -16,4 +16,4 @@ export type { HeatmapChartProp, HeatmapChartProp as HeatmapChartProps, HeatmapCa
  * - **Narrow screens** — the matrix never shrinks a cell below its `size` tier; it scrolls inside
  *   its own box with the row header pinned, so the page never scrolls sideways.
  */
-export declare function HeatmapChart({ rows, columns, data, label, showCaption, description, size, numberFormat, topN, showLegend, emptyMessage, className, id, ref, }: HeatmapChartProp): React.JSX.Element;
+export declare function HeatmapChart({ onDatumSelect, rows, columns, data, label, showCaption, description, size, numberFormat, topN, showLegend, emptyMessage, className, id, ref, }: HeatmapChartProp): React.JSX.Element;

package/dist/components/charts/heatmap-chart.js

@@ -11,6 +11,7 @@ const OPEN_DELAY = 200;
 const CLOSE_GRACE = 100;
 const RAMP = Array.from({ length: HEAT_STEPS }, (_, index) => index + 1);
 function HeatmapChart({
+  onDatumSelect,
   rows,
   columns,
   data,
@@ -91,6 +92,12 @@ function HeatmapChart({
       reveal(cell);
     }
   };
+  const selectCell = (r, c) => {
+    const index = data.findIndex(
+      (datum) => String(datum.row) === String(rows[r]?.key) && String(datum.column) === String(columns[c]?.key) && typeof datum.value === "number" && Number.isFinite(datum.value)
+    );
+    if (index >= 0) onDatumSelect?.(data[index], { seriesKey: String(columns[c].key), index });
+  };
   const onGridKeyDown = (event) => {
     const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
     const lastRow = rows.length - 1;
@@ -193,6 +200,19 @@ function HeatmapChart({
                         },
                         tabIndex: r === activeRow && c === activeColumn ? 0 : -1,
                         className: "ui-chart-heatmap-cell ui-focus-ring",
+                        "data-interactive": onDatumSelect && !empty ? "" : void 0,
+                        "aria-label": onDatumSelect ? t("chart.heatmapCell", {
+                          row: row.label,
+                          column: column.label,
+                          value: text.value
+                        }) : void 0,
+                        onKeyDown: onDatumSelect ? (event) => {
+                          if (event.key !== "Enter" && event.key !== " ") return;
+                          event.preventDefault();
+                          event.stopPropagation();
+                          if (!event.repeat && !empty) selectCell(r, c);
+                        } : void 0,
+                        onClick: onDatumSelect && !empty ? () => selectCell(r, c) : void 0,
                         "data-step": empty ? void 0 : model.steps.get(key),
                         "data-empty": empty ? "" : void 0,
                         "data-emphasized": model.ranks.has(key) ? "" : void 0,

package/dist/components/charts/index.d.ts

@@ -16,5 +16,5 @@ export { AreaChart } from "./area-chart.js";
 export type { AreaChartProp, AreaChartProps } from "./area-chart.js";
 export { PieChart } from "./pie-chart.js";
 export type { PieChartProp, PieChartProps } from "./pie-chart.js";
-export type { ChartSeriesProp, ChartDatum } from "../../props/components/charts.prop.js";
+export type { ChartSeriesProp, ChartDatum, ChartDatumSelect } from "../../props/components/charts.prop.js";
 export { CHART_COLORS } from "./chart-frame.js";

package/dist/components/charts/pie-chart.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { PieChartProp } from "../../props/components/charts.prop.js";
 export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/components/charts.prop.js";
 /**
@@ -5,4 +6,4 @@ export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/c
  * Import from the tree-shaken `@godxjp/ui/charts` entry; requires the `recharts`
  * optional peer dependency.
  */
-export declare function PieChart({ data, dataKey, nameKey, colors, label, showCaption, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): import("react").JSX.Element;
+export declare function PieChart({ onDatumSelect, data, dataKey, nameKey, colors, label, showCaption, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): React.JSX.Element;

package/dist/components/charts/pie-chart.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import {
   Cell,
+  Sector,
   Legend,
   Pie,
   PieChart as RPieChart,
@@ -12,8 +14,10 @@ import {
 import { EmptyState } from "../data-display/empty-state.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
+import { useChartDatumSelection } from "./chart-datum-selection.js";
 import { buildPieSummary } from "./chart-summary.js";
 function PieChart({
+  onDatumSelect,
   data,
   dataKey,
   nameKey,
@@ -33,6 +37,34 @@ function PieChart({
   assertRechartsPeer();
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
+  const points = data.flatMap(
+    (datum, index) => typeof datum[dataKey] === "number" && Number.isFinite(datum[dataKey]) && Number(datum[dataKey]) > 0 ? [{ index, series: 0 }] : []
+  );
+  const markProps = useChartDatumSelection(points);
+  const shape = (raw) => {
+    const props = raw;
+    const datum = data[props.index];
+    if (!datum || !points.some((p) => p.index === props.index)) return /* @__PURE__ */ jsx("g", {});
+    return /* @__PURE__ */ jsx(
+      Sector,
+      {
+        ...props,
+        ...markProps(
+          props.index,
+          0,
+          t("chart.datumLabel", {
+            label: String(datum[nameKey] ?? ""),
+            series: dataKey,
+            value: fmt.format(Number(datum[dataKey]))
+          }),
+          () => onDatumSelect?.(datum, { seriesKey: dataKey, index: props.index })
+        )
+      }
+    );
+  };
+  const shapeRef = React.useRef(shape);
+  shapeRef.current = shape;
+  const stableShape = React.useCallback((raw) => shapeRef.current(raw), []);
   const hasData = data.length > 0;
   const summary = buildPieSummary(
     data,
@@ -45,6 +77,7 @@ function PieChart({
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
+      interactive: !!onDatumSelect,
       label,
       showCaption,
       description,
@@ -54,10 +87,12 @@ function PieChart({
       height: resolvedHeight,
       className,
       id,
-      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(RPieChart, { children: [
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(RPieChart, { accessibilityLayer: onDatumSelect ? false : void 0, children: [
         /* @__PURE__ */ jsx(
           Pie,
           {
+            shape: onDatumSelect ? stableShape : void 0,
+            isAnimationActive: onDatumSelect ? false : void 0,
             data,
             dataKey,
             nameKey,

package/dist/components/charts/recharts-peer.d.ts

@@ -32,7 +32,7 @@ export declare const RECHARTS_PEER_MESSAGE: string;
  * recharts-backed chart before it renders anything.
  */
 export declare function assertRechartsPeer(): void;
-export declare const Area: <DataPointType = any, ValueAxisType = any>(props: peer.AreaProps<DataPointType, ValueAxisType>) => import("react").ReactElement, AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
+export declare const Dot: import("react").FC<peer.DotProps>, Rectangle: import("react").FC<peer.RectangleProps>, Sector: import("react").FC<peer.SectorProps>, Area: <DataPointType = any, ValueAxisType = any>(props: peer.AreaProps<DataPointType, ValueAxisType>) => import("react").ReactElement, AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
     ref?: React.Ref<SVGSVGElement>;
 }) => React.ReactElement, Bar: <DataPointType = any, ValueAxisType = any>(props: peer.BarProps<DataPointType, ValueAxisType>) => import("react").ReactElement, BarChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
     ref?: React.Ref<SVGSVGElement>;