@cosmicdrift/kumiko-renderer-web 0.193.1 → 0.194.0

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

@@ -32,4 +32,297 @@ describe("Drawer", () => {
     fireEvent.keyDown(screen.getByTestId("drawer"), { key: "Escape" });
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  describe("backdrop", () => {
+    function getOverlay(): HTMLElement {
+      const overlay = document.querySelector('[data-slot="sheet-overlay"]');
+      if (overlay === null) throw new Error("sheet-overlay not found");
+      return overlay as HTMLElement;
+    }
+
+    test("default: keine Blur, 20% Abdunklung", () => {
+      render(
+        <Drawer open={true} onOpenChange={() => {}} title="Mail" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      const overlay = getOverlay();
+      expect(overlay.style.backdropFilter).toBe("");
+      expect(overlay.style.backgroundColor).toBe("rgb(0 0 0 / 20%)");
+    });
+
+    test("backdrop={{ blurPx: 4 }}: backdrop-filter blur(4px)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          title="Mail"
+          testId="drawer"
+          backdrop={{ blurPx: 4 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(getOverlay().style.backdropFilter).toBe("blur(4px)");
+    });
+
+    test("backdrop={{ dimPercent: 0 }}: keine Abdunklung", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          title="Mail"
+          testId="drawer"
+          backdrop={{ dimPercent: 0 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(getOverlay().style.backgroundColor).toBe("rgb(0 0 0 / 0%)");
+    });
+  });
+
+  describe("resize", () => {
+    // happy-dom exposes innerWidth as an accessor (get/set) on the window
+    // instance. Object.defineProperty(...) with a plain `value` replaces
+    // that accessor with a data property, permanently — later test files
+    // sharing this single-process happy-dom then read a frozen, stale
+    // width instead of happy-dom's real viewport state.
+    // Capturing and restoring the exact original descriptor keeps the
+    // accessor (or its absence) intact for every test that runs after.
+    function withViewportWidth(px: number, run: () => void): void {
+      const originalDescriptor = Object.getOwnPropertyDescriptor(window, "innerWidth");
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: px,
+      });
+      try {
+        run();
+      } finally {
+        if (originalDescriptor) {
+          Object.defineProperty(window, "innerWidth", originalDescriptor);
+        } else {
+          delete (window as unknown as { innerWidth?: number }).innerWidth;
+        }
+      }
+    }
+
+    test("clamps an out-of-range defaultWidthPx on initial render, before any interaction (fw#1965)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 1200, minWidthPx: 300, maxWidthPx: 800 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("800");
+    });
+    test("Startbreite folgt max(520px, 25vw) wenn resize.defaultWidthPx fehlt", () => {
+      withViewportWidth(3000, () => {
+        render(
+          <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("750");
+      });
+    });
+
+    test("Startbreite clamped auf effectiveMaxWidthPx wenn 25vw ueber MAX_WIDTH_PX hinauslaeuft", () => {
+      withViewportWidth(8000, () => {
+        render(
+          <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+            <div>Body</div>
+          </Drawer>,
+        );
+        const handle = screen.getByRole("separator");
+        const valueNow = Number(handle.getAttribute("aria-valuenow"));
+        const valueMax = Number(handle.getAttribute("aria-valuemax"));
+        expect(valueMax).toBe(1000);
+        expect(valueNow).toBe(valueMax);
+        expect(valueNow).toBeLessThanOrEqual(valueMax);
+      });
+    });
+
+    test("resize.defaultWidthPx wird ebenfalls gegen effectiveMaxWidthPx geclamped", () => {
+      withViewportWidth(2000, () => {
+        render(
+          <Drawer
+            open={true}
+            onOpenChange={() => {}}
+            side="right"
+            testId="drawer"
+            resize={{ defaultWidthPx: 5000 }}
+          >
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("1000");
+      });
+    });
+
+    test("Startbreite clamped auf 520px 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");
+      });
+    });
+
+    test("resize.defaultWidthPx schlägt die Viewport-Formel", () => {
+      withViewportWidth(3000, () => {
+        render(
+          <Drawer
+            open={true}
+            onOpenChange={() => {}}
+            side="right"
+            testId="drawer"
+            resize={{ defaultWidthPx: 600 }}
+          >
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("600");
+      });
+    });
+
+    test("side='right': ArrowLeft grows, ArrowRight shrinks", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+      fireEvent.keyDown(handle, { key: "ArrowLeft" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("416");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("side='left': ArrowRight grows, ArrowLeft shrinks (direction mirrored)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="left"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("416");
+      fireEvent.keyDown(handle, { key: "ArrowLeft" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("clamps growth at maxWidthPx and shrink at minWidthPx (shift = 40px step)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 490, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowLeft", shiftKey: true });
+      expect(handle.getAttribute("aria-valuenow")).toBe("500");
+      for (let i = 0; i < 20; i++) {
+        fireEvent.keyDown(handle, { key: "ArrowRight", shiftKey: true });
+      }
+      expect(handle.getAttribute("aria-valuenow")).toBe("300");
+    });
+
+    test("maximize toggle switches aria-pressed and expands to maxWidthPx", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const maximizeButton = screen.getByRole("button", { name: /maximize drawer width/i });
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("false");
+      fireEvent.click(maximizeButton);
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("true");
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("500");
+      fireEvent.click(maximizeButton);
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("false");
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("arrow key after maximize resizes from the maximized width, not the pre-maximize width", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const maximizeButton = screen.getByRole("button", { name: /maximize drawer width/i });
+      fireEvent.click(maximizeButton);
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("500");
+
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      // Shrinking from the visible 500px maximized width, not from the
+      // stale 400px `width` state that was never updated while maximized.
+      expect(handle.getAttribute("aria-valuenow")).toBe("484");
+    });
+
+    test("side='top' with resize set: no resize handle, no maximize button (vertical drawers can't resize)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="top"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+
+    test("resize prop omitted: no resize handle, no maximize button", () => {
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+  });
 });

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

@@ -123,6 +123,44 @@ describe("InfinityList", () => {
     expect(calls).toBe(2);
   });
 
+  test("dedupliziert nach rowId beim Append — eine Row die auf Seite 2 erneut auftaucht wird nicht doppelt gerendert (fw#1829)", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: true,
+            data: {
+              rows: [
+                { id: "m1", subject: "Erste" },
+                { id: "m2", subject: "Zweite" },
+              ],
+              nextCursor: "c1",
+            },
+          };
+        }
+        // Offset-based cursor re-serves m2 (already on page 1, e.g. after a
+        // live-merge shifted the offset) alongside a genuinely new row.
+        return {
+          isSuccess: true,
+          data: {
+            rows: [
+              { id: "m2", subject: "Zweite" },
+              { id: "m3", subject: "Dritte" },
+            ],
+            nextCursor: null,
+          },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Zweite")).toBeTruthy());
+    fireIntersect();
+    await waitFor(() => expect(screen.getByText("Dritte")).toBeTruthy());
+    expect(screen.getAllByText("Zweite")).toHaveLength(1);
+  });
+
   test("Fehler → ErrorState, Retry lädt neu", async () => {
     let calls = 0;
     const dispatcher = createMockDispatcher({

package/src/widgets/__tests__/upload-zone.test.tsx

@@ -49,10 +49,99 @@ describe("UploadZone", () => {
     const onUpload = mock(async () => {});
     render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
     const input = screen.getByTestId("zone-input") as HTMLInputElement;
+    // "files" is stubbed the same way; a plain `expect(input.value).toBe("")`
+    // is vacuous because happy-dom never wrote anything else there — a spy on
+    // the setter is what actually proves the component performs the reset.
+    const setValue = mock((_value: string) => {});
+    Object.defineProperty(input, "value", { set: setValue, get: () => "", configurable: true });
     pick(input, [new File(["a"], "a.pdf")]);
 
     await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
-    expect(input.value).toBe("");
+    await waitFor(() => expect(setValue).toHaveBeenCalledWith(""));
+  });
+
+  test("ruft onUpload bei Drop mit Dateien auf", async () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(file);
+  });
+
+  test("a dropped file that doesn't match `accept` is rejected, not passed to onUpload", async () => {
+    const onUpload = mock(async () => {});
+    render(
+      <UploadZone title="Datei hochladen" onUpload={onUpload} accept={["image/*"]} testId="zone" />,
+    );
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(screen.getByText("dropped.pdf")).toBeTruthy());
+    expect(screen.getByText("File type not allowed")).toBeTruthy();
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+
+  test("a dropped file that matches `accept` still uploads normally", async () => {
+    const onUpload = mock(async () => {});
+    render(
+      <UploadZone title="Datei hochladen" onUpload={onUpload} accept={["image/*"]} testId="zone" />,
+    );
+    const file = new File(["hi"], "photo.png", { type: "image/png" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(file);
+  });
+
+  test("a non-Error throw from onUpload shows the translated fallback, not the raw token", async () => {
+    const onUpload = mock(async () => {
+      throw "upload_failed";
+    });
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "huge.pdf", { type: "application/pdf" });
+    pick(screen.getByTestId("zone-input"), [file]);
+
+    // Both the sr-only status label and the visible error line now read
+    // "Failed" (same i18n key) — assert at least one is present rather than
+    // requiring a single match.
+    await waitFor(() => expect(screen.getAllByText("Failed").length).toBeGreaterThan(0));
+    expect(screen.queryByText("upload_failed")).toBeNull();
+  });
+
+  test("disabled unterdrückt den Drop", () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} disabled testId="zone" />);
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+
+  test("dragLeave auf ein Kind-Element behält den aktiven State, auf ein Element außerhalb setzt ihn zurück", () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const dropzone = screen.getByTestId("zone-dropzone");
+    const childIcon = screen.getByText("Datei hochladen");
+
+    fireEvent.dragOver(dropzone, { dataTransfer: {} });
+    expect(dropzone.className).toContain("border-primary");
+
+    // happy-dom's DragEvent constructor ignores `relatedTarget` in the init
+    // dict, so it must be forced via defineProperty rather than passed
+    // through fireEvent.dragLeave(el, init).
+    const leaveTo = (relatedTarget: Element): void => {
+      const evt = new DragEvent("dragleave", { bubbles: true, cancelable: true });
+      Object.defineProperty(evt, "relatedTarget", { value: relatedTarget, configurable: true });
+      fireEvent(dropzone, evt);
+    };
+
+    leaveTo(childIcon);
+    expect(dropzone.className).toContain("border-primary");
+
+    leaveTo(document.body);
+    expect(dropzone.className).not.toContain("border-primary");
   });
 
   test("gibt Bilder verkleinert an onUpload weiter (nicht die Originaldatei)", async () => {

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

@@ -44,6 +44,23 @@ describe("ProgressBar", () => {
     expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("0");
   });
 
+  test("NaN (z.B. aus done/total mit total=0) wird 0 statt NaN durchzureichen", () => {
+    render(<ProgressBar value={Number.NaN} testId="bar" />);
+    const bar = screen.getByTestId("bar");
+    expect(bar.getAttribute("aria-valuenow")).toBe("0");
+    const fill = bar.firstElementChild as HTMLElement;
+    expect(fill.style.width).toBe("0%");
+  });
+
+  test("className landet auf dem Wrapper, h-2 bleibt auf dem Testid-/Track-Element (fw#1970)", () => {
+    render(<ProgressBar value={0.5} testId="bar" className="mt-4" />);
+    const bar = screen.getByTestId("bar");
+    expect(bar.parentElement?.className).toContain("mt-4");
+    expect(bar.parentElement?.className).toContain("w-full");
+    expect(bar.className).toContain("h-2");
+    expect(bar.className).not.toContain("mt-4");
+  });
+
   test("Füll-Element bildet den Wert über Breite ab und erbt die Höhe nicht vom Elternteil", () => {
     render(<ProgressBar value={0.5} testId="bar" />);
     const bar = screen.getByTestId("bar");
@@ -54,6 +71,14 @@ describe("ProgressBar", () => {
     expect(fill.className).toContain("inset-y-0");
     expect(bar.className).toContain("relative");
   });
+
+  test("die testId sitzt auf der Track-Höhe, className erreicht den äußeren Wrapper", () => {
+    render(<ProgressBar value={0.5} testId="bar" className="mb-4" />);
+    const track = screen.getByTestId("bar");
+    const wrapper = track.parentElement as HTMLElement;
+    expect(wrapper.className).toContain("mb-4");
+    expect(track.className).toContain("h-2");
+  });
 });
 
 describe("StepBar", () => {

package/src/widgets/ai-text-field.tsx

@@ -45,6 +45,7 @@ interface AiTextFieldBaseProps {
   readonly disabled?: boolean;
   readonly placeholder?: string;
   readonly testId?: string;
+  readonly hideLabel?: boolean;
   /** Ghost-text completion on/off. Default true. */
   readonly completion?: boolean;
   /** Debounce for ghost-text requests, ms. Default 500 — kept low in
@@ -88,6 +89,7 @@ function AiTextCore({
   disabled,
   placeholder,
   testId,
+  hideLabel,
   rows,
   completion = true,
   completionDebounceMs = 500,
@@ -183,7 +185,7 @@ function AiTextCore({
 
   return (
     <>
-      <Field id={id} label={label} required={required} testId={testId}>
+      <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
         <div className="relative w-full">
           {showGhost && (
             <div

package/src/widgets/drawer.tsx

@@ -1,5 +1,6 @@
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { type ReactNode, useRef, useState } from "react";
+import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
 import {
   Sheet,
@@ -20,39 +21,49 @@ export type DrawerProps = {
   readonly children: ReactNode;
   readonly testId?: string;
   /** Opt-in drag-to-resize + maximize toggle (left/right sides only). */
-  readonly resizable?: boolean;
-  readonly defaultWidthPx?: number;
-  readonly minWidthPx?: number;
-  readonly maxWidthPx?: number;
+  readonly resize?: {
+    readonly defaultWidthPx?: number;
+    readonly minWidthPx?: number;
+    readonly maxWidthPx?: number;
+  };
+  /** Backdrop behind the panel. A drawer exists so the content behind it
+   *  stays readable, so the blur is off by default. */
+  readonly backdrop?: {
+    readonly blurPx?: number;
+    readonly dimPercent?: number;
+  };
 };
 
-const DEFAULT_WIDTH_PX = 420;
 const MIN_WIDTH_PX = 320;
-const MAX_WIDTH_PX = 800;
+const MAX_WIDTH_PX = 1000;
+// Must match the static `max(520px,25vw)` 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;
+const DEFAULT_BLUR_PX = 0;
+const DEFAULT_DIM_PERCENT = 20;
+
+function defaultWidthFromViewport(): number {
+  return typeof window === "undefined"
+    ? DEFAULT_WIDTH_MIN_PX
+    : Math.max(DEFAULT_WIDTH_MIN_PX, Math.round(window.innerWidth * DEFAULT_WIDTH_VIEWPORT_RATIO));
+}
 
-// Floating panel with a clearly visible margin on every edge, rounded on
-// all four corners — replaces the sheet primitive's flush-to-viewport-edge
-// per-side classes. twMerge resolves each utility group against the base
-// (inset/width/height/border/rounding), so this fully overrides rather than
-// stacking with it. 32px margin + 32px radius so the detachment from the
-// viewport edge reads clearly at a glance, not just on close 1:1 inspection.
+// 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 {
   switch (side) {
     case "left":
-      return "inset-y-8 left-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+      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";
     case "top":
       return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
     case "bottom":
       return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
     default:
-      return "inset-y-8 right-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+      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";
   }
 }
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
 /** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
  *  thin wrapper over the Sheet primitive with header/body/footer slots
  *  so screens skip per-route Radix boilerplate. */
@@ -65,20 +76,28 @@ export function Drawer({
   footer,
   children,
   testId,
-  resizable = false,
-  defaultWidthPx = DEFAULT_WIDTH_PX,
-  minWidthPx = MIN_WIDTH_PX,
-  maxWidthPx = MAX_WIDTH_PX,
+  resize,
+  backdrop,
 }: DrawerProps): ReactNode {
-  const canResize = resizable && (side === "left" || side === "right");
-  const [width, setWidth] = useState(defaultWidthPx);
-  const [maximized, setMaximized] = useState(false);
-  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
-
+  const canResize = resize !== undefined && (side === "left" || side === "right");
+  const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
+  const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
   const effectiveMaxWidthPx = () =>
     typeof window === "undefined"
       ? maxWidthPx
       : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
+  const [width, setWidth] = useState(() =>
+    clamp(resize?.defaultWidthPx ?? defaultWidthFromViewport(), minWidthPx, effectiveMaxWidthPx()),
+  );
+  const [maximized, setMaximized] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const blurPx = backdrop?.blurPx ?? DEFAULT_BLUR_PX;
+  const dimPercent = backdrop?.dimPercent ?? DEFAULT_DIM_PERCENT;
+  const overlayStyle: React.CSSProperties = {
+    backgroundColor: `rgb(0 0 0 / ${dimPercent}%)`,
+    ...(blurPx > 0 ? { backdropFilter: `blur(${blurPx}px)` } : {}),
+  };
+
   const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : width;
 
   const onHandlePointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
@@ -104,7 +123,13 @@ export function Drawer({
     event.preventDefault();
     setMaximized(false);
     const delta = event.key === grow ? step : -step;
-    setWidth((current) => clamp(current + delta, minWidthPx, effectiveMaxWidthPx()));
+    // Seed from the currently visible width, not the stale `width` state —
+    // while maximized, `width` still holds the pre-maximize value, so a key
+    // press would otherwise jump the drawer back to that old size instead
+    // of resizing relative to what's on screen.
+    setWidth((current) =>
+      clamp((maximized ? effectiveWidthPx : current) + delta, minWidthPx, effectiveMaxWidthPx()),
+    );
   };
 
   return (
@@ -112,7 +137,7 @@ export function Drawer({
       <SheetContent
         side={side}
         data-testid={testId}
-        overlayClassName="bg-black/20 backdrop-blur-[2px]"
+        overlayStyle={overlayStyle}
         className={floatingSideClass(side)}
         style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
       >

package/src/widgets/infinity-list.tsx

@@ -106,11 +106,24 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
           nextRows.map((row, index) => rowIdRef.current(row, index)),
         );
       }
-      setState((prev) => ({
-        kind: "ready",
-        rows: cursor === null || prev.kind !== "ready" ? nextRows : [...prev.rows, ...nextRows],
-        cursor: nextCursorRef.current(res.data),
-      }));
+      setState((prev) => {
+        if (cursor === null || prev.kind !== "ready") {
+          return { kind: "ready", rows: nextRows, cursor: nextCursorRef.current(res.data) };
+        }
+        // The live-merge above can re-sort a row to the front of page 1; an
+        // offset-based cursor then re-serves that same row in a later page.
+        // Dedupe on append so it doesn't land twice under duplicate React
+        // keys.
+        const existingIds = new Set(prev.rows.map((row, index) => rowIdRef.current(row, index)));
+        const newRows = nextRows.filter(
+          (row, index) => !existingIds.has(rowIdRef.current(row, index)),
+        );
+        return {
+          kind: "ready",
+          rows: [...prev.rows, ...newRows],
+          cursor: nextCursorRef.current(res.data),
+        };
+      });
     },
     [dispatcher, query, pageSize, payloadKey],
   );