@cosmicdrift/kumiko-renderer-web 0.220.1 → 0.222.0

package/src/widgets/drawer.tsx

@@ -4,14 +4,16 @@ 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,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from "../ui/sheet";
+import { Sheet, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet";
+import { DrawerSheetContent } from "./sheet-parts";
+
+// Mirrors primitives/index.tsx's cardFooter + cardFooterBorder (row layout,
+// end-justified actions, top border, panel surface instead of the card
+// footer's bg-muted/30) — those two consts aren't exported, so the
+// equivalent classes are inlined here rather than growing the vendored
+// SheetFooter's own default className with panel-specific styling.
+const DRAWER_FOOTER_CLASS =
+  "flex-row items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
 
 export type DrawerProps = {
   readonly open: boolean;
@@ -137,8 +139,10 @@ export function Drawer({
     const signedDelta = side === "right" ? -deltaX : deltaX;
     setWidth(clamp(dragRef.current.startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
   };
-  const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
-    event.currentTarget.releasePointerCapture(event.pointerId);
+  const endHandlePointerDrag = (event: React.PointerEvent<HTMLDivElement>): void => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
     dragRef.current = null;
     document.body.style.removeProperty("user-select");
   };
@@ -161,7 +165,7 @@ export function Drawer({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
+      <DrawerSheetContent
         side={side}
         data-testid={testId}
         overlayStyle={overlayStyle}
@@ -193,7 +197,9 @@ export function Drawer({
           </SheetHeader>
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
-        {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
+        {footer !== undefined && (
+          <SheetFooter className={DRAWER_FOOTER_CLASS}>{footer}</SheetFooter>
+        )}
         {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
@@ -206,7 +212,9 @@ export function Drawer({
             tabIndex={0}
             onPointerDown={onHandlePointerDown}
             onPointerMove={onHandlePointerMove}
-            onPointerUp={onHandlePointerUp}
+            onPointerUp={endHandlePointerDrag}
+            onPointerCancel={endHandlePointerDrag}
+            onLostPointerCapture={endHandlePointerDrag}
             onKeyDown={onHandleKeyDown}
             className={cn(
               "absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border",
@@ -214,7 +222,7 @@ export function Drawer({
             )}
           />
         )}
-      </SheetContent>
+      </DrawerSheetContent>
     </Sheet>
   );
 }

package/src/widgets/infinity-list.tsx

@@ -28,7 +28,7 @@ export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, un
    *  (`<feature>:query:<entity>:<verb>`) and refetch the first page on
    *  any create/update/delete/restore event, merging it into the
    *  already-accumulated rows instead of collapsing them — see
-   *  `useQuery`'s `live` option for the same convention. Default true. */
+   *  `useQuery`'s `live` option for the same convention. Default false. */
   readonly live?: boolean;
 };
 
@@ -53,7 +53,7 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   emptyState,
   className,
   testId,
-  live = true,
+  live = false,
 }: InfinityListProps<TData, TRow>): ReactNode {
   const dispatcher = useDispatcher();
   const t = useTranslation();
@@ -183,15 +183,51 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     });
   }, [dispatcher, query, pageSize, payloadKey]);
 
+  // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
+  // into one query per event (fw#1829). A refresh already running schedules
+  // exactly one trailing pass after it settles.
+  const liveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const liveInFlightRef = useRef(false);
+  const liveTrailingRef = useRef(false);
+
   useEffect(() => {
     // skip: live mode off, no SSE subscription needed
     if (!live) return;
     const entity = entityFromQueryType(query);
     // skip: query type has no mapped entity, nothing to subscribe to
     if (entity === undefined) return;
-    return subscribeLive(entity, () => {
-      void refreshFirstPage();
-    });
+
+    const runRefresh = (): void => {
+      liveInFlightRef.current = true;
+      void refreshFirstPage().finally(() => {
+        liveInFlightRef.current = false;
+        if (liveTrailingRef.current) {
+          liveTrailingRef.current = false;
+          runRefresh();
+        }
+      });
+    };
+
+    const scheduleRefresh = (): void => {
+      if (liveTimerRef.current !== null) clearTimeout(liveTimerRef.current);
+      liveTimerRef.current = setTimeout(() => {
+        liveTimerRef.current = null;
+        if (liveInFlightRef.current) {
+          liveTrailingRef.current = true;
+          return;
+        }
+        runRefresh();
+      }, 250);
+    };
+
+    const unsubscribe = subscribeLive(entity, scheduleRefresh);
+    return () => {
+      unsubscribe();
+      if (liveTimerRef.current !== null) {
+        clearTimeout(liveTimerRef.current);
+        liveTimerRef.current = null;
+      }
+    };
   }, [live, query, refreshFirstPage, subscribeLive]);
 
   useEffect(() => {

package/src/widgets/sheet-parts.tsx

@@ -0,0 +1,62 @@
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+// Drawer needs a per-instance overlay dim/blur (its `backdrop` prop), but
+// ../ui/sheet.tsx is vendored shadcn (regenerated via scripts/sync-shadcn.ts,
+// never hand-edited — #1965) and its SheetContent hard-codes a plain
+// `<SheetOverlay />` with no way to reach the overlay's inline style. Rather
+// than growing the vendored primitive an ad-hoc prop that a resync would
+// silently drop, this composes the same Portal + Overlay + Content tree
+// directly from the underlying radix-ui Dialog primitive (mirrors
+// SheetContent's className logic 1:1 so Drawer's other side-variant
+// behavior — slide animation, borders — stays identical).
+export type DrawerSheetContentProps = ComponentProps<typeof SheetPrimitive.Content> & {
+  readonly side?: "top" | "right" | "bottom" | "left";
+  readonly showCloseButton?: boolean;
+  readonly overlayStyle?: CSSProperties;
+};
+
+export function DrawerSheetContent({
+  className,
+  overlayStyle,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: DrawerSheetContentProps): ReactNode {
+  return (
+    <SheetPrimitive.Portal data-slot="sheet-portal">
+      <SheetPrimitive.Overlay
+        data-slot="sheet-overlay"
+        style={overlayStyle}
+        className="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+      />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPrimitive.Portal>
+  );
+}

package/src/widgets/upload-zone.tsx

@@ -92,9 +92,10 @@ export function UploadZone({
 
   async function uploadOne(file: File): Promise<void> {
     const rowId = String(nextRowId.current++);
-    setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
+    const uploadFile = await resizeImageBeforeUpload(file);
+    setRows((prev) => [...prev, { id: rowId, fileName: uploadFile.name, status: "uploading" }]);
     try {
-      await onUpload(await resizeImageBeforeUpload(file));
+      await onUpload(uploadFile);
       setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
     } catch (cause) {
       const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
@@ -107,6 +108,8 @@ export function UploadZone({
   async function uploadFiles(files: FileList | null): Promise<void> {
     if (files === null || files.length === 0) return;
     const picked = multiple ? Array.from(files) : files[0] !== undefined ? [files[0]] : [];
+    // Reset before awaits so re-picking the same file during a slow upload still fires change.
+    if (inputRef.current) inputRef.current.value = "";
     const [accepted, rejected] = partitionByAccept(picked, accept);
     for (const file of rejected) {
       setRows((prev) => [
@@ -120,9 +123,6 @@ export function UploadZone({
       ]);
     }
     await Promise.all(accepted.map((file) => uploadOne(file)));
-    // Reset so re-picking the SAME file still fires change — the browser
-    // suppresses the event otherwise.
-    if (inputRef.current) inputRef.current.value = "";
   }
 
   function handleDrop(e: DragEvent<HTMLLabelElement>): void {