@cosmicdrift/kumiko-renderer 0.387.0 → 0.388.0

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export type { CustomScreensMap, CustomScreensProviderProps } from "./app/custom-
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens.tsx";
 export type { DashboardBodyProps, DashboardBodyProviderProps } from "./app/dashboard-body.tsx";
 export { DashboardBodyProvider, useDashboardBody } from "./app/dashboard-body.tsx";
+export { type TenantCurrencyResolution, useTenantCurrency } from "./app/entity-edit-prefill.ts";
 export { type ErrorNotice, ErrorReference, errorNoticeOf } from "./app/error-reference.tsx";
 export type { ExtensionFormRegistry, ExtensionFormSubmitHandler, ExtensionSubmitContext, ExtensionSubmitResult, } from "./app/extension-form-submit.tsx";
 export { ExtensionFormRegistryProvider, useExtensionFormSubmit, } from "./app/extension-form-submit.tsx";

package/dist/index.js

@@ -17,6 +17,7 @@ export { CONTENT_EDITOR_ELEMENT_ID, ContentEditorsProvider, TextareaContentEdito
 export { ContentPreview, substituteVariables } from "./app/content-preview.js";
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens.js";
 export { DashboardBodyProvider, useDashboardBody } from "./app/dashboard-body.js";
+export { useTenantCurrency } from "./app/entity-edit-prefill.js";
 export { ErrorReference, errorNoticeOf } from "./app/error-reference.js";
 export { ExtensionFormRegistryProvider, useExtensionFormSubmit, } from "./app/extension-form-submit.js";
 export { ExtensionSectionsProvider, extensionSectionName, useExtensionSectionComponent, } from "./app/extension-sections.js";

package/dist/primitives.d.ts

@@ -203,6 +203,7 @@ export type InputProps = {
     readonly name: string;
     readonly value: string;
     readonly onChange: (v: string) => void;
+    readonly autoFocus?: boolean;
     readonly disabled?: boolean;
     readonly required?: boolean;
     readonly hasError?: boolean;
@@ -228,6 +229,24 @@ export type InputProps = {
     /** Raw keydown access (e.g. Enter-to-submit at the field instead of
      *  the surrounding Form). Forwarded to the element. */
     readonly onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+} | {
+    /** Fixed-length numeric one-time code. `onComplete` fires once when input,
+     *  paste or autofill brings the value to full length; the value holds
+     *  digits only. */
+    readonly kind: "code";
+    readonly id: string;
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly length: number;
+    readonly onComplete?: (code: string) => void;
+    readonly autoFocus?: boolean;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    readonly testId?: string;
+    /** Default "one-time-code". */
+    readonly autoComplete?: string;
 } | {
     readonly kind: "email";
     readonly id: string;

package/dist/web/app/create-app.js

@@ -6,6 +6,7 @@ import { rendererError, rendererWarn } from "../../dev-console.js";
 import { AppFeaturesProvider, ClientActionsProvider, ColumnRenderersProvider, ContentEditorsProvider, CustomScreensProvider, createSessionEndedSignal, DashboardBodyProvider, DispatcherProvider, DraftStorageProvider, ErrorBoundary, ExtensionSectionsProvider, hasDetailScreen, KumikoScreen, kumikoDefaultTranslations, LeaveGuardDialog, LiveEventsProvider, LocaleProvider, mergeTranslations, NavProvider, navigateWithReturnTo, PrimitivesProvider, qualifyScreenId, ScreenMissingState, SessionEndedSignalProvider, TokensProvider, toAppSchema, translationsByLocaleFromKeys, useNav, usePrimitives, useTranslation, withSessionEndedDetection, } from "../../index.js";
 import { createLiveDispatcher } from "../../live/index.js";
 import { lastSegment } from "../layout/nav-tree.js";
+import { clearFileMetaCache } from "../primitives/file-thumbnail.js";
 import { defaultPrimitives, ScreenWidthProvider } from "../primitives/index.js";
 import { ToastProvider } from "../primitives/toast.js";
 import { createEventSourceLiveEvents } from "../sse/live-events.js";
@@ -255,9 +256,13 @@ function AppSchemaBoundary({ app, screenQn, schemaUrl, navAdapter, onAppLoaded,
     onUnmountResetSchemaRef.current = onUnmountResetSchema;
     // A real unmount (the gate withdrawing children, e.g. on logout) resets
     // the schema so the next mount re-fetches instead of reusing this
-    // session's — fetch-mode only, see isFetchMode in KumikoAppRoot.
+    // session's — fetch-mode only, see isFetchMode in KumikoAppRoot. The file
+    // meta cache is dropped in every mode.
     useEffect(() => {
-        return () => onUnmountResetSchemaRef.current?.();
+        return () => {
+            clearFileMetaCache();
+            onUnmountResetSchemaRef.current?.();
+        };
     }, []);
     if (app === undefined) {
         return (_jsx(AppSchemaFetchBoot, { onLoaded: onAppLoaded, ...(schemaUrl !== undefined && { schemaUrl }) }));
@@ -498,7 +503,7 @@ function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
     }, [nav]);
     if (feature === undefined || activeScreen === undefined) {
         const landingExists = findOwnerFeature(app.features, fallbackQn) !== undefined;
-        return (_jsx(ScreenMissingState, { ...(landingExists && { homeScreenId: lastSegment(fallbackQn) }), screenQn: qn }));
+        return (_jsx(ScreenMissingState, { ...(landingExists && { homeScreenId: lastSegment(fallbackQn) }), screenQn: nav.route?.screenId ?? qn }));
     }
     // KumikoScreen takes a single-feature schema: the feature owning the active screen.
     const schemaForScreen = feature;

package/dist/web/app/dashboard-body.js

@@ -140,6 +140,20 @@ function useVisibilityGateResults() {
     }, []);
     return { results, report, forget };
 }
+const NOOP_REFETCH = async () => { };
+// A gate reports through an effect, so for its first commit (and after a payload change) no
+// result exists yet; without a placeholder that reads as "hidden" and flashes the fallback.
+function withPendingGates(results, gateKeys) {
+    if (gateKeys.every((key) => results.has(key)))
+        return results;
+    const merged = new Map(results);
+    for (const key of gateKeys) {
+        if (!merged.has(key)) {
+            merged.set(key, { data: null, error: null, loading: true, refetch: NOOP_REFETCH });
+        }
+    }
+    return merged;
+}
 function distinctVisibilityGates(panels, screenParams) {
     const gates = new Map();
     for (const panel of panels) {
@@ -227,6 +241,8 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     const { loadedAtMs, reportLoaded } = useLoadedAt(screenParams);
     const visibilityGates = distinctVisibilityGates(screen.panels, screenParams);
     const gateResults = useVisibilityGateResults();
+    const gateKeysSignature = visibilityGates.map((gate) => gate.key).join("\n");
+    const gateResultsWithPending = useMemo(() => withPendingGates(gateResults.results, gateKeysSignature === "" ? [] : gateKeysSignature.split("\n")), [gateResults.results, gateKeysSignature]);
     // The record query is not a panel query: it needs the interval before the
     // registry context below exists, and `refresh.field` reads from its own row.
     const [refreshIntervalMs, setRefreshIntervalMs] = useState(() => resolveRefreshIntervalMs(screen.refresh, null));
@@ -271,7 +287,7 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     // The shell header owns the title; the badge and the actions sit in it there.
     const badgeInHeader = scopeBadge !== null && usesPageHeaderSlot;
     const showPageHeader = usesPageHeaderSlot && (badgeInHeader || recordTitle !== undefined || headerActionsBar !== null);
-    return (_jsx(PanelLoadedContext.Provider, { value: reportLoaded, children: _jsx(DashboardQueryContext.Provider, { value: queryRuntime, children: _jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [showPageHeader && (_jsx(PageHeader, { ...(recordTitle !== undefined && { title: recordTitle }), ...(badgeInHeader && { status: scopeBadge }), ...(headerActionsBar !== null && { actions: headerActionsBar }) })), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [!usesPageHeaderSlot && recordTitle !== undefined && (_jsx(Heading, { variant: "page", testId: `dashboard-${screen.id}-record-title`, children: recordTitle })), !badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [!usesPageHeaderSlot && headerActionsBar, screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), recordQuery.error !== null && recordRow === null && (_jsxs("div", { role: "alert", "data-testid": `dashboard-${screen.id}-record-error`, className: "flex flex-col items-start gap-2 text-sm", children: [_jsx("span", { className: "text-status-bad", children: dispatcherErrorText(recordQuery.error, t) }), _jsx(Button, { variant: "secondary", onClick: () => void refetchRecord(), children: t("kumiko.dashboard.panel.error.retry") })] })), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsxs(VisibilityQueryContext.Provider, { value: gateResults.results, children: [_jsx(VisibilityGateQueries, { gates: visibilityGates, onResult: gateResults.report, onForget: gateResults.forget }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
+    return (_jsx(PanelLoadedContext.Provider, { value: reportLoaded, children: _jsx(DashboardQueryContext.Provider, { value: queryRuntime, children: _jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [showPageHeader && (_jsx(PageHeader, { ...(recordTitle !== undefined && { title: recordTitle }), ...(badgeInHeader && { status: scopeBadge }), ...(headerActionsBar !== null && { actions: headerActionsBar }) })), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [!usesPageHeaderSlot && recordTitle !== undefined && (_jsx(Heading, { variant: "page", testId: `dashboard-${screen.id}-record-title`, children: recordTitle })), !badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [!usesPageHeaderSlot && headerActionsBar, screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] })), recordQuery.error !== null && recordRow === null && (_jsxs("div", { role: "alert", "data-testid": `dashboard-${screen.id}-record-error`, className: "flex flex-col items-start gap-2 text-sm", children: [_jsx("span", { className: "text-status-bad", children: dispatcherErrorText(recordQuery.error, t) }), _jsx(Button, { variant: "secondary", onClick: () => void refetchRecord(), children: t("kumiko.dashboard.panel.error.retry") })] })), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsxs(VisibilityQueryContext.Provider, { value: gateResultsWithPending, children: [_jsx(VisibilityGateQueries, { gates: visibilityGates, onResult: gateResults.report, onForget: gateResults.forget }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
                                     if (panel.kind === "screen") {
                                         return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: effectiveTranslate }, panel.id));
                                     }

package/dist/web/app/dashboard-panels.js

@@ -311,7 +311,7 @@ function TextBlockView({ block, translate, }) {
                     ? "text-sm font-medium text-foreground"
                     : "text-sm text-muted-foreground", children: translate(block.text) }));
         case "list":
-            return (_jsx("ul", { "data-block": "list", className: "list-disc space-y-1 pl-5 text-sm text-muted-foreground", children: block.items.map((item) => (_jsx("li", { children: translate(item) }, item))) }));
+            return (_jsx("ul", { "data-block": "list", className: "list-disc space-y-1 pl-5 text-sm text-muted-foreground", children: withOccurrenceKeys(block.items, (item) => item).map(({ entry, key }) => (_jsx("li", { children: translate(entry) }, key))) }));
         case "code":
             return (_jsx("pre", { "data-block": "code", className: "overflow-x-auto rounded-md bg-muted p-3 text-xs", children: _jsx("code", { children: block.code }) }));
         case "hint":
@@ -330,6 +330,16 @@ function TextBlockLink({ block, translate, }) {
     const target = { screenId: lastSegment(block.screen) };
     return (_jsx(Link, { href: nav.hrefFor(target), onPress: () => nav.navigate(target), testId: `dashboard-text-link-${target.screenId}`, children: translate(block.text) }));
 }
+// Content-derived keys collide for identical entries; the occurrence count keeps them unique.
+function withOccurrenceKeys(entries, contentKey) {
+    const seen = new Map();
+    return entries.map((entry) => {
+        const content = contentKey(entry);
+        const occurrence = seen.get(content) ?? 0;
+        seen.set(content, occurrence + 1);
+        return { entry, key: `${content}#${occurrence}` };
+    });
+}
 function textBlockKey(block) {
     switch (block.kind) {
         case "list":
@@ -341,7 +351,7 @@ function textBlockKey(block) {
     }
 }
 export function TextPanelBody({ panel, label, translate, }) {
-    const blocks = (_jsx("div", { className: "flex flex-col gap-3", children: panel.blocks.map((block) => (_jsx(TextBlockView, { block: block, translate: translate }, textBlockKey(block)))) }));
+    const blocks = (_jsx("div", { className: "flex flex-col gap-3", children: withOccurrenceKeys(panel.blocks, textBlockKey).map(({ entry, key }) => (_jsx(TextBlockView, { block: entry, translate: translate }, key))) }));
     const testId = `dashboard-panel-${panel.id}`;
     if (label !== undefined) {
         return (_jsx(PanelShell, { testId: testId, title: label, children: blocks }));

package/dist/web/index.d.ts

@@ -75,4 +75,4 @@ export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from
 export type { KumikoBuild } from "./version/update-checker.tsx";
 export { readLoadedBuild } from "./version/update-checker.tsx";
 export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, ModeSwitchVariant, NumberFieldProps, PdfPreviewSource, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardLinkSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesHeight, TimeseriesPoint, TimeseriesReferenceLine, TimeseriesXAxis, TimeseriesYAxis, UploadZoneProps, } from "./widgets/index.ts";
-export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.ts";
+export { AiTextArea, AiTextField, BooleanField, ChoiceCards, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.ts";

package/dist/web/index.js

@@ -50,4 +50,4 @@ export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi,
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.js";
 export { readLoadedBuild } from "./version/update-checker.js";
-export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";
+export { AiTextArea, AiTextField, BooleanField, ChoiceCards, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";

package/dist/web/layout/shell-header.js

@@ -19,6 +19,7 @@ import { HeaderOverflowMenuContext, headerOverflowMenuItemClass } from "./header
 import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree.js";
 import { usePageHeaderSlot } from "./page-header-slot.js";
 import { resolveDetailBreadcrumb, screenTitleKey, } from "./shell-breadcrumb.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "./uniform-bar-controls.js";
 export function ShellHeader({ schema, user, headerActions, }) {
     const nav = useNav();
     const t = useTranslation();
@@ -68,7 +69,7 @@ export function ShellHeader({ schema, user, headerActions, }) {
                                                     e.preventDefault();
                                                     nav.navigate({ screenId });
                                                 }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", title: titleOverride ?? crumb.label, className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
-                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn("flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
+                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn(UNIFORM_BAR_CONTROLS_CLASSES, "flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
 }
 // A hand-rolled menu instead of Radix DropdownMenu: app headerActions are opaque
 // nodes with their own popovers, and the panel stays mounted while closed so their

package/dist/web/layout/uniform-bar-controls.d.ts

@@ -0,0 +1 @@
+export declare const UNIFORM_BAR_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-9 [&_[data-slot=input]]:h-9";

package/dist/web/layout/uniform-bar-controls.js

@@ -0,0 +1,4 @@
+// Header and toolbar controls share one height whatever size a screen, app or
+// primitive asked for: the descendant selector outranks the button's own
+// size utilities. Icon-only buttons keep their square size.
+export const UNIFORM_BAR_CONTROLS_CLASSES = "[&_[data-slot=button]:not([data-size^=icon])]:h-9 [&_[data-slot=input]]:h-9";

package/dist/web/lib/file-ref-download.js

@@ -37,6 +37,9 @@ export async function fetchFileRefBlob(fileRefId) {
         fileName: fileNameFromContentDisposition(res.headers.get("content-disposition")),
     };
 }
+// The browser starts the download after click() returns; Safari and some
+// Firefox versions fail it when the blob URL is already revoked.
+const OBJECT_URL_REVOKE_DELAY_MS = 40_000;
 export function saveBlobAsFile(fileName, blob, options) {
     const payload = options?.bom === true ? new Blob([UTF8_BOM, blob], { type: blob.type }) : blob;
     const url = URL.createObjectURL(payload);
@@ -53,7 +56,7 @@ export function saveBlobAsFile(fileName, blob, options) {
         }
     }
     finally {
-        URL.revokeObjectURL(url);
+        setTimeout(() => URL.revokeObjectURL(url), OBJECT_URL_REVOKE_DELAY_MS);
     }
 }
 export async function downloadFileRef(fileRefId, options) {

package/dist/web/primitives/action-menu.js

@@ -23,7 +23,7 @@ export function ActionMenu({ trigger, triggerLabel, items, align = "end", minWid
                         return _jsx(DropdownMenuSeparator, {}, `sep-${idx}`);
                     }
                     if (item.kind === "label") {
-                        // biome-ignore lint/suspicious/noArrayIndexKey: Separators have no ID, so their position provides identity
+                        // biome-ignore lint/suspicious/noArrayIndexKey: labels have no ID either, so their position provides identity
                         return _jsx(DropdownMenuLabel, { children: item.label }, `label-${idx}`);
                     }
                     return (_jsxs(DropdownMenuItem, { onSelect: item.onSelect, disabled: item.disabled === true, "data-testid": `action-menu-item-${item.id}`, className: item.variant === "danger" ? "text-destructive focus:text-destructive" : undefined, children: [item.icon !== undefined && _jsx("span", { className: "size-4 shrink-0", children: item.icon }), _jsx("span", { className: "flex-1", children: item.label }), item.shortcut !== undefined && (_jsx("span", { className: "ml-auto text-xs text-muted-foreground tracking-wider font-mono", children: item.shortcut }))] }, item.id));

package/dist/web/primitives/code-input.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import type { InputProps } from "../../index.ts";
+export type CodeInputProps = Extract<InputProps, {
+    readonly kind: "code";
+}>;
+export declare function CodeInput(props: CodeInputProps): ReactNode;

package/dist/web/primitives/code-input.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../lib/cn.js";
+import { FieldDescriptionContext } from "./contexts.js";
+import { useFocusOnMount } from "./use-focus-on-mount.js";
+const MIN_LENGTH_FOR_SEPARATOR = 6;
+export function CodeInput(props) {
+    const { length, value, hasError, disabled } = props;
+    const describedBy = useContext(FieldDescriptionContext);
+    const inputRef = useFocusOnMount(props.autoFocus);
+    const activeIndex = Math.min(value.length, length - 1);
+    const hasSeparator = length >= MIN_LENGTH_FOR_SEPARATOR && length % 2 === 0;
+    const handleChange = (e) => {
+        const next = e.target.value.replace(/\D/g, "").slice(0, length);
+        props.onChange(next);
+        if (next.length === length && next !== value)
+            props.onComplete?.(next);
+    };
+    const cells = [];
+    for (let index = 0; index < length; index++) {
+        const isActive = index === activeIndex;
+        const char = value[index];
+        if (hasSeparator && index === length / 2) {
+            cells.push(_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-muted-foreground", children: "\u2013" }, "separator"));
+        }
+        cells.push(_jsxs("div", { "data-active": isActive, "aria-hidden": "true", className: cn("flex h-12 min-w-0 flex-1 items-center justify-center rounded-md border border-input bg-transparent text-xl font-semibold tabular-nums shadow-xs transition-[color,box-shadow] dark:bg-input/30", hasError === true && "border-destructive", "data-[active=true]:group-focus-within:ring-[3px]", hasError === true
+                ? "data-[active=true]:group-focus-within:border-destructive data-[active=true]:group-focus-within:ring-destructive/20 dark:data-[active=true]:group-focus-within:ring-destructive/40"
+                : "data-[active=true]:group-focus-within:border-ring data-[active=true]:group-focus-within:ring-ring/50"), children: [char, isActive && char === undefined ? (_jsx("span", { className: "hidden h-6 w-px animate-pulse bg-foreground group-focus-within:block" })) : null] }, index));
+    }
+    return (_jsxs("div", { className: cn("group relative flex w-full items-center gap-2", disabled === true && "cursor-not-allowed opacity-50"), children: [cells, _jsx("input", { ref: inputRef, type: "text", id: props.id, name: props.name, value: value, onChange: handleChange, disabled: disabled, inputMode: "numeric", autoComplete: props.autoComplete ?? "one-time-code", spellCheck: false, "data-testid": props.testId, "aria-describedby": describedBy, "aria-required": props.required, "aria-invalid": hasError === true ? true : undefined, className: "absolute inset-0 h-full w-full bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent" })] }));
+}

package/dist/web/primitives/data-table.js

@@ -3,6 +3,7 @@ import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, Search, SlidersHorizontal, X, } from "lucide-react";
 import { Fragment, useId, useState, } from "react";
 import { useOptionalLocale, useOptionalTranslation } from "../../index.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "../layout/uniform-bar-controls.js";
 import { cn } from "../lib/cn.js";
 import { Button as UiButton } from "../ui/button.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
@@ -268,11 +269,11 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
                 ? screenPaddingClassName
                 : screenPadding === false
                     ? undefined
-                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", fillsHeight
+                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", UNIFORM_BAR_CONTROLS_CLASSES, fillsHeight
                     ? isNarrow
                         ? "shrink-0 gap-2 p-3"
                         : "min-h-13 shrink-0 gap-2 px-6 py-2 md:py-0"
                     : "gap-3"), children: [toolbarStart !== undefined && (_jsxs("div", { className: cn(fillsHeight
-                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11 md:[&_input]:h-8"
-                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6")), children: toolbarDescription })), content] }));
+                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11"
+                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6"), fillsHeight && !hasToolbar && "pt-4"), children: toolbarDescription })), content] }));
 }

package/dist/web/primitives/facet-filter.js

@@ -26,7 +26,7 @@ export function FacetFilter({ facet, selected, onChange, dense = false, }) {
     if (facet.chips !== undefined) {
         return _jsx(FacetChips, { facet: facet, selected: selected, onChange: onChange });
     }
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "h-8 border-border-strong px-2.5 max-md:h-11"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "border-border-strong px-2.5"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
 }
 // Time-range filter: two native <input type="date"> instead of a
 // dropdown — the browser supplies the calendar, the locale and the keyboard

package/dist/web/primitives/file-thumbnail.d.ts

@@ -12,6 +12,9 @@ type FileMeta = {
     readonly fileName: string;
     readonly mimeType: string | undefined;
 };
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export declare function clearFileMetaCache(): void;
 export declare function useFileMeta(fileId: string): FileMeta | null;
 export declare function FileNameLink({ fileId, fallbackLabel, className, }: {
     readonly fileId: string;

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

@@ -46,6 +46,11 @@ const META_BATCH_SIZE = 100;
 const META_CACHE_LIMIT = 500;
 const metaCache = new Map();
 let pendingMetaIds = new Map();
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export function clearFileMetaCache() {
+    metaCache.clear();
+}
 function parseBatchMeta(json) {
     const metaById = new Map();
     if (typeof json !== "object" || json === null || !("files" in json))

package/dist/web/primitives/input.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Input as UiInput } from "../ui/input.js";
 import { Switch } from "../ui/switch.js";
 import { Textarea } from "../ui/textarea.js";
+import { CodeInput } from "./code-input.js";
 import { ComboboxInput } from "./combobox.js";
 import { DateInput } from "./date-input.js";
 import { FileUploadInput } from "./file-upload.js";
@@ -15,6 +16,7 @@ import { NumberInput } from "./number-input.js";
 import { hasDescriptionOrGroup } from "./option-groups.js";
 import { TimestampInput } from "./timestamp-input.js";
 import { TzInput } from "./tz-input.js";
+import { useFocusOnMount } from "./use-focus-on-mount.js";
 import "../react-css-custom-properties.js";
 import { FieldDescriptionContext, FieldLayoutContext } from "./contexts.js";
 import { defaultSelectPresentation, FIELD_ICON_CLASS, fieldIconFor, RadioListSelect, SegmentedSelect, textareaMinHeight, unitSuffixId, withFieldIcon, withInlineDisabledHint, withInputAddons, withoutSegmentedSelectPlaceholder, withTrailingAction, } from "./field.js";
@@ -23,6 +25,7 @@ export function DefaultInput(props) {
     // themselves, no manual border-destructive needed anymore.
     const booleanLayout = useContext(FieldLayoutContext);
     const describedBy = useContext(FieldDescriptionContext);
+    const textInputRef = useFocusOnMount(props.kind === "text" ? props.autoFocus : undefined);
     const common = {
         id: props.id,
         name: props.name,
@@ -33,7 +36,9 @@ export function DefaultInput(props) {
     };
     switch (props.kind) {
         case "text":
-            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+        case "code":
+            return _jsx(CodeInput, { ...props });
         case "email":
             return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
         case "month":

package/dist/web/primitives/layout-elements.js

@@ -61,7 +61,7 @@ const FIELD_CELL_WIDTH_CLASS = {
     money: "w-40 shrink-0 [&_label]:whitespace-nowrap",
     date: "w-full sm:w-[200px]",
     timestamp: "w-full sm:w-[328px]",
-    select: "w-full sm:w-auto sm:min-w-[200px] sm:has-[[data-radio-list]]:w-full",
+    select: "w-full sm:w-60 sm:has-[[data-radio-list]]:w-full",
     full: "w-full",
     // self-start: the label shares the top line with neighbouring labels. The
     // switch (1.15rem) gets (h-9 input − switch) / 2 margin to sit on the input line.
@@ -75,7 +75,8 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
     if (list === true) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
     }
-    if (flow === true) {
+    const declaresColumns = typeof columns === "number" && columns >= 2;
+    if (flow === true && (insideDrawerBody || !declaresColumns)) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("flex gap-4", insideDrawerBody
                 ? "flex-col items-start"
                 : // items-end aligns inputs when labels wrap to different heights; a
@@ -116,12 +117,13 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
             overflowY: "auto",
         }),
     };
-    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
+    return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", flow === true &&
+            "items-end has-[[data-appendix-below]]:items-start has-[[role=alert]]:items-start"), style: style, children: children }));
 }
 export function DefaultGridCell({ span, width, children }) {
     const insideDrawerBody = useContext(DrawerBodyContext);
     if (width !== undefined) {
-        return (_jsx("div", { className: cn("min-w-0 max-w-full", insideDrawerBody
+        return (_jsx("div", { className: cn("min-w-0 max-w-full", width === "full" && "sm:[grid-column:1/-1]", insideDrawerBody
                 ? (DRAWER_FIELD_CELL_WIDTH_CLASS[width] ?? FIELD_CELL_WIDTH_CLASS[width])
                 : FIELD_CELL_WIDTH_CLASS[width]), children: children }));
     }

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 @@
-export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void): (key: string, load: () => Promise<T>) => Promise<T>;
+export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void, shouldKeep?: (value: T) => boolean): (key: string, load: () => Promise<T>) => Promise<T>;

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

@@ -1,6 +1,8 @@
 // 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) {
+// so several documents on one page keep their own loading tasks alive. A
+// resolved value that `shouldKeep` rejects (a handled failure) is dropped so
+// the next mount retries.
+export function createBoundedLoadCache(max, dispose, shouldKeep = () => true) {
     const entries = new Map();
     return (key, load) => {
         const cached = entries.get(key);
@@ -9,10 +11,14 @@ export function createBoundedLoadCache(max, dispose) {
         const loading = load();
         entries.set(key, loading);
         // A failed load must not stick: the next mount retries instead of replaying the rejection.
-        loading.catch(() => {
+        const forget = () => {
             if (entries.get(key) === loading)
                 entries.delete(key);
-        });
+        };
+        loading.then((value) => {
+            if (!shouldKeep(value))
+                forget();
+        }, forget);
         if (entries.size > max) {
             const [oldestKey, oldest] = entries.entries().next().value ?? [];
             if (oldestKey !== undefined && oldest !== undefined) {

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))) }));
 }