@cosmicdrift/kumiko-renderer-web 0.135.0 → 0.136.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.135.0",
+  "version": "0.136.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.135.0",
-    "@cosmicdrift/kumiko-headless": "0.135.0",
-    "@cosmicdrift/kumiko-renderer": "0.135.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.136.0",
+    "@cosmicdrift/kumiko-headless": "0.136.0",
+    "@cosmicdrift/kumiko-renderer": "0.136.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/dashboard-screen.test.tsx

@@ -107,6 +107,9 @@ const richScreen: DashboardScreenDefinition = {
       label: "widgets:dashboard:kpi",
       query: "widgets:query:metrics:kpi",
       valueField: "value",
+      deltaField: "delta",
+      deltaDirectionField: "deltaDirection",
+      deltaToneField: "deltaTone",
     },
     {
       kind: "stat-group",
@@ -251,6 +254,54 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     expect(screen.queryByTestId("custom-echo")).toBeNull();
   });
 
+  test("stat-Panel: Delta-Chip rendert nur wenn value+direction geliefert werden", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:kpi") {
+          return {
+            isSuccess: true,
+            data: {
+              value: "92.753 €",
+              delta: "23 %",
+              deltaDirection: "down",
+              deltaTone: "positive",
+            },
+          };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    expect(screen.getByText("↓23 %")).toBeTruthy();
+  });
+
+  test("stat-Panel: fehlende deltaDirection unterdrückt den Chip (kein Crash)", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:kpi") {
+          return { isSuccess: true, data: { value: "92.753 €" } };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    expect(screen.queryByText("23 %")).toBeNull();
+  });
+
   test("Filter-Wechsel refetcht Stat- UND Feed-Panel mit neuem Payload", async () => {
     const calls: { readonly type: string; readonly payload: unknown }[] = [];
     const dispatcher = createMockDispatcher({

package/src/app/dashboard-body.tsx

@@ -7,6 +7,9 @@
 // Panel-Daten-Contracts (siehe DashboardPanelDefinition in kumiko-framework):
 //   stat          → flaches Record, valueField/subField/toneField zeigen auf
 //                   anzeigefertige Werte (der Query-Handler formatiert).
+//                   deltaField/deltaDirectionField(+deltaToneField) sind
+//                   optional — nur wenn BEIDE Felder gesetzt sind UND geliefert
+//                   werden, zeigt die Kachel einen Delta-Chip ("↓ 23 %").
 //   stat-group    → mehrere stat-Panels unter einem Sektions-Titel, jedes
 //                   Kind bleibt eine eigenständige Query.
 //   chart         → { points: { atMs, value | null }[], windowStartMs,
@@ -48,7 +51,7 @@ import { FeedList, type FeedRow } from "../widgets/feed-list";
 import { ProgressList, type ProgressListRow } from "../widgets/progress-list";
 import { QueryTable } from "../widgets/query-table";
 import { SectionCard } from "../widgets/section-card";
-import { StatCard, type StatTone } from "../widgets/stat";
+import { StatCard, type StatDelta, type StatTone } from "../widgets/stat";
 import { ErrorState, LoadingState } from "../widgets/states";
 
 const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"]);
@@ -76,17 +79,34 @@ function StatPanelBody({
   const tone =
     typeof rawTone === "string" && STAT_TONES.has(rawTone) ? (rawTone as StatTone) : "default";
   const sub = panel.subField !== undefined ? record[panel.subField] : undefined;
+  const delta = readDelta(panel, record);
   return (
     <StatCard
       label={label}
       value={String(record[panel.valueField] ?? "—")}
       tone={tone}
       {...(sub !== undefined && sub !== null && { sub: String(sub) })}
+      {...(delta !== undefined && { delta })}
       testId={`dashboard-panel-${panel.id}`}
     />
   );
 }
 
+function readDelta(
+  panel: DashboardStatPanel,
+  record: Readonly<Record<string, unknown>>,
+): StatDelta | undefined {
+  if (panel.deltaField === undefined || panel.deltaDirectionField === undefined) return undefined;
+  const value = record[panel.deltaField];
+  const direction = record[panel.deltaDirectionField];
+  if (value === undefined || value === null) return undefined;
+  if (direction !== "up" && direction !== "down") return undefined;
+  const rawTone = panel.deltaToneField !== undefined ? record[panel.deltaToneField] : undefined;
+  const tone =
+    typeof rawTone === "string" && STAT_TONES.has(rawTone) ? (rawTone as StatTone) : undefined;
+  return { value: String(value), direction, ...(tone !== undefined && { tone }) };
+}
+
 function StatGroupPanelBody({
   panel,
   label,