@cosmicdrift/kumiko-renderer-web 0.187.0 → 0.189.0

package/src/__tests__/test-utils.tsx

@@ -21,6 +21,7 @@ import {
 } from "@cosmicdrift/kumiko-headless";
 import {
   createStaticLocaleResolver,
+  type DraftStorage,
   kumikoDefaultTranslations,
   type LiveEventSubscriber,
   LiveEventsProvider,
@@ -163,4 +164,27 @@ export function createMockDispatcher(options: MockDispatcherOptions = {}): Dispa
   };
 }
 
+// ---------------------------------------------------------------------------
+// Fake-DraftStorage-Helper
+// ---------------------------------------------------------------------------
+
+/** In-memory DraftStorage for tests that need RenderEdit's create-mode
+ *  draftId to survive a same-tab remount (issue #1913) — the same role
+ *  `sessionStorage` plays for `createBrowserDraftStorage()` in production.
+ *  Fresh Map per call, so tests stay isolated from one another; wrap the
+ *  SAME instance around both renders of a "simulated reload" test to prove
+ *  persistence across the remount. */
+export function createFakeDraftStorage(): DraftStorage {
+  const store = new Map<string, string>();
+  return {
+    getDraftId: (screenId) => store.get(screenId) ?? null,
+    setDraftId: (screenId, draftId) => {
+      store.set(screenId, draftId);
+    },
+    clearDraftId: (screenId) => {
+      store.delete(screenId);
+    },
+  };
+}
+
 export * from "@testing-library/react";

package/src/__tests__/wizard-form-validation.test.tsx

@@ -0,0 +1,73 @@
+// fw#1910: the auto-wired entityEdit path never set RenderEdit's `schema`
+// prop, so the wizard's per-step "Next" validation was a no-op — a
+// required field left empty on step 1 still advanced to step 2. This test
+// covers the fix end to end (KumikoScreen → EntityEditCreateBody →
+// RenderEdit) with real DOM primitives, not a hand-rolled unit call.
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen } from "./test-utils";
+
+const profileEntity = {
+  fields: {
+    fullName: { type: "text", required: true },
+    email: { type: "text", required: false },
+  },
+} as unknown as EntityDefinition;
+
+const wizardScreen: EntityEditScreenDefinition = {
+  id: "profile-edit",
+  type: "entityEdit",
+  entity: "profile",
+  layout: {
+    mode: "wizard",
+    sections: [
+      { title: "Step 1", fields: ["fullName"] },
+      { title: "Step 2", fields: ["email"] },
+    ],
+  },
+};
+
+const schema: FeatureSchema = {
+  featureName: "demo",
+  entities: { profile: profileEntity },
+  screens: [wizardScreen],
+};
+
+function renderWizard() {
+  return render(
+    <DispatcherProvider dispatcher={createMockDispatcher()}>
+      <KumikoScreen schema={schema} qn="demo:screen:profile-edit" />
+    </DispatcherProvider>,
+  );
+}
+
+describe("entityEdit wizard — presence validation on Next (fw#1910)", () => {
+  test("empty required field blocks the step transition and shows a field error", async () => {
+    renderWizard();
+
+    await userEvent.click(screen.getByTestId("render-edit-wizard-next"));
+
+    expect(screen.getByTestId("render-edit-wizard-step-label").textContent).toContain("1");
+    expect(screen.getByTestId("field-fullName-errors")).toBeTruthy();
+    // Step 2's field never mounts — the transition was blocked.
+    expect(document.querySelector("#kumiko-edit-email")).toBeNull();
+  });
+
+  test("filling the required field allows Next to advance to step 2", async () => {
+    const { container } = renderWizard();
+
+    const fullNameInput = container.querySelector("#kumiko-edit-fullName");
+    expect(fullNameInput).toBeTruthy();
+    await userEvent.type(fullNameInput as Element, "Ada Lovelace");
+    await userEvent.click(screen.getByTestId("render-edit-wizard-next"));
+
+    expect(screen.getByTestId("render-edit-wizard-step-label").textContent).toContain("2");
+    expect(screen.queryByTestId("field-fullName-errors")).toBeNull();
+  });
+});

