@cosmicdrift/kumiko-renderer-web 0.200.1 → 0.201.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.200.1",
+  "version": "0.201.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.200.1",
-    "@cosmicdrift/kumiko-headless": "0.200.1",
-    "@cosmicdrift/kumiko-renderer": "0.200.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.201.0",
+    "@cosmicdrift/kumiko-headless": "0.201.0",
+    "@cosmicdrift/kumiko-renderer": "0.201.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__/render-edit.test.tsx

@@ -3076,6 +3076,68 @@ describe("RenderEdit hideActions (host-driven action bar)", () => {
       data: { id: "42" },
     });
   });
+
+  test("onChange's submitting is false on mount", () => {
+    const seen: RenderEditChangeState<TestValues>[] = [];
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          writeCommand="order:create"
+          onChange={(state) => seen.push(state)}
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+  });
+
+  test("onChange's submitting is true while a customSubmit is in flight and false again after", async () => {
+    let resolveSubmit: (() => void) | undefined;
+    const customSubmit = mock(
+      (_snapshot: FormSnapshot<TestValues>): Promise<SubmitResult<unknown>> =>
+        new Promise((resolve) => {
+          resolveSubmit = () =>
+            resolve({ validationBlocked: false, isSuccess: true, data: { id: "42" } });
+        }),
+    );
+    const seen: RenderEditChangeState<TestValues>[] = [];
+    let controls: RenderEditControls<TestValues> | undefined;
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          customSubmit={customSubmit}
+          onChange={(state) => seen.push(state)}
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+
+    let submitPromise: Promise<void> | undefined;
+    act(() => {
+      submitPromise = controls?.submit();
+    });
+
+    expect(seen.at(-1)?.submitting).toBe(true);
+
+    await act(async () => {
+      resolveSubmit?.();
+      await submitPromise;
+    });
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+  });
 });
 
 describe("RenderEdit fields filter", () => {

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

@@ -1,4 +1,4 @@
-import { describe, expect, mock, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "../../__tests__/test-utils";
 import { Drawer } from "../drawer";
 
@@ -376,4 +376,99 @@ describe("Drawer", () => {
       expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
     });
   });
+
+  describe("narrow viewport", () => {
+    // matchMedia is set via Object.defineProperty on window, same leak trap
+    // as innerWidth above (resize describe): without restoring the original
+    // descriptor in afterEach, the mock survives into the next test file's
+    // happy-dom instance and corrupts unrelated tests there.
+    let originalDescriptor: PropertyDescriptor | undefined;
+
+    function mockMatchMedia(matches: boolean): void {
+      Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        writable: true,
+        value: (query: string) => ({
+          matches,
+          media: query,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+        }),
+      });
+    }
+
+    beforeEach(() => {
+      originalDescriptor = Object.getOwnPropertyDescriptor(window, "matchMedia");
+    });
+
+    afterEach(() => {
+      if (originalDescriptor) {
+        Object.defineProperty(window, "matchMedia", originalDescriptor);
+      } else {
+        delete (window as unknown as { matchMedia?: unknown }).matchMedia;
+      }
+    });
+
+    test("narrow: full-screen classes replace the floating panel treatment", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      const content = screen.getByTestId("drawer");
+      expect(content.className).toContain("inset-0");
+      expect(content.className).toContain("w-full");
+      expect(content.className).not.toContain("rounded-[2rem]");
+      expect(content.className).not.toContain("inset-y-8");
+    });
+
+    test("narrow with resize set: no inline width style", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.getByTestId("drawer").style.width).toBe("");
+    });
+
+    test("narrow: resize handle is not rendered", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+    });
+
+    test("narrow: maximize button is not rendered", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+
+    test("wide (regression clamp): inline width and handle still present with resize set", () => {
+      mockMatchMedia(false);
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const content = screen.getByTestId("drawer");
+      expect(content.style.width).toBe("400px");
+      expect(screen.getByRole("separator")).toBeTruthy();
+    });
+  });
 });

package/src/widgets/drawer.tsx

@@ -3,6 +3,7 @@ import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { type ReactNode, useRef, useState } from "react";
 import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
+import { useIsNarrowViewport } from "../primitives/use-narrow-viewport";
 import {
   Sheet,
   SheetContent,
@@ -63,8 +64,12 @@ function defaultWidthFromViewport(): number {
 }
 
 // 32px margin + 32px radius so the panel reads as detached from the
-// viewport edge, unlike the sheet primitive's flush-edge default.
-function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
+// viewport edge, unlike the sheet primitive's flush-edge default. Below the
+// narrow-viewport breakpoint the floating treatment doesn't fit — the JS
+// hook decides, not a `sm:` Tailwind prefix, since the resize width below
+// already comes from JS and two decision sources is the bug this avoids.
+function floatingSideClass(side: "left" | "right" | "top" | "bottom", narrow: boolean): string {
+  if (narrow) return "inset-0 h-full w-full max-w-none rounded-none border-0 overflow-hidden";
   switch (side) {
     case "left":
       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";
@@ -94,6 +99,7 @@ export function Drawer({
   backdrop,
 }: DrawerProps): ReactNode {
   const t = useTranslation();
+  const narrow = useIsNarrowViewport();
   const canResize = resize !== undefined && (side === "left" || side === "right");
   const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
   const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
@@ -160,10 +166,10 @@ export function Drawer({
         data-testid={testId}
         overlayStyle={overlayStyle}
         showCloseButton={showCloseButton}
-        className={floatingSideClass(side)}
-        style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
+        className={floatingSideClass(side, narrow)}
+        style={canResize && !narrow ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
       >
-        {canResize && (
+        {canResize && !narrow && (
           <button
             type="button"
             onClick={() => setMaximized((m) => !m)}
@@ -188,7 +194,7 @@ export function Drawer({
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
         {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
-        {canResize && (
+        {canResize && !narrow && (
           // biome-ignore lint/a11y/useSemanticElements: <hr> can't carry pointer/keyboard drag interaction or a live width value — a draggable separator needs a div with the ARIA role.
           <div
             role="separator"