@cosmicdrift/kumiko-renderer-web 0.193.1 → 0.195.0

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 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-[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 overflow-hidden";
   }
 }
 
-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,26 +76,39 @@ 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 => {
+    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;
@@ -95,6 +119,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;
@@ -104,7 +129,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 +143,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],
   );

package/src/widgets/progress-bar.tsx

@@ -18,7 +18,9 @@ export function ProgressBar({
   readonly className?: string;
   readonly testId?: string;
 }): ReactNode {
-  const pct = Math.max(0, Math.min(1, value));
+  // `value` is typically `done / total`; total:0 produces NaN, which would
+  // otherwise leak into `width: "NaN%"` and an invalid aria-valuenow.
+  const pct = Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
   return (
     <div className={cn("w-full", className)}>
       <div

package/src/widgets/step-bar.tsx

@@ -49,7 +49,7 @@ export function StepBar({
                 {isDone ? (
                   <>
                     <Check aria-hidden="true" className="size-3.5" />
-                    <span className="sr-only">{t("kumiko.widget.stepBar.done")}</span>
+                    <span className="sr-only">{t("kumiko.widget.step-bar.done")}</span>
                   </>
                 ) : (
                   <span className="text-xs font-semibold">{i + 1}</span>

package/src/widgets/upload-zone.tsx

@@ -45,6 +45,32 @@ function toAcceptAttr(accept?: readonly string[]): string | 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
+// the native attribute: MIME type (with an optional "type/*" wildcard) or
+// file extension.
+function matchesAccept(file: File, accept?: readonly string[]): boolean {
+  if (accept === undefined || accept.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.some((raw) => {
+    const a = raw.toLowerCase();
+    if (a.includes("/")) return a.endsWith("/*") ? type.startsWith(a.slice(0, -1)) : type === a;
+    return name.endsWith(a.startsWith(".") ? a : `.${a}`);
+  });
+}
+
+function partitionByAccept(
+  files: readonly File[],
+  accept: readonly string[] | undefined,
+): readonly [accepted: readonly File[], rejected: readonly File[]] {
+  const accepted: File[] = [];
+  const rejected: File[] = [];
+  for (const file of files) (matchesAccept(file, accept) ? accepted : rejected).push(file);
+  return [accepted, rejected];
+}
+
 /** Drop zone + multi-file picker with a per-file status row (uploading/done/
  *  error). For screens that accept several files and upload them
  *  independently — unlike `FileField` (single file, FileRef value inside a
@@ -64,15 +90,19 @@ 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));
       setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
     } catch (cause) {
-      const message = cause instanceof Error ? cause.message : "upload_failed";
+      const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
       setRows((prev) =>
         prev.map((row) => (row.id === rowId ? { ...row, status: "error", error: message } : row)),
       );
@@ -82,7 +112,19 @@ 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]] : [];
-    await Promise.all(picked.map((file) => uploadOne(file)));
+    const [accepted, rejected] = partitionByAccept(picked, accept);
+    for (const file of rejected) {
+      setRows((prev) => [
+        ...prev,
+        {
+          id: String(nextRowId.current++),
+          fileName: file.name,
+          status: "error",
+          error: t("kumiko.widget.upload.rejected-type"),
+        },
+      ]);
+    }
+    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 = "";