@cosmicdrift/kumiko-renderer-web 0.131.0 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.131.0",
+  "version": "0.132.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.131.0",
-    "@cosmicdrift/kumiko-headless": "0.131.0",
-    "@cosmicdrift/kumiko-renderer": "0.131.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.132.0",
+    "@cosmicdrift/kumiko-headless": "0.132.0",
+    "@cosmicdrift/kumiko-renderer": "0.132.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__/toast.test.tsx

@@ -1,9 +1,9 @@
 //
 // ToastProvider + useToast pinnt: toast() rendert Title+Description in
-// einem Radix-Toast; mehrere toasts stapeln; Variant=destructive setzt
-// die destructive-Klasse; useToast außerhalb des Providers ist no-op
-// (kein crash); IDs sind kollisionsfrei auch bei zwei Calls im selben
-// Tick (Counter-Race-Bug).
+// einem Radix-Toast; mehrere toasts stapeln; Variant=bad setzt die
+// StatusTone-Klasse; useToast außerhalb des Providers ist no-op (kein
+// crash); IDs sind kollisionsfrei auch bei zwei Calls im selben Tick
+// (Counter-Race-Bug).
 
 import { describe, expect, test } from "bun:test";
 import { act, fireEvent, screen } from "@testing-library/react";
@@ -49,7 +49,7 @@ describe("ToastProvider + useToast", () => {
           options={[
             {
               title: "Konflikt",
-              variant: "destructive",
+              variant: "bad",
               docsUrl: "https://docs.kumiko.rocks/errors/stale_state",
             },
           ]}
@@ -88,18 +88,18 @@ describe("ToastProvider + useToast", () => {
     expect(screen.queryByRole("link")).toBeNull();
   });
 
-  test("variant=destructive: setzt die destructive-Klasse auf den Root", () => {
+  test("variant=bad: setzt die status-bad StatusTone-Klasse auf den Root", () => {
     render(
       <ToastProvider>
-        <ToastTrigger options={[{ title: "Failed", variant: "destructive" }]} />
+        <ToastTrigger options={[{ title: "Failed", variant: "bad" }]} />
       </ToastProvider>,
     );
     // Class-Mapping ist der Public-Vertrag mit Tailwind-Tokens. Wir
     // suchen den nearest Ancestor des Title-Knotens dessen Klassen-
-    // String "destructive" enthält — Radix-Toast.Root rendert in einem
+    // String "status-bad" enthält — Radix-Toast.Root rendert in einem
     // <li>, aber die genaue Role wechselt je nach priority/type.
     let node: HTMLElement | null = screen.getByText("Failed");
-    while (node !== null && !node.className.includes("destructive")) {
+    while (node !== null && !node.className.includes("status-bad")) {
       node = node.parentElement;
     }
     expect(node).not.toBeNull();

package/src/primitives/index.tsx

@@ -778,7 +778,7 @@ function useRowActionTrigger(row: ListRowViewModel) {
       toast({
         title: t("kumiko.rowAction.failed"),
         description: e instanceof Error ? e.message : String(e),
-        variant: "destructive",
+        variant: "bad",
         ...(docsUrl !== undefined && { docsUrl }),
       });
     } finally {

package/src/primitives/toast.tsx

@@ -3,9 +3,9 @@
 // kann. Kein Context-Boilerplate für Konsumenten — der Hook returned
 // einen `toast()`-Trigger, mehr Public-API gibt's nicht.
 //
-// Variants: "default" (neutral) und "destructive" (Fehler-Akzent).
-// Auto-dismiss nach 5s, manuell schließbar via X-Button. Der ARIA-
-// Live-Region-Setup kommt komplett aus Radix.
+// Variant = StatusTone (dieselbe Farb-Familie wie StatusBadge), Default
+// "muted" (neutral). Auto-dismiss nach 5s, manuell schließbar via X-Button.
+// Der ARIA-Live-Region-Setup kommt komplett aus Radix.
 
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as Primitive from "@radix-ui/react-toast";
@@ -21,8 +21,9 @@ import {
   useState,
 } from "react";
 import { cn } from "../lib/cn";
+import type { StatusTone } from "../widgets/status-badge";
 
-export type ToastVariant = "default" | "destructive";
+export type ToastVariant = StatusTone;
 
 export type ToastOptions = {
   readonly title: string;
@@ -111,6 +112,14 @@ const rootClass =
   "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full " +
   "data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full";
 
+const TONE_CLASS: Record<StatusTone, string> = {
+  ok: "border-status-ok/30 bg-status-ok/10 text-status-ok",
+  warn: "border-status-warn/30 bg-status-warn/10 text-status-warn",
+  bad: "border-status-bad/30 bg-status-bad/10 text-status-bad",
+  critical: "border-status-critical/40 bg-status-critical/15 text-status-critical",
+  muted: "border bg-background text-foreground",
+};
+
 function ToastItem({
   entry,
   onClose,
@@ -120,10 +129,7 @@ function ToastItem({
 }): ReactNode {
   const t = useTranslation();
   const learnMore = entry.docsLinkLabel ?? t("kumiko.toast.learn-more");
-  const variantClass =
-    entry.variant === "destructive"
-      ? "destructive group border-destructive bg-destructive text-destructive-foreground"
-      : "border bg-background text-foreground";
+  const variantClass = TONE_CLASS[entry.variant ?? "muted"];
   return (
     <Primitive.Root
       className={cn(rootClass, variantClass)}
@@ -159,7 +165,6 @@ function ToastItem({
           "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
           "hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1",
           "group-hover:opacity-100",
-          "group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50",
         )}
         aria-label={t("kumiko.dialog.close")}
       >