fix(empty): refine empty state styling

[nandanmen]

Summary

• refine Empty title and description typography, spacing, and wrapping
• restyle the command-line surface and align its prompt and command text
• add focused coverage for Empty typography and command-line styling

With everything:

With long description:

With no description:

Tests

• pnpm --filter @cloudflare/kumo test src/components/empty/empty.test.tsx

• pnpm --filter @cloudflare/kumo lint

• pnpm vp fmt --check packages/kumo/src/components/empty/empty.tsx packages/kumo/src/components/empty/empty.test.tsx

• Reviews

• bonk has reviewed the change

• automated review not possible because: review will be requested after PR creation

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows: not applicable

• Additional testing not necessary because: not applicable

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

Posted 1 finding inline.

Review notes

• Confirmed the target is PR fix(empty): refine empty state styling #806 (fix(empty): refine empty state styling). I’ll inspect its full diff, component conventions, existing reviews, and focused tests before assessing regressions.
• The checked-out file contains the proposed Empty implementation and the new targeted tests. The local clone lacks the supplied base commit, so I’ll obtain the authoritative PR diff and review state from PR fix(empty): refine empty state styling #806, then run the focused test if the read-only checkout permits it.
• The authoritative diff matches head SHA 5901e287…; PR fix(empty): refine empty state styling #806 has no prior reviews or comments. The focused test could not run because pnpm is unavailable in this runner. I verified Text supports semantic as="h2" for the affected secondary-title branch and identified one accessibility regression to report inline.

github run

[github-actions]

Visual contracts

Linux Chromium references exercised by the PR's visual-contracts job.

1 curated contract

truncating text trigger

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://nanda-deseng-1686-kumo-docs.design-engineering.workers.dev (commit 7d1af63)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://2bbbd71e-kumo-docs.design-engineering.workers.dev	7d1af63	2026-09-15T19:03:10.557Z	Visit the dashboard ↗

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@806

commit: 7d1af63

[github-actions]

📐 Bundle Size

Consumer fixtures bundled against packages/kumo/dist (peers external, minified ESM).

Fixture	Raw	Gzip	Brotli
Button (root)	174.6 KB	49.9 KB	43.1 KB
Button (components/button)	174.5 KB	49.9 KB	43.1 KB
Button + Dialog + Select (root)	299.5 KB	85.8 KB	71.9 KB
Button + Dialog + Select (component subpaths)	299.5 KB	85.9 KB	71.9 KB
Chart (root)	247.0 KB	71.1 KB	60.9 KB
Chart (components/chart)	246.9 KB	71.1 KB	60.9 KB
Badge (components/badge)	44.7 KB	11.7 KB	10.0 KB
Flow (components/flow)	208.9 KB	58.3 KB	50.5 KB
Button (primitives/button)	12.2 KB	4.4 KB	3.9 KB
Primitives barrel	635.8 KB	176.9 KB	139.3 KB
Code highlighting (code)	2.08 MB	467.9 KB	349.1 KB

npm tarball: 540 files, 1.49 MB packed, 6.91 MB unpacked.

⚠️ 23 flagged files in tarball (tests / raw scripts)

• dist/blocks-source/resource-list/resource-list.test.tsx
• scripts/component-registry/cache.ts
• scripts/component-registry/discovery.ts
• scripts/component-registry/example-cleanup.ts
• scripts/component-registry/index.test.ts
• scripts/component-registry/index.ts
• scripts/component-registry/markdown-generator.ts
• scripts/component-registry/metadata.ts
• scripts/component-registry/props-filter.ts
• scripts/component-registry/schema-generator.ts
• scripts/component-registry/sub-components.ts
• scripts/component-registry/types.ts
• scripts/component-registry/utils.ts
• scripts/component-registry/variant-parser.ts
• scripts/css-build.ts
• scripts/generate-globe-land-mask.mjs
• scripts/generate-primitives.ts
• scripts/theme-generator/config.ts
• scripts/theme-generator/generate-css.test.ts
• scripts/theme-generator/generate-css.ts
• scripts/theme-generator/index.ts
• scripts/theme-generator/migrate.ts
• scripts/theme-generator/types.ts

Report-only: no size thresholds are enforced yet.

Commit: 7d1af631

[github-actions]

Visual Regression Report — 6 changed, 0 unchanged

6 screenshot(s) with visual changes:

Empty / Empty

25,227 px (7.58%) changed

Before	After	Diff

Empty / Empty Basic

15,094 px (7.99%) changed

Before	After	Diff

Empty / Empty Sizes

45,396 px (6.24%) changed

Before	After	Diff

Empty / Empty With Command

16,383 px (5.66%) changed

Before	After	Diff

Empty / Empty With Actions

34,760 px (11.54%) changed

Before	After	Diff

Empty / Empty Minimal

11,859 px (7.58%) changed

Before	After	Diff

---

Generated by Kumo Visual Regression