@cosmicdrift/kumiko-renderer-web 0.224.1 → 0.225.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.224.1",
+  "version": "0.225.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.224.1",
-    "@cosmicdrift/kumiko-headless": "0.224.1",
-    "@cosmicdrift/kumiko-renderer": "0.224.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.225.0",
+    "@cosmicdrift/kumiko-headless": "0.225.0",
+    "@cosmicdrift/kumiko-renderer": "0.225.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.224.1"
+    "@cosmicdrift/kumiko-locale-de": "0.225.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/dashboard-screen.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "bun:test";
+import { afterEach, describe, expect, test } from "bun:test";
 import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { ExtensionSectionProps, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
@@ -7,10 +7,12 @@ import {
   DispatcherProvider,
   ExtensionSectionsProvider,
   KumikoScreen,
+  NavProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { WebDashboardBody } from "../app/dashboard-body";
+import { useBrowserNavApi } from "../app/nav";
 import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
 
 const dashboardScreen: DashboardScreenDefinition = {
@@ -153,7 +155,16 @@ const richSchema: FeatureSchema = {
   screens: [richScreen],
 };
 
+function BrowserNav({ children }: { readonly children: ReactNode }): ReactNode {
+  const nav = useBrowserNavApi({ hasWorkspaces: false });
+  return <NavProvider value={nav}>{children}</NavProvider>;
+}
+
 describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
+  afterEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
   test("stat-group rendert Sektions-Titel + genestete Stat-Panels", async () => {
     const dispatcher = createMockDispatcher({
       query: (async (type: string) => {
@@ -353,6 +364,8 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
   });
 
   test("Filter-Wechsel refetcht Stat- UND Feed-Panel mit neuem Payload", async () => {
+    window.history.replaceState(null, "", "/rich");
+
     const calls: { readonly type: string; readonly payload: unknown }[] = [];
     const dispatcher = createMockDispatcher({
       query: (async (type: string, payload: unknown) => {
@@ -374,11 +387,13 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     });
     const user = userEvent.setup();
     render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <DashboardBodyProvider value={WebDashboardBody}>
-          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
-        </DashboardBodyProvider>
-      </DispatcherProvider>,
+      <BrowserNav>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </DispatcherProvider>
+      </BrowserNav>,
     );
     await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
     await waitFor(() => expect(screen.getByText("EU-Event")).toBeTruthy());
@@ -390,4 +405,55 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     await waitFor(() => expect(screen.getByText("38.120 $")).toBeTruthy());
     await waitFor(() => expect(screen.getByText("US-Event")).toBeTruthy());
   });
+
+  test("Filter-Wert aus URL-Search-Param vorbelegt: Deep-Link ?tenantId=t-2 landet in der Panel-Query", async () => {
+    window.history.replaceState(null, "", "/rich?tenantId=t-2");
+
+    const calls: { readonly type: string; readonly payload: unknown }[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        calls.push({ type, payload });
+        return { isSuccess: true, data: { value: "92.753 €" } };
+      }) as unknown as Dispatcher["query"],
+    });
+
+    const deepLinkScreen: DashboardScreenDefinition = {
+      id: "rich",
+      type: "dashboard",
+      filter: {
+        id: "tenantId",
+        label: "widgets:dashboard:filter-tenant",
+        kind: "select",
+        options: [{ value: "t-2", label: "widgets:dashboard:filter-tenant-t2" }],
+      },
+      panels: [
+        {
+          kind: "stat",
+          id: "kpi",
+          label: "widgets:dashboard:kpi",
+          query: "widgets:query:metrics:kpi",
+          valueField: "value",
+        },
+      ],
+    };
+    const deepLinkSchema: FeatureSchema = {
+      featureName: "widgets",
+      entities: {},
+      screens: [deepLinkScreen],
+    };
+
+    render(
+      <BrowserNav>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={deepLinkSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </DispatcherProvider>
+      </BrowserNav>,
+    );
+
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    const kpiCall = calls.find((c) => c.type === "widgets:query:metrics:kpi");
+    expect(kpiCall?.payload).toEqual({ tenantId: "t-2" });
+  });
 });

package/src/__tests__/projection-detail-record-layout.test.tsx

@@ -0,0 +1,305 @@
+// projectionDetail record header + metrics band + tabs (fw record-screen-type).
+
+import { describe, expect, test } from "bun:test";
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen, NavProvider } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const baseScreen: ProjectionDetailScreenDefinition = {
+  id: "rent-detail",
+  type: "projectionDetail",
+  query: "rentals:query:rent:detail",
+  idParam: "id",
+  layout: {
+    sections: [{ title: "Rent", fields: ["description"] }],
+  },
+};
+
+const rowData = {
+  description: "Loft 4B",
+  tenantName: "Jamie Rivera",
+  address: "12 Canal St",
+  state: "active",
+  balance: "120",
+  overdueDays: "3",
+};
+
+function schemaFor(screen: ProjectionDetailScreenDefinition): FeatureSchema {
+  return { featureName: "rentals", entities: {}, screens: [screen] };
+}
+
+function dispatcherReturning(
+  data: Readonly<Record<string, unknown>>,
+): Dispatcher & { readonly calls: { readonly type: string; readonly payload: unknown }[] } {
+  const calls: { type: string; payload: unknown }[] = [];
+  const query = (async (type: string, payload: unknown) => {
+    calls.push({ type, payload });
+    if (type === "rentals:query:rent:detail") return { isSuccess: true, data };
+    return { isSuccess: true, data: { rows: [], nextCursor: null } };
+  }) as unknown as Dispatcher["query"];
+  const dispatcher = createMockDispatcher({ query });
+  return Object.assign(dispatcher, { calls });
+}
+
+describe("KumikoScreen / projectionDetail — record header + metrics band", () => {
+  test("renders header title/subtitle/status from the query row's named columns", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", subtitle: "address", status: "state" },
+    };
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-title").textContent).toBe(
+      "Jamie Rivera",
+    );
+    expect(screen.getByTestId("kumiko-screen-projection-detail-subtitle").textContent).toBe(
+      "12 Canal St",
+    );
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").textContent).toBe("active");
+  });
+
+  test("renders the metrics band with fieldLabels-translated labels and query-row values", async () => {
+    const metricsScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      metrics: ["balance", "overdueDays"],
+      fieldLabels: {
+        balance: "rentals.detail.metric.balance",
+        overdueDays: "rentals.detail.metric.overdueDays",
+      },
+    };
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(metricsScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-balance-label").textContent,
+    ).toBe("rentals.detail.metric.balance");
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-balance-value").textContent,
+    ).toBe("120");
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-overdueDays-value").textContent,
+    ).toBe("3");
+  });
+
+  test("without header/metrics, neither renders — regression protection for existing screens", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(baseScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-title")).toBeNull();
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-metrics")).toBeNull();
+  });
+});
+
+describe("KumikoScreen / projectionDetail — layout.mode: 'tabs'", () => {
+  const tabsScreen: ProjectionDetailScreenDefinition = {
+    ...baseScreen,
+    layout: {
+      mode: "tabs",
+      sections: [
+        { id: "overview", title: "Overview", fields: ["description"] },
+        {
+          id: "payments",
+          kind: "relatedList",
+          title: "Payments",
+          query: "rentals:query:rent:payments",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+        {
+          id: "invoices",
+          kind: "relatedList",
+          title: "Invoices",
+          query: "rentals:query:rent:invoices",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+      ],
+    },
+  };
+
+  function navWithTab(tab: string | undefined): {
+    readonly navApi: NavApi;
+    readonly setSearchParamsCalls: Readonly<Record<string, string | null>>[];
+  } {
+    const setSearchParamsCalls: Readonly<Record<string, string | null>>[] = [];
+    return {
+      navApi: {
+        route: undefined,
+        navigate: () => {},
+        replace: () => {},
+        hrefFor: () => "",
+        searchParams: tab !== undefined ? { tab } : {},
+        setSearchParams: (updates) => setSearchParamsCalls.push(updates),
+      },
+      setSearchParamsCalls,
+    };
+  }
+
+  test("fires exactly one query on first render — the inactive tabs' relatedList queries never fire", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab(undefined);
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(dispatcher.calls).toHaveLength(1);
+    expect(dispatcher.calls[0]?.type).toBe("rentals:query:rent:detail");
+  });
+
+  test("?tab= selects the matching section — its content renders, the others don't", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("payments");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:invoices")).toBe(false);
+    expect(screen.queryByTestId("field-description")).toBeNull();
+  });
+
+  test("an unknown ?tab= value falls back to the first section", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("does-not-exist");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("field-description"));
+    expect(dispatcher.calls).toHaveLength(1);
+  });
+
+  test("clicking a tab calls nav.setSearchParams with the tab's id", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi, setSearchParamsCalls } = navWithTab(undefined);
+    const user = userEvent.setup();
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    const trigger = await waitFor(() =>
+      screen.getByTestId("kumiko-screen-projection-detail-tabs-payments"),
+    );
+    await user.click(trigger);
+
+    expect(setSearchParamsCalls).toContainEqual({ tab: "payments" });
+  });
+});
+
+// Only guard against a solon-shaped screen (relatedList-heavy) silently regressing.
+describe("KumikoScreen / projectionDetail — unchanged for a solon-shaped screen", () => {
+  const solonShapedScreen: ProjectionDetailScreenDefinition = {
+    ...baseScreen,
+    layout: {
+      sections: [
+        { title: "Rent", fields: ["description"] },
+        {
+          kind: "relatedList",
+          title: "Payments",
+          query: "rentals:query:rent:payments",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+        {
+          kind: "relatedList",
+          title: "Invoices",
+          query: "rentals:query:rent:invoices",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+      ],
+    },
+  };
+
+  test("all sections render stacked, no tabs, all relatedList queries fire", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(solonShapedScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("field-description"));
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:invoices")).toBe(true),
+    );
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-tabs")).toBeNull();
+  });
+});

