@cosmicdrift/kumiko-renderer 0.332.0 → 0.334.0

package/dist/app/config-edit-shim.d.ts

@@ -1,4 +1,5 @@
 import type { ConfigEditScreenDefinition, EntityDefinition, EntityEditScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import * as z from "zod";
 /** Baut eine minimale EntityDefinition aus den Inline-Fields des
  *  ConfigEdit-Screens. RenderEdit + computeEditViewModel iterieren
  *  über entity.fields zur Render-Zeit; alle weiteren EntityDefinition-
@@ -9,3 +10,9 @@ export declare function synthesizeConfigEditEntity(fields: ConfigEditScreenDefin
  *  damit der Type-Constraint hält; entity wird auf den Pseudo-Namen
  *  gepinnt — RenderEdit liest das Feld nicht. */
 export declare function synthesizeConfigEditScreen(screen: ConfigEditScreenDefinition): EntityEditScreenDefinition;
+/** Client-side range check for number keys with declared bounds, so an
+ *  out-of-range value surfaces on its field instead of as the server's
+ *  form-level "Validation failed." banner. Only bounds: required/format stay
+ *  server-authoritative like in buildFormSchema. `.passthrough()` keeps every
+ *  form key visible to the superRefine. */
+export declare function buildConfigEditSchema(fields: ConfigEditScreenDefinition["fields"]): z.ZodType;

package/dist/app/config-edit-shim.js

@@ -12,6 +12,8 @@
 // zukünftiger Boot-Validator die schema.entities-Map cross-referenziert,
 // brechen die Type-Lies hier silent. Dann ist Zeit für eine echte
 // RenderConfigEdit-Komponente die direkt fields nimmt.
+import { I18N_KEY_PARAM } from "@cosmicdrift/kumiko-headless";
+import * as z from "zod";
 const CONFIG_EDIT_PSEUDO_ENTITY = "__config-edit__";
 /** Baut eine minimale EntityDefinition aus den Inline-Fields des
  *  ConfigEdit-Screens. RenderEdit + computeEditViewModel iterieren
@@ -35,3 +37,40 @@ export function synthesizeConfigEditScreen(screen) {
         ...(screen.access !== undefined && { access: screen.access }),
     };
 }
+/** Client-side range check for number keys with declared bounds, so an
+ *  out-of-range value surfaces on its field instead of as the server's
+ *  form-level "Validation failed." banner. Only bounds: required/format stay
+ *  server-authoritative like in buildFormSchema. `.passthrough()` keeps every
+ *  form key visible to the superRefine. */
+export function buildConfigEditSchema(fields) {
+    return z
+        .object({})
+        .passthrough()
+        .superRefine((values, ctx) => {
+        // @cast-boundary form-values
+        const record = values;
+        for (const [name, field] of Object.entries(fields)) {
+            if (field.type !== "number")
+                continue;
+            const value = record[name];
+            if (typeof value !== "number" || !Number.isFinite(value))
+                continue;
+            if (field.min !== undefined && value < field.min) {
+                ctx.addIssue({
+                    code: "custom",
+                    minimum: field.min,
+                    params: { [I18N_KEY_PARAM]: "kumiko.validation.number.min" },
+                    path: [name],
+                });
+            }
+            if (field.max !== undefined && value > field.max) {
+                ctx.addIssue({
+                    code: "custom",
+                    maximum: field.max,
+                    params: { [I18N_KEY_PARAM]: "kumiko.validation.number.max" },
+                    path: [name],
+                });
+            }
+        }
+    });
+}

package/dist/app/facet-count-bridge.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type FacetCountQuery = {
+    readonly key: string;
+    readonly payload: Readonly<Record<string, unknown>>;
+};
+export declare function FacetCountBridges({ queryType, queries, onCount, }: {
+    readonly queryType: string;
+    readonly queries: readonly FacetCountQuery[];
+    readonly onCount: (key: string, count: number) => void;
+}): ReactNode;

package/dist/app/facet-count-bridge.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// One invisible bridge per facet chip, mirroring ReferenceFacetBridges — the
+// chip count varies per screen, so useQuery can't be called in a loop. Each
+// bridge asks the list query for a single row plus `total`.
+// ponytail: one extra list query per chip, refetched on every list
+// invalidation; a server-side facet-count handler replaces this if it hurts.
+import { useEffect } from "react";
+import { useQuery } from "../hooks/use-query.js";
+function FacetCountBridge({ countKey, queryType, payload, onCount, }) {
+    const result = useQuery(queryType, payload);
+    const total = result.data?.total;
+    useEffect(() => {
+        if (total !== undefined)
+            onCount(countKey, total);
+    }, [total, countKey, onCount]);
+    return null;
+}
+export function FacetCountBridges({ queryType, queries, onCount, }) {
+    return (_jsx(_Fragment, { children: queries.map((query) => (_jsx(FacetCountBridge, { countKey: query.key, queryType: queryType, payload: query.payload, onCount: onCount }, query.key))) }));
+}

package/dist/app/kumiko-screen.js

@@ -1,14 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { evalFieldCondition, isWriteFormEditSection, metricField, parseRefTarget, } from "@cosmicdrift/kumiko-framework/ui-types";
-import { computeRelatedListSectionViewModel, fieldLabelKey, fieldOptionLabelKey, isSafeHref, } from "@cosmicdrift/kumiko-headless";
+import { buildOptionLabels, computeRelatedListSectionViewModel, fieldLabelKey, fieldOptionLabelKey, isSafeHref, } from "@cosmicdrift/kumiko-headless";
 import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
 import { TENANT_CURRENCY_CONFIG_KEY } from "@cosmicdrift/kumiko-types/fields";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { QueryOptionLabel, resolveOptionsQueryPayload, } from "../components/query-options-select.js";
 import { extractCreatedId, extractIdField } from "../components/reference-create-dialog.js";
 import { RenderEdit, resolveRecordTitle, } from "../components/render-edit.js";
 import { needsActionConfirm, RenderEditActionButton, RenderEditActionConfirmDialog, } from "../components/render-edit-action-button.js";
 import { RenderList } from "../components/render-list.js";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context.js";
+import { useIsEmbeddedScreen } from "../context/embedded-screen-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { PAGE_SIZE_OPTIONS, useListUrlState } from "../hooks/use-list-url-state.js";
 import { useQuery } from "../hooks/use-query.js";
@@ -19,18 +21,20 @@ import { statusToneForOptionTone, statusToneForValue, usePrimitives, } from "../
 import { screenFillsHeight } from "../screen-fills-height.js";
 import { synthesizeActionFormEntity, synthesizeActionFormScreen } from "./action-form-shim.js";
 import { useAppFeatures } from "./app-features-context.js";
-import { synthesizeConfigEditEntity, synthesizeConfigEditScreen } from "./config-edit-shim.js";
+import { buildConfigEditSchema, synthesizeConfigEditEntity, synthesizeConfigEditScreen, } from "./config-edit-shim.js";
 import { useCustomScreenComponent } from "./custom-screens.js";
 import { useDashboardBody } from "./dashboard-body.js";
 import { EntityListExpandedRow } from "./entity-list-expanded-row.js";
+import { FacetCountBridges } from "./facet-count-bridge.js";
 import { buildFormSchema } from "./form-schema.js";
 import { layoutFieldNames } from "./layout-fields.js";
-import { buildDateRangePayload, buildFilterFacets, buildFilterPayload, clampDateRange, mergeReferenceFacetOptions, readDateRange, resolveDateRangeFacets, resolveProjectionFacetSpecs, } from "./list-facets.js";
+import { buildDateRangePayload, buildEntityFilterFacets, buildFacetCountRequests, buildFilterFacets, buildFilterPayload, clampDateRange, mergeReferenceFacetOptions, normalizeDefaultFilters, readDateRange, resolveDateRangeFacets, resolveProjectionFacetSpecs, } from "./list-facets.js";
 import { useInitialValuesHandoff, useNav } from "./nav.js";
 import { synthesizeProjectionDetailEntity, synthesizeProjectionDetailScreen, } from "./projection-detail-shim.js";
 import { synthesizeProjectionEntity, synthesizeProjectionScreen } from "./projection-list-shim.js";
 import { lastSegment, toKebab } from "./qn.js";
 import { featureNameFromQualifiedScreenId, qualifyScreenId } from "./qualify-screen-id.js";
+import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
 import { ReferenceFacetBridges } from "./reference-facet-bridge.js";
 import { navigateToReturn, navigateToReturnOr, navigateWithReturnTo, ReturnHostProvider, useReturnHost, useReturnTarget, } from "./return-to.js";
 import { buildDefaultEditRowAction, buildProjectionRowActions, buildProjectionToolbarActions, buildRecordActions, evalRowExtractor, isWriteHandlerRowAction, navigateActionSearchParams, refetchAfterWrite, runProjectionRowNavigate, } from "./row-actions.js";
@@ -319,10 +323,13 @@ function formatSummaryValue(value, locale) {
     }
     return value === null || value === undefined ? "" : String(value);
 }
