@assistant-ui/react-generative-ui 0.0.24 → 0.1.0

package/src/vocabulary/list.test.tsx

@@ -1,222 +0,0 @@
-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 type { GenerativeUIDispatch } from "../types";
-import { listVocabulary } from "./list";
-
-const render = (node: unknown) =>
-  renderToStaticMarkup(<>{renderGenerativeUI(node, listVocabulary)}</>);
-
-describe("listVocabulary", () => {
-  it("ListView renders a ul wrapping its children", () => {
-    const html = render({
-      $type: "ListView",
-      children: [
-        { $type: "ListViewItem", children: "a" },
-        { $type: "ListViewItem", children: "b" },
-      ],
-    });
-    expect(html).toContain('<ul data-aui="listview">');
-    expect((html.match(/data-aui="listview-item"/g) ?? []).length).toBe(2);
-  });
-
-  it("ListViewItem without $action renders children directly with no trigger wrapper", () => {
-    expect(render({ $type: "ListViewItem", children: "row" })).toBe(
-      '<li data-aui="listview-item">row</li>',
-    );
-  });
-
-  it("ListViewItem with $action but no dispatch renders children directly (read-only)", () => {
-    expect(
-      render({
-        $type: "ListViewItem",
-        $action: { type: "open" },
-        children: "row",
-      }),
-    ).toBe('<li data-aui="listview-item">row</li>');
-  });
-
-  it("ListViewItem wraps children in a clickable trigger when $action and dispatch are both present", () => {
-    const registry = createActionRegistry({ open: vi.fn() });
-    const html = renderToStaticMarkup(
-      <>
-        {renderGenerativeUI(
-          { $type: "ListViewItem", $action: { type: "open" }, children: "row" },
-          listVocabulary,
-          { status: "done", dispatch: registry.dispatch },
-        )}
-      </>,
-    );
-    expect(html).toContain('data-aui="listview-item-trigger"');
-    expect(html).toContain('role="button"');
-    expect(html).toContain('tabindex="0"');
-  });
-});
-
-describe("listVocabulary $action dispatch", () => {
-  const rowOut = (dispatch: GenerativeUIDispatch) =>
-    listVocabulary.ListViewItem.render({
-      $status: "done",
-      $action: { type: "open" },
-      $dispatch: dispatch,
-      children: "row",
-    }) as ReactElement<{ children: ReactElement }>;
-
-  it("clicking the trigger fires $action with no $input", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const trigger = rowOut(registry.dispatch).props.children as ReactElement;
-    const onClick = (trigger.props as { onClick: (e: unknown) => void })
-      .onClick;
-    onClick({
-      target: { closest: () => trigger },
-      currentTarget: trigger,
-    });
-    expect(handler).toHaveBeenCalledWith({ payload: { type: "open" } });
-  });
-
-  type KeyDownEvent = {
-    key: string;
-    target: { closest: (selector: string) => unknown };
-    currentTarget: unknown;
-    preventDefault: () => void;
-  };
-
-  const getOnKeyDown = (dispatch: GenerativeUIDispatch) => {
-    const trigger = rowOut(dispatch).props.children;
-    return (trigger.props as { onKeyDown: (e: KeyDownEvent) => void })
-      .onKeyDown;
-  };
-
-  it("Enter and Space keydown both fire $action", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    const currentTarget = {};
-    onKeyDown({
-      key: "Enter",
-      target: { closest: () => currentTarget },
-      currentTarget,
-      preventDefault: vi.fn(),
-    });
-    onKeyDown({
-      key: " ",
-      target: { closest: () => currentTarget },
-      currentTarget,
-      preventDefault: vi.fn(),
-    });
-    expect(handler).toHaveBeenCalledTimes(2);
-  });
-
-  it("a keydown for any other key does not fire $action", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    onKeyDown({
-      key: "Tab",
-      target: { closest: () => null },
-      currentTarget: {},
-      preventDefault: vi.fn(),
-    });
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it("a click whose target sits inside a nested interactive element does not fire the row action", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const trigger = rowOut(registry.dispatch).props.children as ReactElement;
-    const onClick = (trigger.props as { onClick: (e: unknown) => void })
-      .onClick;
-    const nestedButton = {
-      closest: (selector: string) =>
-        selector.includes("button") ? nestedButton : null,
-    };
-    onClick({ target: nestedButton, currentTarget: {} });
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it("a keydown Enter whose target sits inside a nested interactive element does not fire the row action", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    const nestedInput = {
-      closest: (selector: string) =>
-        selector.includes("input") ? nestedInput : null,
-    };
-    const preventDefault = vi.fn();
-    onKeyDown({
-      key: "Enter",
-      target: nestedInput,
-      currentTarget: {},
-      preventDefault,
-    });
-    expect(handler).not.toHaveBeenCalled();
-    expect(preventDefault).not.toHaveBeenCalled();
-  });
-
-  it('a click whose target sits inside a nested role="button" element does not fire the row action', () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const trigger = rowOut(registry.dispatch).props.children as ReactElement;
-    const onClick = (trigger.props as { onClick: (e: unknown) => void })
-      .onClick;
-    const nestedRoleButton = {
-      closest: (selector: string) =>
-        selector.includes('[role="button"]') ? nestedRoleButton : null,
-    };
-    onClick({ target: nestedRoleButton, currentTarget: {} });
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it('a keydown Enter whose target sits inside a nested role="button" element (e.g. a nested ListViewItem trigger) does not fire the row action', () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    const nestedRoleButton = {
-      closest: (selector: string) =>
-        selector.includes('[role="button"]') ? nestedRoleButton : null,
-    };
-    const preventDefault = vi.fn();
-    onKeyDown({
-      key: "Enter",
-      target: nestedRoleButton,
-      currentTarget: {},
-      preventDefault,
-    });
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it("Space on the trigger itself fires the row action and prevents default", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    const currentTarget = {};
-    const preventDefault = vi.fn();
-    onKeyDown({
-      key: " ",
-      target: { closest: () => currentTarget },
-      currentTarget,
-      preventDefault,
-    });
-    expect(handler).toHaveBeenCalledWith({ payload: { type: "open" } });
-    expect(preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it("Enter on the trigger itself fires without calling preventDefault", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ open: handler });
-    const onKeyDown = getOnKeyDown(registry.dispatch);
-    const currentTarget = {};
-    const preventDefault = vi.fn();
-    onKeyDown({
-      key: "Enter",
-      target: { closest: () => currentTarget },
-      currentTarget,
-      preventDefault,
-    });
-    expect(handler).toHaveBeenCalledWith({ payload: { type: "open" } });
-    expect(preventDefault).not.toHaveBeenCalled();
-  });
-});

