feat(blocks): add Tab block to Block Kit

.changeset/lazy-shrimps-stand.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/blocks": minor
+---
+
+Add Tab block to Block Kit for tabbed panel layouts

packages/blocks/src/blocks/tab.tsx

@@ -0,0 +1,30 @@
+import { Tabs } from "@cloudflare/kumo";
+import { useState } from "react";
+
+import { BlockRenderer } from "../renderer.js";
+import type { BlockInteraction, TabBlock } from "../types.js";
+
+export function TabBlockComponent({
+	block,
+	onAction,
+}: {
+	block: TabBlock;
+	onAction: (interaction: BlockInteraction) => void;
+}) {
+	const [activeTab, setActiveTab] = useState(block.default_tab ?? 0);
+	const tabs = block.panels.map((panel, i) => ({ value: String(i), label: panel.label }));
+
+	return (
+		<div>
+			<Tabs
+				variant="underline"
+				value={String(activeTab)}
+				onValueChange={(value) => setActiveTab(Number(value))}
+				tabs={tabs}
+			/>
+			<div className="pt-4">
+				<BlockRenderer blocks={block.panels[activeTab]?.blocks ?? []} onAction={onAction} />
+			</div>
+		</div>
+	);
+}

packages/blocks/src/builders.ts

@@ -36,6 +36,8 @@ import type {
 	TableColumn,
 	TextInputElement,
 	ToggleElement,
+	TabBlock,
+	TabPanel,
 } from "./types.js";
 
 // ── Block Builders ───────────────────────────────────────────────────────────
@@ -444,6 +446,21 @@ function codeBlock(opts: {
 	};
 }
 
+function tabBlock(
+	panels: TabPanel[],
+	opts?: {
+		defaultTab?: number;
+		blockId?: string;
+	},
+): TabBlock {
+	return {
+		type: "tab",
+		panels,
+		...(opts?.defaultTab !== undefined && { default_tab: opts.defaultTab }),
+		...(opts?.blockId !== undefined && { block_id: opts.blockId }),
+	};
+}
+
 function empty(opts: {
 	blockId?: string;
 	title: string;
@@ -497,6 +514,7 @@ export const blocks = {
 	banner: bannerBlock,
 	meter,
 	code: codeBlock,
+	tab: tabBlock,
 	empty,
 	accordion,
 };

packages/blocks/src/index.ts

@@ -36,6 +36,7 @@ export type {
 	ChartConfig,
 	TimeseriesChartConfig,
 	CustomChartConfig,
+	TabPanel,
 	// Blocks
 	HeaderBlock,
 	SectionBlock,
@@ -50,6 +51,7 @@ export type {
 	ColumnsBlock,
 	ChartBlock,
 	CodeBlock,
+	TabBlock,
 	BannerBlock,
 	MeterBlock,
 	EmptyBlock,

packages/blocks/src/renderer.tsx

@@ -14,6 +14,7 @@ import { ImageBlockComponent } from "./blocks/image.js";
 import { MeterBlockComponent } from "./blocks/meter.js";
 import { SectionBlockComponent } from "./blocks/section.js";
 import { StatsBlockComponent } from "./blocks/stats.js";
+import { TabBlockComponent } from "./blocks/tab.js";
 import { TableBlockComponent } from "./blocks/table.js";
 import type { Block, BlockInteraction } from "./types.js";
 
@@ -52,6 +53,8 @@ function renderBlock(
 			return <BannerBlockComponent block={block} />;
 		case "code":
 			return <CodeBlockComponent block={block} />;
+		case "tab":
+			return <TabBlockComponent block={block} onAction={onAction} />;
 		case "empty":
 			return <EmptyBlockComponent block={block} onAction={onAction} />;
 		case "accordion":

packages/blocks/src/types.ts

@@ -337,6 +337,17 @@ export interface CodeBlock extends BlockBase {
 	language?: "ts" | "tsx" | "jsonc" | "bash" | "css";
 }
 
+export interface TabPanel {
+	label: string;
+	blocks: Block[];
+}
+
+export interface TabBlock extends BlockBase {
+	type: "tab";
+	panels: TabPanel[];
+	default_tab?: number;
+}
+
 export interface EmptyBlock extends BlockBase {
 	type: "empty";
 	title: string;
@@ -369,6 +380,7 @@ export type Block =
 	| BannerBlock
 	| MeterBlock
 	| CodeBlock
+	| TabBlock
 	| EmptyBlock
 	| AccordionBlock;
 

packages/blocks/tests/renderer.test.tsx

@@ -117,6 +117,20 @@ vi.mock("@cloudflare/kumo", () => ({
 			{contents}
 		</div>
 	),
+	Tabs: ({ tabs, value, onValueChange }: any) => (
+		<div role="tablist">
+			{tabs.map((tab: any) => (
+				<button
+					key={tab.value}
+					role="tab"
+					aria-selected={value === tab.value}
+					onClick={() => onValueChange?.(tab.value)}
+				>
+					{tab.label}
+				</button>
+			))}
+		</div>
+	),
 	Checkbox: {
 		Group: ({ children, legend }: any) => (
 			<fieldset data-testid="checkbox-group">
@@ -530,6 +544,52 @@ describe("BlockRenderer", () => {
 		expect(screen.getByText("Right")).toBeTruthy();
 	});
 
+	it("tab block renders panel labels and shows first panel by default", () => {
+		renderBlocks([
+			{
+				type: "tab",
+				panels: [
+					{ label: "General", blocks: [{ type: "header", text: "General Settings" }] },
+					{ label: "Advanced", blocks: [{ type: "header", text: "Advanced Settings" }] },
+				],
+			},
+		]);
+		expect(screen.getByText("General")).toBeTruthy();
+		expect(screen.getByText("Advanced")).toBeTruthy();
+		expect(screen.getByText("General Settings")).toBeTruthy();
+		expect(screen.queryByText("Advanced Settings")).toBeNull();
+	});
+
+	it("tab block switches panel on tab click", () => {
+		renderBlocks([
+			{
+				type: "tab",
+				panels: [
+					{ label: "General", blocks: [{ type: "header", text: "General Settings" }] },
+					{ label: "Advanced", blocks: [{ type: "header", text: "Advanced Settings" }] },
+				],
+			},
+		]);
+		fireEvent.click(screen.getByText("Advanced"));
+		expect(screen.queryByText("General Settings")).toBeNull();
+		expect(screen.getByText("Advanced Settings")).toBeTruthy();
+	});
+
+	it("tab block respects default_tab", () => {
+		renderBlocks([
+			{
+				type: "tab",
+				default_tab: 1,
+				panels: [
+					{ label: "General", blocks: [{ type: "header", text: "General Settings" }] },
+					{ label: "Advanced", blocks: [{ type: "header", text: "Advanced Settings" }] },
+				],
+			},
+		]);
+		expect(screen.queryByText("General Settings")).toBeNull();
+		expect(screen.getByText("Advanced Settings")).toBeTruthy();
+	});
+
 	it("button click fires onAction with block_action", () => {
 		const onAction = vi.fn();
 		renderBlocks(