@cosmicdrift/kumiko-renderer-web 0.130.2 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.130.2",
+  "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.130.2",
-    "@cosmicdrift/kumiko-headless": "0.130.2",
-    "@cosmicdrift/kumiko-renderer": "0.130.2",
+    "@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__/dashboard-screen.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, test } from "bun:test";
+import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import {
+  DashboardBodyProvider,
+  DispatcherProvider,
+  KumikoScreen,
+} from "@cosmicdrift/kumiko-renderer";
+import { WebDashboardBody } from "../app/dashboard-body";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const dashboardScreen: DashboardScreenDefinition = {
+  id: "overview",
+  type: "dashboard",
+  panels: [
+    {
+      kind: "stat",
+      id: "uptime",
+      label: "status:dashboard:uptime",
+      query: "status:query:monitor:uptime-stat",
+      valueField: "value",
+      subField: "sub",
+      toneField: "tone",
+    },
+    {
+      kind: "list",
+      id: "latest",
+      label: "status:dashboard:latest",
+      query: "status:query:incident:latest",
+      columns: [{ field: "name", label: "status:dashboard:col-name" }],
+    },
+  ],
+};
+
+const schema: FeatureSchema = {
+  featureName: "status",
+  entities: {},
+  screens: [dashboardScreen],
+};
+
+function makeDispatcher(): Dispatcher {
+  return createMockDispatcher({
+    query: (async (type: string) => {
+      if (type === "status:query:monitor:uptime-stat") {
+        return {
+          isSuccess: true,
+          data: { value: "99,98 %", sub: "letzte 90 Tage", tone: "positive" },
+        };
+      }
+      return {
+        isSuccess: true,
+        data: { rows: [{ id: "i1", name: "API-Ausfall" }], nextCursor: null },
+      };
+    }) as unknown as Dispatcher["query"],
+  });
+}
+
+describe("KumikoScreen dashboard", () => {
+  test("ohne registrierten Body → Placeholder-Banner", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen schema={schema} qn="status:screen:overview" />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-dashboard-placeholder")).toBeTruthy();
+  });
+
+  test("WebDashboardBody rendert Stat- und List-Panels aus den Queries", async () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={schema} qn="status:screen:overview" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("99,98 %")).toBeTruthy());
+    expect(screen.getByTestId("dashboard-overview")).toBeTruthy();
+    // Stat-Panel: Label (Key-Fallback), Wert, Sub-Zeile aus dem Query-Record.
+    expect(screen.getByText("status:dashboard:uptime")).toBeTruthy();
+    expect(screen.getByText("letzte 90 Tage")).toBeTruthy();
+    // List-Panel: Row aus der paged envelope.
+    await waitFor(() => expect(screen.getByText("API-Ausfall")).toBeTruthy());
+  });
+});

package/src/__tests__/projection-list-actions.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { ProjectionListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+// writeHandler-Row/Toolbar-Actions auf projectionList — der entityList-
+// Dispatch-Pfad gilt jetzt auch hier (vorher v1: nur navigate).
+
+const projectionScreen: ProjectionListScreenDefinition = {
+  id: "maintenance-list",
+  type: "projectionList",
+  query: "status:query:maintenance:upcoming",
+  columns: [{ field: "name", label: "status:col:name" }],
+  rowActions: [
+    {
+      kind: "writeHandler",
+      id: "start",
+      label: "status:action:start",
+      handler: "status:write:maintenance:start",
+    },
+  ],
+  toolbarActions: [
+    {
+      kind: "writeHandler",
+      id: "sync",
+      label: "status:action:sync",
+      handler: "status:write:maintenance:sync",
+      payload: { source: "manual" },
+    },
+  ],
+};
+
+const schema: FeatureSchema = {
+  featureName: "status",
+  entities: {},
+  screens: [projectionScreen],
+};
+
+function makeDispatcher(write: Dispatcher["write"]): Dispatcher {
+  return {
+    ...createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "m1", name: "DB-Upgrade" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    }),
+    write,
+  };
+}
+
+describe("projectionList writeHandler-Actions", () => {
+  test("Row-Action dispatcht den Handler mit Default-Payload {id}", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:start" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:start");
+    expect(write.mock.calls[0]?.[1]).toEqual({ id: "m1" });
+  });
+
+  test("Toolbar-Action dispatcht den Handler mit deklariertem Payload", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:sync" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:sync");
+    expect(write.mock.calls[0]?.[1]).toEqual({ source: "manual" });
+  });
+});

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/app/create-app.tsx

