@cosmicdrift/kumiko-renderer-web 0.196.0 → 0.197.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.196.0",
+  "version": "0.197.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.196.0",
-    "@cosmicdrift/kumiko-headless": "0.196.0",
-    "@cosmicdrift/kumiko-renderer": "0.196.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.197.0",
+    "@cosmicdrift/kumiko-headless": "0.197.0",
+    "@cosmicdrift/kumiko-renderer": "0.197.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__/primitives.test.tsx

@@ -492,6 +492,48 @@ describe("DataTable", () => {
       expect(screen.queryByTestId("dt-pager-page-60")).not.toBeNull();
       expect(screen.queryByTestId("dt-pager-page-30")).not.toBeNull();
     });
+
+    test("Default-Locale (en): Status-Text + aria-Labels aus i18n-Fallback statt hartcodiert", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={oneRow}
+          testId="dt"
+          pager={{ page: 1, limit: 50, total: 3000, onPageChange: mock() }}
+        />,
+      );
+      expect(screen.getByTestId("dt-pager-status").textContent).toBe("1–50 of 3,000");
+      expect(screen.getByTestId("dt-pager-prev").getAttribute("aria-label")).toBe("Previous page");
+      expect(screen.getByTestId("dt-pager-next").getAttribute("aria-label")).toBe("Next page");
+      expect(screen.getByTestId("dt-pager-page-2").getAttribute("aria-label")).toBe("Page 2");
+    });
+
+    test("de-Locale: Status-Text + aria-Labels kommen aus i18n statt hartcodiertem Englisch (issue #2007)", async () => {
+      const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } =
+        await import("@cosmicdrift/kumiko-renderer");
+      render(
+        <LocaleProvider
+          resolver={createStaticLocaleResolver({ locale: "de" })}
+          fallbackBundles={[kumikoDefaultTranslations]}
+        >
+          <DataTable
+            columns={cols}
+            rows={oneRow}
+            testId="dt"
+            pager={{ page: 1, limit: 50, total: 3000, onPageChange: mock() }}
+          />
+        </LocaleProvider>,
+      );
+      // toLocaleString() without a locale arg stays runtime-default (not the
+      // resolver locale) — out of scope for #2007, which only addresses the
+      // untranslated word/aria-labels.
+      expect(screen.getByTestId("dt-pager-status").textContent).toBe("1–50 von 3,000");
+      expect(screen.getByTestId("dt-pager-prev").getAttribute("aria-label")).toBe(
+        "Vorherige Seite",
+      );
+      expect(screen.getByTestId("dt-pager-next").getAttribute("aria-label")).toBe("Nächste Seite");
+      expect(screen.getByTestId("dt-pager-page-2").getAttribute("aria-label")).toBe("Seite 2");
+    });
   });
 
   // Infinite-scroll sentinel: renders a sentinel div, shows a spinner when

package/src/primitives/index.tsx

@@ -1153,11 +1153,15 @@ function InfiniteSentinel({
   );
 }
 