package/src/app/create-app.tsx

@@ -16,6 +16,8 @@ import {
   CustomScreensProvider,
   DashboardBodyProvider,
   DispatcherProvider,
+  type DraftStorage,
+  DraftStorageProvider,
   type ExtensionSectionComponent,
   ExtensionSectionsProvider,
   type FeatureSchema,
@@ -47,6 +49,7 @@ import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { WebDashboardBody } from "./dashboard-body";
+import { createBrowserDraftStorage } from "./draft-storage";
 import { useBrowserNavApi } from "./nav";
 import { NavProvidersProvider } from "./nav-providers-context";
 import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
@@ -133,6 +136,13 @@ export type CreateKumikoAppOptions = {
   readonly schema?: AppSchema | FeatureSchema;
   readonly rootId?: string;
   readonly dispatcher?: Dispatcher;
+  /** RenderEdit's create-mode draftId storage (issue #1913) — where a
+   *  same-tab reload finds which of several parallel create-sessions on a
+   *  screen to resume. Default: `createBrowserDraftStorage()`
+   *  (sessionStorage-backed). Apps that don't want any client-side draftId
+   *  persistence can pass a no-op impl; RenderEdit still resolves via its
+   *  `form-draft:query:list` mount-time fallback either way. */
+  readonly draftStorage?: DraftStorage;
   readonly screenQn?: string;
   readonly translate?: Translate;
   readonly onRowClick?: (row: ListRowViewModel, entityName: string) => void;
@@ -274,6 +284,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   }
 
   const dispatcher = options.dispatcher ?? createLiveDispatcher();
+  const draftStorage = options.draftStorage ?? createBrowserDraftStorage();
   const primitives: PrimitivesRegistry = { ...defaultPrimitives, ...(options.primitives ?? {}) };
   const liveEvents = createEventSourceLiveEvents();
 
@@ -389,26 +400,28 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
         <PrimitivesProvider value={primitives}>
           <AppFeaturesProvider features={app.features}>
             <DispatcherProvider dispatcher={dispatcher}>
-              <LiveEventsProvider value={liveEvents}>
-                <DashboardBodyProvider value={WebDashboardBody}>
-                  <CustomScreensProvider value={customScreens}>
-                    <ColumnRenderersProvider value={columnRenderers}>
-                      <ContentEditorsProvider value={contentEditors}>
-                        <ExtensionSectionsProvider value={extensionSectionComponents}>
-                          <NavProvidersProvider value={navProviders} entities={navEntities}>
-                            <ResolversProvider resolvers={resolvers}>
-                              <ToastProvider>
-                                <UpdateChecker />
-                                {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                              </ToastProvider>
-                            </ResolversProvider>
-                          </NavProvidersProvider>
-                        </ExtensionSectionsProvider>
-                      </ContentEditorsProvider>
-                    </ColumnRenderersProvider>
-                  </CustomScreensProvider>
-                </DashboardBodyProvider>
-              </LiveEventsProvider>
+              <DraftStorageProvider value={draftStorage}>
+                <LiveEventsProvider value={liveEvents}>
+                  <DashboardBodyProvider value={WebDashboardBody}>
+                    <CustomScreensProvider value={customScreens}>
+                      <ColumnRenderersProvider value={columnRenderers}>
+                        <ContentEditorsProvider value={contentEditors}>
+                          <ExtensionSectionsProvider value={extensionSectionComponents}>
+                            <NavProvidersProvider value={navProviders} entities={navEntities}>
+                              <ResolversProvider resolvers={resolvers}>
+                                <ToastProvider>
+                                  <UpdateChecker />
+                                  {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                                </ToastProvider>
+                              </ResolversProvider>
+                            </NavProvidersProvider>
+                          </ExtensionSectionsProvider>
+                        </ContentEditorsProvider>
+                      </ColumnRenderersProvider>
+                    </CustomScreensProvider>
+                  </DashboardBodyProvider>
+                </LiveEventsProvider>
+              </DraftStorageProvider>
             </DispatcherProvider>
           </AppFeaturesProvider>
         </PrimitivesProvider>

package/src/app/draft-storage.ts

@@ -0,0 +1,59 @@
+// Browser-backed DraftStorage default for createKumikoApp (issue #1913).
+//
+// Persists a create-mode draftId per screen in `sessionStorage` — same-tab
+// scope only (deliberately, unlike browser-locale.ts's localStorage): the
+// draft row itself already survives a new tab / cleared storage via
+// RenderEdit's `form-draft:query:list` mount-time fallback, so this is only
+// about not losing the draftId on an accidental same-tab reload.
+
+import type { DraftStorage } from "@cosmicdrift/kumiko-renderer";
+
+export type CreateBrowserDraftStorageOptions = {
+  /** sessionStorage-key prefix, one entry per screenId gets appended.
+   *  Default: `"kumiko:draft-id:"`. */
+  readonly storagePrefix?: string;
+};
+
+function keyFor(prefix: string, screenId: string): string {
+  return `${prefix}${screenId}`;
+}
+
+/** Default DraftStorage when createKumikoApp boots without one. Guards every
+ *  sessionStorage call — Safari private mode and storage-disabled browsers
+ *  throw on access, and a lost draftId just falls back to the `list` resume
+ *  path (same UX as a genuinely cleared storage), not a broken form. */
+export function createBrowserDraftStorage(
+  options: CreateBrowserDraftStorageOptions = {},
+): DraftStorage {
+  const prefix = options.storagePrefix ?? "kumiko:draft-id:";
+  return {
+    getDraftId: (screenId) => {
+      if (typeof sessionStorage === "undefined") return null;
+      try {
+        return sessionStorage.getItem(keyFor(prefix, screenId));
+      } catch {
+        return null;
+      }
+    },
+    setDraftId: (screenId, draftId) => {
+      // skip: no sessionStorage in this environment (SSR, disabled) — the
+      // draftId just stays in-memory-only for this render.
+      if (typeof sessionStorage === "undefined") return;
+      try {
+        sessionStorage.setItem(keyFor(prefix, screenId), draftId);
+      } catch {
+        // Persistence failure isn't fatal — the draft stays usable in the
+        // current tab, only a reload would lose the draftId.
+      }
+    },
+    clearDraftId: (screenId) => {
+      // skip: no sessionStorage in this environment — nothing to clear.
+      if (typeof sessionStorage === "undefined") return;
+      try {
+        sessionStorage.removeItem(keyFor(prefix, screenId));
+      } catch {
+        // skip: nothing to clean up if storage is unreachable.
+      }
+    },
+  };
+}

package/src/index.ts

@@ -36,6 +36,8 @@ export type {
   PrimitivesProviderProps,
   PrimitivesRegistry,
   RadiusTokens,
+  RenderEditChangeState,
+  RenderEditControls,
   RenderEditProps,
   RenderFieldProps,
   RenderListProps,
@@ -93,6 +95,8 @@ export type { CreateKumikoAppOptions } from "./app/create-app";
 export { createKumikoApp } from "./app/create-app";
 export type { CreatePublicSurfaceOptions, PublicRoute } from "./app/create-public-surface";
 export { createPublicSurface } from "./app/create-public-surface";
+export type { CreateBrowserDraftStorageOptions } from "./app/draft-storage";
+export { createBrowserDraftStorage } from "./app/draft-storage";
 export type { KumikoLinkProps } from "./app/nav";
 export { KumikoLink, useBrowserNavApi } from "./app/nav";
 export { PlainContentEditor } from "./app/plain-content-editor";

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -618,6 +618,19 @@ describe("EmbeddedListInput — desktop table width (solon#107)", () => {
     const headers = desktop.querySelectorAll("th");
     expect(headers[0]?.className).toContain("min-w-[10rem]");
     expect(headers[1]?.className).toContain("w-36");
-    expect(headers[2]?.className).toContain("w-36");
+    expect(headers[2]?.className).toContain("w-44");
+  });
+
+  test("a money column is wider than a decimal/number column (framework#1880)", () => {
+    const columns: readonly EmbeddedListColumn[] = [
+      { field: "quantity", label: "Qty", type: "number", required: true, derived: false },
+      { field: "amount", label: "Amount", type: "money", required: false, derived: true },
+    ];
+    const rows = [{ quantity: 1, amount: 100 }];
+    renderWithLocale(<EmbeddedListInput {...baseProps({ columns, rows })} />);
+    const desktop = screen.getByTestId("lines-desktop");
+    const headers = desktop.querySelectorAll("th");
+    expect(headers[0]?.className).toContain("w-36");
+    expect(headers[1]?.className).toContain("w-44");
   });
 });

package/src/primitives/embedded-list-input.tsx

@@ -47,12 +47,13 @@ const FOCUSABLE_SELECTOR = "input:not([type=hidden]), button, [tabindex]";
 
 function columnWidthClass(type: EmbeddedListCellType): string {
   switch (type) {
-    case "money":
     case "number":
     case "decimal":
     case "date":
       return "w-36";
-    // Wider than a bare date — carries a date field plus a time input.
+    // Wider than a bare number: MoneyInput appends stepper buttons, timestamp
+    // carries a date field plus a time input.
+    case "money":
     case "timestamp":
       return "w-44";
     case "boolean":

package/src/primitives/index.tsx

@@ -31,6 +31,7 @@ import {
   type HeadingProps,
   type InputProps,
   type LinkProps,
+  type ProgressProps,
   type SectionProps,
   type TextProps,
   useColumnRenderer,
@@ -80,6 +81,7 @@ import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Textarea } from "../ui/textarea";
+import { ProgressBar } from "../widgets/progress-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { DefaultDialog } from "./dialog";
@@ -98,6 +100,7 @@ import { DefaultModal } from "./modal";
 import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
+import { TzInput } from "./tz-input";
 
 // ---- Card-Chrome (eine Definition für Form/Section/Card) ----
 
@@ -553,6 +556,18 @@ function DefaultInput(props: InputProps): ReactNode {
           className="resize-y"
         />
       );
+    case "tz":
+      return (
+        <TzInput
+          id={props.id}
+          name={props.name}
+          value={props.value}
+          onChange={props.onChange}
+          {...(props.disabled !== undefined && { disabled: props.disabled })}
+          {...(props.required !== undefined && { required: props.required })}
+          {...(props.hasError !== undefined && { hasError: props.hasError })}
+        />
+      );
   }
 }
 
@@ -1556,6 +1571,7 @@ function DefaultForm({
   actions,
   testId,
   width,
+  stickyActions,
 }: FormProps): ReactNode {
   // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
@@ -1624,6 +1640,9 @@ function DefaultForm({
               "[&>section:not(:first-child)]:border-t",
               "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
               "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
+              // ponytail: fixed footer height is a guess (button row + safe-area) —
+              // widen if a wizard step's last field ever renders visibly clipped.
+              stickyActions === true && "max-sm:pb-24",
             )}
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
@@ -1631,7 +1650,17 @@ function DefaultForm({
           {actions !== undefined && (
             <div
               data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-              className={cn(cardFooter, cardFooterBorder)}
+              className={cn(
+                cardFooter,
+                cardFooterBorder,
+                // Below sm (640px): pin to the viewport bottom instead of normal
+                // flow, so a virtual keyboard shrinking the viewport can't push
+                // this out of reach (fw#1918). `fixed` escapes the card's
+                // `overflow-hidden` (only transform/filter/contain ancestors trap
+                // it, confirmed against AppLayout/SidebarInset — neither sets those).
+                stickyActions === true &&
+                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]",
+              )}
             >
               {actions}
             </div>
@@ -1866,6 +1895,10 @@ function DefaultLink({
   );
 }
 
+function DefaultProgress({ value, testId }: ProgressProps): ReactNode {
+  return <ProgressBar value={value} testId={testId} />;
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -1959,4 +1992,5 @@ export const defaultPrimitives: CorePrimitives = {
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
   Link: DefaultLink,
+  Progress: DefaultProgress,
 };

package/src/primitives/located-timestamp-input.tsx

@@ -9,27 +9,7 @@ import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import { ComboboxInput } from "./combobox";
 import { TimestampInput } from "./timestamp-input";
-
-// Kuratierte Notliste falls die Runtime Intl.supportedValuesOf nicht kennt
-// (vor ES2022). Reicht für die häufigsten Zonen; moderne Browser + Bun liefern
-// die volle Liste.
-const FALLBACK_ZONES: readonly string[] = [
-  "UTC",
-  "Europe/Berlin",
-  "Europe/London",
-  "Europe/Paris",
-  "Europe/Madrid",
-  "America/New_York",
-  "America/Los_Angeles",
-  "America/Sao_Paulo",
-  "Asia/Tokyo",
-  "Asia/Singapore",
-  "Australia/Sydney",
-];
-
-const TZ_OPTIONS: readonly { readonly value: string; readonly label: string }[] = (
-  typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES
-).map((zone) => ({ value: zone, label: zone }));
+import { TZ_OPTIONS } from "./tz-options";
 
 export type LocatedTimestampValue = {
   readonly at: string;

package/src/primitives/money-input.tsx

@@ -14,10 +14,15 @@
 // Klick — also 100 cents bei EUR/USD, 1 yen bei JPY). User der nur
 // Cent-genaue Steps will tippt halt im Focus-Modus.
 
+import { currencyDecimals } from "@cosmicdrift/kumiko-headless";
 import { Minus, Plus } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
+// Re-exported for backward compat — callers used to import this from here
+// before it moved to headless (shared with RenderField, kumiko-framework#1923).
+export { currencyDecimals };
+
 export type MoneyInputProps = {
   readonly id: string;
   readonly name: string;
@@ -165,15 +170,6 @@ export function MoneyInput({
   );
 }
 
-// Currency-Decimal-Stellen — überdeckt die wichtigsten Welt-Währungen.
-// Default 2 wenn Code unbekannt.
-export function currencyDecimals(code: string): number {
-  if (code === "JPY" || code === "KRW" || code === "VND" || code === "ISK") return 0;
-  if (code === "BHD" || code === "JOD" || code === "KWD" || code === "OMR" || code === "TND")
-    return 3;
-  return 2;
-}
-
 function guessLocale(): string {
   if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
   return "en-US";

package/src/primitives/tz-input.tsx

@@ -0,0 +1,43 @@
+// TzInput (kind:"tz") — standalone IANA-zone picker for `tz`-typed fields
+// (#1925). Same searchable-combobox UX as the zone half of
+// LocatedTimestampInput, shared TZ_OPTIONS source.
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { ComboboxInput } from "./combobox";
+import { TZ_OPTIONS } from "./tz-options";
+
+export type TzInputProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string | undefined) => void;
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+};
+
+export function TzInput({
+  id,
+  name,
+  value,
+  onChange,
+  disabled,
+  required,
+  hasError,
+}: TzInputProps): ReactNode {
+  const t = useTranslation();
+  return (
+    <ComboboxInput
+      id={id}
+      name={name}
+      options={TZ_OPTIONS}
+      value={value}
+      onChange={(v) => onChange(v === "" ? undefined : v)}
+      placeholder={t("kumiko.field.timezone")}
+      {...(disabled !== undefined && { disabled })}
+      {...(required !== undefined && { required })}
+      {...(hasError !== undefined && { hasError })}
+    />
+  );
+}

package/src/primitives/tz-options.ts

@@ -0,0 +1,20 @@
+// Curated fallback list for runtimes without Intl.supportedValuesOf (pre
+// ES2022). Covers the most common zones; modern browsers + Bun return the
+// full IANA list.
+const FALLBACK_ZONES: readonly string[] = [
+  "UTC",
+  "Europe/Berlin",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Madrid",
+  "America/New_York",
+  "America/Los_Angeles",
+  "America/Sao_Paulo",
+  "Asia/Tokyo",
+  "Asia/Singapore",
+  "Australia/Sydney",
+];
+
+export const TZ_OPTIONS: readonly { readonly value: string; readonly label: string }[] = (
+  typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES
+).map((zone) => ({ value: zone, label: zone }));