@cosmicdrift/kumiko-renderer 0.332.0 → 0.334.0

package/dist/i18n-defaults.js

@@ -14,6 +14,7 @@ export const kumikoDefaultTranslations = {
         "kumiko.actions.delete": "Delete",
         "kumiko.actions.delete-confirm": "Confirm delete?",
         "kumiko.actions.reload": "Reload",
+        "kumiko.actions.retry": "Try again",
         "kumiko.actions.create": "New",
         "kumiko.actions.edit": "Edit",
         "kumiko.actions.view": "View",
@@ -23,6 +24,7 @@ export const kumikoDefaultTranslations = {
         "kumiko.actions.back": "Back",
         "kumiko.actions.finish": "Finish",
         "kumiko.wizard.step": "Step {current} of {total}",
+        "kumiko.wizard.up-next": "Up next",
         "kumiko.wizard.step-with-title": "Step {current} of {total} · {title}",
         "kumiko.version.update-available": "A new version is available.",
         "kumiko.toast.learn-more": "Learn more",
@@ -35,6 +37,11 @@ export const kumikoDefaultTranslations = {
         "kumiko.field.locatedTzHint": "Time local to the given location",
         "kumiko.field.reference-created-no-id": "Record was created but could not be selected automatically. Please select it manually.",
         "kumiko.field.unsupported": "This field type can't be edited here yet.",
+        "kumiko.field.writeOnly.remove": "Remove stored value",
+        "kumiko.field.writeOnly.set": "Set",
+        "kumiko.field.writeOnly.setPlaceholder": "Set — leave empty to keep it",
+        "kumiko.field.writeOnly.undo": "Undo",
+        "kumiko.field.writeOnly.willRemove": "Removed on save",
         "kumiko.field.embedded-list.add-row": "Add row",
         "kumiko.field.embedded-list.remove-row": "Remove row",
         "kumiko.field.embedded-list.duplicate-row": "Duplicate row",
@@ -76,6 +83,9 @@ export const kumikoDefaultTranslations = {
         "kumiko.list.sort.by": "Sorted by {column}",
         "kumiko.form.changed": "changed",
         "kumiko.form.on-this-page": "On this page",
+        "kumiko.form.noUnsavedChanges": "No unsaved changes",
+        "kumiko.form.discard": "Discard",
+        "kumiko.form.saveChanges": "Save changes",
         "kumiko.form.unsaved.one": "1 unsaved change",
         "kumiko.form.unsaved.other": "{count} unsaved changes",
         "kumiko.wizard.next-with-title": "Next: {title}",
@@ -152,16 +162,30 @@ export const kumikoDefaultTranslations = {
         "kumiko.contentEditor.heading2": "Heading 2",
         "kumiko.contentEditor.bulletList": "Bullet list",
         "kumiko.contentEditor.orderedList": "Numbered list",
-        "kumiko.config.source.user": "My value",
+        "kumiko.config.source.user": "Your value",
         "kumiko.config.source.tenant": "Tenant",
-        "kumiko.config.source.system": "System",
+        "kumiko.config.source.system": "Platform",
         "kumiko.config.source.appOverride": "App override",
         "kumiko.config.source.computed": "Computed",
         "kumiko.config.source.default": "Default",
         "kumiko.config.source.missing": "Missing",
-        "kumiko.config.cascade.noValue": "No value set",
-        "kumiko.config.cascade.activeMarker": "active",
-        "kumiko.config.cascade.resetTo": "Reset override ({scope})",
+        "kumiko.config.cascade.noValue": "Not set",
+        "kumiko.config.cascade.noDefault": "not set",
+        "kumiko.config.cascade.notSetRequired": "Not set. Required.",
+        "kumiko.config.cascade.activeMarker": "in use",
+        "kumiko.config.cascade.resetTo": "Reset to default",
+        "kumiko.config.cascade.resetToApp": "Reset to app value",
+        "kumiko.config.cascade.showLevels": "Show all levels",
+        "kumiko.config.cascade.hideLevels": "Hide levels",
+        "kumiko.config.cascade.on": "On",
+        "kumiko.config.cascade.off": "Off",
+        "kumiko.config.cascade.origin.tenant": "Set for this tenant. Default is {value}.",
+        "kumiko.config.cascade.origin.user": "Set by you. Default is {value}.",
+        "kumiko.config.cascade.originNoDefault.tenant": "Set for this tenant.",
+        "kumiko.config.cascade.originNoDefault.user": "Set by you.",
+        "kumiko.config.cascade.originNoDefault.system": "Set for the platform.",
+        "kumiko.config.cascade.origin.system": "Set for the platform. App default is {value}.",
+        "kumiko.config.cascade.origin.default": "Uses the default",
         "kumiko.form.error.generic": "Something went wrong.",
         "kumiko.form.error.version-conflict": "Record was modified in the meantime. Reload and try again.",
         "kumiko.form.extension.save-failed": "A custom field could not be saved.",
@@ -182,6 +206,8 @@ export const kumikoDefaultTranslations = {
         "errors.validation.invalid_type": "Invalid value.",
         "errors.validation.too_small": "Too small or too short (minimum: {minimum}).",
         "errors.validation.too_big": "Too big or too long (maximum: {maximum}).",
+        "kumiko.validation.number.min": "Must be at least {minimum}.",
+        "kumiko.validation.number.max": "Must be {maximum} or less.",
         "errors.validation.invalid_format": "Invalid format.",
         "errors.validation.not_multiple_of": "Must be a multiple of {divisor}.",
         "errors.validation.unrecognized_keys": "Unknown fields.",

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export type { DispatcherProviderProps } from "./context/dispatcher-context.js";
 export { DispatcherProvider, useDispatcher, useDispatcherStatus, useOptionalDispatcher, } from "./context/dispatcher-context.js";
 export type { DraftStorage, DraftStorageProviderProps } from "./context/draft-storage-context.js";
 export { DraftStorageProvider, useDraftStorage } from "./context/draft-storage-context.js";
+export { EmbeddedScreenProvider, useIsEmbeddedScreen } from "./context/embedded-screen-context.js";
 export type { UserRolesProviderProps } from "./context/user-roles-context.js";
 export { UserRolesProvider, useUserRoles } from "./context/user-roles-context.js";
 export { formatWhen } from "./format-when.js";
@@ -67,7 +68,7 @@ export { createStaticLocaleResolver, FormalityProvider, LocaleProvider, mergeTra
 export { kumikoDefaultTranslations } from "./i18n-defaults.js";
 export { InsideDrawerProvider, useInsideDrawer } from "./inside-drawer.js";
 export { PageHeaderCompactProvider, PageHeaderSlotAvailableProvider, usePageHeaderCompact, usePageHeaderSlotAvailable, } from "./page-header-slot.js";
-export type { ActionMenuItemSpec, ActionOverflowMenuProps, AppPrimitives, BannerProps, ButtonProps, CardOptions, CardProps, CardSlots, CopyButtonProps, CorePrimitives, DataTableDateRangeFacet, DataTableFacet, DataTableProps, DataTableRowAction, DataTableRowActionMode, DataTableSort, DataTableSortDir, DialogProps, DrawerProps, EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps, EmbeddedListTotal, FieldCellWidth, FieldProps, FillContainerProps, FormProps, FormSectionNavItem, FormWidth, GridCellProps, GridProps, HeadingProps, InputProps, JsonViewProps, LightboxProps, LinkProps, MetricBandProps, MetricProps, ModalProps, PageHeaderProps, PrimitivesProviderProps, PrimitivesRegistry, ProgressProps, ProgressTone, PromoPanelAction, PromoPanelProps, RuntimeRenderer, SecretRevealProps, SecretRevealValue, SectionProps, ShareButtonProps, StatusBadgeProps, StatusTone, StepBarProps, StickyActionBarProps, StickyPrimaryActionMarker, TabsProps, TextProps, WizardStepGroupProps, } from "./primitives.js";
+export type { ActionMenuItemSpec, ActionOverflowMenuProps, AppPrimitives, BannerProps, ButtonProps, CardOptions, CardProps, CardSlots, CopyButtonProps, CorePrimitives, DataTableDateRangeFacet, DataTableFacet, DataTableFacetChip, DataTableProps, DataTableRowAction, DataTableRowActionMode, DataTableRowGrouping, DataTableSort, DataTableSortDir, DialogProps, DrawerProps, EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps, EmbeddedListTotal, FieldCellWidth, FieldProps, FillContainerProps, FormProps, FormSectionNavItem, FormWidth, GridCellProps, GridProps, HeadingProps, InputProps, JsonViewProps, LightboxProps, LinkProps, MetricBandProps, MetricProps, ModalProps, PageHeaderProps, PrimitivesProviderProps, PrimitivesRegistry, ProgressProps, ProgressTone, PromoPanelAction, PromoPanelProps, RuntimeRenderer, SecretRevealProps, SecretRevealValue, SectionProps, ShareButtonProps, StatusBadgeProps, StatusTone, StepBarProps, StickyActionBarProps, StickyPrimaryActionMarker, TabsProps, TextProps, TrailingInputAction, WizardStepGroupProps, } from "./primitives.js";
 export { PrimitivesProvider, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, usePrimitives, } from "./primitives.js";
 export { buildWhatsAppShareUrl } from "./share-links.js";
 export { sortByAccessor } from "./sort-by-accessor.js";

package/dist/index.js

@@ -33,6 +33,7 @@ export { RenderField } from "./components/render-field.js";
 export { RenderList } from "./components/render-list.js";
 export { DispatcherProvider, useDispatcher, useDispatcherStatus, useOptionalDispatcher, } from "./context/dispatcher-context.js";
 export { DraftStorageProvider, useDraftStorage } from "./context/draft-storage-context.js";
+export { EmbeddedScreenProvider, useIsEmbeddedScreen } from "./context/embedded-screen-context.js";
 export { UserRolesProvider, useUserRoles } from "./context/user-roles-context.js";
 export { formatWhen } from "./format-when.js";
 export { REFERENCE_COMBOBOX_LIMIT, REFERENCE_LIST_LOOKUP_LIMIT, REFERENCE_SEARCH_DEBOUNCE_MS, } from "./hooks/reference-limits.js";

package/dist/primitives.d.ts

@@ -1,5 +1,5 @@
 import type { ConfigCascade, ConfigScope, ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
-import type { FieldIconKey, FormWidth, IconKey, NavIconKey, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FieldIconKey, FormWidth, IconKey, NavIconKey, RowActionDisplay, SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { FieldIssue, ListColumnViewModel, ListRowViewModel, RuntimeRenderer } from "@cosmicdrift/kumiko-headless";
 import { type ComponentType, type FormEvent, type KeyboardEvent, type ReactNode, type Ref } from "react";
 export type { RuntimeRenderer };
@@ -123,11 +123,28 @@ export type FieldProps = {
     readonly issues?: readonly FieldIssue[];
     readonly labelAppendix?: ReactNode;
     readonly fieldAppendix?: ReactNode;
+    /** Where `fieldAppendix` sits relative to the control. Default
+     *  `above-control` (a disclosure panel belongs under its label-row
+     *  trigger); `below-control` keeps sibling inputs on one line when the
+     *  appendix is a status line or an expanded detail. */
+    readonly appendixPlacement?: "above-control" | "below-control";
+    /** Help text directly under the label, above the control. */
+    readonly description?: ReactNode;
+    /** Status pill at the right end of the label row (e.g. "Saved", "Not set"). */
+    readonly status?: {
+        readonly tone: StatusTone;
+        readonly label: string;
+        readonly testId?: string;
+    };
     readonly children: ReactNode;
     /** Label-Layout. `stacked` (Default): Label über dem Control. `inline`:
      *  Control + Label nebeneinander (Box links, Label rechts) — für
      *  Checkbox/Switch-Felder (boolean), wie das shadcn-Muster. */
-    readonly layout?: "stacked" | "inline";
+    readonly layout?: "stacked" | "inline" | "row";
+    /** Marks a field whose value is set at this level (differs from the
+     *  inherited one). Only `layout="row"` draws it: a 2px primary line on the
+     *  row's left edge. Ignored by the other layouts. */
+    readonly accent?: boolean;
     /** Collapses the visible label to `sr-only` — stays associated via
      *  `htmlFor` (no separate `aria-label` needed). For tables/grids whose
      *  column header already carries the label for each row. */
@@ -141,6 +158,12 @@ export type FieldProps = {
 /** Discriminated union — jede Input-Sorte hat ihre eigene value/onChange
  *  Signatur. Custom-Impls dispatchen intern, rendern anders (Toggle
  *  statt Checkbox), oder nur einzelne kinds unterschiedlich. */
+export type TrailingInputAction = {
+    readonly icon: "clear" | "undo";
+    readonly label: string;
+    readonly onPress: () => void;
+    readonly testId?: string;
+};
 export type InputProps = {
     readonly kind: "text";
     readonly id: string;
@@ -198,6 +221,9 @@ export type InputProps = {
      *  Browser-Password-Manager nutzen das für die Speicherentscheidung.
      *  Native: textContentType="password" / "newPassword". */
     readonly autoComplete?: "current-password" | "new-password";
+    /** Icon button inside the field's trailing edge (clear a stored value,
+     *  undo a pending removal). `label` is its accessible name + tooltip. */
+    readonly trailingAction?: TrailingInputAction;
     readonly testId?: string;
 } | {
     readonly kind: "number";
@@ -299,8 +325,13 @@ export type InputProps = {
     readonly options: readonly string[] | readonly {
         readonly value: string;
         readonly label: string;
-        /** Second line under the label; shown by `radioVariant="card"`. */
+        /** Muted second line under the label (radio list and dropdown items;
+         *  the dropdown search matches it too). */
         readonly description?: string;
+        /** Group heading. Groups form in order of first occurrence; options
+         *  without a group stay ungrouped and come before all groups. Options
+         *  with description or group never render as a segmented control. */
+        readonly group?: string;
     }[];
     readonly disabled?: boolean;
     readonly required?: boolean;
@@ -494,6 +525,10 @@ export type DataTableRowAction = {
      *  drives both the icon-left-of-text render and the icon-only collapse
      *  rule (see `shouldRenderActionsIconOnly`). */
     readonly icon?: IconKey;
+    /** Author-chosen inline form (`RowAction.display`). Set: the action stays
+     *  inline even in the adaptive layout and is exempt from the automatic
+     *  icon-only collapse. */
+    readonly display?: RowActionDisplay;
 };
 /** Teil-C action-icon collapse rule: a group of more than two actions where
  *  every member carries an icon renders icon-only instead of wall-to-wall
@@ -513,6 +548,22 @@ export type DataTableFacet = {
         readonly value: string;
         readonly label: string;
     }[];
+    /** Present: render the facet as a row of single-choice toggle chips instead
+     *  of a dropdown. A chip is pressed while the selection equals its values. */
+    readonly chips?: readonly DataTableFacetChip[];
+    /** Chips only: show each chip's `count` next to its label. */
+    readonly showCounts?: boolean;
+    /** Chips only: hide chips whose `count` is 0 (unless pressed). */
+    readonly hideEmpty?: boolean;
+};
+export type DataTableFacetChip = {
+    readonly id: string;
+    /** Translated chip label. */
+    readonly label: string;
+    /** Selection a click sets; `[]` clears the facet. */
+    readonly values: readonly string[];
+    /** Matching row count, undefined while unknown. */
+    readonly count?: number;
 };
 export type DataTableDateRangeFacet = {
     /** The facet's namespace (its date field) — a key, not a filter value. */
@@ -522,9 +573,19 @@ export type DataTableDateRangeFacet = {
     readonly from: string;
     readonly to: string;
 };
+/** Splits rows into collapsible groups (order of first appearance). A
+ *  renderer without grouping support shows the flat list. */
+export type DataTableRowGrouping = {
+    readonly keyOf: (row: ListRowViewModel) => string;
+    readonly headerLabel: (groupKey: string, rows: readonly ListRowViewModel[]) => string;
+    readonly startsCollapsed: (groupKey: string) => boolean;
+};
 export type DataTableProps = {
     readonly columns: readonly ListColumnViewModel[];
     readonly rows: readonly ListRowViewModel[];
+    readonly rowGrouping?: DataTableRowGrouping;
+    /** Tints a row. Renderers without row tinting ignore it. */
+    readonly rowTone?: (row: ListRowViewModel) => SelectOptionTone | undefined;
     readonly onRowClick?: (row: ListRowViewModel) => void;
     /** Aktuelle Sortierung (oder null = unsorted). Wenn columns ein
      *  `sortable: true`-Feld haben und onSortChange gesetzt ist, rendert
@@ -807,8 +868,8 @@ export type FormProps = {
      *  detail screens (which also fill the height) do not set it. Native impls
      *  may ignore this prop. */
     readonly screenForm?: boolean;
-    /** Number of unsaved changes, shown in the pinned footer. Omitted in create
-     *  mode and when nothing changed — the footer then shows no status. */
+    /** Number of unsaved changes, shown in the pinned footer; 0 shows the quiet
+     *  "No unsaved changes" status. Omitted (create mode) — no status at all. */
     readonly unsavedCount?: number;
     /** Drawer-hosted forms: context box above the fields. */
     readonly summary?: {
@@ -840,6 +901,9 @@ export type SectionProps = {
      *  title-less/subtitle-less Section still draws the row when `actions`
      *  is set, so a hideTitle tabs-Section with actions isn't stranded. */
     readonly actions?: ReactNode;
+    /** "settings-list": title + subtitle form a left header column and the
+     *  children (field rows) the right one on `md:` and up. Default "stacked". */
+    readonly layout?: "stacked" | "settings-list";
     /** "destructive" marks the Section as a warning/danger area (e.g. account
      *  deletion, restrict processing) — border color only, no content change.
      *  Default "default" (normal card border). */
@@ -890,6 +954,9 @@ export type GridProps = {
     /** Fields flow left to right in wrapping rows sized by `GridCell.width`
      *  instead of equal-width tracks (screen forms and drawers). */
     readonly flow?: boolean;
+    /** One full-width row per child, separated by hairlines — the field rows of
+     *  a `settings-list` section. Wins over `columns`/`flow`. */
+    readonly list?: boolean;
 };
 /** Width class of a field cell inside a `flow` grid: sized by what the field holds. */
 export type FieldCellWidth = "text" | "number" | "money" | "date" | "timestamp" | "select" | "full" | "toggle";
@@ -980,6 +1047,8 @@ export type DrawerProps = {
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;
     readonly title?: string;
+    /** Muted line under the title. */
+    readonly subtitle?: string;
     readonly children: ReactNode;
     readonly testId?: string;
 };
@@ -1004,19 +1073,19 @@ export type ConfigSourceBadgeProps = {
      *  rule as ConfigCascadeView's toDisplayLevels. */
     readonly screenScope?: ConfigScope;
 };
-/** Collapsible cascade-view for a config-edit field. Split into two slots
- *  (#429): "trigger" is the collapsed ▶ + source + value line for the label
- *  row; "panel" is the expanded cascade + reset shown below the input. In
- *  split mode the screen owns the `expanded` state (both slots share it);
- *  without `slot` the component renders both with its own state. */
+/** Cascade view for a config-edit field: one origin line ("Set for this
+ *  tenant", "Uses the default", …), a reset action for an own value, and a
+ *  disclosure listing every level. Owns its disclosure state. */
 export type ConfigCascadeViewProps = {
     readonly cascade: ConfigCascade;
     readonly screenScope: ConfigScope;
     readonly onReset?: (key: string, scope: ConfigScope) => void;
     readonly qualifiedKey?: string;
-    readonly slot?: "trigger" | "panel";
-    readonly expanded?: boolean;
-    readonly onToggle?: () => void;
+    /** The key declares `required: true` — a missing value reads "Not set. Required.". */
+    readonly required?: boolean;
+    /** Display form of a level value (e.g. a select's label instead of its raw
+     *  value). Absent = the raw value; a missing value keeps the no-value text. */
+    readonly renderValue?: (value: string | number | boolean) => ReactNode;
 };
 /** Card-Slots — benannte Inhalts-Regionen, alle optional. Neue Slots später =
  *  rein additiv → Consumer müssen NIE migriert werden. `header` ist der Escape-
@@ -1050,6 +1119,11 @@ export type CardOptions = {
     /** false drops border, background, shadow and radius but keeps padding and
      *  header slots — a panel inside a host surface such as a tab panel. Default true. */
     readonly framed?: boolean;
+    /** The card is the whole screen body (secretMint reveal and done phase):
+     *  no frame, the shared screen insets and width of form screens, children
+     *  stacked with a gap. Without it such a screen sits raw against the
+     *  shell edge. Default false. */
+    readonly screenBody?: boolean;
 };
 /** Generische Card-Chrome (border/bg/radius/shadow + Header/Body/Footer) als
  *  Primitive — eine Quelle für alle Card-Flächen, statt pro App nachgebaut.
@@ -1098,6 +1172,14 @@ export type StepBarProps = {
     /** Vertical only: rail heading ("Step 4 of 6") and optional description. */
     readonly heading?: string;
     readonly description?: string;
+    /** Vertical only: line under each step label, same order as `steps`. */
+    readonly subtitles?: readonly (string | undefined)[];
+    /** Vertical only: box under the rail announcing the next step. */
+    readonly upNext?: {
+        readonly heading: string;
+        readonly title: string;
+        readonly subtitle?: string;
+    };
     readonly testId?: string;
     readonly compactTestId?: string;
 };

package/package.json

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

package/src/changes.json

@@ -1,4 +1,11 @@
 [
+  {
+    "version": "0.333.0",
+    "type": "improvement",
+    "title": "New optional screen options for facet chips, default filters, row action display, drawer titles, footer actions, grouped related lists and wizard side info",
+    "detail": "entityList: `facets` (per-field `display: \"chips\"`, `showCounts`, `hideEmpty`, `extraOptions`, or `false` to hide), `defaultFilters` (initial value only, the URL wins, \"no filter\" stays chosen) and `rowActionMode`. Row actions get `display: \"button\" | \"link\" | \"icon\"`; with `display` set an action stays inline next to the kebab. Drawer actions get `title` / `subtitle` (i18n keys, `{param}` filled from the row prefill). Edit fields get `submit: false` (kept out of the payload), actionForm gets `footerActions` (patch values, then submit), relatedList gets `groupBy` / `rowTone` / `rowActionMode`. Wizard sections get `subtitle`, `layout.wizard.aside.upNext` adds an \"up next\" box, entityEdit gets `titleTemplate`. `Button` gets a `pressed` style, the DataTable contract `rowGrouping` / `rowTone`, `StepBar` `subtitles` / `upNext`, `Drawer` `subtitle`.\n- Screenshot runner: `SCREENSHOT_DESKTOP_WIDTH` overrides the desktop viewport width (default 1920).",
+    "migration": "No code change needed."
+  },
   {
     "version": "0.332.0",
     "type": "improvement",