@cosmicdrift/kumiko-renderer-web 0.211.0 → 0.213.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.211.0",
+  "version": "0.213.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.211.0",
-    "@cosmicdrift/kumiko-headless": "0.211.0",
-    "@cosmicdrift/kumiko-renderer": "0.211.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.213.0",
+    "@cosmicdrift/kumiko-headless": "0.213.0",
+    "@cosmicdrift/kumiko-renderer": "0.213.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.211.0"
+    "@cosmicdrift/kumiko-locale-de": "0.213.0"
   },
   "repository": {
     "type": "git",

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

@@ -166,6 +166,8 @@ const NAV_ICON_LUCIDE_CLASS: Readonly<Record<string, string>> = {
   palette: "lucide-palette",
   link: "lucide-link",
   share: "lucide-share-2",
+  send: "lucide-send",
+  "shield-check": "lucide-shield-check",
 };
 
 function expectNavIcons(container: HTMLElement, iconKeys: readonly string[]): void {
@@ -340,6 +342,30 @@ describe("NavTree", () => {
     expectNavIcons(container, ["palette", "link", "share"]);
   });
 
+  test("send und shield-check rendern Lucide-Icons", () => {
+    const schema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        { id: "delivery-log", type: "entityList", entity: "x", columns: [] },
+        { id: "profile-picker", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "delivery-log", label: "Log", screen: "delivery-log", order: 10, icon: "send" },
+        {
+          id: "profile-picker",
+          label: "Profile",
+          screen: "profile-picker",
+          order: 20,
+          icon: "shield-check",
+        },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expectNavIcons(container, ["send", "shield-check"]);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
   test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg), aber warnt sichtbar", () => {
     const schema = {
       featureName: "showcase",

package/src/app/create-app.tsx

@@ -48,6 +48,7 @@ import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { WebDashboardBody } from "./dashboard-body";
+import { DocumentLangSync } from "./document-lang-sync";
 import { createBrowserDraftStorage } from "./draft-storage";
 import { useBrowserNavApi } from "./nav";
 import { NavProvidersProvider } from "./nav-providers-context";
@@ -426,6 +427,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   const tree = (
     <TokensBoot>
       <LocaleProvider resolver={localeResolver} fallbackBundles={fallbackBundles}>
+        <DocumentLangSync resolver={localeResolver} />
         <PrimitivesProvider value={primitives}>
           <AppFeaturesProvider features={app.features}>
             <DispatcherProvider dispatcher={dispatcher}>

package/src/app/create-public-surface.tsx

@@ -13,19 +13,20 @@ import { defaultPrimitives } from "../primitives";
 import { ToastProvider } from "../primitives/toast";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
+import { DocumentLangSync } from "./document-lang-sync";
 
-// Apex-Surface — der öffentliche Gegenpart zu createKumikoApp. Mountet eine
-// schlanke, schema-LOSE Provider-Chain (Locale + Primitives + Dispatcher +
-// feature-providers) und rendert genau einen anhand des URL-Pfads gewählten
-// Content. Bewusst KEIN Schema, KEINE Nav, KEIN KumikoScreen: die Surface ist
-// anonym erreichbar, ein __KUMIKO_SCHEMA__-Inject würde Admin-Nav/Topologie an
-// Besucher leaken (injectSchema:false ist hier struktureller Default, kein Flag).
+// Apex surface — the public counterpart to createKumikoApp. Mounts a thin,
+// schema-LESS provider chain (locale + primitives + dispatcher +
+// feature-providers) and renders exactly one content chosen by URL path.
+// Deliberately NO schema, NO nav, NO KumikoScreen: the surface is reachable
+// anonymously, and a __KUMIKO_SCHEMA__ inject would leak admin nav/topology
+// to visitors (injectSchema:false is a structural default here, not a flag).
 //
-// `routes` sind app-authored React-Elemente — Auth-Screens et al. tragen
-// Callback-Props (loggedInHref usw.), die durch keine serialisierbare
-// ScreenDefinition passen würden; deshalb laufen sie über diesen Mount und
-// nicht über die Registry. Späterer Registry-Content (CMS/Landing) konvergiert
-// auf denselben Mount.
+// `routes` are app-authored React elements — auth screens et al. carry
+// callback props (loggedInHref etc.) that wouldn't fit through any
+// serializable ScreenDefinition; that's why they run through this mount and
+// not through the registry. Later registry content (CMS/landing) converges
+// on the same mount.
 //
 //   createPublicSurface({
 //     routes: [{ path: "/login", component: <LoginScreen ... /> }],
@@ -35,28 +36,28 @@ import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 //   });
 
 export type PublicRoute = {
-  /** Exakter window.location.pathname-Match (match-once beim Mount; alle
-   *  Apex-Pages sind Full-Page-Reloads, kein SPA-Router). */
+  /** Exact window.location.pathname match (matched once on mount; every
+   *  apex page is a full-page reload, no SPA router). */
   readonly path: string;
   readonly component: ReactNode;
 };
 
 export type CreatePublicSurfaceOptions = {
   readonly routes: readonly PublicRoute[];
-  /** Gerendert wenn kein route.path auf den aktuellen Pfad matcht. */
+  /** Rendered when no route.path matches the current path. */
   readonly fallback?: ReactNode;
   readonly rootId?: string;
   readonly locale?: LocaleResolver;
   readonly primitives?: Partial<PrimitivesRegistry>;
-  /** Dispatcher für Handler-Calls (z.B. anonymer Deletion-Request). Auth-
-   *  Screens brauchen ihn nicht (fetch via auth-client), aber er steht für
-   *  dispatchende Public-Flows bereit. Default: createLiveDispatcher(). */
+  /** Dispatcher for handler calls (e.g. an anonymous deletion request).
+   *  Auth screens don't need it (fetch via auth-client), but it's there for
+   *  dispatching public flows. Default: createLiveDispatcher(). */
   readonly dispatcher?: Dispatcher;
-  /** Feature-Client-Extensions — NUR `providers` + `translations` werden
-   *  gestackt. `gates` werden bewusst ignoriert: ein AuthGate würde die
-   *  öffentliche Surface hinter Login sperren. */
+  /** Feature client extensions — ONLY `providers` + `translations` are
+   *  stacked. `gates` are deliberately ignored: an AuthGate would lock the
+   *  public surface behind login. */
   readonly clientFeatures?: readonly ClientFeatureDefinition[];
-  /** Page-Chrome um den gematchten Content (Apex-/Marketing-Layout). */
+  /** Page chrome around the matched content (apex/marketing layout). */
   readonly shell?: (props: { readonly children: ReactNode }) => ReactNode;
 };
 
@@ -94,6 +95,7 @@ export function createPublicSurface(options: CreatePublicSurfaceOptions): { read
 
   const tree = (
     <LocaleProvider resolver={localeResolver} fallbackBundles={fallbackBundles}>
+      <DocumentLangSync resolver={localeResolver} />
       <PrimitivesProvider value={primitives}>
         <DispatcherProvider dispatcher={dispatcher}>
           <ToastProvider>{stackWrappers(providers, content)}</ToastProvider>

package/src/app/document-lang-sync.tsx

@@ -0,0 +1,25 @@
+// Keeps document.documentElement.lang in sync with the active locale.
+// Screen readers and the browser's built-in translate offer both read it,
+// and @cosmicdrift/kumiko-dispatcher-live reads it back to tag outgoing
+// requests with X-Locale (see dispatcher-live/src/locale.ts). This is the
+// only way the dispatcher — a separate, server-dep-free package with no
+// access to the resolver — learns the active language.
+//
+// Lives here, not in @cosmicdrift/kumiko-renderer: that package is DOM-free
+// by design (Renderer-Boundaries Guard enforces it — web/native both
+// consume it). createApp/createPublicSurface are the two places every web
+// app already goes through, so mounting this here covers every app with
+// zero app-side wiring, same as createBrowserLocaleResolver.
+
+import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
+import { useEffect } from "react";
+
+export function DocumentLangSync({ resolver }: { readonly resolver: LocaleResolver }): null {
+  useEffect(() => {
+    document.documentElement.lang = resolver.locale();
+    return resolver.subscribe(() => {
+      document.documentElement.lang = resolver.locale();
+    });
+  }, [resolver]);
+  return null;
+}

package/src/layout/nav-tree.tsx

@@ -64,10 +64,12 @@ import {
   Receipt,
   Rocket,
   Search,
+  Send,
   Server,
   Settings,
   Share2,
   Shield,
+  ShieldCheck,
   Sparkles,
   Table,
   Tag,
@@ -147,6 +149,8 @@ const NAV_ICONS = {
   home: Home,
   bell: Bell,
   shield: Shield,
+  "shield-check": ShieldCheck,
+  send: Send,
   settings: Settings,
   users: Users,
   user: User,