@cosmicdrift/kumiko-renderer-web 0.130.1 → 0.131.0

package/src/layout/nav-tree.tsx

@@ -33,9 +33,12 @@ import {
   ChevronRight,
   Coins,
   CreditCard,
+  Download,
   FileText,
   Folder,
+  FolderOpen,
   Gauge,
+  Hash,
   Home,
   KeyRound,
   Layers,
@@ -43,11 +46,15 @@ import {
   LineChart,
   Link,
   List,
+  Lock,
+  Mail,
   Palette,
   PiggyBank,
   Plus,
   Receipt,
+  Rocket,
   Search,
+  Server,
   Settings,
   Share2,
   Shield,
@@ -76,6 +83,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarInput,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
@@ -113,6 +121,7 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   calendar: CalendarDays,
   file: FileText,
   folder: Folder,
+  "folder-open": FolderOpen,
   home: Home,
   bell: Bell,
   shield: Shield,
@@ -125,6 +134,12 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   link: Link,
   palette: Palette,
   share: Share2,
+  server: Server,
+  mail: Mail,
+  lock: Lock,
+  hash: Hash,
+  download: Download,
+  rocket: Rocket,
 };
 
 export type NavTreeProps = {
@@ -149,6 +164,22 @@ export type NavTreeProps = {
 const EMPTY_BADGES: ReadonlyMap<string, ReactNode> = new Map();
 const NavBadgesContext = createContext<ReadonlyMap<string, ReactNode>>(EMPTY_BADGES);
 
+// Sidebar-Filter: `q` leer = inaktiv (matches akzeptiert alles). `matches`
+// bekommt das ROHE Label (i18n-Key oder Klartext) und übersetzt intern — so
+// filtert das Suchfeld auf den sichtbaren Text, nicht den Key.
+type NavFilter = { readonly q: string; readonly matches: (rawLabel: string) => boolean };
+const NavFilterContext = createContext<NavFilter>({ q: "", matches: () => true });
+
+// Ein Knoten überlebt den Filter, wenn er selbst oder ein Nachfahre matcht.
+// Provider-Kinder sind zur Filterzeit schon materialisiert (Provider-Knoten
+// sind default-expanded → eager geladen), darum reicht die statische
+// children-Rekursion. ponytail: ein zur Filterzeit noch NICHT geladener
+// (user-zugeklappter) Provider wird über den force-expand in useNavNodeState
+// aufgeklappt, lädt und filtert dann mit.
+function subtreeMatches(node: NavNode, matches: (rawLabel: string) => boolean): boolean {
+  return matches(node.label) || node.children.some((c) => subtreeMatches(c, matches));
+}
+
 export function NavTree({
   schema,
   user,
@@ -175,25 +206,47 @@ export function NavTree({
     });
   }, []);
 
+  const t = useTranslation();
+  const [filter, setFilter] = useState("");
+  const q = filter.trim().toLowerCase();
+  const matches = useCallback(
+    (raw: string): boolean => {
+      const label = raw.includes(".") ? t(raw) : raw;
+      return label.toLowerCase().includes(q);
+    },
+    [t, q],
+  );
+  const navFilter = useMemo<NavFilter>(() => ({ q, matches }), [q, matches]);
+
   return (
-    <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
-      <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
-        {tree.map((node) =>
-          isPureSection(node) ? (
-            <NavSection
-              key={node.qualifiedName}
-              node={node}
-              collapsed={collapsed}
-              onToggle={onToggle}
+    <NavFilterContext.Provider value={navFilter}>
+      <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
+        <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
+          <div className="px-2 pt-2 pb-1">
+            <SidebarInput
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder={t("kumiko.nav.search")}
+              aria-label={t("kumiko.nav.search")}
             />
-          ) : (
-            <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
-              <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
-            </SidebarMenu>
-          ),
-        )}
-      </div>
-    </NavBadgesContext.Provider>
+          </div>
+          {tree.map((node) =>
+            isPureSection(node) ? (
+              <NavSection
+                key={node.qualifiedName}
+                node={node}
+                collapsed={collapsed}
+                onToggle={onToggle}
+              />
+            ) : (
+              <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
+                <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
+              </SidebarMenu>
+            ),
+          )}
+        </div>
+      </NavBadgesContext.Provider>
+    </NavFilterContext.Provider>
   );
 }
 
@@ -245,8 +298,17 @@ function useLabel(node: NavNode): string {
 
 // Icon-or-Dot: bekannter icon-Key → Lucide-Icon, sonst ein dezenter Dot.
 // Aktiv = accent-foreground, inaktiv = gedimmt.
-function NavLeadingIcon({ node, active }: { node: NavNode; active: boolean }): ReactNode {
-  const NavIcon = node.icon !== undefined ? NAV_ICONS[node.icon] : undefined;
+function NavLeadingIcon({
+  node,
+  active,
+  expanded = false,
+}: {
+  node: NavNode;
+  active: boolean;
+  expanded?: boolean;
+}): ReactNode {
+  const iconKey = expanded && node.icon === "folder" ? "folder-open" : node.icon;
+  const NavIcon = iconKey !== undefined ? NAV_ICONS[iconKey] : undefined;
   if (NavIcon !== undefined) return <NavIcon aria-hidden="true" className="shrink-0" />;
   return (
     <span
@@ -366,6 +428,7 @@ type NavNodeState = {
   readonly isExpanded: boolean;
   readonly active: boolean;
   readonly childNodes: readonly NavNode[];
+  readonly hidden: boolean;
   readonly providerLoading: boolean;
   readonly providerError: string | null;
   readonly workspaceId: string | undefined;
@@ -377,10 +440,14 @@ type NavNodeState = {
 // in den shadcn-Primitives, nicht in dieser Logik.
 function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNodeState {
   const nav = useNav();
+  const { q: filterQ, matches } = useContext(NavFilterContext);
+  const filterActive = filterQ !== "";
   const displayLabel = useLabel(node);
   const isCollapsed = collapsed.has(node.qualifiedName);
   const expandable = node.children.length > 0 || node.provider === true;
-  const isExpanded = expandable && !isCollapsed;
+  // Aktiver Filter klappt jeden Container auf, damit Treffer unter zugeklappten
+  // Ordnern sichtbar werden (und Provider-Kinder nachladen).
+  const isExpanded = expandable && (!isCollapsed || filterActive);
   const { nodes: providerChildren, error: providerError } = useNavProviderChildren(
     node.qualifiedName,
     node.provider === true && isExpanded,
@@ -393,13 +460,19 @@ function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNode
     node.screen !== undefined && nav.route?.screenId === lastSegment(node.screen);
   const targetActive = node.target !== undefined && targetsEqual(node.target, activeTarget);
   const childNodes = node.provider === true ? (providerChildren ?? []) : node.children;
+  const visibleChildNodes = filterActive
+    ? childNodes.filter((c) => subtreeMatches(c, matches))
+    : childNodes;
   return {
     displayLabel,
     isCollapsed,
     expandable,
     isExpanded,
     active: screenActive || targetActive,
-    childNodes,
+    childNodes: visibleChildNodes,
+    // Ein gefilterter Knoten verschwindet nur, wenn weder er selbst noch ein
+    // sichtbar gebliebenes Kind matcht — sonst bliebe ein leerer Ordner-Header.
+    hidden: filterActive && !matches(node.label) && visibleChildNodes.length === 0,
     providerLoading: node.provider === true && isExpanded && providerChildren === null,
     providerError,
     workspaceId: nav.route?.workspaceId,
@@ -488,6 +561,16 @@ function ProviderStatus({
 // gehört auf Items MIT children, nicht auf die Section selbst.
 function NavSection({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const displayLabel = useLabel(node);
+  const { q, matches } = useContext(NavFilterContext);
+  // Provider-Kinder (statisch leer bis geladen) halten die Section offen — ihr
+  // Match lässt sich hier nicht statisch prüfen; der Knoten selbst self-hidet.
+  if (
+    q !== "" &&
+    !matches(node.label) &&
+    !node.children.some((c) => c.provider === true || subtreeMatches(c, matches))
+  ) {
+    return null;
+  }
   return (
     <SidebarGroup className="py-1">
       <SidebarGroupLabel>{displayLabel}</SidebarGroupLabel>
@@ -518,6 +601,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
   const sub = s.isExpanded ? (
     <SidebarMenuSub>
@@ -593,7 +677,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
         }}
         {...(s.expandable && { "aria-expanded": !s.isCollapsed })}
       >
-        <NavLeadingIcon node={node} active={false} />
+        <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
         <span className="truncate">{s.displayLabel}</span>
         {s.expandable &&
           (s.isCollapsed ? (
@@ -617,9 +701,14 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
+  // Kinder in ein eigenes SidebarMenuSub (<ul>) — ein Sub-Item ist ein <li>,
+  // verschachtelte <li> ohne <ul> dazwischen sind invalides HTML (nested
+  // Content-Ordner: Marketing/ > Block). Der <ul> trägt zugleich die
+  // Einrück-/Border-Stufe pro Tiefe.
   const deeper = s.isExpanded ? (
-    <>
+    <SidebarMenuSub>
       <ProviderStatus loading={s.providerLoading} error={s.providerError} />
       {s.childNodes.map((child) => (
         <NavSubNode
@@ -629,7 +718,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           onToggle={onToggle}
         />
       ))}
-    </>
+    </SidebarMenuSub>
   ) : null;
 
   const chevron = s.expandable ? (
@@ -695,7 +784,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             if (s.expandable) onToggle(node.qualifiedName);
           }}
         >
-          <NavLeadingIcon node={node} active={false} />
+          <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
           <span className="truncate">{s.displayLabel}</span>
         </button>
       </SidebarMenuSubButton>

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>
@@ -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/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;
   }
 
   * {

package/src/widgets/__tests__/query-table.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { QueryTable } from "../query-table";
+
+function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+const COLUMNS = [
+  { field: "name", label: "Name" },
+  { field: "plan", label: "Plan" },
+] as const;
+
+describe("QueryTable", () => {
+  test("rendert Query-Result als DataTable-Rows", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [
+          { id: "t1", name: "Acme", plan: "pro" },
+          { id: "t2", name: "Beta GmbH", plan: "free" },
+        ],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(screen.getByText("Beta GmbH")).toBeTruthy();
+    expect(screen.getByText("Name")).toBeTruthy();
+  });
+
+  test("Row-Click liefert die geklickte Row", async () => {
+    const onRowClick = mock((_row: { id: string }) => {});
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [{ id: "t1", name: "Acme", plan: "pro" }],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} onRowClick={onRowClick} />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    fireEvent.click(screen.getByText("Acme"));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick.mock.calls[0]?.[0]?.id).toBe("t1");
+  });
+
+  test("Fehler → ErrorState, Retry refetcht", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: false,
+            error: { code: "internal", message: "kaputt", i18nKey: "errors.internal" },
+          };
+        }
+        return { isSuccess: true, data: [{ id: "t1", name: "Acme", plan: "pro" }] };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByRole("button")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(calls).toBe(2);
+  });
+
+  test("leeres Result rendert Empty-State", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({ isSuccess: true, data: [] })) as unknown as Dispatcher["query"],
+    });
+    const { container } = renderWithDispatcher(
+      <QueryTable
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        emptyState={<span>Keine Tenants</span>}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Keine Tenants")).toBeTruthy());
+    expect(container.querySelectorAll("tbody tr").length).toBe(0);
+  });
+
+  test("rows-Selector zieht Rows aus verschachteltem Result", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { items: [{ id: "x", name: "Nested", plan: "pro" }], total: 1 },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable<{ items: readonly Record<string, unknown>[]; total: number }>
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        rows={(data) => data.items}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Nested")).toBeTruthy());
+  });
+});