@btst/stack 3.1.2 → 4.1.0

package/src/plugins/blog/client/overrides.ts

@@ -41,6 +41,24 @@ export interface BlogPluginOverrides {
 	PostCard?: ComponentType<{
 		post: SerializedPost;
 	}>;
+	/**
+	 * Optional class names merged into the blog UI's structural elements,
+	 * allowing styling without replacing whole components.
+	 */
+	classNames?: {
+		/** Page container shared by blog pages. */
+		container?: string;
+		/** Each built-in post card. */
+		postCard?: string;
+		/** Title inside a post card. */
+		postTitle?: string;
+		/** Date metadata inside a post card. */
+		postMeta?: string;
+		/** Optional flex wrapper around post-card tags; omitted when unset. */
+		tagsList?: string;
+		/** Wrapper around the load-more control. */
+		pagination?: string;
+	};
 	/**
 	 * Function used to upload a new image file and return its URL.
 	 * This is separate from `imagePicker`, which selects an existing asset URL.

package/src/plugins/cms/__tests__/classnames-overrides.test.tsx

@@ -0,0 +1,200 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+// Core primitives MUST be imported from the package entry (not relative src
+// paths) so they share module identity — and React context — with the cms
+// components, which resolve `@btst/stack/*` via package self-reference.
+import { StackProvider } from "@btst/stack/context";
+import { createTestClientStack } from "../../../__tests__/client-stack-test-utils";
+import { cmsClientPlugin } from "../client";
+import { DashboardPage } from "../client/components/pages/dashboard-page.internal";
+import { ContentListPage } from "../client/components/pages/content-list-page.internal";
+import type {
+	SerializedContentItemWithType,
+	SerializedContentType,
+} from "../types";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom lacks these APIs used by Radix / cmdk
+(globalThis as any).ResizeObserver ??= class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+Element.prototype.scrollIntoView ??= () => {};
+
+const hooks = vi.hoisted(() => ({
+	useContentTypes: vi.fn(),
+	useSuspenseContentTypes: vi.fn(),
+	useContent: vi.fn(),
+	useSuspenseContent: vi.fn(),
+	useDeleteContent: vi.fn(),
+}));
+
+vi.mock("../client/hooks", () => hooks);
+
+const CLASS_NAMES = {
+	container: "bg-red-100",
+	contentTypeCard: "bg-blue-100",
+	contentTypeTitle: "text-purple-700",
+	table: "bg-yellow-50",
+	tableRow: "text-green-600",
+	pagination: "border-4 border-orange-500",
+} as const;
+
+const SIMPLE_JSON_SCHEMA = JSON.stringify({
+	type: "object",
+	properties: { title: { type: "string" } },
+	required: ["title"],
+	autoFormVersion: 2,
+});
+
+const contentType: SerializedContentType & { itemCount: number } = {
+	id: "ct1",
+	name: "Post",
+	slug: "post",
+	description: "",
+	jsonSchema: SIMPLE_JSON_SCHEMA,
+	autoFormVersion: 2,
+	itemCount: 1,
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+} as unknown as SerializedContentType & { itemCount: number };
+
+const item: SerializedContentItemWithType = {
+	id: "i1",
+	slug: "hello-world",
+	contentTypeId: "ct1",
+	data: JSON.stringify({ title: "Hello" }),
+	parsedData: { title: "Hello" },
+	contentType: { id: "ct1", name: "Post", slug: "post" },
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+	authorId: "user-1",
+} as unknown as SerializedContentItemWithType;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+
+	hooks.useSuspenseContentTypes.mockReturnValue({
+		contentTypes: [contentType],
+		refetch: vi.fn(),
+	});
+	hooks.useSuspenseContent.mockReturnValue({
+		items: [item],
+		total: 1,
+		loadMore: vi.fn(),
+		hasMore: false,
+		isLoadingMore: false,
+		refetch: vi.fn(),
+	});
+	hooks.useContent.mockReturnValue({
+		items: [],
+		total: 0,
+		isLoading: false,
+		error: null,
+		loadMore: vi.fn(),
+		hasMore: false,
+		isLoadingMore: false,
+	});
+	hooks.useDeleteContent.mockReturnValue({
+		mutateAsync: vi.fn(),
+		isPending: false,
+	});
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+	vi.clearAllMocks();
+});
+
+function createMockRouter() {
+	let params = new URLSearchParams();
+	return {
+		navigate: vi.fn(),
+		getSearchParams: () => new URLSearchParams(params.toString()),
+		setSearchParams: vi.fn((next: URLSearchParams) => {
+			params = new URLSearchParams(next.toString());
+		}),
+	};
+}
+
+async function render(ui: React.ReactElement, withOverrides = true) {
+	await act(async () => {
+		root.render(
+			<StackProvider
+				stack={createTestClientStack({ cms: cmsClientPlugin() })}
+				router={createMockRouter()}
+				overrides={withOverrides ? { cms: { classNames: CLASS_NAMES } } : {}}
+			>
+				{ui}
+			</StackProvider>,
+		);
+	});
+}
+
+function query(selector: string): HTMLElement {
+	const el = container.querySelector<HTMLElement>(selector);
+	expect(el, `expected to find ${selector}`).toBeTruthy();
+	return el!;
+}
+
+describe("cms classNames overrides (issue #36)", () => {
+	it("applies container, contentTypeCard and contentTypeTitle on the dashboard", async () => {
+		await render(<DashboardPage />);
+
+		const page = query('[data-testid="cms-dashboard-page"]');
+		expect(page.className).toContain(CLASS_NAMES.container);
+		// The override must merge with the layout's own classes, not replace them.
+		expect(page.className).toContain("mx-auto");
+
+		const card = query('[data-slot="card"]');
+		expect(card.className).toContain(CLASS_NAMES.contentTypeCard);
+		expect(card.className).toContain("cursor-pointer");
+
+		const title = query('[data-slot="card-title"]');
+		expect(title.className).toContain(CLASS_NAMES.contentTypeTitle);
+		expect(title.className).toContain("font-medium");
+		expect(title.textContent).toBe(contentType.name);
+	});
+
+	it("applies table, tableRow and pagination on the content list", async () => {
+		await render(<ContentListPage typeSlug="post" />);
+
+		const table = query('[data-testid="cms-content-table"]');
+		expect(table.className).toContain(CLASS_NAMES.table);
+		expect(table.className).toContain("rounded-lg");
+
+		const row = table.querySelector<HTMLElement>("tbody tr")!;
+		expect(row, "expected a body row").toBeTruthy();
+		expect(row.className).toContain(CLASS_NAMES.tableRow);
+		expect(row.textContent).toContain(item.slug);
+
+		const pagination = query('[data-testid="cms-content-pagination"]');
+		expect(pagination.className).toContain("border-4");
+		expect(pagination.className).toContain("border-orange-500");
+		// Non-conflicting base classes survive the merge. (`border-t` is
+		// intentionally dropped by tailwind-merge since `border-4` wins the
+		// border-width group — that is the override taking precedence.)
+		expect(pagination.className).toContain("justify-between");
+		expect(pagination.className).toContain("px-4");
+	});
+
+	it("leaves base classes untouched when no classNames override is supplied", async () => {
+		await render(<DashboardPage />, false);
+
+		const card = query('[data-slot="card"]');
+		expect(card.className).toContain("cursor-pointer");
+		expect(card.className).not.toContain(CLASS_NAMES.contentTypeCard);
+	});
+});

package/src/plugins/cms/client/components/pages/content-list-page.internal.tsx

@@ -25,6 +25,7 @@ import { cmsPermissions } from "../../../permissions";
 import { useListState, type ListStateSchema } from "@btst/stack/client/hooks";
 import { orderCMSContentTypes, type CMSPluginOverrides } from "../../overrides";
 import { CMS_PLUGIN_ID } from "../../constants";
+import { cn } from "../../../utils";
 import type { SerializedContentItemWithType } from "../../../types";
 import {
 	useContent,
@@ -52,7 +53,7 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 	const t = useTranslate();
 	const notify = useNotify();
 	const overrides = usePluginOverrides<CMSPluginOverrides>(CMS_PLUGIN_ID);
-	const { localization } = overrides;
+	const { localization, classNames } = overrides;
 	const { router, plugins, basePath: stackBasePath } = useStack();
 	const navigate = router?.navigate;
 	const Link = router?.Link;
@@ -287,6 +288,7 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 						hasMore={hasMore}
 						isLoadingMore={isLoadingMore}
 						localization={localization}
+						classNames={classNames}
 						t={t}
 					/>
 				)}
@@ -309,6 +311,7 @@ function ContentTable({
 	hasMore,
 	isLoadingMore,
 	localization,
+	classNames,
 	t,
 }: {
 	items: SerializedContentItemWithType[];
@@ -324,10 +327,14 @@ function ContentTable({
 	hasMore: boolean;
 	isLoadingMore: boolean;
 	localization: CMSPluginOverrides["localization"];
+	classNames: CMSPluginOverrides["classNames"];
 	t: TranslateFn;
 }) {
 	return (
-		<div className="border rounded-lg">
+		<div
+			className={cn("border rounded-lg", classNames?.table)}
+			data-testid="cms-content-table"
+		>
 			<Table>
 				<TableHeader>
 					<TableRow>
@@ -351,7 +358,7 @@ function ContentTable({
 				</TableHeader>
 				<TableBody>
 					{items.map((item) => (
-						<TableRow key={item.id}>
+						<TableRow key={item.id} className={classNames?.tableRow}>
 							<TableCell className="font-medium">
 								<LinkComponent
 									href={joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)}
@@ -406,7 +413,13 @@ function ContentTable({
 				</TableBody>
 			</Table>
 			{/* Load More and pagination info */}
