@cosmicdrift/kumiko-renderer 0.393.0 → 0.395.0

package/dist/app/content-preview.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { escapeHtmlAttr } from "../headless/index.js";
 import { useContentEditor } from "./content-editors.js";
 const VARIABLE_PATTERN = /\{\{\s*(\w+)\s*\}\}/g;
 const noop = () => { };
@@ -12,15 +11,8 @@ export function substituteVariables(content, variables) {
 export function ContentPreview({ content, variables, contentFormat, }) {
     const Editor = useContentEditor(contentFormat);
     const id = useId();
-    // "rich" content is HTML (see ContentCollectionDefinition.contentFormat) —
-    // an example value substituted in raw could break the markup (`<`) or
-    // render as an unescaped entity (`&`). "plain"/"markdown" content is text,
-    // no escaping wanted there.
-    const safeVariables = contentFormat === "rich"
-        ? Object.fromEntries(Object.entries(variables).map(([name, value]) => [name, escapeHtmlAttr(value)]))
-        : variables;
     // "document" keeps `{{x}}` as-is: substituting it into a button/link href would make the
     // schema drop that node; variable chips stay visible.
-    const value = contentFormat === "document" ? content : substituteVariables(content, safeVariables);
+    const value = contentFormat === "document" ? content : substituteVariables(content, variables);
     return _jsx(Editor, { id: id, value: value, onChange: noop, variables: [], readOnly: true });
 }

package/dist/app/entity-list-screen.js

@@ -31,6 +31,7 @@ import { buildClientActionRowAction, buildDefaultEditRowAction, buildDrawerRowAc
 import { findEditScreenFor } from "./screen-access.js";
 import { buildListQueryPayload, entityQueryCommand, isEntityEditScreenOfEntity, useNavigateToCreateFor, } from "./screen-shared.js";
 import { useEntityRangeFacets } from "./use-entity-range-facets.js";
+import { useGatedToolbarActions } from "./use-gated-toolbar-actions.js";
 import { listPager, useScreenListRows } from "./use-screen-list-rows.js";
 import { useScreenListTable } from "./use-screen-list-table.js";
 export function EntityListScreen({ schema, screen, translate, onRowClick, }) {
@@ -299,7 +300,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     });
     // ToolbarActions: Schema → Resolved-Form (analog rowActions), shared with
     // projectionList and relatedList sections via buildProjectionToolbarActions.
-    const toolbarActions = useMemo(() => buildProjectionToolbarActions({
+    const resolvedToolbarActions = useMemo(() => buildProjectionToolbarActions({
         toolbarActions: screen.toolbarActions,
         translate: effectiveTranslate,
         dispatcher,
@@ -319,6 +320,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         appFeatures,
         userRoles,
     ]);
+    const { actions: toolbarActions, gateQueries: toolbarGateQueries } = useGatedToolbarActions(screen.toolbarActions, resolvedToolbarActions);
     const emptyContent = useListEmptyContent(screen.emptyState, effectiveTranslate, {
         nav,
         host,
@@ -407,7 +409,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
                     expandedRowIds,
                     onToggleRowExpanded: toggleRowExpanded,
                     renderExpandedRow,
-                }) }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
+                }) }), toolbarGateQueries, _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     invalidateExpansions();
                     void refreshRowsAfterWrite();

package/dist/app/kumiko-screen.js

@@ -1,8 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
-import { useQuery } from "../hooks/use-query.js";
-import { useTranslation } from "../i18n.js";
 import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
 import { usePrimitives } from "../primitives.js";
 import { ActionFormBody } from "./action-form-body.js";
@@ -16,14 +14,13 @@ import { ProjectionDetailBody } from "./projection-detail-body.js";
 import { ProjectionListBody } from "./projection-list-body.js";
 import { lastSegment } from "./qn.js";
 import { qualifyScreenId } from "./qualify-screen-id.js";
-import { QueryLoadingBanner } from "./query-state-banners.js";
 import { ReturnHostProvider, useReturnHost } from "./return-to.js";
 import { screenAccessAllows } from "./screen-access.js";
 import { ScreenAccessDeniedBanner, ScreenMissingState } from "./screen-shared.js";
+import { ScreenNotice, ScreenVisibilityGate } from "./screen-visibility-gate.js";
 import { SecretMintBody } from "./secret-mint-body.js";
 import { SecretsEditBody } from "./secrets-edit-body.js";
 import { useEmbeddedScreen } from "./use-embedded-screen.js";
