@cosmicdrift/kumiko-renderer-web 0.138.0 → 0.140.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.138.0",
+  "version": "0.140.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.138.0",
-    "@cosmicdrift/kumiko-headless": "0.138.0",
-    "@cosmicdrift/kumiko-renderer": "0.138.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.140.0",
+    "@cosmicdrift/kumiko-headless": "0.140.0",
+    "@cosmicdrift/kumiko-renderer": "0.140.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

@@ -159,10 +159,12 @@ export type {
   ComparisonMetric,
   DateFieldProps,
   FeedRow,
+  FileFieldProps,
   NumberFieldProps,
   ProgressListRow,
   QueryTableColumn,
   QueryTableProps,
+  RangeFieldProps,
   ResultColumn,
   SelectFieldProps,
   StatDelta,
@@ -182,6 +184,7 @@ export {
   EmptyState,
   ErrorState,
   FeedList,
+  FileField,
   LoadingState,
   MiniStat,
   ModeSwitch,
@@ -191,6 +194,7 @@ export {
   ProgressBar,
   ProgressList,
   QueryTable,
+  RangeField,
   ResultPanel,
   ResultTable,
   SectionCard,

package/src/primitives/index.tsx

@@ -111,15 +111,30 @@ 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",
+  ariaLabel,
+  fullWidth,
   children,
   testId,
 }: ButtonProps): ReactNode {
+  // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
+  // gepolsterte Fläche; fullWidth streckt CTA-Buttons in Karten/Panels.
+  const className =
+    [variant === "link" ? "h-auto px-0 py-0" : "", fullWidth === true ? "w-full" : ""]
+      .filter(Boolean)
+      .join(" ") || undefined;
   return (
     <UiButton
       type={type}
@@ -128,9 +143,9 @@ function DefaultButton({
       data-testid={testId}
       data-loading={loading === true ? "true" : undefined}
       variant={BUTTON_VARIANT[variant]}
-      // 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}
+      size={BUTTON_SIZE[size]}
+      {...(ariaLabel !== undefined && { "aria-label": ariaLabel })}
+      className={className}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>
@@ -292,6 +307,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,12 +1,16 @@
 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 {
   BooleanField,
   DateField,
+  FileField,
   MoneyField,
   NumberField,
   PercentField,
+  RangeField,
   SelectField,
   TextareaField,
   TextField,
@@ -185,6 +189,77 @@ describe("ResultPanel footer", () => {
   });
 });
 
+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");
+  });
+
+  test("ariaLabel gibt icon-only-Buttons einen zugänglichen Namen", () => {
+    function IconBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button size="icon" ariaLabel="Entfernen" onClick={() => {}}>
+          ✕
+        </Button>
+      );
+    }
+    render(<IconBtn />);
+    expect(screen.getByRole("button", { name: "Entfernen" })).toBeTruthy();
+  });
+
+  test("fullWidth streckt den Button (w-full)", () => {
+    function WideBtn(): ReactNode {
+      const { Button } = usePrimitives();
+      return (
+        <Button fullWidth onClick={() => {}}>
+          Upgrade
+        </Button>
+      );
+    }
+    render(<WideBtn />);
+    expect(screen.getByRole("button", { name: "Upgrade" }).className).toContain("w-full");
+  });
+});
+
 describe("ComparisonTable", () => {
   test("transponierte Matrix mit Best-Highlight je Kennzahl", () => {
     const cols = [

package/src/widgets/form-fields.tsx

@@ -241,3 +241,83 @@ export function TextareaField({
     </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

@@ -18,10 +18,14 @@ export {
   type BooleanFieldProps,
   DateField,
   type DateFieldProps,
+  FileField,
+  type FileFieldProps,
   MoneyField,
   NumberField,
   type NumberFieldProps,
   PercentField,
+  RangeField,
+  type RangeFieldProps,
   SelectField,
   type SelectFieldProps,
   TextareaField,