@tangle-network/ui 11.51.6 → 11.51.8

package/src/markdown/markdown-table.test.tsx

@@ -1,76 +0,0 @@
-import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Markdown } from "./markdown";
-import { columnKinds, numericColumns, tableCsv } from "./markdown-table";
-
-const TABLE = [
-  "| Variant | Impressions | CTR % | Spend $ | Note |",
-  "| --- | --- | --- | --- | --- |",
-  "| Hero A | 12,400 | 2.50% | $182.40 | Wins on \"reach\", barely |",
-  "| Hero B | 9,870 | 4.17% | $160.05 | =SUM(A1) |",
-].join("\n");
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-describe("Markdown tables", () => {
-  it("renders a header row and right-aligns figures in tabular numerals", () => {
-    render(<Markdown>{TABLE}</Markdown>);
-    const table = screen.getByRole("table");
-    const headers = within(table).getAllByRole("columnheader");
-    expect(headers.map((header) => header.textContent)).toEqual(["Variant", "Impressions", "CTR %", "Spend $", "Note"]);
-    expect(headers[0].className).toContain("text-left");
-    expect(headers[1].className).toContain("text-right");
-    // Inside `.tangle-prose`, a vendored header rule cannot left-align a figure column.
-    expect(headers[1].className).toContain("[.tangle-prose_&]:text-right!");
-    const cells = within(table).getAllByRole("cell");
-    expect(cells[1].className).toContain("text-right");
-    expect(cells[1].className).toContain("tabular-nums");
-    expect(cells[0].className).not.toContain("text-right");
-    expect(cells[0].className).toContain("whitespace-nowrap");
-    expect(cells[4].className).not.toContain("tabular-nums");
-  });
-
-  it("scrolls inside a named, focusable region and never uses a tiny font", () => {
-    render(<Markdown>{TABLE}</Markdown>);
-    const region = screen.getByRole("region", { name: "Table" });
-    expect(region.className).toContain("overflow-x-auto");
-    expect(region.getAttribute("tabindex")).toBe("0");
-    expect(region.closest(".not-prose")).not.toBeNull();
-    expect(screen.getByRole("table").className).toContain("text-sm");
-    // Brand's raw-table prose rules skip the card, so the table never becomes its own scroller.
-    expect(screen.getByRole("table").hasAttribute("data-markdown-table")).toBe(true);
-    expect(document.body.innerHTML).not.toContain("text-xs");
-  });
-
-  it("contains its screen-reader status line, so a table deep in a scrolling panel cannot stretch the page", () => {
-    render(<Markdown>{TABLE}</Markdown>);
-    const status = screen.getByRole("status");
-    expect(status.className).toContain("sr-only");
-    // The status is absolutely positioned; the card it sits in must be its containing block.
-    const card = status.closest(".not-prose") as HTMLElement;
-    expect(card.className.split(" ")).toEqual(expect.arrayContaining(["relative", "overflow-hidden"]));
-  });
-
-  it("copies the table as CSV with quoting and formula-safe cells", async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined);
-    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
-    render(<Markdown>{TABLE}</Markdown>);
-    fireEvent.click(screen.getByRole("button", { name: "Copy CSV" }));
-    await waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
-    expect(writeText.mock.calls[0][0]).toBe([
-      "Variant,Impressions,CTR %,Spend $,Note",
-      "Hero A,\"12,400\",2.50%,$182.40,\"Wins on \"\"reach\"\", barely\"",
-      "Hero B,\"9,870\",4.17%,$160.05,'=SUM(A1)",
-    ].join("\n"));
-    expect(await screen.findByText("Table copied as CSV")).toBeInTheDocument();
-  });
-
-  it("treats a column as numeric only when every filled cell is a figure", () => {
-    expect(numericColumns([["a", "1", "", "$2.50"], ["b", "x", "3", "-4%"]])).toEqual([false, false, true, true]);
-    expect(columnKinds([["Hero A", "1", "A long note that wraps across more than one line"]])).toEqual(["short", "figure", "long"]);
-    expect(tableCsv([["a,b", " c"]])).toBe('"a,b"," c"');
-  });
-});

