@cosmicdrift/kumiko-renderer-web 0.220.1 → 0.222.0

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -209,6 +209,19 @@ describe("defaultCellRender", () => {
     expect(new Intl.NumberFormat("de-DE").format(245.5)).toBe("245,5");
   });
 
+  test("number/decimal → explicit locale param wins over the runtime default (fw#2437)", () => {
+    expect(defaultCellRender(245.5, "number", undefined, "de-DE")).toBe(
+      new Intl.NumberFormat("de-DE").format(245.5),
+    );
+    expect(defaultCellRender(245.5, "decimal", undefined, "en-US")).toBe(
+      new Intl.NumberFormat("en-US").format(245.5),
+    );
+    // Same value, two locales → two different strings, not just "locale is accepted".
+    expect(defaultCellRender(245.5, "number", undefined, "de-DE")).not.toBe(
+      defaultCellRender(245.5, "number", undefined, "en-US"),
+    );
+  });
+
   test("money → { amount, currency } formatiert, kein [object Object]", () => {
     const result = defaultCellRender({ amount: 450, currency: "EUR" }, "money");
     expect(result).not.toBe("[object Object]");
@@ -254,4 +267,18 @@ describe("defaultCellRender", () => {
     expect(() => defaultCellRender({ amount: 1, currency: "" }, "money")).not.toThrow();
     expect(defaultCellRender({ amount: 1, currency: "" }, "money")).toBe("[object Object]");
   });
+
+  test("money → explicit locale param wins over guessLocale's navigator fallback (fw#2437)", () => {
+    const value = { amount: 1234.5, currency: "EUR" };
+    const de = defaultCellRender(value, "money", undefined, "de-DE");
+    const en = defaultCellRender(value, "money", undefined, "en-US");
+    // Same amount, two locales → two different strings, not just "locale is accepted".
+    expect(de).not.toBe(en);
+    expect(de).toBe(
+      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(1234.5),
+    );
+    expect(en).toBe(
+      new Intl.NumberFormat("en-US", { style: "currency", currency: "EUR" }).format(1234.5),
+    );
+  });
 });

package/src/primitives/__tests__/date-parse.test.ts

