@assistant-ui/react-generative-ui 0.0.6 → 0.0.8

package/src/vocabulary/icon.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { renderGenerativeUI } from "../renderGenerativeUI";
+import { buildPresentParameters } from "../buildPresentParameters";
+import { iconVocabulary } from "./icon";
+import { ICON_NAMES } from "../ir";
+
+const render = (node: unknown) =>
+  renderToStaticMarkup(<>{renderGenerativeUI(node, iconVocabulary)}</>);
+
+describe("iconVocabulary", () => {
+  it("a known name renders an svg with the data-aui hooks and default size", () => {
+    const html = render({ $type: "Icon", name: "check" });
+    expect(html).toContain('data-aui="icon"');
+    expect(html).toContain('data-aui-name="check"');
+    expect(html).toContain('viewBox="0 0 24 24"');
+    expect(html).toContain('width="16"');
+    expect(html).toContain('height="16"');
+    expect(html).toContain('aria-hidden="true"');
+  });
+
+  it("every built-in name renders without throwing and without a data-aui-size attribute when size is omitted", () => {
+    for (const name of ICON_NAMES) {
+      const html = render({ $type: "Icon", name });
+      expect(html, name).toContain("<svg");
+      expect(html, name).not.toContain("data-aui-size=");
+    }
+  });
+
+  it("maps size tokens to pixel dimensions", () => {
+    expect(render({ $type: "Icon", name: "star", size: "sm" })).toContain(
+      'width="14"',
+    );
+    expect(render({ $type: "Icon", name: "star", size: "md" })).toContain(
+      'width="16"',
+    );
+    expect(render({ $type: "Icon", name: "star", size: "lg" })).toContain(
+      'width="20"',
+    );
+  });
+
+  it("emits the size token as a data-aui-size hook when given", () => {
+    expect(render({ $type: "Icon", name: "bell", size: "lg" })).toContain(
+      'data-aui-size="lg"',
+    );
+  });
+
+  it("an unknown name renders nothing rather than throwing", () => {
+    expect(() =>
+      render({ $type: "Icon", name: "not-a-real-icon" }),
+    ).not.toThrow();
+    expect(render({ $type: "Icon", name: "not-a-real-icon" })).toBe("");
+  });
+
+  it("exposes the closed name enum in buildPresentParameters", () => {
+    const schema = buildPresentParameters(iconVocabulary) as Record<
+      string,
+      unknown
+    >;
+    const properties = schema["properties"] as Record<string, unknown>;
+    const nameProp = properties["name"] as { enum?: unknown[] };
+    expect(nameProp.enum).toEqual([...ICON_NAMES]);
+  });
+});

package/src/vocabulary/icon.tsx

