@cosmicdrift/kumiko-renderer-web 0.197.0 → 0.197.1

package/package.json

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

@@ -85,6 +85,44 @@ describe("Form = eine Card, Sections als innere Abschnitte", () => {
     expect(form.className).toContain("gap-4");
   });
 
+  test("BareFormProvider: sections get the divider rule between them", () => {
+    render(
+      <BareFormProvider>
+        <Form onSubmit={() => {}} testId="bare-sections">
+          <Section testId="s1">
+            <div>a</div>
+          </Section>
+          <Section testId="s2">
+            <div>b</div>
+          </Section>
+        </Form>
+      </BareFormProvider>,
+    );
+    const form = screen.getByTestId("bare-sections");
+    // jsdom doesn't run Tailwind's JIT, so `:not(:first-child)` can't be
+    // asserted via computed style — check the structural precondition the
+    // selector relies on (both sections are direct <form> children, in
+    // order) plus the divider utility class carrying it.
+    const sectionChildren = Array.from(form.children).filter((el) => el.tagName === "SECTION");
+    expect(sectionChildren.length).toBe(2);
+    expect(sectionChildren[0]).toBe(screen.getByTestId("s1"));
+    expect(sectionChildren[1]).toBe(screen.getByTestId("s2"));
+    expect(form.className).toContain("[&>section:not(:first-child)]:border-t");
+  });
+
+  test("BareFormProvider: flat AuthCard-shaped fields render no <section> — the divider rule stays inert", () => {
+    render(
+      <BareFormProvider>
+        <Form onSubmit={() => {}} testId="bare-flat">
+          <div>field one</div>
+          <div>field two</div>
+        </Form>
+      </BareFormProvider>,
+    );
+    const form = screen.getByTestId("bare-flat");
+    expect(form.querySelectorAll("section").length).toBe(0);
+  });
+
   test("Section standalone (außerhalb Form) bleibt eine eigene Card", () => {
     render(
       <Section testId="solo" title="Solo">

package/src/__tests__/render-edit.test.tsx

@@ -98,6 +98,33 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // A hidden field must not leave an empty grid cell behind — the cell count
+  // has to track the visible field count exactly, in both directions.
+  test("a hidden field claims no grid cell; toggling visibility adds/removes exactly one cell", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const grid = screen.getByTestId("section-Basics").querySelector(".grid");
+    expect(grid).toBeTruthy();
+    // notes is hidden (isUrgent=false): title, count, isUrgent → 3 cells.
+    expect(grid?.children.length).toBe(3);
+
+    const urgentCheckbox = screen.getByTestId("field-isUrgent").querySelector('[role="checkbox"]');
+    fireEvent.click(urgentCheckbox as HTMLElement);
+
+    // notes becomes visible → 4 cells, no leftover empty cell from before.
+    expect(grid?.children.length).toBe(4);
+  });
+
   // Issue #1677: a section's optional `description` renders as the
   // Section's subtitle slot underneath the block heading, and a field's
   // `icon` reaches the DOM as a prefix icon on its input.

package/src/primitives/index.tsx

@@ -1596,7 +1596,12 @@ function DefaultForm({
           onSubmit(e);
         }}
         data-testid={testId}
-        className="flex flex-col gap-4"
+        className={cn(
+          "flex flex-col gap-4",
+          // Bare forms stack sections without a card; without a divider a
+          // section boundary reads as a layout gap, not structure.
+          "[&>section:not(:first-child)]:border-t",
+        )}
       >
         <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
         {actions !== undefined && (