@cosmicdrift/kumiko-renderer-web 0.64.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.64.0",
+  "version": "0.66.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,14 +16,15 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.57.2",
-    "@cosmicdrift/kumiko-headless": "0.57.2",
-    "@cosmicdrift/kumiko-renderer": "0.57.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.66.0",
+    "@cosmicdrift/kumiko-headless": "0.66.0",
+    "@cosmicdrift/kumiko-renderer": "0.66.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -31,6 +32,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^1.14.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
     "react-dom": "^19.2.6",

package/src/__tests__/date-input.test.tsx

@@ -6,9 +6,10 @@
 // nach Timezone den Vortag.
 
 import { describe, expect, mock, test } from "bun:test";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { DateInput } from "../primitives/date-input";
+import { render } from "./test-utils";
 
 describe("DateInput", () => {
   test("Eingabefeld zeigt locale-numerisches Datum (de-DE)", () => {

package/src/__tests__/form-action-bar.test.tsx

@@ -1,9 +1,7 @@
-// F2.4 (Bug-Bash-2): Die Sticky-Action-Bar spannte die volle Breite,
-// während der Form-Body auf max-w-2xl begrenzt ist — die Buttons
-// klebten am Fensterrand, optisch abgekoppelt vom Formular. Außerdem
-// wiederholte der Section-Header bei Single-Section-ActionForms den
-// Screen-Titel 1:1. Strukturelle Assertions (Klassen/DOM) — der
-// visuelle Beweis läuft über die publicstatus-Screens nach dem Bump.
+// shadcn-Form-Muster: die Action-Buttons sitzen als Footer am ENDE des
+// Formulars (border-t-getrennt, rechtsbündig, im max-w-Body), NICHT mehr
+// als Sticky-Bar im Header. Der Titel ist ein Heading oben. Strukturelle
+// Assertions (Klassen/DOM) — der visuelle Beweis läuft über den Runner.
 
 import { describe, expect, test } from "bun:test";
 import type {
@@ -16,20 +14,21 @@ import { createMockDispatcher, render, screen } from "./test-utils";
 
 const { Form, Section, Button } = defaultPrimitives;
 
-describe("DefaultForm Action-Bar", () => {
-  test("Bar-Inhalt aligned mit dem Form-Body (max-w-Container in der Bar)", () => {
+describe("DefaultForm Action-Footer", () => {
+  test("Actions sitzen rechtsbündig am Form-Ende (border-t), Titel ist Heading", () => {
     render(
       <Form onSubmit={() => {}} title="Titel" actions={<Button>Save</Button>} testId="f">
         <div>body</div>
       </Form>,
     );
-    const bar = screen.getByTestId("f-actions");
-    const inner = bar.firstElementChild;
-    expect(inner).toBeTruthy();
-    // Gleiche Breiten-Constraint wie der Body (max-w-2xl + px-6) — die
-    // Buttons enden damit an derselben Linie wie die Formularfelder.
-    expect(inner?.className).toContain("max-w-2xl");
-    expect(inner?.className).toContain("px-6");
+    const actions = screen.getByTestId("f-actions");
+    expect(actions.className).toContain("justify-end");
+    expect(actions.className).toContain("border-t");
+    // Footer liegt im max-w-3xl-Form-Body (Buttons enden an der Feld-Linie).
+    expect(actions.closest(".max-w-3xl")).toBeTruthy();
+    // Titel ist ein eigenes Heading oben, NICHT mehr in der Action-Bar.
+    expect(actions.textContent).not.toContain("Titel");
+    expect(screen.getByTestId("f-title").textContent).toBe("Titel");
   });
 });
 
@@ -44,6 +43,42 @@ describe("DefaultSection ohne Titel", () => {
   });
 });
 
+describe("Form = eine Card, Sections als innere Abschnitte", () => {
+  test("Section im Form trägt keine eigene Card-Fläche, Titel+Footer leben in derselben Card", () => {
+    render(
+      <Form onSubmit={() => {}} title="Titel" actions={<Button>Save</Button>} testId="f">
+        <Section testId="s1">
+          <div>a</div>
+        </Section>
+        <Section testId="s2">
+          <div>b</div>
+        </Section>
+      </Form>,
+    );
+    // Inner-Region: keine eigene bg-card; die Divider zwischen Sections
+    // macht der divide-y-Wrapper, nicht die Section selbst.
+    const s1 = screen.getByTestId("s1");
+    expect(s1.className).not.toContain("bg-card");
+    expect(s1.closest(".divide-y")).toBeTruthy();
+    // Das Form wrappt alles in GENAU eine Card-Fläche.
+    const card = screen.getByTestId("f").querySelector(".bg-card");
+    expect(card).toBeTruthy();
+    expect(card?.querySelectorAll(".bg-card").length).toBe(0);
+    // Titel + Action-Footer sitzen in dieser Card.
+    expect(card?.querySelector("[data-testid='f-title']")).toBeTruthy();
+    expect(card?.querySelector("[data-testid='f-actions']")).toBeTruthy();
+  });
+
+  test("Section standalone (außerhalb Form) bleibt eine eigene Card", () => {
+    render(
+      <Section testId="solo" title="Solo">
+        <div>x</div>
+      </Section>,
+    );
+    expect(screen.getByTestId("solo").className).toContain("bg-card");
+  });
+});
+
 const orderEntity = {
   fields: { title: { type: "text", required: true } },
 } as unknown as EntityDefinition; // @cast-boundary test-fixture

package/src/__tests__/nav-tree.test.tsx

@@ -5,10 +5,20 @@
 //   2. Active-State greift auf node mit screen wenn nav.route's
 //      screenId matcht (Standard-Sidebar-Verhalten).
 
-import { describe, expect, test } from "bun:test";
-import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { afterEach, describe, expect, test } from "bun:test";
+import type {
+  TargetRef,
+  TreeChildrenSubscribe,
+  TreeNode,
+} from "@cosmicdrift/kumiko-framework/engine";
+import type { FeatureSchema, LiveEventSubscriber } from "@cosmicdrift/kumiko-renderer";
+import { LiveEventsProvider } from "@cosmicdrift/kumiko-renderer";
+import { act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { NavProvidersProvider } from "../app/nav-providers-context";
 import { NavTree } from "../layout/nav-tree";
-import { fireEvent, render, screen } from "./test-utils";
+import { setDispatchListener } from "../layout/target-resolver-stub";
+import { fireEvent, renderWithSidebar as render, screen } from "./test-utils";
 
 function makeSchema(): FeatureSchema {
   return {
@@ -129,13 +139,13 @@ describe("NavTree role-gating", () => {
 });
 
 describe("NavTree", () => {
-  test("Section-Header (parent ohne screen) rendert children eingerückt — default expanded", () => {
+  test("Section-Header (parent ohne screen) ist statisches Label, children sichtbar", () => {
     render(<NavTree schema={makeSchema()} testId="tree" />);
 
-    // Section "Data" ist als Toggle-Button gerendert (uppercase).
-    const dataHeader = screen.getByText("Data").closest("button") as HTMLButtonElement;
-    expect(dataHeader).not.toBeNull();
-    expect(dataHeader.getAttribute("aria-expanded")).toBe("true");
+    // Section "Data" ist eine STATISCHE Überschrift (sidebar-07-Muster), kein
+    // Toggle-Button — Collapse gehört auf Items mit children, nicht die Section.
+    expect(screen.getByText("Data")).toBeTruthy();
+    expect(screen.getByText("Data").closest("button")).toBeNull();
 
     // Children sind sichtbar im DOM.
     expect(screen.getByText("Items")).toBeTruthy();
@@ -143,16 +153,14 @@ describe("NavTree", () => {
     expect(screen.getByText("Backlog")).toBeTruthy();
   });
 
-  test("Click auf Section-Header toggled aria-expanded — children verschwinden", () => {
+  test("Section-Header collapst NICHT — children bleiben sichtbar", () => {
     render(<NavTree schema={makeSchema()} testId="tree" />);
 
-    const dataHeader = screen.getByText("Data").closest("button") as HTMLButtonElement;
-    fireEvent.click(dataHeader);
-
-    expect(dataHeader.getAttribute("aria-expanded")).toBe("false");
-    // Items ist child von Data → nach Collapse nicht mehr im DOM
-    expect(screen.queryByText("Items")).toBeNull();
-    expect(screen.queryByText("Active")).toBeNull();
+    // Kein Section-Toggle: "Data" sitzt nicht in einem Button, es gibt nichts
+    // zu klicken. Die Items bleiben dauerhaft sichtbar.
+    expect(screen.getByText("Data").closest("button")).toBeNull();
+    expect(screen.getByText("Items")).toBeTruthy();
+    expect(screen.getByText("Active")).toBeTruthy();
   });
 
   test("Parent mit Screen + children — Chevron-Click toggled, ohne Navigation", () => {
@@ -210,3 +218,229 @@ describe("NavTree", () => {
     expect(container.querySelectorAll("svg").length).toBe(0);
   });
 });
+
+// ── Visual-Tree-Merge: dynamische Knoten in der EINEN Nav ──────────────
+//
+// Beweist die vier Caps die NavTree aus dem alten VisualTree übernimmt:
+// target-Dispatch, lazy Provider-Children, createAction (+), und — der
+// kritische Pfad — der SSE-treeEntities-Refresh, der neue Knoten LIVE in
+// die Nav bringt (sonst lädt der Tree einmal und „+pricing" erscheint nie).
+
+type LiveCb = Parameters<LiveEventSubscriber>[1];
+
+function controllableLiveEvents(): {
+  readonly subscribe: LiveEventSubscriber;
+  fire(entity: string): void;
+} {
+  const listeners = new Map<string, Set<LiveCb>>();
+  const subscribe: LiveEventSubscriber = (entity, cb) => {
+    const set = listeners.get(entity) ?? new Set<LiveCb>();
+    set.add(cb);
+    listeners.set(entity, set);
+    return () => {
+      set.delete(cb);
+    };
+  };
+  return {
+    subscribe,
+    fire(entity) {
+      // Die Consumer-cbs (NavTree, prod) ignorieren das Event-Arg → zero-arg
+      // call genügt; Cast überbrückt nur die Param-Signatur.
+      for (const cb of listeners.get(entity) ?? []) (cb as () => void)();
+    },
+  };
+}
+
+function pageLeaf(slug: string): TreeNode {
+  return { label: slug, target: { featureId: "cms", action: "edit", args: { slug } } };
+}
+
+// Provider mit `provider: true`-Knoten "Content" + „+"-createAction. QN =
+// "cms:nav:content" (featureName:nav:id). Der Provider liefert die Children.
+function dynamicSchema(): FeatureSchema {
+  return {
+    featureName: "cms",
+    entities: {},
+    screens: [],
+    navs: [
+      {
+        id: "content",
+        label: "Content",
+        order: 10,
+        provider: true,
+        createAction: {
+          icon: "plus",
+          label: "New page",
+          target: { featureId: "cms", action: "create", args: { folder: "" } },
+        },
+      },
+    ],
+  } as FeatureSchema;
+}
+
+function renderDynamic(args: {
+  readonly schema: FeatureSchema;
+  readonly providers: ReadonlyMap<string, TreeChildrenSubscribe>;
+  readonly entities?: ReadonlyMap<string, readonly string[]>;
+  readonly live?: LiveEventSubscriber;
+}): ReturnType<typeof render> {
+  const inner: ReactNode = (
+    <NavProvidersProvider
+      value={args.providers}
+      {...(args.entities && { entities: args.entities })}
+    >
+      <NavTree schema={args.schema} />
+    </NavProvidersProvider>
+  );
+  // Eigene (kontrollierbare) LiveEventsProvider überschreibt den No-op aus
+  // den DefaultProviders (nächster Provider gewinnt).
+  return render(
+    args.live !== undefined ? (
+      <LiveEventsProvider value={args.live}>{inner}</LiveEventsProvider>
+    ) : (
+      inner
+    ),
+  );
+}
+
+describe("NavTree dynamic provider nodes", () => {
+  let restoreDispatch: (() => void) | undefined;
+  afterEach(() => {
+    restoreDispatch?.();
+    restoreDispatch = undefined;
+  });
+
+  test("provider:true-Knoten lädt seine Children lazy + rendert sie (default-expanded)", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex"), pageLeaf("hero")]);
+      return () => {};
+    };
+    const providers = new Map([["cms:nav:content", provider]]);
+    await act(async () => {
+      renderDynamic({ schema: dynamicSchema(), providers });
+    });
+
+    expect(screen.getByText("Content")).toBeTruthy();
+    expect(screen.getByText("apex")).toBeTruthy();
+    expect(screen.getByText("hero")).toBeTruthy();
+  });
+
+  test("createAction rendert ein Plus-Button der sein target dispatcht", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex")]);
+      return () => {};
+    };
+    await act(async () => {
+      renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      });
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "New page" }));
+    expect(dispatched).toEqual({ featureId: "cms", action: "create", args: { folder: "" } });
+  });
+
+  test("target-Knoten dispatcht beim Klick (statt Route-Link)", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const schema = {
+      featureName: "cms",
+      entities: {},
+      screens: [],
+      navs: [
+        {
+          id: "hero",
+          label: "Hero",
+          order: 10,
+          target: { featureId: "cms", action: "edit", args: { slug: "hero" } },
+        },
+      ],
+    } as FeatureSchema;
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map() });
+    });
+
+    fireEvent.click(screen.getByText("Hero"));
+    expect(dispatched).toEqual({ featureId: "cms", action: "edit", args: { slug: "hero" } });
+  });
+
+  test("SSE-treeEntities-Refresh bringt neu erstellte Knoten LIVE in die Nav", async () => {
+    // Der eigentliche Kern: ein text-block-Event re-fired den Provider →
+    // die frisch erstellte Seite („pricing") erscheint, ohne Re-Mount.
+    let pages = ["apex", "hero"];
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit(pages.map(pageLeaf));
+      return () => {};
+    };
+    const live = controllableLiveEvents();
+    await act(async () => {
+      renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+        entities: new Map([["cms:nav:content", ["text-block"]]]),
+        live: live.subscribe,
+      });
+    });
+
+    expect(screen.getByText("apex")).toBeTruthy();
+    expect(screen.queryByText("pricing")).toBeNull();
+
+    // Neue Seite angelegt → text-block-Event feuert → Provider re-fired.
+    pages = ["apex", "hero", "pricing"];
+    await act(async () => {
+      live.fire("text-block");
+    });
+
+    expect(screen.getByText("pricing")).toBeTruthy();
+  });
+
+  test("Provider-Subscription wird beim Re-Fire + Unmount sauber abgebaut (kein Leak)", async () => {
+    // Jeder subscribe() liefert eine cleanup-Funktion. Invariante: zu jedem
+    // Zeitpunkt darf höchstens EINE Subscription aktiv sein. Beim SSE-Re-Fire
+    // muss die vorherige abgebaut werden BEVOR neu subscribed wird (sonst
+    // akkumulieren sie = Leak); beim Unmount läuft die letzte cleanup. Heute
+    // liefern alle Provider no-op-cleanup — dieser Test schützt den ersten
+    // mit echtem Teardown. (active() statt fixer Counts → robust gegen
+    // StrictMode-Doppel-Mount: net bleibt eine aktive Subscription.)
+    let subscribes = 0;
+    let unsubscribes = 0;
+    const active = (): number => subscribes - unsubscribes;
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      subscribes += 1;
+      emit([pageLeaf("apex")]);
+      return () => {
+        unsubscribes += 1;
+      };
+    };
+    const live = controllableLiveEvents();
+    let r: ReturnType<typeof render> | undefined;
+    await act(async () => {
+      r = renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+        entities: new Map([["cms:nav:content", ["text-block"]]]),
+        live: live.subscribe,
+      });
+    });
+    expect(active()).toBe(1); // genau eine aktive Subscription nach Mount
+
+    const before = subscribes;
+    await act(async () => {
+      live.fire("text-block");
+    });
+    expect(subscribes).toBeGreaterThan(before); // Re-Fire hat neu subscribed
+    expect(active()).toBe(1); // …aber die alte vorher abgebaut → weiterhin eine
+
+    await act(async () => {
+      r?.unmount();
+    });
+    expect(active()).toBe(0); // Unmount baut alles ab → kein Leak
+  });
+});