package/src/vocabulary/list.tsx

@@ -1,50 +0,0 @@
-import { z } from "zod";
-import type { GenerativeUILibrary } from "../types";
-import { fire } from "./dispatch";
-
-const INTERACTIVE_DESCENDANT_SELECTOR =
-  'button, a, input, select, textarea, label, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="combobox"], [role="menuitem"]';
-
-export const listVocabulary = {
-  ListView: {
-    description:
-      "A vertical list container. Wrap `ListViewItem` children as rows.",
-    properties: z.object({}),
-    render: ({ children }) => <ul data-aui="listview">{children}</ul>,
-  },
-  ListViewItem: {
-    description:
-      "A row inside a ListView. Carries `$action` to make the whole row clickable and keyboard-activatable.",
-    properties: z.object({}),
-    render: ({ $action, $dispatch, children }) => {
-      if (!$action || !$dispatch) {
-        return <li data-aui="listview-item">{children}</li>;
-      }
-      return (
-        <li data-aui="listview-item">
-          <div
-            role="button"
-            tabIndex={0}
-            data-aui="listview-item-trigger"
-            onClick={(event) => {
-              const target = event.target as Element;
-              const hit = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
-              if (hit !== null && hit !== event.currentTarget) return;
-              fire($action, $dispatch, undefined, event.currentTarget);
-            }}
-            onKeyDown={(event) => {
-              if (event.key !== "Enter" && event.key !== " ") return;
-              const target = event.target as Element;
-              const hit = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
-              if (hit !== null && hit !== event.currentTarget) return;
-              if (event.key === " ") event.preventDefault();
-              fire($action, $dispatch, undefined, event.currentTarget);
-            }}
-          >
-            {children}
-          </div>
-        </li>
-      );
-    },
-  },
-} satisfies GenerativeUILibrary;

package/src/vocabulary/media.test.tsx