@@ -0,0 +1,174 @@
+import type { ReactNode } from "react";
+import { z } from "zod";
+import type { GenerativeUILibrary } from "../types";
+import { ICON_NAMES } from "../ir";
+
+const ICON_SIZE_TOKENS = ["sm", "md", "lg"] as const;
+const ICON_SIZE_PX: Record<(typeof ICON_SIZE_TOKENS)[number], number> = {
+  sm: 14,
+  md: 16,
+  lg: 20,
+};
+
+const ICON_GLYPHS: Record<(typeof ICON_NAMES)[number], ReactNode> = {
+  sun: (
+    <>
+      <circle cx="12" cy="12" r="4.5" />
+      <line x1="12" y1="2" x2="12" y2="5" />
+      <line x1="12" y1="19" x2="12" y2="22" />
+      <line x1="2" y1="12" x2="5" y2="12" />
+      <line x1="19" y1="12" x2="22" y2="12" />
+      <line x1="5.5" y1="5.5" x2="7.5" y2="7.5" />
+      <line x1="16.5" y1="16.5" x2="18.5" y2="18.5" />
+      <line x1="18.5" y1="5.5" x2="16.5" y2="7.5" />
+      <line x1="7.5" y1="16.5" x2="5.5" y2="18.5" />
+    </>
+  ),
+  moon: <path d="M19 13.5A8.5 8.5 0 1 1 10.5 4.5 6.8 6.8 0 0 0 19 13.5Z" />,
+  cloud: (
+    <path d="M7 18a4 4 0 1 1 .5-8A5.5 5.5 0 0 1 17.5 11.5 3.5 3.5 0 0 1 17 18Z" />
+  ),
+  rain: (
+    <>
+      <path d="M6.5 13a3 3 0 1 1 .4-6A4.5 4.5 0 0 1 15.5 8.5 3 3 0 0 1 15 13Z" />
+      <line x1="8" y1="15" x2="7" y2="18" />
+      <line x1="12" y1="15" x2="11" y2="18" />
+      <line x1="16" y1="15" x2="15" y2="18" />
+    </>
+  ),
+  snow: (
+    <>
+      <path d="M6.5 13a3 3 0 1 1 .4-6A4.5 4.5 0 0 1 15.5 8.5 3 3 0 0 1 15 13Z" />
+      <circle cx="7.5" cy="17" r="0.75" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="18" r="0.75" fill="currentColor" stroke="none" />
+      <circle cx="16.5" cy="17" r="0.75" fill="currentColor" stroke="none" />
+    </>
+  ),
+  wind: (
+    <>
+      <path d="M3 7.5h10.5a2.5 2.5 0 1 0-2-4" />
+      <path d="M3 12h14a2.5 2.5 0 1 1-2 4" />
+      <path d="M3 16.5h8" />
+    </>
+  ),
+  play: <path d="M7 4.5v15l13-7.5z" />,
+  pause: (
+    <>
+      <line x1="8" y1="4" x2="8" y2="20" />
+      <line x1="16" y1="4" x2="16" y2="20" />
+    </>
+  ),
+  check: <path d="M4 12.5l5 5.5 11-12" />,
+  x: (
+    <>
+      <line x1="5" y1="5" x2="19" y2="19" />
+      <line x1="19" y1="5" x2="5" y2="19" />
+    </>
+  ),
+  star: (
+    <path d="M12 2.5l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3-5.6-3-5.6 3 1.4-6.3-4.8-4.3 6.4-.6z" />
+  ),
+  heart: (
+    <path d="M12 20s-7.5-4.7-9.8-9.6C.6 6.8 3 3.3 6.6 3.3c2 0 3.7 1.1 5.4 3.3 1.7-2.2 3.4-3.3 5.4-3.3 3.6 0 6 3.5 4.4 7.1C19.5 15.3 12 20 12 20z" />
+  ),
+  "arrow-right": <path d="M4 12h15M13 6l6 6-6 6" />,
+  "arrow-up-right": <path d="M7 17L17 7M9 7h8v8" />,
+  "chevron-right": <path d="M9 5l7 7-7 7" />,
+  calendar: (
+    <>
+      <rect x="3.5" y="5" width="17" height="15" rx="2" />
+      <line x1="3.5" y1="9.5" x2="20.5" y2="9.5" />
+      <line x1="8" y1="3" x2="8" y2="7" />
+      <line x1="16" y1="3" x2="16" y2="7" />
+    </>
+  ),
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5V12l3.5 2" />
+    </>
+  ),
+  "map-pin": (
+    <>
+      <path d="M12 21s7-6.7 7-12.2A7 7 0 1 0 5 8.8C5 14.3 12 21 12 21z" />
+      <circle cx="12" cy="8.8" r="2.3" />
+    </>
+  ),
+  plane: (
+    <>
+      <path d="M3 12l18-8-6 18-3-7-7-3z" />
+      <path d="M12 15l3-3" />
+    </>
+  ),
+  truck: (
+    <>
+      <path d="M2 8h11v9H2z" />
+      <path d="M13 11h4l3 3v3h-7z" />
+      <circle cx="6" cy="19" r="1.8" />
+      <circle cx="17" cy="19" r="1.8" />
+    </>
+  ),
+  "credit-card": (
+    <>
+      <rect x="2.5" y="5.5" width="19" height="13" rx="2" />
+      <line x1="2.5" y1="10" x2="21.5" y2="10" />
+      <line x1="6" y1="15" x2="10" y2="15" />
+    </>
+  ),
+  user: (
+    <>
+      <circle cx="12" cy="8" r="3.6" />
+      <path d="M4.5 20.5a7.5 7.5 0 0 1 15 0" />
+    </>
+  ),
+  search: (
+    <>
+      <circle cx="10.5" cy="10.5" r="6.5" />
+      <line x1="20" y1="20" x2="15.3" y2="15.3" />
+    </>
+  ),
+  bell: (
+    <>
+      <path d="M12 3a5.5 5.5 0 0 0-5.5 5.5c0 4.5-2 6-2 6h15s-2-1.5-2-6A5.5 5.5 0 0 0 12 3z" />
+      <path d="M10 19a2 2 0 0 0 4 0" />
+    </>
+  ),
+};
+
+export const iconVocabulary = {
+  Icon: {
+    description:
+      "A small line icon from the built-in set. `size` controls the rendered pixel size.",
+    properties: z.object({
+      name: z.enum(ICON_NAMES).describe("Which built-in icon to render."),
+      size: z
+        .enum(ICON_SIZE_TOKENS)
+        .optional()
+        .describe("Icon size; defaults to `md` (16px)."),
+    }),
+    render: ({ name, size }) => {
+      const glyph = ICON_GLYPHS[name as keyof typeof ICON_GLYPHS];
+      if (!glyph) return null;
+      const px = ICON_SIZE_PX[(size as keyof typeof ICON_SIZE_PX) ?? "md"];
+
+      return (
+        <svg
+          data-aui="icon"
+          data-aui-name={name}
+          data-aui-size={size}
+          viewBox="0 0 24 24"
+          width={px}
+          height={px}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          {glyph}
+        </svg>
+      );
+    },
+  },
+} satisfies GenerativeUILibrary;

