@cosmicdrift/kumiko-renderer-web 0.130.1 → 0.131.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.130.1",
+  "version": "0.131.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.1",
-    "@cosmicdrift/kumiko-headless": "0.130.1",
-    "@cosmicdrift/kumiko-renderer": "0.130.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.131.0",
+    "@cosmicdrift/kumiko-headless": "0.131.0",
+    "@cosmicdrift/kumiko-renderer": "0.131.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__/nav-tree.test.tsx

@@ -241,6 +241,30 @@ describe("NavTree", () => {
     expect(container.querySelectorAll("svg").length).toBe(2);
   });
 
+  test("server, mail, download, rocket lösen auf ein Icon auf (Config-/SMTP-Nav)", () => {
+    // Config-Settings-Hub leitet Child-Nav-Icons aus dem mask.icon der
+    // ConfigKey ab (smtp-host="server", from="mail", subscription="rocket");
+    // fehlten sie in NAV_ICONS, rendert das Nav blank statt Icon.
+    const schema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        { id: "a", type: "entityList", entity: "x", columns: [] },
+        { id: "b", type: "entityList", entity: "x", columns: [] },
+        { id: "c", type: "entityList", entity: "x", columns: [] },
+        { id: "d", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "a", label: "SMTP", screen: "a", order: 10, icon: "server" },
+        { id: "b", label: "From", screen: "b", order: 20, icon: "mail" },
+        { id: "c", label: "Export", screen: "c", order: 30, icon: "download" },
+        { id: "d", label: "Billing", screen: "d", order: 40, icon: "rocket" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(4);
+  });
+
   test("palette, link und share rendern Lucide-Icons (Share-/Branding-Nav)", () => {
     const schema = {
       featureName: "app",
@@ -542,3 +566,65 @@ describe("NavTree dynamic provider nodes", () => {
     expect(active()).toBe(0); // Unmount baut alles ab → kein Leak
   });
 });
+
+describe("NavTree Suchfeld", () => {
+  // Das Suchfeld ist das einzige <input> im Baum; über die Rolle statt den
+  // i18n-Placeholder gefunden (i18n-Bundle resolvt im Worktree gegen den
+  // Haupt-Checkout, wo der neue Key noch fehlt — in CI greift er).
+
+  test("Filter blendet Nicht-Treffer aus, hält Treffer + deren Ancestors", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "active" } });
+
+    // Treffer selbst sichtbar (case-insensitiv).
+    expect(screen.getByText("Active")).toBeTruthy();
+    // Nicht-Treffer-Geschwister weg.
+    expect(screen.queryByText("Backlog")).toBeNull();
+    // Ancestors bleiben, damit der Treffer erreichbar bleibt.
+    expect(screen.getByText("Items")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+
+  test("Filter ohne Treffer leert den Baum; Leeren stellt alles wieder her", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "zzz-nichts" } });
+    expect(screen.queryByText("Items")).toBeNull();
+    expect(screen.queryByText("Data")).toBeNull();
+
+    fireEvent.change(input, { target: { value: "" } });
+    expect(screen.getByText("Backlog")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+});
+
+describe("NavTree folder-open Icon", () => {
+  test("Folder-Knoten zeigt folder-open wenn expanded, folder wenn collapsed", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([{ label: "page", icon: "folder", children: [pageLeaf("hero")] }]);
+      return () => {};
+    };
+    let container: HTMLElement | undefined;
+    await act(async () => {
+      container = renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      }).container;
+    });
+    // Default-expanded → offener Ordner, kein geschlossener.
+    expect(container?.querySelector(".lucide-folder-open")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder")).toBeNull();
+
+    // Der einzige aria-gelabelte Chevron gehört dem "page"-Sub-Ordner
+    // (der Provider-Container toggelt inline, ohne aria-Label).
+    const chevron = screen.getByRole("button", { name: /Expand|Collapse/ });
+    await act(async () => {
+      fireEvent.click(chevron);
+    });
+    expect(container?.querySelector(".lucide-folder")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder-open")).toBeNull();
+  });
+});

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/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";