@assistant-ui/react-generative-ui 0.0.7 → 0.0.9

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

@@ -13,16 +13,23 @@ const EXPECTED_KEYS = [
   "Select",
   "Input",
   "DatePicker",
+  "Checkbox",
+  "RadioGroup",
+  "Form",
   "Card",
   "Col",
   "Row",
   "Spacer",
   "Badge",
+  "Box",
+  "ListView",
+  "ListViewItem",
   "Table",
   "Markdown",
   "Chart",
   "Alert",
   "Carousel",
+  "Icon",
 ] as const;
 
 describe("defaultGenerativeUILibrary", () => {

package/src/vocabulary/index.ts

@@ -2,8 +2,11 @@ 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";
 
@@ -21,7 +24,10 @@ export const defaultGenerativeUILibrary: GenerativeUILibrary = {
   ...mediaVocabulary,
   ...factVocabulary,
   ...interactiveVocabulary,
+  ...formVocabulary,
   ...layoutVocabulary,
+  ...listVocabulary,
   ...dataVocabulary,
   ...alertVocabulary,
+  ...iconVocabulary,
 };

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

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
-import { isValidElement, type ReactNode } from "react";
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { interactiveVocabulary } from "./interactive";
 import { createActionRegistry } from "../actionRegistry";
 
@@ -13,6 +14,19 @@ type ButtonRenderProps = {
   $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();
@@ -107,4 +121,232 @@ describe("interactiveVocabulary $action dispatch", () => {
       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);
+  });
 });

package/src/vocabulary/interactive.test.tsx

@@ -16,16 +16,29 @@ describe("interactiveVocabulary", () => {
         block: true,
       }),
     ).toBe(
-      '<button data-aui="button" data-aui-style="primary" data-aui-block="true">Go</button>',
+      '<button type="button" data-aui="button" data-aui-style="primary" data-aui-block="true">Go</button>',
     );
   });
 
   it("Button omits data-aui-block when block is false or omitted", () => {
     expect(render({ $type: "Button", label: "Go", block: false })).toBe(
-      '<button data-aui="button">Go</button>',
+      '<button type="button" data-aui="button">Go</button>',
     );
   });
 
+  it('Button renders type="button" by default and type="submit" with the submit prop', () => {
+    expect(render({ $type: "Button", label: "Go" })).toContain('type="button"');
+    const html = render({ $type: "Button", label: "Go", submit: true });
+    expect(html).toContain('type="submit"');
+    expect(html).toContain("data-aui-submit");
+  });
+
+  it("Button omits data-aui-submit when submit is false or omitted", () => {
+    expect(
+      render({ $type: "Button", label: "Go", submit: false }),
+    ).not.toContain("data-aui-submit");
+  });
+
   it("Select renders an aria-label when label is provided", () => {
     const html = render({
       $type: "Select",
@@ -47,6 +60,15 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('<option value="x">B</option>');
   });
 
+  it("Select renders a name attribute when provided", () => {
+    const html = render({
+      $type: "Select",
+      name: "role",
+      options: [{ label: "A", value: "a" }],
+    });
+    expect(html).toContain('name="role"');
+  });
+
   it("Button stashes $action on a data-aui-action attribute", () => {
     const html = render({
       $type: "Button",
@@ -60,7 +82,7 @@ describe("interactiveVocabulary", () => {
 
   it("Button without $action omits the data-aui-action attribute", () => {
     expect(render({ $type: "Button", label: "Go" })).toBe(
-      '<button data-aui="button">Go</button>',
+      '<button type="button" data-aui="button">Go</button>',
     );
   });
 
@@ -87,6 +109,10 @@ describe("interactiveVocabulary", () => {
     );
   });
 
+  it("Input renders a name attribute when provided", () => {
+    expect(render({ $type: "Input", name: "email" })).toContain('name="email"');
+  });
+
   it("Input multiline renders a textarea with the multiline hook", () => {
     const html = render({ $type: "Input", multiline: true });
     expect(html).toContain("data-aui-multiline");
@@ -105,4 +131,118 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('min="2025-01-01"');
     expect(html).toContain('max="2027-01-01"');
   });
+
+  it("DatePicker renders a name attribute when provided", () => {
+    expect(render({ $type: "DatePicker", name: "dob" })).toContain(
+      'name="dob"',
+    );
+  });
+
+  it("Checkbox renders a label wrapping the input and a checkbox-label span", () => {
+    const html = render({ $type: "Checkbox", label: "Accept terms" });
+    expect(html).toContain('data-aui="checkbox"');
+    expect(html).toContain('type="checkbox"');
+    expect(html).toContain('data-aui="checkbox-label"');
+    expect(html).toContain("Accept terms");
+  });
+
+  it("Checkbox renders name and defaultChecked when provided", () => {
+    const html = render({
+      $type: "Checkbox",
+      label: "Accept",
+      name: "agree",
+      defaultChecked: true,
+    });
+    expect(html).toContain('name="agree"');
+    expect(html).toContain('checked=""');
+  });
+
+  it("RadioGroup renders a fieldset with one radio per option", () => {
+    const html = render({
+      $type: "RadioGroup",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" },
+      ],
+    });
+    expect(html).toContain('data-aui="radiogroup"');
+    expect((html.match(/type="radio"/g) ?? []).length).toBe(2);
+    expect(html).toContain('data-aui="radiogroup-option"');
+    expect(html).toContain("Small");
+    expect(html).toContain("Large");
+  });
+
+  it("RadioGroup renders an aria-label from the label prop", () => {
+    const html = render({
+      $type: "RadioGroup",
+      label: "Size",
+      options: [{ label: "Small", value: "sm" }],
+    });
+    expect(html).toContain('aria-label="Size"');
+  });
+
+  it("RadioGroup radios share the given name", () => {
+    const html = render({
+      $type: "RadioGroup",
+      name: "size",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" },
+      ],
+    });
+    expect((html.match(/name="size"/g) ?? []).length).toBe(2);
+  });
+
+  it("RadioGroup falls back to a generated shared name when name is omitted", () => {
+    const html = render({
+      $type: "RadioGroup",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" },
+      ],
+    });
+    const names = [...html.matchAll(/name="([^"]*)"/g)].map((m) => m[1]);
+    expect(names.length).toBe(2);
+    expect(names[0]).toBe(names[1]);
+    expect(names[0]).toBeTruthy();
+  });
+
+  it("RadioGroup marks the option matching defaultValue as checked", () => {
+    const html = render({
+      $type: "RadioGroup",
+      defaultValue: "lg",
+      options: [
+        { label: "Small", value: "sm" },
+        { label: "Large", value: "lg" },
+      ],
+    });
+    expect(html.match(/checked=""/g)?.length).toBe(1);
+  });
+
+  it("RadioGroup renders nothing for malformed entries without throwing", () => {
+    expect(() =>
+      render({
+        $type: "RadioGroup",
+        options: [
+          { label: "Small", value: "sm" },
+          null,
+          { value: "no-label" },
+          { label: "no-value" },
+          "not-an-object",
+        ],
+      }),
+    ).not.toThrow();
+    const html = render({
+      $type: "RadioGroup",
+      options: [{ label: "Small", value: "sm" }, null],
+    });
+    expect((html.match(/type="radio"/g) ?? []).length).toBe(1);
+  });
+
+  it("RadioGroup with missing options renders an empty fieldset without throwing", () => {
+    expect(() => render({ $type: "RadioGroup" })).not.toThrow();
+    expect(render({ $type: "RadioGroup" })).toBe(
+      '<fieldset data-aui="radiogroup"></fieldset>',
+    );
+  });
 });