@cosmicdrift/kumiko-renderer 0.387.0 → 0.389.0

package/dist/web/primitives/page-header.js

@@ -2,6 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { usePageHeaderSlot } from "../layout/page-header-slot.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "../layout/uniform-bar-controls.js";
+import { cn } from "../lib/cn.js";
 export function DefaultPageHeader({ title, recordTitle, status, actions, overflowItems, hideBreadcrumb, breadcrumbScreenId, }) {
     const slot = usePageHeaderSlot();
     const setOverflowItems = slot?.setOverflowItems;
@@ -42,7 +44,7 @@ export function DefaultPageHeader({ title, recordTitle, status, actions, overflo
         return () => setOverflowItems(undefined);
     }, [setOverflowItems, overflowItems]);
     if (slot === null) {
-        return (_jsxs("div", { "data-kumiko-layout": "page-header-inline", className: "flex items-center gap-2 px-4 py-2", children: [status, _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] }));
+        return (_jsxs("div", { "data-kumiko-layout": "page-header-inline", className: "flex items-center gap-2 px-4 py-2", children: [status, _jsx("div", { className: cn("ml-auto flex items-center gap-2", UNIFORM_BAR_CONTROLS_CLASSES), children: actions })] }));
     }
     return (_jsxs(_Fragment, { children: [status !== undefined &&
                 slot.statusElement !== null &&

package/dist/web/primitives/row-actions.js

@@ -37,19 +37,19 @@ export function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = fa
         // otherwise "inline" is exactly the wall-to-wall text-button problem
         // this feature exists to fix. An author-set `display` takes that choice over.
         const iconOnly = !hasExplicitDisplay && shouldRenderActionsIconOnly(visible);
-        return (_jsx("div", { className: "flex w-full items-center gap-1 justify-start", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly, compact: compact }, a.id))) }));
+        return (_jsx("div", { className: "flex w-full flex-nowrap items-center gap-1 justify-start whitespace-nowrap", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly, compact: compact }, a.id))) }));
     }
     if (hasExplicitDisplay) {
         const inline = visible.filter((a) => a.display !== undefined);
         const rest = visible.filter((a) => a.display === undefined);
-        return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+        return (_jsxs("div", { className: "inline-flex flex-nowrap items-center gap-1 justify-end whitespace-nowrap", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
     }
     if (rowIsLink) {
         return (_jsx("div", { className: "inline-flex items-center justify-end", children: _jsx(RowActionsKebab, { row: row, actions: visible }) }));
     }
     const primary = primaryRowAction(visible);
     const rest = visible.filter((a) => a.id !== primary?.id);
-    return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+    return (_jsxs("div", { className: "inline-flex flex-nowrap items-center gap-1 justify-end whitespace-nowrap", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
 }
 // Shared trigger state between inline button + kebab item: busy flag
 // (while the async onTrigger runs) + confirm-pending action. Both

package/dist/web/primitives/use-focus-on-mount.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useFocusOnMount(enabled: boolean | undefined): RefObject<HTMLInputElement | null>;

package/dist/web/primitives/use-focus-on-mount.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+export function useFocusOnMount(enabled) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (enabled === true)
+            ref.current?.focus();
+    }, [enabled]);
+    return ref;
+}

package/dist/web/widgets/bounded-load-cache.d.ts

@@ -1 +1,5 @@
-export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void): (key: string, load: () => Promise<T>) => Promise<T>;
+export type BoundedLoadCache<T> = {
+    readonly load: (key: string, load: () => Promise<T>) => Promise<T>;
+    readonly retain: (key: string) => () => void;
+};
+export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void, shouldKeep?: (value: T) => boolean): BoundedLoadCache<T>;

package/dist/web/widgets/bounded-load-cache.js

