@cosmicdrift/kumiko-renderer-web 0.194.0 → 0.196.0

package/src/primitives/use-narrow-viewport.ts

@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from "react";
+
+// Matches ui/use-mobile.ts's MOBILE_BREAKPOINT. Kept as a separate constant
+// because that file is vendored shadcn (regenerated via scripts/sync-shadcn.ts)
+// and cannot be imported from without risking a future overwrite.
+const MOBILE_BREAKPOINT = 768;
+
+function subscribe(callback: () => void): () => void {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+
+function getSnapshot(): boolean {
+  return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches;
+}
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+// Unlike the vendored `useIsMobile` (ui/use-mobile.ts), which only sets its
+// result in a `useEffect` and therefore always reports `false` on the first
+// render regardless of actual viewport, this reads the real value up front
+// via `useSyncExternalStore` — no wrong-then-corrected first render.
+export function useIsNarrowViewport(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

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

@@ -299,6 +299,28 @@ describe("Drawer", () => {
       expect(handle.getAttribute("aria-valuenow")).toBe("484");
     });
 
+    test("PointerDown on the handle locks text selection, PointerUp restores it (fw#1965)", () => {
+      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(document.body.style.userSelect).toBe("");
+
+      fireEvent.pointerDown(handle, { pointerId: 1, clientX: 100 });
+      expect(document.body.style.userSelect).toBe("none");
+
+      fireEvent.pointerUp(handle, { pointerId: 1, clientX: 100 });
+      expect(document.body.style.userSelect).toBe("");
+    });
+
     test("side='top' with resize set: no resize handle, no maximize button (vertical drawers can't resize)", () => {
       render(
         <Drawer

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

@@ -110,6 +110,30 @@ describe("UploadZone", () => {
     expect(screen.queryByText("upload_failed")).toBeNull();
   });
 
+  test("uploads multiple files with distinct, stable row keys even without crypto.randomUUID (insecure-context LAN preview)", async () => {
+    // `crypto.randomUUID` only exists in a secure context — an HTTP-over-LAN
+    // preview leaves it undefined, so calling it throws TypeError. Row ids
+    // must not depend on it.
+    const originalRandomUUID = crypto.randomUUID;
+    (crypto as unknown as { randomUUID?: () => string }).randomUUID = undefined;
+    try {
+      const onUpload = mock(async () => {});
+      render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+      const a = new File(["a"], "a.pdf");
+      const b = new File(["b"], "b.pdf");
+      pick(screen.getByTestId("zone-input"), [a, b]);
+
+      await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(2));
+      expect(screen.getByText("a.pdf")).toBeTruthy();
+      expect(screen.getByText("b.pdf")).toBeTruthy();
+      // Two distinct rows in the DOM (not collapsed onto one shared/undefined
+      // React key) proves the ids stayed unique without crypto.randomUUID.
+      expect(screen.getAllByTestId("zone-row")).toHaveLength(2);
+    } finally {
+      crypto.randomUUID = originalRandomUUID;
+    }
+  });
+
   test("disabled unterdrückt den Drop", () => {
     const onUpload = mock(async () => {});
     render(<UploadZone title="Datei hochladen" onUpload={onUpload} disabled testId="zone" />);
@@ -164,7 +188,9 @@ describe("UploadZone", () => {
     try {
       const onUpload = mock(async (_uploaded: File) => {});
       render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
-      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      // Content sized well above the fake resize's 13 bytes — resizeImageBeforeUpload
+      // (framework#1979) only takes the re-encode when it's actually smaller.
+      const file = new File(["x".repeat(2000)], "photo.jpg", { type: "image/jpeg" });
       pick(screen.getByTestId("zone-input"), [file]);
 
       await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));

package/src/widgets/drawer.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { type ReactNode, useRef, useState } from "react";
 import { clamp } from "../lib/clamp";
@@ -54,13 +55,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";
+      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";
     case "top":
-      return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+      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";
+      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";
+      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";
   }
 }
 
@@ -79,6 +80,7 @@ export function Drawer({
   resize,
   backdrop,
 }: DrawerProps): ReactNode {
+  const t = useTranslation();
   const canResize = resize !== undefined && (side === "left" || side === "right");
   const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
   const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
@@ -101,9 +103,14 @@ export function Drawer({
   const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : width;
 
   const onHandlePointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
     dragRef.current = { startX: event.clientX, startWidth: effectiveWidthPx };
     setMaximized(false);
+    // Handle already carries `cursor-col-resize`, so only the text-selection
+    // lock is needed here — without it, a fast drag over the drawer content
+    // selects the text underneath instead of just resizing.
+    document.body.style.setProperty("user-select", "none");
   };
   const onHandlePointerMove = (event: React.PointerEvent<HTMLDivElement>): void => {
     if (dragRef.current === null) return;
@@ -114,6 +121,7 @@ export function Drawer({
   const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
     event.currentTarget.releasePointerCapture(event.pointerId);
     dragRef.current = null;
+    document.body.style.removeProperty("user-select");
   };
   const onHandleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
     const step = event.shiftKey ? 40 : 16;
@@ -146,7 +154,9 @@ export function Drawer({
             type="button"
             onClick={() => setMaximized((m) => !m)}
             aria-pressed={maximized}
-            aria-label={maximized ? "Restore drawer width" : "Maximize drawer width"}
+            aria-label={
+              maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize")
+            }
             className="absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden"
           >
             {maximized ? (
@@ -169,7 +179,7 @@ export function Drawer({
           <div
             role="separator"
             aria-orientation="vertical"
-            aria-label="Resize drawer"
+            aria-label={t("kumiko.widget.drawer.resize")}
             aria-valuenow={effectiveWidthPx}
             aria-valuemin={minWidthPx}
             aria-valuemax={effectiveMaxWidthPx()}

package/src/widgets/infinity-list.tsx

@@ -20,6 +20,12 @@ export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, un
   /** Must derive from row content (e.g. `row.id`), not from `index` — a
    *  live refresh reorders rows (new/changed rows move to the front). */
   readonly rowId: (row: TRow, index: number) => string;
+  /** Pass this when `rowId` depends on list position — the live-merge path
+   *  needs a position-independent identity. Without it, an index-based
+   *  `rowId` (legitimate when live-merge isn't used) can collide between
+   *  the freshly-fetched first page's local indices and the accumulated
+   *  list's indices, silently dropping an unrelated mid-list row on merge. */
+  readonly rowKey?: (row: TRow) => string;
   readonly renderRow: (row: TRow) => ReactNode;
   readonly emptyState?: ReactNode;
   readonly className?: string;
@@ -49,6 +55,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   rows,
   nextCursor,
   rowId,
+  rowKey,
   renderRow,
   emptyState,
   className,
@@ -73,6 +80,16 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   nextCursorRef.current = nextCursor;
   const rowIdRef = useRef(rowId);
   rowIdRef.current = rowId;
+  const rowKeyRef = useRef(rowKey);
+  rowKeyRef.current = rowKey;
+  // Position-independent when rowKey is supplied, otherwise falls back to
+  // the (possibly position-dependent) rowId — same identity function used
+  // for both sides of the live-merge diff below so a position-based rowId
+  // can no longer collide across the fresh page's local indices and the
+  // accumulated list's indices (fw#1829).
+  const identifyRef = useRef((row: TRow, index: number): string =>
+    rowKeyRef.current !== undefined ? rowKeyRef.current(row) : rowIdRef.current(row, index),
+  );
 
   // Discards a response whose request was superseded by a newer one before
   // it resolved (e.g. two searches fired in quick succession) — without
@@ -102,8 +119,11 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
       }
       const nextRows = rowsRef.current(res.data);
       if (cursor === null) {
+        // Same identity as refreshFirstPage's freshIds/staleRows diff below
+        // — this ref is what that diff's previousFirstPageIds reads, so it
+        // must agree on rowKey vs rowId or the two id spaces never overlap.
         firstPageIdsRef.current = new Set(
-          nextRows.map((row, index) => rowIdRef.current(row, index)),
+          nextRows.map((row, index) => identifyRef.current(row, index)),
         );
       }
       setState((prev) => {
@@ -154,7 +174,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     // skip: background live refresh failed, keep showing the current rows
     if (!res.isSuccess) return;
     const freshRows = rowsRef.current(res.data);
-    const freshIds = new Set(freshRows.map((row, index) => rowIdRef.current(row, index)));
+    const freshIds = new Set(freshRows.map((row, index) => identifyRef.current(row, index)));
     // A row absent from freshIds is stale for one of two reasons: it was
     // dropped from page 1 (deleted, or filtered out elsewhere) and must be
     // pruned, or it belongs to an already-accumulated later page and must
@@ -163,10 +183,18 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     const previousFirstPageIds = firstPageIdsRef.current;
     firstPageIdsRef.current = freshIds;
     setState((prev) => {
-      // skip: not showing an accumulated list yet, nothing to merge into
-      if (prev.kind !== "ready") return prev;
+      // skip: the initial load() is still in flight and owns the eventual
+      // state — a concurrent refresh landing here has nothing accumulated
+      // to merge into yet.
+      if (prev.kind === "loading") return prev;
+      if (prev.kind !== "ready") {
+        // prev.kind === "error": this refresh succeeded — promote straight
+        // to "ready" instead of leaving the list stuck on the earlier
+        // failure forever (a live event should be able to recover it).
+        return { kind: "ready", rows: freshRows, cursor: nextCursorRef.current(res.data) };
+      }
       const staleRows = prev.rows.filter((row, index) => {
-        const id = rowIdRef.current(row, index);
+        const id = identifyRef.current(row, index);
         return !freshIds.has(id) && !previousFirstPageIds.has(id);
       });
       return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };

package/src/widgets/upload-zone.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
 import { type DragEvent, type ReactNode, useId, useRef, useState } from "react";
+import { toAcceptAttr } from "../lib/accept-attr";
 import { cn } from "../lib/cn";
 import { resizeImageBeforeUpload } from "../lib/resize-image";
 
@@ -39,12 +40,6 @@ export type UploadZoneProps = {
   readonly testId?: string;
 };
 
-// "jpg" → ".jpg", "image/png" stays as-is. Empty list → no accept attribute.
-function toAcceptAttr(accept?: readonly string[]): string | undefined {
-  if (accept === undefined || accept.length === 0) return undefined;
-  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
-}
-
 // `accept` on the native <input> only filters the file-picker dialog — a
 // drag&drop drop is never routed through it, so any file type lands in
 // `onUpload` regardless of what `accept` promises. Same matching rules as
@@ -90,9 +85,13 @@ export function UploadZone({
   const inputRef = useRef<HTMLInputElement>(null);
   const [rows, setRows] = useState<readonly UploadRow[]>([]);
   const [dragOver, setDragOver] = useState(false);
+  // `crypto.randomUUID` only exists in a secure context — a plain-HTTP LAN
+  // preview leaves it undefined. These ids are React keys/row ids, not
+  // globally unique identifiers, so a per-instance counter is enough.
+  const nextRowId = useRef(0);
 
   async function uploadOne(file: File): Promise<void> {
-    const rowId = crypto.randomUUID();
+    const rowId = String(nextRowId.current++);
     setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
     try {
       await onUpload(await resizeImageBeforeUpload(file));
@@ -113,7 +112,7 @@ export function UploadZone({
       setRows((prev) => [
         ...prev,
         {
-          id: crypto.randomUUID(),
+          id: String(nextRowId.current++),
           fileName: file.name,
           status: "error",
           error: t("kumiko.widget.upload.rejected-type"),