@cosmicdrift/kumiko-renderer-web 0.258.0 → 0.258.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.258.0",
+  "version": "0.258.1",
   "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.258.0",
-    "@cosmicdrift/kumiko-headless": "0.258.0",
-    "@cosmicdrift/kumiko-renderer": "0.258.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.258.1",
+    "@cosmicdrift/kumiko-headless": "0.258.1",
+    "@cosmicdrift/kumiko-renderer": "0.258.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -33,6 +33,7 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^1.14.0",
     "qrcode": "^1.5.4",
+    "@types/qrcode": "^1.5.5",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
@@ -61,12 +62,11 @@
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/qrcode": "^1.5.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.258.0"
+    "@cosmicdrift/kumiko-locale-de": "0.258.1"
   },
   "repository": {
     "type": "git",

package/src/primitives/__tests__/data-table-alignment.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { DataTable } = defaultPrimitives;
+
+interface InlinePadding {
+  readonly left: string | undefined;
+  readonly right: string | undefined;
+}
+
+// happy-dom doesn't compute Tailwind layout, so resolve the effective inline
+// padding the way Tailwind's cascade does: p-* < px-* < pl-*/pr-*. Variant-
+// prefixed utilities (e.g. `[&:has([role=checkbox])]:pr-0`) only apply
+// conditionally and are skipped.
+function resolveInlinePadding(element: HTMLElement): InlinePadding {
+  const tokens = element.className.split(/\s+/).filter((t) => t !== "" && !t.includes(":"));
+  const paddingFor = (prefix: string): string | undefined =>
+    tokens
+      .filter((t) => t.startsWith(`${prefix}-`))
+      .at(-1)
+      ?.slice(prefix.length + 1);
+  const all = paddingFor("p");
+  const x = paddingFor("px") ?? all;
+  return { left: paddingFor("pl") ?? x, right: paddingFor("pr") ?? x };
+}
+
+const columns = [
+  { field: "revision", label: "Revision", type: "number", sortable: false },
+  { field: "title", label: "Title", type: "string", sortable: true },
+] as const;
+
+const rows = [{ id: "r1", values: { revision: 1, title: "First" } }];
+
+describe("DataTable header cells align with body cells", () => {
+  test.each([
+    ["without sort wiring", undefined],
+    ["with sort wiring", mock()],
+  ] as const)(
+    "%s: every column header has the same inline padding as its cells",
+    (_, onSortChange) => {
+      render(
+        <DataTable
+          columns={columns}
+          rows={rows}
+          testId="t"
+          {...(onSortChange !== undefined && { onSortChange })}
+        />,
+      );
+
+      for (const col of columns) {
+        const header = resolveInlinePadding(screen.getByTestId(`column-${col.field}`));
+        const cell = resolveInlinePadding(screen.getByTestId(`cell-r1-${col.field}`));
+        expect(header.left).toBeDefined();
+        expect(header).toEqual(cell);
+      }
+    },
+  );
+});

package/src/primitives/index.tsx

@@ -1877,7 +1877,7 @@ function SortableHeader({
         data-testid={`column-${field}`}
         data-sortable={sortable === true ? true : undefined}
         data-highlighted={highlighted === true ? "true" : undefined}
-        className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
+        className={cn("text-muted-foreground", highlighted === true && "bg-accent/40")}
       >
         {label}
       </TableHead>
@@ -1893,7 +1893,7 @@ function SortableHeader({
       data-sortable="true"
       data-highlighted={highlighted === true ? "true" : undefined}
       aria-sort={ariaSort}
-      className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
+      className={cn("text-muted-foreground", highlighted === true && "bg-accent/40")}
     >
       <button
         type="button"