@cosmicdrift/kumiko-renderer-web 0.190.0 → 0.192.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.190.0",
+  "version": "0.192.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.190.0",
-    "@cosmicdrift/kumiko-headless": "0.190.0",
-    "@cosmicdrift/kumiko-renderer": "0.190.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.192.0",
+    "@cosmicdrift/kumiko-headless": "0.192.0",
+    "@cosmicdrift/kumiko-renderer": "0.192.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__/wizard-form-validation.test.tsx

@@ -71,3 +71,66 @@ describe("entityEdit wizard — presence validation on Next (fw#1910)", () => {
     expect(screen.queryByTestId("field-fullName-errors")).toBeNull();
   });
 });
+
+// fw#1966: the wizard chrome used to only show a "Step X of Y" counter —
+// no way to see what the remaining steps are called. The step bar renders
+// every section title up front and marks the current one.
+describe("entityEdit wizard — step bar (fw#1966)", () => {
+  test("shows every section title as a step entry", () => {
+    renderWizard();
+
+    expect(screen.getByTestId("render-edit-wizard-steps-step-0").textContent).toContain("Step 1");
+    expect(screen.getByTestId("render-edit-wizard-steps-step-1").textContent).toContain("Step 2");
+  });
+
+  test("marks the active step and moves the marker forward on Next", async () => {
+    const { container } = renderWizard();
+
+    expect(screen.getByTestId("render-edit-wizard-steps-step-0").getAttribute("aria-current")).toBe(
+      "step",
+    );
+    expect(
+      screen.getByTestId("render-edit-wizard-steps-step-1").getAttribute("aria-current"),
+    ).toBeNull();
+
+    const fullNameInput = container.querySelector("#kumiko-edit-fullName");
+    await userEvent.type(fullNameInput as Element, "Ada Lovelace");
+    await userEvent.click(screen.getByTestId("render-edit-wizard-next"));
+
+    expect(
+      screen.getByTestId("render-edit-wizard-steps-step-0").getAttribute("aria-current"),
+    ).toBeNull();
+    expect(screen.getByTestId("render-edit-wizard-steps-step-1").getAttribute("aria-current")).toBe(
+      "step",
+    );
+  });
+
+  test("a wizard with N sections renders N step entries", () => {
+    const threeStepScreen: EntityEditScreenDefinition = {
+      id: "profile-edit-3",
+      type: "entityEdit",
+      entity: "profile",
+      layout: {
+        mode: "wizard",
+        sections: [
+          { title: "Basics", fields: ["fullName"] },
+          { title: "Contact", fields: ["email"] },
+          { title: "Review", fields: [] },
+        ],
+      },
+    };
+    const threeStepSchema: FeatureSchema = {
+      featureName: "demo",
+      entities: { profile: profileEntity },
+      screens: [threeStepScreen],
+    };
+    const { container } = render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <KumikoScreen schema={threeStepSchema} qn="demo:screen:profile-edit-3" />
+      </DispatcherProvider>,
+    );
+
+    const steps = container.querySelectorAll('[data-testid^="render-edit-wizard-steps-step-"]');
+    expect(steps.length).toBe(3);
+  });
+});

package/src/index.ts

