@cosmicdrift/kumiko-renderer-web 0.206.0 → 0.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.206.0",
+  "version": "0.207.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.206.0",
-    "@cosmicdrift/kumiko-headless": "0.206.0",
-    "@cosmicdrift/kumiko-renderer": "0.206.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.207.0",
+    "@cosmicdrift/kumiko-headless": "0.207.0",
+    "@cosmicdrift/kumiko-renderer": "0.207.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__/language-switcher.test.tsx

@@ -1,15 +1,19 @@
 import { describe, expect, mock, test } from "bun:test";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
-import { createStaticLocaleResolver, LocaleProvider } from "@cosmicdrift/kumiko-renderer";
+import {
+  createStaticLocaleResolver,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+} from "@cosmicdrift/kumiko-renderer";
 import { render as _render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { LanguageSwitcher } from "../layout/language-switcher";
 
-// Tests greifen den LanguageSwitcher mit einem stateful Stub-Resolver
-// (setLocale + subscribe) UND einem stateless Resolver, um die zwei
-// Verzweigungen abzudecken: Switcher rendert nur wenn setLocale da ist.
-// Radix-DropdownMenu öffnet auf pointerdown, daher userEvent statt
+// Tests exercise the LanguageSwitcher with both a stateful stub resolver
+// (setLocale + subscribe) and a stateless resolver, covering the two
+// branches: the switcher only renders when setLocale is present.
+// Radix DropdownMenu opens on pointerdown, so userEvent is used instead of
 // fireEvent.click.
 
 function makeStatefulResolver(initial: string): LocaleResolver {
@@ -33,7 +37,11 @@ function makeStatefulResolver(initial: string): LocaleResolver {
 }
 
 function renderWithResolver(resolver: LocaleResolver, ui: ReactNode) {
-  return _render(<LocaleProvider resolver={resolver}>{ui}</LocaleProvider>);
+  return _render(
+    <LocaleProvider resolver={resolver} fallbackBundles={[kumikoDefaultTranslations]}>
+      {ui}
+    </LocaleProvider>,
+  );
 }
 
 const locales = [
@@ -54,9 +62,9 @@ describe("LanguageSwitcher", () => {
   test("active locale shown via shorthand", () => {
     const resolver = makeStatefulResolver("de");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt den Locale-Code im DOM (Tailwind uppercased ihn nur
-    // visuell via CSS — der Text-Knoten bleibt lowercase). Das passt:
-    // getByText sieht den DOM-Text.
+    // The trigger shows the locale code in the DOM. Tailwind only
+    // uppercases it visually via CSS, the text node stays lowercase.
+    // That is fine, getByText sees the DOM text.
     expect(screen.getByText("de")).toBeTruthy();
   });
 
@@ -78,18 +86,23 @@ describe("LanguageSwitcher", () => {
     expect(resolver.setLocale).toHaveBeenCalledWith("en");
   });
 
+  test("trigger accessible name follows the active locale (en → Language)", () => {
+    const resolver = makeStatefulResolver("en");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    expect(screen.getByRole("button", { name: "Language" })).toBeTruthy();
+  });
+
   test("matches active locale via language-root (de-AT → de)", async () => {
     const user = userEvent.setup();
     const resolver = makeStatefulResolver("de-AT");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt "DE" (aus de-AT abgeleitet) — der active marker im
-    // Dropdown muss bei "Deutsch" sitzen, nicht bei "English".
+    // The trigger shows "DE", derived from de-AT. The active marker in the
+    // dropdown must sit on "Deutsch", not "English".
     await user.click(screen.getByRole("button", { name: "Sprache" }));
     await waitFor(() => {
-      // Radix-CheckboxItem markiert active via aria-checked="true". Der
-      // Check-Icon (lucide) sitzt im ItemIndicator und ist nur sichtbar
-      // wenn checked — die ARIA-Variante ist robust gegen Rendering-
-      // Tricks.
+      // Radix CheckboxItem marks active via aria-checked="true". The check
+      // icon (lucide) lives in the ItemIndicator and is only visible when
+      // checked, so the ARIA variant is robust against rendering quirks.
       const deItem = screen.getByText("Deutsch").closest('[role="menuitemcheckbox"]');
       expect(deItem?.getAttribute("aria-checked")).toBe("true");
       const enItem = screen.getByText("English").closest('[role="menuitemcheckbox"]');

package/src/layout/language-switcher.tsx

@@ -1,17 +1,17 @@
-// LanguageSwitcher — Dropdown der die App-Locale via
-// LocaleResolver.setLocale umschaltet. Auf Radix-DropdownMenu, gleicher
-// Stack wie UserMenu/TenantSwitcher.
+// LanguageSwitcher — dropdown that switches the app locale via
+// LocaleResolver.setLocale. Built on Radix DropdownMenu, same stack
+// as UserMenu/TenantSwitcher.
 //
-// Rendert gar nix wenn der Resolver keine setLocale-Methode anbietet
-// (statischer Resolver) — App-Dev sieht dann sofort dass er einen
-// stateful Resolver verdrahten muss, bevor der Switcher UI-sichtbar
-// wird.
+// Renders nothing if the resolver doesn't offer a setLocale method
+// (static resolver) — the app dev then immediately sees they need to
+// wire up a stateful resolver before the switcher becomes visible in
+// the UI.
 //
-// Icon-Slot optional: das Framework zieht lucide-react nicht selbst
-// rein; eine App die keinen Icon-Import will, kriegt den Globe-
-// Unicode-Glyph (🌐) als Default.
+// Icon slot is optional: the framework doesn't pull in lucide-react
+// itself; an app that doesn't want an icon import gets the globe
+// unicode glyph (🌐) as default.
 
-import { useLocale } from "@cosmicdrift/kumiko-renderer";
+import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useMemo } from "react";
 import { cn } from "../lib/cn";
 import {
@@ -22,19 +22,19 @@ import {
 } from "../primitives/dropdown-menu";
 
 export type LocaleOption = {
-  /** BCP-47-Code, z.B. "de", "en-US", "fr-CA". Wird 1:1 an
-   *  resolver.setLocale() weitergereicht. */
+  /** BCP-47 code, e.g. "de", "en-US", "fr-CA". Passed through 1:1 to
+   *  resolver.setLocale(). */
   readonly code: string;
-  /** Menschenlesbare Anzeige im Dropdown. */
+  /** Human-readable label shown in the dropdown. */
   readonly label: string;
 };
 
 export type LanguageSwitcherProps = {
-  /** Auswählbare Locales. Reihenfolge = Anzeige-Reihenfolge im Menü. */
+  /** Selectable locales. Order = display order in the menu. */
   readonly locales: readonly LocaleOption[];
-  /** Icon-Slot links neben dem Button-Label. Default: 🌐. */
+  /** Icon slot left of the button label. Default: 🌐. */
   readonly icon?: ReactNode;
-  /** aria-label + title des Triggers. Default: "Sprache". */
+  /** aria-label + title of the trigger. Default: translated "kumiko.nav.language". */
   readonly label?: string;
   readonly testId?: string;
 };
@@ -42,15 +42,17 @@ export type LanguageSwitcherProps = {
 export function LanguageSwitcher({
   locales,
   icon = "🌐",
-  label = "Sprache",
+  label,
   testId,
 }: LanguageSwitcherProps): ReactNode {
   const resolver = useLocale();
+  const t = useTranslation();
+  const resolvedLabel = label ?? t("kumiko.nav.language");
 
   const activeLocale = resolver.locale();
-  // Match entweder exact ("de-DE") oder Language-Root ("de") gegen die
-  // verfügbaren Optionen. So zeigt der Switcher "Deutsch" aktiv wenn
-  // der Browser "de-AT" liefert und die Option nur "de" heißt.
+  // Matches either exact ("de-DE") or the language root ("de") against
+  // the available options. So the switcher shows "German" active when
+  // the browser reports "de-AT" but the option is just "de".
   const activeOption = useMemo(() => {
     const exact = locales.find((o) => o.code === activeLocale);
     if (exact) return exact;
@@ -59,7 +61,7 @@ export function LanguageSwitcher({
   }, [locales, activeLocale]);
 
   if (resolver.setLocale === undefined) {
-    // Stateless-Resolver → kein Wechsel möglich. Kein Noise im Topbar.
+    // Stateless resolver → no switching possible. No noise in the topbar.
     return null;
   }
 
@@ -70,8 +72,8 @@ export function LanguageSwitcher({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          aria-label={label}
-          title={label}
+          aria-label={resolvedLabel}
+          title={resolvedLabel}
           data-testid={testId}
           className={cn(
             "inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2 text-sm",
@@ -85,7 +87,7 @@ export function LanguageSwitcher({
           </span>
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={label}>
+      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={resolvedLabel}>
         {locales.map((opt) => (
           <DropdownMenuCheckboxItem
             key={opt.code}