feat(react-ui): allow rich content components in StepsItem details

packages/react-ui/src/genui-lib/Steps/index.tsx

@@ -7,12 +7,13 @@ import { MarkDownRenderer } from "../../components/MarkDownRenderer";
 import { Steps as OpenUISteps, StepsItem as OpenUIStepsItem } from "../../components/Steps";
 import { StepsItemSchema } from "./schema";
 
-export { StepsItemSchema } from "./schema";
+export { StepsItemDetailsChildUnion, StepsItemSchema } from "./schema";
 
 export const StepsItem = defineComponent({
   name: "StepsItem",
   props: StepsItemSchema,
-  description: "title and details text for one step",
+  description:
+    "One step: title, plus details as markdown text or an array of content components (e.g. CodeBlock, Image)",
   component: () => null,
 });
 
@@ -32,7 +33,7 @@ export const Steps = defineComponent({
             typeof details === "string" ? (
               <MarkDownRenderer textMarkdown={details} />
             ) : (
-              (renderNode(details) as React.ReactElement)
+              (renderNode(details) as React.ReactNode)
             );
 
           return (

packages/react-ui/src/genui-lib/Steps/schema.ts

@@ -1,6 +1,23 @@
 import { z } from "zod/v4";
 
+import { CodeBlock } from "../CodeBlock";
+import { Image } from "../Image";
+import { ImageBlock } from "../ImageBlock";
+import { MarkDownRenderer } from "../MarkDownRenderer";
+import { TextContent } from "../TextContent";
+
+// Content allowed inside a StepsItem's details.
+// Kept narrower than SectionContentChildUnion: procedural steps need prose,
+// code, and images — and referencing Steps here would be circular.
+export const StepsItemDetailsChildUnion = z.union([
+  TextContent.ref,
+  MarkDownRenderer.ref,
+  CodeBlock.ref,
+  Image.ref,
+  ImageBlock.ref,
+]);
+
 export const StepsItemSchema = z.object({
   title: z.string(),
-  details: z.string(),
+  details: z.union([z.string(), z.array(StepsItemDetailsChildUnion)]),
 });