chore: bump @cloudflare/kumo to 2.3 (#1177)

* chore: bump @cloudflare/kumo to 2.3

Migrates two internal call sites to the Kumo 2 API:

- accordion block: Collapsible refactored to a compound component.
  Use Collapsible.Root / .DefaultTrigger / .DefaultPanel instead of
  <Collapsible label=...>.
- chart block: ChartPalette.color renamed to ChartPalette.categorical.

Admin tests that asserted on Button's native title attribute now read
aria-label instead, because Kumo 2 wraps <Button title> in a Tooltip
popup rather than setting the DOM title attribute. Updated the
@cloudflare/kumo mock in the blocks renderer tests to match the new
Collapsible compound shape.

No public API changes; consumers see identical behaviour.

* test(e2e): update title selectors for Kumo 2 Button tooltip

Kumo 2.x wraps <Button title> in a Tooltip popup rather than setting a
DOM title attribute. Switch redirect and revision history e2e selectors
from button[title=...] to button[aria-label=...] / [aria-label^=...].
The components already exposed accurate aria-labels (and in the
redirects case, more specific per-row labels via the source path).

Author: ascorbic

.changeset/bump-kumo-to-2.x.md

@@ -0,0 +1,7 @@
+---
+"@emdash-cms/admin": patch
+"@emdash-cms/blocks": patch
+"@emdash-cms/auth-atproto": patch
+---
+
+Bumps `@cloudflare/kumo` from 1.16 to 2.3. Two internal call sites picked up breaking API changes from Kumo 2.0: `Collapsible` is now a compound component (`Collapsible.Root` / `.DefaultTrigger` / `.DefaultPanel` instead of `<Collapsible label=...>`), used by the accordion block; and `ChartPalette.color()` was renamed to `ChartPalette.categorical()` in the chart block. No public API changes -- consumers see identical behaviour. Tests in `@emdash-cms/admin` that asserted on `Button`'s native `title` attribute now read `aria-label` instead, because Kumo 2 wraps `<Button title>` in a Tooltip popup rather than setting the DOM attribute.

e2e/tests/redirects.spec.ts

@@ -73,8 +73,10 @@ test.describe("Redirects", () => {
 			// Wait for the redirect to appear
 			await expect(page.locator("text=/edit-source").first()).toBeVisible();
 
-			// Click the edit button on that row (use .first() to avoid ancestor div ambiguity)
-			await page.locator('button[title="Edit redirect"]').first().click();
+			// Click the edit button on that row (use .first() to avoid ancestor div ambiguity).
+			// Kumo 2.x renders <Button title> as a Tooltip popup rather than a DOM
+			// title attribute; aria-label is on the button itself.
+			await page.locator('button[aria-label^="Edit redirect"]').first().click();
 
 			// Edit dialog should open
 			await expect(page.locator('[role="dialog"]')).toBeVisible();
@@ -110,8 +112,9 @@ test.describe("Redirects", () => {
 			// Wait for it to appear
 			await expect(page.locator("text=/to-delete").first()).toBeVisible();
 
-			// Click the delete button on that row (use .first() to avoid ancestor div ambiguity)
-			await page.locator('button[title="Delete redirect"]').first().click();
+			// Click the delete button on that row (use .first() to avoid ancestor div ambiguity).
+			// See note above re: Kumo 2.x Button title -> Tooltip.
+			await page.locator('button[aria-label^="Delete redirect"]').first().click();
 
 			// Confirm deletion in the ConfirmDialog
 			await expect(page.locator('[role="dialog"]')).toBeVisible();

e2e/tests/revisions.spec.ts

@@ -286,9 +286,11 @@ test.describe("Revisions", () => {
 		const revisionItems = page.locator(".rounded-md.border.p-3");
 		await expect(revisionItems.first()).toBeVisible({ timeout: 10000 });
 
-		// Find the restore button on the older revision (not the "Current" one)
-		// The restore button uses ArrowCounterClockwise icon and title="Restore this version"
-		const restoreButton = page.locator('button[title="Restore this version"]').first();
+		// Find the restore button on the older revision (not the "Current" one).
+		// The restore button uses ArrowCounterClockwise icon. Kumo 2.x renders
+		// <Button title> as a Tooltip popup rather than a DOM title attribute,
+		// so we locate by aria-label instead.
+		const restoreButton = page.locator('button[aria-label="Restore this version"]').first();
 		await expect(restoreButton).toBeVisible({ timeout: 5000 });
 
 		// Click restore -- this opens a ConfirmDialog

packages/admin/tests/components/Header.test.tsx

@@ -53,7 +53,7 @@ const { Header } = await import("../../src/components/Header");
 // Constants
 // ---------------------------------------------------------------------------
 
-const THEME_BUTTON_REGEX = /Theme:/;
+const THEME_BUTTON_REGEX = /Toggle theme/;
 
 function TestWrapper({ children }: { children: React.ReactNode }) {
 	const qc = new QueryClient({
@@ -80,8 +80,9 @@ describe("Header", () => {
 				<Header />
 			</TestWrapper>,
 		);
-		// ThemeToggle renders a button with title containing "Theme:"
-		const themeButton = screen.getByTitle(THEME_BUTTON_REGEX);
+		// ThemeToggle renders a button with aria-label "Toggle theme (current: …)"
+		// (Kumo 2.x wraps `<Button title>` as a Tooltip popup, not a DOM title.)
+		const themeButton = screen.getByLabelText(THEME_BUTTON_REGEX);
 		await expect.element(themeButton).toBeInTheDocument();
 	});
 

packages/admin/tests/components/Sections.test.tsx

@@ -162,8 +162,10 @@ describe("Sections", () => {
 			</Wrapper>,
 		);
 		await expect.element(screen.getByText("Call to Action")).toBeInTheDocument();
-		// Click delete on the user section
-		const deleteButton = screen.getByTitle("Delete");
+		// Click delete on the user section. Kumo 2.x wraps `<Button title>` as
+		// a Tooltip popup rather than a DOM `title` attribute, so we locate the
+		// button by its aria-label instead.
+		const deleteButton = screen.getByLabelText("Delete Call to Action");
 		await deleteButton.click();
 		await expect.element(screen.getByText("Delete Section?")).toBeInTheDocument();
 		await expect.element(screen.getByText(DELETE_SECTION_MSG_REGEX)).toBeInTheDocument();
@@ -186,7 +188,11 @@ describe("Sections", () => {
 			</Wrapper>,
 		);
 		await expect.element(screen.getByText("Hero Section")).toBeInTheDocument();
-		const deleteButton = screen.getByTitle("Cannot delete theme sections");
+		// Kumo 2.x's `<Button title>` is rendered as a Tooltip popup, not a DOM
+		// `title`. Locate the button by aria-label and assert the disabled state
+		// directly; the "Cannot delete theme sections" copy is now in the
+		// hover Tooltip rather than a queryable attribute.
+		const deleteButton = screen.getByLabelText("Delete Hero Section");
 		await expect.element(deleteButton).toBeDisabled();
 	});
 

packages/admin/tests/components/ThemeToggle.test.tsx

@@ -19,39 +19,42 @@ describe("ThemeToggle", () => {
 		document.documentElement.removeAttribute("data-theme");
 	});
 
+	// Kumo 2.x's <Button title="..."> wraps the button in a Tooltip popup
+	// rather than setting the native `title` attribute. The current theme is
+	// also exposed in `aria-label`, which is what these assertions read.
+
 	it("renders with system theme by default", async () => {
 		const screen = await render(<TestThemeToggle />);
 		const button = screen.getByRole("button");
 		await expect.element(button).toBeInTheDocument();
-		// System theme shows Monitor icon - check the title
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("System"));
 	});
 
 	it("cycles from system to light on click", async () => {
 		const screen = await render(<TestThemeToggle />);
 		const button = screen.getByRole("button");
 		await button.click();
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("Light"));
 	});
 
 	it("cycles through system -> light -> dark -> system", async () => {
 		const screen = await render(<TestThemeToggle />);
 		const button = screen.getByRole("button");
 
 		// Start: system
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("System"));
 
 		// Click 1: light
 		await button.click();
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("Light"));
 
 		// Click 2: dark
 		await button.click();
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Dark"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("Dark"));
 
 		// Click 3: back to system
 		await button.click();
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("System"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("System"));
 	});
 
 	it("persists theme to localStorage", async () => {
@@ -64,6 +67,6 @@ describe("ThemeToggle", () => {
 	it("starts with light theme when defaultTheme is light", async () => {
 		const screen = await render(<TestThemeToggle defaultTheme="light" />);
 		const button = screen.getByRole("button");
-		await expect.element(button).toHaveAttribute("title", expect.stringContaining("Light"));
+		await expect.element(button).toHaveAttribute("aria-label", expect.stringContaining("Light"));
 	});
 });

packages/blocks/src/blocks/accordion.tsx

@@ -14,8 +14,11 @@ export function AccordionBlockComponent({
 	const [open, setOpen] = useState(block.default_open ?? false);
 
 	return (
-		<Collapsible label={block.label} open={open} onOpenChange={setOpen}>
-			<BlockRenderer blocks={block.blocks} onAction={onAction} />
-		</Collapsible>
+		<Collapsible.Root open={open} onOpenChange={setOpen} data-testid="collapsible" data-open={open}>
+			<Collapsible.DefaultTrigger>{block.label}</Collapsible.DefaultTrigger>
+			<Collapsible.DefaultPanel>
+				<BlockRenderer blocks={block.blocks} onAction={onAction} />
+			</Collapsible.DefaultPanel>
+		</Collapsible.Root>
 	);
 }

packages/blocks/src/blocks/chart.tsx

@@ -100,7 +100,7 @@ function TimeseriesChartBlock({ block, isDarkMode }: { block: ChartBlock; isDark
 			config.series.map((s, i) => ({
 				name: escapeHtml(s.name),
 				data: s.data,
-				color: s.color ?? ChartPalette.color(i, isDarkMode),
+				color: s.color ?? ChartPalette.categorical(i, isDarkMode),
 			})),
 		[config.series, isDarkMode],
 	);

packages/blocks/tests/renderer.test.tsx

@@ -7,6 +7,13 @@ import type { Block, BlockInteraction } from "../src/types.js";
 
 // ── Mocks ────────────────────────────────────────────────────────────────────
 
+// Shared between the Collapsible.* mocks so DefaultTrigger / DefaultPanel can
+// react to open state set on Collapsible.Root.
+const CollapsibleContext = React.createContext<{
+	open?: boolean;
+	onOpenChange?: (next: boolean) => void;
+}>({});
+
 vi.mock("@cloudflare/kumo", () => ({
 	Button: ({ children, onClick, variant, type }: any) => (
 		<button onClick={onClick} data-variant={variant} type={type || "button"}>
@@ -159,13 +166,48 @@ vi.mock("@cloudflare/kumo", () => ({
 			</label>
 		),
 	},
-	Collapsible: ({ children, label, open, onOpenChange }: any) => (
-		<div data-testid="collapsible" data-open={open ? "true" : "false"}>
-			<button type="button" onClick={() => onOpenChange?.(!open)}>
-				{label}
-			</button>
-			{open && <div data-testid="collapsible-content">{children}</div>}
-		</div>
+	Collapsible: Object.assign(
+		// `Collapsible` is also `Collapsible.Root` in Kumo 2.x.
+		({ children, open, onOpenChange, ...rest }: any) => (
+			<div data-testid="collapsible" data-open={open ? "true" : "false"} {...rest}>
+				<CollapsibleContext.Provider value={{ open, onOpenChange }}>
+					{children}
+				</CollapsibleContext.Provider>
+			</div>
+		),
+		{
+			Root: ({ children, open, onOpenChange, ...rest }: any) => (
+				<div data-testid="collapsible" data-open={open ? "true" : "false"} {...rest}>
+					<CollapsibleContext.Provider value={{ open, onOpenChange }}>
+						{children}
+					</CollapsibleContext.Provider>
+				</div>
+			),
+			Trigger: ({ children }: any) => {
+				const ctx = React.useContext(CollapsibleContext);
+				return (
+					<button type="button" onClick={() => ctx.onOpenChange?.(!ctx.open)}>
+						{children}
+					</button>
+				);
+			},
+			DefaultTrigger: ({ children }: any) => {
+				const ctx = React.useContext(CollapsibleContext);
+				return (
+					<button type="button" onClick={() => ctx.onOpenChange?.(!ctx.open)}>
+						{children}
+					</button>
+				);
+			},
+			Panel: ({ children }: any) => {
+				const ctx = React.useContext(CollapsibleContext);
+				return ctx.open ? <div data-testid="collapsible-content">{children}</div> : null;
+			},
+			DefaultPanel: ({ children }: any) => {
+				const ctx = React.useContext(CollapsibleContext);
+				return ctx.open ? <div data-testid="collapsible-content">{children}</div> : null;
+			},
+		},
 	),
 	Combobox: Object.assign(
 		({ children, label }: any) => (