@cosmicdrift/kumiko-renderer-web 0.123.2 → 0.124.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.123.2",
+  "version": "0.124.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.123.2",
-    "@cosmicdrift/kumiko-headless": "0.123.2",
-    "@cosmicdrift/kumiko-renderer": "0.123.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.124.0",
+    "@cosmicdrift/kumiko-headless": "0.124.0",
+    "@cosmicdrift/kumiko-renderer": "0.124.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__/lightbox.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, mock, test } from "bun:test";
+import userEvent from "@testing-library/user-event";
+import { defaultPrimitives } from "../primitives";
+import { render, screen } from "./test-utils";
+
+const { Lightbox } = defaultPrimitives;
+
+describe("Lightbox", () => {
+  test("open=true renders image with src and alt", () => {
+    render(
+      <Lightbox
+        open
+        onOpenChange={() => undefined}
+        src="/demo.png"
+        alt="Product screenshot"
+        testId="lb"
+      />,
+    );
+    const img = screen.getByRole("img", { name: "Product screenshot" });
+    expect(img.getAttribute("src")).toBe("/demo.png");
+    expect(screen.getByTestId("lb")).toBeTruthy();
+  });
+
+  test("open=false renders nothing", () => {
+    render(
+      <Lightbox
+        open={false}
+        onOpenChange={() => undefined}
+        src="/demo.png"
+        alt="Hidden"
+        testId="lb-hidden"
+      />,
+    );
+    expect(screen.queryByTestId("lb-hidden")).toBeNull();
+  });
+
+  test("close button calls onOpenChange(false)", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = mock();
+    render(
+      <Lightbox open onOpenChange={onOpenChange} src="/demo.png" alt="Preview" testId="lb-close" />,
+    );
+    await user.click(screen.getByLabelText("Close"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/primitives/dialog.tsx

@@ -1,18 +1,13 @@
-// shadcn-Style Dialog via @radix-ui/react-dialog. Confirm-Button-
-// Variant kommt aus dem Standard-Button-Pattern; Cancel ist immer
-// secondary. Async-onConfirm wird über loading-State gerendert
-// (Spinner im Confirm-Button bis der Promise resolved).
-//
-// Ausgelagert von primitives/index.tsx weil das Radix-Setup mehrere
-// Dependencies und Sub-Exports zieht — hält das Primitives-Hauptfile
-// schlank.
+// Confirm dialog built on ModalShell. Cancel is always secondary; async
+// onConfirm shows a spinner on the confirm button until the promise settles.
 
 import type { DialogProps } from "@cosmicdrift/kumiko-renderer";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Loader2, X } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn";
+import { ModalShell } from "./modal-shell";
 
 export function DefaultDialog({
   open,
@@ -38,9 +33,6 @@ export function DefaultDialog({
       await onConfirm();
     } finally {
       setLoading(false);
-      // Auch bei rejected onConfirm schließen — ein offen hängendes Modal
-      // ohne Botschaft wirkt eingefroren; der Fehler selbst wird vom
-      // onConfirm-Pfad surfaced (Row-Actions: Toast).
       onOpenChange(false);
     }
   }
@@ -51,72 +43,51 @@ export function DefaultDialog({
     : "bg-primary text-primary-foreground shadow hover:bg-primary/90";
 
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-        <DialogPrimitive.Content
-          data-testid={testId}
-          // Wenn description fehlt, signalisieren wir Radix explizit
-          // `aria-describedby={undefined}` — sonst warnt Radix zur
-          // Laufzeit (aria-Best-Practice: Modals sollen entweder eine
-          // Description haben oder den Hinweis tragen dass keine da ist).
-          {...(description === undefined && { "aria-describedby": undefined })}
+    <ModalShell
+      open={open}
+      onOpenChange={onOpenChange}
+      testId={testId}
+      closeLabel={t("kumiko.dialog.close")}
+      noAriaDescription={description === undefined}
+      contentClassName={cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg")}
+    >
+      <div className="flex flex-col gap-1.5">
+        <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
+          {title}
+        </DialogPrimitive.Title>
+        {description !== undefined && (
+          <DialogPrimitive.Description className="text-sm text-muted-foreground">
+            {description}
+          </DialogPrimitive.Description>
+        )}
+      </div>
+      {children !== undefined && <div>{children}</div>}
+      <div className="flex items-center justify-end gap-2">
+        <DialogPrimitive.Close asChild>
+          <button
+            type="button"
+            disabled={loading}
+            data-testid={testId !== undefined ? `${testId}-cancel` : undefined}
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+          >
+            {effectiveCancelLabel}
+          </button>
+        </DialogPrimitive.Close>
+        <button
+          type="button"
+          onClick={() => void handleConfirm()}
+          disabled={loading}
+          data-testid={testId !== undefined ? `${testId}-confirm` : undefined}
           className={cn(
-            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-            "rounded-lg",
+            "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
+            "disabled:pointer-events-none disabled:opacity-50",
+            confirmClass,
           )}
         >
-          <div className="flex flex-col gap-1.5">
-            <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
-              {title}
-            </DialogPrimitive.Title>
-            {description !== undefined && (
-              <DialogPrimitive.Description className="text-sm text-muted-foreground">
-                {description}
-              </DialogPrimitive.Description>
-            )}
-          </div>
-          {children !== undefined && <div>{children}</div>}
-          <div className="flex items-center justify-end gap-2">
-            <DialogPrimitive.Close asChild>
-              <button
-                type="button"
-                disabled={loading}
-                data-testid={testId !== undefined ? `${testId}-cancel` : undefined}
-                className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-              >
-                {effectiveCancelLabel}
-              </button>
-            </DialogPrimitive.Close>
-            <button
-              type="button"
-              onClick={() => void handleConfirm()}
-              disabled={loading}
-              data-testid={testId !== undefined ? `${testId}-confirm` : undefined}
-              className={cn(
-                "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
-                "disabled:pointer-events-none disabled:opacity-50",
-                confirmClass,
-              )}
-            >
-              {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
-              {effectiveConfirmLabel}
-            </button>
-          </div>
-          <DialogPrimitive.Close asChild>
-            <button
-              type="button"
-              aria-label={t("kumiko.dialog.close")}
-              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-            >
-              <X className="size-4" />
-            </button>
-          </DialogPrimitive.Close>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+          {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
+          {effectiveConfirmLabel}
+        </button>
+      </div>
+    </ModalShell>
   );
 }

package/src/primitives/index.tsx

@@ -76,6 +76,7 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 import { FileUploadInput } from "./file-upload";
+import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
@@ -1665,6 +1666,7 @@ export const defaultPrimitives: CorePrimitives = {
   Text: DefaultText,
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
+  Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
 };

package/src/primitives/lightbox.tsx

@@ -0,0 +1,39 @@
+// Full-size image overlay — ModalShell without confirm/cancel actions.
+
+import type { LightboxProps } from "@cosmicdrift/kumiko-renderer";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { ModalShell } from "./modal-shell";
+
+export function DefaultLightbox({
+  open,
+  onOpenChange,
+  src,
+  alt,
+  testId,
+}: LightboxProps): ReactNode {
+  const t = useTranslation();
+
+  return (
+    <ModalShell
+      open={open}
+      onOpenChange={onOpenChange}
+      testId={testId}
+      closeLabel={t("kumiko.dialog.close")}
+      noAriaDescription
+      contentClassName={cn(
+        "border-0 bg-transparent p-0 shadow-none",
+        "max-w-[95vw] max-h-[90vh] w-auto",
+      )}
+    >
+      <DialogPrimitive.Title className="sr-only">{alt}</DialogPrimitive.Title>
+      <img
+        src={src}
+        alt={alt}
+        className="block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg"
+      />
+    </ModalShell>
+  );
+}

package/src/primitives/modal-shell.tsx

@@ -0,0 +1,62 @@
+// Shared Radix dialog chrome for confirm Dialog + image Lightbox.
+// Not exported from the package — only an internal building block.
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type ModalShellProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly children: ReactNode;
+  readonly testId?: string;
+  readonly contentClassName?: string;
+  /** Radix wants aria-describedby={undefined} when there is no Description. */
+  readonly noAriaDescription?: boolean;
+  readonly closeLabel?: string;
+  readonly showCloseButton?: boolean;
+};
+
+export function ModalShell({
+  open,
+  onOpenChange,
+  children,
+  testId,
+  contentClassName,
+  noAriaDescription,
+  closeLabel,
+  showCloseButton = true,
+}: ModalShellProps): ReactNode {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          data-testid={testId}
+          {...(noAriaDescription && { "aria-describedby": undefined })}
+          className={cn(
+            "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            contentClassName,
+          )}
+        >
+          {children}
+          {showCloseButton && closeLabel !== undefined && (
+            <DialogPrimitive.Close asChild>
+              <button
+                type="button"
+                aria-label={closeLabel}
+                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+              >
+                <X className="size-4" />
+              </button>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}