package/src/vocabulary/index.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { buildPresentParameters } from "../buildPresentParameters";
+import { defaultGenerativeUILibrary } from "./index";
+
+const EXPECTED_KEYS = [
+  "Header",
+  "Text",
+  "Caption",
+  "Image",
+  "Divider",
+  "Fact",
+  "Button",
+  "Select",
+  "Input",
+  "DatePicker",
+  "Checkbox",
+  "RadioGroup",
+  "Form",
+  "Card",
+  "Col",
+  "Row",
+  "Spacer",
+  "Badge",
+  "Box",
+  "ListView",
+  "ListViewItem",
+  "Table",
+  "Markdown",
+  "Chart",
+  "Alert",
+  "Carousel",
+  "Icon",
+] as const;
+
+describe("defaultGenerativeUILibrary", () => {
+  it("exposes exactly the closed vocabulary set, no stray or missing entries", () => {
+    expect(Object.keys(defaultGenerativeUILibrary).sort()).toEqual(
+      [...EXPECTED_KEYS].sort(),
+    );
+  });
+
+  it("every entry has a description, a zod properties schema, and a render fn", () => {
+    for (const [name, entry] of Object.entries(defaultGenerativeUILibrary)) {
+      expect(typeof entry.description, `${name}.description`).toBe("string");
+      expect(typeof entry.render, `${name}.render`).toBe("function");
+      expect(
+        typeof (entry.properties as { safeParse?: unknown }).safeParse,
+        `${name}.properties is a zod schema`,
+      ).toBe("function");
+    }
+  });
+
+  it("buildPresentParameters produces a $type enum of the vocabulary names", () => {
+    const schema = buildPresentParameters(defaultGenerativeUILibrary) as Record<
+      string,
+      unknown
+    >;
+    const typeProp = (schema.properties as Record<string, unknown>)[
+      "$type"
+    ] as { enum?: unknown[] };
+    expect(typeProp.enum).toEqual([...EXPECTED_KEYS]);
+  });
+});

package/src/vocabulary/index.ts