@@ -1,25 +1,53 @@
-// Evicts the oldest entry once `max` is exceeded and disposes only that one,
-// so several documents on one page keep their own loading tasks alive.
-export function createBoundedLoadCache(max, dispose) {
+export function createBoundedLoadCache(max, dispose, shouldKeep = () => true) {
     const entries = new Map();
-    return (key, load) => {
-        const cached = entries.get(key);
-        if (cached !== undefined)
-            return cached;
-        const loading = load();
-        entries.set(key, loading);
-        // A failed load must not stick: the next mount retries instead of replaying the rejection.
-        loading.catch(() => {
-            if (entries.get(key) === loading)
-                entries.delete(key);
-        });
-        if (entries.size > max) {
-            const [oldestKey, oldest] = entries.entries().next().value ?? [];
-            if (oldestKey !== undefined && oldest !== undefined) {
-                entries.delete(oldestKey);
-                void oldest.then(dispose);
-            }
+    const users = new Map();
+    const everRetained = new Set();
+    const evictIdle = (protectedKey) => {
+        for (const [key, entry] of entries) {
+            // skip: back within the bound, nothing more to evict
+            if (entries.size <= max)
+                return;
+            const idle = (users.get(key) ?? 0) === 0;
+            const settled = everRetained.has(key) || entries.size > max * 2;
+            if (key === protectedKey || !idle || !settled)
+                continue;
+            entries.delete(key);
+            everRetained.delete(key);
+            void entry.then(dispose);
         }
-        return loading;
+    };
+    return {
+        load: (key, load) => {
+            const cached = entries.get(key);
+            if (cached !== undefined)
+                return cached;
+            const loading = load();
+            entries.set(key, loading);
+            // A failed load must not stick: the next mount retries instead of replaying the rejection.
+            const forget = () => {
+                if (entries.get(key) === loading)
+                    entries.delete(key);
+            };
+            loading.then((value) => {
+                if (!shouldKeep(value))
+                    forget();
+            }, forget);
+            evictIdle(key);
+            return loading;
+        },
+        retain: (key) => {
+            users.set(key, (users.get(key) ?? 0) + 1);
+            everRetained.add(key);
+            return () => {
+                const remaining = (users.get(key) ?? 1) - 1;
+                if (remaining > 0) {
+                    users.set(key, remaining);
+                    // skip: other consumers still hold the entry
+                    return;
+                }
+                users.delete(key);
+                evictIdle();
+            };
+        },
     };
 }

package/dist/web/widgets/choice-cards.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+/** Card-styled radio group for mutually exclusive choices that need a description or price line. */
+export declare function ChoiceCards<T extends string>({ value, options, onChange, ariaLabel, testId, }: {
+    /** `null`: nothing selected. */
+    readonly value: T | null;
+    readonly options: readonly {
+        readonly value: T;
+        readonly title: string;
+        readonly description?: string;
+        /** Right-aligned next to the title, e.g. a price. */
+        readonly aside?: string;
+        readonly disabled?: boolean;
+    }[];
+    readonly onChange: (value: T) => void;
+    readonly ariaLabel?: string;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/choice-cards.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+/** Card-styled radio group for mutually exclusive choices that need a description or price line. */
+export function ChoiceCards({ value, options, onChange, ariaLabel, testId, }) {
+    const groupName = useId();
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, "data-testid": testId, className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: options.map((option) => {
+            const selected = option.value === value;
+            return (_jsxs("label", { "data-testid": testId !== undefined ? `${testId}-${option.value}` : undefined, className: cn("relative flex cursor-pointer flex-col gap-1 rounded-lg border bg-card p-4 transition-colors", "hover:bg-muted/50 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring", selected ? "border-primary ring-1 ring-primary" : "border-border", option.disabled && "cursor-not-allowed opacity-50"), children: [_jsx("input", { type: "radio", className: "sr-only", name: groupName, value: option.value, checked: selected, disabled: option.disabled, onChange: () => onChange(option.value) }), _jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: option.title }), _jsxs("span", { className: "flex items-center gap-2", children: [option.aside !== undefined && (_jsx("span", { className: "font-semibold tabular-nums", children: option.aside })), _jsx("span", { "aria-hidden": "true", className: cn("flex size-5 shrink-0 items-center justify-center rounded-full border", selected ? "border-primary bg-primary text-primary-foreground" : "border-input"), children: selected && _jsx(Check, { className: "size-3" }) })] })] }), option.description !== undefined && (_jsx("span", { className: "text-sm text-muted-foreground", children: option.description }))] }, option.value));
+        }) }));
+}

package/dist/web/widgets/collapsible-section.js

@@ -13,5 +13,5 @@ export function CollapsibleSection({ title, defaultOpen = false, children, testI
         if (defaultOpen)
             setOpen(true);
     }, [defaultOpen]);
