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

package/src/vocabulary/interactive.tsx

@@ -1,39 +1,65 @@
+import { useId } from "react";
 import { z } from "zod";
 import type { Action } from "../ir";
 import { BUTTON_STYLES } from "../ir";
 import type { GenerativeUIDispatch, GenerativeUILibrary } from "../types";
+import { actionAttr, fire } from "./dispatch";
 
 const optionSchema = z.object({
   label: z.string(),
   value: z.string(),
 });
 
-const actionAttr = (a: Action | undefined): string | undefined =>
-  a ? JSON.stringify(a) : undefined;
-
-/** Fires `$action` through `$dispatch` when both are present, merging a runtime
- * value into the payload under the reserved `$input` key (not `value`) so the
- * user's input never clobbers a model-supplied `value` field. No-op when no
- * registry is wired. The returned promise from an async handler is caught and
- * re-thrown on a microtask so rejections surface rather than going unhandled. */
-const fire = (
-  $action: Action | undefined,
-  $dispatch: GenerativeUIDispatch | undefined,
-  input?: unknown,
-) => {
-  if (!$action || !$dispatch) return;
-  const payload = input === undefined ? $action : { ...$action, $input: input };
-  void Promise.resolve($dispatch(payload)).catch((error) => {
-    queueMicrotask(() => {
-      throw error;
-    });
-  });
+type RadioGroupRenderProps = {
+  options: { label: string; value: string }[];
+  name?: string;
+  label?: string;
+  defaultValue?: string;
+  $action?: Action;
+  $dispatch?: GenerativeUIDispatch;
 };
 
+function RadioGroupRender({
+  options,
+  name,
+  label,
+  defaultValue,
+  $action,
+  $dispatch,
+}: RadioGroupRenderProps) {
+  const generatedName = useId();
+  const fieldName = name ?? generatedName;
+  const safeOptions = Array.isArray(options) ? options : [];
+  return (
+    <fieldset
+      data-aui="radiogroup"
+      data-aui-action={actionAttr($action)}
+      aria-label={label}
+    >
+      {safeOptions.map((option, i) =>
+        option &&
+        typeof option.label === "string" &&
+        typeof option.value === "string" ? (
+          <label key={i} data-aui="radiogroup-option">
+            <input
+              type="radio"
+              name={fieldName}
+              value={option.value}
+              defaultChecked={defaultValue === option.value}
+              onChange={() => fire($action, $dispatch, option.value)}
+            />
+            {option.label}
+          </label>
+        ) : null,
+      )}
+    </fieldset>
+  );
+}
+
 export const interactiveVocabulary = {
   Button: {
     description:
-      "A clickable button. Carries `$action` describing the side effect or resume value.",
+      "A clickable button. Carries `$action` describing the side effect or resume value. Set `submit` to submit an ancestor Form/Card instead of firing `$action` on click.",
     properties: z.object({
       label: z.string().describe("Button label."),
       buttonStyle: z.enum(BUTTON_STYLES).optional().describe("Visual style."),
@@ -41,14 +67,30 @@ export const interactiveVocabulary = {
         .boolean()
         .optional()
         .describe("Whether the button spans the full width."),
+      submit: z
+        .boolean()
+        .optional()
+        .describe(
+          "Render as a submit button for an ancestor Form/Card instead of a click button.",
+        ),
     }),
-    render: ({ label, buttonStyle, block, $action, $dispatch, children }) => (
+    render: ({
+      label,
+      buttonStyle,
+      block,
+      submit,
+      $action,
+      $dispatch,
+      children,
+    }) => (
       <button
+        type={submit ? "submit" : "button"}
         data-aui="button"
         data-aui-style={buttonStyle}
         data-aui-block={block || undefined}
+        data-aui-submit={submit || undefined}
         data-aui-action={actionAttr($action)}
-        onClick={() => fire($action, $dispatch)}
+        onClick={submit ? undefined : () => fire($action, $dispatch)}
       >
         {label}
         {children}
@@ -68,11 +110,21 @@ export const interactiveVocabulary = {
         .string()
         .optional()
         .describe("Accessible label for the control."),
+      name: z.string().optional().describe("Field name used inside a Form."),
     }),
-    render: ({ options, placeholder, label, $action, $dispatch, children }) => (
+    render: ({
+      options,
+      placeholder,
+      label,
+      name,
+      $action,
+      $dispatch,
+      children,
+    }) => (
       <select
         data-aui="select"
         data-aui-action={actionAttr($action)}
+        name={name}
         aria-label={label}
         defaultValue=""
         onChange={(e) => fire($action, $dispatch, e.currentTarget.value)}
@@ -104,33 +156,48 @@ export const interactiveVocabulary = {
         .string()
         .optional()
         .describe("Accessible label for the control."),
+      name: z.string().optional().describe("Field name used inside a Form."),
     }),
-    render: ({ placeholder, multiline, label, $action, $dispatch }) => {
+    render: ({ placeholder, multiline, label, name, $action, $dispatch }) => {
       const submit = (v: string) => fire($action, $dispatch, v);
       return multiline ? (
         <textarea
           data-aui="input"
           data-aui-multiline
           data-aui-action={actionAttr($action)}
+          name={name}
           aria-label={label}
           placeholder={placeholder}
           onKeyDown={(e) => {
             if (
-              e.key === "Enter" &&
-              (e.ctrlKey || e.metaKey) &&
-              !e.nativeEvent.isComposing
+              e.key !== "Enter" ||
+              !(e.ctrlKey || e.metaKey) ||
+              e.nativeEvent.isComposing
             )
+              return;
+            if (e.currentTarget.form) {
+              e.preventDefault();
+              HTMLFormElement.prototype.requestSubmit.call(
+                e.currentTarget.form,
+              );
+            } else {
               submit(e.currentTarget.value);
+            }
           }}
         />
       ) : (
         <input
           data-aui="input"
           data-aui-action={actionAttr($action)}
+          name={name}
           aria-label={label}
           placeholder={placeholder}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.nativeEvent.isComposing)
+            if (
+              e.key === "Enter" &&
+              !e.nativeEvent.isComposing &&
+              !e.currentTarget.form
+            )
               submit(e.currentTarget.value);
           }}
         />
@@ -148,12 +215,14 @@ export const interactiveVocabulary = {
         .string()
         .optional()
         .describe("Accessible label for the control."),
+      name: z.string().optional().describe("Field name used inside a Form."),
     }),
-    render: ({ value, min, max, label, $action, $dispatch }) => (
+    render: ({ value, min, max, label, name, $action, $dispatch }) => (
       <input
         type="date"
         data-aui="datepicker"
         data-aui-action={actionAttr($action)}
+        name={name}
         aria-label={label}
         defaultValue={value}
         min={min}
@@ -162,4 +231,39 @@ export const interactiveVocabulary = {
       />
     ),
   },
+  Checkbox: {
+    description:
+      "A checkbox with a label. Carries `$action` describing the on-change behavior.",
+    properties: z.object({
+      label: z.string().describe("Label text next to the checkbox."),
+      name: z.string().optional().describe("Field name used inside a Form."),
+      defaultChecked: z
+        .boolean()
+        .optional()
+        .describe("Whether the checkbox starts checked."),
+    }),
+    render: ({ label, name, defaultChecked, $action, $dispatch }) => (
+      <label data-aui="checkbox">
+        <input
+          type="checkbox"
+          data-aui-action={actionAttr($action)}
+          name={name}
+          defaultChecked={defaultChecked}
+          onChange={(e) => fire($action, $dispatch, e.currentTarget.checked)}
+        />
+        <span data-aui="checkbox-label">{label}</span>
+      </label>
+    ),
+  },
+  RadioGroup: {
+    description:
+      "A group of mutually exclusive radio options. Carries `$action` describing the on-change behavior.",
+    properties: z.object({
+      options: z.array(optionSchema).describe("Selectable options."),
+      name: z.string().optional().describe("Field name used inside a Form."),
+      label: z.string().optional().describe("Accessible name for the group."),
+      defaultValue: z.string().optional().describe("Initially selected value."),
+    }),
+    render: RadioGroupRender,
+  },
 } satisfies GenerativeUILibrary;

package/src/vocabulary/layout.test.tsx

@@ -1,11 +1,33 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
+import type { ReactElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { renderGenerativeUI } from "../renderGenerativeUI";
+import { createActionRegistry } from "../actionRegistry";
 import { layoutVocabulary } from "./layout";
+import type { FormControlElementLike } from "./collectFormValues";
 
 const render = (node: unknown) =>
   renderToStaticMarkup(<>{renderGenerativeUI(node, layoutVocabulary)}</>);
 
+const el = (
+  partial: Partial<FormControlElementLike>,
+): FormControlElementLike => ({
+  name: "",
+  type: "text",
+  value: "",
+  disabled: false,
+  ...partial,
+});
+
+const getFooterButtons = (out: ReactElement) => {
+  const footer = (out.props as { children: unknown[] })
+    .children[2] as ReactElement;
+  const [confirmBtn, cancelBtn] = (
+    footer.props as { children: [ReactElement | null, ReactElement | null] }
+  ).children;
+  return { confirmBtn, cancelBtn };
+};
+
 describe("layoutVocabulary", () => {
   it("Card renders a section with optional title and padding/background hooks", () => {
     expect(
@@ -13,13 +35,32 @@ describe("layoutVocabulary", () => {
         $type: "Card",
         title: "T",
         padding: 2,
-        background: "muted",
+        background: "var(--muted)",
       }),
     ).toBe(
-      '<section data-aui="card" data-aui-padding="2" data-aui-background="muted"><header data-aui="card-title">T</header></section>',
+      '<section data-aui="card" data-aui-padding="2" data-aui-background="var(--muted)" style="background:var(--muted);color:white"><header data-aui="card-title">T</header></section>',
     );
   });
 
+  it("Card applies background as an inline style so arbitrary CSS values (colors, gradients) render", () => {
+    const html = render({
+      $type: "Card",
+      background: "linear-gradient(90deg, #3b82f6, #1d4ed8)",
+    });
+    expect(html).toContain(
+      'style="background:linear-gradient(90deg, #3b82f6, #1d4ed8);color:white"',
+    );
+  });
+
+  it("Card sets its text color to white whenever a background is provided", () => {
+    const html = render({ $type: "Card", background: "#1d4ed8" });
+    expect(html).toContain("color:white");
+  });
+
+  it("Card omits the style attribute when background is not provided", () => {
+    expect(render({ $type: "Card", title: "T" })).not.toContain("style=");
+  });
+
   it("Card without a title omits the header", () => {
     expect(render({ $type: "Card" })).toBe(
       '<section data-aui="card"></section>',
@@ -59,3 +100,190 @@ describe("layoutVocabulary", () => {
     );
   });
 });
+
+describe("layoutVocabulary Box", () => {
+  it("renders a bare div with no style attribute when no props are given", () => {
+    expect(render({ $type: "Box" })).toBe('<div data-aui="box"></div>');
+  });
+
+  it("applies width/height as inline pixel lengths when given numbers", () => {
+    const html = render({ $type: "Box", width: 200, height: 8 });
+    expect(html).toContain('style="width:200px;height:8px"');
+  });
+
+  it("applies width/height verbatim when given strings", () => {
+    const html = render({ $type: "Box", width: "100%", height: "1.5rem" });
+    expect(html).toContain('style="width:100%;height:1.5rem"');
+  });
+
+  it("applies a numeric radius as an inline pixel border-radius", () => {
+    const html = render({ $type: "Box", radius: 6 });
+    expect(html).toContain('style="border-radius:6px"');
+    expect(html).not.toContain("data-aui-radius");
+  });
+
+  it('applies radius "full" as a 9999px inline border-radius and a data-aui-radius hook', () => {
+    const html = render({ $type: "Box", radius: "full" });
+    expect(html).toContain('data-aui-radius="full"');
+    expect(html).toContain('style="border-radius:9999px"');
+  });
+
+  it("applies background as an inline style", () => {
+    const html = render({ $type: "Box", background: "#3b82f6" });
+    expect(html).toContain('style="background:#3b82f6"');
+  });
+
+  it("renders a progress bar as a track Box containing a partial-width fill Box", () => {
+    const html = render({
+      $type: "Box",
+      width: "100%",
+      height: 8,
+      radius: "full",
+      background: "var(--muted)",
+      children: {
+        $type: "Box",
+        width: "60%",
+        height: 8,
+        radius: "full",
+        background: "var(--primary)",
+      },
+    });
+    expect(html).toBe(
+      '<div data-aui="box" data-aui-radius="full" style="width:100%;height:8px;background:var(--muted);border-radius:9999px">' +
+        '<div data-aui="box" data-aui-radius="full" style="width:60%;height:8px;background:var(--primary);border-radius:9999px"></div>' +
+        "</div>",
+    );
+  });
+
+  it("renders nested children alongside style props", () => {
+    const html = render({
+      $type: "Box",
+      background: "red",
+      children: "content",
+    });
+    expect(html).toBe(
+      '<div data-aui="box" style="background:red">content</div>',
+    );
+  });
+});
+
+describe("layoutVocabulary Card asForm/confirm/cancel", () => {
+  it("Card with asForm renders a form element with the data-aui-asform hook", () => {
+    const html = render({ $type: "Card", asForm: true, title: "T" });
+    expect(html).toContain("<form ");
+    expect(html).toContain('data-aui-asform="true"');
+    expect(html).not.toContain("<section");
+  });
+
+  it("Card without asForm renders a section with no data-aui-asform hook", () => {
+    const html = render({ $type: "Card" });
+    expect(html).toContain("<section");
+    expect(html).not.toContain("data-aui-asform");
+  });
+
+  it("Card omits the footer when neither confirm nor cancel is present", () => {
+    expect(render({ $type: "Card" })).not.toContain("card-footer");
+  });
+
+  it("Card renders a footer when only confirm is present", () => {
+    expect(render({ $type: "Card", confirm: { label: "OK" } })).toContain(
+      'data-aui="card-footer"',
+    );
+  });
+
+  it("Card renders a footer when only cancel is present", () => {
+    expect(render({ $type: "Card", cancel: { label: "Cancel" } })).toContain(
+      'data-aui="card-footer"',
+    );
+  });
+
+  it("Card confirm renders a submit button when asForm is set", () => {
+    const html = render({
+      $type: "Card",
+      asForm: true,
+      confirm: { label: "Save" },
+    });
+    expect(html).toContain('type="submit" data-aui="card-confirm"');
+    expect(html).toContain("Save");
+  });
+
+  it("Card confirm renders a click button when asForm is not set", () => {
+    const html = render({ $type: "Card", confirm: { label: "Save" } });
+    expect(html).toContain('type="button" data-aui="card-confirm"');
+  });
+
+  it("Card cancel always renders a plain button regardless of asForm", () => {
+    const html = render({
+      $type: "Card",
+      asForm: true,
+      cancel: { label: "Dismiss" },
+    });
+    expect(html).toContain('type="button" data-aui="card-cancel"');
+  });
+});
+
+describe("layoutVocabulary Card asForm/confirm/cancel dispatch", () => {
+  it("Card asForm submit collects named values and dispatches confirm.$action with $input", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ save: handler });
+    const out = layoutVocabulary.Card.render({
+      asForm: true,
+      confirm: { label: "Save", $action: { type: "save" } },
+      $status: "done",
+      $dispatch: registry.dispatch,
+    }) as ReactElement;
+    const onSubmit = (out.props as { onSubmit: (e: unknown) => void }).onSubmit;
+    const event = {
+      preventDefault: vi.fn(),
+      currentTarget: {
+        elements: [el({ name: "email", type: "email", value: "a@x.com" })],
+      },
+    };
+    onSubmit(event);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(handler).toHaveBeenCalledWith({
+      payload: { type: "save", $input: { email: "a@x.com" } },
+    });
+  });
+
+  it("Card confirm click (non-asForm) fires confirm.$action without $input", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ save: handler });
+    const out = layoutVocabulary.Card.render({
+      confirm: { label: "Save", $action: { type: "save" } },
+      $status: "done",
+      $dispatch: registry.dispatch,
+    }) as ReactElement;
+    const { confirmBtn } = getFooterButtons(out);
+    const onClick = (confirmBtn!.props as { onClick: () => void }).onClick;
+    onClick();
+    expect(handler).toHaveBeenCalledWith({ payload: { type: "save" } });
+  });
+
+  it("Card confirm button has no onClick when asForm is set (the form submit handles it)", () => {
+    const out = layoutVocabulary.Card.render({
+      asForm: true,
+      confirm: { label: "Save", $action: { type: "save" } },
+      $status: "done",
+    }) as ReactElement;
+    const { confirmBtn } = getFooterButtons(out);
+    expect(
+      (confirmBtn!.props as { onClick?: unknown }).onClick,
+    ).toBeUndefined();
+  });
+
+  it("Card cancel click fires cancel.$action without $input regardless of asForm", () => {
+    const handler = vi.fn();
+    const registry = createActionRegistry({ dismiss: handler });
+    const out = layoutVocabulary.Card.render({
+      asForm: true,
+      cancel: { label: "Dismiss", $action: { type: "dismiss" } },
+      $status: "done",
+      $dispatch: registry.dispatch,
+    }) as ReactElement;
+    const { cancelBtn } = getFooterButtons(out);
+    const onClick = (cancelBtn!.props as { onClick: () => void }).onClick;
+    onClick();
+    expect(handler).toHaveBeenCalledWith({ payload: { type: "dismiss" } });
+  });
+});