@cosmicdrift/kumiko-renderer 0.189.0 → 0.191.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.189.0",
+  "version": "0.191.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.189.0",
-    "@cosmicdrift/kumiko-headless": "0.189.0",
+    "@cosmicdrift/kumiko-framework": "0.191.0",
+    "@cosmicdrift/kumiko-headless": "0.191.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"

package/src/components/render-edit.tsx

@@ -362,7 +362,8 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   const [extensionErrorKey, setExtensionErrorKey] = useState<string | null>(null);
   const { registry: extensionFormRegistry, runAll: runExtensionSubmits } =
     useExtensionFormHost(setExtensionDirty);
-  const { Button, Banner, Dialog, Form, Section, Grid, GridCell, Text, Progress } = usePrimitives();
+  const { Button, Banner, Dialog, Form, Section, Grid, GridCell, Text, Progress, StepBar } =
+    usePrimitives();
 
   const fields = useMemo(() => deriveFormFields<TValues, TCtx>(screen), [screen]);
 
@@ -926,12 +927,40 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                 testId="render-edit-wizard-progress"
               />
             )}
-            <Text variant="small" testId="render-edit-wizard-step-label">
-              {translate("kumiko.wizard.step", {
-                current: currentStep + 1,
-                total: lastStepIndex + 1,
-              })}
-            </Text>
+            {(() => {
+              const currentTitle = filteredSections[currentStep]?.title;
+              const compactLabel =
+                currentTitle !== undefined
+                  ? translate("kumiko.wizard.step-with-title", {
+                      current: currentStep + 1,
+                      total: lastStepIndex + 1,
+                      title: currentTitle,
+                    })
+                  : translate("kumiko.wizard.step", {
+                      current: currentStep + 1,
+                      total: lastStepIndex + 1,
+                    });
+              // No StepBar registered → keep the plain label RenderEdit
+              // always had (additive rollout, see CorePrimitives.StepBar).
+              if (StepBar === undefined) {
+                return (
+                  <Text variant="small" testId="render-edit-wizard-step-label">
+                    {compactLabel}
+                  </Text>
+                );
+              }
+              return (
+                <StepBar
+                  steps={filteredSections.map(
+                    (section, sectionIndex) => section.title ?? String(sectionIndex + 1),
+                  )}
+                  currentIndex={currentStep}
+                  compactLabel={compactLabel}
+                  testId="render-edit-wizard-steps"
+                  compactTestId="render-edit-wizard-step-label"
+                />
+              );
+            })()}
           </>
         )}
         {(isWizard ? filteredSections.filter((_, i) => i === currentStep) : filteredSections).map(

package/src/i18n-defaults.ts

@@ -28,6 +28,10 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
 
     // Wizard step chrome (RenderEdit layout.mode="wizard").
     "kumiko.wizard.step": "Schritt {current} von {total}",
+    "kumiko.wizard.step-with-title": "Schritt {current} von {total} · {title}",
+
+    // StepBar widget (renderer-web) — screen-reader text for completed steps whose number is visually replaced by a checkmark.
+    "kumiko.widget.stepBar.done": "Erledigt",
 
     // Version — Update-Awareness-Banner (UpdateChecker).
     "kumiko.version.update-available": "Eine neue Version ist verfügbar.",
@@ -205,6 +209,9 @@ export const kumikoDefaultTranslations: TranslationsByLocale = {
     "kumiko.actions.finish": "Finish",
 
     "kumiko.wizard.step": "Step {current} of {total}",
+    "kumiko.wizard.step-with-title": "Step {current} of {total} · {title}",
+
+    "kumiko.widget.stepBar.done": "Done",
 
     "kumiko.version.update-available": "A new version is available.",
 

package/src/index.ts

@@ -178,6 +178,7 @@ export type {
   ProgressProps,
   RuntimeRenderer,
   SectionProps,
+  StepBarProps,
   TextProps,
 } from "./primitives";
 export { PrimitivesProvider, usePrimitives } from "./primitives";

package/src/primitives.tsx

@@ -883,6 +883,21 @@ export type ProgressProps = {
   readonly testId?: string;
 };
 
+/** Wizard step overview — numbered chips, one per step label, with the
+ *  active step highlighted. Not clickable (step-jump validation is a
+ *  separate concern, kumiko-framework#1966). Implementations render a
+ *  narrow-viewport fallback showing `compactLabel` instead (caller
+ *  supplies it pre-translated, e.g. "Step 2 of 5 · Industry") — which of
+ *  the two is visible is a responsive layout choice owned by the
+ *  implementation, not this contract. */
+export type StepBarProps = {
+  readonly steps: readonly string[];
+  readonly currentIndex: number;
+  readonly compactLabel: string;
+  readonly testId?: string;
+  readonly compactTestId?: string;
+};
+
 // ---- Core-Registry (Kumiko-eigene Primitives) ----
 
 export type CorePrimitives = {
@@ -912,6 +927,10 @@ export type CorePrimitives = {
    *  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>;
+  /** 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 StepBar?: ComponentType<StepBarProps>;
 };
 
 /** Offene Extension-Zone für App-eigene Primitives. Devs erweitern