+function formatSummaryParams(prefill, locale) {
+    return Object.fromEntries(Object.entries(prefill ?? {}).map(([name, value]) => [name, formatSummaryValue(value, locale)]));
+}
 function resolveActionFormSummary(summary, prefill, translate, locale) {
     if (summary === undefined)
         return undefined;
-    const params = Object.fromEntries(Object.entries(prefill ?? {}).map(([name, value]) => [name, formatSummaryValue(value, locale)]));
+    const params = formatSummaryParams(prefill, locale);
     return {
         title: translate(summary.title, params),
         ...(summary.subtitle !== undefined && { subtitle: translate(summary.subtitle, params) }),
@@ -906,6 +913,7 @@ function DrawerHost({ schema, drawerAction, drawerScreen, drawerInitialValues, u
     const { Drawer, Banner, Text, Dialog } = usePrimitives();
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
+    const locale = useLocale().locale();
     const [hasUnsavedInput, setHasUnsavedInput] = useState(false);
     const [confirmDiscardOpen, setConfirmDiscardOpen] = useState(false);
     const closeAndReset = useCallback(() => {
@@ -937,10 +945,13 @@ function DrawerHost({ schema, drawerAction, drawerScreen, drawerInitialValues, u
     // "Access denied" state KumikoScreen's top-level gate would show for a
     // direct hit on that screen, never the form.
     const allowed = screenAccessAllows(drawerScreen?.access, userRoles);
+    const titleParams = formatSummaryParams(drawerInitialValues, locale);
     return (_jsxs(_Fragment, { children: [_jsx(Drawer, { open: true, onOpenChange: (open) => {
                     if (!open)
                         requestClose();
-                }, title: effectiveTranslate(drawerAction.label), testId: `toolbar-drawer-${drawerAction.id}`, children: _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(InsideDrawerProvider, { value: true, children: drawerScreen === undefined ? (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-toolbar-drawer-not-found", children: ["Screen not found: ", _jsx(Text, { variant: "code", children: drawerAction.screen })] })) : !allowed ? (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-toolbar-drawer-access-denied", children: ["Access denied: ", _jsx(Text, { variant: "code", children: drawerAction.screen })] })) : (_jsx(ActionFormBody, { schema: schema, screen: drawerScreen, ...(translate !== undefined && { translate }), ...(drawerInitialValues !== undefined && {
+                }, title: effectiveTranslate(drawerAction.title ?? drawerAction.label, titleParams), ...(drawerAction.subtitle !== undefined && {
+                    subtitle: effectiveTranslate(drawerAction.subtitle, titleParams),
+                }), testId: `toolbar-drawer-${drawerAction.id}`, children: _jsx(PageHeaderSlotAvailableProvider, { value: false, children: _jsx(InsideDrawerProvider, { value: true, children: drawerScreen === undefined ? (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-toolbar-drawer-not-found", children: ["Screen not found: ", _jsx(Text, { variant: "code", children: drawerAction.screen })] })) : !allowed ? (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-toolbar-drawer-access-denied", children: ["Access denied: ", _jsx(Text, { variant: "code", children: drawerAction.screen })] })) : (_jsx(ActionFormBody, { schema: schema, screen: drawerScreen, ...(translate !== undefined && { translate }), ...(drawerInitialValues !== undefined && {
                                 initialOverrides: drawerInitialValues,
                             }), onSuccess: () => {
                                 setHasUnsavedInput(false);
@@ -959,6 +970,7 @@ function EntityListScreen({ schema, screen, translate, onRowClick, }) {
     return (_jsx(EntityListBody, { schema: schema, screen: screen, entity: entity, ...(translate !== undefined && { translate }), ...(onRowClick !== undefined && { onRowClick }) }));
 }
 function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
+    const isEmbeddedScreen = useIsEmbeddedScreen();
     const featureName = schema.featureName;
     const onCreate = useNavigateToCreateFor(schema, screen.entity, screen.createScreen);
     const { Banner } = usePrimitives();
@@ -974,7 +986,8 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     // damit zwei Lists auf derselben Route nicht über dieselben
     // Query-Keys streiten. Default-Sort aus der Screen-Def gewinnt nur
     // wenn URL keinen sort hat — Author-Default vs User-Choice.
-    const urlState = useListUrlState(screen.id);
+    const defaultFilters = useMemo(() => normalizeDefaultFilters(screen.defaultFilters), [screen.defaultFilters]);
+    const urlState = useListUrlState(screen.id, defaultFilters);
     const effectiveSort = urlState.sort ?? screen.defaultSort ?? null;
     const limit = urlState.pageSize ?? screen.pageSize ?? 50;
     const paginationMode = screen.pagination ?? "pages";
@@ -1109,7 +1122,30 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     const entityFacetSpecs = useMemo(() => resolveEntityFacetSpecs(entity.fields, featureName, screen.entity, effectiveTranslate), [entity.fields, featureName, screen.entity, effectiveTranslate]);
     const [entityReferenceFacetOptions, setEntityReferenceFacetOptions] = useState({});
     const handleEntityFacetOptions = useCallback((field, options) => setEntityReferenceFacetOptions((prev) => prev[field] === options ? prev : { ...prev, [field]: options }), []);
-    const filterFacets = useMemo(() => buildFilterFacets(mergeReferenceFacetOptions(entityFacetSpecs, entityReferenceFacetOptions)), [entityFacetSpecs, entityReferenceFacetOptions]);
+    const [facetCounts, setFacetCounts] = useState({});
+    const handleFacetCount = useCallback((key, count) => setFacetCounts((prev) => (prev[key] === count ? prev : { ...prev, [key]: count })), []);
+    const filterFacets = useMemo(() => buildEntityFilterFacets(mergeReferenceFacetOptions(entityFacetSpecs, entityReferenceFacetOptions), screen.facets, effectiveTranslate, facetCounts), [entityFacetSpecs, entityReferenceFacetOptions, screen.facets, effectiveTranslate, facetCounts]);
+    const facetCountQueries = useMemo(() => buildFacetCountRequests(entityFacetSpecs, screen.facets, effectiveTranslate).map((request) => {
+        const filters = buildFilterPayload({ ...urlState.filters, [request.field]: request.values }, (field) => entity.fields[field]?.type);
+        return {
+            key: request.key,
+            payload: {
+                limit: 1,
+                totalCount: true,
+                ...(urlState.q !== "" && { search: urlState.q }),
+                ...(screen.filter !== undefined && { filter: screen.filter }),
+                ...(filters.length > 0 && { filters }),
+            },
+        };
+    }), [
+        entityFacetSpecs,
+        screen.facets,
+        screen.filter,
+        effectiveTranslate,
+        urlState.filters,
+        urlState.q,
+        entity.fields,
+    ]);
     // Soft-Dispatcher: in Tests die ohne DispatcherProvider mounten,
     // bleibt rowActions undefined statt zu crashen. Echte Apps haben
     // den Provider via createKumikoApp — wenn nicht, ist es vermutlich
@@ -1189,6 +1225,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
                     id: action.id,
                     label: effectiveTranslate(action.label),
                     ...(action.style !== undefined && { style: action.style }),
+                    ...(action.display !== undefined && { display: action.display }),
                     confirmRequired: false,
                     ...(navigateAction.rowClick === true && { rowClick: true }),
                     ...(actionIcon !== undefined && { icon: actionIcon }),
@@ -1206,6 +1243,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
                     id: action.id,
                     label: effectiveTranslate(action.label),
                     ...(action.style !== undefined && { style: action.style }),
+                    ...(action.display !== undefined && { display: action.display }),
                     confirmRequired: false,
                     ...(actionIcon !== undefined && { icon: actionIcon }),
                     onTrigger: (row) => {
@@ -1358,7 +1396,9 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     // Bei Infinite-Mode: rows kommen aus accumulated (über mehrere
     // useQuery-Calls gesammelt), bei pages/false aus dem aktuellen Result.
     const renderRows = useInfinite ? accumulated : (rowsQuery.data?.rows ?? []);
-    return (_jsxs(_Fragment, { children: [_jsx(ReferenceFacetBridges, { specs: entityFacetSpecs, onOptions: handleEntityFacetOptions }), _jsx(RenderList, { screen: screen, entity: entity, rows: renderRows, featureName: featureName, searchable: searchable, searchValue: urlState.q, onSearchChange: urlState.setQ, sort: effectiveSort, onSortChange: urlState.setSort, screenPadding: true, ...(screenFillsHeight(screen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(toolbarActions !== undefined && toolbarActions.length > 0 && { toolbarActions }), ...(useInfinite && {
+    return (_jsxs(_Fragment, { children: [_jsx(ReferenceFacetBridges, { specs: entityFacetSpecs, onOptions: handleEntityFacetOptions }), _jsx(FacetCountBridges, { queryType: queryType, queries: facetCountQueries, onCount: handleFacetCount }), _jsx(RenderList, { screen: screen, entity: entity, rows: renderRows, featureName: featureName, searchable: searchable, searchValue: urlState.q, onSearchChange: urlState.setQ, sort: effectiveSort, onSortChange: urlState.setSort, ...(isEmbeddedScreen
+                    ? { screenPadding: false, chromeless: true }
+                    : { screenPadding: true }), ...(screenFillsHeight(screen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(screen.rowActionMode !== undefined && { rowActionMode: screen.rowActionMode }), ...(toolbarActions !== undefined && toolbarActions.length > 0 && { toolbarActions }), ...(useInfinite && {
                     onReachEnd: loadMore,
                     loadingMore: rowsQuery.loading,
                     hasMore,
@@ -1386,6 +1426,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
 // declared here. Pages-mode pagination only — infinite-scroll accumulation
 // isn't wired for projectionList.
 function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
+    const isEmbeddedScreen = useIsEmbeddedScreen();
     const { Banner, Text } = usePrimitives();
     const t = useTranslation();
     const nav = useNav();
@@ -1557,7 +1598,9 @@ function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
             onPageSizeChange: urlState.setPageSize,
         }
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(ReferenceFacetBridges, { specs: facetSpecs, onOptions: handleProjectionFacetOptions }), _jsx(RenderList, { screen: listScreen, entity: entity, rows: rowsQuery.data?.rows ?? [], featureName: schema.featureName, searchable: searchable, searchValue: urlState.q, onSearchChange: urlState.setQ, sort: activeSort, onSortChange: urlState.setSort, screenPadding: true, ...(screenFillsHeight(listScreen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(toolbarActions !== undefined && { toolbarActions }), ...(translate !== undefined && { translate }), ...(wrappedOnRowClick !== undefined && { onRowClick: wrappedOnRowClick }), ...(filterFacets.length > 0 && {
+    return (_jsxs(_Fragment, { children: [_jsx(ReferenceFacetBridges, { specs: facetSpecs, onOptions: handleProjectionFacetOptions }), _jsx(RenderList, { screen: listScreen, entity: entity, rows: rowsQuery.data?.rows ?? [], featureName: schema.featureName, searchable: searchable, searchValue: urlState.q, onSearchChange: urlState.setQ, sort: activeSort, onSortChange: urlState.setSort, ...(isEmbeddedScreen
+                    ? { screenPadding: false, chromeless: true }
+                    : { screenPadding: true }), ...(screenFillsHeight(listScreen) && { scrollBody: true }), ...(pager !== undefined && { pager }), ...(rowActions !== undefined && { rowActions }), ...(screen.rowActionMode !== undefined && { rowActionMode: screen.rowActionMode }), ...(toolbarActions !== undefined && { toolbarActions }), ...(translate !== undefined && { translate }), ...(wrappedOnRowClick !== undefined && { onRowClick: wrappedOnRowClick }), ...(filterFacets.length > 0 && {
                     filterFacets,
                     onFilterChange: urlState.setFilter,
                 }), ...(dateRangeFacets.length > 0 && {
@@ -2140,7 +2183,7 @@ function ActionFormBody({ schema, screen, translate, initialOverrides, onSuccess
         // sie Kontext ziehen könnten.
         extensionInitialValues: initial, writeCommand: screen.handler, payloadMode: "values", onSubmit: handleSubmitted, ...(handleCancel !== undefined && { onCancel: handleCancel }), ...(onDirtyChange !== undefined && { onDirtyChange }), ...((insideDrawer || screenFillsHeight(screen)) && { fillScreenHeight: true }), ...((screen.submitLabel ?? submitLabelFallback) !== undefined && {
             submitLabel: screen.submitLabel ?? submitLabelFallback,
-        }), ...(screen.submitStyle !== undefined && { submitVariant: screen.submitStyle }), ...(summary !== undefined && { summary }), ...(translate !== undefined && { translate }) }));
+        }), ...(screen.submitStyle !== undefined && { submitVariant: screen.submitStyle }), ...(screen.footerActions !== undefined && { footerActions: screen.footerActions }), ...(summary !== undefined && { summary }), ...(translate !== undefined && { translate }) }));
 }
 // A money-typed config-edit field renders through RenderField's entityEdit
 // `{amount, currency}` payload shape (render-field.tsx, #1923), but
@@ -2155,8 +2198,13 @@ function unwrapMoneyValue(value) {
     }
     return value;
 }
+const CONFIG_SCOPE_SOURCE = {
+    user: "user-row",
+    tenant: "tenant-row",
+    system: "system-row",
+};
 function ConfigEditBody({ schema, screen, translate, }) {
-    const { Banner, ConfigCascadeView } = usePrimitives();
+    const { ConfigCascadeView } = usePrimitives();
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
     const dispatcher = useDispatcher();
@@ -2167,6 +2215,7 @@ function ConfigEditBody({ schema, screen, translate, }) {
     const cascadeQuery = useQuery("config:query:cascade", {});
     const synthEntity = useMemo(() => synthesizeConfigEditEntity(screen.fields), [screen.fields]);
     const synthScreen = useMemo(() => synthesizeConfigEditScreen(screen), [screen]);
+    const boundsSchema = useMemo(() => buildConfigEditSchema(screen.fields), [screen.fields]);
     // Initial-Values: pro Field-Name den Wert aus `values[qualifiedKey]`
     // abholen. Fehlt der Key auf dem Server (= noch nie gesetzt), nutzen
     // wir den Field-Default (createTextField/createNumberField/...).
@@ -2237,7 +2286,20 @@ function ConfigEditBody({ schema, screen, translate, }) {
             const qualified = screen.configKeys[shortName];
             if (qualified === undefined)
                 continue;
-            const ftype = screen.fields[shortName]?.type;
+            const fieldDef = screen.fields[shortName];
+            const ftype = fieldDef?.type;
+            // A query-backed select is cleared to "" when its dependent value became
+            // invalid. config:write:set would store that as an empty override (the
+            // badge shows "Mandant" with no value); reset falls back to the inherited
+            // value. set can't do it: deleting the row is irreversible, reset is
+            // the high-risk handler.
+            if (ftype === "select" && fieldDef?.optionsQuery !== undefined && value === "") {
+                commands.push({
+                    type: "config:write:reset",
+                    payload: { key: qualified, scope: screen.scope },
+                });
+                continue;
+            }
             commands.push({
                 type: "config:write:set",
                 payload: {
@@ -2268,41 +2330,40 @@ function ConfigEditBody({ schema, screen, translate, }) {
         valuesQuery.refetch,
         cascadeQuery.refetch,
     ]);
-    // Cascade-Disclosure (#429): Trigger sitzt in der Label-Row, das Panel
-    // unter dem Input — zwei getrennte Render-Slots teilen sich den
-    // expanded-State, der daher hier (pro Feld) statt in der Komponente lebt.
-    const [expandedFields, setExpandedFields] = useState(new Set());
-    const toggleExpanded = useCallback((fieldName) => {
-        setExpandedFields((prev) => {
-            const next = new Set(prev);
-            if (next.has(fieldName))
-                next.delete(fieldName);
-            else
-                next.add(fieldName);
-            return next;
-        });
-    }, []);
-    if (valuesQuery.loading && valuesQuery.data === null) {
-        return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
-    }
+    if (valuesQuery.loading && valuesQuery.data === null)
+        return _jsx(QueryLoadingBanner, {});
     if (valuesQuery.error) {
-        return (_jsx(Banner, { padded: true, variant: "error", testId: "kumiko-screen-error", children: dispatcherErrorText(valuesQuery.error, effectiveTranslate) }));
-    }
-    if (initial === null) {
-        return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: "Loading\u2026" }));
+        return (_jsx(QueryErrorBanner, { error: valuesQuery.error, translate: effectiveTranslate, onRetry: valuesQuery.refetch }));
     }
-    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, customSubmit: customSubmit, ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), labelAppendix: (fieldName) => {
+    if (initial === null)
+        return _jsx(QueryLoadingBanner, {});
+    // Cascade values of a select show the option label the select itself shows,
+    // not the stored value (a UUID for optionsQuery selects).
+    const cascadeValueRenderer = (fieldName) => {
+        const fieldDef = screen.fields[fieldName];
+        if (fieldDef?.type !== "select")
+            return undefined;
+        if (fieldDef.optionsQuery !== undefined) {
+            const query = fieldDef.optionsQuery;
+            const payload = resolveOptionsQueryPayload(fieldDef.optionsQueryPayload ?? {}, initial);
+            return (value) => _jsx(QueryOptionLabel, { query: query, payload: payload, value: value });
+        }
+        if (fieldDef.options.length === 0)
+            return undefined;
+        return (value) => buildOptionLabels(effectiveTranslate, (option) => fieldOptionLabelKey(schema.featureName, synthScreen.entity, fieldName, option), [String(value)])[String(value)];
+    };
+    return (_jsx(RenderEdit, { screen: synthScreen, entity: synthEntity, featureName: schema.featureName, initial: initial, schema: boundsSchema, customSubmit: customSubmit, dirtyFooter: true, validateOnChange: true, ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), fieldAppendixPlacement: "below-control", fieldAccent: (fieldName) => cascades[fieldName]?.levels.find((level) => level.isActive)?.source ===
+            CONFIG_SCOPE_SOURCE[screen.scope], markChangedFields: true, ...(screen.fieldDescriptions !== undefined && {
+            fieldDescription: (fieldName) => {
+                const key = screen.fieldDescriptions?.[fieldName];
+                return key === undefined ? undefined : effectiveTranslate(key);
+            },
+        }), fieldAppendix: (fieldName) => {
             const cascade = cascades[fieldName];
             if (cascade === undefined)
                 return undefined;
-            return (_jsx(ConfigCascadeView, { slot: "trigger", cascade: cascade, screenScope: screen.scope, expanded: expandedFields.has(fieldName), onToggle: () => toggleExpanded(fieldName) }));
-        }, fieldAppendix: (fieldName) => {
-            const cascade = cascades[fieldName];
-            // Panel nur rendern wenn aufgeklappt — sonst kein leerer Abstand
-            // unter dem Input.
-            if (cascade === undefined || !expandedFields.has(fieldName))
-                return undefined;
-            return (_jsx(ConfigCascadeView, { slot: "panel", cascade: cascade, screenScope: screen.scope, expanded: true, qualifiedKey: screen.configKeys[fieldName], onReset: async (key, scope) => {
+            const renderValue = cascadeValueRenderer(fieldName);
+            return (_jsx(ConfigCascadeView, { cascade: cascade, screenScope: screen.scope, qualifiedKey: screen.configKeys[fieldName], required: screen.requiredFields?.includes(fieldName) ?? false, ...(renderValue !== undefined && { renderValue }), onReset: async (key, scope) => {
                     await dispatcher.write("config:write:reset", { key, scope });
                     await Promise.allSettled([valuesQuery.refetch?.(), cascadeQuery.refetch?.()]);
                 } }));

package/dist/app/list-facets.d.ts

@@ -1,6 +1,6 @@
-import type { ListFacetSpec } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { EntityListFacetConfig, ListFacetSpec } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Translate } from "@cosmicdrift/kumiko-headless";
-import type { DataTableFacet } from "../primitives.js";
+import type { DataTableFacet, DataTableFacetChip } from "../primitives.js";
 export type ResolvedFacetSpec = {
     readonly field: string;
     readonly type: "select" | "boolean" | "reference";
@@ -24,6 +24,17 @@ export declare function mergeReferenceFacetOptions(specs: readonly ResolvedFacet
     readonly label: string;
 }[]>>): ResolvedFacetSpec[];
 export declare function buildFilterFacets(specs: readonly ResolvedFacetSpec[]): DataTableFacet[];
+type FacetConfigByField = Readonly<Record<string, EntityListFacetConfig | false>>;
+export declare function buildFacetChips(spec: ResolvedFacetSpec, config: EntityListFacetConfig, translate: Translate): DataTableFacetChip[];
+export declare function buildEntityFilterFacets(specs: readonly ResolvedFacetSpec[], configs: FacetConfigByField | undefined, translate: Translate, counts: Readonly<Record<string, number>>): DataTableFacet[];
+export declare function facetCountKey(field: string, chipId: string): string;
+export type FacetCountRequest = {
+    readonly key: string;
+    readonly field: string;
+    readonly values: readonly string[];
+};
+export declare function buildFacetCountRequests(specs: readonly ResolvedFacetSpec[], configs: FacetConfigByField | undefined, translate: Translate): FacetCountRequest[];
+export declare function normalizeDefaultFilters(defaults: Readonly<Record<string, readonly string[] | boolean>> | undefined): Readonly<Record<string, readonly string[]>>;
 export declare function buildFilterPayload(urlFilters: Readonly<Record<string, readonly string[]>>, typeOf: (field: string) => string | undefined): {
     field: string;
     op: "in";
@@ -46,3 +57,4 @@ export declare function dateRangeUrlField(field: string, bound: DateRangeBound):
 export declare function readDateRange(urlFilters: Readonly<Record<string, readonly string[]>>, field: string): DateRangeValue;
 export declare function clampDateRange(current: DateRangeValue, bound: DateRangeBound, value: string): DateRangeValue;
 export declare function buildDateRangePayload(specs: readonly ResolvedDateRangeFacet[], urlFilters: Readonly<Record<string, readonly string[]>>, timeZone: string): Record<string, string>;
+export {};

package/dist/app/list-facets.js

@@ -12,6 +12,80 @@ export function mergeReferenceFacetOptions(specs, optionsByField) {
 export function buildFilterFacets(specs) {
     return specs.map((spec) => ({ field: spec.field, label: spec.label, options: spec.options }));
 }
+// Chips are the field's own options plus the declared extra choices
+// ("Running" bundle, "All"), in the order the config's `position` asks for.
+export function buildFacetChips(spec, config, translate) {
+    const extras = config.extraOptions ?? [];
+    const toChip = (extra) => ({
+        id: extra.id,
+        label: translate(extra.label),
+        values: extra.values,
+    });
+    return [
+        ...extras.filter((extra) => extra.position !== "end").map(toChip),
+        ...spec.options.map((option) => ({
+            id: option.value,
+            label: option.label,
+            values: [option.value],
+        })),
+        ...extras.filter((extra) => extra.position === "end").map(toChip),
+    ];
+}
+// entityList facet controls: `false` drops the control, `display: "chips"`
+// turns it into toggle chips; counts (when requested) are merged in by chip.
+export function buildEntityFilterFacets(specs, configs, translate, counts) {
+    const out = [];
+    for (const spec of specs) {
+        const config = configs?.[spec.field];
+        if (config === false)
+            continue;
+        const base = { field: spec.field, label: spec.label, options: spec.options };
+        if (config?.display !== "chips") {
+            out.push(base);
+            continue;
+        }
+        out.push({
+            ...base,
+            chips: buildFacetChips(spec, config, translate).map((chip) => {
+                const count = counts[facetCountKey(spec.field, chip.id)];
+                return count === undefined ? chip : { ...chip, count };
+            }),
+            ...(config.showCounts === true && { showCounts: true }),
+            ...(config.hideEmpty === true && { hideEmpty: true }),
+        });
+    }
+    return out;
+}
+export function facetCountKey(field, chipId) {
+    return `${field}\u0000${chipId}`;
+}
+// One count request per chip of a facet that shows counts or hides empty
+// chips. The chip's own values replace that facet's selection; other facets
+// keep theirs.
+export function buildFacetCountRequests(specs, configs, translate) {
+    const out = [];
+    for (const spec of specs) {
+        const config = configs?.[spec.field];
+        if (config === undefined || config === false || config.display !== "chips")
+            continue;
+        if (config.showCounts !== true && config.hideEmpty !== true)
+            continue;
+        for (const chip of buildFacetChips(spec, config, translate)) {
+            out.push({ key: facetCountKey(spec.field, chip.id), field: spec.field, values: chip.values });
+        }
+    }
+    return out;
+}
+// `defaultFilters` values are option values or a boolean; the URL-state shape
+// is string[] (booleans as "true"/"false", like buildFilterPayload expects).
+export function normalizeDefaultFilters(defaults) {
+    if (defaults === undefined)
+        return {};
+    return Object.fromEntries(Object.entries(defaults).map(([field, value]) => [
+        field,
+        typeof value === "boolean" ? [String(value)] : value,
+    ]));
+}
 // User-selected faceted filters from URL-state → payload.filters. Boolean
 // fields coerce "true"/"false" strings to real booleans (DB column is
 // boolean); everything else stays string[] under op:"in" (multi-select

package/dist/app/query-state-banners.d.ts

@@ -0,0 +1,8 @@
+import type { DispatcherError, Translate } from "@cosmicdrift/kumiko-headless";
+import type { ReactNode } from "react";
+export declare function QueryLoadingBanner(): ReactNode;
+export declare function QueryErrorBanner({ error, translate, onRetry, }: {
+    readonly error: DispatcherError;
+    readonly translate: Translate;
+    readonly onRetry: () => void | Promise<void>;
+}): ReactNode;

package/dist/app/query-state-banners.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { dispatcherErrorText } from "./write-failed-error.js";
+export function QueryLoadingBanner() {
+    const { Banner } = usePrimitives();
+    const t = useTranslation();
+    return (_jsx(Banner, { padded: true, variant: "loading", testId: "kumiko-screen-loading", children: t("kumiko.widget.loading") }));
+}
+export function QueryErrorBanner({ error, translate, onRetry, }) {
+    const { Banner, Button } = usePrimitives();
+    const t = useTranslation();
+    return (_jsx(Banner, { padded: true, variant: "error", testId: "kumiko-screen-error", actions: _jsx(Button, { variant: "secondary", size: "sm", onClick: onRetry, testId: "kumiko-screen-retry", children: t("kumiko.actions.retry") }), children: dispatcherErrorText(error, translate) }));
+}