@cosmicdrift/kumiko-renderer-web 0.191.0 → 0.192.0

package/package.json

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

@@ -433,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":

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>
   );
 }