@cosmicdrift/kumiko-renderer 0.187.0 → 0.189.0

package/src/components/render-field.tsx

@@ -1,5 +1,9 @@
 import type { EntityEditScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
-import type { EditFieldViewModel, FieldIssue } from "@cosmicdrift/kumiko-headless";
+import {
+  currencyDecimals,
+  type EditFieldViewModel,
+  type FieldIssue,
+} from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import { useAppFeatures } from "../app/app-features-context";
 import { toKebab } from "../app/qn";
@@ -319,7 +323,13 @@ function renderInput({
   } as const;
 
   switch (field.type) {
+    // decimal/bigInt are both plain numbers on the wire (fieldToZod:
+    // z.number() / z.number().int().safe()) — the number input's onChange
+    // already emits `number | undefined`, so no extra coercion is needed
+    // beyond what "number" already does (#1925).
     case "number":
+    case "decimal":
+    case "bigInt":
       return (
         <Input
           kind="number"
@@ -329,16 +339,44 @@ function renderInput({
           {...(field.icon !== undefined && { icon: field.icon })}
         />
       );
+    case "tz":
+      return (
+        <Input
+          kind="tz"
+          {...common}
+          value={stringValue(field.value)}
+          onChange={(v) => onChange(v)}
+        />
+      );
+    case "multiSelect": {
+      const rawOptions = field.options ?? [];
+      const labels = field.optionLabels;
+      const multiSelectOptions =
+        labels !== undefined
+          ? rawOptions.map((value: string) => ({ value, label: labels[value] ?? value }))
+          : rawOptions.map((value: string) => ({ value, label: value }));
+      const arrayValue = Array.isArray(field.value) ? (field.value as readonly string[]) : [];
+      return (
+        <Input
+          kind="combobox"
+          {...common}
+          multiple
+          value={arrayValue}
+          onChange={(v) => onChange(v)}
+          options={multiSelectOptions}
+        />
+      );
+    }
     case "money": {
-      const moneyDef = field as unknown as { currency?: string; locale?: string };
+      const currency = field.currency ?? "EUR";
       return (
         <Input
           kind="money"
           {...common}
-          value={numberValue(field.value)}
-          onChange={(v) => onChange(v)}
-          {...(moneyDef.currency !== undefined && { currency: moneyDef.currency })}
-          locale={moneyDef.locale ?? appLocale}
+          value={moneyMinorValue(field.value, currency)}
+          onChange={(v) => onChange(moneyPayload(v, currency))}
+          currency={currency}
+          locale={appLocale}
         />
       );
     }
@@ -428,14 +466,19 @@ function renderInput({
       );
     }
     // embedded (without embeddedListCells — that's embeddedList, which has
-    // had its own EmbeddedListField widget since #1838), jsonb and
-    // multiSelect carry objects/arrays. Without a dedicated widget these
-    // must NOT fall through to a text input: stringValue() turns them into
-    // "[object Object]" / "a,b", and saving that overwrites the real data
-    // with the mangled string (#1834).
+    // had its own EmbeddedListField widget since #1838) and jsonb carry
+    // arbitrary objects; files/images carry a FileRef-UUID array and have
+    // no multi-upload widget yet (deliberately deferred, #1925). Without a
+    // dedicated widget these must NOT fall through to a text input:
+    // stringValue() turns them into "[object Object]" / a comma-joined
+    // string, and saving that overwrites the real data with the mangled
+    // string (#1834). A `required: true` on any of these is caught loudly
+    // at boot (validateNoWidgetRequiredField in the framework package)
+    // instead of silently failing here.
     case "embedded":
     case "jsonb":
-    case "multiSelect":
+    case "files":
+    case "images":
       return (
         <Banner id={id} variant="info">
           {t("kumiko.field.unsupported")}
@@ -443,8 +486,11 @@ function renderInput({
       );
     default: {
       // text + unknown scalar type → text input. If TextFieldDef.multiline
-      // is set (the view-model carries it), the renderer switches to textarea.
-      if (field.type === "text" && field.multiline) {
+      // is set (the view-model carries it), the renderer switches to
+      // textarea. longText always renders a textarea — that's the point of
+      // the type — regardless of whether `multiline` is set; `multiline`
+      // only supplies an optional `{ rows }` override for it (#1925).
+      if (field.type === "longText" || (field.type === "text" && field.multiline)) {
         const rows = typeof field.multiline === "object" ? field.multiline.rows : undefined;
         return (
           <Input
@@ -479,6 +525,32 @@ function numberValue(v: unknown): number | "" {
   return typeof v === "number" ? v : Number(v);
 }
 
+// Read/initial value → MoneyInput's minor-units contract. The server's
+// read shape is `{amount, currency, amountMinor}` in MAJOR units — deliberately
+// NOT reading `amountMinor` here: the server derives it via a flat
+// MINOR_UNIT_SCALE=100 (money.ts), which disagrees with currencyDecimals for
+// zero-decimal currencies like JPY, so it would double-scale JPY amounts.
+// Deriving from `amount * 10**currencyDecimals(currency)` keeps this the
+// exact inverse of moneyPayload below. A bare number is passed through
+// unchanged — legacy/malformed data, already in minor units.
+function moneyMinorValue(v: unknown, currency: string): number | "" {
+  if (v === undefined || v === null || v === "") return "";
+  if (typeof v === "number") return v;
+  if (typeof v === "object") {
+    const amount = (v as { amount?: unknown }).amount;
+    if (typeof amount === "number") return Math.round(amount * 10 ** currencyDecimals(currency));
+  }
+  return "";
+}
+
+// MoneyInput's minor-units onChange → the server payload shape
+// (`z.object({amount, currency})`, schema-builder.ts) — MAJOR units, no
+// `amountMinor` (the server derives that itself on write).
+function moneyPayload(minorUnits: number | undefined, currency: string): unknown {
+  if (minorUnits === undefined) return undefined;
+  return { amount: minorUnits / 10 ** currencyDecimals(currency), currency };
+}
+
 // locatedTimestamp-Feldwert: das Read-Wrapper liefert `{ at, tz, utc }`; leer
 // (noch nicht gesetzt) → "" als Empty-Sentinel, analog money/timestamp.
 function locatedValue(v: unknown): { at: string; tz: string; utc?: string } | "" {

package/src/context/draft-storage-context.tsx

@@ -0,0 +1,39 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+// Client-side draftId storage for RenderEdit's create-mode draftKey (issue
+// #1913) — `${screen.id}:new:${draftId}` needs the same `draftId` across a
+// same-tab reload so the wizard resumes the right row instead of the leader
+// on the last-write-wins upsert. Contract only, platform-neutral — the
+// concrete impl (window.sessionStorage on web) is injected by the platform
+// package, same pattern as NavApi/window.history in app/nav.tsx. This
+// package touches no browser storage itself.
+export type DraftStorage = {
+  readonly getDraftId: (screenId: string) => string | null;
+  readonly setDraftId: (screenId: string, draftId: string) => void;
+  readonly clearDraftId: (screenId: string) => void;
+};
+
+// No-op default: without a mounted provider (unwired platform, or a test
+// that doesn't care about drafts) same-tab reload just loses draftId
+// persistence — RenderEdit falls back to its `form-draft:query:list`
+// resume path, the same one a cleared sessionStorage takes on the web.
+const noopDraftStorage: DraftStorage = {
+  getDraftId: () => null,
+  setDraftId: () => {},
+  clearDraftId: () => {},
+};
+
+const DraftStorageContext = createContext<DraftStorage>(noopDraftStorage);
+
+export type DraftStorageProviderProps = {
+  readonly value: DraftStorage;
+  readonly children: ReactNode;
+};
+
+export function DraftStorageProvider({ value, children }: DraftStorageProviderProps): ReactNode {
+  return <DraftStorageContext value={value}>{children}</DraftStorageContext>;
+}
+
+export function useDraftStorage(): DraftStorage {
+  return useContext(DraftStorageContext);
+}

package/src/i18n-defaults.ts

@@ -22,6 +22,12 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.actions.edit": "Bearbeiten",
     "kumiko.actions.copyLink": "Link kopieren",
     "kumiko.actions.copyLinkCopied": "Kopiert!",
+    "kumiko.actions.next": "Weiter",
+    "kumiko.actions.back": "Zurück",
+    "kumiko.actions.finish": "Abschließen",
+
+    // Wizard step chrome (RenderEdit layout.mode="wizard").
+    "kumiko.wizard.step": "Schritt {current} von {total}",
 
     // Version — Update-Awareness-Banner (UpdateChecker).
     "kumiko.version.update-available": "Eine neue Version ist verfügbar.",
@@ -130,6 +136,8 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.form.error.version-conflict":
       "Datensatz wurde zwischenzeitlich geändert. Lade neu und versuche es erneut.",
     "kumiko.form.extension.save-failed": "Ein Zusatzfeld konnte nicht gespeichert werden.",
+    "kumiko.form.draft.resume-multiple":
+      "Mehrere offene Entwürfe für dieses Formular gefunden. Welchen möchtest du fortsetzen?",
 
     // Validation — Default-Reason-Codes aus dem Framework. App-Code
     // kann eigene Codes via Validation-Hooks reinwerfen; die hier sind
@@ -192,6 +200,11 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.actions.edit": "Edit",
     "kumiko.actions.copyLink": "Copy link",
     "kumiko.actions.copyLinkCopied": "Copied!",
+    "kumiko.actions.next": "Next",
+    "kumiko.actions.back": "Back",
+    "kumiko.actions.finish": "Finish",
+
+    "kumiko.wizard.step": "Step {current} of {total}",
 
     "kumiko.version.update-available": "A new version is available.",
 
@@ -283,6 +296,8 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "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.",
+    "kumiko.form.draft.resume-multiple":
+      "Found multiple open drafts for this form. Which one do you want to resume?",
 
     "kumiko.validation.required": "Required.",
     "kumiko.validation.invalid": "Invalid value.",

package/src/index.ts

@@ -69,7 +69,11 @@ export { lastSegment } from "./app/qn";
 export type { VariableChipsProps } from "./app/variable-chips";
 export { VariableChips } from "./app/variable-chips";
 export { dispatcherErrorText, WriteFailedError } from "./app/write-failed-error";
-export type { RenderEditProps } from "./components/render-edit";
+export type {
+  RenderEditChangeState,
+  RenderEditControls,
+  RenderEditProps,
+} from "./components/render-edit";
 export { RenderEdit } from "./components/render-edit";
 export type { RenderFieldProps } from "./components/render-field";
 export { RenderField } from "./components/render-field";
@@ -82,6 +86,8 @@ export {
   useDispatcherStatus,
   useOptionalDispatcher,
 } from "./context/dispatcher-context";
+export type { DraftStorage, DraftStorageProviderProps } from "./context/draft-storage-context";
+export { DraftStorageProvider, useDraftStorage } from "./context/draft-storage-context";
 export type { UserRolesProviderProps } from "./context/user-roles-context";
 export { UserRolesProvider, useUserRoles } from "./context/user-roles-context";
 export { formatWhen } from "./format-when";
@@ -169,6 +175,7 @@ export type {
   ModalProps,
   PrimitivesProviderProps,
   PrimitivesRegistry,
+  ProgressProps,
   RuntimeRenderer,
   SectionProps,
   TextProps,

package/src/primitives.tsx

@@ -408,6 +408,17 @@ export type InputProps =
       readonly required?: boolean;
       readonly hasError?: boolean;
     }
+  | {
+      readonly kind: "tz";
+      readonly id: string;
+      readonly name: string;
+      /** IANA zone name, e.g. "Europe/Berlin". Empty-state = "". */
+      readonly value: string;
+      readonly onChange: (v: string | undefined) => void;
+      readonly disabled?: boolean;
+      readonly required?: boolean;
+      readonly hasError?: boolean;
+    }
   | {
       readonly kind: "textarea";
       readonly id: string;
@@ -656,18 +667,14 @@ export type EmbeddedListInputProps = {
 
 export type { FormWidth };
 
-/** Submit-Wrapper. Web: `<form onSubmit>`, Native: View das einen
- *  onSubmit-Callback via Button-Press triggert. `onSubmit` bekommt
- *  eine abstrakte Signatur (keine FormEvent) damit Native-Impls das
- *  sinnvoll füllen können.
+/** Submit wrapper. Web: `<form onSubmit>`, native: a View that triggers an
+ *  onSubmit callback via button press. `onSubmit` gets an abstract
+ *  signature (no FormEvent) so native impls can fill it meaningfully.
  *
- *  `title`: linker Slot der sticky-top Bar — typisch der Screen-Titel
- *  ("Neuer Eintrag", "Bestellung bearbeiten"). Wenn gesetzt, rendert
- *  die Bar mit `justify-between` (Title links, Actions rechts).
- *  `actions`: optionaler Slot für die primären Form-Aktionen (Save,
- *  Cancel). Web rendert die Bar sticky-top, damit der Save-Button
- *  bei langen Forms beim Scrollen erreichbar bleibt. Native-Impls
- *  dürfen denselben Slot z. B. als Bottom-Bar rendern. */
+ *  `title`: slot in the card header. `actions`: optional slot for the
+ *  primary form actions (Save, Cancel) — renders as a footer row at the
+ *  end of the card (normal document flow). Native impls may render the
+ *  same slot as a bottom bar instead. */
 export type FormProps = {
   readonly onSubmit: (e?: FormEvent) => void;
   readonly children: ReactNode;
@@ -681,6 +688,12 @@ export type FormProps = {
    *  (`packages/types/src/screen.ts`, EditLayout.width, #1676). Native
    *  impls may ignore this prop (no width constraint there). */
   readonly width?: FormWidth;
+  /** Pins `actions` to the viewport bottom on narrow screens (`<640px`)
+   *  instead of normal document flow, so it stays reachable when a virtual
+   *  keyboard shrinks the visible viewport (fw#1918). Desktop/tablet
+   *  unaffected. Native impls may ignore this prop (already bottom-bar by
+   *  convention there). */
+  readonly stickyActions?: boolean;
 };
 
 /** Titled Gruppe von Feldern. Web: `<fieldset>` + `<legend>`, Native:
@@ -863,6 +876,13 @@ export type CardProps = {
   readonly testId?: string;
 };
 
+/** Determinate progress bar (e.g. wizard step progress). `value` is a
+ *  0..1 fraction, not a percentage — implementations scale for display. */
+export type ProgressProps = {
+  readonly value: number;
+  readonly testId?: string;
+};
+
 // ---- Core-Registry (Kumiko-eigene Primitives) ----
 
 export type CorePrimitives = {
@@ -888,6 +908,10 @@ export type CorePrimitives = {
   readonly ConfigSourceBadge: ComponentType<ConfigSourceBadgeProps>;
   readonly ConfigCascadeView: ComponentType<ConfigCascadeViewProps>;
   readonly Link: ComponentType<LinkProps>;
+  /** Optional (unlike the other Core-Primitives) so existing partial
+   *  CorePrimitives mocks in tests keep compiling — additive rollout of
+   *  a new primitive shouldn't force every test double to grow a stub. */
+  readonly Progress?: ComponentType<ProgressProps>;
 };
 
 /** Offene Extension-Zone für App-eigene Primitives. Devs erweitern