@@ -1,85 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-import { renderGenerativeUI } from "../renderGenerativeUI";
-import { mediaVocabulary } from "./media";
-
-const render = (node: unknown) =>
-  renderToStaticMarkup(<>{renderGenerativeUI(node, mediaVocabulary)}</>);
-
-describe("mediaVocabulary", () => {
-  it("Image renders an img with src, alt, and size hook", () => {
-    const html = render({
-      $type: "Image",
-      src: "/a.png",
-      alt: "alt",
-      size: "md",
-    });
-    expect(html).toContain(
-      '<img data-aui="image" data-aui-size="md" src="/a.png" alt="alt"/>',
-    );
-  });
-
-  it("Image renders a numeric size as an inline max-width style, not a dead data-aui-size attribute", () => {
-    const html = render({
-      $type: "Image",
-      src: "/a.png",
-      alt: "alt",
-      size: 128,
-    });
-    expect(html).not.toContain("data-aui-size");
-    expect(html).toContain('style="max-width:128px"');
-  });
-
-  it("Image renders a numeric size on a round avatar as an inline width/height square", () => {
-    const html = render({
-      $type: "Image",
-      src: "/a.png",
-      alt: "avatar",
-      size: 64,
-      round: true,
-    });
-    expect(html).not.toContain("data-aui-size");
-    expect(html).toContain('style="width:64px;height:64px"');
-  });
-
-  it("Image `alt` is required by the schema (not optional)", () => {
-    const schema = mediaVocabulary.Image.properties as unknown as {
-      safeParse: (v: unknown) => { success: boolean };
-    };
-    expect(schema.safeParse({ src: "/a.png" }).success).toBe(false);
-    expect(schema.safeParse({ src: "/a.png", alt: "x" }).success).toBe(true);
-  });
-
-  it("Image omits data-aui-round when round is not set", () => {
-    const html = render({ $type: "Image", src: "/a.png", alt: "alt" });
-    expect(html).not.toContain("data-aui-round");
-  });
-
-  it("Image renders data-aui-round when round is true", () => {
-    const html = render({
-      $type: "Image",
-      src: "/a.png",
-      alt: "avatar",
-      round: true,
-    });
-    expect(html).toContain('data-aui-round="true"');
-  });
-
-  it("Image with a missing alt still renders (defensive: schema validation is not runtime enforcement)", () => {
-    expect(() =>
-      render({ $type: "Image", src: "/a.png" } as never),
-    ).not.toThrow();
-  });
-
-  it("Divider omits data-aui-flush when flush is false", () => {
-    expect(render({ $type: "Divider", flush: false })).toBe(
-      '<hr data-aui="divider"/>',
-    );
-  });
-
-  it("Divider renders an hr with a flush hook", () => {
-    expect(render({ $type: "Divider", flush: true })).toBe(
-      '<hr data-aui="divider" data-aui-flush="true"/>',
-    );
-  });
-});

package/src/vocabulary/media.tsx

@@ -1,56 +0,0 @@
-import type { CSSProperties } from "react";
-import { z } from "zod";
-import type { GenerativeUILibrary } from "../types";
-import { IMAGE_SIZE_TOKENS } from "../ir";
-
-export const mediaVocabulary = {
-  Image: {
-    description: "An image. Provide `src` and `alt` for accessibility.",
-    properties: z.object({
-      src: z.string().describe("Image URL."),
-      alt: z.string().describe("Alt text for accessibility."),
-      size: z
-        .union([z.enum(IMAGE_SIZE_TOKENS), z.number()])
-        .optional()
-        .describe("Size token or pixel value."),
-      round: z
-        .boolean()
-        .optional()
-        .describe(
-          "Render as a circular avatar (fully rounded, cropped to a square).",
-        ),
-    }),
-    render: ({ src, alt, size, round }) => {
-      const numericSize = typeof size === "number" ? size : undefined;
-      const style: CSSProperties | undefined =
-        numericSize === undefined
-          ? undefined
-          : round
-            ? { width: `${numericSize}px`, height: `${numericSize}px` }
-            : { maxWidth: `${numericSize}px` };
-
-      return (
-        <img
-          data-aui="image"
-          data-aui-size={numericSize === undefined ? size : undefined}
-          data-aui-round={round || undefined}
-          src={src}
-          alt={alt}
-          style={style}
-        />
-      );
-    },
-  },
-  Divider: {
-    description: "A horizontal rule between sections.",
-    properties: z.object({
-      flush: z
-        .boolean()
-        .optional()
-        .describe("Whether the divider spans the full width with no inset."),
-    }),
-    render: ({ flush }) => (
-      <hr data-aui="divider" data-aui-flush={flush || undefined} />
-    ),
-  },
-} satisfies GenerativeUILibrary;

package/src/vocabulary/text.test.tsx

