@cosmicdrift/kumiko-renderer 0.392.2 → 0.394.0

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)
@@ -89,10 +92,10 @@ 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)
@@ -102,6 +105,15 @@ export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor,
             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 +122,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") {

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.392.2",
+  "version": "0.394.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,17 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.392.2",
-    "@cosmicdrift/kumiko-types": "0.392.2",
-    "@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",
+    "@cosmicdrift/kumiko-framework": "0.394.0",
+    "@cosmicdrift/kumiko-types": "0.394.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
@@ -70,7 +61,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 +83,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.392.2",
-    "@cosmicdrift/kumiko-testing": "0.392.2",
+    "@cosmicdrift/kumiko-locale-de": "0.394.0",
+    "@cosmicdrift/kumiko-testing": "0.394.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,46 @@
 [
+  {
+    "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",