@cosmicdrift/kumiko-renderer 0.331.0 → 0.332.0

package/dist/app/kumiko-screen.js

@@ -3,7 +3,7 @@ import { evalFieldCondition, isWriteFormEditSection, metricField, parseRefTarget
 import { 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 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";
@@ -1621,6 +1621,46 @@ function runMetricNavigate(nav, navigate, record, host) {
 function isAbsoluteHttpUrl(value) {
     return /^https?:\/\//i.test(value) && isSafeHref(value);
 }
+// hrefFor throws for an entity without a detailFor screen; outside
+// createKumikoApp the feature list is empty, so navigateTargetAllows can't
+// rule that out beforehand. The NavApi owns target resolution, so asking it
+// and falling back to plain text covers both cases.
+function hrefForNavigate(nav, navigate, record) {
+    const entityId = navigate.entityId !== undefined ? String(record[navigate.entityId] ?? "") : undefined;
+    try {
+        if (navigate.entity !== undefined) {
+            return entityId === undefined || entityId === ""
+                ? undefined
+                : nav.hrefFor({ entity: navigate.entity, id: entityId });
+        }
+        if (navigate.screen !== undefined) {
+            return nav.hrefFor({
+                screenId: navigate.screen,
+                ...(entityId !== undefined && entityId !== "" && { entityId }),
+            });
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}
+function buildSubtitleParts(parts, record, nav, appFeatures, userRoles, host) {
+    return parts.flatMap((part) => {
+        const field = typeof part === "string" ? part : part.field;
+        const text = String(record[field] ?? "");
+        if (text === "")
+            return [];
+        const navigate = typeof part === "string" ? undefined : part.navigate;
+        if (navigate === undefined || !navigateTargetAllows(navigate, appFeatures, userRoles)) {
+            return [{ field, text }];
+        }
+        const href = hrefForNavigate(nav, navigate, record);
+        if (href === undefined)
+            return [{ field, text }];
+        return [{ field, text, href, onPress: () => runMetricNavigate(nav, navigate, record, host) }];
+    });
+}
 function headerStatusTone(header, record) {
     if (header.status === undefined)
         return undefined;
@@ -1900,7 +1940,10 @@ function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     // Plain Text, not Heading — the Card title slot already renders as its own
     // heading element (h3); nesting another heading (h1) inside it is invalid HTML.
     const headerTitleSlot = header !== undefined ? (header.status !== undefined ? (_jsxs(Grid, { columns: "auto", children: [_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }), StatusBadge !== undefined ? (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-status", children: String(record[header.status] ?? "") }))] })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }))) : undefined;
-    const headerSubtitleSlot = header?.subtitle !== undefined ? (subtitleHref !== undefined ? (_jsx(Link, { href: subtitleHref, target: "_blank", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") })) : (_jsx(Text, { variant: "muted", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") }))) : undefined;
+    const subtitleParts = header !== undefined && typeof header.subtitle === "object"
+        ? buildSubtitleParts(header.subtitle, record, nav, appFeatures, userRoles, host)
+        : undefined;
+    const headerSubtitleSlot = subtitleParts !== undefined ? (subtitleParts.length > 0 ? (_jsx(Text, { testId: "kumiko-screen-projection-detail-subtitle", children: subtitleParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx(Text, { variant: "muted", decorative: true, children: " · " })), part.href !== undefined ? (_jsx(Link, { href: part.href, ...(part.onPress !== undefined && { onPress: part.onPress }), className: "underline", testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text })) : (_jsx(Text, { testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text }))] }, part.field))) })) : undefined) : typeof header?.subtitle === "string" ? (subtitleHref !== undefined ? (_jsx(Link, { href: subtitleHref, target: "_blank", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") })) : (_jsx(Text, { variant: "muted", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") }))) : undefined;
     // slots.header shares the header card with the actions (one card, actions
     // top right) instead of rendering as an unframed block above it.
     const metricItems = screen.metrics?.map((metric) => {

package/dist/components/render-list.js

@@ -7,6 +7,11 @@ import { useTranslation } from "../i18n.js";
 import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
 import { shouldRenderActionsIconOnly, usePrimitives, } from "../primitives.js";
 const SEARCH_DEBOUNCE_MS = 300;
+// Fire-and-forget actions (schema navigate/drawer) can leave the toolbar for the
+// page header without losing the confirm dialog or busy/error surfacing.
+function isHeaderPromotableToolbarAction(action) {
+    return (action.style === "primary" && action.confirm === undefined && action.confirmRequired === false);
+}
 export function RenderList(props) {
     const { screen, entity, rows, featureName, translate: translateProp, onRowClick, emptyState, onCreate, createLabel, searchable = false, searchPlaceholder, description, itemNounKey, searchValue, onSearchChange, sort, onSortChange, pager, onReachEnd, loadingMore, hasMore, rowActions, rowActionMode, toolbarActions, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, } = props;
     // Wie RenderEdit: Translate-Fallback aus dem i18next-Context, sonst
@@ -133,8 +138,22 @@ export function RenderList(props) {
     const hasHeaderSlot = screen.slots?.header !== undefined;
     const toolbarIconOnly = hasToolbarActions && shouldRenderActionsIconOnly(toolbarActions);
     const createButton = onCreate !== undefined && createInPageHeader && pageHeaderCompact ? (_jsx(Button, { variant: "primary", icon: "plus", size: "icon", ariaLabel: effectiveCreateLabel, title: effectiveCreateLabel, onClick: onCreate, testId: "render-list-create" })) : onCreate !== undefined ? (_jsx(Button, { variant: "primary", icon: "plus", onClick: onCreate, testId: "render-list-create", className: "px-3.5", children: effectiveCreateLabel })) : undefined;
-    const toolbarEnd = hasHeaderSlot || hasToolbarActions || (onCreate !== undefined && !createInPageHeader) ? (_jsxs(_Fragment, { children: [hasHeaderSlot && _jsx(ListHeaderSlotMount, { screen: screen }), hasToolbarActions &&
-                toolbarActions.map((a) => (_jsx(ToolbarActionView, { action: a, iconOnly: toolbarIconOnly, Button: Button, Dialog: Dialog, Banner: Banner }, a.id))), !createInPageHeader && createButton] })) : undefined;
+    // Without onCreate (e.g. a navigate action as the list's only CTA) the primary
+    // toolbar action takes the header slot on phones, so it is not a text button
+    // squeezed next to the search field. Desktop keeps it in the toolbar.
+    const promotedToolbarAction = onCreate === undefined &&
+        PageHeader !== undefined &&
+        pageHeaderSlotAvailable &&
+        pageHeaderCompact
+        ? toolbarActions?.find(isHeaderPromotableToolbarAction)
+        : undefined;
+    const promotedActionButton = promotedToolbarAction !== undefined ? (_jsx(Button, { variant: "primary", icon: promotedToolbarAction.icon ?? "plus", size: "icon", ariaLabel: promotedToolbarAction.label, title: promotedToolbarAction.label, onClick: () => void promotedToolbarAction.onTrigger(), testId: `render-list-toolbar-action-${promotedToolbarAction.id}` })) : undefined;
+    const toolbarActionsInToolbar = toolbarActions?.filter((a) => a !== promotedToolbarAction) ?? [];
+    const hasToolbarActionsInToolbar = toolbarActionsInToolbar.length > 0;
+    const toolbarEnd = hasHeaderSlot ||
+        hasToolbarActionsInToolbar ||
+        (onCreate !== undefined && !createInPageHeader) ? (_jsxs(_Fragment, { children: [hasHeaderSlot && _jsx(ListHeaderSlotMount, { screen: screen }), hasToolbarActionsInToolbar &&
+                toolbarActionsInToolbar.map((a) => (_jsx(ToolbarActionView, { action: a, iconOnly: toolbarIconOnly, Button: Button, Dialog: Dialog, Banner: Banner }, a.id))), !createInPageHeader && createButton] })) : undefined;
     // Empty-State: Default zeigt Heading + Description + optional CTA-
     // Button. Caller kann via emptyState-Prop komplett überschreiben.
     // Wenn weder onCreate noch ein Override gegeben ist, fällt die
@@ -149,7 +168,7 @@ export function RenderList(props) {
     const resolvedTitle = translate(titleKey);
     const toolbarTitle = resolvedTitle === titleKey ? screen.id : resolvedTitle;
     // ListSort = DataTableSort (use-list-url-state aliased) — kein Cast nötig.
-    return (_jsxs(_Fragment, { children: [createInPageHeader && PageHeader !== undefined && _jsx(PageHeader, { actions: createButton }), referenceColumns.map((rc) => (_jsx(ReferenceLookupBridge, { field: rc.field, refEntity: rc.refEntity, labelField: rc.labelField, featureName: rc.refFeature, onMap: handleLookupMap }, rc.field))), _jsx(DataTable, { columns: enrichedVm.columns, rows: enrichedVm.rows, toolbarTitle: toolbarTitle, ...(onRowClick !== undefined && { onRowClick }), ...(composedEmptyState !== undefined && { emptyState: composedEmptyState }), ...(toolbarStart !== undefined && { toolbarStart }), ...(description !== undefined && !searchable && { toolbarDescription: description }), ...(toolbarEnd !== undefined && { toolbarEnd }), ...(sort !== undefined && { sort }), ...(onSortChange !== undefined && { onSortChange }), ...(pager !== undefined && { pager }), ...(onReachEnd !== undefined && { onReachEnd }), ...(loadingMore !== undefined && { loadingMore }), ...(hasMore !== undefined && { hasMore }), ...(itemNoun !== undefined && { itemNoun }), ...(rowActions !== undefined && { rowActions }), ...(rowActionMode !== undefined && { rowActionMode }), ...(filterFacets !== undefined && { filterFacets }), ...(filterValues !== undefined && { filterValues }), ...(onFilterChange !== undefined && { onFilterChange }), ...(onFilterReset !== undefined && { onFilterReset }), ...(dateRangeFacets !== undefined && { dateRangeFacets }), ...(onDateRangeChange !== undefined && { onDateRangeChange }), ...(chromeless !== undefined && { chromeless }), ...(scrollBody !== undefined && { scrollBody }), ...(screenPadding !== undefined && { screenPadding }), ...(expandedRowIds !== undefined && { expandedRowIds }), ...(onToggleRowExpanded !== undefined && { onToggleRowExpanded }), ...(renderExpandedRow !== undefined && { renderExpandedRow }), testId: "render-list-table" })] }));
+    return (_jsxs(_Fragment, { children: [createInPageHeader && PageHeader !== undefined && _jsx(PageHeader, { actions: createButton }), promotedActionButton !== undefined && PageHeader !== undefined && (_jsx(PageHeader, { actions: promotedActionButton })), referenceColumns.map((rc) => (_jsx(ReferenceLookupBridge, { field: rc.field, refEntity: rc.refEntity, labelField: rc.labelField, featureName: rc.refFeature, onMap: handleLookupMap }, rc.field))), _jsx(DataTable, { columns: enrichedVm.columns, rows: enrichedVm.rows, toolbarTitle: toolbarTitle, ...(onRowClick !== undefined && { onRowClick }), ...(composedEmptyState !== undefined && { emptyState: composedEmptyState }), ...(toolbarStart !== undefined && { toolbarStart }), ...(description !== undefined && !searchable && { toolbarDescription: description }), ...(toolbarEnd !== undefined && { toolbarEnd }), ...(sort !== undefined && { sort }), ...(onSortChange !== undefined && { onSortChange }), ...(pager !== undefined && { pager }), ...(onReachEnd !== undefined && { onReachEnd }), ...(loadingMore !== undefined && { loadingMore }), ...(hasMore !== undefined && { hasMore }), ...(itemNoun !== undefined && { itemNoun }), ...(rowActions !== undefined && { rowActions }), ...(rowActionMode !== undefined && { rowActionMode }), ...(filterFacets !== undefined && { filterFacets }), ...(filterValues !== undefined && { filterValues }), ...(onFilterChange !== undefined && { onFilterChange }), ...(onFilterReset !== undefined && { onFilterReset }), ...(dateRangeFacets !== undefined && { dateRangeFacets }), ...(onDateRangeChange !== undefined && { onDateRangeChange }), ...(chromeless !== undefined && { chromeless }), ...(scrollBody !== undefined && { scrollBody }), ...(screenPadding !== undefined && { screenPadding }), ...(expandedRowIds !== undefined && { expandedRowIds }), ...(onToggleRowExpanded !== undefined && { onToggleRowExpanded }), ...(renderExpandedRow !== undefined && { renderExpandedRow }), testId: "render-list-table" })] }));
 }
 // Header-Slot in der Listen-Toolbar (toolbarEnd): `screen.slots.header` ist
 // eine PlatformComponent (`{ react: { __component: "X" } }`), aufgelöst über

package/dist/i18n-defaults.js

@@ -68,6 +68,9 @@ export const kumikoDefaultTranslations = {
         "kumiko.list.count.one": "1 entry",
         "kumiko.list.count.other": "{count} entries",
         "kumiko.list.row-actions.more": "More actions",
+        "kumiko.page-header.actions": "Page actions",
+        "kumiko.theme.dark": "Dark theme",
+        "kumiko.theme.light": "Light theme",
         "kumiko.list.row.collapse": "Collapse {title}",
         "kumiko.list.row.expand": "Expand {title}",
         "kumiko.list.sort.by": "Sorted by {column}",

package/dist/primitives.d.ts

@@ -43,6 +43,8 @@ export type ButtonProps = {
     readonly title?: string;
     /** Toggle state for toggle buttons — web sets `aria-pressed`; leave unset for plain buttons. */
     readonly pressed?: boolean;
+    /** Disclosure state for buttons that open a menu or panel — web sets `aria-expanded`. */
+    readonly expanded?: boolean;
     /** Breite — default="auto" (inhaltsbreit). "full" streckt CTA-Buttons auf
      *  die Container-Breite (Karten/Panels). Andere Breiten sind Layout-Sache
      *  des Containers, kein Button-Prop (Kit hält arbiträres Sizing draußen). */
@@ -77,6 +79,9 @@ export type LinkProps = {
      *  `rel` is set explicitly. */
     readonly target?: "_blank" | "_self" | "_parent" | "_top";
     readonly rel?: string;
+    /** Plain left-click handler (SPA navigation); `href` stays set for
+     *  modifier/middle clicks, which the browser handles itself. */
+    readonly onPress?: () => void;
     /** Layout-Zusätze (self-center, text-xs) — Web merged via cn(),
      *  Native-Impls ignorieren es (Präzedenz: CardProps.className). */
     readonly className?: string;
@@ -903,6 +908,8 @@ export type GridCellProps = {
  *  foreground). Custom-Impls mappen auf ihren TypeScale. */
 export type TextProps = {
     readonly variant?: "body" | "small" | "code" | "required-mark" | "muted";
+    /** Pure ornament (e.g. a separator glyph): hidden from assistive tech. */
+    readonly decorative?: boolean;
     readonly children: ReactNode;
     readonly testId?: string;
 };
@@ -1185,6 +1192,7 @@ export type ActionMenuItemSpec = {
     readonly icon?: IconKey;
     readonly disabled?: boolean;
     readonly variant?: "default" | "danger";
+    readonly testId?: string;
     readonly onSelect: () => void;
 };
 export type ActionOverflowMenuProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.331.0",
+  "version": "0.332.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.331.0",
-    "@cosmicdrift/kumiko-headless": "0.331.0",
-    "@cosmicdrift/kumiko-types": "0.331.0",
+    "@cosmicdrift/kumiko-framework": "0.332.0",
+    "@cosmicdrift/kumiko-headless": "0.332.0",
+    "@cosmicdrift/kumiko-types": "0.332.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.331.0"
+    "@cosmicdrift/kumiko-locale-de": "0.332.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,11 @@
 [
+  {
+    "version": "0.332.0",
+    "type": "improvement",
+    "title": "projectionDetail header subtitle can show several parts, each optionally linking to the referenced record",
+    "detail": "`header.subtitle` accepts a list of parts (field name or `{ field, navigate }`). Empty parts drop out, the rest are joined by a \"·\" separator, and a part with `navigate` links to the referenced record (entity or screen target, only when reachable). The Link primitive gets an optional `onPress` for SPA navigation, Text an optional `decorative` flag. `subtitleHref` stays valid with the string form only; the boot validator rejects the combination with a list.",
+    "migration": "No code change needed."
+  },
   {
     "version": "0.331.0",
     "type": "improvement",