@dowel-ui/react 0.1.0 → 0.1.1

package/dist/components/ai-agent-status/ai-agent-status.d.ts

@@ -10,7 +10,7 @@ import { ComponentPropsWithRef } from "react";
  */
 type AgentState = "idle" | "thinking" | "working" | "waiting" | "done" | "error";
 declare const agentStatusVariants: (props?: ({
-  state?: "done" | "error" | "idle" | "thinking" | "working" | "waiting" | null | undefined;
+  state?: "done" | "idle" | "thinking" | "working" | "waiting" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AgentStatusProps extends ComponentPropsWithRef<"span">, VariantProps<typeof agentStatusVariants> {
   state?: AgentState;

package/dist/components/ai-tool/ai-tool.d.ts

@@ -14,7 +14,7 @@ import { ComponentPropsWithRef, ReactNode } from "react";
  */
 type ToolStatus = "pending" | "running" | "success" | "error";
 declare const toolVariants: (props?: ({
-  status?: "success" | "pending" | "running" | "error" | null | undefined;
+  status?: "error" | "pending" | "running" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ToolProps extends ComponentPropsWithRef<typeof Collapsible.Root>, VariantProps<typeof toolVariants> {
   status?: ToolStatus;

package/dist/components/alert/alert.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/alert/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+  variant?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * How urgently the alert should interrupt a screen reader.

package/dist/components/avatar/avatar.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/avatar/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AvatarProps extends ComponentPropsWithRef<typeof Avatar.Root>, VariantProps<typeof avatarVariants> {}
 /** Image representation of a user or entity, with a text fallback. */

package/dist/components/badge/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/badge/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "success" | "warning" | "info" | "secondary" | "outline" | null | undefined;
+  variant?: "success" | "warning" | "destructive" | "default" | "info" | "secondary" | "outline" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends ComponentPropsWithRef<"span">, VariantProps<typeof badgeVariants> {

package/dist/components/button/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "destructive" | "primary" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "link" | "primary" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<typeof buttonVariants> {

package/dist/components/progress/progress.d.ts

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/progress/progress.d.ts
 declare const progressVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
-  tone?: "destructive" | "success" | "warning" | "primary" | null | undefined;
+  tone?: "success" | "primary" | "warning" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, VariantProps<typeof progressVariants> {}
 /**

package/dist/components/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/spinner/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<ComponentPropsWithRef<"svg">, "children">, VariantProps<typeof spinnerVariants> {
   /**

package/dist/components/toast/toast.d.ts

@@ -12,7 +12,7 @@ import { ComponentPropsWithRef } from "react";
  * toast list from anywhere on the page.
  */
 declare const toastVariants: (props?: ({
-  variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+  variant?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const ToastProvider: import("react").FC<Toast.ToastProviderProps>;
 interface ToastProps extends ComponentPropsWithRef<typeof Toast.Root>, VariantProps<typeof toastVariants> {}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@dowel-ui/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Source-first React components.",
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.tsx"
   ],
   "exports": {
     ".": {
@@ -58,8 +61,8 @@
     "vite": "8.2.2",
     "vitest": "4.1.10",
     "zod": "4.5.4",
-    "@dowel-ui/config": "0.1.0",
-    "@dowel-ui/themes": "0.1.0"
+    "@dowel-ui/themes": "0.1.1",
+    "@dowel-ui/config": "0.1.1"
   },
   "scripts": {
     "build": "tsdown",

package/src/blocks/admin-users/admin-users.stories.tsx

@@ -1,83 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-
-import { AdminUsersBlock, type AdminUser } from "./admin-users";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withPageWidth: Decorator = (Story) => (
-  <div className="w-[64rem] max-w-full">
-    <Story />
-  </div>
-);
-
-const USERS: AdminUser[] = [
-  {
-    id: "1",
-    name: "Ada Lovelace",
-    email: "ada@example.com",
-    role: "Owner",
-    status: "Active",
-    lastActive: "2 hours ago",
-  },
-  {
-    id: "2",
-    name: "Grace Hopper",
-    email: "grace@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Yesterday",
-  },
-  {
-    id: "3",
-    name: "Katherine Johnson",
-    email: "kj@example.com",
-    role: "Member",
-    status: "Invited",
-    lastActive: "Never",
-  },
-  {
-    id: "4",
-    name: "Radia Perlman",
-    email: "radia@example.com",
-    role: "Viewer",
-    status: "Suspended",
-    lastActive: "3 weeks ago",
-  },
-  {
-    id: "5",
-    name: "Barbara Liskov",
-    email: "barbara@example.com",
-    role: "Member",
-    status: "Active",
-    lastActive: "5 minutes ago",
-  },
-  {
-    id: "6",
-    name: "Margaret Hamilton",
-    email: "margaret@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Last week",
-  },
-];
-
-const meta = {
-  title: "Blocks/Admin — users",
-  component: AdminUsersBlock,
-  args: { users: USERS },
-  parameters: { controls: { disable: true } },
-  decorators: [withPageWidth],
-} satisfies Meta<typeof AdminUsersBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Filter, sort and hide columns. The matching count is announced as you type. */
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: { users: [] },
-};
-
-export const SinglePerson: Story = {
-  args: { users: [USERS[0]!] },
-};

package/src/blocks/admin-users/admin-users.test.tsx

@@ -1,159 +0,0 @@
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { AdminUsersBlock, type AdminUser } from "./admin-users";
-
-const USERS: AdminUser[] = [
-  {
-    id: "1",
-    name: "Ada Lovelace",
-    email: "ada@example.com",
-    role: "Owner",
-    status: "Active",
-    lastActive: "2 hours ago",
-  },
-  {
-    id: "2",
-    name: "Grace Hopper",
-    email: "grace@example.com",
-    role: "Admin",
-    status: "Active",
-    lastActive: "Yesterday",
-  },
-  {
-    id: "3",
-    name: "Katherine Johnson",
-    email: "kj@example.com",
-    role: "Member",
-    status: "Invited",
-    lastActive: "Never",
-  },
-  {
-    id: "4",
-    name: "Radia Perlman",
-    email: "radia@example.com",
-    role: "Viewer",
-    status: "Suspended",
-    lastActive: "3 weeks ago",
-  },
-];
-
-function rowCount(): number {
-  const body = screen.getAllByRole("rowgroup")[1];
-  return body ? within(body).queryAllByRole("row").length : 0;
-}
-
-describe("AdminUsersBlock", () => {
-  it("renders a row per user", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    expect(rowCount()).toBe(4);
-  });
-
-  it("gives the filter a real label, not just a placeholder", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    // A placeholder disappears the moment anyone types, taking the field's name
-    // with it.
-    expect(screen.getByLabelText("Filter by name or email")).toBeInTheDocument();
-  });
-
-  it("filters by name and by email", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "grace");
-    await waitFor(() => {
-      expect(rowCount()).toBe(1);
-    });
-    expect(screen.getByText("Grace Hopper")).toBeInTheDocument();
-
-    await user.clear(screen.getByLabelText("Filter by name or email"));
-    await user.type(screen.getByLabelText("Filter by name or email"), "kj@example");
-    await waitFor(() => {
-      expect(screen.getByText("Katherine Johnson")).toBeInTheDocument();
-    });
-  });
-
-  it("announces the matching count, since results change unbidden", async () => {
-    const user = userEvent.setup();
-    const { container } = render(<AdminUsersBlock users={USERS} />);
-
-    const status = container.querySelector("[aria-live='polite']");
-    expect(status).toHaveTextContent("4 people match the filter.");
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "grace");
-    await waitFor(() => {
-      expect(status).toHaveTextContent("1 person match");
-    });
-  });
-
-  it("shows an empty state naming the query that found nothing", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.type(screen.getByLabelText("Filter by name or email"), "zzzz");
-    expect(await screen.findByText(/No one matches/)).toBeInTheDocument();
-  });
-
-  it("names each row's action button after its row", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    // Four identical "Actions" buttons say nothing about which row you are on.
-    expect(
-      screen.getByRole("button", { name: "Actions for Ada Lovelace" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Actions for Grace Hopper" }),
-    ).toBeInTheDocument();
-  });
-
-  it("runs the row actions", async () => {
-    const onEdit = vi.fn();
-    const onRemove = vi.fn();
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} onEdit={onEdit} onRemove={onRemove} />);
-
-    await user.click(screen.getByRole("button", { name: "Actions for Ada Lovelace" }));
-    await user.click(await screen.findByRole("menuitem", { name: "Edit member" }));
-    expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ name: "Ada Lovelace" }));
-
-    await user.click(screen.getByRole("button", { name: "Actions for Grace Hopper" }));
-    await user.click(await screen.findByRole("menuitem", { name: "Remove from team" }));
-    expect(onRemove).toHaveBeenCalledWith(expect.objectContaining({ name: "Grace Hopper" }));
-  });
-
-  it("states each status in words", () => {
-    render(<AdminUsersBlock users={USERS} />);
-    expect(screen.getByText("Suspended")).toBeInTheDocument();
-    expect(screen.getByText("Invited")).toBeInTheDocument();
-  });
-
-  it("sorts by a column", async () => {
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} />);
-
-    await user.click(screen.getByRole("button", { name: /User, not sorted/ }));
-    await user.click(await screen.findByRole("menuitem", { name: "Sort descending" }));
-
-    await waitFor(() => {
-      expect(screen.getByRole("columnheader", { name: /User/ })).toHaveAttribute(
-        "aria-sort",
-        "descending",
-      );
-    });
-  });
-
-  it("invites people", async () => {
-    const onInvite = vi.fn();
-    const user = userEvent.setup();
-    render(<AdminUsersBlock users={USERS} onInvite={onInvite} />);
-
-    await user.click(screen.getByRole("button", { name: "Invite people" }));
-    expect(onInvite).toHaveBeenCalledTimes(1);
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<AdminUsersBlock users={USERS} />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/blocks/ai-chat/ai-chat.stories.tsx

@@ -1,149 +0,0 @@
-import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { AiChatBlock, type ChatMessage } from "./ai-chat";
-
-/** Named so its type is nameable in declaration output (TS2883). */
-const withChatFrame: Decorator = (Story) => (
-  <div className="h-[36rem] w-[42rem] max-w-full overflow-hidden rounded-xl border border-border">
-    <Story />
-  </div>
-);
-
-const MODELS = [
-  { id: "fast", name: "Fast", description: "Lowest latency." },
-  { id: "balanced", name: "Balanced", description: "The default." },
-  { id: "deep", name: "Deep Research", description: "Multi-step, with citations." },
-];
-
-const CONVERSATION: ChatMessage[] = [
-  { id: "1", from: "user", content: "How do I make an overflowing table keyboard-scrollable?" },
-  {
-    id: "2",
-    from: "assistant",
-    content:
-      'Give the scrolling wrapper tabindex="0", a role of "region" and an accessible name. Without a focus stop, the columns past the edge are unreachable without a pointer.',
-    reasoning:
-      "The question is about keyboard access to overflowing tables.\n\nA scroll container is not focusable by default, so its content past the edge cannot be reached without a pointer. Adding a focus stop with a role and a name fixes both the reachability and the unlabelled-stop problem.",
-    tools: [
-      {
-        id: "t1",
-        name: "search_docs",
-        status: "success",
-        arguments: JSON.stringify({ query: "scrollable region keyboard", limit: 5 }, null, 2),
-        result: JSON.stringify({ hits: 3, top: "ARIA Authoring Practices" }, null, 2),
-      },
-    ],
-    sources: [
-      {
-        index: 1,
-        title: "ARIA Authoring Practices — scrollable regions",
-        origin: "w3.org",
-        href: "#1",
-      },
-      { index: 2, title: "Accessible data tables", origin: "example.org", href: "#2" },
-    ],
-    tokens: 148,
-  },
-];
-
-const meta = {
-  title: "Blocks/AI Chat",
-  component: AiChatBlock,
-  args: { messages: CONVERSATION, models: MODELS, model: "balanced" },
-  parameters: { controls: { disable: true } },
-  decorators: [withChatFrame],
-} satisfies Meta<typeof AiChatBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: { messages: [] },
-};
-
-export const Waiting: Story = {
-  args: { messages: [CONVERSATION[0]!], waiting: true },
-};
-
-export const Streaming: Story = {
-  args: {
-    messages: [
-      CONVERSATION[0]!,
-      {
-        id: "2",
-        from: "assistant",
-        content: 'Give the scrolling wrapper tabindex="0", a role',
-        streaming: true,
-      },
-    ],
-    busy: true,
-  },
-};
-
-/** Send a message and watch it stream back. */
-export const Interactive: Story = {
-  render: function Interactive() {
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
-    const [waiting, setWaiting] = useState(false);
-    const [busy, setBusy] = useState(false);
-
-    function reply(text: string) {
-      const answer = `You asked: “${text}”. In a real product this is where the response would stream in, one token at a time.`;
-      let shown = 0;
-
-      const id = String(Date.now());
-      setWaiting(false);
-      setBusy(true);
-      setMessages((current) => [
-        ...current,
-        { id, from: "assistant", content: "", streaming: true },
-      ]);
-
-      const timer = window.setInterval(() => {
-        shown += 2;
-        const done = shown >= answer.length;
-
-        setMessages((current) =>
-          current.map((message) =>
-            message.id === id
-              ? {
-                  ...message,
-                  content: answer.slice(0, shown),
-                  streaming: !done,
-                  tokens: done ? 42 : undefined,
-                }
-              : message,
-          ),
-        );
-
-        if (done) {
-          window.clearInterval(timer);
-          setBusy(false);
-        }
-      }, 30);
-    }
-
-    return (
-      <AiChatBlock
-        messages={messages}
-        models={MODELS}
-        model="balanced"
-        busy={busy}
-        waiting={waiting}
-        onSend={(text) => {
-          setMessages((current) => [
-            ...current,
-            { id: `u${String(current.length)}`, from: "user", content: text },
-          ]);
-          setWaiting(true);
-          window.setTimeout(() => {
-            reply(text);
-          }, 700);
-        }}
-      />
-    );
-  },
-};

package/src/blocks/ai-chat/ai-chat.test.tsx

@@ -1,166 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { expectNoA11yViolations } from "../../../test/a11y";
-import { AiChatBlock, type ChatMessage } from "./ai-chat";
-
-const MESSAGES: ChatMessage[] = [
-  { id: "1", from: "user", content: "How do I make an overflowing table keyboard-scrollable?" },
-  {
-    id: "2",
-    from: "assistant",
-    content: 'Give the scrolling wrapper tabindex="0", a role and an accessible name.',
-    reasoning: "The container is not focusable by default, so its overflow is unreachable.",
-    tools: [
-      {
-        id: "t1",
-        name: "search_docs",
-        status: "success",
-        arguments: '{ "query": "scrollable region" }',
-        result: '{ "hits": 3 }',
-      },
-    ],
-    sources: [{ index: 1, title: "ARIA Authoring Practices", origin: "w3.org", href: "#1" }],
-    tokens: 148,
-  },
-];
-
-describe("AiChatBlock", () => {
-  it("shows an empty state before anything is said", () => {
-    render(<AiChatBlock messages={[]} />);
-    expect(screen.getByText("Start a conversation")).toBeInTheDocument();
-  });
-
-  it("renders the transcript as a list, never a live region", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} />);
-
-    const list = container.querySelector("[data-slot='conversation-messages']");
-    expect(list?.tagName).toBe("OL");
-    // The decision the whole AI layer rests on: announcing streamed text token
-    // by token is unusable with a screen reader.
-    expect(list).not.toHaveAttribute("aria-live");
-  });
-
-  it("names the speaker of every turn in text", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.getByText("You said:")).toBeInTheDocument();
-    expect(screen.getByText("Assistant said:")).toBeInTheDocument();
-  });
-
-  it("announces state, not content", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} busy />);
-
-    const status = container.querySelector("[data-slot='conversation-status']");
-    expect(status).toHaveAttribute("aria-live", "polite");
-    expect(status).toHaveTextContent("Generating response");
-    expect(status).not.toHaveTextContent("tabindex");
-  });
-
-  it("distinguishes waiting from generating", () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} waiting />);
-    expect(container.querySelector("[data-slot='conversation-status']")).toHaveTextContent(
-      "Waiting for a response",
-    );
-    expect(screen.getByText("Thinking")).toBeInTheDocument();
-  });
-
-  it("collapses reasoning and tool calls by default", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-    expect(screen.getByRole("button", { name: /search_docs/ })).toHaveAttribute(
-      "aria-expanded",
-      "false",
-    );
-  });
-
-  it("names tool payloads per tool, so two open tools do not collide", async () => {
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    await user.click(screen.getByRole("button", { name: /search_docs/ }));
-    expect(
-      await screen.findByRole("region", { name: "search_docs arguments" }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole("region", { name: "search_docs result" })).toBeInTheDocument();
-  });
-
-  it("lists sources behind a disclosure", async () => {
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} />);
-
-    await user.click(screen.getByRole("button", { name: "1 source" }));
-    expect(await screen.findByText("ARIA Authoring Practices")).toBeInTheDocument();
-  });
-
-  it("shows the token count for a finished response", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.getByText("148 tokens")).toBeInTheDocument();
-  });
-
-  it("sends a message and clears the composer", async () => {
-    const onSend = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} onSend={onSend} />);
-
-    const composer = screen.getByRole("textbox", { name: "Message" });
-    await user.type(composer, "Thanks{Enter}");
-
-    expect(onSend).toHaveBeenCalledWith("Thanks");
-    await waitFor(() => {
-      expect(composer).toHaveValue("");
-    });
-  });
-
-  it("does not send an empty message", async () => {
-    const onSend = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} onSend={onSend} />);
-
-    await user.type(screen.getByRole("textbox", { name: "Message" }), "   {Enter}");
-    expect(onSend).not.toHaveBeenCalled();
-  });
-
-  it("offers Stop while a response is in flight", async () => {
-    const onStop = vi.fn();
-    const user = userEvent.setup();
-    render(<AiChatBlock messages={MESSAGES} busy onStop={onStop} />);
-
-    await user.click(screen.getByRole("button", { name: "Stop generating" }));
-    expect(onStop).toHaveBeenCalledTimes(1);
-  });
-
-  it("offers a model picker when models are given", async () => {
-    const onModelChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <AiChatBlock
-        messages={MESSAGES}
-        model="fast"
-        onModelChange={onModelChange}
-        models={[
-          { id: "fast", name: "Fast" },
-          { id: "deep", name: "Deep" },
-        ]}
-      />,
-    );
-
-    await user.click(screen.getByRole("combobox", { name: "Model" }));
-    await user.click(await screen.findByRole("option", { name: "Deep" }));
-    expect(onModelChange).toHaveBeenCalledWith("deep");
-  });
-
-  it("hides the model picker when there are no models", () => {
-    render(<AiChatBlock messages={MESSAGES} />);
-    expect(screen.queryByRole("combobox", { name: "Model" })).not.toBeInTheDocument();
-  });
-
-  it("has no accessibility violations", async () => {
-    const { container } = render(<AiChatBlock messages={MESSAGES} />);
-    await expectNoA11yViolations(container);
-  });
-});