@@ -224,6 +224,7 @@ export {
   StatCard,
   StatusBadge,
   StatusBarChart,
+  StepBar,
   smoothPath,
   TextareaField,
   TextField,

package/src/primitives/__tests__/file-upload.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "@testing-library/react";
+import { FileUploadInput } from "../file-upload";
+
+const noop = () => {};
+
+// alt="" makes the <img> presentational (no accessible role), so
+// getByRole("img") wouldn't find it — query the DOM directly instead.
+describe("FileUploadInput — image variant preview src (#1950)", () => {
+  test("with imageVariant set, the <img> src requests the named variant", () => {
+    const { container } = render(
+      <FileUploadInput kind="image" id="avatar" value="abc" onChange={noop} imageVariant="thumb" />,
+    );
+    expect(container.querySelector("img")?.getAttribute("src")).toBe(
+      "/api/files/abc/variant/thumb",
+    );
+  });
+
+  test("without imageVariant, the <img> src loads the original", () => {
+    const { container } = render(
+      <FileUploadInput kind="image" id="avatar" value="abc" onChange={noop} />,
+    );
+    expect(container.querySelector("img")?.getAttribute("src")).toBe("/api/files/abc");
+  });
+});

package/src/primitives/file-upload.tsx

@@ -1,7 +1,7 @@
-// File/Image-Upload-Widget für die Auto-Edit-Form. Lädt eine Datei per
-// multipart-POST an /api/files (vom Stack gemountet wenn ein storageProvider
-// gesetzt ist), bekommt die FileRef-UUID zurück und gibt sie als Field-Wert
-// hoch. Image → runde Avatar-Preview (GET /api/files/:id), file → Dateiname.
+// File/image upload widget for the auto-edit form. Uploads via multipart POST
+// to /api/files (mounted by the stack when a storageProvider is set), gets the
+// FileRef UUID back and lifts it up as the field value. Image → round avatar
+// preview (GET /api/files/:id, or the declared variant), file → file name.
 
 import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import { ImageIcon, Loader2, Upload } from "lucide-react";
@@ -17,6 +17,7 @@ export type FileUploadInputProps = {
   readonly disabled?: boolean;
   readonly entityType?: string;
   readonly fieldName?: string;
+  readonly imageVariant?: string;
 };
 
 // "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
@@ -34,6 +35,7 @@ export function FileUploadInput({
   disabled,
   entityType,
   fieldName,
+  imageVariant,
 }: FileUploadInputProps): ReactNode {
   const inputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
@@ -79,7 +81,11 @@ export function FileUploadInput({
       {kind === "image" &&
         (value !== null ? (
           <img
-            src={`/api/files/${value}`}
+            src={
+              imageVariant !== undefined
+                ? `/api/files/${value}/variant/${imageVariant}`
+                : `/api/files/${value}`
+            }
             alt=""
             className="size-16 rounded-full border object-cover"
           />

package/src/primitives/index.tsx

@@ -33,6 +33,7 @@ import {
   type LinkProps,
   type ProgressProps,
   type SectionProps,
+  type StepBarProps,
   type TextProps,
   useColumnRenderer,
   useTranslation,
@@ -82,6 +83,7 @@ import { Label as UiLabel } from "../ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Textarea } from "../ui/textarea";
 import { ProgressBar } from "../widgets/progress-bar";
+import { StepBar } from "../widgets/step-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { DefaultDialog } from "./dialog";
@@ -431,6 +433,7 @@ function DefaultInput(props: InputProps): ReactNode {
           {...(props.disabled !== undefined && { disabled: props.disabled })}
           {...(props.entityType !== undefined && { entityType: props.entityType })}
           {...(props.fieldName !== undefined && { fieldName: props.fieldName })}
+          {...(props.imageVariant !== undefined && { imageVariant: props.imageVariant })}
         />
       );
     case "date":
@@ -1899,6 +1902,24 @@ function DefaultProgress({ value, testId }: ProgressProps): ReactNode {
   return <ProgressBar value={value} testId={testId} />;
 }
 
+function DefaultStepBar({
+  steps,
+  currentIndex,
+  compactLabel,
+  testId,
+  compactTestId,
+}: StepBarProps): ReactNode {
+  return (
+    <StepBar
+      steps={steps}
+      currentIndex={currentIndex}
+      compactLabel={compactLabel}
+      testId={testId}
+      compactTestId={compactTestId}
+    />
+  );
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -1993,4 +2014,5 @@ export const defaultPrimitives: CorePrimitives = {
   ConfigCascadeView: DefaultConfigCascadeView,
   Link: DefaultLink,
   Progress: DefaultProgress,
+  StepBar: DefaultStepBar,
 };

package/src/widgets/__tests__/widgets.test.tsx

@@ -9,6 +9,7 @@ import { SectionCard } from "../section-card";
 import { MiniStat, StatCard } from "../stat";
 import { EmptyState } from "../states";
 import { StatusBadge } from "../status-badge";
+import { StepBar } from "../step-bar";
 
 describe("StatusBadge", () => {
   test("rendert Label mit Tone-Klassen", () => {
@@ -55,6 +56,82 @@ describe("ProgressBar", () => {
   });
 });
 
+describe("StepBar", () => {
+  test("rendert einen Step-Eintrag pro Label mit sichtbarem Titel", () => {
+    render(
+      <StepBar
+        steps={["Basics", "Industry", "Review"]}
+        currentIndex={0}
+        compactLabel="Step 1 of 3 · Basics"
+        testId="steps"
+      />,
+    );
+    expect(screen.getByTestId("steps-step-0").textContent).toContain("Basics");
+    expect(screen.getByTestId("steps-step-1").textContent).toContain("Industry");
+    expect(screen.getByTestId("steps-step-2").textContent).toContain("Review");
+  });
+
+  test("markiert nur den aktiven Schritt via aria-current", () => {
+    render(
+      <StepBar
+        steps={["Basics", "Industry", "Review"]}
+        currentIndex={1}
+        compactLabel="Step 2 of 3 · Industry"
+        testId="steps"
+      />,
+    );
+    expect(screen.getByTestId("steps-step-0").getAttribute("aria-current")).toBeNull();
+    expect(screen.getByTestId("steps-step-1").getAttribute("aria-current")).toBe("step");
+    expect(screen.getByTestId("steps-step-2").getAttribute("aria-current")).toBeNull();
+  });
+
+  test("erledigte Schritte zeigen ein Häkchen statt der Nummer, kommende ihre Nummer", () => {
+    render(
+      <StepBar
+        steps={["Basics", "Industry", "Review"]}
+        currentIndex={1}
+        compactLabel="Step 2 of 3 · Industry"
+        testId="steps"
+      />,
+    );
+    const done = screen.getByTestId("steps-step-0");
+    expect(done.querySelector("svg")).not.toBeNull();
+    expect(done.textContent).not.toContain("1");
+
+    const current = screen.getByTestId("steps-step-1");
+    expect(current.querySelector("svg")).toBeNull();
+    expect(current.textContent).toContain("2");
+
+    const upcoming = screen.getByTestId("steps-step-2");
+    expect(upcoming.querySelector("svg")).toBeNull();
+    expect(upcoming.textContent).toContain("3");
+  });
+
+  test("erledigte Schritte bleiben für Screenreader als erledigt erkennbar", () => {
+    render(
+      <StepBar
+        steps={["Basics", "Industry"]}
+        currentIndex={1}
+        compactLabel="Step 2 of 2 · Industry"
+        testId="steps"
+      />,
+    );
+    expect(screen.getByTestId("steps-step-0").textContent).toContain("Done");
+  });
+
+  test("rendert den compactLabel-Fallback für schmale Viewports", () => {
+    render(
+      <StepBar
+        steps={["Basics", "Industry"]}
+        currentIndex={0}
+        compactLabel="Step 1 of 2 · Basics"
+        compactTestId="steps-compact"
+      />,
+    );
+    expect(screen.getByTestId("steps-compact").textContent).toBe("Step 1 of 2 · Basics");
+  });
+});
+
 describe("ModeSwitch", () => {
   test("markiert aktive Option und feuert onChange", () => {
     const onChange = mock((_v: string) => {});

package/src/widgets/index.ts

@@ -56,5 +56,6 @@ 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 { StepBar } from "./step-bar";
 export { UploadZone, type UploadZoneProps } from "./upload-zone";
 export { useDraft } from "./use-draft";

package/src/widgets/progress-bar.tsx

@@ -1,7 +1,14 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 
-/** Fortschrittsbalken, `value` 0..1 (wird geclampt). */
+/**
+ * Progress bar, `value` 0..1 (clamped).
+ *
+ * The track lives in its own inner element so a parent that pads or
+ * stretches its direct children (e.g. RenderEdit's wizard chrome) never
+ * touches the track's own `h-2` — a caller's `className` reaches the
+ * outer wrapper, not the height-bearing track.
+ */
 export function ProgressBar({
   value,
   className,
@@ -13,18 +20,20 @@ export function ProgressBar({
 }): ReactNode {
   const pct = Math.max(0, Math.min(1, value));
   return (
-    <div
-      data-testid={testId}
-      role="progressbar"
-      aria-valuenow={Math.round(pct * 100)}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
-    >
+    <div className={cn("w-full", className)}>
       <div
-        className="absolute inset-y-0 left-0 rounded-full bg-primary"
-        style={{ width: `${pct * 100}%` }}
-      />
+        data-testid={testId}
+        role="progressbar"
+        aria-valuenow={Math.round(pct * 100)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
+      >
+        <div
+          className="absolute inset-y-0 left-0 rounded-full bg-primary"
+          style={{ width: `${pct * 100}%` }}
+        />
+      </div>
     </div>
   );
 }

package/src/widgets/step-bar.tsx

@@ -0,0 +1,68 @@
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+/** Wizard step overview — numbered chips with a connector line between
+ *  them, not clickable. Three visual states, none conveyed by color alone:
+ *  done (checkmark replaces the number, `aria-current` absent, a sr-only
+ *  label says so since the number itself is gone), current (`aria-current
+ *  ="step"`, own background), upcoming (dimmed, number visible). Below
+ *  `sm` the chip row hides in favor of `compactLabel` (seven step names
+ *  don't fit on a phone) — both live in the DOM, Tailwind's
+ *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
+ *  pattern as embedded-list-input.tsx's desktop/mobile split). */
+export function StepBar({
+  steps,
+  currentIndex,
+  compactLabel,
+  testId,
+  compactTestId,
+}: {
+  readonly steps: readonly string[];
+  readonly currentIndex: number;
+  readonly compactLabel: string;
+  readonly testId?: string;
+  readonly compactTestId?: string;
+}): ReactNode {
+  const t = useTranslation();
+  return (
+    <>
+      <ol data-testid={testId} className="hidden items-center gap-2 sm:flex sm:flex-wrap">
+        {steps.map((label, i) => {
+          const isDone = i < currentIndex;
+          const isCurrent = i === currentIndex;
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: steps is a static, positional list — index is stable identity, no reorder/DnD.
+            <li key={`${i}-${label}`} className="flex items-center gap-2">
+              {i > 0 && <span aria-hidden="true" className="h-px w-4 bg-border" />}
+              <span
+                aria-current={isCurrent ? "step" : undefined}
+                data-testid={testId !== undefined ? `${testId}-step-${i}` : undefined}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
+                  isCurrent && "bg-primary font-semibold text-primary-foreground",
+                  isDone && "text-primary",
+                  !isCurrent && !isDone && "text-muted-foreground",
+                )}
+              >
+                {isDone ? (
+                  <>
+                    <Check aria-hidden="true" className="size-3.5" />
+                    <span className="sr-only">{t("kumiko.widget.stepBar.done")}</span>
+                  </>
+                ) : (
+                  <span className="text-xs font-semibold">{i + 1}</span>
+                )}
+                {label}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+      <p data-testid={compactTestId} className="text-sm text-muted-foreground sm:hidden">
+        {compactLabel}
+      </p>
+    </>
+  );
+}