@cosmicdrift/kumiko-renderer 0.393.0 → 0.395.0

package/dist/web/primitives/file-upload.js

@@ -6,17 +6,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // file name link. A disabled input shows the value only, without controls.
 import { ImageIcon, Loader2, Upload } from "lucide-react";
 import { useRef, useState } from "react";
-import { useTranslation } from "../../index.js";
+import { useSessionEndedSignal, useTranslation } from "../../index.js";
 import { toAcceptAttr } from "../lib/accept-attr.js";
 import { resizeImageBeforeUpload } from "../lib/resize-image.js";
 import { uploadErrorKey } from "../lib/upload-error-key.js";
-import { uploadFileRef } from "../lib/upload-file-ref.js";
+import { isSessionEndedUploadError, uploadFileRef } from "../lib/upload-file-ref.js";
 import { Button as UiButton } from "../ui/button.js";
 import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
 // React's input typings have no `webkitdirectory`; spreading keeps it typed-cast-free.
 const DIRECTORY_INPUT_ATTRS = { webkitdirectory: "", multiple: true };
 export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
     const t = useTranslation();
+    const sessionEnded = useSessionEndedSignal();
     const inputRef = useRef(null);
     const [uploading, setUploading] = useState(false);
     const [error, setError] = useState(null);
@@ -42,6 +43,8 @@ export function FileUploadInput({ kind, id, value, onChange, accept, disabled, e
             }));
         }
         catch (cause) {
+            if (isSessionEndedUploadError(cause))
+                sessionEnded?.notify();
             setError(t(uploadErrorKey(cause)));
         }
         finally {

package/dist/web/primitives/files-dropzone.js

@@ -3,12 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // file, the field value is the array of FileRef ids of the files that uploaded. Failed files stay
 // out of the value; removing a row removes its id.
 import { useEffect, useRef } from "react";
-import { useTranslation } from "../../index.js";
+import { useSessionEndedSignal, useTranslation } from "../../index.js";
 import { FileCountLimitError, uploadErrorKey } from "../lib/upload-error-key.js";
-import { uploadFileRef } from "../lib/upload-file-ref.js";
+import { isSessionEndedUploadError, uploadFileRef, } from "../lib/upload-file-ref.js";
 import { UploadZone } from "../widgets/upload-zone.js";
 export function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCount, disabled, entityType, uploadActionForm, entityId, fieldName, testId, }) {
     const t = useTranslation();
+    const sessionEnded = useSessionEndedSignal();
     // Uploads of one batch finish independently; building each next value from the render's
     // `value` would drop the ids of the others. Re-synced whenever the owner changes the value.
     const latestIds = useRef(value);
@@ -33,6 +34,11 @@ export function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCo
             onChange(latestIds.current);
             return fileId;
         }
+        catch (cause) {
+            if (isSessionEndedUploadError(cause))
+                sessionEnded?.notify();
+            throw cause;
+        }
         finally {
             uploadsRunning.current -= 1;
         }

package/dist/web/primitives/lightbox.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Full-size image overlay — ModalShell without confirm/cancel actions.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { ModalShell } from "./modal-shell.js";

package/dist/web/primitives/modal-shell.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Shared Radix dialog chrome for confirm Dialog + image Lightbox.
 // Not exported from the package — only an internal building block.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
 export function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton = true, onOpenAutoFocus, onContentKeyDown, }) {
     return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(noAriaDescription && { "aria-describedby": undefined }), ...(onOpenAutoFocus !== undefined && { onOpenAutoFocus }), ...(onContentKeyDown !== undefined && { onKeyDown: onContentKeyDown }), className: cn("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", contentClassName), children: [children, showCloseButton && closeLabel !== undefined && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: _jsx(X, { className: "size-4" }) }) }))] })] }) }));