@@ -33,9 +33,12 @@ const enPlaceholderLetters = placeholderLetters("en");
 describe("parseIso", () => {
   test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {
     const d = parseIso("2026-04-25");
-    // Cross-realm safe: bun and happy-dom can expose different Temporal
-    // copies, so toBeInstanceOf fails depending on file order. The ISO
-    // string proves both the type and the no-TZ-conversion property.
+    // Cross-realm safe: assert against the same Temporal activeTemporal() uses
+    // (native when present), not the polyfill import — Bun 1.4+ ships Temporal.
+    const ActivePlainDate = (
+      (globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ?? Temporal
+    ).PlainDate;
+    expect(d).toBeInstanceOf(ActivePlainDate);
     expect(String(d)).toBe("2026-04-25");
     expect(d?.year).toBe(2026);
     expect(d?.month).toBe(4);

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -498,6 +498,27 @@ describe("EmbeddedListInput — paste", () => {
 });
 
 describe("EmbeddedListInput — Enter-to-add-row (#1839)", () => {
+  test("Enter on a select trigger in the last cell does not append a row", () => {
+    const columns: readonly EmbeddedListColumn[] = [
+      {
+        field: "status",
+        label: "Status",
+        type: "select",
+        required: false,
+        derived: false,
+        options: ["open"],
+      },
+    ];
+    const rows = [{ status: "open" }];
+    const onAddRow = mock(() => {});
+    renderWithLocale(<EmbeddedListInput {...baseProps({ columns, rows, onAddRow })} />);
+    const desktop = within(screen.getByTestId("lines-desktop"));
+    const trigger = desktop.getByTestId("lines-cell-0-status").querySelector("button");
+    if (trigger === null) throw new Error("expected a select trigger button");
+    fireEvent.keyDown(trigger, { key: "Enter", code: "Enter" });
+    expect(onAddRow).not.toHaveBeenCalled();
+  });
+
   test("Enter on the last editable cell of the last row fires onAddRow and prevents default, same as Tab", () => {
     const rows = [{ description: "A", quantity: 1, amount: 100 }];
     const onAddRow = mock(() => {});

package/src/primitives/date-parse.ts

@@ -10,6 +10,8 @@ import { Temporal } from "temporal-polyfill";
 // Prefer the native Temporal (Chromium 144+/Firefox 139+) over the bundled
 // polyfill so `instanceof` checks match values crossing package boundaries;
 // falls back to the polyfill where native support is absent.
+// Callers must not feed parseIso()/makePlainDate results into polyfill-only
+// Statics (compare/equals/since) — mixed Temporal brands throw TypeError.
 function activeTemporal(): typeof Temporal {
   return (globalThis as unknown as { Temporal?: typeof Temporal }).Temporal ?? Temporal;
 }

package/src/primitives/index.tsx

@@ -8,6 +8,7 @@
 // basierte Stile. Radix-UI-Unterbau für interaktive Elemente (Modal,
 // Dropdown etc. kommen später).
 
+import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -36,6 +37,8 @@ import {
   type StepBarProps,
   type TextProps,
   useColumnRenderer,
+  useOptionalLocale,
+  useOptionalTranslation,
   useTranslation,
   type WizardStepGroupProps,
   WriteFailedError,
@@ -311,7 +314,7 @@ function DefaultField({
 // (nav-tree.tsx) — a separate, smaller registry instead of a shared
 // import, because field icons cover a different use case (email, phone,
 // location, …) than nav icons (dashboard, tables, …).
-const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
+const FIELD_ICONS = {
   mail: Mail,
   lock: Lock,
   hash: Hash,
@@ -325,10 +328,12 @@ const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
   globe: Globe,
   key: KeyRound,
   "map-pin": MapPin,
-};
+} as const satisfies Readonly<Record<FieldIconKey, typeof Mail>>;
 
-function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[string] | undefined {
-  return icon !== undefined && Object.hasOwn(FIELD_ICONS, icon) ? FIELD_ICONS[icon] : undefined;
+function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[FieldIconKey] | undefined {
+  return icon !== undefined && Object.hasOwn(FIELD_ICONS, icon)
+    ? FIELD_ICONS[icon as FieldIconKey]
+    : undefined;
 }
 
 // Wraps a text/number input with a left-positioned prefix icon when
@@ -668,6 +673,10 @@ function DefaultDataTable({
   getRowTestId,
   getCellTestId,
 }: DataTableProps): ReactNode {
+  // One locale/translate subscription per table — not per cell (fw#2345).
+  // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
+  const tableTranslate = useOptionalTranslation();
+  const tableLocale = useOptionalLocale();
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
@@ -734,12 +743,6 @@ function DefaultDataTable({
                     // if the sum of the columns gets too wide.
                     className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
                     title={cellTitle(row.values[col.field])}
-                    // A click into the editable cell's widget must not also
-                    // trigger the row's onClick (typically "Open Detail") —
-                    // same reasoning as the actions cell below.
-                    {...(onCellChange !== undefined && {
-                      onClick: (e: MouseEvent) => e.stopPropagation(),
-                    })}
                   >
                     <DataTableCell
                       value={row.values[col.field]}
@@ -747,6 +750,8 @@ function DefaultDataTable({
                       field={col.field}
                       type={col.type}
                       renderer={col.renderer}
+                      translate={tableTranslate}
+                      locale={tableLocale}
                       {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
                       {...(onCellChange !== undefined && {
                         onChange: (value: unknown) => onCellChange(row.id, col.field, value),
@@ -998,10 +1003,10 @@ function RowActionButton({
   );
 }
 
-// Kebab-Dropdown für >2 actions. Confirm-Dialog ist hier inline pro
-// Item analog zum Inline-Button-Pfad — ein gemeinsamer State-Holder
-// per Action damit das Dropdown nach dem Click zumacht und der Dialog
-// danach öffnet (Radix-Dropdown-Item swallowt den Click sonst).
+// Kebab dropdown for >2 actions, one inline confirm dialog per item like
+// the inline-button path. Menu is controlled so it closes explicitly on
+// select, instead of relying on Radix's auto-close, which preventDefault
+// below blocks.
 function RowActionsKebab({
   row,
   actions,
@@ -1011,10 +1016,11 @@ function RowActionsKebab({
 }): ReactNode {
   const { triggerNow } = useRowActionTrigger(row);
   const [pendingConfirm, setPendingConfirm] = useState<DataTableRowAction | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <>
-      <DropdownMenu>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenuTrigger asChild>
           <button
             type="button"
@@ -1036,6 +1042,7 @@ function RowActionsKebab({
               data-testid={`row-${row.id}-action-${action.id}`}
               onSelect={(e) => {
                 e.preventDefault();
+                setMenuOpen(false);
                 if (needsConfirm(action)) {
                   setPendingConfirm(action);
                 } else {
@@ -1442,25 +1449,18 @@ export function defaultCellRender(
   value: unknown,
   type: string,
   optionLabels?: Readonly<Record<string, string>>,
+  locale?: string,
 ): string {
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
-  if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
+  if (type === "timestamp" || type === "date") {
+    return applyFormatSpec({ format: type, locale }, value);
+  }
   if (type === "number" || type === "decimal" || type === "bigInt") {
-    // No `locale` param here for the same reason as the money branch below:
-    // DataTableCell has no app-locale context to thread through yet.
-    // Intl.NumberFormat(undefined) resolves the runtime's default locale.
-    return applyFormatSpec({ format: type }, value);
+    return applyFormatSpec({ format: type, locale }, value);
   }
   if (type === "money") {
     if (!isMoneyValue(value)) return String(value);
-    // No `locale` param here: DataTableCell has no app-locale context to
-    // thread through (unlike the form path — see MoneyInput/RenderField in
-    // packages/renderer, which pins the LocaleProvider locale). formatMoney
-    // falls back to guessLocale() (navigator.language), so the same amount
-    // can render differently in a table vs. a form on the same screen.
-    // Mid-term: pass the app locale down here too, analogous to render-field.
-    //
     // formatMoney expects minor units scaled by currencyDecimals(currency).
     // rehydrateMoney's `amountMinor` is scaled by a flat MINOR_UNIT_SCALE=100
     // instead, which disagrees with currencyDecimals for non-2-decimal
@@ -1468,7 +1468,7 @@ export function defaultCellRender(
     // low). Deriving minor units from `amount` keeps this consistent with
     // render-field.tsx's moneyMinorValue.
     const minor = Math.round(value.amount * 10 ** currencyDecimals(value.currency));
-    return formatMoney(minor, value.currency);
+    return formatMoney(minor, value.currency, locale);
   }
   if (type === "select") {
     const raw = String(value);
@@ -1508,6 +1508,8 @@ type DataTableCellProps = {
   readonly renderer?: unknown;
   readonly optionLabels?: Readonly<Record<string, string>>;
   readonly onChange?: (value: unknown) => void;
+  readonly translate?: (key: string, params?: Readonly<Record<string, unknown>>) => string;
+  readonly locale?: string;
 };
 
 // Cell-Renderer als Component (statt reiner Funktion) damit der
@@ -1527,12 +1529,17 @@ function DataTableCell({
   renderer,
   optionLabels,
   onChange,
+  translate,
+  locale,
 }: DataTableCellProps): ReactNode {
   const componentRef = isComponentRendererRef(renderer);
   const ResolvedComponent = useColumnRenderer(componentRef?.name);
-  const t = useTranslation();
   if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
-    return applyFormatSpec(renderer as { format: string } & Record<string, unknown>, value, t);
+    return applyFormatSpec(
+      { locale, ...(renderer as { format: string } & Record<string, unknown>) },
+      value,
+      translate,
+    );
   }
   if (typeof renderer === "function") {
     const fn = renderer as (v: unknown, r?: Readonly<Record<string, unknown>>) => string;
@@ -1540,7 +1547,7 @@ function DataTableCell({
   }
   if (componentRef !== undefined) {
     if (ResolvedComponent !== undefined) {
-      return (
+      const node = (
         <ResolvedComponent
           value={value}
           row={row}
@@ -1548,6 +1555,21 @@ function DataTableCell({
           {...(onChange !== undefined && { onChange })}
         />
       );
+      // stopPropagation only on the editable branch — plain cells must still
+      // fire row onClick when onCellChange is set for sibling editable cells.
+      if (onChange !== undefined) {
+        return (
+          // biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation only — not a control
+          <span
+            className="contents"
+            onClick={(e: MouseEvent) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            {node}
+          </span>
+        );
+      }
+      return node;
     }
     // Renderer im Schema referenziert, aber client-side kein Map-Eintrag —
     // typischer Fall: clientFeatures.columnRenderers vergessen oder
@@ -1562,11 +1584,11 @@ function DataTableCell({
     // dashboard-01-Muster: outline-Badge + muted statt gefülltem secondary.
     return (
       <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {defaultCellRender(value, type, optionLabels)}
+        {defaultCellRender(value, type, optionLabels, locale)}
       </Badge>
     );
   }
-  return defaultCellRender(value, type, optionLabels);
+  return defaultCellRender(value, type, optionLabels, locale);
 }
 
 // ---- Form + Section + Grid + Text ----

package/src/ui/sheet.tsx

@@ -47,8 +47,6 @@ function SheetOverlay({
 
 function SheetContent({
   className,
-  overlayClassName,
-  overlayStyle,
   children,
   side = "right",
   showCloseButton = true,
@@ -56,12 +54,10 @@ function SheetContent({
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
-  overlayClassName?: string
-  overlayStyle?: React.CSSProperties
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay className={overlayClassName} style={overlayStyle} />
+      <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
@@ -104,16 +100,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      // Matches the card footer convention (primitives/index.tsx cardFooter
-      // + cardFooterBorder) for padding/border/button-row shape, but keeps
-      // the panel's own `bg-background` instead of the card footer's
-      // `bg-muted/30` — the sheet panel isn't a card, so its footer reads
-      // as the same surface as the body above it. The border-t alone marks
-      // the footer boundary.
-      className={cn(
-        "mt-auto flex items-center justify-end gap-2 border-t bg-background px-[var(--card-padding)] py-4",
-        className,
-      )}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
   )

package/src/widgets/__tests__/feed-list.test.tsx

@@ -18,6 +18,9 @@ describe("FeedList", () => {
   test("renders trailing content only when defined", () => {
     render(<FeedList rows={rows} testId="feed" />);
     expect(screen.getByText("3 min")).toBeTruthy();
+    const items = screen.getAllByRole("listitem");
+    expect(items[0]?.textContent).toContain("3 min");
+    expect(items[1]?.textContent).not.toContain("min");
   });
 
   test("renders the empty state when there are no rows", () => {

package/src/widgets/__tests__/infinity-list.test.tsx

@@ -73,7 +73,7 @@ function renderWithLive(ui: ReactNode, dispatcher: Dispatcher, liveEvents: LiveE
 type Row = { readonly id: string; readonly subject: string };
 type Page = { readonly rows: readonly Row[]; readonly nextCursor: string | null };
 
-function list(query: string) {
+function list(query: string, live = false) {
   return (
     <InfinityList<Page, Row>
       query={query}
@@ -82,6 +82,7 @@ function list(query: string) {
       rowId={(row) => row.id}
       renderRow={(row) => <span>{row.subject}</span>}
       testId="inbox"
+      live={live}
     />
   );
 }
@@ -255,14 +256,18 @@ describe("InfinityList", () => {
       isSuccess: true,
       data: { rows: [{ id: "m1", subject: "Bo-Treffer" }], nextCursor: null },
     });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(screen.queryByText("Bo-Treffer")).toBeNull();
-    expect(screen.getByText("Bob-Treffer")).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.queryByText("Bo-Treffer")).toBeNull();
+      expect(screen.getByText("Bob-Treffer")).toBeTruthy();
+    });
   });
 
   // fw#1827: InfinityList used dispatcher.query directly and never subscribed
   // to live events, so a solon inbox stayed stale until the user reloaded.
   describe("Live-Mode", () => {
+    // fw#1829 debounces live refresh by 250ms; CI needs headroom beyond default 1s.
+    const liveWait = { timeout: 3000 } as const;
+
     test("SSE-Event mergt nur die erste Seite, bereits geladene Folgeseiten bleiben erhalten", async () => {
       const calls: Array<Readonly<Record<string, unknown>>> = [];
       const dispatcher = createMockDispatcher({
@@ -304,6 +309,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -324,7 +330,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy());
+      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy(), liveWait);
       expect(screen.getByText("Alt-1")).toBeTruthy();
       expect(screen.getByText("Alt-2")).toBeTruthy();
       expect(screen.getAllByText("Alt-1").length).toBe(1);
@@ -362,7 +368,7 @@ describe("InfinityList", () => {
       });
       const fake = makeFakeLiveEvents();
 
-      renderWithLive(list("inbox:query:message:list"), dispatcher, fake.subscriber);
+      renderWithLive(list("inbox:query:message:list", true), dispatcher, fake.subscriber);
 
       await waitFor(() => expect(screen.getByText("Erste")).toBeTruthy());
       expect(screen.getByText("Zweite")).toBeTruthy();
@@ -377,7 +383,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.queryByText("Erste")).toBeNull());
+      await waitFor(() => expect(screen.queryByText("Erste")).toBeNull(), liveWait);
       expect(screen.getByText("Zweite")).toBeTruthy();
     });
 
@@ -421,6 +427,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -441,7 +448,7 @@ describe("InfinityList", () => {
         });
       });
 
-      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy());
+      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy(), liveWait);
       expect(screen.queryByText("Erste")).toBeNull();
       expect(screen.getByText("Zweite")).toBeTruthy();
     });
@@ -508,6 +515,7 @@ describe("InfinityList", () => {
           rowId={(row) => row.id}
           renderRow={(row) => <span>{row.subject}</span>}
           testId="inbox"
+          live={true}
         />,
         dispatcher,
         fake.subscriber,
@@ -540,7 +548,7 @@ describe("InfinityList", () => {
       });
       const fake = makeFakeLiveEvents();
 
-      renderWithLive(list("inbox:query:message:list"), dispatcher, fake.subscriber);
+      renderWithLive(list("inbox:query:message:list", true), dispatcher, fake.subscriber);
 
       await waitFor(() => expect(resolvers.length).toBe(1));
 

package/src/widgets/__tests__/widgets.test.tsx

@@ -318,6 +318,33 @@ describe("StatusBarChart", () => {
     expect(container.querySelectorAll("rect").length).toBe(5);
     expect(screen.getByText("heute")).toBeTruthy();
   });
+
+  test("dense: fixed-size flat bars ohne Tick/Gradient, aria-Label + Tooltips bleiben", () => {
+    const { container } = render(
+      <StatusBarChart
+        dense
+        ariaLabel="Zahlungsmonate"
+        entries={[
+          { key: "m1", level: 1, tone: "ok", label: "Januar: bezahlt" },
+          { key: "m2", level: 0.5, tone: "bad", label: "Februar: offen" },
+        ]}
+      />,
+    );
+    const svg = container.querySelector("svg");
+    expect(screen.getByRole("img", { name: "Zahlungsmonate" })).toBeTruthy();
+    expect(svg?.getAttribute("class")).not.toContain("w-full");
+    expect(svg?.getAttribute("width")).not.toBeNull();
+    expect(container.querySelectorAll("linearGradient").length).toBe(0);
+    // 1 bar (non-last entry) + 1 bar + 1 last-highlight stripe (no tick) = 3 rects
+    expect(container.querySelectorAll("rect").length).toBe(3);
+    expect(container.querySelectorAll("title").length).toBe(3); // aria title + 2 entry tooltips
+  });
+
+  test("dense: leere Entries reservieren keine 36px-Höhe", () => {
+    const { container } = render(<StatusBarChart dense ariaLabel="Leer" entries={[]} />);
+    const placeholder = container.querySelector("div[aria-hidden]");
+    expect(placeholder?.className).toBe("h-3");
+  });
 });
 
 describe("TimeseriesChart", () => {

package/src/widgets/charts.tsx

@@ -23,15 +23,17 @@ export type StatusBarEntry = {
   readonly label?: string;
 };
 
-/** Status-Balkenleiste (z.B. 90-Tage-Uptime): variable-height Bars mit
- *  Gradient-Fade + Tick-Line am Bar-Top; der letzte Eintrag bekommt einen
- *  „jetzt"-Accent-Stripe. */
+/** Status bar strip (e.g. 90-day uptime): variable-height bars with
+ *  gradient fade + tick line on top; the last entry gets a "now"
+ *  accent stripe. `dense` swaps this for a flat-fill, fixed-size
+ *  variant sized to fit a table cell instead of stretching to `w-full`. */
 export function StatusBarChart({
   entries,
   ariaLabel,
   startLabel,
   endLabel,
   highlightLast = true,
+  dense = false,
   testId,
 }: {
   readonly entries: readonly StatusBarEntry[];
@@ -40,28 +42,34 @@ export function StatusBarChart({
   readonly startLabel?: string;
   readonly endLabel?: string;
   readonly highlightLast?: boolean;
+  /** Compact variant for table cells: fixed intrinsic size (no `w-full` stretch), flat fills instead of gradients, no tick marks. */
+  readonly dense?: boolean;
   readonly testId?: string;
 }): ReactNode {
   const gradPrefix = useId();
-  if (entries.length === 0) return <div className="h-9" aria-hidden />;
+  if (entries.length === 0) return <div className={dense ? "h-3" : "h-9"} aria-hidden />;
 
-  const chartHeight = 36;
-  const tickHeight = 1;
+  const chartHeight = dense ? 12 : 36;
+  const tickHeight = dense ? 0 : 1;
+  const barWidth = dense ? 3 : 1;
   const barGap = 1;
   const lastIdx = entries.length - 1;
+  const totalWidth = entries.length * (barWidth + barGap);
 
   return (
     <div data-testid={testId}>
       <svg
-        viewBox={`0 0 ${entries.length * (1 + barGap)} ${chartHeight}`}
-        preserveAspectRatio="none"
-        className="block h-9 w-full"
+        viewBox={`0 0 ${totalWidth} ${chartHeight}`}
+        preserveAspectRatio={dense ? undefined : "none"}
+        width={dense ? totalWidth : undefined}
+        height={dense ? chartHeight : undefined}
+        className={dense ? "block" : "block h-9 w-full"}
         role="img"
         aria-label={ariaLabel}
       >
         <title>{ariaLabel}</title>
         {entries.map((entry, idx) => {
-          const x = idx * (1 + barGap);
+          const x = idx * (barWidth + barGap);
           const level = Math.max(0, Math.min(1, entry.level));
           const barHeight = (chartHeight - tickHeight) * level;
           const barY = chartHeight - barHeight;
@@ -70,33 +78,44 @@ export function StatusBarChart({
           const gradId = `${gradPrefix}-${idx}`;
           return (
             <g key={entry.key}>
-              <defs>
-                <linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stopColor={color} stopOpacity={isLast ? 0.85 : 0.5} />
-                  <stop offset="100%" stopColor={color} stopOpacity={0.05} />
-                </linearGradient>
-              </defs>
+              {!dense && (
+                <defs>
+                  <linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
+                    <stop offset="0%" stopColor={color} stopOpacity={isLast ? 0.85 : 0.5} />
+                    <stop offset="100%" stopColor={color} stopOpacity={0.05} />
+                  </linearGradient>
+                </defs>
+              )}
               {isLast && (
                 <rect
-                  x={x - 0.5}
+                  x={x - barGap / 2}
                   y={0}
-                  width={2}
+                  width={barWidth + barGap}
                   height={chartHeight}
                   fill="var(--color-foreground)"
                   fillOpacity={0.06}
                 />
               )}
-              <rect x={x} y={barY} width={1} height={barHeight} fill={`url(#${gradId})`}>
-                {entry.label !== undefined && <title>{entry.label}</title>}
-              </rect>
               <rect
                 x={x}
-                y={barY - tickHeight}
-                width={1}
-                height={tickHeight}
-                fill="var(--color-foreground)"
-                fillOpacity={isLast ? 1.0 : 0.7}
-              />
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                fill={dense ? color : `url(#${gradId})`}
+                fillOpacity={dense ? (isLast ? 1 : 0.75) : undefined}
+              >
+                {entry.label !== undefined && <title>{entry.label}</title>}
+              </rect>
+              {!dense && (
+                <rect
+                  x={x}
+                  y={barY - tickHeight}
+                  width={barWidth}
+                  height={tickHeight}
+                  fill="var(--color-foreground)"
+                  fillOpacity={isLast ? 1.0 : 0.7}
+                />
+              )}
             </g>
           );
         })}