@@ -1,102 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-import { renderGenerativeUI } from "../renderGenerativeUI";
-import { textVocabulary } from "./text";
-
-const render = (node: unknown) =>
-  renderToStaticMarkup(<>{renderGenerativeUI(node, textVocabulary)}</>);
-
-describe("textVocabulary", () => {
-  it("Header renders an h2 with the text and a size hook", () => {
-    expect(render({ $type: "Header", text: "Title", size: "xl" })).toBe(
-      '<h2 data-aui="header" data-aui-size="xl">Title</h2>',
-    );
-  });
-
-  it("Header defaults size to lg when omitted", () => {
-    expect(render({ $type: "Header", text: "Title" })).toBe(
-      '<h2 data-aui="header" data-aui-size="lg">Title</h2>',
-    );
-  });
-
-  it("Text renders a span with size/weight/color hooks and the value", () => {
-    expect(
-      render({
-        $type: "Text",
-        value: "hi",
-        size: "sm",
-        weight: "bold",
-        color: "secondary",
-      }),
-    ).toBe(
-      '<span data-aui="text" data-aui-size="sm" data-aui-weight="bold" data-aui-color="secondary">hi</span>',
-    );
-  });
-
-  it("Text defaults size to md and leaves weight/color undefined", () => {
-    expect(render({ $type: "Text", value: "hi" })).toBe(
-      '<span data-aui="text" data-aui-size="md">hi</span>',
-    );
-  });
-
-  it("Text renders partial value while streaming (streamProperties: true)", () => {
-    expect(
-      renderToStaticMarkup(
-        <>
-          {renderGenerativeUI(
-            { $type: "Text", value: "partial" },
-            textVocabulary,
-            { status: "streaming" },
-          )}
-        </>,
-      ),
-    ).toBe('<span data-aui="text" data-aui-size="md">partial</span>');
-  });
-
-  it("Text renders nested children (span-in-span, valid HTML)", () => {
-    expect(
-      render({
-        $type: "Text",
-        value: "before",
-        children: { $type: "Text", value: "after" },
-      }),
-    ).toBe(
-      '<span data-aui="text" data-aui-size="md">before<span data-aui="text" data-aui-size="md">after</span></span>',
-    );
-  });
-
-  it("Caption renders a p with the value", () => {
-    expect(render({ $type: "Caption", value: "muted note" })).toBe(
-      '<p data-aui="caption">muted note</p>',
-    );
-  });
-
-  it.each([
-    [
-      { $type: "Header", text: { unexpected: true } },
-      undefined,
-      '<h2 data-aui="header" data-aui-size="lg"></h2>',
-    ],
-    [
-      { $type: "Text", value: { unexpected: true } },
-      { status: "streaming" as const },
-      '<span data-aui="text" data-aui-size="md"></span>',
-    ],
-    [
-      { $type: "Caption", value: { unexpected: true } },
-      { status: "streaming" as const },
-      '<p data-aui="caption"></p>',
-    ],
-    [
-      { $type: "Text", value: 42 },
-      { status: "streaming" as const },
-      '<span data-aui="text" data-aui-size="md">42</span>',
-    ],
-  ])("renders only supported text properties", (node, options, expected) => {
-    expect(
-      renderToStaticMarkup(
-        <>{renderGenerativeUI(node, textVocabulary, options)}</>,
-      ),
-    ).toBe(expected);
-  });
-});

package/src/vocabulary/text.tsx

@@ -1,60 +0,0 @@
-import { z } from "zod";
-import type { GenerativeUILibrary } from "../types";
-import { COLORS, TEXT_SIZES, WEIGHTS } from "../ir";
-import { toTextContent } from "./toTextContent";
-
-export const textVocabulary = {
-  Header: {
-    description: "A section heading. Renders as a bold title.",
-    properties: z.object({
-      text: z.string().describe("The heading text."),
-      size: z
-        .enum(TEXT_SIZES)
-        .optional()
-        .describe("Heading size; defaults to `lg`."),
-    }),
-    render: ({ text, size, children }) => (
-      <h2 data-aui="header" data-aui-size={size ?? "lg"}>
-        {toTextContent(text)}
-        {children}
-      </h2>
-    ),
-  },
-  Text: {
-    description: "A run of text. Use for paragraphs, labels, or inline copy.",
-    properties: z.object({
-      value: z.string().describe("The text content."),
-      size: z
-        .enum(TEXT_SIZES)
-        .optional()
-        .describe("Text size; defaults to `md`."),
-      weight: z.enum(WEIGHTS).optional().describe("Font weight."),
-      color: z.enum(COLORS).optional().describe("Foreground color token."),
-    }),
-    streamProperties: true,
-    render: ({ value, size, weight, color, children }) => (
-      <span
-        data-aui="text"
-        data-aui-size={size ?? "md"}
-        data-aui-weight={weight}
-        data-aui-color={color}
-      >
-        {toTextContent(value)}
-        {children}
-      </span>
-    ),
-  },
-  Caption: {
-    description: "Secondary, de-emphasized text under a primary element.",
-    properties: z.object({
-      value: z.string().describe("The caption text."),
-    }),
-    streamProperties: true,
-    render: ({ value, children }) => (
-      <p data-aui="caption">
-        {toTextContent(value)}
-        {children}
-      </p>
-    ),
-  },
-} satisfies GenerativeUILibrary;

package/src/vocabulary/toTextContent.ts

@@ -1,2 +0,0 @@
-export const toTextContent = (value: unknown): string | number | null =>
-  typeof value === "string" || typeof value === "number" ? value : null;