@cosmicdrift/kumiko-renderer 0.383.0 → 0.384.0

package/dist/headless/format/index.js

@@ -68,11 +68,11 @@ function formatDateCell(value, type, opts) {
 // No `locale` fallback to a browser API here (headless has none) — passing
 // `undefined` to Intl.NumberFormat resolves the runtime's default locale,
 // the same value a browser's navigator.language-based guess would produce.
-function formatNumberCell(value, locale, grouping = true) {
+function formatNumberCell(value, locale, grouping = true, fractionDigits = {}) {
     if (typeof value !== "number" || !Number.isFinite(value))
         return String(value);
     try {
-        return new Intl.NumberFormat(locale, { useGrouping: grouping }).format(value);
+        return new Intl.NumberFormat(locale, { useGrouping: grouping, ...fractionDigits }).format(value);
     }
     catch {
         // Malformed BCP-47 locale tag — mirrors formatDateCell's fallback above.
@@ -152,6 +152,25 @@ function stringSpec(spec, key) {
     const v = spec[key];
     return typeof v === "string" ? v : undefined;
 }
+const MAX_FRACTION_DIGITS = 20;
+function fractionDigitSpec(spec, key) {
+    const v = spec[key];
+    return typeof v === "number" && Number.isInteger(v) && v >= 0 && v <= MAX_FRACTION_DIGITS
+        ? v
+        : undefined;
+}
+// Out-of-range or inverted options fall back to the Intl default instead of
+// throwing: a bad schema option must not crash the screen it renders in.
+function fractionDigitsSpec(spec) {
+    const min = fractionDigitSpec(spec, "minimumFractionDigits");
+    const max = fractionDigitSpec(spec, "maximumFractionDigits");
+    if (min !== undefined && max !== undefined && min > max)
+        return {};
+    return {
+        ...(min !== undefined && { minimumFractionDigits: min }),
+        ...(max !== undefined && { maximumFractionDigits: max }),
+    };
+}
 function booleanSpec(spec, key) {
     const v = spec[key];
     return typeof v === "boolean" ? v : undefined;
@@ -197,7 +216,7 @@ export function applyFormatSpec(spec, value, translate) {
         case "number":
         case "decimal":
         case "bigInt":
-            return formatNumberCell(value, stringSpec(spec, "locale"), booleanSpec(spec, "grouping") ?? true);
+            return formatNumberCell(value, stringSpec(spec, "locale"), booleanSpec(spec, "grouping") ?? true, spec.format === "bigInt" ? {} : fractionDigitsSpec(spec));
         case "unit":
             return formatUnitCell(value, stringSpec(spec, "unit"), stringSpec(spec, "locale"), unitDisplaySpec(spec));
         case "priority": {

package/dist/headless/view-model/edit.js

@@ -42,6 +42,12 @@ function computeWriteFormSectionViewModel(sectionSpec, screenId, values, transla
         ...(sectionSpec.actions !== undefined && { actions: sectionSpec.actions }),
     };
 }
+// A section whose only content is an action (a conditional field plus a delete button) stays on the screen.
+function hasVisibleContent(fields, actions, values) {
+    if (fields.some((field) => field.visible))
+        return true;
+    return (actions ?? []).some((action) => action.visible === undefined || evalFieldCondition(action.visible, values));
+}
 function wasEmptiedByWriteExclusion(declaredFieldSpecs, remainingFields) {
     return declaredFieldSpecs.length > 0 && remainingFields.length === 0;
 }
@@ -459,7 +465,7 @@ export function computeEditViewModel(input) {
         });
         // The boot-validator rejects declared-empty sections (screens.ts), but a
         // create-excluded field list can still empty one here: then `visible` is false.
-        const visible = fields.some((field) => field.visible);
+        const visible = hasVisibleContent(fields, sectionSpec.actions, values);
         // Tabs mode renders this section as its own panel, where two columns reads
         // better than the single-column default a stacked form keeps. Applies to
         // entityEdit tabs as well since fw#3134, not just projectionDetail.

package/dist/web/primitives/calendar-day-picker.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type CalendarDayPickerProps = {
+    readonly selected: Date | undefined;
+    readonly onSelect: (d: Date | undefined) => void;
+    readonly startMonth: Date;
+    readonly endMonth: Date;
+    readonly disabledMatchers: readonly ({
+        before: Date;
+    } | {
+        after: Date;
+    })[];
+};
+export default function CalendarDayPicker({ selected, onSelect, startMonth, endMonth, disabledMatchers, }: CalendarDayPickerProps): ReactNode;

package/dist/web/primitives/calendar-day-picker.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn.js";
+const dropdownSelectClass = "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm font-medium " +
+    "cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+// rdp v9's default dropdown renders an aria-hidden <span> with the same label
+// next to the <select>, hidden only by rdp's own style.css. Our token classes
+// replace that CSS, so the label showed twice; a bare <select> avoids it
+// regardless of CSS.
+function SelectDropdown({ options, className, ...selectProps }) {
+    return (_jsx("select", { className: cn(dropdownSelectClass, className), ...selectProps, children: options?.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }));
+}
+// Month/year selects come from SelectDropdown (components prop), so only the dropdowns container is styled here.
+const dayPickerClasses = {
+    root: "rdp-root",
+    months: "flex flex-col gap-2",
+    month: "flex flex-col gap-2",
+    month_caption: "flex justify-center items-center h-7 text-sm font-medium",
+    dropdowns: "flex items-center gap-1 text-sm font-medium",
+    nav: "flex items-center gap-1 absolute right-1 top-2",
+    button_previous: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+    button_next: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+    weekdays: "flex",
+    weekday: "w-8 text-xs font-normal text-muted-foreground",
+    week: "flex mt-1",
+    day: "w-8 h-8 p-0 text-sm",
+    day_button: "inline-flex h-8 w-8 items-center justify-center rounded-sm hover:bg-accent " +
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    selected: "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary/90",
+    today: "[&_button]:underline",
+    outside: "text-muted-foreground/50",
+    disabled: "text-muted-foreground/30 pointer-events-none",
+};
+export default function CalendarDayPicker({ selected, onSelect, startMonth, endMonth, disabledMatchers, }) {
+    return (_jsx(DayPicker, { mode: "single", captionLayout: "dropdown", startMonth: startMonth, endMonth: endMonth, selected: selected, 
+        // Without defaultMonth DayPicker opens on today, not on the chosen date.
+        defaultMonth: selected, ...(disabledMatchers.length > 0 && { disabled: [...disabledMatchers] }), onSelect: (d) => onSelect(d), classNames: dayPickerClasses, components: { Dropdown: SelectDropdown } }));
+}

package/dist/web/primitives/calendar-popover.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type CalendarPopoverProps = {
     readonly selected: Date | undefined;
     readonly onSelect: (d: Date | undefined) => void;

package/dist/web/primitives/calendar-popover.js

@@ -11,8 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // teilen beide dieselbe Kalender-Mechanik ohne ihre Eingabe-Form zu teilen.
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Calendar as CalendarIcon } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { lazy, Suspense } from "react";
 import { cn } from "../lib/cn.js";
+const CalendarDayPicker = lazy(() => import("./calendar-day-picker.js"));
+// Same footprint as the loaded calendar card, so opening the popover does not jump.
+const CALENDAR_PLACEHOLDER_CLASS = "h-[17rem] w-56";
 export const inFieldIconButtonClass = "absolute inset-y-0 right-0 inline-flex w-9 items-center justify-center rounded-md " +
     "text-muted-foreground transition-colors hover:text-foreground " +
     "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
@@ -35,42 +38,5 @@ export function CalendarPopover({ selected, onSelect, min, max, disabled, hasErr
         ...(min !== undefined ? [{ before: min }] : []),
         ...(max !== undefined ? [{ after: max }] : []),
     ];
-    return (_jsxs(PopoverPrimitive.Root, { children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", disabled: disabled, "aria-label": triggerLabel, "aria-invalid": hasError === true ? true : undefined, className: cn(inFieldIconButtonClass, hasError === true && "text-destructive"), children: _jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: popoverClass, align: "end", sideOffset: 4, children: _jsx(DayPicker, { mode: "single", captionLayout: "dropdown", startMonth: startMonth, endMonth: endMonth, selected: selected, 
-                        // Ohne defaultMonth zeigt DayPicker today statt selected —
-                        // unintuitiv wenn der User schon ein Datum gewählt hat.
-                        defaultMonth: selected, ...(disabledMatchers.length > 0 && { disabled: disabledMatchers }), onSelect: (d) => onSelect(d), classNames: dayPickerClasses, components: { Dropdown: SelectDropdown } }) }) })] }));
+    return (_jsxs(PopoverPrimitive.Root, { children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", disabled: disabled, "aria-label": triggerLabel, "aria-invalid": hasError === true ? true : undefined, className: cn(inFieldIconButtonClass, hasError === true && "text-destructive"), children: _jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { className: popoverClass, align: "end", sideOffset: 4, children: _jsx(Suspense, { fallback: _jsx("div", { className: CALENDAR_PLACEHOLDER_CLASS, "aria-hidden": "true" }), children: _jsx(CalendarDayPicker, { selected: selected, onSelect: onSelect, startMonth: startMonth, endMonth: endMonth, disabledMatchers: disabledMatchers }) }) }) })] }));
 }
-const dropdownSelectClass = "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm font-medium " +
-    "cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
-// rdp v9s Default-Dropdown rendert NEBEN dem <select> ein aria-hidden
-// <span> mit demselben Label — sichtbar nur, wenn rdps eigene style.css
-// das <select> transparent darüberlegt. Da wir die rdp-Klassen mit eigenen
-// Tokens überschreiben, greift diese Positionierung nicht → Label doppelt
-// (#369-Folgebug). Ein nacktes <select> ohne Begleit-Span vermeidet das
-// CSS-unabhängig — eine Quelle für den sichtbaren Wert.
-function SelectDropdown({ options, className, ...selectProps }) {
-    return (_jsx("select", { className: cn(dropdownSelectClass, className), ...selectProps, children: options?.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }));
-}
-// classNames-Map für react-day-picker v9 — überschreibt die default-
-// Klassen mit Tailwind/shadcn-Tokens. Die Monat-/Jahr-Selects rendert
-// SelectDropdown (components-Prop), daher hier nur der dropdowns-Container.
-const dayPickerClasses = {
-    root: "rdp-root",
-    months: "flex flex-col gap-2",
-    month: "flex flex-col gap-2",
-    month_caption: "flex justify-center items-center h-7 text-sm font-medium",
-    dropdowns: "flex items-center gap-1 text-sm font-medium",
-    nav: "flex items-center gap-1 absolute right-1 top-2",
-    button_previous: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
-    button_next: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
-    weekdays: "flex",
-    weekday: "w-8 text-xs font-normal text-muted-foreground",
-    week: "flex mt-1",
-    day: "w-8 h-8 p-0 text-sm",
-    day_button: "inline-flex h-8 w-8 items-center justify-center rounded-sm hover:bg-accent " +
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-    selected: "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary/90",
-    today: "[&_button]:underline",
-    outside: "text-muted-foreground/50",
-    disabled: "text-muted-foreground/30 pointer-events-none",
-};

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

@@ -29,7 +29,7 @@ function ThumbnailChain({ fileId, variant, className, testId, }) {
     if (src === undefined) {
         return (_jsx("div", { "data-testid": testId, className: cn("bg-muted text-muted-foreground flex items-center justify-center rounded-md border", className), children: _jsx(ImageIcon, { className: "size-1/3" }) }));
     }
-    return (_jsx("img", { src: src, alt: "", "data-testid": testId, onError: () => setFailedCount((n) => n + 1), className: cn("bg-muted rounded-md border object-contain", className) }));
+    return (_jsx("img", { src: src, alt: "", loading: "lazy", decoding: "async", "data-testid": testId, onError: () => setFailedCount((n) => n + 1), className: cn("bg-muted rounded-md border object-contain", className) }));
 }
 export function FileThumbnail({ fileId, variant, className = "h-24 w-32", testId, }) {
     return (_jsx(ThumbnailChain, { fileId: fileId, variant: variant, className: className, testId: testId }, `${fileId}:${variant ?? ""}`));
@@ -42,6 +42,71 @@ function parseFileMeta(value) {
     const mimeType = "mimeType" in value && typeof value.mimeType === "string" ? value.mimeType : undefined;
     return { fileName: value.fileName, mimeType };
 }
+const META_BATCH_SIZE = 100;
+const META_CACHE_LIMIT = 500;
+const metaCache = new Map();
+let pendingMetaIds = new Map();
+function parseBatchMeta(json) {
+    const metaById = new Map();
+    if (typeof json !== "object" || json === null || !("files" in json))
+        return metaById;
+    if (!Array.isArray(json.files))
+        return metaById;
+    for (const file of json.files) {
+        const meta = parseFileMeta(file);
+        if (meta !== null && typeof file === "object" && file !== null && "id" in file) {
+            if (typeof file.id === "string")
+                metaById.set(file.id, meta);
+        }
+    }
+    return metaById;
+}
+async function fetchMetaBatch(ids, resolvers) {
+    let metaById = null;
+    try {
+        const res = await fetch(`/api/files/meta?ids=${ids.map(encodeURIComponent).join(",")}`);
+        if (res.ok)
+            metaById = parseBatchMeta(await res.json());
+    }
+    catch {
+        // skip: a failed lookup shows the fallback label, like a missing file
+    }
+    for (const id of ids) {
+        // A transport failure must not stick in the cache; an id the server left out is a final answer.
+        if (metaById === null)
+            metaCache.delete(id);
+        resolvers.get(id)?.(metaById?.get(id) ?? null);
+    }
+}
+function flushPendingMetaIds() {
+    const batch = pendingMetaIds;
+    pendingMetaIds = new Map();
+    const ids = [...batch.keys()];
+    for (let start = 0; start < ids.length; start += META_BATCH_SIZE) {
+        void fetchMetaBatch(ids.slice(start, start + META_BATCH_SIZE), batch);
+    }
+}
+function loadFileMeta(fileId) {
+    const cached = metaCache.get(fileId);
+    if (cached)
+        return cached;
+    const promise = new Promise((resolve) => {
+        if (pendingMetaIds.size === 0)
+            queueMicrotask(flushPendingMetaIds);
+        pendingMetaIds.set(fileId, resolve);
+    });
+    if (metaCache.size >= META_CACHE_LIMIT) {
+        // An id still waiting for its batch keeps its entry, or its promise would never settle.
+        for (const key of metaCache.keys()) {
+            if (pendingMetaIds.has(key))
+                continue;
+            metaCache.delete(key);
+            break;
+        }
+    }
+    metaCache.set(fileId, promise);
+    return promise;
+}
 export function useFileMeta(fileId) {
     const [meta, setMeta] = useState(null);
     const validId = isUuid(fileId);
@@ -50,13 +115,10 @@ export function useFileMeta(fileId) {
         setMeta(null);
         if (!validId)
             return;
-        fetch(`${fileOriginalUrl(fileId)}/meta`)
-            .then((res) => (res.ok ? res.json() : null))
-            .then((json) => {
+        void loadFileMeta(fileId).then((loaded) => {
             if (!cancelled)
-                setMeta(parseFileMeta(json));
-        })
-            .catch(() => { });
+                setMeta(loaded);
+        });
         return () => {
             cancelled = true;
         };

package/dist/web/primitives/index.js

@@ -4,9 +4,6 @@ import { PII_ERASED_SENTINEL } from "@cosmicdrift/kumiko-types/kms-adapter-types
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { cva } from "class-variance-authority";
 import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
-// The main entry pulls Node-only deps (yargs/pngjs) under bundlers that ignore
-// package.json#browser (Metro), hence the explicit browser subpath.
-import QRCode from "qrcode/lib/browser.js";
 import { Children, createContext, Fragment, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react";
 import { fieldIssueText } from "../../field-issue-text.js";
 import { applyFormatSpec, EMPTY_VALUE_PLACEHOLDER, isSafeHref } from "../../headless/index.js";
@@ -1971,7 +1968,11 @@ function QrSecretValue({ value }) {
     useEffect(() => {
         let cancelled = false;
         setFailed(false);
-        QRCode.toString(value, { type: "svg", errorCorrectionLevel: "H" })
+        // Loaded on first QR render, not with the primitives. The main entry pulls
+        // Node-only deps (yargs/pngjs) under bundlers that ignore package.json#browser
+        // (Metro), hence the explicit browser subpath.
+        import("qrcode/lib/browser.js")
+            .then(({ default: QRCode }) => QRCode.toString(value, { type: "svg", errorCorrectionLevel: "H" }))
             .then((result) => {
             if (!cancelled)
                 setSvg(result);

package/dist/web/tokens.js

@@ -20,7 +20,8 @@ import { DEFAULT_COLOR_SCHEME_VARIABLE } from "./default-color-scheme.js";
 // AppTheme.defaultColorScheme (CSS variable) applies, otherwise the HTML state.
 //
 // Against FOUC the host HTML also needs a synchronous inline script BEFORE
-// the stylesheet link (nonce/hash under a strict CSP):
+// the stylesheet link. Under a strict CSP its hash is the sha256 in the build's
+// csp-hashes.json, which runProdApp also hands to hostDispatch as deps.cspScriptHashes:
 //
 //   <script>try{var s=localStorage.getItem("kumiko:theme");
 //     if(s==="dark"||(s==="auto"&&matchMedia("(prefers-color-scheme: dark)").matches))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.383.0",
+  "version": "0.384.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": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.383.0",
-    "@cosmicdrift/kumiko-types": "0.383.0",
+    "@cosmicdrift/kumiko-framework": "0.384.0",
+    "@cosmicdrift/kumiko-types": "0.384.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.383.0",
-    "@cosmicdrift/kumiko-testing": "0.383.0",
+    "@cosmicdrift/kumiko-locale-de": "0.384.0",
+    "@cosmicdrift/kumiko-testing": "0.384.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,22 @@
 [
+  {
+    "version": "0.384.0",
+    "type": "fix",
+    "title": "A section with a visible action is not hidden when all its fields are",
+    "detail": "Edit and detail sections (entityEdit, projectionDetail, in every app) whose fields are all hidden by visibility conditions now stay on screen while at least one of their actions is visible. Before, such a section vanished together with its action buttons; apps that relied on that to hide a section must hide the action with its own visible condition."
+  },
+  {
+    "version": "0.384.0",
+    "type": "improvement",
+    "title": "Fraction digits for number and decimal formats",
+    "detail": "{ format: \"number\" | \"decimal\", maximumFractionDigits: 4 } renders 0.0004 as 0.0004 (de: 0,0004) instead of 0; minimumFractionDigits pads. Integers 0 to 20 with min not above max; anything else is ignored and the Intl default (3 digits) applies, so existing formats render unchanged."
+  },
+  {
+    "version": "0.384.0",
+    "type": "improvement",
+    "title": "DayPicker and QR code load on demand",
+    "detail": "The calendar popover and the QR secret value import react-day-picker and qrcode lazily, so screens without a date input or an MFA setup no longer ship them. Date popovers render their grid one tick later; tests should use findBy queries."
+  },
   {
     "version": "0.383.0",
     "type": "improvement",