-    return (_jsxs("details", { "data-testid": testId, className: "group rounded-lg border bg-card", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center justify-between gap-2 rounded-lg px-4 py-2.5 text-sm font-medium hover:bg-muted/50 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: title }), _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "border-t px-4 py-3", children: children })] }));
+    return (_jsxs("details", { "data-testid": testId, className: "group rounded-lg border bg-card", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "flex h-9 cursor-pointer select-none items-center justify-between gap-2 rounded-lg px-4 text-sm font-medium hover:bg-muted/50 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: title }), _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "border-t px-4 py-3", children: children })] }));
 }

package/dist/web/widgets/detail-list.d.ts

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-/** Read-only key-value list for detail views (dimmed label on the left, value on the right). The value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as the final result in a calculator. */
+/**
+ * Read-only key-value list for detail views (dimmed label on the left, value on the right). The
+ * value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as
+ * the final result in a calculator.
+ */
 export declare function DetailList({ rows, testId, }: {
     readonly rows: readonly {
         /** Optional stable key -- falls back to the label when omitted (fine as

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

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-/** Read-only key-value list for detail views (dimmed label on the left, value on the right). The value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as the final result in a calculator. */
+/**
+ * Read-only key-value list for detail views (dimmed label on the left, value on the right). The
+ * value is a ReactNode, so badges and chips are supported. `emphasize` highlights a row, such as
+ * the final result in a calculator.
+ */
 export function DetailList({ rows, testId, }) {
     return (_jsx("dl", { "data-testid": testId, className: "@container flex flex-col divide-y", children: rows.map((row) => (_jsxs("div", { className: "grid grid-cols-1 gap-0.5 py-2.5 @md:grid-cols-[200px_1fr] @md:gap-4", children: [_jsx("dt", { className: cn("text-sm text-muted-foreground", row.emphasize === true && "font-semibold text-foreground"), children: row.label }), _jsx("dd", { className: cn("text-sm font-medium", row.emphasize === true && "font-semibold"), children: row.value })] }, row.id ?? row.label))) }));
 }

package/dist/web/widgets/index.d.ts

@@ -1,6 +1,7 @@
 export { AiTextArea, type AiTextAreaProps, AiTextField, type AiTextFieldProps, } from "./ai-text-field.tsx";
 export type { StackedAreaDateFormat, StackedAreaInitialWindow, StackedAreaRangeOption, StackedAreaRanges, StackedAreaWindowSelection, } from "./chart-window.ts";
 export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesHeight, type TimeseriesPoint, type TimeseriesReferenceLine, type TimeseriesXAxis, type TimeseriesYAxis, } from "./charts.tsx";
+export { ChoiceCards } from "./choice-cards.tsx";
 export { CollapsibleSection } from "./collapsible-section.tsx";
 export { type DashboardListColumn, DashboardListTable } from "./dashboard-list.tsx";
 export { DetailList } from "./detail-list.tsx";

package/dist/web/widgets/index.js

@@ -4,6 +4,7 @@
 // styleguide sample.
 export { AiTextArea, AiTextField, } from "./ai-text-field.js";
 export { SegmentBarChart, StackedAreaChart, StackedBarChart, StatusBarChart, smoothPath, TimeseriesChart, } from "./charts.js";
+export { ChoiceCards } from "./choice-cards.js";
 export { CollapsibleSection } from "./collapsible-section.js";
 export { DashboardListTable } from "./dashboard-list.js";
 export { DetailList } from "./detail-list.js";

package/dist/web/widgets/pdf-preview.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, use, useCallback, useMemo, useState } from "react";
+import { Suspense, use, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "../../i18n.js";
 import { createBoundedLoadCache } from "./bounded-load-cache.js";
 // pdf.js runs in the main thread ("fake worker"): the worker module is bundled
@@ -7,10 +7,10 @@ import { createBoundedLoadCache } from "./bounded-load-cache.js";
 // CDN URL is ever fetched (self-hosting and CSP stay intact).
 const RENDER_SCALE = 96 / 72;
 const MAX_CACHED_DOCUMENTS = 4;
-const cachedDocument = createBoundedLoadCache(MAX_CACHED_DOCUMENTS, (loaded) => {
+const documentCache = createBoundedLoadCache(MAX_CACHED_DOCUMENTS, (loaded) => {
     if (loaded.ok)
         void loaded.loadingTask.destroy();
-});
+}, (loaded) => loaded.ok);
 function decodeBase64(base64) {
     const binary = atob(base64);
     const bytes = new Uint8Array(binary.length);
@@ -42,9 +42,11 @@ async function loadDocument(source) {
     }
 }
 // The promise must be stable across renders for use().
+function documentKey(source) {
+    return "base64" in source ? `base64:${source.base64}` : `url:${source.url}`;
+}
 function documentFor(source) {
-    const key = "base64" in source ? `base64:${source.base64}` : `url:${source.url}`;
-    return cachedDocument(key, () => loadDocument(source));
+    return documentCache.load(documentKey(source), () => loadDocument(source));
 }
 function PageView({ document, pageNumber, }) {
     const t = useTranslation();
@@ -128,6 +130,9 @@ function pageFor(document, pageNumber) {
 function Pages({ source }) {
     const t = useTranslation();
     const loaded = use(documentFor(source));
+    // A mounted preview keeps its document out of the eviction: destroying it blanks its pages.
+    const key = documentKey(source);
+    useEffect(() => documentCache.retain(key), [key]);
     if (!loaded.ok) {
         return _jsx("p", { className: "text-sm text-status-bad", children: t("kumiko.widget.pdf-preview.renderFailed") });
     }

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

@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 export type PlanCardPrice = {
     readonly amount: string;
     readonly period?: string;
+    /** Shown before the amount, e.g. "from" when prices differ per provider. */
+    readonly prefix?: string;
 };
 export type PlanCardActionSlot = {
     readonly label: string;

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

@@ -6,7 +6,7 @@ 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: [_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("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))) }))] }));
 }
 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 }));

package/dist/web/widgets/upload-zone.js

@@ -114,6 +114,18 @@ export function UploadZone({ onUpload, title, hint, accept, multiple = true, cap
         if (row.value !== undefined)
             onRemove?.(row.value);
     }
+    // Values the owner already held before any upload of this zone (editing a record with files).
+    // Hidden while an upload runs: its value reaches `doneValues` one render before its row is done.
+    const uploading = rows.some((row) => row.status === "uploading");
+    const existingRows = doneValues === undefined || uploading
+        ? []
+        : doneValues
+            .filter((value) => !rows.some((row) => row.value === value))
+            .map((value) => ({ id: `existing:${value}`, fileName: value, status: "done", value }));
+    const visibleRows = [
+        ...existingRows,
+        ...rows.filter((row) => row.value === undefined || doneValues === undefined || doneValues.includes(row.value)),
+    ];
     const acceptAttr = toAcceptAttr(accept);
     return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-4", children: [_jsxs("label", { htmlFor: inputId, onDragOver: (e) => {
                     e.preventDefault();
@@ -123,9 +135,5 @@ export function UploadZone({ onUpload, title, hint, accept, multiple = true, cap
                     if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
                         setDragOver(false);
                     }
-                }, onDrop: handleDrop, "data-testid": testId !== undefined ? `${testId}-dropzone` : undefined, className: cn("flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", dragOver ? "border-primary bg-muted/40" : "border-border", disabled === true && "cursor-not-allowed opacity-50"), children: [_jsx(Upload, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-sm", children: title }), hint !== undefined && _jsx("span", { className: "text-sm text-muted-foreground", children: hint }), _jsx("input", { ref: inputRef, id: inputId, type: "file", multiple: multiple, className: "sr-only", "data-testid": testId !== undefined ? `${testId}-input` : undefined, disabled: disabled, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => void uploadFiles(e.target.files) })] }), rows.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: rows
-                    .filter((row) => row.value === undefined ||
-                    doneValues === undefined ||
-                    doneValues.includes(row.value))
-                    .map((row) => (_jsxs("li", { "data-testid": testId !== undefined ? `${testId}-row` : undefined, className: "flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm", children: row.fileName })] }), _jsxs("output", { className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground", children: [STATUS_ICON[row.status], _jsx("span", { className: "sr-only", children: t(STATUS_LABEL_KEY[row.status]) }), row.status === "error" && row.error !== undefined && _jsx("span", { children: row.error }), row.value !== undefined && onRemove !== undefined && disabled !== true && (_jsx("button", { type: "button", className: "rounded-sm p-0.5 text-muted-foreground hover:text-foreground", "aria-label": t("kumiko.widget.upload.remove"), "data-testid": testId !== undefined ? `${testId}-remove` : undefined, onClick: () => removeRow(row), children: _jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }))] })] }, row.id))) }))] }));
+                }, onDrop: handleDrop, "data-testid": testId !== undefined ? `${testId}-dropzone` : undefined, className: cn("flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", dragOver ? "border-primary bg-muted/40" : "border-border", disabled === true && "cursor-not-allowed opacity-50"), children: [_jsx(Upload, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-sm", children: title }), hint !== undefined && _jsx("span", { className: "text-sm text-muted-foreground", children: hint }), _jsx("input", { ref: inputRef, id: inputId, type: "file", multiple: multiple, className: "sr-only", "data-testid": testId !== undefined ? `${testId}-input` : undefined, disabled: disabled, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => void uploadFiles(e.target.files) })] }), visibleRows.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: visibleRows.map((row) => (_jsxs("li", { "data-testid": testId !== undefined ? `${testId}-row` : undefined, className: "flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm", children: row.fileName })] }), _jsxs("output", { className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground", children: [STATUS_ICON[row.status], _jsx("span", { className: "sr-only", children: t(STATUS_LABEL_KEY[row.status]) }), row.status === "error" && row.error !== undefined && _jsx("span", { children: row.error }), row.value !== undefined && onRemove !== undefined && disabled !== true && (_jsx("button", { type: "button", className: "rounded-sm p-0.5 text-muted-foreground hover:text-foreground", "aria-label": t("kumiko.widget.upload.remove"), "data-testid": testId !== undefined ? `${testId}-remove` : undefined, onClick: () => removeRow(row), children: _jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }))] })] }, row.id))) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.387.0",
+  "version": "0.389.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,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.387.0",
-    "@cosmicdrift/kumiko-types": "0.387.0",
+    "@cosmicdrift/kumiko-framework": "0.389.0",
+    "@cosmicdrift/kumiko-types": "0.389.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -92,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.387.0",
-    "@cosmicdrift/kumiko-testing": "0.387.0",
+    "@cosmicdrift/kumiko-locale-de": "0.389.0",
+    "@cosmicdrift/kumiko-testing": "0.389.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,162 @@
 [
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "DataTable view menu, remembered list state and compact density",
+    "detail": "Lists with a table block show a view menu (columns, density, reset view) and a reset-all button. Remembered query parameters are copied into the URL once; links with explicit parameters win. Compact density uses 32px rows with 4px cell padding. New keys kumiko.list.reset-all and kumiko.list.view.* in all locale packages."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "remembered column pins and widths in the list view state",
+    "detail": "useListTable passes pins, widths, minWidths and keyboardNavigation to the DataTable view options. Pins and widths live in the list-state store next to columns and density; a saved pin set replaces the schema pins, so a user can release a pinned column. New keys kumiko.list.view.pinning, kumiko.list.view.pin-left, kumiko.list.view.pin-right and kumiko.list.column.resize in all locale packages."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "DataTable resize grip, pinned focus ring and bounded widths",
+    "detail": "Column widths stay between minWidth and 2000 px, also when read back from the session. The resize grip shows on header hover and focus and carries aria-valuenow, aria-valuemin and aria-valuemax. Pinned and actions cells repeat the keyboard focus ring, and a pressed pin button is highlighted."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "Server-side groups, totals row and number range facet in the DataTable",
+    "detail": "With table.grouping the groups load via one aggregate query; each open group near the viewport loads its rows with the list query plus a group filter, page by page with \"Load more\", at most four groups at once, a collapsed group sends no query. Headers show the server count and measures, the global pager gives way in both pagination modes, and the view menu offers \"Group by\" with userChoice. table.totals renders a live footer row over the filters and search. A range facet shows from/to inputs, keeps <screenId>.f.<field>.min/.max in the URL and sends gte/lte filters, money in minor units. Infinite lists now also start over when a facet changes. New keys kumiko.list.group.*, kumiko.list.measure.*, kumiko.list.totals.label, kumiko.list.range.* and kumiko.list.notice.* in all locale packages."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "DataTable row selection and bulk run",
+    "detail": "With bulkActions the table gets a checkbox column, a header checkbox for the loaded rows (at most 100), a checkbox per card and a bar with \"n selected\" and the actions. A run sends one /api/write per row, at most 4 at a time; rows hidden by the row action's visible are skipped. Cancel stops new writes. A banner shows succeeded, failed, skipped and not run; failed and not-run rows stay selected and the list reloads. With table.keyboardNavigation, Space toggles the focused row. New keys kumiko.list.bulk.* in all locale packages."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "entityList writeHandler row actions keep display",
+    "detail": "entityList built its writeHandler row actions inline and dropped display; it now uses the same builder as projection and related lists."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "Export button in the DataTable toolbar",
+    "detail": "Lists with table.export show an Export button next to the view menu. It exports the current search, sort and facets with the visible columns in their order and shows a hint when the list exceeds the row limit. New keys kumiko.list.export, kumiko.list.export-busy, kumiko.list.export-too-many and kumiko.list.export-failed in all locale packages."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "All primary toolbar actions move into the list page header",
+    "detail": "Previously at most one primary toolbar action was promoted, and only when the list had no create button. Now every primary action without a confirm dialog sits in the page header, left of the create button (which stays rightmost), in declaration order. Promoted actions no longer appear in the list toolbar. On phones they become entries of the header overflow menu when a create button is present, so the create button keeps its place."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "renderer { format: \"file\", previewOpenByDefault: true } opens the first PDF preview",
+    "detail": "FileValueList takes a previewOpenByDefault prop, set declaratively through the file renderer spec, so the inline preview of the first file starts open. The preview is only mounted for PDFs. Without the option the toggle behaves as before."
+  },
+  {
+    "version": "0.389.0",
+    "type": "breaking",
+    "title": "DataTable rowGrouping removed",
+    "detail": "The client-side rowGrouping prop and the DataTableRowGrouping type are removed from the DataTable contract; grouping runs only through serverGroups. A custom DataTable primitive drops its rowGrouping handling.",
+    "migration": "delete rowGrouping from custom DataTable primitives and their callers; group lists through table.grouping on the screen"
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "Totals row keeps its leading cells pinned",
+    "detail": "With pinned columns, the empty totals cells under the checkbox and expand columns stick to the left like the cells above them, and the cell under the actions column sticks to the right with the same background."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "Success message resolves reference labels by id",
+    "detail": "resolveSuccessMessageParams requests the chosen record by id, so a tenant picked in a tier-admin form with more than 200 tenants is named in the success message instead of showing its raw id. Sources that ignore both inputs keep the previous capped-list behaviour."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "Locked fallback chains show the rendered screen in the header",
+    "detail": "When a screen with visibleWhen falls back to another screen that is locked too, the page header and breadcrumb now name the screen that actually renders instead of the locked intermediate fallback."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "Provider forms stay usable without secrets access",
+    "detail": "The merged provider form (config keys plus secrets) previously showed only an error banner if the viewer was denied the secrets list. Now the secret fields are left out and host, port, sender and provider choice can still be saved."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "PDF previews keep their document while mounted",
+    "detail": "createBoundedLoadCache now returns { load, retain }. PdfPreview retains its document while mounted, and the cache evicts only unused entries, so a fifth document no longer destroys one that is still rendered."
+  },
+  {
+    "version": "0.389.0",
+    "type": "fix",
+    "title": "Leave guard keeps the history clean on Back and Forward",
+    "detail": "Confirming the leave dialog after a browser Back or Forward now uses history.back(), so the target is no longer duplicated in the history stack. Popstate events that arrive while a leave request is open restore the URL and leave the open dialog untouched."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "basePath option for createKumikoApp and the auth pages",
+    "detail": "createKumikoApp accepts basePath. The default auth pages gate matches its paths below the prefix, and the login screen builds its default forgot-password and unlock hrefs with it, so mail links to /admin/unlock-account no longer end on the login screen. New exports BasePathProvider, useBasePath, normalizeBasePath, stripBasePath and prependBasePath."
+  },
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "secrets-denied test fixture without a cast",
+    "detail": "The fixture's field map already fits the annotated ConfigEditScreenDefinition, so the cast and its marker are gone. No runtime change."
+  },
+  {
+    "version": "0.388.0",
+    "type": "improvement",
+    "title": "List view model and cell formats as tables",
+    "detail": "computeListViewModel resolves each column through an ordered list of resolvers and applyFormatSpec dispatches through a table of cell formatters. Output is unchanged; a format named like an Object.prototype member such as \"toString\" still takes the unknown-format path."
+  },
+  {
+    "version": "0.388.0",
+    "type": "fix",
+    "title": "Single-line row actions, stable form columns and select width, system-scope configEdit",
+    "detail": "Row actions never wrap onto a second line; the template overview lets long titles break and cuts the slug earlier so the table keeps room at 1280 px. In screen forms a section with explicitly declared columns (two or more) lays out as that many columns, and a select cell is as wide as a text cell instead of growing with its help text. A configEdit screen with scope system now reads the system level, so a SystemAdmin no longer sees the value of their own tenant row."
+  },
+  {
+    "version": "0.388.0",
+    "type": "fix",
+    "title": "Uniform control height in page headers and list toolbars, spacing for projectionList descriptions",
+    "detail": "Buttons in the page header (create, toolbarActions, detail actions, form actions and app-added buttons such as the AI button) and in list toolbars (search, filters, secondary actions) now share one height, independent of the size a screen or app requested. A toolbarAction promoted into the page header no longer renders smaller than the standard create button. A projectionList without a toolbar no longer glues its description to the page header. The header of a CollapsibleSection (\"Erweitert\") has the same height as the form controls next to it."
+  },
+  {
+    "version": "0.388.0",
+    "type": "breaking",
+    "title": "Input gets kind \"code\" and autoFocus on kind \"text\"",
+    "detail": "Input has a new kind \"code\" (length, onComplete, autoFocus, autoComplete defaulting to one-time-code), a single real input shown as separate cells; onComplete fires once when input, paste or autofill reaches full length and the value holds digits only. kind \"text\" gains autoFocus.",
+    "migration": "custom Input implementations (PrimitivesProvider override) with an exhaustive switch over props.kind need a case \"code\"; delegating to DefaultInput from @cosmicdrift/kumiko-renderer/web is enough"
+  },
+  {
+    "version": "0.388.0",
+    "type": "fix",
+    "title": "Renderer low-severity robustness fixes",
+    "detail": "The list search echo handling no longer mutates state during render and no longer re-sends an already sent value. A failing live refetch no longer drops a queued follow-up run. Downloaded blob URLs are revoked after a delay, failed PDF loads are retried on the next mount, the file meta cache is cleared when the app gate unmounts, and renderFlow rejects duplicate node ids and unknown icons. The es/fr/it titles of the reset-to-system action now say the tenant template is reset to the system template."
+  },
+  {
+    "version": "0.388.0",
+    "type": "fix",
+    "title": "Renderer review fixes for lookups, dropzone, markSaved, actionForm reset and dashboard gates",
+    "detail": "Reference labels show \"Unknown\" only when the lookup page was complete; a related-list column keeps sortable on fields without a sortable key; a files dropzone lists and can remove files already in the value; extension markSaved accepts the written field names, no longer clears other sections' dirty state; an actionForm with load and resetOnSuccess reloads the record before resetting; fallback panels no longer flash before the visibility gate answers; identical text blocks get unique keys; the missing-screen warning names the route id."
+  },
+  {
+    "version": "0.388.0",
+    "type": "improvement",
+    "title": "useTenantCurrency hook",
+    "detail": "The tenant currency resolution of the entity edit prefill is exported as a hook with an explicit fallback for errors and missing values and no query when no currency is needed; the mail preview uses it only for templates with a money variable."
+  },
+  {
+    "version": "0.388.0",
+    "type": "improvement",
+    "title": "ChoiceCards widget and PlanCard price prefix",
+    "detail": "ChoiceCards is a card-styled radio group (title, description, aside, native radios, keyboard operable) for exclusive choices that need more than a segment label. PlanCardPrice takes an optional prefix shown before the amount, for example \"from\"."
+  },
   {
     "version": "0.385.0",
     "type": "improvement",