-import { evalVisibleWhenAfterShown } from "./visible-when.js";
 export { qualifyScreenId };
 /** Mirrors qualifyScreenId for nav QNs (registry form `<feature>:nav:<short-id>`).
  *  Callers building QNs (e.g. the WorkspaceShell resolver) should use this instead of string-concat, so a QN-schema change only touches one place. */
@@ -55,7 +52,7 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
         onCopyLink,
     });
     // Gate every entry (incl. direct URL): the body element is only mounted once the condition holds.
-    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { entityId: entityId, featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: _jsx(StandInChainBoundary, { children: screenBody }) }, entityId)) : (_jsx(StandInChainBoundary, { children: screenBody }));
+    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { entityId: entityId, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, renderFallbackScreen: (target, fallbackEntityId) => (_jsx(FallbackScreen, { featureName: schema.featureName, fallback: target, translate: translate, ...(fallbackEntityId !== undefined && { entityId: fallbackEntityId }) })), children: _jsx(StandInChainBoundary, { children: screenBody }) }, entityId)) : (_jsx(StandInChainBoundary, { children: screenBody }));
     // An embedded screen (e.g. a dashboard panel) keeps its parent's host and
     // must not portal its page header into the shell that hosts the outer screen.
     if (outerHost !== undefined) {
@@ -63,41 +60,12 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
     }
     return _jsx(ReturnHostProvider, { value: ownHost, children: body });
 }
-function ScreenVisibilityGate({ entityId, featureName, visibleWhen, fallback, translate, children, }) {
-    // An idParam gate without a route id has nothing to ask: treated as hidden, never queried.
-    const missingRouteId = visibleWhen.idParam !== undefined && entityId === undefined;
-    const result = useQuery(visibleWhen.query, visibleWhen.idParam !== undefined && entityId !== undefined
-        ? { [visibleWhen.idParam]: entityId }
-        : {}, { live: true, enabled: !missingRouteId });
-    const wasShown = useRef(false);
-    const verdict = missingRouteId
-        ? "hidden"
-        : evalVisibleWhenAfterShown(visibleWhen, result, wasShown.current);
-    useEffect(() => {
-        if (verdict === "visible")
-            wasShown.current = true;
-    }, [verdict]);
-    if (verdict === "visible")
-        return children;
-    if (verdict === "loading") {
-        return _jsx(QueryLoadingBanner, {});
-    }
-    if (fallback !== undefined) {
-        return (_jsx(FallbackScreen, { featureName: featureName, fallback: fallback, translate: translate, ...(visibleWhen.idParam !== undefined && entityId !== undefined && { entityId }) }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
-}
-function ScreenUnavailableBanner() {
-    const { Banner } = usePrimitives();
-    const t = useTranslation();
-    return (_jsx(Banner, { padded: true, variant: "info", testId: "kumiko-screen-unavailable", children: t("kumiko.screen.unavailable") }));
-}
 function FallbackScreen({ featureName, fallback, translate, entityId, }) {
     const target = useEmbeddedScreen(featureName, fallback);
     // Also undefined when the user lacks access to the fallback screen, which is
     // not a framework error.
     if (target === undefined) {
-        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenNotice, {})] }));
     }
     return (_jsx(LockedHeaderScope, { standInScreenId: lastSegment(target.qn), children: _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate, ...(entityId !== undefined && { entityId }) }) }));
 }

package/dist/app/projection-list-body.js

@@ -108,7 +108,7 @@ export function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
         limit: query.limit,
         urlState: query.urlState,
     });