package/src/__tests__/primitives.test.tsx

@@ -783,7 +783,7 @@ describe("Form", () => {
     expect(submitEvent.defaultPrevented).toBe(true);
   });
 
-  test("title slot rendert in der Action-Bar links neben den Actions", () => {
+  test("title rendert als Heading oben, Actions als Footer am Ende", () => {
     render(
       <Form
         onSubmit={() => undefined}
@@ -794,9 +794,11 @@ describe("Form", () => {
         <div>content</div>
       </Form>,
     );
-    const actionsBar = screen.getByTestId("form-actions");
-    expect(actionsBar.textContent).toContain("Eintrag bearbeiten");
-    expect(actionsBar.textContent).toContain("Save");
+    expect(screen.getByTestId("form-title").textContent).toContain("Eintrag bearbeiten");
+    const actionsFooter = screen.getByTestId("form-actions");
+    expect(actionsFooter.textContent).toContain("Save");
+    // Titel ist NICHT mehr in der Action-Leiste (raus aus dem Header).
+    expect(actionsFooter.textContent).not.toContain("Eintrag bearbeiten");
   });
 
   test("ohne title und actions: keine Action-Bar gerendert", () => {
@@ -856,7 +858,7 @@ describe("Heading variants", () => {
 });
 
 describe("DataTable toolbar slots", () => {
-  test("toolbarTitle + toolbarStart + toolbarEnd rendern in einer Zeile", () => {
+  test("toolbarStart + toolbarEnd rendern in einer Zeile; Titel wird NICHT gerendert (steht im Breadcrumb)", () => {
     render(
       <DataTable
         columns={[]}
@@ -872,7 +874,8 @@ describe("DataTable toolbar slots", () => {
       />,
     );
     const toolbar = screen.getByTestId("dt-toolbar");
-    expect(toolbar.textContent).toContain("Items");
+    // Der Screen-Titel lebt im Shell-Breadcrumb, nicht mehr in der Toolbar.
+    expect(toolbar.textContent).not.toContain("Items");
     expect(toolbar.querySelector('[data-testid="search"]')).not.toBeNull();
     expect(toolbar.querySelector('[data-testid="create"]')).not.toBeNull();
   });

package/src/__tests__/render-edit.test.tsx

@@ -118,10 +118,10 @@ describe("RenderEdit", () => {
     );
 
     expect(screen.queryByTestId("field-notes")).toBeNull();
-    const urgentCheckbox = screen
-      .getByTestId("field-isUrgent")
-      .querySelector("input[type=checkbox]");
-    fireEvent.click(urgentCheckbox as HTMLInputElement);
+    // boolean-Feld = vendored Radix-Checkbox → button[role=checkbox], kein
+    // native input[type=checkbox] mehr.
+    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
+    fireEvent.click(urgentCheckbox as HTMLElement);
     expect(screen.queryByTestId("field-notes")).toBeTruthy();
   });
 
@@ -178,8 +178,8 @@ describe("RenderEdit", () => {
     // Default-Translate (Test-Setup hat keinen Bundle für screen:*.title)
     // → i18n returnt den Key selber, RenderEdit detected das + zeigt
     // den screenId. Beweist die Convention: kein Hardcoded "Untitled".
-    const actionsBar = screen.getByTestId("render-edit-form-actions");
-    expect(actionsBar.textContent).toContain("orders:screen:order-edit");
+    const formTitle = screen.getByTestId("render-edit-form-title");
+    expect(formTitle.textContent).toContain("orders:screen:order-edit");
   });
 
   test("extension section renders the registered Component with entityName + entityId", () => {

package/src/__tests__/test-utils.tsx

@@ -34,6 +34,7 @@ import { render as _render, type RenderOptions, type RenderResult } from "@testi
 import type { ReactElement, ReactNode } from "react";
 import { defaultPrimitives } from "../primitives";
 import { defaultTokens } from "../tokens";
+import { SidebarProvider } from "../ui/sidebar";
 
 // jsdom hat keinen ResizeObserver — cmdk (Combobox-Library) braucht
 // das im Setup. Stub reicht für unsere Tests; wir messen keine
@@ -86,10 +87,30 @@ function DefaultProviders({ children }: { readonly children: ReactNode }): React
   );
 }
 
+// DefaultProviders + SidebarProvider. Nur für Tests die vendored shadcn-
+// Sidebar-Teile (NavTree → SidebarMenuButton ruft useSidebar()) ISOLIERT
+// rendern. Nicht der Default: SidebarProvider zieht TooltipProvider +
+// keydown/matchMedia-Listener ein — global gewrappt verlangsamt/leakt das
+// auf single-CPU-CI (Banner-Timeouts). Shells stellen ihren Provider selbst.
+function SidebarProviders({ children }: { readonly children: ReactNode }): ReactNode {
+  return (
+    <DefaultProviders>
+      <SidebarProvider>{children}</SidebarProvider>
+    </DefaultProviders>
+  );
+}
+
 export function render(ui: ReactElement, options?: Omit<RenderOptions, "wrapper">): RenderResult {
   return _render(ui, { wrapper: DefaultProviders, ...options });
 }
 
+export function renderWithSidebar(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">,
+): RenderResult {
+  return _render(ui, { wrapper: SidebarProviders, ...options });
+}
+
 // ---------------------------------------------------------------------------
 // Mock-Dispatcher-Helper
 // ---------------------------------------------------------------------------

package/src/__tests__/toast.test.tsx

@@ -6,9 +6,10 @@
 // Tick (Counter-Race-Bug).
 
 import { describe, expect, test } from "bun:test";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, screen } from "@testing-library/react";
 import { type ReactNode, useEffect } from "react";
 import { type ToastOptions, ToastProvider, useToast } from "../primitives/toast";
+import { render } from "./test-utils";
 
 // Trigger-Component die im Mount toast() aufruft. So testen wir den
 // Hook ohne userEvent-Klick-Pfad und ohne fragile timer.
@@ -41,7 +42,7 @@ describe("ToastProvider + useToast", () => {
     expect(screen.getByText("Copied")).toBeTruthy();
   });
 
-  test("docsUrl: rendert 'Mehr erfahren →' Link mit target=_blank", () => {
+  test("docsUrl: rendert Learn-more-Link (i18n-Default) mit target=_blank", () => {
     render(
       <ToastProvider>
         <ToastTrigger
@@ -55,7 +56,7 @@ describe("ToastProvider + useToast", () => {
         />
       </ToastProvider>,
     );
-    const link = screen.getByRole("link", { name: /Mehr erfahren/i });
+    const link = screen.getByRole("link", { name: /Learn more/i });
     expect(link.getAttribute("href")).toBe("https://docs.kumiko.rocks/errors/stale_state");
     expect(link.getAttribute("target")).toBe("_blank");
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");