package/src/markdown/markdown.test.tsx

@@ -1,166 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { getSanitizedMarkdownHeadingIdFromRawFragment, Markdown } from "./markdown";
-
-describe("Markdown", () => {
-  it("uses the tokenized Tangle prose class instead of host typography defaults", () => {
-    const { container } = render(<Markdown>{"# Heading\n\nBody with `code`."}</Markdown>);
-    const surface = container.firstElementChild;
-
-    expect(surface).toHaveClass("tangle-prose");
-    expect(surface).not.toHaveClass("prose");
-    expect(surface).not.toHaveClass("dark:prose-invert");
-  });
-
-  it("adds GitHub-style Unicode and duplicate heading IDs before sanitizing them", () => {
-    const { container } = render(
-      <Markdown>{"# Duplicate\n\n## Crème brûlée\n\n# Duplicate\n\n# user-content-heading"}</Markdown>,
-    );
-
-    expect(container.querySelectorAll("h1, h2")).toHaveLength(4);
-    expect(container.querySelector("h2")).toHaveAttribute("id", "user-content-crème-brûlée");
-    expect(container.querySelectorAll("h1")[0]).toHaveAttribute("id", "user-content-duplicate");
-    expect(container.querySelectorAll("h1")[1]).toHaveAttribute("id", "user-content-duplicate-1");
-    expect(container.querySelectorAll("h1")[2]).toHaveAttribute(
-      "id",
-      "user-content-user-content-heading",
-    );
-  });
-
-  it("maps raw fragments exactly once to the sanitized target prefix", () => {
-    expect(getSanitizedMarkdownHeadingIdFromRawFragment("Cr%C3%A8me%20br%C3%BBl%C3%A9e"))
-      .toBe("user-content-crème-brûlée");
-    expect(getSanitizedMarkdownHeadingIdFromRawFragment("user-content-heading"))
-      .toBe("user-content-user-content-heading");
-  });
-
-  it("maps same-document fragments to sanitized heading IDs", () => {
-    render(<Markdown>{"[Jump](#Cr%C3%A8me%20br%C3%BBl%C3%A9e)\n\n# Crème brûlée"}</Markdown>);
-
-    expect(screen.getByRole("link", { name: "Jump" })).toHaveAttribute(
-      "href",
-      "#user-content-crème-brûlée",
-    );
-  });
-
-  it("keeps custom URL transforms behind ReactMarkdown protocol checks", () => {
-    const urlTransform = vi.fn((url: string) => url);
-
-    render(
-      <Markdown urlTransform={urlTransform}>
-        {"[External](https://example.com/docs#install)\n\n![Safe](https://example.com/image.png)\n\n![Unsafe](javascript:alert(1))"}
-      </Markdown>,
-    );
-
-    expect(screen.getByRole("link", { name: "External" })).toHaveAttribute(
-      "href",
-      "https://example.com/docs#install",
-    );
-    expect(screen.getByRole("img", { name: "Safe" })).toHaveAttribute(
-      "src",
-      "https://example.com/image.png",
-    );
-    expect(screen.getByRole("img", { name: "Image unavailable: Unsafe" })).not.toHaveAttribute("src");
-    expect(urlTransform).toHaveBeenCalledWith(
-      "https://example.com/image.png",
-      "src",
-      expect.objectContaining({ tagName: "img" }),
-    );
-  });
-
-  it("keeps inline code on semantic tokens", () => {
-    const { container } = render(<Markdown>{"Use `token` values."}</Markdown>);
-    const inlineCode = container.querySelector("code");
-
-    expect(inlineCode).toHaveClass("border-border");
-    expect(inlineCode).toHaveClass("bg-muted");
-    expect(inlineCode).toHaveClass("text-foreground");
-  });
-
-  it("passes parsed URLs through the typed transform hook", () => {
-    const urlTransform = vi.fn((url: string, key: string) => (
-      key === "href" && url === "system/brief.md"
-        ? "/app/ws-1/vault?file=system%2Fbrief.md"
-        : url
-    ));
-
-    render(
-      <Markdown urlTransform={urlTransform}>
-        {'[Brief](system/brief.md)'}
-      </Markdown>,
-    );
-
-    expect(screen.getByRole("link", { name: "Brief" })).toHaveAttribute(
-      "href",
-      "/app/ws-1/vault?file=system%2Fbrief.md",
-    );
-    expect(urlTransform).toHaveBeenCalledWith(
-      "system/brief.md",
-      "href",
-      expect.objectContaining({ tagName: "a" }),
-    );
-  });
-
-  it("links an image to its full-size source unless a Markdown link already wraps it", () => {
-    render(
-      <Markdown>
-        {"![Ad](https://example.com/ad.png)\n\n[![Badge](https://example.com/badge.svg)](https://example.com/docs)"}
-      </Markdown>,
-    );
-
-    const ad = screen.getByRole("img", { name: "Ad" });
-    expect(ad).toHaveAttribute("src", "https://example.com/ad.png");
-    expect(ad.closest("a")).toHaveAttribute("href", "https://example.com/ad.png");
-    expect(ad.closest("a")).toHaveAttribute("target", "_blank");
-    expect(ad.closest("a")).toHaveAttribute("rel", "noopener noreferrer");
-
-    render(<Markdown>{"![](https://example.com/decorative.png)"}</Markdown>);
-    expect(screen.getByRole("link", { name: "Open image full size" })).toHaveAttribute(
-      "href",
-      "https://example.com/decorative.png",
-    );
-
-    const badge = screen.getByRole("img", { name: "Badge" });
-    expect(badge.closest("a")).toHaveAttribute("href", "https://example.com/docs");
-    expect(badge.closest("a")?.parentElement?.closest("a")).toBeNull();
-  });
-
-  it("replaces an image that fails to load with a labelled placeholder", () => {
-    render(<Markdown>{"![Final ad](campaigns/missing.png)"}</Markdown>);
-
-    fireEvent.error(screen.getByRole("img", { name: "Final ad" }));
-
-    expect(screen.queryByRole("img", { name: "Final ad" })).toBeNull();
-    expect(screen.getByRole("img", { name: "Image unavailable: Final ad" })).toHaveTextContent(
-      "Image unavailable: Final ad",
-    );
-    expect(screen.queryByRole("link")).toBeNull();
-  });
-
-  it("renders a fenced block's file name and highlights it as that file's language", () => {
-    render(<Markdown>{'```ts title="src/lib/ctr.ts"\nexport const x = 1;\n```'}</Markdown>);
-    expect(screen.getByText("src/lib/ctr.ts")).toBeInTheDocument();
-    expect(screen.getByText("TypeScript")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Copy to clipboard" })).toBeInTheDocument();
-  });
-
-  it("renders a single-line fence without a language as a block, not inline code", () => {
-    const { container } = render(<Markdown>{"```\nnpm run build\n```\n\nRun `npm test` too."}</Markdown>);
-    expect(container.querySelectorAll("pre")).toHaveLength(1);
-    expect(container.querySelector("pre")?.textContent).toBe("npm run build");
-    expect(container.querySelector("p code")?.textContent).toBe("npm test");
-  });
-
-  it("renders links the host classifies as chips that keep their href", () => {
-    render(
-      <Markdown linkChip={(href) => href.startsWith("/vault/") ? { kind: "file", label: "REVIEW.md", title: "campaigns/REVIEW.md" } : null}>
-        {"See [the review](/vault/REVIEW.md) and [docs](https://example.com)."}
-      </Markdown>,
-    );
-    const chip = screen.getByRole("link", { name: "REVIEW.md" });
-    expect(chip.getAttribute("href")).toBe("/vault/REVIEW.md");
-    expect(chip.getAttribute("data-link-chip")).toBe("file");
-    expect(chip.getAttribute("title")).toBe("campaigns/REVIEW.md");
-    expect(screen.getByRole("link", { name: "docs" }).hasAttribute("data-link-chip")).toBe(false);
-  });
-});

package/src/openui/schema.test.tsx

@@ -1,158 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { getSanitizedMarkdownHeadingIdFromRawFragment } from "../markdown/markdown";
-import { OpenUIArtifactRenderer } from "./openui-artifact-renderer";
-import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./schema";
-
-const validPage = {
-  type: "card",
-  title: "Release proof",
-  badge: { type: "badge", label: "Ready", tone: "success" },
-  children: [
-    { type: "heading", text: "Result", level: 2 },
-    { type: "text", text: "Three checks passed." },
-    { type: "stack", children: [
-      { type: "stat", label: "Checks", value: "3" },
-      { type: "key_value", items: [{ label: "Allowed", value: true }, { label: "Missing", value: null }] },
-      { type: "code", code: "ok", language: "text" },
-      { type: "markdown", content: "**Done**" },
-      { type: "table", columns: [{ key: "name", header: "Name" }], rows: [{ name: "one" }] },
-      { type: "actions", actions: [{ id: "open", label: "Open" }] },
-      { type: "separator" },
-      { type: "grid", children: [{ type: "badge", label: "Nested" }] },
-    ] },
-  ],
-};
-
-type JsonSchema = Record<string, unknown>;
-
-/**
- * Model tool-schema converters accept a recursive `$ref` only when the loop can
- * terminate: it must pass through an optional property or an array that may be
- * empty. Return the first `$defs` path that recurses through required,
- * nonempty values only.
- */
-function findRequiredRefLoop(defs: Record<string, JsonSchema>): string | null {
-  function visit(schema: JsonSchema, path: string, stack: string[]): string | null {
-    const ref = typeof schema.$ref === "string" ? schema.$ref.replace("#/$defs/", "") : null;
-    if (ref) {
-      if (stack.includes(ref)) return path;
-      return visit(defs[ref]!, `$defs.${ref}`, [...stack, ref]);
-    }
-    for (const key of ["oneOf", "anyOf"] as const) {
-      const options = schema[key];
-      if (Array.isArray(options)) {
-        for (const [index, option] of options.entries()) {
-          const loop = visit(option as JsonSchema, `${path}.${key}.${index}`, stack);
-          if (loop) return loop;
-        }
-      }
-    }
-    if (schema.type === "array" && schema.items && Number(schema.minItems ?? 0) > 0) {
-      return visit(schema.items as JsonSchema, `${path}.items`, stack);
-    }
-    const required = Array.isArray(schema.required) ? schema.required as string[] : [];
-    const properties = (schema.properties ?? {}) as Record<string, JsonSchema>;
-    for (const name of required) {
-      if (!properties[name]) continue;
-      const loop = visit(properties[name], `${path}.properties.${name}`, stack);
-      if (loop) return loop;
-    }
-    return null;
-  }
-  return visit({ $ref: "#/$defs/node" }, "$", []);
-}
-
-describe("OpenUI JSON contract", () => {
-  it("advertises every renderer node and accepts nested JSON with primitive cells", () => {
-    expect(OPENUI_NODE_TYPES).toHaveLength(13);
-    expect(OPENUI_NODE_JSON_SCHEMA.$defs.node.oneOf).toHaveLength(13);
-    expect(validateOpenUIJsonNode(validPage)).toMatchObject({ ok: true, value: validPage });
-    expect(validateOpenUIJsonArtifact([validPage, { type: "text", text: "Afterword" }])).toMatchObject({ ok: true });
-  });
-
-  it("keeps every recursive node path terminable for model tool-schema converters", () => {
-    expect(findRequiredRefLoop(OPENUI_NODE_JSON_SCHEMA.$defs as unknown as Record<string, JsonSchema>)).toBeNull();
-    expect(validateOpenUIJsonNode({ type: "card", title: "Empty", children: [] }))
-      .toMatchObject({ ok: false, issue: { path: "$.children" } });
-  });
-
-  it("rejects an unsupported top-level or nested section before it can be dropped", () => {
-    expect(validateOpenUIJsonNode({ type: "section", children: [{ type: "text", text: "hidden" }] }))
-      .toMatchObject({ ok: false, issue: { path: "$", message: expect.stringContaining("section") } });
-    const nested = { type: "card", children: [{ type: "section", children: [{ type: "text", text: "hidden" }] }] };
-    expect(validateOpenUIJsonNode(nested))
-      .toMatchObject({ ok: false, issue: { path: "$.children[0]", message: expect.stringContaining("section") } });
-    expect(validateOpenUIJsonArtifact([{ type: "text", text: "visible" }, nested]))
-      .toMatchObject({ ok: false, issue: { path: "$[1].children[0]" } });
-    expect(validateOpenUIJsonArtifact(Array.from({ length: 1001 }, () => ({ type: "text", text: "too many" }))))
-      .toMatchObject({ ok: false, issue: { path: "$[1000]" } });
-  });
-
-  it("rejects fields the renderer would ignore and table cells with no column", () => {
-    expect(validateOpenUIJsonNode({ type: "text", text: "hello", body: "hidden" }).ok).toBe(false);
-    expect(validateOpenUIJsonNode({ type: "stack", children: [] }).ok).toBe(false);
-    expect(validateOpenUIJsonNode({ type: "key_value", items: [{ label: "Broken", value: { nested: true } }] }).ok).toBe(false);
-    expect(validateOpenUIJsonNode({ type: "table", columns: [{ key: "shown", header: "Shown" }], rows: [{ hidden: "lost" }] }))
-      .toMatchObject({ ok: false, issue: { path: "$.rows[0].hidden" } });
-  });
-
-  it("rejects arrays passed as a single node while keeping optional card fields", () => {
-    expect(validateOpenUIJsonNode([{ type: "text", text: "ok" }]))
-      .toMatchObject({ ok: false, issue: { path: "$" } });
-    expect(validateOpenUIJsonNode({ type: "card" }).ok).toBe(true);
-    expect(validateOpenUIJsonNode({ type: "card", title: "A result" }).ok).toBe(true);
-  });
-
-  it("renders an absent prototype-named table cell safely", () => {
-    const table = JSON.parse('{"type":"table","columns":[{"key":"__proto__","header":"Value"}],"rows":[{}]}');
-    expect(validateOpenUIJsonNode(table).ok).toBe(true);
-    render(<OpenUIArtifactRenderer schema={table} />);
-    expect(screen.getByText("Value")).toBeTruthy();
-  });
-
-  it("forwards URL transforms and keeps cross-file fragments aligned with sanitized headings", () => {
-    const urlTransform = vi.fn((url: string, key: string) => {
-      if (key !== "href") return url;
-      const separator = url.indexOf("#");
-      const fragment = separator >= 0
-        ? "#" + getSanitizedMarkdownHeadingIdFromRawFragment(url.slice(separator + 1))
-        : "";
-      return "/app/ws-1/vault?file=campaigns%2Fpacket.md" + fragment;
-    });
-
-    render(
-      <OpenUIArtifactRenderer
-        schema={{
-          type: "card",
-          children: [{
-            type: "markdown",
-            content: "[Packet](campaigns/packet.md#Cr%C3%A8me%20br%C3%BBl%C3%A9e)\n\n# Crème brûlée",
-          }],
-        }}
-        urlTransform={urlTransform}
-      />,
-    );
-
-    expect(screen.getByRole("link", { name: "Packet" })).toHaveAttribute(
-      "href",
-      "/app/ws-1/vault?file=campaigns%2Fpacket.md#user-content-crème-brûlée",
-    );
-    expect(screen.getByRole("heading", { name: "Crème brûlée" })).toHaveAttribute(
-      "id",
-      "user-content-crème-brûlée",
-    );
-    expect(urlTransform).toHaveBeenCalledWith(
-      "campaigns/packet.md#Cr%C3%A8me%20br%C3%BBl%C3%A9e",
-      "href",
-      expect.objectContaining({ tagName: "a" }),
-    );
-  });
-
-  it("shows an explicit error for an old unsupported artifact", () => {
-    const oldArtifact = { type: "card", children: [{ type: "section", children: [{ type: "text", text: "hidden" }] }] };
-    render(<OpenUIArtifactRenderer schema={oldArtifact as never} />);
-    expect(screen.getByRole("alert").textContent).toContain("$.children[0]");
-    expect(screen.getByRole("alert").textContent).toContain("section");
-  });
-});

package/src/primitives/button.test.tsx

@@ -1,230 +0,0 @@
-import * as React from "react";
-import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { hydrateRoot, type Root } from "react-dom/client";
-import { renderToString } from "react-dom/server";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Button } from "./button";
-
-afterEach(cleanup);
-
-describe.each(["disabled", "loading"] as const)("%s controls", (state) => {
-  it.each([false, true])("natively disables button elements (asChild=%s)", async (asChild) => {
-    const user = userEvent.setup();
-    const click = vi.fn();
-    const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
-    render(<form onSubmit={submit}>
-      <Button {...{ [state]: true }} asChild={asChild} onClick={click}>
-        {asChild ? <button disabled={false} aria-busy={false}>Save</button> : "Save"}
-      </Button>
-      <input aria-label="Next field" />
-    </form>);
-    const button = screen.getByRole("button", { name: "Save" });
-    expect(button).toBeDisabled();
-    expect(button).toHaveAccessibleName("Save");
-    if (state === "loading") expect(button).toHaveAttribute("aria-busy", "true");
-    await user.click(button);
-    button.click();
-    button.focus();
-    expect(button).not.toHaveFocus();
-    await user.keyboard("{Enter} ");
-    expect(click).not.toHaveBeenCalled();
-    expect(submit).not.toHaveBeenCalled();
-    await user.tab();
-    expect(screen.getByRole("textbox")).toHaveFocus();
-  });
-
-  it("blocks slotted anchor activation before child AND slot capture/bubble handlers", async () => {
-    const user = userEvent.setup();
-    const activation = vi.fn();
-    const handlers = {
-      onClick: activation, onClickCapture: activation,
-      onAuxClick: activation, onAuxClickCapture: activation,
-      onDoubleClick: activation, onDoubleClickCapture: activation,
-      onPointerDown: activation, onPointerDownCapture: activation,
-      onPointerUp: activation, onPointerUpCapture: activation,
-      onMouseDown: activation, onMouseDownCapture: activation,
-      onMouseUp: activation, onMouseUpCapture: activation,
-      onKeyDown: activation, onKeyDownCapture: activation,
-      onKeyUp: activation, onKeyUpCapture: activation,
-    };
-    render(<div onClick={activation}>
-      <Button asChild {...{ [state]: true }} aria-busy={false} {...handlers}>
-        <a href="#destination" tabIndex={0} aria-disabled={false} aria-busy={false} {...handlers}>
-          <span>Open account</span>
-        </a>
-      </Button>
-      <button>Next action</button>
-    </div>);
-    const link = screen.getByRole("link", { name: "Open account" });
-    expect(link).toHaveAttribute("aria-disabled", "true");
-    expect(link).toHaveAttribute("tabindex", "-1");
-    expect(link).not.toHaveAttribute("disabled");
-    expect(link).not.toHaveAttribute("href");
-    if (state === "loading") expect(link).toHaveAttribute("aria-busy", "true");
-    const target = screen.getByText("Open account");
-    expect(fireEvent.click(target)).toBe(false);
-    expect(fireEvent.doubleClick(target)).toBe(false);
-    expect(fireEvent(target, new MouseEvent("auxclick", { bubbles: true, cancelable: true, button: 1 }))).toBe(false);
-    expect(fireEvent.pointerDown(target)).toBe(false);
-    expect(fireEvent.pointerUp(target)).toBe(false);
-    expect(fireEvent.mouseDown(target)).toBe(false);
-    expect(fireEvent.mouseUp(target)).toBe(false);
-    for (const key of ["Enter", " "]) {
-      expect(fireEvent.keyDown(link, { key })).toBe(false);
-      expect(fireEvent.keyUp(link, { key })).toBe(false);
-    }
-    await user.click(target);
-    link.click();
-    // Even programmatically focused, a disabled link cannot activate by keyboard.
-    link.focus();
-    await user.keyboard("{Enter} ");
-    expect(activation).not.toHaveBeenCalled();
-    link.blur();
-    await user.tab();
-    expect(screen.getByRole("button", { name: "Next action" })).toHaveFocus();
-  });
-});
-
-it("retains the action name and hides the reduced-motion spinner from accessibility", () => {
-  const { rerender } = render(<Button loading aria-busy={false}>Save changes</Button>);
-  const button = screen.getByRole("button", { name: "Save changes" });
-  expect(button).toHaveAttribute("aria-busy", "true");
-  const spinner = button.querySelector("svg");
-  expect(spinner).toHaveAttribute("aria-hidden", "true");
-  expect(spinner).toHaveAttribute("focusable", "false");
-  expect(spinner).toHaveClass("motion-reduce:animate-none");
-  expect(button).toHaveClass("motion-reduce:transition-none", "motion-reduce:active:scale-100");
-  expect(button.querySelector("title")).toBeNull();
-  rerender(<Button loading size="icon" aria-label="Refresh reports"><span aria-hidden="true">↻</span></Button>);
-  expect(screen.getByRole("button")).toHaveAccessibleName("Refresh reports");
-});
-
-it.each(["disabled", "loading"] as const)("restores link attributes and original Slot handler order when %s ends", async (state) => {
-  const user = userEvent.setup();
-  const calls: string[] = [];
-  const ui = (unavailable: boolean) => <Button asChild {...{ [state]: unavailable }} onClick={() => calls.push("slot")}>
-    <a href="#destination" tabIndex={2} onClick={(event) => { event.preventDefault(); calls.push("child"); }}>Open</a>
-  </Button>;
-  const { rerender } = render(ui(true));
-  const link = screen.getByRole("link");
-  rerender(ui(false));
-  expect(link).toHaveAttribute("href", "#destination");
-  expect(link).toHaveAttribute("tabindex", "2");
-  expect(link).not.toHaveAttribute("aria-disabled");
-  expect(link).not.toHaveAttribute("aria-busy");
-  expect(link).not.toHaveAttribute("role");
-  await user.click(link);
-  expect(calls).toEqual(["child", "slot"]);
-  calls.length = 0;
-  link.focus();
-  await user.keyboard("{Enter}");
-  expect(calls).toEqual(["child", "slot"]);
-});
-
-it("preserves non-activation keyboard handlers on disabled links", () => {
-  const calls: string[] = [];
-  render(<Button asChild disabled onKeyDownCapture={() => calls.push("slot capture")} onKeyDown={() => calls.push("slot bubble")}>
-    <a href="#destination" onKeyDownCapture={() => calls.push("child capture")} onKeyDown={() => calls.push("child bubble")}>Open</a>
-  </Button>);
-  expect(fireEvent.keyDown(screen.getByRole("link"), { key: "ArrowRight" })).toBe(true);
-  expect(calls).toEqual(["child capture", "slot capture", "child bubble", "slot bubble"]);
-});
-
-it("respects a native child's own disabled state", () => {
-  render(<Button asChild disabled={false}><button disabled>Save</button></Button>);
-  expect(screen.getByRole("button")).toBeDisabled();
-});
-
-it("composes refs on a slotted native button", () => {
-  const outerRef = React.createRef<HTMLButtonElement>();
-  const childRef = React.createRef<HTMLButtonElement>();
-  const { unmount } = render(<Button asChild ref={outerRef}><button ref={childRef}>Save</button></Button>);
-  expect(outerRef.current).toBe(screen.getByRole("button"));
-  expect(childRef.current).toBe(outerRef.current);
-  unmount();
-  expect(outerRef.current).toBeNull();
-  expect(childRef.current).toBeNull();
-});
-
-it("preserves caller busy state when Button is not loading", () => {
-  render(<><Button aria-busy>Save</Button><Button asChild aria-busy><a href="#destination">Open</a></Button></>);
-  expect(screen.getByRole("button")).toHaveAttribute("aria-busy", "true");
-  expect(screen.getByRole("link")).toHaveAttribute("aria-busy", "true");
-});
-
-it("preserves implicit submission, explicit types, and enabled keyboard activation", async () => {
-  const user = userEvent.setup();
-  const submit = vi.fn((event: React.FormEvent) => event.preventDefault());
-  render(<form onSubmit={submit}>
-    <Button>Implicit submit</Button>
-    <Button asChild><button>Slotted submit</button></Button>
-    <Button type="button">Explicit button</Button>
-    <Button type="submit">Explicit submit</Button>
-    <Button asChild type="submit"><button type="button">Child button</button></Button>
-  </form>);
-  const implicit = screen.getByRole("button", { name: "Implicit submit" });
-  expect(implicit).not.toHaveAttribute("type");
-  await user.click(implicit);
-  await user.click(screen.getByRole("button", { name: "Slotted submit" }));
-  await user.click(screen.getByRole("button", { name: "Explicit submit" }));
-  expect(submit).toHaveBeenCalledTimes(3);
-  await user.click(screen.getByRole("button", { name: "Explicit button" }));
-  await user.click(screen.getByRole("button", { name: "Child button" }));
-  expect(submit).toHaveBeenCalledTimes(3);
-  implicit.focus();
-  await user.keyboard("{Enter} ");
-  expect(submit).toHaveBeenCalledTimes(5);
-});
-
-it("forwards native refs and composes both refs on a slotted anchor", () => {
-  const nativeRef = React.createRef<HTMLButtonElement>();
-  const anchorRef = React.createRef<HTMLAnchorElement>();
-  const slotRef = vi.fn();
-  const { rerender, unmount } = render(<>
-    <Button ref={nativeRef}>Save</Button>
-    <Button asChild loading ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
-  </>);
-  const link = screen.getByRole("link");
-  expect(nativeRef.current).toBe(screen.getByRole("button"));
-  expect(anchorRef.current).toBe(link);
-  expect(slotRef).toHaveBeenLastCalledWith(link);
-  rerender(<>
-    <Button ref={nativeRef}>Save</Button>
-    <Button asChild ref={slotRef}><a ref={anchorRef} href="#destination">Open</a></Button>
-  </>);
-  expect(anchorRef.current).toBe(link);
-  expect(slotRef).toHaveBeenLastCalledWith(link);
-  unmount();
-  expect(nativeRef.current).toBeNull();
-  expect(anchorRef.current).toBeNull();
-  expect(slotRef).toHaveBeenLastCalledWith(null);
-});
-
-it("hydrates disabled/loading native and slotted controls without changing their names", async () => {
-  const ui = <>
-    <Button loading>Save</Button>
-    <Button asChild loading><button>Submit</button></Button>
-    <Button asChild disabled><a href="#destination">Open</a></Button>
-  </>;
-  const container = document.createElement("div");
-  container.innerHTML = renderToString(ui);
-  document.body.appendChild(container);
-  const html = container.innerHTML;
-  const recoverableError = vi.fn();
-  const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-  let root: Root | undefined;
-  try {
-    await act(async () => { root = hydrateRoot(container, ui, { onRecoverableError: recoverableError }); });
-    expect(container.innerHTML).toBe(html);
-    expect(within(container).getByRole("button", { name: "Save" })).toBeDisabled();
-    expect(within(container).getByRole("button", { name: "Submit" })).toBeDisabled();
-    expect(within(container).getByRole("link", { name: "Open" })).not.toHaveAttribute("href");
-    expect(recoverableError).not.toHaveBeenCalled();
-    expect(consoleError).not.toHaveBeenCalled();
-  } finally {
-    await act(async () => { root?.unmount(); });
-    consoleError.mockRestore();
-    container.remove();
-  }
-});