@godxjp/ui 33.14.0 → 33.16.0

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>;

package/dist/components/charts/recharts-peer.js

@@ -8,6 +8,9 @@ function assertRechartsPeer() {
   }
 }
 const {
+  Dot,
+  Rectangle,
+  Sector,
   Area,
   AreaChart,
   Bar,
@@ -31,13 +34,16 @@ export {
   BarChart,
   CartesianGrid,
   Cell,
+  Dot,
   Legend,
   Line,
   LineChart,
   Pie,
   PieChart,
   RECHARTS_PEER_MESSAGE,
+  Rectangle,
   ResponsiveContainer,
+  Sector,
   Tooltip,
   XAxis,
   YAxis,

package/dist/components/data-entry/upload.js

@@ -119,6 +119,7 @@ function Upload({
   const fieldName = React.useContext(FieldNameContext);
   const triggerId = React.useId();
   const selectionId = React.useId();
+  const dropzoneHintId = React.useId();
   const triggerRef = React.useRef(null);
   const ownAriaLabel = fieldA11y["aria-label"];
   const callerAriaLabel = !fieldLabelledBy || fieldName && ownAriaLabel !== fieldName.label ? ownAriaLabel : void 0;
@@ -476,6 +477,12 @@ function Upload({
     if (!disabled && openFileDialogOnClick) inputRef.current?.click();
   };
   if (variant === "dropzone") {
+    const hintText = t("dataEntry.upload.dropzoneHint");
+    const named = triggerA11y(hintText);
+    const dropzoneA11y = callerAriaLabel !== void 0 ? { ...named, "aria-label": callerAriaLabel } : {
+      ...named,
+      "aria-labelledby": named["aria-labelledby"] ? `${fieldLabelledBy} ${dropzoneHintId}` : dropzoneHintId
+    };
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
@@ -487,8 +494,7 @@ function Upload({
           role: openFileDialogOnClick ? "button" : "group",
           tabIndex: disabled ? -1 : 0,
           "aria-disabled": disabled,
-          ...triggerA11y(t("dataEntry.upload.dropzoneLabel")),
-          "aria-label": callerAriaLabel ?? t("dataEntry.upload.dropzoneLabel"),
+          ...dropzoneA11y,
           onClick: openPicker,
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -515,7 +521,7 @@ function Upload({
           className: "ui-upload-dropzone",
           children: [
             /* @__PURE__ */ jsx(UploadIcon, { className: "ui-upload-dropzone-icon", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
+            /* @__PURE__ */ jsx("p", { id: dropzoneHintId, className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
             /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-meta", children: t("dataEntry.upload.dropzoneMeta") })
           ]
         }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.14.0",
+  "version": "33.16.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -74,7 +74,6 @@
       "presetEmpty": "Empty"
     },
     "upload": {
-      "dropzoneLabel": "Upload files",
       "dropzoneHint": "Drag and drop files here, or click to browse",
       "dropzoneMeta": "Selected files appear here.",
       "buttonLabel": "Choose file",
@@ -798,6 +797,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "No data to display",
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
@@ -869,5 +869,14 @@
         "error": "failed"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "Move {label}",
+    "resize": "Resize {label}",
+    "hint": "Enter or Space grabs and drops. Arrow keys move; Shift and arrows resize. Escape cancels.",
+    "grabbed": "Grabbed {label}. Column {x}, row {y}, width {w}, height {h}.",
+    "moved": "{label}. Column {x}, row {y}, width {w}, height {h}.",
+    "dropped": "Saved {label}. Column {x}, row {y}, width {w}, height {h}.",
+    "cancelled": "Cancelled changes to {label}."
   }
 }

package/dist/i18n/messages/ja.json

@@ -73,7 +73,6 @@
       "presetEmpty": "空"
     },
     "upload": {
-      "dropzoneLabel": "ファイルをアップロード",
       "dropzoneHint": "ここにドラッグ＆ドロップ、またはクリックして選択",
       "dropzoneMeta": "選択したファイルはここに表示されます。",
       "buttonLabel": "ファイルを選択",
@@ -772,6 +771,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "データがありません",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
@@ -842,5 +842,14 @@
         "error": "失敗"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "{label}を移動",
+    "resize": "{label}のサイズ変更",
+    "hint": "Enter またはスペースでつかむ・確定。矢印キーで移動、Shift と矢印でサイズ変更。Escape で取り消します。",
+    "grabbed": "{label}をつかみました。列{x}、行{y}、幅{w}、高さ{h}。",
+    "moved": "{label}。列{x}、行{y}、幅{w}、高さ{h}。",
+    "dropped": "{label}を保存しました。列{x}、行{y}、幅{w}、高さ{h}。",
+    "cancelled": "{label}の変更を取り消しました。"
   }
 }

package/dist/i18n/messages/vi.json

@@ -73,7 +73,6 @@
       "presetEmpty": "Trống"
     },
     "upload": {
-      "dropzoneLabel": "Tải file lên",
       "dropzoneHint": "Kéo thả file vào đây, hoặc bấm để chọn",
       "dropzoneMeta": "Tệp đã chọn sẽ hiển thị tại đây.",
       "buttonLabel": "Chọn file",
@@ -773,6 +772,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "Không có dữ liệu",
     "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
     "summaryPie": "Biểu đồ tròn gồm {slices} phần",
@@ -843,5 +843,14 @@
         "error": "thất bại"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "Di chuyển {label}",
+    "resize": "Đổi kích thước {label}",
+    "hint": "Enter hoặc Space để nắm và thả. Phím mũi tên để di chuyển; Shift và mũi tên để đổi kích thước. Escape để hủy.",
+    "grabbed": "Đã nắm {label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "moved": "{label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "dropped": "Đã lưu {label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "cancelled": "Đã hủy thay đổi {label}."
   }
 }

package/dist/lab/dashboard-grid-layout.d.ts

@@ -0,0 +1,4 @@
+import type { DashboardGridItemProp } from "../props/components/dashboard-grid.prop.js";
+export declare const gridColumns: (value: number) => number;
+/** Active tile wins. Others push down in stable visual order, then compact upward without overlap. */
+export declare function resolveDashboardLayout(layout: readonly DashboardGridItemProp[], columns: number, active?: string): DashboardGridItemProp[];

package/dist/lab/dashboard-grid-layout.js

@@ -0,0 +1,36 @@
+const integer = (value, fallback) => Number.isFinite(value) ? Math.trunc(value) : fallback;
+const gridColumns = (value) => Math.max(1, integer(value, 1));
+const overlaps = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+function resolveDashboardLayout(layout, columns, active) {
+  const count = gridColumns(columns);
+  const normalized = layout.map((item) => {
+    const w = Math.min(count, Math.max(1, integer(item.w, 1)));
+    return {
+      ...item,
+      w,
+      h: Math.max(1, integer(item.h, 1)),
+      x: Math.max(0, Math.min(count - w, integer(item.x, 0))),
+      y: Math.max(0, integer(item.y, 0))
+    };
+  });
+  const sorted = normalized.slice().sort((a, b) => a.y - b.y || a.x - b.x);
+  const held = normalized.find((item) => item.id === active);
+  const placed = held ? [held] : [];
+  for (const item of sorted) {
+    if (item === held) continue;
+    let collision;
+    while (collision = placed.find((other) => overlaps(item, other)))
+      item.y = collision.y + collision.h;
+    while (item.y > 0 && !placed.some((other) => overlaps({ ...item, y: item.y - 1 }, other)))
+      item.y--;
+    placed.push(item);
+  }
+  if (held)
+    while (held.y > 0 && !placed.some((other) => other !== held && overlaps({ ...held, y: held.y - 1 }, other)))
+      held.y--;
+  return normalized;
+}
+export {
+  gridColumns,
+  resolveDashboardLayout
+};

package/dist/lab/dashboard-grid.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { DashboardGridProp } from "../props/components/dashboard-grid.prop.js";
+export type { DashboardGridItemProp, DashboardGridProp, DashboardGridProp as DashboardGridProps, } from "../props/components/dashboard-grid.prop.js";
+/** Optional BI layout editor. DOM reading order remains items order; x starts at inline-start. */
+export declare const DashboardGrid: React.ForwardRefExoticComponent<DashboardGridProp & React.RefAttributes<HTMLDivElement>>;

package/dist/lab/dashboard-grid.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "lucide-react";
+import { Card, CardHeader, CardTitle } from "../components/data-display/card.js";
+import { Button } from "../components/general/button.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useMediaQuery } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
+import { gridColumns, resolveDashboardLayout } from "./dashboard-grid-layout.js";
+const DashboardGrid = React.forwardRef(
+  function DashboardGrid2({
+    items,
+    layout,
+    defaultLayout,
+    onLayoutChange,
+    columns = 12,
+    rowHeight,
+    editable = false,
+    className,
+    ...props
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const sm = useMediaQuery("(min-width: 40rem)");
+    const md = useMediaQuery("(min-width: 48rem)");
+    const lg = useMediaQuery("(min-width: 64rem)");
+    const xl = useMediaQuery("(min-width: 80rem)");
+    const count = gridColumns(
+      typeof columns === "number" ? columns : xl && columns.xl || lg && columns.lg || md && columns.md || sm && columns.sm || columns.base
+    );
+    const [inner, setInner] = React.useState(defaultLayout ?? []);
+    const source = layout ?? inner;
+    const committed = resolveDashboardLayout(
+      items.map(
+        (item, index) => source.find((entry) => entry.id === item.id) ?? {
+          id: item.id,
+          x: 0,
+          y: index,
+          w: 1,
+          h: 1
+        }
+      ),
+      count
+    );
+    const root = React.useRef(null);
+    const session = React.useRef(null);
+    const [preview, setPreview] = React.useState(null);
+    const [announcement, announce] = React.useState("");
+    const hint = React.useId();
+    const format = new Intl.NumberFormat(locale);
+    const speak = (action, entries, id) => {
+      const item = entries.find((entry) => entry.id === id);
+      if (!item) return;
+      announce(
+        t(`dashboardGrid.${action}`, {
+          label: items.find((entry) => entry.id === id)?.label ?? id,
+          x: format.format(item.x + 1),
+          y: format.format(item.y + 1),
+          w: format.format(item.w),
+          h: format.format(item.h)
+        })
+      );
+    };
+    const begin = (id) => {
+      const next = committed.map((item) => ({ ...item }));
+      session.current = { id, base: next, next };
+      setPreview(next);
+      speak("grabbed", next, id);
+    };
+    const finish = (cancel) => {
+      const current = session.current;
+      if (!current) return;
+      session.current = null;
+      setPreview(null);
+      speak(cancel ? "cancelled" : "dropped", cancel ? current.base : current.next, current.id);
+      if (!cancel && JSON.stringify(current.base) !== JSON.stringify(current.next)) {
+        if (layout === void 0) setInner(current.next);
+        onLayoutChange?.(current.next);
+      }
+    };
+    const update = (dx, dy, resize, fromBase = false) => {
+      const current = session.current;
+      if (!current) return;
+      current.next = resolveDashboardLayout(
+        (fromBase ? current.base : current.next).map(
+          (item) => item.id !== current.id ? item : resize ? { ...item, w: item.w + dx, h: item.h + dy } : { ...item, x: item.x + dx, y: item.y + dy }
+        ),
+        count,
+        current.id
+      );
+      setPreview(current.next);
+      speak("moved", current.next, current.id);
+    };
+    React.useEffect(() => {
+      session.current = null;
+      setPreview(null);
+    }, [layout, columns, count, editable, items]);
+    const latest = React.useRef({ finish, update });
+    latest.current = { finish, update };
+    React.useEffect(() => {
+      const move = (event) => {
+        const pointer = session.current?.pointer;
+        if (!pointer || event.pointerId !== pointer.id) return;
+        event.preventDefault();
+        latest.current.update(
+          Math.round((event.clientX - pointer.x) / pointer.stepX) * (pointer.rtl ? -1 : 1),
+          Math.round((event.clientY - pointer.y) / pointer.stepY),
+          pointer.resize,
+          true
+        );
+      };
+      const end = (event) => {
+        if (session.current?.pointer?.id === event.pointerId)
+          latest.current.finish(event.type === "pointercancel");
+      };
+      const escape = (event) => {
+        if (event.key === "Escape" && session.current) {
+          event.preventDefault();
+          latest.current.finish(true);
+        }
+      };
+      window.addEventListener("pointermove", move, { passive: false });
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", end);
+      window.addEventListener("keydown", escape);
+      return () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", end);
+        window.removeEventListener("pointercancel", end);
+        window.removeEventListener("keydown", escape);
+      };
+    }, []);
+    const pointerDown = (id, resize) => (event) => {
+      if (!editable || event.button !== 0 || session.current || !root.current) return;
+      event.preventDefault();
+      event.currentTarget.focus();
+      const css = getComputedStyle(root.current);
+      const gap = parseFloat(css.columnGap) || 0;
+      begin(id);
+      session.current.pointer = {
+        id: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        stepX: (root.current.clientWidth + gap) / count,
+        stepY: (parseFloat(css.gridAutoRows) || rowHeight || 80) + (parseFloat(css.rowGap) || 0),
+        rtl: css.direction === "rtl",
+        resize
+      };
+    };
+    const keyDown = (id) => (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!session.current) begin(id);
+        else if (session.current.id === id) finish(false);
+        return;
+      }
+      if (session.current?.id !== id || !event.key.startsWith("Arrow")) return;
+      event.preventDefault();
+      const rtl = root.current && getComputedStyle(root.current).direction === "rtl";
+      update(
+        (event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0) * (rtl ? -1 : 1),
+        event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0,
+        event.shiftKey
+      );
+    };
+    const shown = preview ?? committed;
+    return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cn("ui-dashboard-grid", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: root,
+          className: "ui-dashboard-grid-items",
+          "data-stacked": count === 1 || void 0,
+          style: {
+            "--dashboard-grid-columns": count,
+            ...rowHeight && Number.isFinite(rowHeight) && rowHeight > 0 ? { "--dashboard-grid-row-height": `${rowHeight}px` } : {}
+          },
+          children: items.map((item) => {
+            const box = shown.find((entry) => entry.id === item.id) ?? committed.find((entry) => entry.id === item.id);
+            const held = session.current?.id === item.id;
+            return /* @__PURE__ */ jsx(
+              "section",
+              {
+                "aria-label": item.label,
+                className: "ui-dashboard-grid-item",
+                "data-dashboard-id": item.id,
+                "data-x": box.x,
+                "data-y": box.y,
+                "data-w": box.w,
+                "data-h": box.h,
+                "data-editable": editable || void 0,
+                "data-held": held || void 0,
+                style: {
+                  gridColumn: `${box.x + 1} / span ${box.w}`,
+                  gridRow: count === 1 ? "auto" : `${box.y + 1} / span ${box.h}`
+                },
+                children: /* @__PURE__ */ jsxs(Card, { className: "ui-dashboard-grid-surface", children: [
+                  /* @__PURE__ */ jsx(CardHeader, { className: "ui-dashboard-grid-header", children: /* @__PURE__ */ jsx(CardTitle, { children: item.label }) }),
+                  editable && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: "ui-dashboard-grid-move",
+                      "aria-label": t("dashboardGrid.move", { label: item.label }),
+                      "aria-describedby": hint,
+                      "aria-pressed": held,
+                      onPointerDown: pointerDown(item.id, false),
+                      onKeyDown: keyDown(item.id),
+                      onBlur: () => {
+                        if (!session.current?.pointer) finish(true);
+                      },
+                      children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "ui-dashboard-grid-content", children: item.content }),
+                  editable && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: "ui-dashboard-grid-resize",
+                      "aria-label": t("dashboardGrid.resize", { label: item.label }),
+                      "aria-describedby": hint,
+                      "aria-pressed": held,
+                      onPointerDown: pointerDown(item.id, true),
+                      onKeyDown: keyDown(item.id),
+                      onBlur: () => {
+                        if (!session.current?.pointer) finish(true);
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx("path", { d: "M8 20 20 8M14 20 20 14" })
+                        }
+                      )
+                    }
+                  )
+                ] })
+              },
+              item.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: hint, className: "sr-only", children: t("dashboardGrid.hint") }),
+      /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
+    ] });
+  }
+);
+export {
+  DashboardGrid
+};