package/dist/web/primitives/modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Bare content shell for hosting self-contained widgets (own submit/cancel
 // buttons) in a modal overlay — same Radix chrome as DefaultDialog, no
 // footer buttons of its own.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { BareFormProvider } from "./contexts.js";

package/dist/web/primitives/narrow-pinned-footer.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { MoreHorizontal } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "../../index.js";

package/dist/web/primitives/toast.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Toast primitive built on @radix-ui/react-toast: a global provider and
+// Toast primitive built on radix-ui Toast: a global provider and
 // a useToast() hook for triggering toasts throughout the app. Consumers
 // get only the `toast()` trigger, without Context boilerplate.
 //
 // Variant is StatusTone, using the same color family as StatusBadge;
 // the default is "muted" (neutral). Toasts auto-dismiss after 5s and can
 // be closed manually with the X button. Radix provides the ARIA live region.
-import * as Primitive from "@radix-ui/react-toast";
 import { X } from "lucide-react";
+import { Toast as Primitive } from "radix-ui";
 import { createContext, useCallback, useContext, useId, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

package/dist/web/sse/live-events.js

@@ -74,7 +74,6 @@ export function createEventSourceLiveEvents(options = {}) {
     const wiredEntities = new Set();
     let cancelReconnect;
     let reconnectAttempt = 0;
-    let needsResync = false;
     // `subscribers` is a flat Set across all entities — the browser-side
     // addEventListener(entityName, ...) gate below only filters which frames
     // arrive at all, not which subscriber a given frame is for. Without this
@@ -134,10 +133,6 @@ export function createEventSourceLiveEvents(options = {}) {
         };
         connection.addEventListener("open", () => {
             reconnectAttempt = 0;
-            // skip: first connect, nothing was missed
-            if (!needsResync)
-                return;
-            needsResync = false;
             emitResync();
         });
         connection.addEventListener(SESSION_ENDED_EVENT, (e) => {
@@ -146,7 +141,6 @@ export function createEventSourceLiveEvents(options = {}) {
                 signalSessionEnded();
         });
         connection.addEventListener("error", () => {
-            needsResync = true;
             // skip: CONNECTING means a dropped stream the browser retries itself;
             // only a refused handshake (non-200) closes the EventSource for good.
             if (connection.readyState !== EventSource.CLOSED)
@@ -191,7 +185,6 @@ export function createEventSourceLiveEvents(options = {}) {
             cancelReconnect = undefined;
         }
         reconnectAttempt = 0;
-        needsResync = false;
         // skip: already closed, nothing to close
         if (source === undefined)
             return;

package/dist/web/widgets/floating-panel-geometry.d.ts

@@ -0,0 +1,32 @@
+import type { DragDelta } from "./use-pointer-drag.ts";
+export type FloatingPanelGeometry = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+export type Edge = "top" | "right" | "bottom" | "left";
+export declare const FLOATING_PANEL_MARGIN_PX = 24;
+export type Limits = {
+    readonly minWidth: number;
+    readonly minHeight: number;
+    readonly maxWidth: number;
+    readonly maxHeight: number;
+    readonly viewportWidth: number;
+    readonly viewportHeight: number;
+};
+type LimitOptions = {
+    readonly minWidthPx?: number | undefined;
+    readonly minHeightPx?: number | undefined;
+    readonly maxWidthPx?: number | undefined;
+    readonly maxHeightPx?: number | undefined;
+};
+export declare function readLimits(options: LimitOptions): Limits;
+export declare function fitGeometry(geometry: FloatingPanelGeometry, limits: Limits): FloatingPanelGeometry;
+export type ViewportSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare function refitToViewport(geometry: FloatingPanelGeometry, previousViewport: ViewportSize, limits: Limits): FloatingPanelGeometry;
+export declare function resizeGeometry(start: FloatingPanelGeometry, edges: readonly Edge[], delta: DragDelta, limits: Limits): FloatingPanelGeometry;
+export {};

package/dist/web/widgets/floating-panel-geometry.js

@@ -0,0 +1,71 @@
+import { clamp } from "../lib/clamp.js";
+export const FLOATING_PANEL_MARGIN_PX = 24;
+// Minimum distance to every viewport edge, so the panel never sticks to the window border.
+const VIEWPORT_GAP_PX = 16;
+const DEFAULT_MIN_WIDTH_PX = 280;
+const DEFAULT_MIN_HEIGHT_PX = 200;
+export function readLimits(options) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const maxWidth = Math.min(options.maxWidthPx ?? viewportWidth - 2 * FLOATING_PANEL_MARGIN_PX, viewportWidth - 2 * VIEWPORT_GAP_PX);
+    const maxHeight = Math.min(options.maxHeightPx ?? viewportHeight - 2 * FLOATING_PANEL_MARGIN_PX, viewportHeight - 2 * VIEWPORT_GAP_PX);
+    return {
+        // A viewport smaller than the configured minimum wins: the panel must stay fully visible.
+        minWidth: Math.min(options.minWidthPx ?? DEFAULT_MIN_WIDTH_PX, maxWidth),
+        minHeight: Math.min(options.minHeightPx ?? DEFAULT_MIN_HEIGHT_PX, maxHeight),
+        maxWidth,
+        maxHeight,
+        viewportWidth,
+        viewportHeight,
+    };
+}
+// Size first, then position, so a shrunk panel is placed against its final size.
+export function fitGeometry(geometry, limits) {
+    const width = clamp(geometry.width, limits.minWidth, limits.maxWidth);
+    const height = clamp(geometry.height, limits.minHeight, limits.maxHeight);
+    return {
+        width,
+        height,
+        x: clampIntoViewport(geometry.x, width, limits.viewportWidth),
+        y: clampIntoViewport(geometry.y, height, limits.viewportHeight),
+    };
+}
+function clampIntoViewport(position, size, viewportSize) {
+    return clamp(position, VIEWPORT_GAP_PX, Math.max(VIEWPORT_GAP_PX, viewportSize - size - VIEWPORT_GAP_PX));
+}
+// A panel closer to the right (bottom) edge keeps its distance to that edge when the window
+// changes size; otherwise it keeps its distance to the left (top) edge.
+function anchoredPosition(position, size, previousViewportSize, fittedSize, viewportSize) {
+    const endGap = previousViewportSize - (position + size);
+    return endGap < position ? viewportSize - fittedSize - endGap : position;
+}
+export function refitToViewport(geometry, previousViewport, limits) {
+    const sized = fitGeometry(geometry, limits);
+    return fitGeometry({
+        ...sized,
+        x: anchoredPosition(geometry.x, geometry.width, previousViewport.width, sized.width, limits.viewportWidth),
+        y: anchoredPosition(geometry.y, geometry.height, previousViewport.height, sized.height, limits.viewportHeight),
+    }, limits);
+}
+// The edge being dragged follows the pointer; the opposite edge stays put.
+function resizeAxis(start, delta, movesStartEdge, min, max, viewportSize) {
+    if (movesStartEdge) {
+        const end = start.position + start.size;
+        const size = clamp(start.size - delta, min, Math.min(max, end - VIEWPORT_GAP_PX));
+        return { position: end - size, size };
+    }
+    const size = clamp(start.size + delta, min, Math.min(max, viewportSize - VIEWPORT_GAP_PX - start.position));
+    return { position: start.position, size };
+}
+export function resizeGeometry(start, edges, delta, limits) {
+    let { x, y, width, height } = start;
+    for (const edge of edges) {
+        if (edge === "left" || edge === "right") {
+            ({ position: x, size: width } = resizeAxis({ position: start.x, size: start.width }, delta.dx, edge === "left", limits.minWidth, limits.maxWidth, limits.viewportWidth));
+        }
+        else {
+            ({ position: y, size: height } = resizeAxis({ position: start.y, size: start.height }, delta.dy, edge === "top", limits.minHeight, limits.maxHeight, limits.viewportHeight));
+        }
+    }
+    return { x, y, width, height };
+}

package/dist/web/widgets/floating-panel.d.ts

@@ -1,10 +1,6 @@
 import { type ReactNode } from "react";
-export type FloatingPanelGeometry = {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-};
+import { type FloatingPanelGeometry } from "./floating-panel-geometry.ts";
+export type { FloatingPanelGeometry } from "./floating-panel-geometry.ts";
 export type FloatingPanelProps = {
     /** Header content; the header is the move handle. */
     readonly title: ReactNode;

package/dist/web/widgets/floating-panel.js

@@ -3,15 +3,12 @@ import { GripVerticalIcon } from "lucide-react";
 import { useCallback, useEffect, useId, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "../../index.js";
-import { clamp } from "../lib/clamp.js";
 import { cn } from "../lib/cn.js";
 import { useIsNarrowViewport } from "../primitives/use-narrow-viewport.js";
+import { FLOATING_PANEL_MARGIN_PX, fitGeometry, readLimits, refitToViewport, resizeGeometry, } from "./floating-panel-geometry.js";
 import { arrowKeyDelta, usePointerDrag } from "./use-pointer-drag.js";
-const MARGIN_PX = 24;
 const DEFAULT_WIDTH_PX = 400;
 const DEFAULT_HEIGHT_PX = 560;
-const DEFAULT_MIN_WIDTH_PX = 280;
-const DEFAULT_MIN_HEIGHT_PX = 200;
 const EDGES = ["top", "right", "bottom", "left"];
 const EDGE_HANDLE_BASE = "absolute z-10 touch-none hover:bg-border focus-visible:bg-ring";
 const CORNER_HANDLE_BASE = "absolute z-20 size-3 touch-none";
@@ -44,54 +41,6 @@ const EDGE_LABEL_KEYS = {
 };
 const DRAG_HANDLE_SELECTOR = "[data-drag-handle]";
 const INTERACTIVE_HEADER_TARGET = "button, a, input, select, textarea, [role=button]";
-function readLimits(options) {
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const maxWidth = Math.min(options.maxWidthPx ?? viewportWidth - 2 * MARGIN_PX, viewportWidth);
-    const maxHeight = Math.min(options.maxHeightPx ?? viewportHeight - 2 * MARGIN_PX, viewportHeight);
-    return {
-        // A viewport smaller than the configured minimum wins: the panel must stay fully visible.
-        minWidth: Math.min(options.minWidthPx ?? DEFAULT_MIN_WIDTH_PX, maxWidth),
-        minHeight: Math.min(options.minHeightPx ?? DEFAULT_MIN_HEIGHT_PX, maxHeight),
-        maxWidth,
-        maxHeight,
-        viewportWidth,
-        viewportHeight,
-    };
-}
-// Size first, then position, so a shrunk panel is placed against its final size.
-function fitGeometry(geometry, limits) {
-    const width = clamp(geometry.width, limits.minWidth, limits.maxWidth);
-    const height = clamp(geometry.height, limits.minHeight, limits.maxHeight);
-    return {
-        width,
-        height,
-        x: clamp(geometry.x, 0, Math.max(0, limits.viewportWidth - width)),
-        y: clamp(geometry.y, 0, Math.max(0, limits.viewportHeight - height)),
-    };
-}
-// The edge being dragged follows the pointer; the opposite edge stays put.
-function resizeAxis(start, delta, movesStartEdge, min, max, viewportSize) {
-    if (movesStartEdge) {
-        const end = start.position + start.size;
-        const size = clamp(start.size - delta, min, Math.min(max, end));
-        return { position: end - size, size };
-    }
-    const size = clamp(start.size + delta, min, Math.min(max, viewportSize - start.position));
-    return { position: start.position, size };
-}
-function resizeGeometry(start, edges, delta, limits) {
-    let { x, y, width, height } = start;
-    for (const edge of edges) {
-        if (edge === "left" || edge === "right") {
-            ({ position: x, size: width } = resizeAxis({ position: start.x, size: start.width }, delta.dx, edge === "left", limits.minWidth, limits.maxWidth, limits.viewportWidth));
-        }
-        else {
-            ({ position: y, size: height } = resizeAxis({ position: start.y, size: start.height }, delta.dy, edge === "top", limits.minHeight, limits.maxHeight, limits.viewportHeight));
-        }
-    }
-    return { x, y, width, height };
-}
 function isFiniteNumber(value) {
     return typeof value === "number" && Number.isFinite(value);
 }
@@ -141,8 +90,8 @@ function initialGeometry(storageKey, defaults, limits) {
     return fitGeometry({
         width,
         height,
-        x: defaults?.x ?? limits.viewportWidth - width - MARGIN_PX,
-        y: defaults?.y ?? limits.viewportHeight - height - MARGIN_PX,
+        x: defaults?.x ?? limits.viewportWidth - width - FLOATING_PANEL_MARGIN_PX,
+        y: defaults?.y ?? limits.viewportHeight - height - FLOATING_PANEL_MARGIN_PX,
     }, limits);
 }
 /** Non-modal panel floating above the page: draggable by its header,
@@ -158,6 +107,8 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
     const [geometry, setGeometry] = useState(() => initialGeometry(storageKey, defaultGeometry, getLimits()));
     const geometryRef = useRef(geometry);
     geometryRef.current = geometry;
+    // The viewport the current geometry was last fitted to; null until the first fit.
+    const fittedViewportRef = useRef(null);
     const applyGeometry = useCallback((next) => {
         geometryRef.current = next;
         setGeometry(next);
@@ -167,7 +118,12 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
         if (narrow)
             return;
         const onWindowResize = () => {
-            applyGeometry(fitGeometry(geometryRef.current, getLimitsRef.current()));
+            const limits = getLimitsRef.current();
+            const previousViewport = fittedViewportRef.current;
+            applyGeometry(previousViewport === null
+                ? fitGeometry(geometryRef.current, limits)
+                : refitToViewport(geometryRef.current, previousViewport, limits));
+            fittedViewportRef.current = { width: limits.viewportWidth, height: limits.viewportHeight };
         };
         // Resize events fired while narrow were ignored, so re-fit once on the way back to wide.
         onWindowResize();

package/dist/web/widgets/infinity-list.js

@@ -32,6 +32,9 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
     // this, a slow earlier response can land after a faster later one and
     // overwrite it, leaving stale rows on screen.
     const requestSeq = useRef(0);
+    // Lets refreshFirstPage tell "initial load still running" from outside a state updater.
+    const stateKindRef = useRef(state.kind);
+    stateKindRef.current = state.kind;
     // IDs of the most recently loaded first page. refreshFirstPage() needs
     // this to tell "row dropped from page 1 elsewhere" (must be pruned) apart
     // from "row belongs to an already-accumulated later page" (must survive)
@@ -81,6 +84,12 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
             requestSeq.current += 1;
         };
     }, [load]);
+    // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
+    // into one query per event. A refresh already running schedules
+    // exactly one trailing pass after it settles.
+    const liveTimerRef = useRef(null);
+    const liveInFlightRef = useRef(false);
+    const liveTrailingRef = useRef(false);
     // Live-mode: on an SSE event for the query's entity, refetch only the
     // first page and merge it in — rows the fresh page still contains move
     // to the front (newest-first feeds), rows it dropped (edited/deleted
@@ -89,19 +98,32 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
     // scroll position.
     // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
     const refreshFirstPage = useCallback(async () => {
-        // Read, don't bump: a concurrent load() (e.g. the mount fetch still
-        // in flight) must still land. Bumping here would make load()'s own
-        // sequence check discard it, and the refresh below then bails on
-        // `prev.kind !== "ready"` — the list gets stuck in loading forever.
+        // Read, don't bump at the start: a concurrent load() (e.g. the mount
+        // fetch still in flight) must not be discarded by a refresh that then
+        // fails or is superseded. Only a refresh that actually delivers fresh
+        // rows bumps (below), because those are newer than the running load's.
         const seqAtStart = requestSeq.current;
         const res = await dispatcher.query(query, { ...payload, limit: pageSize });
-        if (seqAtStart !== requestSeq.current)
+        if (seqAtStart !== requestSeq.current) {
+            // A load-more bumps the sequence without covering page 1, so the signal that
+            // triggered this refresh would otherwise be lost.
+            liveTrailingRef.current = true;
             return;
+        }
         // 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)));
+        if (stateKindRef.current === "loading") {
+            // The initial load was issued before the change that triggered this
+            // refresh (the live stream reports its first open as a resync), so
+            // its page 1 may be stale: adopt the fresh page and drop the older load.
+            requestSeq.current += 1;
+            firstPageIdsRef.current = freshIds;
+            setState({ kind: "ready", rows: freshRows, cursor: nextCursorRef.current(res.data) });
+            return;
+        }
         // 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
@@ -110,9 +132,6 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
         const previousFirstPageIds = firstPageIdsRef.current;
         firstPageIdsRef.current = freshIds;
         setState((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") {
@@ -128,12 +147,6 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
             return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };
         });
     }, [dispatcher, query, pageSize, payloadKey]);
-    // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
-    // into one query per event. A refresh already running schedules
-    // exactly one trailing pass after it settles.
-    const liveTimerRef = useRef(null);
-    const liveInFlightRef = useRef(false);
-    const liveTrailingRef = useRef(false);
     useEffect(() => {
         // skip: live mode off, no SSE subscription needed
         if (!live)

package/dist/web/widgets/plan-card.d.ts

@@ -4,6 +4,8 @@ export type PlanCardPrice = {
     readonly period?: string;
     /** Shown before the amount, e.g. "from" when prices differ per provider. */
     readonly prefix?: string;
+    /** Small line under the price row, e.g. "plus VAT". */
+    readonly note?: string;
 };
 export type PlanCardActionSlot = {
     readonly label: string;

package/dist/web/widgets/plan-card.js

@@ -6,8 +6,12 @@ export function PlanCard({ title, description, price, features, current = false,
     const t = useTranslation();
     const compact = variant === "compact";
     const footer = cta !== undefined || ctaLink !== undefined || secondaryAction !== undefined ? (_jsxs("div", { className: "flex w-full flex-col gap-2", children: [ctaLink !== undefined && (_jsx(Link, { href: ctaLink.href, variant: "button", target: ctaLink.target, className: "w-full justify-center", testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: ctaLink.label })), ctaLink === undefined && cta !== undefined && (_jsx(Button, { width: "full", disabled: cta.disabled, onClick: cta.onClick, testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: cta.label })), secondaryAction !== undefined && (_jsx(Button, { variant: "secondary", width: "full", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, children: secondaryAction.label }))] })) : undefined;
-    return (_jsxs(Card, { testId: testId ?? "plan-card", className: cn(current && "border-primary"), slots: { footer }, children: [_jsxs("div", { className: cn("flex items-start justify-between gap-2", compact && "items-center"), children: [_jsx("h2", { className: cn("font-semibold", compact ? "text-base" : "text-lg"), children: title }), current && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-current` : "plan-card-current", className: "inline-block rounded-xl bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: t("kumiko.planCard.current") }))] }), description !== undefined && !compact && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })), price !== undefined && (_jsx("div", { className: cn(compact ? "mt-1" : "mt-1 mb-3"), children: price === null ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-price-unavailable` : "plan-card-price-unavailable", className: "text-sm text-muted-foreground", children: t("kumiko.planCard.priceUnavailable") })) : (_jsxs(_Fragment, { children: [price.prefix !== undefined && (_jsx("span", { className: "mr-1 text-sm text-muted-foreground", children: price.prefix })), _jsx("span", { className: "text-2xl font-bold", children: price.amount }), price.period !== undefined && (_jsx("span", { className: "ml-1 text-sm text-muted-foreground", children: price.period }))] })) })), !compact && features !== undefined && features.length > 0 && (_jsx("ul", { className: "space-y-1 text-sm", children: features.map((feature, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: feature })] }, index))) }))] }));
+    return (_jsxs(Card, { testId: testId ?? "plan-card", className: cn(current && "border-primary"), slots: { footer }, children: [_jsxs("div", { className: cn("flex items-start justify-between gap-2", compact && "items-center"), children: [_jsx("h2", { className: cn("font-semibold", compact ? "text-base" : "text-lg"), children: title }), current && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-current` : "plan-card-current", className: "inline-block rounded-xl bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: t("kumiko.planCard.current") }))] }), description !== undefined && !compact && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })), price !== undefined && _jsx(PlanCardPriceRow, { price: price, compact: compact, testId: testId }), !compact && features !== undefined && features.length > 0 && (_jsx("ul", { className: "space-y-1 text-sm", children: features.map((feature, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: feature })] }, index))) }))] }));
 }
 export function PlanGrid({ children, testId }) {
     return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: children }));
 }
+function PlanCardPriceRow({ price, compact, testId, }) {
+    const t = useTranslation();
+    return (_jsxs("div", { className: cn(compact ? "mt-1" : "mt-1 mb-3"), children: [price === null ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-price-unavailable` : "plan-card-price-unavailable", className: "text-sm text-muted-foreground", children: t("kumiko.planCard.priceUnavailable") })) : (_jsxs(_Fragment, { children: [price.prefix !== undefined && (_jsx("span", { className: "mr-1 text-sm text-muted-foreground", children: price.prefix })), _jsx("span", { className: "text-2xl font-bold", children: price.amount }), price.period !== undefined && (_jsx("span", { className: "ml-1 text-sm text-muted-foreground", children: price.period }))] })), price?.note !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-price-note` : "plan-card-price-note", className: "text-xs text-muted-foreground", children: price.note }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.393.0",
+  "version": "0.395.0",
   "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,21 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.393.0",
-    "@cosmicdrift/kumiko-types": "0.393.0",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tiptap/core": "^3.31.3",
-    "@tiptap/pm": "^3.31.3",
-    "@tiptap/react": "^3.31.3",
-    "@tiptap/starter-kit": "^3.31.3",
+    "@cosmicdrift/kumiko-framework": "0.395.0",
+    "@cosmicdrift/kumiko-types": "0.395.0",
     "@types/qrcode": "^1.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -70,7 +57,7 @@
     "lucide-react": "^1.14.0",
     "pdfjs-dist": "6.3.289",
     "qrcode": "^1.5.4",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.8.1",
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
     "react-dom": "^19.2.6",
@@ -92,8 +79,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.393.0",
-    "@cosmicdrift/kumiko-testing": "0.393.0",
+    "@cosmicdrift/kumiko-locale-de": "0.395.0",
+    "@cosmicdrift/kumiko-testing": "0.395.0",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/changes.json

@@ -1,4 +1,58 @@
 [
+  {
+    "version": "0.395.0",
+    "type": "improvement",
+    "title": "Server field errors without a field on the form show in the form banner",
+    "detail": "An entityEdit save that fails with a field error whose path is not a rendered field (for example a field an extension section writes) now shows the message in the form error banner instead of losing it."
+  },
+  {
+    "version": "0.395.0",
+    "type": "fix",
+    "title": "A live refresh that a load-more supersedes is retried instead of lost",
+    "detail": "When a live signal triggered a first-page refresh while the list loaded its next page, the refresh result was discarded and nothing re-ran it, so the change on page 1 stayed invisible until the next event. The discarded refresh now runs once more."
+  },
+  {
+    "version": "0.394.0",
+    "type": "improvement",
+    "title": "edit screens opened without a record use screen:<id>.createTitle",
+    "detail": "When a detail screen is opened without an entity id and the feature translates `screen:<id>.createTitle`, the breadcrumb and page title use it instead of the edit title. managed-pages names its create state \"New page\"."
+  },
+  {
+    "version": "0.394.0",
+    "type": "improvement",
+    "title": "resizable tables size columns by content until the user resizes one",
+    "detail": "With `table.resizing` on (also through `bundledLists`), columns without a schema `width` no longer start at a flat 160px. The table keeps the auto layout and sizes them by content until the user drags or arrow-keys a column; that first resize stores the displayed widths of the other columns too, so nothing jumps. The first column of a resizable table breaks only when the table runs out of width, and a clickable first cell wraps instead of truncating, and dates and timestamps (also through a `format` renderer) stay on one line. `onWidthChange` gets an optional third argument with those widths. Stored widths from earlier sessions still apply; a browser that saved any view setting before this release still holds the old 160px widths until the view is reset. Apps with `bundledLists.table.resizing` (use-all-bundled, solon) see wider name columns and narrower leftover space on first visit."
+  },
+  {
+    "version": "0.394.0",
+    "type": "fix",
+    "title": "Floating panel keeps its distance to the window edge",
+    "detail": "Moving, resizing and window resizes clamp the panel 16px inside the viewport instead of at the border. On a window resize the panel keeps its gap to the nearer horizontal and vertical edge, so a bottom-right panel no longer sticks to the right border when the window narrows. Stored geometry stays valid and is only clamped again."
+  },
+  {
+    "version": "0.394.0",
+    "type": "fix",
+    "title": "One copy of Radix dismissable layers",
+    "detail": "Dialog, Popover, DropdownMenu and Toast now come from the radix-ui package instead of the single @radix-ui/react-* packages, which dropped nine direct dependencies. A root override pins @radix-ui/react-dialog to 1.3.1 because cmdk would otherwise pull an older dialog with its own react-dismissable-layer. Apps that import @radix-ui/react-* themselves, or add cmdk, should align their own lockfile to one react-dialog version."
+  },
+  {
+    "version": "0.394.0",
+    "type": "improvement",
+    "title": "A projectionDetail can be a dashboard screen panel",
+    "detail": "A `screen` panel or its `fallback` may point at a projectionDetail. The id comes from the host dashboard's `record` binding and is passed to the embedded screen as its entityId. Boot fails when the host dashboard has no `record`. Header, fields and Detail query render inline in the tile."
+  },
+  {
+    "version": "0.394.0",
+    "type": "improvement",
+    "title": "Toolbar actions accept visibleWhen",
+    "detail": "Every toolbar action of a projectionList or entityList takes an optional `visibleWhen` ({ query, field, eq }). The button shows only while the live query matches; it stays hidden while the query loads and when it fails. Buttons gating on the same query share one request. Boot checks the query, its output field and that it needs no input. relatedList toolbar actions reject `visibleWhen`."
+  },
+  {
+    "version": "0.394.0",
+    "type": "improvement",
+    "title": "Screen fallback can depend on the failure reason",
+    "detail": "A screen-level `fallback` is either a screen id (unchanged) or a map `{ hidden, forbidden, notFound, error }`. `forbidden` is a 403 and `notFound` a 404 on the gate query; `hidden` is an unmet condition; `error` is any other failure. A reason without an entry shows a default notice (new keys kumiko.screen.forbidden and kumiko.screen.notFound) and `error` shows an error banner with retry. Boot rejects an empty map and checks each entry like a string fallback."
+  },
   {
     "version": "0.392.1",
     "type": "fix",

package/dist/web/app/rich-content-editor.d.ts

@@ -1,3 +0,0 @@
-import { type ReactNode } from "react";
-import { type ContentEditorProps } from "../../index.ts";
-export declare function RichContentEditor(props: ContentEditorProps): ReactNode;

package/dist/web/app/rich-content-editor.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// @runtime client
-//
-// "rich" contentFormat editor: WYSIWYG on tiptap. Public contract is the
-// same four props every ContentEditorComponent gets — no tiptap type
-// crosses this boundary. tiptap itself is dynamic-imported (TiptapEditor
-// lives in ./tiptap-editor) so an app that never mounts a "rich" collection
-// never pays for it; the fallback while the chunk loads is the same plain
-// textarea uses for a missing editor, never a blank panel.
-import { lazy, Suspense } from "react";
-import { TextareaContentEditor } from "../../index.js";
-const TiptapEditor = lazy(() => import("./tiptap-editor.js"));
-export function RichContentEditor(props) {
-    return (_jsx(Suspense, { fallback: _jsx(TextareaContentEditor, { ...props }), children: _jsx(TiptapEditor, { ...props }) }));
-}

package/dist/web/app/tiptap-editor.d.ts

@@ -1,3 +0,0 @@
-import { type ReactNode } from "react";
-import { type ContentEditorProps } from "../../index.ts";
-export default function TiptapEditor({ id, value, onChange, variables, readOnly, }: ContentEditorProps): ReactNode;