-    return (_jsxs(_Fragment, { children: [refetchErrorBanner, _jsx(ListGroupPageBridges, { ...data.listTable.aggregates.groupPages }), _jsx(ReferenceFacetBridges, { specs: query.facetSpecs, onOptions: query.handleProjectionFacetOptions }), renderProjectionList({
+    return (_jsxs(_Fragment, { children: [refetchErrorBanner, actions.toolbarGateQueries, _jsx(ListGroupPageBridges, { ...data.listTable.aggregates.groupPages }), _jsx(ReferenceFacetBridges, { specs: query.facetSpecs, onOptions: query.handleProjectionFacetOptions }), renderProjectionList({
                 schema,
                 screen,
                 translate,

package/dist/app/qn.d.ts

@@ -1,7 +1,2 @@
 export declare function lastSegment(qn: string): string;
-/**
- * Client-safe copy of framework `toKebab` (engine/qualified-name.ts).
- * Must stay in sync — do NOT import from `@cosmicdrift/kumiko-framework/engine`
- * here: that barrel pulls server deps into the browser bundle.
- */
-export declare function toKebab(input: string): string;
+export { toKebab } from "@cosmicdrift/kumiko-types/kebab-case";

package/dist/app/qn.js

@@ -18,15 +18,4 @@ export function lastSegment(qn) {
     const idx = qn.lastIndexOf(":");
     return idx < 0 ? qn : qn.slice(idx + 1);
 }
-/**
- * Client-safe copy of framework `toKebab` (engine/qualified-name.ts).
- * Must stay in sync — do NOT import from `@cosmicdrift/kumiko-framework/engine`
- * here: that barrel pulls server deps into the browser bundle.
- */
-export function toKebab(input) {
-    return input
-        .replace(/\./g, "-")
-        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
-        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-        .toLowerCase();
-}
+export { toKebab } from "@cosmicdrift/kumiko-types/kebab-case";

package/dist/app/screen-visibility-gate.d.ts

@@ -0,0 +1,19 @@
+import type { ScreenFallback, ScreenVisibility } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import type { Translate } from "../headless/index.ts";
+type NoticeKey = "kumiko.screen.unavailable" | "kumiko.screen.forbidden" | "kumiko.screen.notFound";
+export declare function ScreenNotice({ messageKey, }: {
+    readonly messageKey?: NoticeKey;
+}): ReactNode;
+export declare function LockedNotice({ messageKey }: {
+    readonly messageKey?: NoticeKey;
+}): ReactNode;
+export declare function ScreenVisibilityGate({ entityId, visibleWhen, fallback, translate, renderFallbackScreen, children, }: {
+    readonly entityId: string | undefined;
+    readonly visibleWhen: ScreenVisibility;
+    readonly fallback: ScreenFallback | undefined;
+    readonly translate?: Translate;
+    readonly renderFallbackScreen: (target: string, entityId: string | undefined) => ReactNode;
+    readonly children: ReactNode;
+}): ReactNode;
+export {};

package/dist/app/screen-visibility-gate.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fallbackTargetFor } from "@cosmicdrift/kumiko-types/screen";
+import { useEffect, useRef } from "react";
+import { useQuery } from "../hooks/use-query.js";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { LockedHeaderScope } from "./locked-screen-header.js";
+import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
+import { evalVisibleWhenAfterShown, screenFallbackReason, } from "./visible-when.js";
+export function ScreenNotice({ messageKey = "kumiko.screen.unavailable", }) {
+    const { Banner } = usePrimitives();
+    const t = useTranslation();
+    return (_jsx(Banner, { padded: true, variant: "info", testId: "kumiko-screen-unavailable", children: t(messageKey) }));
+}
+export function LockedNotice({ messageKey }) {
+    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenNotice, { ...(messageKey !== undefined && { messageKey }) })] }));
+}
+// Only the map form gets reason-specific defaults; a plain string or no fallback keeps the
+// single "unavailable" notice. `error` renders a retry banner instead, so its entry is a
+// safety net for an error verdict that carries no error object.
+const DEFAULT_NOTICE_KEY = {
+    hidden: "kumiko.screen.unavailable",
+    forbidden: "kumiko.screen.forbidden",
+    notFound: "kumiko.screen.notFound",
+    error: "kumiko.screen.unavailable",
+};
+export function ScreenVisibilityGate({ entityId, visibleWhen, fallback, translate, renderFallbackScreen, children, }) {
+    // An idParam gate without a route id has nothing to ask: treated as hidden, never queried.
+    const missingRouteId = visibleWhen.idParam !== undefined && entityId === undefined;
+    const result = useQuery(visibleWhen.query, visibleWhen.idParam !== undefined && entityId !== undefined
+        ? { [visibleWhen.idParam]: entityId }
+        : {}, { live: true, enabled: !missingRouteId });
+    const wasShown = useRef(false);
+    const verdict = missingRouteId
+        ? "hidden"
+        : evalVisibleWhenAfterShown(visibleWhen, result, wasShown.current);
+    useEffect(() => {
+        if (verdict === "visible")
+            wasShown.current = true;
+    }, [verdict]);
+    if (verdict === "visible")
+        return children;
+    if (verdict === "loading") {
+        return _jsx(QueryLoadingBanner, {});
+    }
+    return (_jsx(ClosedGate, { verdict: verdict, result: result, fallback: fallback, translate: translate, renderFallbackScreen: (target) => renderFallbackScreen(target, visibleWhen.idParam !== undefined && entityId !== undefined ? entityId : undefined) }));
+}
+function ClosedGate({ verdict, result, fallback, translate, renderFallbackScreen, }) {
+    const t = useTranslation();
+    const reason = screenFallbackReason(verdict, result.error);
+    const target = fallback === undefined ? undefined : fallbackTargetFor(fallback, reason);
+    if (target !== undefined)
+        return renderFallbackScreen(target);
+    if (typeof fallback !== "object")
+        return _jsx(LockedNotice, {});
+    if (reason === "error" && result.error) {
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(QueryErrorBanner, { error: result.error, translate: translate ?? t, onRetry: result.refetch })] }));
+    }
+    return _jsx(LockedNotice, { messageKey: DEFAULT_NOTICE_KEY[reason] });
+}

package/dist/app/secrets-edit-body.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
+import { FormScreenLayout } from "../components/form-screen-layout.js";
 import { useDispatcher } from "../context/dispatcher-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useQuery } from "../hooks/use-query.js";
@@ -20,7 +21,7 @@ function groupSectionsByTitle(sections) {
 // unlike ConfigEditBody there is no server value to pre-fill a draft with —
 // every input starts at "" and stays that way unless the user types into it.
 export function SecretsEditBody({ screen, translate }) {
-    const { Banner, Dialog, Form, Section, Field, Input, Button, Text, Grid } = usePrimitives();
+    const { Banner, Dialog, Section, Field, Input, Button, Text, Grid } = usePrimitives();
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
     const dispatcher = useDispatcher();
@@ -111,10 +112,10 @@ export function SecretsEditBody({ screen, translate }) {
     }))
         .filter((group) => group.fields.length > 0);
     const unsavedCount = Object.values(drafts).filter((value) => value.trim() !== "").length;
-    return (_jsxs(_Fragment, { children: [_jsxs(Form, { onSubmit: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(FormScreenLayout, { onSubmit: () => {
                     void handleSubmit();
-                }, testId: "secrets-edit-form", width: "full", fillHeight: true, stickyActions: true, screenForm: true, unsavedCount: unsavedCount, ...(screen.description !== undefined && {
-                    subtitle: effectiveTranslate(screen.description),
+                }, testId: "secrets-edit-form", width: "full", unsavedCount: unsavedCount, ...(screen.description !== undefined && {
+                    description: effectiveTranslate(screen.description),
                 }), actions: _jsxs(_Fragment, { children: [unsavedCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", disabled: submitting, onClick: () => setDrafts({}), testId: "secrets-edit-discard", [STICKY_PRIMARY_ACTION_PROP]: true, children: effectiveTranslate("kumiko.form.discard") })), _jsx(Button, { type: "submit", variant: "primary", loading: submitting, disabled: submitting || unsavedCount === 0, testId: "secrets-edit-submit", children: effectiveTranslate("kumiko.form.saveChanges") })] }), children: [submitError !== null && (_jsx(Banner, { variant: "error", testId: "secrets-edit-error", children: submitError })), sectionGroups.map((section) => (_jsx(Section, { layout: "settings-list", title: effectiveTranslate(section.title), subtitle: effectiveTranslate("config.secrets.description"), children: _jsx(Grid, { columns: 1, list: true, children: section.fields.map((fieldId) => {
                                 const qualified = screen.secretKeys[fieldId];
                                 if (qualified === undefined)

package/dist/app/use-embedded-screen.d.ts

@@ -1,6 +1,8 @@
+import type { ScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { FeatureSchema } from "./feature-schema.ts";
 export type EmbeddedScreenTarget = {
     readonly schema: FeatureSchema;
     readonly qn: string;
+    readonly screenType: ScreenDefinition["type"];
 };
 export declare function useEmbeddedScreen(hostFeatureName: string, screen: string): EmbeddedScreenTarget | undefined;

package/dist/app/use-embedded-screen.js

@@ -15,5 +15,5 @@ export function useEmbeddedScreen(hostFeatureName, screen) {
         return undefined;
     if (!screenAccessAllows(target.access, userRoles))
         return undefined;
-    return { schema, qn };
+    return { schema, qn, screenType: target.type };
 }

package/dist/app/use-gated-toolbar-actions.d.ts

@@ -0,0 +1,7 @@
+import type { ToolbarAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import type { ToolbarActionButton } from "../components/render-list-toolbar-action.tsx";
+export declare function useGatedToolbarActions(toolbarActions: readonly ToolbarAction[] | undefined, resolved: readonly ToolbarActionButton[] | undefined): {
+    readonly actions: readonly ToolbarActionButton[] | undefined;
+    readonly gateQueries: ReactNode;
+};

package/dist/app/use-gated-toolbar-actions.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "../hooks/use-query.js";
+import { evalVisibleWhen } from "./visible-when.js";
+// Same query name, same answer: buttons gating on one query share a single live request.
+function GateQuery({ query, onResult, onForget, }) {
+    const { data, error, loading, refetch } = useQuery(query, {}, { live: true });
+    useEffect(() => {
+        onResult(query, { data, error, loading, refetch });
+    }, [query, data, error, loading, refetch, onResult]);
+    useEffect(() => () => onForget(query), [query, onForget]);
+    return null;
+}
+function gatesById(toolbarActions) {
+    const gates = new Map();
+    for (const action of toolbarActions ?? []) {
+        if (action.visibleWhen !== undefined)
+            gates.set(action.id, action.visibleWhen);
+    }
+    return gates;
+}
+// Fail-closed: a gated button shows only after its query answered with a match; while the
+// query loads or after it failed it stays hidden.
+export function useGatedToolbarActions(toolbarActions, resolved) {
+    const [results, setResults] = useState(new Map());
+    const report = useCallback((query, result) => {
+        setResults((prev) => new Map(prev).set(query, result));
+    }, []);
+    const forget = useCallback((query) => {
+        setResults((prev) => {
+            if (!prev.has(query))
+                return prev;
+            const next = new Map(prev);
+            next.delete(query);
+            return next;
+        });
+    }, []);
+    const gates = useMemo(() => gatesById(toolbarActions), [toolbarActions]);
+    const distinctQueries = useMemo(() => [...new Set([...gates.values()].map((gate) => gate.query))], [gates]);
+    const actions = useMemo(() => {
+        if (gates.size === 0)
+            return resolved;
+        const visible = resolved?.filter((action) => {
+            const gate = gates.get(action.id);
+            return gate === undefined || evalVisibleWhen(gate, results.get(gate.query)) === "visible";
+        });
+        return visible !== undefined && visible.length > 0 ? visible : undefined;
+    }, [gates, resolved, results]);
+    const gateQueries = distinctQueries.map((query) => (_jsx(GateQuery, { query: query, onResult: report, onForget: forget }, query)));
+    return { actions, gateQueries };
+}

package/dist/app/use-projection-list-actions.d.ts

@@ -25,6 +25,7 @@ export declare function useProjectionListActions(input: ProjectionListActionsInp
     runNavigate: (action: RowActionNavigate, row: ListRowViewModel) => void;
     rowActions: readonly import("../primitives.tsx").DataTableRowAction[] | undefined;
     toolbarActions: readonly import("../components/render-list-toolbar-action.tsx").ToolbarActionButton[] | undefined;
+    toolbarGateQueries: import("react").ReactNode;
     bulk: import("../data-table-bulk-types.ts").DataTableBulk | undefined;
     emptyContent: import("../components/list-empty-state.tsx").ListEmptyStateContent | undefined;
 };

package/dist/app/use-projection-list-actions.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useListBulk } from "./list-bulk-actions.js";
 import { useListEmptyContent } from "./list-empty-content.js";
 import { buildDefaultEditRowAction, buildProjectionRowActions, buildProjectionToolbarActions, runProjectionRowNavigate, } from "./row-actions.js";
+import { useGatedToolbarActions } from "./use-gated-toolbar-actions.js";
 export function useProjectionListActions(input) {
     const { screen, effectiveTranslate, dispatcher, clientActions, nav, host, refreshRows, openDrawer, appFeatures, userRoles, defaultEditScreen, } = input;
     // Entity targets: see EntityListBody.runNavigate for why the resolution happens
@@ -35,7 +36,7 @@ export function useProjectionListActions(input) {
         defaultEditRowAction,
         host,
     ]);
-    const toolbarActions = useMemo(() => buildProjectionToolbarActions({
+    const resolvedToolbarActions = useMemo(() => buildProjectionToolbarActions({
         toolbarActions: screen.toolbarActions,
         translate: effectiveTranslate,
         dispatcher,
@@ -55,6 +56,7 @@ export function useProjectionListActions(input) {
         appFeatures,
         userRoles,
     ]);
+    const { actions: toolbarActions, gateQueries: toolbarGateQueries } = useGatedToolbarActions(screen.toolbarActions, resolvedToolbarActions);
     const bulk = useListBulk({
         bulkActions: screen.bulkActions,
         rowActions: screen.rowActions,
@@ -69,5 +71,12 @@ export function useProjectionListActions(input) {
         openDrawer,
         onWriteSuccess: refreshRows,
     });
-    return { runNavigate, rowActions, toolbarActions, bulk, emptyContent };
+    return {
+        runNavigate,
+        rowActions,
+        toolbarActions,
+        toolbarGateQueries,
+        bulk,
+        emptyContent,
+    };
 }

package/dist/app/visible-when.d.ts

@@ -1,5 +1,9 @@
-import type { DashboardPanelVisibility } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DashboardPanelVisibility, ScreenFallbackReason } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { UseQueryResult } from "../hooks/use-query.ts";
 export type VisibleWhenVerdict = "loading" | "visible" | "hidden" | "error";
 export declare function evalVisibleWhen(visibleWhen: DashboardPanelVisibility, result: UseQueryResult<Readonly<Record<string, unknown>>> | undefined): VisibleWhenVerdict;
 export declare function evalVisibleWhenAfterShown(visibleWhen: DashboardPanelVisibility, result: UseQueryResult<Readonly<Record<string, unknown>>> | undefined, wasShown: boolean): VisibleWhenVerdict;
+export type FailedVerdict = Exclude<VisibleWhenVerdict, "visible" | "loading">;
+export declare function screenFallbackReason(verdict: FailedVerdict, error: {
+    readonly httpStatus: number;
+} | null): ScreenFallbackReason;

package/dist/app/visible-when.js

@@ -16,3 +16,14 @@ export function evalVisibleWhenAfterShown(visibleWhen, result, wasShown) {
     const lastGoodDataMatches = result?.data?.[visibleWhen.field] === visibleWhen.eq;
     return verdict === "error" && wasShown && lastGoodDataMatches ? "visible" : verdict;
 }
+// Splits a closed gate by cause so a screen's `fallback` map can answer "not allowed" and
+// "gone" differently from "condition unmet" and "something broke".
+export function screenFallbackReason(verdict, error) {
+    if (verdict === "hidden")
+        return "hidden";
+    if (error?.httpStatus === 403)
+        return "forbidden";
+    if (error?.httpStatus === 404)
+        return "notFound";
+    return "error";
+}

package/dist/components/form-screen-layout.d.ts

@@ -7,7 +7,8 @@ export type FormScreenLayoutProps = {
     readonly secondaryActions?: ReactNode;
     readonly onSubmit?: () => void;
     readonly width?: FormWidth;
+    readonly unsavedCount?: number;
     readonly testId?: string;
 };
 /** For custom screens: the standard form screen layout; fill it with `Section` (title, icon, subtitle). */
-export declare function FormScreenLayout({ children, description, actions, secondaryActions, onSubmit, width, testId, }: FormScreenLayoutProps): ReactNode;
+export declare function FormScreenLayout({ children, description, actions, secondaryActions, onSubmit, width, unsavedCount, testId, }: FormScreenLayoutProps): ReactNode;

package/dist/components/form-screen-layout.js

@@ -7,7 +7,7 @@ const FORM_SCREEN_LAYOUT_PROPS = {
 };
 const NOOP = () => { };
 /** For custom screens: the standard form screen layout; fill it with `Section` (title, icon, subtitle). */
-export function FormScreenLayout({ children, description, actions, secondaryActions, onSubmit = NOOP, width, testId, }) {
+export function FormScreenLayout({ children, description, actions, secondaryActions, onSubmit = NOOP, width, unsavedCount, testId, }) {
     const { Form } = usePrimitives();
-    return (_jsx(Form, { onSubmit: onSubmit, ...FORM_SCREEN_LAYOUT_PROPS, ...(description !== undefined && { subtitle: description }), ...(actions !== undefined && { actions }), ...(secondaryActions !== undefined && { secondaryActions }), ...(width !== undefined && { width }), ...(testId !== undefined && { testId }), children: children }));
+    return (_jsx(Form, { onSubmit: onSubmit, ...FORM_SCREEN_LAYOUT_PROPS, ...(description !== undefined && { subtitle: description }), ...(actions !== undefined && { actions }), ...(secondaryActions !== undefined && { secondaryActions }), ...(width !== undefined && { width }), ...(unsavedCount !== undefined && { unsavedCount }), ...(testId !== undefined && { testId }), children: children }));
 }

package/dist/components/render-edit-banners.js

@@ -52,7 +52,7 @@ export function renderFormErrorBanner({ engine: { props, state }, layout, }) {
                 onReload();
                 state.setFormError(null);
                 state.setExtraDeleteIssues([]);
-            }, testId: "render-edit-form-error-reload", children: translate("kumiko.actions.reload") })) : undefined, children: [_jsx(Text, { testId: "render-edit-form-error-key", children: translate(formError.i18nKey, formError.i18nParams) }), layout.rootIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-root", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`))), state.extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })));
+            }, testId: "render-edit-form-error-reload", children: translate("kumiko.actions.reload") })) : undefined, children: [_jsx(Text, { testId: "render-edit-form-error-key", children: translate(formError.i18nKey, formError.i18nParams) }), layout.rootIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-root", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`))), layout.unplacedIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-unplaced", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`))), state.extraDeleteIssues.map((issue) => (_jsx(Text, { testId: "render-edit-form-error-extra", children: translate(issue.i18nKey, issue.params) }, `${issue.path}:${issue.i18nKey}`)))] })));
 }
 export function renderRootIssueBanners({ engine: { state }, layout, }) {
     const { Banner, Text } = state.primitives;

package/dist/components/render-edit-layout-flags.d.ts

@@ -3,6 +3,7 @@ import type { FieldIssue, FormValues } from "../headless/index.ts";
 import type { RenderEditEngine } from "./render-edit-render-model.ts";
 export type LayoutFlags = {
     readonly rootIssues: readonly FieldIssue[];
+    readonly unplacedIssues: readonly FieldIssue[];
     readonly isScreenForm: boolean;
     readonly titleInShell: boolean;
     readonly menuPageHeaderActions: boolean;
@@ -25,5 +26,5 @@ export type FooterFlags = {
     readonly hasUnsavedInput: boolean;
 };
 export type FooterSlotComponent = ReturnType<typeof useExtensionSectionComponent>;
-export declare function deriveLayoutFlags<TValues extends FormValues, TCtx>({ props, state, form, }: RenderEditEngine<TValues, TCtx>): LayoutFlags;
+export declare function deriveLayoutFlags<TValues extends FormValues, TCtx>({ props, state, form, sections, }: RenderEditEngine<TValues, TCtx>): LayoutFlags;
 export declare function deriveFooterFlags<TValues extends FormValues, TCtx>(engine: RenderEditEngine<TValues, TCtx>, layout: LayoutFlags, footerSlotComponent: FooterSlotComponent): FooterFlags;

package/dist/components/render-edit-layout-flags.js

@@ -1,6 +1,6 @@
 import { PROJECTION_DETAIL_ENTITY } from "@cosmicdrift/kumiko-framework/ui-types";
 import { shouldRenderActionsIconOnly } from "../primitives.js";
-import { ROOT_ISSUE_PATH, resolveExtensionEntityId } from "./render-edit-logic.js";
+import { issuesWithoutRenderedField, ROOT_ISSUE_PATH, resolveExtensionEntityId, } from "./render-edit-logic.js";
 function hasSecondaryFormActions(props, menuPageHeaderActions, cancelInHeaderMenu) {
     const { onDelete, onCopyLink, actions, menuActions, onCancel } = props;
     const hasRecordActions = !menuPageHeaderActions && (onDelete !== undefined || onCopyLink !== undefined);
@@ -9,7 +9,7 @@ function hasSecondaryFormActions(props, menuPageHeaderActions, cancelInHeaderMen
     const hasCancel = onCancel !== undefined && !cancelInHeaderMenu;
     return hasRecordActions || hasCustomActions || hasMenuActions || hasCancel;
 }
-export function deriveLayoutFlags({ props, state, form, }) {
+export function deriveLayoutFlags({ props, state, form, sections, }) {
     const { fillScreenHeight, hideSectionTitles, headerRegion, actions, onCancel } = props;
     const { PageHeader, ActionOverflowMenu } = state.primitives;
     // Screen forms (entityEdit/actionForm filling the shell height) drop the card;
@@ -24,6 +24,7 @@ export function deriveLayoutFlags({ props, state, form, }) {
     const cancelInHeaderMenu = menuPageHeaderActions && state.isWizard && onCancel !== undefined;
     return {
         rootIssues,
+        unplacedIssues: issuesWithoutRenderedField(form.snapshot.errors, sections.filteredSections, new Set(Object.keys(props.formDerivation?.derive ?? {}))),
         isScreenForm,
         titleInShell,
         menuPageHeaderActions,

package/dist/components/render-edit-logic.d.ts

@@ -1,9 +1,10 @@
-import type { DispatcherError, EditFieldViewModel, EditSectionViewModel, SubmitResult } from "../headless/index.ts";
+import type { DispatcherError, EditFieldViewModel, EditSectionViewModel, FieldIssue, SubmitResult } from "../headless/index.ts";
 export declare function hasEditableSection(sections: readonly EditSectionViewModel[]): boolean;
 export declare function resolveExtensionEntityId(entityIdProp: string | null | undefined, vmId: string | null): string | null;
 export declare function shouldNotifyCaller(result: SubmitResult<unknown>, extensionsPersisted: boolean): boolean;
 export declare function issueRootField(path: string): string;
 export declare function hasIssueWithoutRenderedField(issuePaths: readonly string[], sections: readonly EditSectionViewModel[], derivedTargets?: ReadonlySet<string>): boolean;
+export declare function issuesWithoutRenderedField(errors: Readonly<Record<string, readonly FieldIssue[]>>, sections: readonly EditSectionViewModel[], derivedTargets?: ReadonlySet<string>): readonly FieldIssue[];
 export declare function hasIssueWithoutVisibleField(issuePaths: readonly string[], fields: readonly EditFieldViewModel[]): boolean;
 export declare function findFirstErroringSectionIndex(sections: readonly EditSectionViewModel[], issuePaths: readonly string[]): number | undefined;
 export declare function filterEditSections(sections: readonly EditSectionViewModel[], fieldsFilter: readonly string[] | undefined): readonly EditSectionViewModel[];

package/dist/components/render-edit-logic.js

@@ -42,6 +42,20 @@ export function hasIssueWithoutRenderedField(issuePaths, sections, derivedTarget
     const renderedFields = sections.flatMap((s) => s.kind === "fields" && s.visible ? s.fields : []);
     return hasIssueWithoutVisibleField(paths, renderedFields);
 }
+// The server issues the banner has to carry itself because no rendered field shows them
+// (an extension section's value such as a page body, `version`, a hidden field).
+export function issuesWithoutRenderedField(errors, sections, derivedTargets = new Set()) {
+    const visibleFields = new Set(sections
+        .flatMap((s) => (s.kind === "fields" && s.visible ? s.fields : []))
+        .filter((f) => f.visible)
+        .map((f) => f.field));
+    return Object.entries(errors)
+        .filter(([path]) => {
+        const root = issueRootField(path);
+        return path !== ROOT_ISSUE_PATH && !derivedTargets.has(root) && !visibleFields.has(root);
+    })
+        .flatMap(([, issues]) => issues);
+}
 export function hasIssueWithoutVisibleField(issuePaths, fields) {
     if (issuePaths.length === 0)
         return true;

package/dist/data-table-view-types.d.ts

@@ -21,11 +21,13 @@ export type DataTableViewOptions = {
     /** Present: pinning is on and the view menu has a pin section. Unpinned columns have no entry. */
     readonly pins?: DataTableColumnPins;
     readonly onPinsChange?: (next: DataTableColumnPins) => void;
-    /** Present: resizing is on; the table switches to table-layout fixed. Every column has an entry (px). */
+    /** Present: resizing is on. Only columns with a start width or a user-chosen width have an entry (px);
+     *  while none of the visible columns has one, the table keeps the auto layout and sizes by content. */
     readonly widths?: DataTableColumnWidths;
     /** Present together with `widths`; every column has an entry (px). */
     readonly minWidths?: DataTableColumnWidths;
-    readonly onWidthChange?: (field: string, width: number) => void;
+    /** `others` holds the displayed widths of the columns that had no entry yet, so they keep their size once the layout turns fixed. */
+    readonly onWidthChange?: (field: string, width: number, others?: DataTableColumnWidths) => void;
     readonly keyboardNavigation?: boolean;
     /** Present: the view menu has a "group by" section. */
     readonly groupBy?: DataTableGroupByChoice;

package/dist/hooks/list-column-layout.d.ts

@@ -12,8 +12,10 @@ type LayoutSchemaColumn = {
 export declare function defaultPins(schema: readonly LayoutSchemaColumn[]): DataTableColumnPins;
 export declare function minWidthsOf(schema: readonly LayoutSchemaColumn[]): DataTableColumnWidths;
 export declare function clampWidth(width: number, min: number): number;
+/** Only columns with a schema `width`: the others are sized by their content until the user resizes. */
 export declare function defaultWidths(schema: readonly LayoutSchemaColumn[], minWidths: DataTableColumnWidths): DataTableColumnWidths;
-/** A saved width wins per field; a column the saved view has never seen keeps its default. */
+/** A saved width wins per field; fields the schema no longer has are dropped. */
 export declare function mergeSavedWidths(defaults: DataTableColumnWidths, saved: Readonly<Record<string, number>>, minWidths: DataTableColumnWidths): DataTableColumnWidths;
+export declare function clampWidths(widths: DataTableColumnWidths, minWidths: DataTableColumnWidths): DataTableColumnWidths;
 export declare function sameRecord<T>(a: Readonly<Record<string, T>>, b: Readonly<Record<string, T>>): boolean;
 export {};