@@ -11,6 +11,7 @@ import {
   type ColumnRendererComponent,
   ColumnRenderersProvider,
   CustomScreensProvider,
+  DashboardBodyProvider,
   DispatcherProvider,
   type ExtensionSectionComponent,
   ExtensionSectionsProvider,
@@ -38,6 +39,7 @@ import { useBrowserTokensApi } from "../tokens";
 import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
+import { WebDashboardBody } from "./dashboard-body";
 import { useBrowserNavApi } from "./nav";
 import { NavProvidersProvider } from "./nav-providers-context";
 import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
@@ -285,20 +287,22 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
         <PrimitivesProvider value={primitives}>
           <DispatcherProvider dispatcher={dispatcher}>
             <LiveEventsProvider value={liveEvents}>
-              <CustomScreensProvider value={customScreens}>
-                <ColumnRenderersProvider value={columnRenderers}>
-                  <ExtensionSectionsProvider value={extensionSectionComponents}>
-                    <NavProvidersProvider value={navProviders} entities={navEntities}>
-                      <ResolversProvider resolvers={resolvers}>
-                        <ToastProvider>
-                          <UpdateChecker />
-                          {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                        </ToastProvider>
-                      </ResolversProvider>
-                    </NavProvidersProvider>
-                  </ExtensionSectionsProvider>
-                </ColumnRenderersProvider>
-              </CustomScreensProvider>
+              <DashboardBodyProvider value={WebDashboardBody}>
+                <CustomScreensProvider value={customScreens}>
+                  <ColumnRenderersProvider value={columnRenderers}>
+                    <ExtensionSectionsProvider value={extensionSectionComponents}>
+                      <NavProvidersProvider value={navProviders} entities={navEntities}>
+                        <ResolversProvider resolvers={resolvers}>
+                          <ToastProvider>
+                            <UpdateChecker />
+                            {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                          </ToastProvider>
+                        </ResolversProvider>
+                      </NavProvidersProvider>
+                    </ExtensionSectionsProvider>
+                  </ColumnRenderersProvider>
+                </CustomScreensProvider>
+              </DashboardBodyProvider>
             </LiveEventsProvider>
           </DispatcherProvider>
         </PrimitivesProvider>

package/src/app/dashboard-body.tsx

@@ -0,0 +1,146 @@
+// Web-Implementierung des dashboard-Screen-Typs: rendert die deklarierten
+// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable) in
+// einem responsiven Grid. Registriert via DashboardBodyProvider in
+// createKumikoApp — der KumikoScreen-Switch bleibt plattform-agnostisch.
+//
+// Panel-Daten-Contracts (siehe DashboardPanelDefinition in kumiko-framework):
+//   stat  → flaches Record, valueField/subField/toneField zeigen auf
+//           anzeigefertige Werte (der Query-Handler formatiert).
+//   chart → { points: { atMs, value | null }[], windowStartMs, windowEndMs }
+//   list  → paged envelope { rows, nextCursor, total? } wie projectionList.
+
+import type {
+  DashboardChartPanel,
+  DashboardListPanel,
+  DashboardStatPanel,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type DashboardBodyProps, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
+import { QueryTable } from "../widgets/query-table";
+import { SectionCard } from "../widgets/section-card";
+import { StatCard, type StatTone } from "../widgets/stat";
+import { ErrorState, LoadingState } from "../widgets/states";
+
+const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"]);
+
+function StatPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardStatPanel;
+  readonly label: string;
+}): ReactNode {
+  const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
+    panel.query,
+    {},
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={2} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const record = data ?? {};
+  const rawTone = panel.toneField !== undefined ? record[panel.toneField] : undefined;
+  const tone =
+    typeof rawTone === "string" && STAT_TONES.has(rawTone) ? (rawTone as StatTone) : "default";
+  const sub = panel.subField !== undefined ? record[panel.subField] : undefined;
+  return (
+    <StatCard
+      label={label}
+      value={String(record[panel.valueField] ?? "—")}
+      tone={tone}
+      {...(sub !== undefined && sub !== null && { sub: String(sub) })}
+      testId={`dashboard-panel-${panel.id}`}
+    />
+  );
+}
+
+type TimeseriesEnvelope = {
+  readonly points: readonly TimeseriesPoint[];
+  readonly windowStartMs: number;
+  readonly windowEndMs: number;
+};
+
+function ChartPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardChartPanel;
+  readonly label: string;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<TimeseriesEnvelope>(
+    panel.query,
+    {},
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <TimeseriesChart
+        points={data?.points ?? []}
+        windowStartMs={data?.windowStartMs ?? 0}
+        windowEndMs={data?.windowEndMs ?? 1}
+        ariaLabel={label}
+        emptyContent={t("kumiko.list.no-entries")}
+      />
+    </SectionCard>
+  );
+}
+
+function ListPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardListPanel;
+  readonly label: string;
+}): ReactNode {
+  const t = useTranslation();
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <QueryTable<{ readonly rows: readonly Readonly<Record<string, unknown>>[] }>
+        query={panel.query}
+        live
+        columns={panel.columns.map((c) => {
+          const normalized = normalizeListColumn(c);
+          return {
+            field: normalized.field,
+            label: t(normalized.label ?? normalized.field),
+          };
+        })}
+        rows={(data) => data.rows}
+      />
+    </SectionCard>
+  );
+}
+
+export function WebDashboardBody({ screen, translate }: DashboardBodyProps): ReactNode {
+  const t = useTranslation();
+  const effectiveTranslate = translate ?? t;
+  return (
+    <div
+      className="grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4"
+      data-testid={`dashboard-${screen.id}`}
+    >
+      {screen.panels.map((panel) => {
+        const label = effectiveTranslate(panel.label);
+        if (panel.kind === "stat") {
+          return <StatPanelBody key={panel.id} panel={panel} label={label} />;
+        }
+        if (panel.kind === "chart") {
+          return (
+            <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
+              <ChartPanelBody panel={panel} label={label} />
+            </div>
+          );
+        }
+        return (
+          <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
+            <ListPanelBody panel={panel} label={label} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/index.ts

@@ -154,3 +154,31 @@ export {
   useBrowserTokensApi,
 } from "./tokens";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
+export type {
+  QueryTableColumn,
+  QueryTableProps,
+  StatDelta,
+  StatTone,
+  StatusBarEntry,
+  StatusTone,
+  TimeseriesPoint,
+} from "./widgets";
+export {
+  CollapsibleSection,
+  DetailList,
+  EmptyState,
+  ErrorState,
+  LoadingState,
+  MiniStat,
+  ModeSwitch,
+  ProgressBar,
+  QueryTable,
+  SectionCard,
+  Sparkline,
+  STATUS_TONE_TEXT,
+  StatCard,
+  StatusBadge,
+  StatusBarChart,
+  smoothPath,
+  TimeseriesChart,
+} from "./widgets";

package/src/primitives/index.tsx

@@ -29,6 +29,7 @@ import {
   type GridProps,
   type HeadingProps,
   type InputProps,
+  type LinkProps,
   type SectionProps,
   type TextProps,
   useColumnRenderer,
@@ -59,7 +60,7 @@ import {
 } from "react";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
-import { Button as UiButton } from "../ui/button";
+import { buttonVariants, Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
@@ -102,11 +103,12 @@ const cardFooterBorder = "border-t bg-muted/30";
 
 // Contract-Variant → shadcn-Variant: secondary war schon immer der
 // bordered-bg-background-Look = shadcns `outline`. primary→default,
-// danger→destructive.
+// danger→destructive, link→link (kein BG, underline on hover).
 const BUTTON_VARIANT = {
   primary: "default",
   secondary: "outline",
   danger: "destructive",
+  link: "link",
 } as const;
 
 function DefaultButton({
@@ -126,6 +128,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}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>
@@ -773,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 {
@@ -1590,11 +1595,50 @@ function DefaultText({ variant = "body", children, testId }: TextProps): ReactNo
           {children}
         </span>
       );
+    case "muted":
+      return (
+        <span data-testid={testId} className="text-sm text-muted-foreground">
+          {children}
+        </span>
+      );
     default:
       return <span data-testid={testId}>{children}</span>;
   }
 }
 
+// ---- Link (anchor mit Button-/Muted-Optik) ----
+
+// `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
+// der Standard für „weiter zu"-Navigationen nach Success-States (ehem.
+// authButtonClass), `muted` der dezente Sekundär-Link (ehem.
+// authMutedLinkClass).
+function DefaultLink({
+  href,
+  variant = "default",
+  target,
+  className,
+  children,
+  testId,
+}: LinkProps): ReactNode {
+  const variantClass =
+    variant === "button"
+      ? buttonVariants({ variant: "default" })
+      : variant === "muted"
+        ? "text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+        : "text-primary underline-offset-4 hover:underline";
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noreferrer" : undefined}
+      data-testid={testId}
+      className={cn(variantClass, className)}
+    >
+      {children}
+    </a>
+  );
+}
+
 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
@@ -1685,4 +1729,5 @@ export const defaultPrimitives: CorePrimitives = {
   Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
+  Link: DefaultLink,
 };

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

package/src/styles.css

@@ -80,6 +80,14 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Semantische Status-Farben (Widgets: StatusBadge, Charts, StatCard-Tones).
+     @theme generiert die Utilities (text-status-ok, bg-status-warn/10, …).
+     Dark-Werte; Light-Overrides unten. Apps überschreiben in ihrer styles.css. */
+  --color-status-ok: #22c55e;
+  --color-status-warn: #f59e0b;
+  --color-status-bad: #ef4444;
+  --color-status-critical: #f87171;
 }
 
 /* Card-Chrome-Maße — Framework-Defaults. Eine App überschreibt selektiv in
@@ -132,6 +140,12 @@
     --color-sidebar-accent-foreground: hsl(0 0% 9%);
     --color-sidebar-border: hsl(0 0% 89.8%);
     --color-sidebar-ring: hsl(0 0% 63%);
+
+    /* Status-Farben Light — kräftiger/dunkler als die Dark-Werte. */
+    --color-status-ok: #16a34a;
+    --color-status-warn: #d97706;
+    --color-status-bad: #dc2626;
+    --color-status-critical: #991b1b;
   }
 
   * {