@cosmicdrift/kumiko-renderer 0.355.0 → 0.356.0

package/dist/app/kumiko-screen.js

@@ -8,8 +8,9 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "rea
 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 { needsActionConfirm, RenderEditActionButton, } from "../components/render-edit-action-button.js";
 import { RenderList } from "../components/render-list.js";
+import { useActionMenuItems } from "../components/use-action-menu-items.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";
@@ -877,7 +878,8 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
         sameEntityScreenId,
         entityId,
     ]);
-    const headerActions = useMemo(() => buildSectionActions(screen.actions ?? []), [buildSectionActions, screen.actions]);
+    const headerActions = useMemo(() => buildSectionActions((screen.actions ?? []).filter((a) => a.placement !== "menu")), [buildSectionActions, screen.actions]);
+    const headerMenuActions = useMemo(() => buildSectionActions((screen.actions ?? []).filter((a) => a.placement === "menu")), [buildSectionActions, screen.actions]);
     const handleSubmitted = useCallback((result) => {
         if (!result.isSuccess)
             return;
@@ -926,7 +928,7 @@ function EntityEditUpdateForm({ schema, screen, entity, entityId, record, onRelo
                 entityId: entityId, 
                 // Stored customFields for the extension section, so editing shows the
                 // persisted values instead of behaving write-only.
-                extensionInitialValues: extensionInitialValues, schema: formSchema, writeCommand: writeCommand, payloadMode: "changes", buildPayload: buildPayload, serverFieldPathPrefix: `${UPDATE_CHANGES_KEY}.`, onSubmit: handleSubmitted, ...(screen.allowDelete !== false && { onDelete: handleDelete }), onCancel: handleCancel, onReload: () => void onReload(), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), ...(onCopyLink !== undefined && { onCopyLink }), ...(headerActions !== undefined && { actions: headerActions }), buildSectionActions: buildSectionActions }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
+                extensionInitialValues: extensionInitialValues, schema: formSchema, writeCommand: writeCommand, payloadMode: "changes", buildPayload: buildPayload, serverFieldPathPrefix: `${UPDATE_CHANGES_KEY}.`, onSubmit: handleSubmitted, ...(screen.allowDelete !== false && { onDelete: handleDelete }), onCancel: handleCancel, onReload: () => void onReload(), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }), ...(translate !== undefined && { translate }), ...(onCopyLink !== undefined && { onCopyLink }), ...(headerActions !== undefined && { actions: headerActions }), ...(headerMenuActions !== undefined && { menuActions: headerMenuActions }), buildSectionActions: buildSectionActions }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     void onReload();
                 } })] }));