package/src/app/dashboard-body.tsx

@@ -44,11 +44,12 @@ import {
   type DashboardBodyProps,
   extensionSectionName,
   useExtensionSectionComponent,
+  useNav,
   usePrimitives,
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect } from "react";
 import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
 import { FeedList, type FeedRow } from "../widgets/feed-list";
 import { ProgressList, type ProgressListRow } from "../widgets/progress-list";
@@ -337,18 +338,18 @@ function CustomPanelBody({
   );
 }
 
-// Screen-Filter: hält den gewählten Wert, rendert die Combobox, und liefert
-// den Payload-Merge für jede Panel-Query. Statische `options` werden als
-// i18n-Keys übersetzt; `optionsQuery`-Ergebnisse sind Server-Daten und werden
-// unverändert übernommen.
+// Value lives in the URL under `filter.id` (like useListUrlState's
+// `<screenId>.page`, same replaceState) so a `navigate` rowAction with
+// `params` can deep-link onto this filter.
 function useFilterParams(screen: DashboardScreenDefinition): {
   readonly params: Readonly<Record<string, unknown>>;
   readonly picker: ReactNode;
 } {
   const { Field, Input } = usePrimitives();
   const t = useTranslation();
+  const nav = useNav();
   const filter = screen.filter;
-  const [value, setValue] = useState("");
+  const value = filter !== undefined ? (nav.searchParams[filter.id] ?? "") : "";
   const optionsQueryResult = useQuery<{
     readonly rows: readonly { readonly value: string; readonly label: string }[];
   }>(filter?.optionsQuery ?? "", {}, { enabled: filter?.optionsQuery !== undefined });
@@ -373,7 +374,9 @@ function useFilterParams(screen: DashboardScreenDefinition): {
           name={filter.id}
           options={options}
           value={value}
-          onChange={setValue}
+          onChange={(next: string) =>
+            nav.setSearchParams({ [filter.id]: next === "" ? null : next })
+          }
           placeholder={filter.placeholder !== undefined ? t(filter.placeholder) : allLabel}
         />
       </Field>

package/src/primitives/index.tsx

@@ -107,6 +107,8 @@ import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { DefaultModal } from "./modal";
 import { currencyDecimals, formatMoney, MoneyInput } from "./money-input";
+import { DefaultStatusBadge } from "./status-badge";
+import { DefaultTabs } from "./tabs";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 import { TzInput } from "./tz-input";
@@ -1963,8 +1965,8 @@ function DefaultLink({
   );
 }
 
-function DefaultProgress({ value, testId }: ProgressProps): ReactNode {
-  return <ProgressBar value={value} testId={testId} />;
+function DefaultProgress({ value, tone, testId }: ProgressProps): ReactNode {
+  return <ProgressBar value={value} tone={tone} testId={testId} />;
 }
 
 function DefaultStepBar({
@@ -2090,4 +2092,6 @@ export const defaultPrimitives: CorePrimitives = {
   Progress: DefaultProgress,
   StepBar: DefaultStepBar,
   WizardStepGroup: DefaultWizardStepGroup,
+  Tabs: DefaultTabs,
+  StatusBadge: DefaultStatusBadge,
 };

package/src/primitives/status-badge.tsx

@@ -0,0 +1,11 @@
+import type { StatusBadgeProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { StatusBadge } from "../widgets/status-badge";
+
+export function DefaultStatusBadge({ value, tone, testId }: StatusBadgeProps): ReactNode {
+  return (
+    <StatusBadge tone={tone ?? "muted"} testId={testId}>
+      {value}
+    </StatusBadge>
+  );
+}

package/src/primitives/tabs.tsx

@@ -0,0 +1,23 @@
+// Delegates keyboard nav + ARIA (role=tablist/tab) to Radix instead of hand-rolling it.
+
+import type { TabsProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";
+
+export function DefaultTabs({ items, activeId, onSelect, testId }: TabsProps): ReactNode {
+  return (
+    <Tabs value={activeId} onValueChange={onSelect} data-testid={testId}>
+      <TabsList variant="line">
+        {items.map((item) => (
+          <TabsTrigger
+            key={item.id}
+            value={item.id}
+            data-testid={testId !== undefined ? `${testId}-${item.id}` : undefined}
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/widgets/progress-bar.tsx

@@ -1,6 +1,16 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 
+type ProgressTone = "default" | "warn" | "danger";
+
+// Fully spelled out (no interpolation) — Tailwind's scanner only picks up
+// literal class strings, not `bg-status-${tone}`.
+const FILL_TONE: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  warn: "bg-status-warn",
+  danger: "bg-status-critical",
+};
+
 /**
  * Progress bar, `value` 0..1 (clamped).
  *
@@ -11,10 +21,12 @@ import { cn } from "../lib/cn";
  */
 export function ProgressBar({
   value,
+  tone = "default",
   className,
   testId,
 }: {
   readonly value: number;
+  readonly tone?: ProgressTone;
   readonly className?: string;
   readonly testId?: string;
 }): ReactNode {
@@ -32,7 +44,7 @@ export function ProgressBar({
         className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
       >
         <div
-          className="absolute inset-y-0 left-0 rounded-full bg-primary"
+          className={cn("absolute inset-y-0 left-0 rounded-full", FILL_TONE[tone])}
           style={{ width: `${pct * 100}%` }}
         />
       </div>

package/src/widgets/stat.tsx

@@ -83,6 +83,7 @@ export function StatCard({
   trend,
   spark,
   testId,
+  children,
 }: {
   readonly icon?: ReactNode;
   readonly label: string;
@@ -94,6 +95,9 @@ export function StatCard({
   readonly trend?: string;
   readonly spark?: readonly number[];
   readonly testId?: string;
+  /** Extra content below the built-in fields (e.g. a usage meter) — kept
+   *  inside the same card chrome instead of stacking a second bordered box. */
+  readonly children?: ReactNode;
 }): ReactNode {
   const { Card } = usePrimitives();
   return (
@@ -140,6 +144,7 @@ export function StatCard({
       {spark !== undefined && (
         <Sparkline points={spark} className={cn("mt-2 h-7 w-full", TONE_VALUE[tone])} />
       )}
+      {children !== undefined && <div className="mt-3">{children}</div>}
     </Card>
   );
 }