-// Pager — klassischer Page-Pager (← 1 … N →) für DataTables mit
-// pagination="pages". Layout: Status-Text links ("X – Y of Z"),
-// Page-Buttons mittig, Prev/Next pfeile außen. Window-of-7 zeigt nicht
-// alle Pages bei großen Listen — der User sieht den aktuellen Bereich
-// + first/last als Anchor.
+// Pager — classic page pager (← 1 … N →) for DataTables with
+// pagination="pages". Layout: status text on the left ("X – Y of Z"),
+// page buttons in the middle, prev/next arrows on the outside. The
+// window-of-7 doesn't show all pages for large lists — the user sees
+// the current range plus first/last as anchors.
+//
+// Status text and prev/next/page aria-labels go through t(...), which
+// requires a LocaleProvider in the tree — same requirement as
+// InfiniteSentinel above, already established for DataTable consumers.
 function Pager({
   page,
   limit,
@@ -1171,6 +1175,7 @@ function Pager({
   readonly onPageChange: (next: number) => void;
   readonly testId?: string;
 }): ReactNode {
+  const t = useTranslation();
   const totalPages = Math.max(1, Math.ceil(total / limit));
   const safePage = Math.max(1, Math.min(page, totalPages));
   const from = (safePage - 1) * limit + 1;
@@ -1183,11 +1188,15 @@ function Pager({
       className="flex items-center justify-between mt-3 gap-3 text-sm text-muted-foreground"
     >
       <div data-testid={testId !== undefined ? `${testId}-status` : undefined}>
-        {from.toLocaleString()}–{to.toLocaleString()} of {total.toLocaleString()}
+        {t("kumiko.pager.status", {
+          from: from.toLocaleString(),
+          to: to.toLocaleString(),
+          total: total.toLocaleString(),
+        })}
       </div>
       <div className="flex items-center gap-1">
         <PagerButton
-          ariaLabel="Previous page"
+          ariaLabel={t("kumiko.pager.previousPage")}
           disabled={safePage <= 1}
           onClick={() => onPageChange(safePage - 1)}
           testId={testId !== undefined ? `${testId}-prev` : undefined}
@@ -1206,7 +1215,7 @@ function Pager({
           ) : (
             <PagerButton
               key={entry}
-              ariaLabel={`Page ${entry}`}
+              ariaLabel={t("kumiko.pager.page", { entry })}
               ariaCurrent={entry === safePage ? "page" : undefined}
               active={entry === safePage}
               onClick={() => onPageChange(entry)}
@@ -1217,7 +1226,7 @@ function Pager({
           ),
         )}
         <PagerButton
-          ariaLabel="Next page"
+          ariaLabel={t("kumiko.pager.nextPage")}
           disabled={safePage >= totalPages}
           onClick={() => onPageChange(safePage + 1)}
           testId={testId !== undefined ? `${testId}-next` : undefined}
@@ -1755,7 +1764,11 @@ function DefaultSection({
       <section
         data-testid={testId}
         className={cn(
-          "flex flex-col gap-4 px-6 py-6",
+          // py-4 (not the standalone card's py-6): the border-t between
+          // sections already carries the section break, so the vertical
+          // gap only needs to read as roughly double the gap-4 field row
+          // spacing, not triple it.
+          "flex flex-col gap-4 px-6 py-4",
           variant === "destructive" && "border-l-2 border-destructive/40",
         )}
       >

package/src/ui/sheet.tsx

@@ -105,10 +105,13 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sheet-footer"
       // Matches the card footer convention (primitives/index.tsx cardFooter
-      // + cardFooterBorder) — same padding/border/button-row shape as
-      // SectionCard/DefaultCard so a drawer footer reads like a card footer.
+      // + 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-muted/30 px-[var(--card-padding)] py-4",
+        "mt-auto flex items-center justify-end gap-2 border-t bg-background px-[var(--card-padding)] py-4",
         className,
       )}
       {...props}

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

@@ -33,6 +33,35 @@ describe("Drawer", () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
+  describe("showCloseButton", () => {
+    test("default true: Close-Button im Header vorhanden", () => {
+      render(
+        <Drawer open={true} onOpenChange={() => {}} title="Mail" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.getByRole("button", { name: "Close" })).toBeTruthy();
+    });
+
+    test("false: kein Close-Button, Titel und Maximieren bleiben", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          title="Mail"
+          testId="drawer"
+          showCloseButton={false}
+          resize={{}}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("button", { name: "Close" })).toBeNull();
+      expect(screen.getByText("Mail")).toBeTruthy();
+      expect(screen.getByRole("button", { name: /maximize drawer width/i })).toBeTruthy();
+    });
+  });
+
   describe("backdrop", () => {
     function getOverlay(): HTMLElement {
       const overlay = document.querySelector('[data-slot="sheet-overlay"]');
@@ -122,18 +151,18 @@ describe("Drawer", () => {
       );
       expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("800");
     });
-    test("Startbreite folgt max(520px, 25vw) wenn resize.defaultWidthPx fehlt", () => {
-      withViewportWidth(3000, () => {
+    test("Startbreite folgt max(600px, 37.5vw) wenn resize.defaultWidthPx fehlt", () => {
+      withViewportWidth(1920, () => {
         render(
           <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
             <div>Body</div>
           </Drawer>,
         );
-        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("750");
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("720");
       });
     });
 
-    test("Startbreite clamped auf effectiveMaxWidthPx wenn 25vw ueber MAX_WIDTH_PX hinauslaeuft", () => {
+    test("Startbreite clamped auf effectiveMaxWidthPx wenn 37.5vw ueber MAX_WIDTH_PX hinauslaeuft", () => {
       withViewportWidth(8000, () => {
         render(
           <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
@@ -166,14 +195,14 @@ describe("Drawer", () => {
       });
     });
 
-    test("Startbreite clamped auf 520px Minimum bei schmalem Viewport", () => {
+    test("Startbreite clamped auf 600px Minimum bei schmalem Viewport", () => {
       withViewportWidth(800, () => {
         render(
           <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
             <div>Body</div>
           </Drawer>,
         );
-        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("520");
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("600");
       });
     });
 

package/src/widgets/drawer.tsx

@@ -21,6 +21,10 @@ export type DrawerProps = {
   readonly footer?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
+  /** Header close (X). Default `true`. Turn off when the caller's own
+   *  footer already has a dedicated close/cancel action, so there is only
+   *  one way to dismiss the drawer. */
+  readonly showCloseButton?: boolean;
   /** Opt-in drag-to-resize + maximize toggle (left/right sides only). */
   readonly resize?: {
     readonly defaultWidthPx?: number;
@@ -37,10 +41,18 @@ export type DrawerProps = {
 
 const MIN_WIDTH_PX = 320;
 const MAX_WIDTH_PX = 1000;
-// Must match the static `max(520px,25vw)` in floatingSideClass — Tailwind's
+// Must match the static `max(600px,37.5vw)` in floatingSideClass — Tailwind's
 // JIT can't read these at runtime, so the two are kept in sync by hand.
-const DEFAULT_WIDTH_MIN_PX = 520;
-const DEFAULT_WIDTH_VIEWPORT_RATIO = 0.25;
+// 600px (vs. the old 520px floor) gives a two-column field row (e.g.
+// street/number, zip/city) room to breathe, while staying well under half
+// of a 1280px viewport so a narrow window isn't dominated by the drawer.
+// 37.5vw (vs. the old 25vw) keeps that same 600px on a 1280–1600px window
+// (25vw was still under the floor there, making the ratio dead weight up
+// to 2400px) but actually grows past the floor by ~1600px, so a 1920px
+// window — where the two-column row is cramped just as often — lands
+// around 720px instead of being stuck at 600px alongside a 1280px window.
+const DEFAULT_WIDTH_MIN_PX = 600;
+const DEFAULT_WIDTH_VIEWPORT_RATIO = 0.375;
 const DEFAULT_BLUR_PX = 0;
 const DEFAULT_DIM_PERCENT = 20;
 
@@ -55,13 +67,13 @@ function defaultWidthFromViewport(): number {
 function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
   switch (side) {
     case "left":
-      return "inset-y-8 left-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
+      return "inset-y-8 left-8 h-auto w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
     case "top":
       return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
     case "bottom":
       return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
     default:
-      return "inset-y-8 right-8 h-auto w-[max(520px,25vw)] max-w-[85vw] sm:max-w-[max(520px,25vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
+      return "inset-y-8 right-8 h-auto w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
   }
 }
 
@@ -77,6 +89,7 @@ export function Drawer({
   footer,
   children,
   testId,
+  showCloseButton = true,
   resize,
   backdrop,
 }: DrawerProps): ReactNode {
@@ -146,6 +159,7 @@ export function Drawer({
         side={side}
         data-testid={testId}
         overlayStyle={overlayStyle}
+        showCloseButton={showCloseButton}
         className={floatingSideClass(side)}
         style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
       >