@@ -0,0 +1,33 @@
+import type { GenerativeUILibrary } from "../types";
+import { alertVocabulary } from "./alert";
+import { dataVocabulary } from "./data";
+import { factVocabulary } from "./fact";
+import { formVocabulary } from "./form";
+import { iconVocabulary } from "./icon";
+import { interactiveVocabulary } from "./interactive";
+import { layoutVocabulary } from "./layout";
+import { listVocabulary } from "./list";
+import { mediaVocabulary } from "./media";
+import { textVocabulary } from "./text";
+
+/**
+ * The closed generative-ui vocabulary the factory ships: a fixed set of
+ * intrinsic components the model may render, each a zod `properties` schema
+ * plus an unstyled structural `render` (semantic HTML with a `data-aui`
+ * attribute naming the component, plus `data-aui-<prop>` hooks, for the host
+ * to style). Users opt in by passing it to
+ * `new JSONGenerativeUI({ library: defaultGenerativeUILibrary })`, and override
+ * or extend entries with their own `defineGenerativeComponents`.
+ */
+export const defaultGenerativeUILibrary: GenerativeUILibrary = {
+  ...textVocabulary,
+  ...mediaVocabulary,
+  ...factVocabulary,
+  ...interactiveVocabulary,
+  ...formVocabulary,
+  ...layoutVocabulary,
+  ...listVocabulary,
+  ...dataVocabulary,
+  ...alertVocabulary,
+  ...iconVocabulary,
+};

package/src/vocabulary/interactive.dispatch.test.tsx

