@cosmicdrift/kumiko-renderer 0.194.0 → 0.195.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.194.0",
+  "version": "0.195.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,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.194.0",
-    "@cosmicdrift/kumiko-headless": "0.194.0",
+    "@cosmicdrift/kumiko-framework": "0.195.0",
+    "@cosmicdrift/kumiko-headless": "0.195.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"

package/src/app/__tests__/content-editors.test.tsx

@@ -58,7 +58,15 @@ function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
 
 function Probe({ contentFormat }: { readonly contentFormat?: string }): ReactNode {
   const Editor = useContentEditor(contentFormat);
-  return <Editor value="hello" onChange={() => {}} variables={[]} readOnly={false} />;
+  return (
+    <Editor
+      id={CONTENT_EDITOR_ELEMENT_ID}
+      value="hello"
+      onChange={() => {}}
+      variables={[]}
+      readOnly={false}
+    />
+  );
 }
 
 describe("useContentEditor", () => {
@@ -102,7 +110,13 @@ describe("TextareaContentEditor", () => {
     // non-admin viewing read-only content couldn't select/copy it. readOnly
     // keeps the field focusable and selectable while blocking edits.
     render(
-      <TextareaContentEditor value="draft" onChange={() => {}} variables={[]} readOnly={true} />,
+      <TextareaContentEditor
+        id={CONTENT_EDITOR_ELEMENT_ID}
+        value="draft"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={true}
+      />,
       { wrapper: Wrapper },
     );
     const el = screen.getByTestId("ca-textarea") as HTMLTextAreaElement;

package/src/app/content-editors.tsx

@@ -12,6 +12,12 @@ import { type ComponentType, createContext, type ReactNode, useContext } from "r
 import { usePrimitives } from "../primitives";
 
 export type ContentEditorProps = {
+  /** DOM id every registered editor must render onto its own focusable
+   *  root element. Callers that wrap an editor in a `Field` (label +
+   *  htmlFor) pass a stable id here so the label stays associated with
+   *  whatever element actually renders — a fixed constant would break as
+   *  soon as a registered editor swaps in for the textarea fallback. */
+  readonly id: string;
   readonly value: string;
   readonly onChange: (value: string) => void;
   /** Variable names insertable as chips (from the collection's
@@ -24,10 +30,10 @@ export type ContentEditorProps = {
 
 export type ContentEditorComponent = ComponentType<ContentEditorProps>;
 
-/** Fixed DOM id the fallback textarea renders under. Callers that wrap an
- *  editor in a `Field` (label + htmlFor) use this as the Field's `id` so the
- *  label stays associated — the editor contract has no `id` prop of its own,
- *  every registered editor owns its own focusable element's id. */
+/** Default id value for callers that don't generate their own (e.g. a
+ *  standalone TextareaContentEditor render outside a multi-editor page).
+ *  Registered editors don't apply this automatically — every caller passes
+ *  its own id via ContentEditorProps.id. */
 export const CONTENT_EDITOR_ELEMENT_ID = "content-editor-textarea";
 
 export type ContentEditorsMap = Readonly<Record<string, ContentEditorComponent>>;
@@ -50,6 +56,7 @@ export function ContentEditorsProvider({
  *  Uses the primitives Input like every other form field, so it renders on
  *  every platform without requiring the platform's DOM/native equivalent. */
 export function TextareaContentEditor({
+  id,
   value,
   onChange,
   readOnly,
@@ -58,7 +65,7 @@ export function TextareaContentEditor({
   return (
     <Input
       kind="textarea"
-      id={CONTENT_EDITOR_ELEMENT_ID}
+      id={id}
       name={CONTENT_EDITOR_ELEMENT_ID}
       value={value}
       onChange={onChange}

package/src/app/content-preview.tsx

@@ -4,7 +4,7 @@
 // renders formatted HTML and "plain"/"markdown" render as text through the
 // exact same component, no separate render path per format.
 
-import type { ReactNode } from "react";
+import { type ReactNode, useId } from "react";
 import { useContentEditor } from "./content-editors";
 
 const VARIABLE_PATTERN = /\{\{\s*(\w+)\s*\}\}/g;
@@ -36,6 +36,7 @@ export function ContentPreview({
   contentFormat,
 }: ContentPreviewProps): ReactNode {
   const Editor = useContentEditor(contentFormat);
+  const id = useId();
   // "rich" content is HTML (see ContentCollectionDefinition.contentFormat) —
   // an example value substituted in raw could break the markup (`<`) or
   // render as an unescaped entity (`&`). "plain"/"markdown" content is text,
@@ -48,6 +49,7 @@ export function ContentPreview({
       : variables;
   return (
     <Editor
+      id={id}
       value={substituteVariables(content, safeVariables)}
       onChange={noop}
       variables={[]}

package/src/app/kumiko-screen.tsx

@@ -26,6 +26,7 @@ import type {
 } from "@cosmicdrift/kumiko-headless";
 import { fieldLabelKey } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { extractCreatedId } from "../components/reference-create-dialog";
 import { RenderEdit } from "../components/render-edit";
 import { RenderList, type ToolbarActionButton } from "../components/render-list";
 import { useDispatcher, useOptionalDispatcher } from "../context/dispatcher-context";
@@ -461,7 +462,11 @@ function EntityEditCreateBody({
     (result: SubmitResult<unknown>) => {
       if (!result.isSuccess) return;
       if (screen.redirect !== undefined) {
-        nav.navigate({ screenId: lastSegment(screen.redirect) });
+        const entityId = extractCreatedId(result.data);
+        nav.navigate({
+          screenId: lastSegment(screen.redirect),
+          ...(entityId !== undefined && { entityId }),
+        });
         return;
       }
       navigateToList();

package/src/components/reference-create-dialog.tsx

@@ -23,7 +23,7 @@ function entityWriteCommand(featureName: string, entity: string): string {
 // The create handler's success payload is `{ kind: "save", id, ... }`
 // (see event-store-executor-write.ts) but RenderEdit's onSubmit only
 // types it as `unknown` — narrow defensively instead of casting through it.
-function extractCreatedId(data: unknown): string | undefined {
+export function extractCreatedId(data: unknown): string | undefined {
   if (typeof data !== "object" || data === null) return undefined;
   const id = (data as Record<string, unknown>)["id"];
   return typeof id === "string" ? id : undefined;

package/src/components/render-edit.tsx

@@ -25,7 +25,7 @@ import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } fro
 import type { z } from "zod";
 import { ExtensionFormRegistryProvider, useExtensionFormHost } from "../app/extension-form-submit";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections";
-import { useDispatcher } from "../context/dispatcher-context";
+import { useOptionalDispatcher } from "../context/dispatcher-context";
 import { useDraftStorage } from "../context/draft-storage-context";
 import { formatWhen } from "../format-when";
 import { useForm } from "../hooks/use-form";
@@ -80,6 +80,14 @@ function newDraftPrefix(screenId: string): string {
   return `${screenId}:new:`;
 }
 
+// `crypto.randomUUID` is missing in non-secure contexts and React Native/Hermes
+// without a polyfill — guard like dispatcher-live.ts's generateRequestId.
+function mintDraftId(): string {
+  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+  if (typeof c?.randomUUID === "function") return c.randomUUID();
+  return `draft-${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
+}
+
 // End-to-end renderer für einen entityEdit screen. Rendert aus-
 // schließlich über Primitives — kein raw HTML. Ein Native-Renderer
 // der dieselbe Primitives-Registry füllt kriegt das Form ohne weitere
@@ -343,10 +351,10 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   // ohnehin nur in einem mounted Kumiko-App-Tree läuft.
   const t = useTranslation();
   const translate = translateProp ?? t;
-  const dispatcher = useDispatcher();
+  const dispatcher = useOptionalDispatcher();
 
   const isWizard = screen.layout.mode === "wizard";
-  const draftEnabled = isWizard && screen.layout.draft === true;
+  const draftEnabled = isWizard && screen.layout.draft === true && dispatcher !== undefined;
   const isCreateMode = entityIdProp === undefined || entityIdProp === null || entityIdProp === "";
   const draftStorage = useDraftStorage();
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
@@ -502,14 +510,14 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   const patchAndScheduleDraftSave = useCallback(
     (partial: Partial<TValues>) => {
       controller.setValues(partial);
-      if (!draftEnabled) return;
+      if (!draftEnabled || dispatcher === undefined) return;
       if (draftSaveTimerRef.current !== null) clearTimeout(draftSaveTimerRef.current);
       draftSaveTimerRef.current = setTimeout(() => {
         draftSaveTimerRef.current = null;
         saveDraftRef.current(currentStepRef.current);
       }, PATCH_DRAFT_SAVE_DEBOUNCE_MS);
     },
-    [controller, draftEnabled],
+    [controller, draftEnabled, dispatcher],
   );
 
   // Runs before the onChange effect below (declaration order = React
@@ -556,7 +564,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
 
   useEffect(() => {
     // skip: this screen does not persist a draft.
-    if (!draftEnabled) return;
+    if (!draftEnabled || dispatcher === undefined) return;
     // skip: create-mode with no draftId yet — nothing to restore, either
     // the list-fallback effect below finds one or the first step change
     // mints a fresh one.
@@ -603,7 +611,14 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
     // skip: this screen does not persist a draft, this is edit-mode, a
     // draftId is already known (from storage or an earlier adoption), or
     // this mount already ran the list lookup once (didListRef).
-    if (!draftEnabled || !isCreateMode || draftId !== null || didListRef.current) return;
+    if (
+      !draftEnabled ||
+      !isCreateMode ||
+      draftId !== null ||
+      didListRef.current ||
+      dispatcher === undefined
+    )
+      return;
     didListRef.current = true;
     let cancelled = false;
     void (async () => {
@@ -696,10 +711,10 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   // computed inline instead of read from the memoized `draftKey`.
   function saveDraft(stepIndex: number): void {
     // skip: this screen does not persist a draft.
-    if (!draftEnabled) return;
+    if (!draftEnabled || dispatcher === undefined) return;
     let key = draftKey;
     if (isCreateMode && draftId === null) {
-      const mintedId = crypto.randomUUID();
+      const mintedId = mintDraftId();
       mintedDraftIdRef.current = mintedId;
       draftStorage.setDraftId(screen.id, mintedId);
       setDraftId(mintedId);
@@ -761,7 +776,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
 
   async function discardDraft(): Promise<void> {
     // skip: this screen does not persist a draft.
-    if (!draftEnabled) return;
+    if (!draftEnabled || dispatcher === undefined) return;
     // A pending debounced patch-save must not fire after discard — it would
     // resurrect the draft it just deleted.
     if (draftSaveTimerRef.current !== null) {