-			<div className="flex items-center justify-between px-4 py-3 border-t">
+			<div
+				className={cn(
+					"flex items-center justify-between px-4 py-3 border-t",
+					classNames?.pagination,
+				)}
+				data-testid="cms-content-pagination"
+			>
 				<p className="text-sm text-muted-foreground">
 					{(
 						localization?.CMS_LIST_PAGINATION_SHOWING ??

package/src/plugins/cms/client/components/pages/dashboard-page.internal.tsx

@@ -19,11 +19,12 @@ import { useSuspenseContentTypes } from "../../hooks";
 import { EmptyState } from "../shared/empty-state";
 import { PageWrapper } from "../shared/page-wrapper";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
+import { cn } from "../../../utils";
 
 export function DashboardPage() {
 	const t = useTranslate();
 	const overrides = usePluginOverrides<CMSPluginOverrides>(CMS_PLUGIN_ID);
-	const { localization } = overrides;
+	const { localization, classNames } = overrides;
 	const { router, plugins, basePath: stackBasePath } = useStack();
 	const navigate = router?.navigate;
 	const basePath = plugins?.[CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
@@ -104,13 +105,23 @@ export function DashboardPage() {
 					{contentTypes.map((ct) => (
 						<Card
 							key={ct.id}
-							className="hover:border-primary/50 transition-colors cursor-pointer"
+							className={cn(
+								"hover:border-primary/50 transition-colors cursor-pointer",
+								classNames?.contentTypeCard,
+							)}
 							onClick={() =>
 								void navigate?.(joinBasePath(basePath, `/cms/${ct.slug}`))
 							}
 						>
 							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-								<CardTitle className="text-lg font-medium">{ct.name}</CardTitle>
+								<CardTitle
+									className={cn(
+										"text-lg font-medium",
+										classNames?.contentTypeTitle,
+									)}
+								>
+									{ct.name}
+								</CardTitle>
 								<FileText className="h-5 w-5 text-muted-foreground" />
 							</CardHeader>
 							<CardContent>

package/src/plugins/cms/client/components/shared/page-wrapper.tsx

@@ -4,6 +4,7 @@ import { usePluginOverrides } from "@btst/stack/context";
 import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
 import type { CMSPluginOverrides } from "../../overrides";
 import { CMS_PLUGIN_ID } from "../../constants";
+import { cn } from "../../../utils";
 
 export function PageWrapper({
 	children,
@@ -14,7 +15,7 @@ export function PageWrapper({
 	className?: string;
 	testId?: string;
 }) {
-	const { showAttribution } = usePluginOverrides<
+	const { showAttribution, classNames } = usePluginOverrides<
 		CMSPluginOverrides,
 		Partial<CMSPluginOverrides>
 	>(CMS_PLUGIN_ID, {
@@ -23,7 +24,7 @@ export function PageWrapper({
 
 	return (
 		<SharedPageWrapper
-			className={className}
+			className={cn(className, classNames?.container)}
 			testId={testId}
 			showAttribution={showAttribution}
 		>

package/src/plugins/cms/client/overrides.ts

@@ -129,6 +129,25 @@ export interface CMSPluginOverrides {
 	 */
 	imagePicker?: ComponentType<{ onSelect: (url: string) => void }>;
 
+	/**
+	 * Optional class names merged onto specific UI elements.
+	 * Use these for targeted styling without replacing whole components.
+	 */
+	classNames?: {
+		/** Page container shared by every CMS page */
+		container?: string;
+		/** Each content-type card on the dashboard */
+		contentTypeCard?: string;
+		/** Title inside a content-type card */
+		contentTypeTitle?: string;
+		/** Wrapper around the content entries table */
+		table?: string;
+		/** Each row in the content entries table */
+		tableRow?: string;
+		/** Pagination footer under the content entries table */
+		pagination?: string;
+	};
+
 	/**
 	 * Custom field components for AutoForm fields.
 	 *

package/src/plugins/form-builder/__tests__/classnames-overrides.test.tsx

@@ -0,0 +1,312 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+// Core primitives MUST be imported from the package entry (not relative src
+// paths) so they share module identity — and React context — with the
+// form-builder components, which resolve `@btst/stack/*` via package
+// self-reference.
+import { StackProvider } from "@btst/stack/context";
+import { defineAuthorization } from "@btst/stack/authorization";
+import { createClientAuth } from "@btst/stack/authorization/client";
+import { FormRenderer } from "../client/components/forms/form-renderer";
+import { FormListPage } from "../client/components/pages/form-list-page.internal";
+import { SubmissionsPage } from "../client/components/pages/submissions-page.internal";
+import { formBuilderClientPlugin } from "../client/plugin";
+import { formBuilderPermissions } from "../permissions";
+import type { SerializedForm } from "../types";
+import { createTestClientStack } from "../../../__tests__/client-stack-test-utils";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom lacks these APIs used by Radix
+(globalThis as any).ResizeObserver ??= class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+Element.prototype.scrollIntoView ??= () => {};
+
+const listHooks = vi.hoisted(() => ({
+	useForms: vi.fn(),
+	useSuspenseForms: vi.fn(),
+	useDeleteForm: vi.fn(),
+	useSuspenseFormById: vi.fn(),
+	useSuspenseFormForUpdate: vi.fn(),
+	useSuspenseSubmissions: vi.fn(),
+	useSubmission: vi.fn(),
+	useDeleteSubmission: vi.fn(),
+	useFormBuilderForm: vi.fn(),
+}));
+const rendererHooks = vi.hoisted(() => ({
+	useFormBySlug: vi.fn(),
+	useSubmitForm: vi.fn(),
+}));
+
+vi.mock("../client/hooks", () => listHooks);
+vi.mock("../client/hooks/form-builder-hooks", () => rendererHooks);
+
+// The auto-form internals are unrelated to class wiring — stub them.
+vi.mock("@workspace/ui/components/auto-form/stepped-auto-form", () => ({
+	SteppedAutoForm: ({
+		onSubmit,
+	}: {
+		onSubmit: (values: Record<string, unknown>) => void;
+	}) => (
+		<button
+			type="button"
+			data-testid="stepped-auto-form"
+			onClick={() => onSubmit({})}
+		>
+			Submit
+		</button>
+	),
+}));
+
+const CLASS_NAMES = {
+	container: "bg-red-100",
+	table: "bg-yellow-50",
+	tableRow: "text-green-600",
+	pagination: "border-4 border-orange-500",
+	form: "bg-blue-100",
+} as const;
+
+const form: SerializedForm = {
+	id: "f1",
+	name: "Contact Form",
+	slug: "contact-form",
+	description: null,
+	schema: JSON.stringify({ type: "object", properties: {} }),
+	successMessage: null,
+	redirectUrl: null,
+	status: "active",
+	createdBy: null,
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+} as unknown as SerializedForm;
+
+const authorization = defineAuthorization({
+	identity: z.object({ id: z.string(), role: z.string() }),
+	permissions: [formBuilderPermissions] as const,
+	rules: ({ forms }) => [
+		forms.form.render.allow(),
+		forms.submission.create.allow(),
+		forms.submission.read.allow(),
+	],
+});
+const auth = createClientAuth({ authorization, getIdentity: () => null });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+
+	listHooks.useSuspenseForms.mockReturnValue({
+		forms: [form],
+		total: 1,
+		loadMore: vi.fn(),
+		hasMore: false,
+		isLoadingMore: false,
+		refetch: vi.fn(),
+	});
+	listHooks.useForms.mockReturnValue({
+		forms: [],
+		total: 0,
+		isLoading: false,
+		error: null,
+		loadMore: vi.fn(),
+		hasMore: false,
+		isLoadingMore: false,
+		refetch: vi.fn(),
+	});
+	listHooks.useDeleteForm.mockReturnValue({
+		mutateAsync: vi.fn(),
+		isPending: false,
+	});
+	rendererHooks.useFormBySlug.mockReturnValue({
+		form,
+		isLoading: false,
+		error: null,
+	});
+	rendererHooks.useSubmitForm.mockReturnValue({
+		mutateAsync: vi.fn(),
+		isPending: false,
+	});
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+	vi.clearAllMocks();
+});
+
+function createMockRouter() {
+	let params = new URLSearchParams();
+	return {
+		navigate: vi.fn(),
+		getSearchParams: () => new URLSearchParams(params.toString()),
+		setSearchParams: vi.fn((next: URLSearchParams) => {
+			params = new URLSearchParams(next.toString());
+		}),
+	};
+}
+
+async function render(ui: React.ReactElement, withOverrides = true) {
+	await act(async () => {
+		root.render(
+			<StackProvider
+				stack={createTestClientStack({
+					formBuilder: formBuilderClientPlugin(),
+				})}
+				router={createMockRouter()}
+				auth={auth}
+				initialIdentity={null}
+				overrides={
+					withOverrides ? { formBuilder: { classNames: CLASS_NAMES } } : {}
+				}
+			>
+				{ui}
+			</StackProvider>,
+		);
+	});
+}
+
+function query(selector: string): HTMLElement {
+	const el = container.querySelector<HTMLElement>(selector);
+	expect(el, `expected to find ${selector}`).toBeTruthy();
+	return el!;
+}
+
+describe("form-builder classNames overrides (issue #36)", () => {
+	it("applies container, table, tableRow and pagination on the forms list", async () => {
+		await render(<FormListPage />);
+
+		const page = query('[data-testid="form-list-page"]');
+		expect(page.className).toContain(CLASS_NAMES.container);
+		// The override must merge with the layout's own classes, not replace them.
+		expect(page.className).toContain("mx-auto");
+
+		const table = query('[data-testid="form-builder-list-table"]');
+		expect(table.className).toContain(CLASS_NAMES.table);
+		expect(table.className).toContain("rounded-lg");
+
+		const row = table.querySelector<HTMLElement>("tbody tr")!;
+		expect(row, "expected a body row").toBeTruthy();
+		expect(row.className).toContain(CLASS_NAMES.tableRow);
+		expect(row.textContent).toContain(form.name);
+
+		const pagination = query('[data-testid="form-builder-pagination"]');
+		expect(pagination.className).toContain("border-4");
+		expect(pagination.className).toContain("border-orange-500");
+		expect(pagination.className).toContain("justify-between");
+	});
+
+	it("applies table, tableRow and pagination on the submissions page", async () => {
+		listHooks.useSuspenseSubmissions.mockReturnValue({
+			form,
+			submissions: [
+				{
+					id: "sub-11111111",
+					formId: form.id,
+					submittedAt: new Date("2024-01-02").toISOString(),
+				},
+			],
+			total: 1,
+			loadMore: vi.fn(),
+			hasMore: false,
+			isLoadingMore: false,
+			refetch: vi.fn(),
+		});
+		listHooks.useSubmission.mockReturnValue({
+			submission: null,
+			isLoading: false,
+			error: null,
+			refetch: vi.fn(),
+		});
+		listHooks.useDeleteSubmission.mockReturnValue({
+			mutateAsync: vi.fn(),
+			isPending: false,
+		});
+
+		await render(<SubmissionsPage formId={form.id} />);
+
+		const table = query('[data-testid="form-builder-submissions-table"]');
+		expect(table.className).toContain(CLASS_NAMES.table);
+		expect(table.className).toContain("rounded-lg");
+
+		const row = table.querySelector<HTMLElement>("tbody tr")!;
+		expect(row, "expected a body row").toBeTruthy();
+		expect(row.className).toContain(CLASS_NAMES.tableRow);
+
+		const pagination = query('[data-testid="form-builder-pagination"]');
+		expect(pagination.className).toContain("border-orange-500");
+		expect(pagination.className).toContain("justify-between");
+	});
+
+	it("applies classNames.form to the rendered public form", async () => {
+		await render(<FormRenderer slug={form.slug} />);
+
+		const root = query('[data-testid="form-renderer"]');
+		expect(root.className).toContain(CLASS_NAMES.form);
+		// The real auto-form is stubbed, but it must still be mounted inside the slot.
+		expect(
+			root.querySelector('[data-testid="stepped-auto-form"]'),
+		).toBeTruthy();
+	});
+
+	it.each([
+		["loading", { form: null, isLoading: true, error: null }],
+		[
+			"error",
+			{ form: null, isLoading: false, error: new Error("Unavailable") },
+		],
+		["not found", { form: null, isLoading: false, error: null }],
+		[
+			"inactive",
+			{ form: { ...form, status: "inactive" }, isLoading: false, error: null },
+		],
+		[
+			"invalid schema",
+			{ form: { ...form, schema: "invalid" }, isLoading: false, error: null },
+		],
+	])("preserves form classes in the %s state", async (_state, result) => {
+		rendererHooks.useFormBySlug.mockReturnValue(result);
+		await render(<FormRenderer slug={form.slug} className="p-6" />);
+		const wrapper = container.firstElementChild!;
+		expect(wrapper.className).toContain(CLASS_NAMES.form);
+		expect(wrapper.className).toContain("p-6");
+	});
+
+	it("preserves form classes after successful submission", async () => {
+		const submit = vi
+			.fn()
+			.mockResolvedValue({ form: { successMessage: "Thank you!" } });
+		rendererHooks.useSubmitForm.mockReturnValue({
+			mutateAsync: submit,
+			isPending: false,
+		});
+		await render(<FormRenderer slug={form.slug} className="p-6" />);
+		await act(async () => {
+			query('[data-testid="stepped-auto-form"]').click();
+		});
+		expect(submit).toHaveBeenCalled();
+		expect(container.textContent).toContain("Thank you!");
+		const wrapper = container.firstElementChild!;
+		expect(wrapper.className).toContain(CLASS_NAMES.form);
+		expect(wrapper.className).toContain("p-6");
+	});
+
+	it("leaves base classes untouched when no classNames override is supplied", async () => {
+		await render(<FormListPage />, false);
+
+		const table = query('[data-testid="form-builder-list-table"]');
+		expect(table.className).toContain("rounded-lg");
+		expect(table.className).not.toContain(CLASS_NAMES.table);
+	});
+});