@@ -0,0 +1,352 @@
+import { describe, it, expect, vi } from "vitest";
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { interactiveVocabulary } from "./interactive";
+import { createActionRegistry } from "../actionRegistry";
+
+/** The props shape `Button.render` receives when the renderer injects `$action`
+ * and `$dispatch`. Used to call `render` directly so the test can invoke
+ * `onClick` without a DOM. */
+type ButtonRenderProps = {
+  label: string;
+  $status: "done";
+  $action?: { type: string; [k: string]: unknown };
+  $dispatch?: (a: unknown) => unknown;
+};
+
+/**
+ * Calls a `render` that itself uses hooks (e.g. `RadioGroup`'s `useId`) from inside an active React render pass, then hands back the resulting element with its handlers intact so the test can invoke them directly.
+ */
+function renderWithHooks(render: () => ReactNode): ReactElement {
+  let captured: ReactElement | undefined;
+  function Capture() {
+    captured = render() as ReactElement;
+    return captured;
+  }
+  renderToStaticMarkup(<Capture />);
+  return captured!;
+}
+
+describe("interactiveVocabulary $action dispatch", () => {
+  it("Button render attaches an onClick that fires $dispatch with the $action payload", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ purchase: handler });
+    const out = interactiveVocabulary.Button.render({
+      label: "Buy",
+      $status: "done",
+      $action: { type: "purchase", itemId: "sku-1" },
+      $dispatch: registry.dispatch,
+    } as ButtonRenderProps) as ReactNode;
+    expect(isValidElement(out)).toBe(true);
+    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
+    expect(typeof onClick).toBe("function");
+    onClick();
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "purchase", itemId: "sku-1" },
+    });
+  });
+
+  it("Button onClick is a no-op when no $dispatch is wired (read-only render)", () => {
+    const out = interactiveVocabulary.Button.render({
+      label: "Buy",
+      $status: "done",
+      $action: { type: "purchase", itemId: "sku-1" },
+    } as ButtonRenderProps) as ReactNode;
+    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
+    expect(typeof onClick).toBe("function");
+    expect(() => onClick()).not.toThrow();
+  });
+
+  it("Button onClick is a no-op when $action is absent", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ purchase: handler });
+    const out = interactiveVocabulary.Button.render({
+      label: "Go",
+      $status: "done",
+      $dispatch: registry.dispatch,
+    } as ButtonRenderProps) as ReactNode;
+    (out as { props: { onClick: () => void } }).props.onClick();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("Select onChange merges the selected value into $input and preserves a model-supplied $action.value", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ pick: handler });
+    const out = interactiveVocabulary.Select.render({
+      options: [{ label: "A", value: "a" }],
+      $status: "done",
+      $action: { type: "pick", value: "model-supplied" },
+      $dispatch: registry.dispatch,
+    }) as ReactNode;
+    const onChange = (
+      out as {
+        props: { onChange: (e: { currentTarget: { value: string } }) => void };
+      }
+    ).props.onChange;
+    onChange({ currentTarget: { value: "user-picked" } });
+    expect(handler).toHaveBeenCalledWith({
+      payload: {
+        type: "pick",
+        value: "model-supplied",
+        $input: "user-picked",
+      },
+    });
+  });
+
+  it("Input onKeyDown (Enter) merges the entered value into $input", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ submit: handler });
+    const out = interactiveVocabulary.Input.render({
+      $status: "done",
+      $action: { type: "submit" },
+      $dispatch: registry.dispatch,
+    }) as ReactNode;
+    const onKeyDown = (
+      out as {
+        props: {
+          onKeyDown: (e: {
+            key: string;
+            nativeEvent: { isComposing: boolean };
+            currentTarget: { value: string };
+          }) => void;
+        };
+      }
+    ).props.onKeyDown;
+    onKeyDown({
+      key: "Enter",
+      nativeEvent: { isComposing: false },
+      currentTarget: { value: "typed text" },
+    });
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "submit", $input: "typed text" },
+    });
+  });
+
+  it("Input onKeyDown (Enter) defers to an ancestor form instead of firing its own $action", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ submit: handler });
+    const out = interactiveVocabulary.Input.render({
+      name: "email",
+      $status: "done",
+      $action: { type: "submit" },
+      $dispatch: registry.dispatch,
+    }) as ReactNode;
+    const onKeyDown = (
+      out as {
+        props: {
+          onKeyDown: (e: {
+            key: string;
+            nativeEvent: { isComposing: boolean };
+            currentTarget: { value: string; form: unknown };
+          }) => void;
+        };
+      }
+    ).props.onKeyDown;
+    onKeyDown({
+      key: "Enter",
+      nativeEvent: { isComposing: false },
+      currentTarget: { value: "typed text", form: {} },
+    });
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  type TextareaKeyDownEvent = {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    nativeEvent: { isComposing: boolean };
+    currentTarget: {
+      value: string;
+      form: { requestSubmit: () => void } | null;
+    };
+    preventDefault: () => void;
+  };
+
+  it("Input multiline (textarea) Ctrl+Enter inside a form calls HTMLFormElement.prototype.requestSubmit instead of firing its own $action", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ submit: handler });
+    const out = interactiveVocabulary.Input.render({
+      multiline: true,
+      name: "notes",
+      $status: "done",
+      $action: { type: "submit" },
+      $dispatch: registry.dispatch,
+    }) as ReactNode;
+    const onKeyDown = (
+      out as { props: { onKeyDown: (e: TextareaKeyDownEvent) => void } }
+    ).props.onKeyDown;
+
+    // This environment has no DOM, so `HTMLFormElement` is not a global; install a minimal stand-in so the fix's `HTMLFormElement.prototype.requestSubmit.call(...)` has a real, spyable target instead of throwing a ReferenceError.
+    class FakeHTMLFormElement {
+      requestSubmit(): void {}
+    }
+    const originalHTMLFormElement = globalThis.HTMLFormElement;
+    globalThis.HTMLFormElement =
+      FakeHTMLFormElement as unknown as typeof HTMLFormElement;
+    const requestSubmitSpy = vi.spyOn(
+      FakeHTMLFormElement.prototype,
+      "requestSubmit",
+    );
+    try {
+      const form = new FakeHTMLFormElement();
+      const preventDefault = vi.fn();
+      onKeyDown({
+        key: "Enter",
+        ctrlKey: true,
+        metaKey: false,
+        nativeEvent: { isComposing: false },
+        currentTarget: { value: "typed text", form },
+        preventDefault,
+      });
+      expect(preventDefault).toHaveBeenCalledTimes(1);
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(requestSubmitSpy.mock.contexts[0]).toBe(form);
+      expect(handler).not.toHaveBeenCalled();
+    } finally {
+      requestSubmitSpy.mockRestore();
+      globalThis.HTMLFormElement = originalHTMLFormElement;
+    }
+  });
+
+  it("Input multiline (textarea) Ctrl+Enter without a form still fires its own $action", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ submit: handler });
+    const out = interactiveVocabulary.Input.render({
+      multiline: true,
+      $status: "done",
+      $action: { type: "submit" },
+      $dispatch: registry.dispatch,
+    }) as ReactNode;
+    const onKeyDown = (
+      out as { props: { onKeyDown: (e: TextareaKeyDownEvent) => void } }
+    ).props.onKeyDown;
+    const preventDefault = vi.fn();
+    onKeyDown({
+      key: "Enter",
+      ctrlKey: true,
+      metaKey: false,
+      nativeEvent: { isComposing: false },
+      currentTarget: { value: "typed text", form: null },
+      preventDefault,
+    });
+    expect(preventDefault).not.toHaveBeenCalled();
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "submit", $input: "typed text" },
+    });
+  });
+
+  it("Button with submit set renders no onClick handler, so it never fires $action on click", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ purchase: handler });
+    const out = interactiveVocabulary.Button.render({
+      label: "Buy",
+      submit: true,
+      $status: "done",
+      $action: { type: "purchase" },
+      $dispatch: registry.dispatch,
+    } as ButtonRenderProps & { submit: boolean }) as ReactNode;
+    expect(
+      (out as { props: { onClick?: unknown } }).props.onClick,
+    ).toBeUndefined();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("Button without submit keeps firing $action on click", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ purchase: handler });
+    const out = interactiveVocabulary.Button.render({
+      label: "Buy",
+      $status: "done",
+      $action: { type: "purchase" },
+      $dispatch: registry.dispatch,
+    } as ButtonRenderProps) as ReactNode;
+    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
+    onClick();
+    expect(handler).toHaveBeenCalledWith({ payload: { type: "purchase" } });
+  });
+
+  it("Checkbox onChange fires $dispatch with the checked boolean as $input", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ toggle: handler });
+    const out = interactiveVocabulary.Checkbox.render({
+      label: "Accept",
+      $status: "done",
+      $action: { type: "toggle" },
+      $dispatch: registry.dispatch,
+    }) as ReactElement;
+    const input = (out.props as { children: ReactElement[] }).children[0];
+    const onChange = (
+      input as {
+        props: {
+          onChange: (e: { currentTarget: { checked: boolean } }) => void;
+        };
+      }
+    ).props.onChange;
+    onChange({ currentTarget: { checked: true } });
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "toggle", $input: true },
+    });
+  });
+
+  it("Checkbox onChange is a no-op when no $dispatch is wired", () => {
+    const out = interactiveVocabulary.Checkbox.render({
+      label: "Accept",
+      $status: "done",
+      $action: { type: "toggle" },
+    }) as ReactElement;
+    const input = (out.props as { children: ReactElement[] }).children[0];
+    const onChange = (
+      input as {
+        props: {
+          onChange: (e: { currentTarget: { checked: boolean } }) => void;
+        };
+      }
+    ).props.onChange;
+    expect(() => onChange({ currentTarget: { checked: true } })).not.toThrow();
+  });
+
+  it("RadioGroup onChange fires $dispatch with the option's value as $input", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ pick: handler });
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.RadioGroup.render({
+        $status: "done",
+        $action: { type: "pick" },
+        $dispatch: registry.dispatch,
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Large", value: "lg" },
+        ],
+      }),
+    );
+    const options = (out.props as { children: ReactElement[] }).children;
+    const secondRadio = (options[1]!.props as { children: ReactElement[] })
+      .children[0] as ReactElement;
+    const onChange = (secondRadio.props as { onChange: () => void }).onChange;
+    onChange();
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "pick", $input: "lg" },
+    });
+  });
+
+  it("RadioGroup falls back to useId() for the shared radio name when name is omitted", () => {
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.RadioGroup.render({
+        $status: "done",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Large", value: "lg" },
+        ],
+      }),
+    );
+    const options = (out.props as { children: ReactElement[] }).children;
+    const firstRadio = (options[0]!.props as { children: ReactElement[] })
+      .children[0] as ReactElement;
+    const secondRadio = (options[1]!.props as { children: ReactElement[] })
+      .children[0] as ReactElement;
+    const firstName = (firstRadio.props as { name: string }).name;
+    const secondName = (secondRadio.props as { name: string }).name;
+    expect(firstName).toBeTruthy();
+    expect(firstName).toBe(secondName);
+  });
+});