@ai-matrx/design-system 0.49.54 → 0.49.55

package/CHANGELOG.md

@@ -2,10 +2,18 @@
 
 ### Unreleased
 
+- **The grouped answer shows a group's attributes at a glance, says what each number counts, sorts by a pivot column, and the chart stacks Measures** (lane DRILL-FLIP-FIXES, VERIFY-DRILL-FINAL R2, R5, L2, L3, L5 — the old Spend and users usage screens' last did-better rows, 2026-10-01). `MatrxDrillAnswerTable` takes `attributes` (`MatrxDrillAttribute`: text columns beside the numbers, each the one value an outermost group holds of another Dimension — the costliest requests' person, agent, model; `read` returns undefined while reading, null for none); a Measure's or a Dimension's `description` (≤140 characters) is its column header's tooltip; each named pivot column's header sorts the groups by its own cell (`drillPivotSortKey(measure, value)` = `across:<measure>:<value>`, read by `buildDrillTree`). `MatrxDrillChart` / `drillChartQuestions` take `stack` (two or more additive Measures drawn as one stacked bar per period, no split; a Measure that does not add up is refused in words; `MatrxDrillChartPlan.stack`). Proof: `drill-flip-fixes.test.tsx` (7; red on HEAD). Consumer action: none required; a host passes `attributes`, `description` and `stack` to adopt.
+
 - **The grouped answer searches, opens a group's record, keeps a value's colour, and reads a moment** (lane DRILL-PARITY-LAST, the old users usage page's did-better rows, 2026-09-30). `MatrxDrillAnswerTable` takes `search` (a box that keeps the groups whose words hold the text — a person's email, a choice's words; an outer group stays when one of its own matches; "N of M groups"); a Dimension's `entity` (a record kind) makes each group row offer that record's own doors — open, preview and `TableDoors.menu` (new, the record kind's own menu items from the host's `resolveEntityDoors`) — in the row's ⋯ menu and on a right-click through the host's `ContextMenuBoundary` (rows carry `data-row-id`, the table its `data-matrx-table-id`); a Dimension's `colorFor` (a chart token, `drillTokenColor` / `drillValueColor`) colours that value's share bar and its chart series; a Measure's `moment` (e.g. "Last active", epoch ms) never shows a share or a change. Proof: `drill-parity-last.test.tsx` (9; 8 red on HEAD). Consumer action: none required; a host passes `search`, `entity`, `colorFor`, `moment` and `TableDoors.menu` to adopt.
 - **The drill answer's coverage and Pareto lines are labels, not sentences** (lane DRILL-LIVE-FIXES, interface text is layout, 2026-09-30). Coverage reads `$100.00 of $400.00 (25%)` (was "This slice is $100.00 of the $400.00 the whole window holds (25%)."), with "This slice's share of the whole window" in its tooltip; a Pareto line that never reaches its share reads `All 5 shown make 20% of Cost` (the groups past the limit are already the table's own "N more" row). Proof: `drill-usage-adoptions.test.tsx`, `drill-pareto-and-row-actions.test.tsx`. Consumer action: none.
 - **The drill chart's value axis says the number the Measure printed, never the raw value** (localhost walk of `/administration/usage`, 2026-09-30). When a Measure's format converts its unit (the usage explorer stores dollars and prints points at 20,000 a dollar) and the printed tick is too long for the axis, the tick used to compact the RAW value, so a 9,000,000-point day read `450` under "Cost (points) by day". `drillChartAxisNumber` now compacts the number the format printed (`9.0M`), keeping a one-character currency sign (`$1.2k`). Proof: `drill-chart-axis.test.ts`. Consumer action: none.
 
+## 0.49.55
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/design-system/v0.49.54..npm/design-system/v0.49.55 -- apps/shared/design-system`).
+No source changes intended and no consumer action required.
+
 ## 0.49.54
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/data-table/copy-helpers.d.cts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.cjs';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-RHe2Kzrs.cjs';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-HFquDviC.cjs';
 import '../content-transfer.cjs';
 import 'react';
 import '@ai-matrx/kit/content-transfer';
@@ -7,7 +7,7 @@ import '../content-transfer/icon.cjs';
 import './table-style.cjs';
 import '../types-JnZD8wM0.cjs';
 import './grouping.cjs';
-import '../drill-cISpem5b.cjs';
+import '../drill-qJ5gHL2F.cjs';
 import './fill.cjs';
 import './facets.cjs';
 import './spreadsheet.cjs';

package/dist/data-table/copy-helpers.d.ts

@@ -1,5 +1,5 @@
 import { AgentPayloadInput } from './copy-types.js';
-import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-ma_P0GDG.js';
+import { g as MatrxDataTableCopyConfig, M as MatrxColumnDef } from '../layered-filters-CTdPPgxf.js';
 import '../content-transfer.js';
 import 'react';
 import '@ai-matrx/kit/content-transfer';
@@ -7,7 +7,7 @@ import '../content-transfer/icon.js';
 import './table-style.js';
 import '../types-JnZD8wM0.js';
 import './grouping.js';
-import '../drill-cISpem5b.js';
+import '../drill-qJ5gHL2F.js';
 import './fill.js';
 import './facets.js';
 import './spreadsheet.js';

package/dist/data-table/drill-chart.cjs

@@ -310,9 +310,16 @@ function drillChartQuestions(question, seriesLimit = MATRX_DRILL_CHART_SERIES_LI
   const timeInBy = question.by.find((ref) => parseDimensionRef(ref).grain !== null);
   const firstTime = context.dimensions.find((d) => d.kind === "time");
   const time = timeInBy ?? context.time ?? (firstTime ? `${firstTime.key}:${drillAutoGrain(question.window ?? null, context.now, firstTime.grains ?? MATRX_DRILL_DEFAULT_GRAINS)}` : null);
-  const split = question.by.find((ref) => parseDimensionRef(ref).grain === null && dimensionFor(context.dimensions, ref)?.kind !== "time") ?? null;
+  const stack = context.stack && context.stack.length >= 2 ? [...context.stack] : null;
+  const split = stack ? null : question.by.find((ref) => parseDimensionRef(ref).grain === null && dimensionFor(context.dimensions, ref)?.kind !== "time") ?? null;
   const refuse = (sentence) => ({ ...base, time, split, refused: sentence, first: [], periodsHint: null });
   if (!time) return refuse("This answer has no time to chart it over.");
+  if (stack) {
+    const missing = stack.find((k) => !context.measures.some((m) => m.key === k));
+    if (missing) return refuse(`There is no Measure "${missing}" to chart.`);
+    const loose = stack.map((k) => context.measures.find((m) => m.key === k)).find((m) => !m.additive || m.moment);
+    if (loose) return refuse(`${loose.label} does not add up, so it cannot be stacked.`);
+  }
   if (!measure) return refuse(`There is no Measure "${measureKey}" to chart.`);
   if (split && !measure.additive) {
     return refuse(
@@ -325,13 +332,13 @@ function drillChartQuestions(question, seriesLimit = MATRX_DRILL_CHART_SERIES_LI
   const periodsHint = Number.isFinite(days) && days > 0 ? Math.ceil(days / GRAIN_DAYS[grain]) + 1 : null;
   const where = trailWhere(question);
   const window = question.window ?? null;
-  const show = [measureKey];
+  const show = stack ?? [measureKey];
   const first = [];
   if (split) {
     first.push({ key: "series", by: [split], where, show, sort: { key: measureKey, direction: "desc" }, limit, window });
   }
   first.push({ key: "periods", by: [time], where, show, sort: null, limit: periodsHint ? clampLimit(periodsHint, ceiling) : null, window });
-  return { ...base, time, split, refused: null, first, periodsHint };
+  return { ...base, ...stack ? { measure: stack[0], stack } : {}, time, split, refused: null, first, periodsHint };
 }
 function drillChartCellsQuestion(plan, question, series) {
   if (plan.refused || !plan.split || !plan.time) return null;
@@ -405,6 +412,35 @@ function drillChartData(plan, answers, dimensions, measures, emptyLabel = "No va
       values: {}
     };
   });
+  if (plan.stack) {
+    const keys = plan.stack;
+    const readOf = (row, k) => {
+      const v = row?.measures[k];
+      return v === null || v === void 0 ? null : v;
+    };
+    const totalRow = periodRows.find((r) => rowKind(r) === "total");
+    for (const [i, p] of periodBase.entries()) {
+      const row = groups[i];
+      let sum = null;
+      for (const k of keys) {
+        const v = readOf(row, k);
+        p.values[`m:${k}`] = v;
+        if (v !== null) sum = (sum ?? 0) + v;
+      }
+      p.total = sum;
+    }
+    const totals = keys.map((k) => readOf(totalRow, k));
+    const total = totals.every((t) => t === null) ? null : totals.reduce((a, t) => a + (t ?? 0), 0);
+    return {
+      time,
+      split: null,
+      measure: m,
+      series: keys.map((k, i) => ({ key: `m:${k}`, value: null, label: measures.find((x) => x.key === k)?.label ?? k, other: false, total: totals[i] ?? null })),
+      periods: periodBase,
+      total,
+      says
+    };
+  }
   if (!split) {
     const key = "all";
     for (const p of periodBase) p.values[key] = p.total;
@@ -531,6 +567,7 @@ function MatrxDrillChart({
   answers,
   seriesLimit = MATRX_DRILL_CHART_SERIES_LIMIT,
   measure: measureKey,
+  stack,
   time,
   ceiling,
   paths = NO_PATHS,
@@ -542,8 +579,8 @@ function MatrxDrillChart({
   className
 }) {
   const plan = (0, import_react.useMemo)(
-    () => drillChartQuestions(question, seriesLimit, { dimensions, measures, measure: measureKey, time, ceiling }),
-    [question, seriesLimit, dimensions, measures, measureKey, time, ceiling]
+    () => drillChartQuestions(question, seriesLimit, { dimensions, measures, measure: measureKey, stack, time, ceiling }),
+    [question, seriesLimit, dimensions, measures, measureKey, stack, time, ceiling]
   );
   const data = (0, import_react.useMemo)(() => drillChartData(plan, answers, dimensions, measures, emptyLabel), [plan, answers, dimensions, measures, emptyLabel]);
   const measure = measures.find((m) => m.key === plan.measure);
@@ -551,7 +588,8 @@ function MatrxDrillChart({
   const [hover, setHover] = (0, import_react.useState)(null);
   const segmentClicked = (0, import_react.useRef)(false);
   const plotRef = (0, import_react.useRef)(null);
-  const title = plan.time ? `${measure?.label ?? plan.measure} by ${dimensionRefLabel(dimensions, plan.time).replace(/^.* by /, "")}${plan.split ? `, split by ${dimensionRefLabel(dimensions, plan.split)}` : ""}` : measure?.label ?? plan.measure;
+  const measureWords = plan.stack ? plan.stack.map((k) => measures.find((m) => m.key === k)?.label ?? k).join(" and ") : measure?.label ?? plan.measure;
+  const title = plan.time ? `${measureWords} by ${dimensionRefLabel(dimensions, plan.time).replace(/^.* by /, "")}${plan.split ? `, split by ${dimensionRefLabel(dimensions, plan.split)}` : ""}` : measureWords;
   const frame = (body) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { "data-matrx-drill-chart": true, "aria-label": title, className: cn("flex min-w-0 flex-col gap-1.5 px-2 py-2", className), children: [
     note ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-matrx-drill-chart-note": true, className: "text-xs text-muted-foreground", children: note }) : null,
     body