@cosmicdrift/kumiko-renderer-web 0.135.0 → 0.136.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.135.0",
+  "version": "0.136.1",
   "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.1",
+    "@cosmicdrift/kumiko-headless": "0.136.1",
+    "@cosmicdrift/kumiko-renderer": "0.136.1",
     "@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,

package/src/widgets/__tests__/form-kit.test.tsx

@@ -38,14 +38,16 @@ describe("NumberField", () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
-  test("MoneyField/PercentField zeigen ihre Einheit", () => {
+  test("MoneyField/PercentField rendern als beschriftetes Zahlenfeld ohne Einheit-Badge", () => {
     const noop = (): void => {};
     const { rerender } = render(
-      <MoneyField label="Betrag" id="b" name="b" value={1} onChange={noop} />,
+      <MoneyField label="Betrag (€)" id="b" name="b" value={1} onChange={noop} />,
     );
-    expect(screen.getByText("€")).toBeTruthy();
-    rerender(<PercentField label="Zins" id="z" name="z" value={1} onChange={noop} />);
-    expect(screen.getByText("%")).toBeTruthy();
+    expect(screen.getByText("Betrag (€)")).toBeTruthy();
+    expect(screen.getByRole("spinbutton")).toBeTruthy();
+    expect(screen.queryByText("€")).toBeNull(); // Einheit lebt im Label, kein separates Badge
+    rerender(<PercentField label="Zins (%)" id="z" name="z" value={1} onChange={noop} />);
+    expect(screen.queryByText("%")).toBeNull();
   });
 });
 

package/src/widgets/form-fields.tsx

@@ -9,14 +9,13 @@ export interface NumberFieldProps {
   readonly onChange: (v: number | undefined) => void;
   readonly required?: boolean;
   readonly disabled?: boolean;
-  /** Einheit rechts neben dem Label (z.B. "€", "%"). */
-  readonly unit?: string;
   readonly testId?: string;
 }
 
 /** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
  *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
- *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt. */
+ *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
+ *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
 export function NumberField({
   label,
   id,
@@ -25,22 +24,11 @@ export function NumberField({
   onChange,
   required,
   disabled,
-  unit,
   testId,
 }: NumberFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field
-      id={id}
-      label={label}
-      required={required}
-      labelAppendix={
-        unit !== undefined ? (
-          <span className="text-xs text-muted-foreground">{unit}</span>
-        ) : undefined
-      }
-      testId={testId}
-    >
+    <Field id={id} label={label} required={required} testId={testId}>
       <Input
         kind="number"
         id={id}
@@ -54,13 +42,13 @@ export function NumberField({
   );
 }
 
-/** Euro-Betrag in ganzen Einheiten (kein Cent-Integer wie Input kind:"money").
- *  Preset über NumberField mit "€"-Einheit. */
-export function MoneyField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="€" />;
+// MoneyField/PercentField markieren die Feld-Absicht am Call-Site (lesbarer als
+// NumberField überall) und sind der Ort, an dem später geld-/prozent-spezifische
+// Formatierung andocken kann. Aktuell rendern sie identisch zu NumberField.
+export function MoneyField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }
 
-/** Prozentwert (Zins, Tilgung, Rendite). Preset über NumberField mit "%". */
-export function PercentField(props: Omit<NumberFieldProps, "unit">): ReactNode {
-  return <NumberField {...props} unit="%" />;
+export function PercentField(props: NumberFieldProps): ReactNode {
+  return <NumberField {...props} />;
 }