@cosmicdrift/kumiko-renderer-web 0.133.0 → 0.135.0

package/src/app/dashboard-body.tsx

@@ -1,40 +1,72 @@
 // Web-Implementierung des dashboard-Screen-Typs: rendert die deklarierten
-// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable) in
-// einem responsiven Grid. Registriert via DashboardBodyProvider in
-// createKumikoApp — der KumikoScreen-Switch bleibt plattform-agnostisch.
+// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable, FeedList,
+// ProgressList) in einem responsiven Grid. Registriert via
+// DashboardBodyProvider in createKumikoApp — der KumikoScreen-Switch bleibt
+// plattform-agnostisch.
 //
 // Panel-Daten-Contracts (siehe DashboardPanelDefinition in kumiko-framework):
-//   stat  → flaches Record, valueField/subField/toneField zeigen auf
-//           anzeigefertige Werte (der Query-Handler formatiert).
-//   chart → { points: { atMs, value | null }[], windowStartMs, windowEndMs }
-//   list  → paged envelope { rows, nextCursor, total? } wie projectionList.
+//   stat          → flaches Record, valueField/subField/toneField zeigen auf
+//                   anzeigefertige Werte (der Query-Handler formatiert).
+//   stat-group    → mehrere stat-Panels unter einem Sektions-Titel, jedes
+//                   Kind bleibt eine eigenständige Query.
+//   chart         → { points: { atMs, value | null }[], windowStartMs,
+//                   windowEndMs }
+//   list          → paged envelope { rows, nextCursor, total? } wie
+//                   projectionList.
+//   feed          → { rows: { id, primary, trailing? }[] }
+//   progress-list → { rows: { id, label, value, fraction }[] }
+//   custom        → keine Query — eine über extensionSectionComponents
+//                   registrierte App-Komponente holt sich ihre Daten selbst.
+//
+// Screen-Filter (DashboardFilterDefinition): der gewählte Wert wird unter
+// `filter.id` in JEDE Panel-Query gemerged. useQuery refetcht automatisch
+// über seinen bestehenden payloadKey-Mechanismus — kein Sonderfall nötig.
 
 import type {
   DashboardChartPanel,
+  DashboardCustomPanel,
+  DashboardFeedPanel,
   DashboardListPanel,
+  DashboardPanelDefinition,
+  DashboardProgressListPanel,
+  DashboardScreenDefinition,
+  DashboardStatGroupPanel,
   DashboardStatPanel,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
-import { type DashboardBodyProps, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import type { ReactNode } from "react";
+import {
+  type DashboardBodyProps,
+  extensionSectionName,
+  useExtensionSectionComponent,
+  usePrimitives,
+  useQuery,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useEffect, useState } from "react";
 import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
+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 { ErrorState, LoadingState } from "../widgets/states";
 
 const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"]);
+const WIDE_PANEL = "sm:col-span-2 lg:col-span-4";
+const HALF_PANEL = "sm:col-span-2 lg:col-span-2";
 
 function StatPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardStatPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
     panel.query,
-    {},
+    filterParams,
     { live: true },
   );
   if (loading && data === null) return <LoadingState rows={2} />;
@@ -55,6 +87,32 @@ function StatPanelBody({
   );
 }
 
+function StatGroupPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardStatGroupPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <section className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        {panel.stats.map((stat) => (
+          <StatPanelBody
+            key={stat.id}
+            panel={stat}
+            label={t(stat.label)}
+            filterParams={filterParams}
+          />
+        ))}
+      </section>
+    </SectionCard>
+  );
+}
+
 type TimeseriesEnvelope = {
   readonly points: readonly TimeseriesPoint[];
   readonly windowStartMs: number;
@@ -64,14 +122,16 @@ type TimeseriesEnvelope = {
 function ChartPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardChartPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const t = useTranslation();
   const { data, error, loading, refetch } = useQuery<TimeseriesEnvelope>(
     panel.query,
-    {},
+    filterParams,
     { live: true },
   );
   if (loading && data === null) return <LoadingState rows={3} />;
@@ -92,15 +152,18 @@ function ChartPanelBody({
 function ListPanelBody({
   panel,
   label,
+  filterParams,
 }: {
   readonly panel: DashboardListPanel;
   readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
 }): ReactNode {
   const t = useTranslation();
   return (
     <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
       <QueryTable<{ readonly rows: readonly Readonly<Record<string, unknown>>[] }>
         query={panel.query}
+        payload={filterParams}
         live
         columns={panel.columns.map((c) => {
           const normalized = normalizeListColumn(c);
@@ -115,32 +178,212 @@ function ListPanelBody({
   );
 }
 
+type FeedEnvelope = {
+  readonly rows: readonly { readonly primary: string; readonly trailing?: string }[];
+};
+
+function FeedPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardFeedPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<FeedEnvelope>(panel.query, filterParams, {
+    live: true,
+  });
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const rows: readonly FeedRow[] = (data?.rows ?? []).map((row, i) => ({ id: String(i), ...row }));
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <FeedList rows={rows} emptyContent={t(panel.emptyLabel ?? "kumiko.list.no-entries")} />
+    </SectionCard>
+  );
+}
+
+type ProgressListEnvelope = {
+  readonly rows: readonly {
+    readonly label: string;
+    readonly value: string;
+    readonly fraction: number;
+  }[];
+};
+
+function ProgressListPanelBody({
+  panel,
+  label,
+  filterParams,
+}: {
+  readonly panel: DashboardProgressListPanel;
+  readonly label: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<ProgressListEnvelope>(
+    panel.query,
+    filterParams,
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const rows: readonly ProgressListRow[] = (data?.rows ?? []).map((row, i) => ({
+    id: String(i),
+    ...row,
+  }));
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <ProgressList rows={rows} emptyContent={t("kumiko.list.no-entries")} />
+    </SectionCard>
+  );
+}
+
+// Löst panel.component über dieselbe extensionSectionComponents-Registry auf
+// wie entityEdit-Extension-Sections und List-Header-Slots — bleibt an seiner
+// Array-Position statt in einen separaten Slot zu wandern (siehe Datei-Kopf-
+// Kommentar zur Registry). Rendert nichts + dev-Warnung bei unregistriertem
+// Namen, analog zu ListHeaderSlotMount in render-list.tsx.
+function CustomPanelBody({
+  panel,
+  screenId,
+  filterParams,
+}: {
+  readonly panel: DashboardCustomPanel;
+  readonly screenId: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  const name = extensionSectionName(panel.component);
+  const Component = useExtensionSectionComponent(name);
+  useEffect(() => {
+    if (name !== undefined && Component === undefined) {
+      // biome-ignore lint/suspicious/noConsole: dev-warning für Setup-Fehler
+      console.warn(
+        `[kumiko] Dashboard custom-panel "${panel.id}" on screen "${screenId}" references component ` +
+          `"${name}", which is not registered in clientFeatures.extensionSectionComponents — the panel renders nothing.`,
+      );
+    }
+  }, [name, Component, panel.id, screenId]);
+  if (Component === undefined) return null;
+  // Dashboard-Panels haben keine Entity — entityName trägt die screen.id,
+  // damit ExtensionSectionProps nicht extra für diesen einen Mount-Ort
+  // aufgeweicht werden muss (das bräche jede bestehende registrierte
+  // Section, die entityName als garantiert gesetzten string erwartet).
+  return (
+    <Component
+      entityName={screenId}
+      entityId={null}
+      screenId={screenId}
+      filterParams={filterParams}
+    />
+  );
+}
+
+// Screen-Filter: hält den gewählten Wert, rendert die Combobox, und liefert
+// den Payload-Merge für jede Panel-Query. Statische `options` werden als
+// i18n-Keys übersetzt; `optionsQuery`-Ergebnisse sind Server-Daten und werden
+// unverändert übernommen.
+function useFilterParams(screen: DashboardScreenDefinition): {
+  readonly params: Readonly<Record<string, unknown>>;
+  readonly picker: ReactNode;
+} {
+  const { Field, Input } = usePrimitives();
+  const t = useTranslation();
+  const filter = screen.filter;
+  const [value, setValue] = useState("");
+  const optionsQueryResult = useQuery<{
+    readonly rows: readonly { readonly value: string; readonly label: string }[];
+  }>(filter?.optionsQuery ?? "", {}, { enabled: filter?.optionsQuery !== undefined });
+
+  if (filter === undefined) {
+    return { params: {}, picker: null };
+  }
+
+  const dynamicOptions =
+    filter.optionsQuery !== undefined
+      ? (optionsQueryResult.data?.rows ?? [])
+      : (filter.options ?? []).map((o) => ({ value: o.value, label: t(o.label) }));
+  const allLabel = t(filter.allLabel ?? "kumiko.dashboard.filter.all");
+  const options = [{ value: "", label: allLabel }, ...dynamicOptions];
+
+  const picker = (
+    <div className="max-w-xs">
+      <Field id={`dashboard-filter-${filter.id}`} label={t(filter.label)}>
+        <Input
+          kind="combobox"
+          id={`dashboard-filter-${filter.id}`}
+          name={filter.id}
+          options={options}
+          value={value}
+          onChange={setValue}
+          placeholder={filter.placeholder !== undefined ? t(filter.placeholder) : allLabel}
+        />
+      </Field>
+    </div>
+  );
+  const params = value === "" ? {} : { [filter.id]: value };
+  return { params, picker };
+}
+
+function panelSpanClassName(panel: DashboardPanelDefinition): string | undefined {
+  if (panel.kind === "stat") return undefined;
+  if (panel.kind === "feed" || panel.kind === "progress-list") return HALF_PANEL;
+  return WIDE_PANEL;
+}
+
+function PanelBody({
+  panel,
+  label,
+  screenId,
+  filterParams,
+}: {
+  readonly panel: DashboardPanelDefinition;
+  readonly label: string;
+  readonly screenId: string;
+  readonly filterParams: Readonly<Record<string, unknown>>;
+}): ReactNode {
+  if (panel.kind === "stat")
+    return <StatPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "stat-group") {
+    return <StatGroupPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  }
+  if (panel.kind === "chart")
+    return <ChartPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "list")
+    return <ListPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "feed")
+    return <FeedPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  if (panel.kind === "progress-list") {
+    return <ProgressListPanelBody panel={panel} label={label} filterParams={filterParams} />;
+  }
+  return <CustomPanelBody panel={panel} screenId={screenId} filterParams={filterParams} />;
+}
+
 export function WebDashboardBody({ screen, translate }: DashboardBodyProps): ReactNode {
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
+  const { params: filterParams, picker } = useFilterParams(screen);
   return (
-    <div
-      className="grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4"
-      data-testid={`dashboard-${screen.id}`}
-    >
-      {screen.panels.map((panel) => {
-        const label = effectiveTranslate(panel.label);
-        if (panel.kind === "stat") {
-          return <StatPanelBody key={panel.id} panel={panel} label={label} />;
-        }
-        if (panel.kind === "chart") {
+    <div className="flex flex-col gap-4 p-6" data-testid={`dashboard-${screen.id}`}>
+      {picker}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {screen.panels.map((panel) => {
+          const label = panel.kind === "custom" ? "" : effectiveTranslate(panel.label);
+          const span = panelSpanClassName(panel);
           return (
-            <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
-              <ChartPanelBody panel={panel} label={label} />
+            <div key={panel.id} className={span}>
+              <PanelBody
+                panel={panel}
+                label={label}
+                screenId={screen.id}
+                filterParams={filterParams}
+              />
             </div>
           );
-        }
-        return (
-          <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
-            <ListPanelBody panel={panel} label={label} />
-          </div>
-        );
-      })}
+        })}
+      </div>
     </div>
   );
 }

package/src/index.ts

@@ -155,8 +155,12 @@ export {
 } from "./tokens";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 export type {
+  FeedRow,
+  NumberFieldProps,
+  ProgressListRow,
   QueryTableColumn,
   QueryTableProps,
+  ResultColumn,
   StatDelta,
   StatTone,
   StatusBarEntry,
@@ -168,11 +172,18 @@ export {
   DetailList,
   EmptyState,
   ErrorState,
+  FeedList,
   LoadingState,
   MiniStat,
   ModeSwitch,
+  MoneyField,
+  NumberField,
+  PercentField,
   ProgressBar,
+  ProgressList,
   QueryTable,
+  ResultPanel,
+  ResultTable,
   SectionCard,
   Sparkline,
   STATUS_TONE_TEXT,
@@ -181,4 +192,5 @@ export {
   StatusBarChart,
   smoothPath,
   TimeseriesChart,
+  useDraft,
 } from "./widgets";

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

@@ -0,0 +1,103 @@
+import { describe, expect, mock, test } from "bun:test";
+import { act, fireEvent, render, renderHook, screen } from "../../__tests__/test-utils";
+import { DetailList } from "../detail-list";
+import { MoneyField, NumberField, PercentField } from "../form-fields";
+import { ResultPanel, ResultTable } from "../result-panel";
+import { useDraft } from "../use-draft";
+
+describe("useDraft", () => {
+  test("field() liefert verdrahtete Props, onChange patcht den Draft", () => {
+    const { result } = renderHook(() => useDraft<{ sum: number | undefined }>({ sum: 100 }));
+    expect(result.current.field("sum")).toMatchObject({ id: "sum", name: "sum", value: 100 });
+    act(() => result.current.field("sum").onChange(250));
+    expect(result.current.draft.sum).toBe(250);
+  });
+
+  test("reset stellt die Defaults wieder her", () => {
+    const { result } = renderHook(() => useDraft<{ a: number | undefined }>({ a: 1 }));
+    act(() => result.current.patch({ a: 9 }));
+    expect(result.current.draft.a).toBe(9);
+    act(() => result.current.reset());
+    expect(result.current.draft.a).toBe(1);
+  });
+});
+
+describe("NumberField", () => {
+  test("rendert Label und meldet Zahl bei Eingabe", () => {
+    const onChange = mock();
+    render(<NumberField label="Summe" id="sum" name="sum" value={300} onChange={onChange} />);
+    expect(screen.getByText("Summe")).toBeTruthy();
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "42" } });
+    expect(onChange).toHaveBeenCalledWith(42);
+  });
+
+  test("leeres Feld meldet undefined", () => {
+    const onChange = mock();
+    render(<NumberField label="X" id="x" name="x" value={5} onChange={onChange} />);
+    fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "" } });
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  test("MoneyField/PercentField zeigen ihre Einheit", () => {
+    const noop = (): void => {};
+    const { rerender } = render(
+      <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();
+  });
+});
+
+describe("DetailList emphasize", () => {
+  test("emphasize hebt Label und Wert hervor", () => {
+    render(
+      <DetailList
+        testId="dl"
+        rows={[
+          { label: "Summe", value: "100" },
+          { label: "Effektiv", value: "3,1 %", emphasize: true },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Effektiv").className).toContain("font-semibold");
+    expect(screen.getByText("Summe").className).not.toContain("font-semibold");
+  });
+});
+
+describe("ResultPanel", () => {
+  test("empty zeigt den Platzhalter, keine Liste", () => {
+    render(<ResultPanel title="Ergebnis" empty emptyText="Werte eingeben" />);
+    expect(screen.getByText("Werte eingeben")).toBeTruthy();
+  });
+
+  test("gefüllt zeigt Kennzahlen und children", () => {
+    render(
+      <ResultPanel title="Ergebnis" rows={[{ label: "Rate", value: "890 €" }]}>
+        <span>extra</span>
+      </ResultPanel>,
+    );
+    expect(screen.getByText("Rate")).toBeTruthy();
+    expect(screen.getByText("extra")).toBeTruthy();
+  });
+});
+
+describe("ResultTable", () => {
+  test("rendert Header, Zeilen und rechtsbündige Zahlenspalte", () => {
+    render(
+      <ResultTable
+        testId="rt"
+        columns={[
+          { header: "Tranche", cell: (r: { name: string; sum: string }) => r.name },
+          { header: "Summe", align: "right", cell: (r) => r.sum },
+        ]}
+        rows={[{ name: "Bank", sum: "300.000 €" }]}
+        rowKey={(r) => r.name}
+      />,
+    );
+    expect(screen.getByText("Tranche")).toBeTruthy();
+    expect(screen.getByText("Bank")).toBeTruthy();
+    expect(screen.getByText("Summe").className).toContain("text-right");
+    expect(screen.getByText("300.000 €").className).toContain("tabular-nums");
+  });
+});

package/src/widgets/detail-list.tsx

@@ -1,12 +1,18 @@
 import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
 
 /** Read-only Schlüssel-Wert-Liste für Detail-Masken (Label links gedimmt,
- *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. */
+ *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. `emphasize` hebt
+ *  eine Zeile hervor (z.B. das Endergebnis in einem Rechner). */
 export function DetailList({
   rows,
   testId,
 }: {
-  readonly rows: readonly { readonly label: string; readonly value: ReactNode }[];
+  readonly rows: readonly {
+    readonly label: string;
+    readonly value: ReactNode;
+    readonly emphasize?: boolean;
+  }[];
   readonly testId?: string;
 }): ReactNode {
   return (
@@ -16,8 +22,17 @@ export function DetailList({
           key={row.label}
           className="grid grid-cols-1 gap-0.5 py-2.5 sm:grid-cols-[200px_1fr] sm:gap-4"
         >
-          <dt className="text-sm text-muted-foreground">{row.label}</dt>
-          <dd className="text-sm font-medium">{row.value}</dd>
+          <dt
+            className={cn(
+              "text-sm text-muted-foreground",
+              row.emphasize === true && "font-semibold text-foreground",
+            )}
+          >
+            {row.label}
+          </dt>
+          <dd className={cn("text-sm font-medium", row.emphasize === true && "font-semibold")}>
+            {row.value}
+          </dd>
         </div>
       ))}
     </dl>

package/src/widgets/feed-list.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export type FeedRow = {
+  readonly id: string;
+  readonly primary: string;
+  readonly trailing?: string;
+};
+
+/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
+ *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+export function FeedList({
+  rows,
+  emptyContent,
+  testId,
+}: {
+  readonly rows: readonly FeedRow[];
+  readonly emptyContent?: ReactNode;
+  readonly testId?: string;
+}): ReactNode {
+  if (rows.length === 0) {
+    return <div data-testid={testId}>{emptyContent}</div>;
+  }
+  return (
+    <ul data-testid={testId} className="flex max-h-64 flex-col overflow-y-auto pr-1 text-sm">
+      {rows.map((row) => (
+        <li key={row.id} className="flex justify-between gap-4 border-b py-1.5 last:border-b-0">
+          <span>{row.primary}</span>
+          {row.trailing !== undefined && (
+            <span className="tabular-nums text-muted-foreground">{row.trailing}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/widgets/form-fields.tsx

@@ -0,0 +1,66 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export interface NumberFieldProps {
+  readonly label: string;
+  readonly id: string;
+  readonly name: string;
+  readonly value: number | undefined;
+  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. */
+export function NumberField({
+  label,
+  id,
+  name,
+  value,
+  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}
+    >
+      <Input
+        kind="number"
+        id={id}
+        name={name}
+        value={value ?? ""}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
+/** 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="€" />;
+}
+
+/** Prozentwert (Zins, Tilgung, Rendite). Preset über NumberField mit "%". */
+export function PercentField(props: Omit<NumberFieldProps, "unit">): ReactNode {
+  return <NumberField {...props} unit="%" />;
+}

package/src/widgets/index.ts

@@ -12,10 +12,15 @@ export {
 } from "./charts";
 export { CollapsibleSection } from "./collapsible-section";
 export { DetailList } from "./detail-list";
+export { FeedList, type FeedRow } from "./feed-list";
+export { MoneyField, NumberField, type NumberFieldProps, PercentField } from "./form-fields";
 export { ModeSwitch } from "./mode-switch";
 export { ProgressBar } from "./progress-bar";
+export { ProgressList, type ProgressListRow } from "./progress-list";
 export { QueryTable, type QueryTableColumn, type QueryTableProps } from "./query-table";
+export { type ResultColumn, ResultPanel, ResultTable } from "./result-panel";
 export { SectionCard } from "./section-card";
 export { MiniStat, Sparkline, StatCard, type StatDelta, type StatTone } from "./stat";
 export { EmptyState, ErrorState, LoadingState } from "./states";
 export { STATUS_TONE_TEXT, StatusBadge, type StatusTone } from "./status-badge";
+export { useDraft } from "./use-draft";