package/dist/lab/index.d.ts

@@ -37,3 +37,5 @@ export { MegaMenu } from "./mega-menu.js";
 export type { MegaMenuProp, MegaMenuProps, MegaMenuItemProp, MegaMenuItemProps, MegaMenuPanelProp, MegaMenuPanelProps, MegaMenuGroupProp, MegaMenuGroupProps, MegaMenuLinkProp, MegaMenuLinkProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProps, } from "./mega-menu.js";
 export { Anchor } from "./anchor.js";
 export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProps, } from "./anchor.js";
+export { DashboardGrid } from "./dashboard-grid.js";
+export type { DashboardGridProp, DashboardGridProps, DashboardGridItemProp } from "./dashboard-grid.js";

package/dist/lab/index.js

@@ -21,6 +21,7 @@ import { EmojiPicker } from "./emoji-picker.js";
 import { SortableList } from "./sortable-list.js";
 import { MegaMenu } from "./mega-menu.js";
 import { Anchor } from "./anchor.js";
+import { DashboardGrid } from "./dashboard-grid.js";
 export {
   Anchor,
   Carousel,
@@ -29,6 +30,7 @@ export {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  DashboardGrid,
   DraggablePanel,
   EmojiPicker,
   FloatButton,

package/dist/props/components/charts.prop.d.ts

@@ -21,6 +21,11 @@ export type ChartSeriesProp = {
      */
     fillColor?: string;
 };
+/** Selection is an action: the dashboard owns filter state. Index refers to the original data array. */
+export type ChartDatumSelect<T = ChartDatum> = (datum: T, context: {
+    seriesKey: string;
+    index: number;
+}) => void;
 /** Shared base for the cartesian charts (Line / Bar / Area). */
 type ChartCartesianBase = {
     /** Row data. Each row is one category with a value per series. */
@@ -69,6 +74,8 @@ type ChartCartesianBase = {
     numberFormat?: Intl.NumberFormatOptions;
     /** Message shown when `data` is empty. Defaults to a localized "no data". */
     emptyMessage?: EmptyMessageProp;
+    /** Select a finite datum by pointer or Enter/Space. Arrows navigate categories and series. */
+    onDatumSelect?: ChartDatumSelect;
     /**
      * Called with the clicked category's datum and its index — drill-down, zoom-to-bucket. The whole
      * category column is the target, not only the mark, so a zero-height bar is still clickable.
@@ -161,6 +168,8 @@ export type HeatmapDatum = {
  * steps through the `--chart-heat-1..5` ramp; an empty cell is outlined, a zero cell is filled.
  */
 export type HeatmapChartProp = {
+    /** Select a present cell. seriesKey is String(column); index is the original data index. */
+    onDatumSelect?: ChartDatumSelect<HeatmapDatum>;
     /** Row categories, top to bottom (the y axis — weekdays). */
     rows: HeatmapCategory[];
     /** Column categories, start to end (the x axis — hours). */
@@ -207,6 +216,8 @@ export type AreaChartProp = ChartCartesianBase & {
 };
 /** @see PieChart */
 export type PieChartProp = {
+    /** Select a slice by pointer or Enter/Space; seriesKey is dataKey. Arrows navigate slices. */
+    onDatumSelect?: ChartDatumSelect;
     /** Row data — one slice per row. */
     data: ChartDatum[];
     /** Key into each datum holding the slice's numeric value. */

package/dist/props/components/dashboard-grid.prop.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import type { BreakpointProp } from "../vocabulary/index.js";
+/** Integer grid coordinates, zero-based from inline-start. Stable id owns persistence. */
+export interface DashboardGridItemProp {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface DashboardGridProp extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Each tile owns its Card and visible label header; content is the body (e.g. CardContent). */
+    items: {
+        id: string;
+        label: string;
+        content: React.ReactNode;
+    }[];
+    layout?: DashboardGridItemProp[];
+    defaultLayout?: DashboardGridItemProp[];
+    onLayoutChange?: (layout: DashboardGridItemProp[]) => void;
+    columns?: number | ({
+        base: number;
+    } & Partial<Record<BreakpointProp, number>>);
+    /** Row track size in pixels; omitted reads --dashboard-grid-row-height. */
+    rowHeight?: number;
+    editable?: boolean;
+}