@cosmicdrift/kumiko-renderer-web 0.137.0 → 0.139.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.137.0",
+  "version": "0.139.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.137.0",
-    "@cosmicdrift/kumiko-headless": "0.137.0",
-    "@cosmicdrift/kumiko-renderer": "0.137.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.139.0",
+    "@cosmicdrift/kumiko-headless": "0.139.0",
+    "@cosmicdrift/kumiko-renderer": "0.139.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/index.ts

@@ -155,24 +155,36 @@ export {
 } from "./tokens";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 export type {
+  BooleanFieldProps,
+  ComparisonMetric,
+  DateFieldProps,
   FeedRow,
+  FileFieldProps,
   NumberFieldProps,
   ProgressListRow,
   QueryTableColumn,
   QueryTableProps,
+  RangeFieldProps,
   ResultColumn,
+  SelectFieldProps,
   StatDelta,
   StatTone,
   StatusBarEntry,
   StatusTone,
+  TextareaFieldProps,
+  TextFieldProps,
   TimeseriesPoint,
 } from "./widgets";
 export {
+  BooleanField,
   CollapsibleSection,
+  ComparisonTable,
+  DateField,
   DetailList,
   EmptyState,
   ErrorState,
   FeedList,
+  FileField,
   LoadingState,
   MiniStat,
   ModeSwitch,
@@ -182,15 +194,19 @@ export {
   ProgressBar,
   ProgressList,
   QueryTable,
+  RangeField,
   ResultPanel,
   ResultTable,
   SectionCard,
+  SelectField,
   Sparkline,
   STATUS_TONE_TEXT,
   StatCard,
   StatusBadge,
   StatusBarChart,
   smoothPath,
+  TextareaField,
+  TextField,
   TimeseriesChart,
   useDraft,
 } from "./widgets";

package/src/primitives/index.tsx

@@ -111,12 +111,19 @@ const BUTTON_VARIANT = {
   link: "link",
 } as const;
 
+const BUTTON_SIZE = {
+  sm: "sm",
+  md: "default",
+  icon: "icon",
+} as const;
+
 function DefaultButton({
   type = "button",
   onClick,
   disabled,
   loading,
   variant = "primary",
+  size = "md",
   children,
   testId,
 }: ButtonProps): ReactNode {
@@ -128,6 +135,7 @@ function DefaultButton({
       data-testid={testId}
       data-loading={loading === true ? "true" : undefined}
       variant={BUTTON_VARIANT[variant]}
+      size={BUTTON_SIZE[size]}
       // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner),
       // nicht als gepolsterte Buttonfläche.
       className={variant === "link" ? "h-auto px-0 py-0" : undefined}
@@ -292,6 +300,19 @@ function DefaultInput(props: InputProps): ReactNode {
           className="text-right tabular-nums"
         />
       );
+    case "range":
+      return (
+        <input
+          type="range"
+          {...common}
+          min={props.min}
+          max={props.max}
+          step={props.step ?? 1}
+          value={props.value}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(Number(e.target.value))}
+          className="w-full accent-primary"
+        />
+      );
     case "boolean":
       return (
         <Checkbox

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

@@ -1,8 +1,21 @@
 import { describe, expect, mock, test } from "bun:test";
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
 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 {
+  BooleanField,
+  DateField,
+  FileField,
+  MoneyField,
+  NumberField,
+  PercentField,
+  RangeField,
+  SelectField,
+  TextareaField,
+  TextField,
+} from "../form-fields";
+import { ComparisonTable, ResultPanel, ResultTable } from "../result-panel";
 import { useDraft } from "../use-draft";
 
 describe("useDraft", () => {
@@ -103,3 +116,150 @@ describe("ResultTable", () => {
     expect(screen.getByText("300.000 €").className).toContain("tabular-nums");
   });
 });
+
+describe("Feld-Widgets (Select/Date/Text/Boolean/Textarea)", () => {
+  const noopStr = (): void => {};
+
+  test("SelectField rendert Label und den aktuell gewählten Wert", () => {
+    render(
+      <SelectField
+        label="Land"
+        id="l"
+        name="l"
+        value="NW"
+        onChange={noopStr}
+        options={[
+          { value: "NW", label: "Nordrhein-Westfalen" },
+          { value: "BY", label: "Bayern" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Land")).toBeTruthy();
+    expect(screen.getByText("Nordrhein-Westfalen")).toBeTruthy();
+  });
+
+  test("TextField meldet Eingabe", () => {
+    const onChange = mock();
+    render(<TextField label="Name" id="n" name="n" value="A" onChange={onChange} />);
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Neu" } });
+    expect(onChange).toHaveBeenCalledWith("Neu");
+  });
+
+  test("DateField rendert mit Wert", () => {
+    render(
+      <DateField
+        label="Datum"
+        id="d"
+        name="d"
+        value="2026-07-10"
+        onChange={noopStr}
+        max="2030-01-01"
+      />,
+    );
+    expect(screen.getByText("Datum")).toBeTruthy();
+  });
+
+  test("BooleanField meldet Umschalten", () => {
+    const onChange = mock();
+    render(<BooleanField label="Aktiv" id="b" name="b" value={false} onChange={onChange} />);
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  test("TextareaField meldet Eingabe", () => {
+    const onChange = mock();
+    render(<TextareaField label="Notiz" id="t" name="t" value="" onChange={onChange} rows={3} />);
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Text" } });
+    expect(onChange).toHaveBeenCalledWith("Text");
+  });
+});
+
+describe("ResultPanel footer", () => {
+  test("rendert den footer-Slot", () => {
+    render(
+      <ResultPanel
+        title="R"
+        rows={[{ label: "X", value: "1" }]}
+        footer={<button type="button">Los</button>}
+      >
+        <span>body</span>
+      </ResultPanel>,
+    );
+    expect(screen.getByRole("button", { name: "Los" })).toBeTruthy();
+  });
+});
+
+describe("RangeField", () => {
+  test("meldet den Slider-Wert als Zahl", () => {
+    const onChange = mock();
+    render(
+      <RangeField
+        label="Abruf"
+        id="r"
+        name="r"
+        value={20}
+        min={0}
+        max={100}
+        step={5}
+        onChange={onChange}
+      />,
+    );
+    expect(screen.getByText("Abruf")).toBeTruthy();
+    fireEvent.change(screen.getByRole("slider"), { target: { value: "45" } });
+    expect(onChange).toHaveBeenCalledWith(45);
+  });
+});
+
+describe("FileField", () => {
+  test("rendert Label", () => {
+    render(
+      <FileField label="Bild" id="f" name="f" value={null} onChange={() => {}} variant="image" />,
+    );
+    expect(screen.getByText("Bild")).toBeTruthy();
+  });
+});
+
+describe("Button size", () => {
+  function SizedButton({ size }: { readonly size: "sm" | "md" | "icon" }): ReactNode {
+    const { Button } = usePrimitives();
+    return (
+      <Button size={size} onClick={() => {}}>
+        X
+      </Button>
+    );
+  }
+  test("size=sm rendert die kompakte shadcn-Größe (h-8)", () => {
+    render(<SizedButton size="sm" />);
+    expect(screen.getByRole("button", { name: "X" }).className).toContain("h-8");
+  });
+});
+
+describe("ComparisonTable", () => {
+  test("transponierte Matrix mit Best-Highlight je Kennzahl", () => {
+    const cols = [
+      { name: "A", rate: 900 },
+      { name: "B", rate: 850 },
+    ];
+    render(
+      <ComparisonTable
+        testId="cmp"
+        columns={cols}
+        columnHeader={(c) => c.name}
+        columnKey={(c) => c.name}
+        metricLabel="Kennzahl"
+        metrics={[
+          {
+            label: "Rate",
+            value: (c: { name: string; rate: number }) => `${c.rate} €`,
+            bestIndex: (cs) => ((cs[0]?.rate ?? 0) <= (cs[1]?.rate ?? 0) ? 0 : 1),
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Kennzahl")).toBeTruthy();
+    expect(screen.getByText("A")).toBeTruthy();
+    // B (850) ist günstiger → hervorgehoben (font-semibold text-primary span)
+    expect(screen.getByText("850 €").className).toContain("text-primary");
+    expect(screen.getByText("900 €").className).not.toContain("text-primary");
+  });
+});

package/src/widgets/form-fields.tsx

@@ -52,3 +52,272 @@ export function MoneyField(props: NumberFieldProps): ReactNode {
 export function PercentField(props: NumberFieldProps): ReactNode {
   return <NumberField {...props} />;
 }
+
+interface FieldBase {
+  readonly label: string;
+  readonly id: string;
+  readonly name: string;
+  readonly required?: boolean;
+  readonly disabled?: boolean;
+  readonly testId?: string;
+}
+
+export interface TextFieldProps extends FieldBase {
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly placeholder?: string;
+  readonly autoComplete?: string;
+}
+
+/** Textfeld = Field + Input(kind:"text"). */
+export function TextField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  required,
+  disabled,
+  placeholder,
+  autoComplete,
+  testId,
+}: TextFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind="text"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+        {...(placeholder !== undefined && { placeholder })}
+        {...(autoComplete !== undefined && { autoComplete })}
+      />
+    </Field>
+  );
+}
+
+export interface SelectFieldProps extends FieldBase {
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly options:
+    | readonly string[]
+    | readonly { readonly value: string; readonly label: string }[];
+}
+
+/** Auswahlfeld = Field + Input(kind:"select"). */
+export function SelectField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  options,
+  required,
+  disabled,
+  testId,
+}: SelectFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind="select"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        options={options}
+        required={required}
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
+export interface DateFieldProps extends FieldBase {
+  readonly value: string;
+  readonly onChange: (v: string | undefined) => void;
+  readonly min?: string;
+  readonly max?: string;
+}
+
+/** Datumsfeld = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
+export function DateField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  min,
+  max,
+  required,
+  disabled,
+  testId,
+}: DateFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind="date"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+        {...(min !== undefined && { min })}
+        {...(max !== undefined && { max })}
+      />
+    </Field>
+  );
+}
+
+export interface BooleanFieldProps extends FieldBase {
+  readonly value: boolean;
+  readonly onChange: (v: boolean) => void;
+}
+
+/** Checkbox/Switch = Field(layout:"inline") + Input(kind:"boolean"). */
+export function BooleanField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  required,
+  disabled,
+  testId,
+}: BooleanFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} layout="inline" testId={testId}>
+      <Input
+        kind="boolean"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
+export interface TextareaFieldProps extends FieldBase {
+  readonly value: string;
+  readonly onChange: (v: string) => void;
+  readonly rows?: number;
+}
+
+/** Mehrzeiliges Textfeld = Field + Input(kind:"textarea"). */
+export function TextareaField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  rows,
+  required,
+  disabled,
+  testId,
+}: TextareaFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind="textarea"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+        {...(rows !== undefined && { rows })}
+      />
+    </Field>
+  );
+}
+
+export interface RangeFieldProps extends FieldBase {
+  readonly value: number;
+  readonly onChange: (v: number) => void;
+  readonly min: number;
+  readonly max: number;
+  readonly step?: number;
+}
+
+/** Schieberegler = Field + Input(kind:"range"). */
+export function RangeField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  required,
+  disabled,
+  testId,
+}: RangeFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind="range"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        min={min}
+        max={max}
+        required={required}
+        disabled={disabled}
+        {...(step !== undefined && { step })}
+      />
+    </Field>
+  );
+}
+
+export interface FileFieldProps extends FieldBase {
+  /** FileRef-UUID der gespeicherten Datei, oder null. */
+  readonly value: string | null;
+  readonly onChange: (fileId: string | null) => void;
+  readonly accept?: readonly string[];
+  /** "image" zeigt eine Vorschau, "file" nur den Dateinamen. Default "file". */
+  readonly variant?: "file" | "image";
+}
+
+/** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
+export function FileField({
+  label,
+  id,
+  name,
+  value,
+  onChange,
+  accept,
+  variant = "file",
+  required,
+  disabled,
+  testId,
+}: FileFieldProps): ReactNode {
+  const { Field, Input } = usePrimitives();
+  return (
+    <Field id={id} label={label} required={required} testId={testId}>
+      <Input
+        kind={variant}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+        {...(accept !== undefined && { accept })}
+      />
+    </Field>
+  );
+}

package/src/widgets/index.ts

@@ -13,12 +13,37 @@ export {
 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 {
+  BooleanField,
+  type BooleanFieldProps,
+  DateField,
+  type DateFieldProps,
+  FileField,
+  type FileFieldProps,
+  MoneyField,
+  NumberField,
+  type NumberFieldProps,
+  PercentField,
+  RangeField,
+  type RangeFieldProps,
+  SelectField,
+  type SelectFieldProps,
+  TextareaField,
+  type TextareaFieldProps,
+  TextField,
+  type TextFieldProps,
+} 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 {
+  type ComparisonMetric,
+  ComparisonTable,
+  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";

package/src/widgets/result-panel.tsx

@@ -13,6 +13,7 @@ export function ResultPanel({
   empty,
   emptyText,
   rows,
+  footer,
   children,
   testId,
 }: {
@@ -25,12 +26,14 @@ export function ResultPanel({
     readonly value: ReactNode;
     readonly emphasize?: boolean;
   }[];
+  /** Action-Slot am Karten-Fuß (z.B. „In Finanzierung übernehmen"). */
+  readonly footer?: ReactNode;
   readonly children?: ReactNode;
   readonly testId?: string;
 }): ReactNode {
   const { Banner } = usePrimitives();
   return (
-    <SectionCard title={title} subtitle={subtitle} testId={testId}>
+    <SectionCard title={title} subtitle={subtitle} footer={footer} testId={testId}>
       {empty === true ? (
         <Banner variant="info" padded>
           {emptyText}
@@ -99,3 +102,67 @@ export function ResultTable<Row>({
     </div>
   );
 }
+
+export interface ComparisonMetric<Col> {
+  readonly label: string;
+  readonly value: (col: Col, index: number) => ReactNode;
+  /** Index der besten Spalte für diese Zeile (hervorgehoben); -1 = keine. */
+  readonly bestIndex?: (cols: readonly Col[]) => number;
+}
+
+/** Transponierte Vergleichstabelle: Zeile = Kennzahl, Spalte = Variante, je
+ *  Kennzahl optional die beste Spalte hervorgehoben. Für Szenario-/Angebots-
+ *  Vergleiche, wo ResultTable (Zeile=Datensatz) nicht passt. */
+export function ComparisonTable<Col>({
+  columns,
+  columnHeader,
+  columnKey,
+  metrics,
+  metricLabel,
+  testId,
+}: {
+  readonly columns: readonly Col[];
+  readonly columnHeader: (col: Col, index: number) => string;
+  readonly columnKey: (col: Col, index: number) => string;
+  readonly metrics: readonly ComparisonMetric<Col>[];
+  readonly metricLabel: string;
+  readonly testId?: string;
+}): ReactNode {
+  return (
+    <div className="overflow-x-auto">
+      <table data-testid={testId} className="w-full min-w-[24rem] text-sm">
+        <thead>
+          <tr className="border-b text-left text-muted-foreground">
+            <th className="py-1.5 font-medium">{metricLabel}</th>
+            {columns.map((col, i) => (
+              <th key={columnKey(col, i)} className="py-1.5 text-right font-medium">
+                {columnHeader(col, i)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {metrics.map((metric) => {
+            const best = metric.bestIndex !== undefined ? metric.bestIndex(columns) : -1;
+            return (
+              <tr key={metric.label} className="border-b last:border-0">
+                <td className="py-1.5 text-muted-foreground">{metric.label}</td>
+                {columns.map((col, i) => (
+                  <td key={columnKey(col, i)} className="py-1.5 text-right tabular-nums">
+                    {i === best ? (
+                      <span className="inline-block rounded bg-primary/10 px-2 py-0.5 font-semibold text-primary">
+                        {metric.value(col, i)}
+                      </span>
+                    ) : (
+                      metric.value(col, i)
+                    )}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}