@@ -1894,47 +1896,10 @@ function primaryHeaderAction(actions) {
 // no button of its own to carry one.
 function HeaderActionsBar({ actions, Button, Dialog, ActionOverflowMenu, onError, collapseAfterPrimary = false, compact = false, PageHeader, }) {
     const t = useTranslation();
-    const [pendingAction, setPendingAction] = useState(null);
-    // Menu items have no button of their own to carry RenderEditActionButton's
-    // busy state; without it the menu can be reopened mid-write and fire the
-    // same writeHandler twice.
-    const [busyActionId, setBusyActionId] = useState(null);
-    const trigger = async (action) => {
-        onError(null);
-        setBusyActionId(action.id);
-        try {
-            await action.onPress();
-        }
-        catch (e) {
-            onError(e instanceof Error ? e.message : String(e));
-        }
-        finally {
-            setBusyActionId(null);
-        }
-    };
-    const toMenuItem = (action) => ({
-        id: action.id,
-        label: action.label,
-        ...(action.icon !== undefined && { icon: action.icon }),
-        variant: action.style === "danger" ? "danger" : "default",
-        ...(busyActionId !== null && { disabled: true }),
-        onSelect: () => {
-            if (needsActionConfirm(action)) {
-                setPendingAction(action);
-            }
-            else {
-                void trigger(action);
-            }
-        },
+    const { toMenuItem, confirmDialog: pendingActionDialog } = useActionMenuItems({
+        Dialog,
+        onError,
     });
-    const pendingActionDialog = pendingAction !== null && (_jsx(RenderEditActionConfirmDialog, { action: pendingAction, open: true, onOpenChange: (open) => {
-            if (!open)
-                setPendingAction(null);
-        }, onConfirm: async () => {
-            const action = pendingAction;
-            setPendingAction(null);
-            await trigger(action);
-        }, Dialog: Dialog }));
     if (compact && PageHeader !== undefined) {
         const primary = primaryHeaderAction(actions);
         // A bare icon for a destructive or confirm-gated action (e.g. "x" for terminate)

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

@@ -64,6 +64,11 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
      *  same split as `onCopyLink`) — RenderEdit only wires the button, its
      *  busy state and its confirm dialog. */
     readonly actions?: readonly RenderEditAction[];
+    /** Record actions declared with `placement: "menu"`, resolved like `actions`.
+     *  Rendered in the header "…" menu ahead of copy-link/delete; without a
+     *  header menu (drawer, card form, shell without a header slot) they fall
+     *  back to buttons next to `actions`. */
+    readonly menuActions?: readonly RenderEditAction[];
     /** Opens a relatedList section row's drawer-kind action (fw#2710).
      *  RenderEdit has no `schema` to resolve the target actionForm itself —
      *  the caller (ProjectionDetailBody, which does have schema) supplies the

package/dist/components/render-edit.js

@@ -3,6 +3,7 @@ import { evalFieldCondition, isFieldsEditSection, normalizeEditField, PROJECTION
 import { computeEditViewModel, groupIssuesByPath, relevantFieldIssues, zodErrorToFieldIssues, } from "@cosmicdrift/kumiko-headless";
 import { RenderEditActionButton } from "./render-edit-action-button.js";
 import { AllFieldsRequiredProvider } from "./render-field.js";
+import { useActionMenuItems } from "./use-action-menu-items.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExtensionFormRegistryProvider, useExtensionFormHost, } from "../app/extension-form-submit.js";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections.js";
@@ -223,7 +224,7 @@ function resolveTitleTemplate(template, values, translate, fallback) {
     return translate(template, values);
 }
 export function RenderEdit(props) {
-    const { screen, entity, featureName, initial, writeCommand, translate: translateProp, ctx, schema, onSubmit, payloadMode = "values", buildPayload, serverFieldPathPrefix, onDelete, onCancel, onReload, onDirtyChange, onCopyLink, actions, onRelatedListDrawerAction, submitLabel, submitVariant, submitWithoutChanges, footerActions, summary, labelAppendix, fieldAppendix, fieldAppendixPlacement, fieldDescription, fieldAccent, markChangedFields = false, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, dirtyFooter, validateOnChange, headerRegion, buildSectionActions, leadContent, } = props;
+    const { screen, entity, featureName, initial, writeCommand, translate: translateProp, ctx, schema, onSubmit, payloadMode = "values", buildPayload, serverFieldPathPrefix, onDelete, onCancel, onReload, onDirtyChange, onCopyLink, actions, menuActions, onRelatedListDrawerAction, submitLabel, submitVariant, submitWithoutChanges, footerActions, summary, labelAppendix, fieldAppendix, fieldAppendixPlacement, fieldDescription, fieldAccent, markChangedFields = false, entityId: entityIdProp, extensionInitialValues, onChange, onControlsReady, fields: fieldsFilter, disabled = false, hideActions, valueDisplay = "form", hideSectionTitles, fillScreenHeight, dirtyFooter, validateOnChange, headerRegion, buildSectionActions, leadContent, } = props;
     const i18nScreenId = props.i18nScreenId ?? screen.id;
     const { customSubmit } = props;
     // Translate-Fallback: wenn der Caller keine Translate-Fn übergibt,
@@ -300,6 +301,7 @@ export function RenderEdit(props) {
         setHasExtensionRegistrations(hasRegistrations);
     });
     const { Button, Banner, Card, Dialog, Form, Section, Grid, GridCell, Text, Progress, StepBar, WizardStepGroup, Tabs, PageHeader, ActionOverflowMenu, } = usePrimitives();
+    const { toMenuItem: menuActionToItem, confirmDialog: menuActionConfirmDialog } = useActionMenuItems({ Dialog, onError: setActionError });
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
     const pageHeaderCompact = usePageHeaderCompact();
     const insideDrawer = useInsideDrawer();
@@ -1041,6 +1043,7 @@ export function RenderEdit(props) {
     // action.
     const hasSecondaryFormActions = (!menuPageHeaderActions && (onDelete !== undefined || onCopyLink !== undefined)) ||
         (actions !== undefined && actions.length > 0) ||
+        (!menuPageHeaderActions && menuActions !== undefined && menuActions.length > 0) ||
         (onCancel !== undefined && !cancelInHeaderMenu);
     // Teil-C collapse rule: driven by the custom `actions` group only — a
     // resolved true also folds the Copy-Link button (same visual group in the
@@ -1048,6 +1051,7 @@ export function RenderEdit(props) {
     const iconOnlyMidActions = actions !== undefined && shouldRenderActionsIconOnly(actions);
     const headerMenuItems = menuPageHeaderActions
         ? [
+            ...(menuActions ?? []).map(menuActionToItem),
             ...(onCopyLink !== undefined
                 ? [
                     {
@@ -1091,7 +1095,8 @@ export function RenderEdit(props) {
                     setLinkCopied(true);
                 }, children: iconOnlyMidActions
                     ? null
-                    : translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink") })), actions?.map((action) => (_jsx(RenderEditActionButton, { action: action, iconOnly: iconOnlyMidActions, Button: Button, Dialog: Dialog, onError: setActionError }, action.id))), onCancel !== undefined && !cancelInHeaderMenu && (_jsx(Button, { type: "button", variant: "secondary", onClick: () => onCancel(), testId: "render-edit-cancel", children: translate("kumiko.actions.cancel") }))] }));
+                    : translate(linkCopied ? "kumiko.actions.copyLinkCopied" : "kumiko.actions.copyLink") })), actions?.map((action) => (_jsx(RenderEditActionButton, { action: action, iconOnly: iconOnlyMidActions, Button: Button, Dialog: Dialog, onError: setActionError }, action.id))), !menuPageHeaderActions &&
+                menuActions?.map((action) => (_jsx(RenderEditActionButton, { action: action, Button: Button, Dialog: Dialog, onError: setActionError }, action.id))), onCancel !== undefined && !cancelInHeaderMenu && (_jsx(Button, { type: "button", variant: "secondary", onClick: () => onCancel(), testId: "render-edit-cancel", children: translate("kumiko.actions.cancel") }))] }));
     const headerSlot = screen.slots?.header;
     const headerSlotMount = headerSlot !== undefined ? (_jsx(EditSlotMount, { slot: headerSlot, slotName: "header", screenId: screen.id, entityName: vm.entityName, entityId: resolveExtensionEntityId(entityIdProp, vm.id), values: snapshot.values })) : undefined;
     // A function headerRegion places the slot itself (projectionDetail puts it
@@ -1227,7 +1232,7 @@ export function RenderEdit(props) {
             })
             : translate("kumiko.wizard.step", { current: currentStep + 1, total: lastStepIndex + 1 });
     })();
-    return (_jsxs(ExtensionFormRegistryProvider, { value: extensionFormRegistry, children: [titleInShell && (_jsx(PageHeader, { title: formTitle, ...(recordTitle !== undefined && { recordTitle }), ...(headerMenuItems.length > 0 &&
+    return (_jsxs(ExtensionFormRegistryProvider, { value: extensionFormRegistry, children: [menuActionConfirmDialog, titleInShell && (_jsx(PageHeader, { title: formTitle, ...(recordTitle !== undefined && { recordTitle }), ...(headerMenuItems.length > 0 &&
                     pageHeaderCompact && { overflowItems: headerMenuItems }), ...(headerMenuItems.length > 0 &&
                     !pageHeaderCompact &&
                     ActionOverflowMenu !== undefined && {

package/dist/components/use-action-menu-items.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import type { ActionMenuItemSpec, usePrimitives } from "../primitives.js";
+import type { RenderEditAction } from "./render-edit-types.js";
+export declare function useActionMenuItems({ Dialog, onError, }: {
+    readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
+    readonly onError: (text: string | null) => void;
+}): {
+    readonly toMenuItem: (action: RenderEditAction) => ActionMenuItemSpec;
+    readonly confirmDialog: ReactNode;
+};

package/dist/components/use-action-menu-items.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { needsActionConfirm, RenderEditActionConfirmDialog } from "./render-edit-action-button.js";
+// A menu item has no button of its own to carry RenderEditActionButton's busy
+// and confirm state, so this hook owns both for every item it creates.
+export function useActionMenuItems({ Dialog, onError, }) {
+    const [pendingAction, setPendingAction] = useState(null);
+    // Without it the menu can be reopened mid-write and fire the same writeHandler twice.
+    const [busyActionId, setBusyActionId] = useState(null);
+    const trigger = async (action) => {
+        onError(null);
+        setBusyActionId(action.id);
+        try {
+            await action.onPress();
+        }
+        catch (e) {
+            onError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setBusyActionId(null);
+        }
+    };
+    const toMenuItem = (action) => ({
+        id: action.id,
+        label: action.label,
+        ...(action.icon !== undefined && { icon: action.icon }),
+        variant: action.style === "danger" ? "danger" : "default",
+        ...(busyActionId !== null && { disabled: true }),
+        onSelect: () => {
+            if (needsActionConfirm(action)) {
+                setPendingAction(action);
+            }
+            else {
+                void trigger(action);
+            }
+        },
+    });
+    const confirmDialog = pendingAction !== null && (_jsx(RenderEditActionConfirmDialog, { action: pendingAction, open: true, onOpenChange: (open) => {
+            if (!open)
+                setPendingAction(null);
+        }, onConfirm: async () => {
+            const action = pendingAction;
+            setPendingAction(null);
+            await trigger(action);
+        }, Dialog: Dialog }));
+    return { toMenuItem, confirmDialog };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.355.0",
+  "version": "0.356.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.355.0",
-    "@cosmicdrift/kumiko-headless": "0.355.0",
-    "@cosmicdrift/kumiko-types": "0.355.0",
+    "@cosmicdrift/kumiko-framework": "0.356.0",
+    "@cosmicdrift/kumiko-headless": "0.356.0",
+    "@cosmicdrift/kumiko-types": "0.356.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -28,7 +28,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.355.0"
+    "@cosmicdrift/kumiko-locale-de": "0.356.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": "0.356.0",
+    "type": "improvement",
+    "title": "entityEdit actions can go into the header \"...\" menu via placement: \"menu\""
+  },
   {
     "version": "0.354.0",
     "type": "fix",