@cosmicdrift/kumiko-renderer-web 0.187.0 → 0.188.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";
@@ -1866,6 +1868,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 +1965,5 @@ export const defaultPrimitives: CorePrimitives = {
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
   Link: DefaultLink,
+  Progress: DefaultProgress,
 };

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";