feat(cli): add typography playground to panda studio

[Adebesin-Cell]

Stacked PR. Base is feat/cli-studio-contrast (#3664), which stacks on the studio PR (#3663), so this diff is just the typography playground. Review #3664 first.

📝 Description

Add a typography playground to panda studio. Combine font-size, weight, family, line-height, and letter-spacing tokens on your own sample text to preview a text style before you build it.

⛳️ Current behavior (updates)

The viewer lists typography tokens one category at a time, but there's no way to combine them and see the result.

🚀 New behavior

A Typography tool under the viewer's Playground nav. Five dropdowns pick a font-size, weight, family, line-height, and letter-spacing from your tokens, and a textarea sets the sample text. A live preview renders the combination, and a readout shows the composed CSS you'd write.

💣 Is this a breaking change (Yes/No):

No.

📝 Additional Information

The studio stack:

• feat(cli): add panda studio #3663 — panda studio (base)
• feat(cli): add contrast checker to panda studio #3664 — contrast checker
• this PR — typography playground

Test plan:

• pnpm --filter @pandacss/cli test
• verified in the running viewer: dropdowns apply live, the CSS readout tracks the selection, no console errors

[changeset-bot]

🦋 Changeset detected

Latest commit: a42a184

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@pandacss/cli	Patch
@pandacss/dev	Patch
@pandacss/language-server	Patch
@pandacss/typescript-plugin	Patch
playground	Patch
website	Patch
@pandacss/compiler-shared	Patch
@pandacss/compiler-wasm	Patch
@pandacss/compiler	Patch
@pandacss/config	Patch
@pandacss/eslint-plugin	Patch
@pandacss/mcp	Patch
@pandacss/postcss	Patch
@pandacss/preset-base	Patch
@pandacss/preset-panda	Patch
@pandacss/rollup	Patch
@pandacss/transformer	Patch
@pandacss/types	Patch
@pandacss/vite	Patch
@pandacss/webpack	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
panda-docs	Error		Jul 18, 2026 5:11am
panda-playground	Error		Jul 18, 2026 5:11am
panda-studio	Error		Jul 18, 2026 5:11am

[Adebesin-Cell]

Consolidated into #3666 — the full panda studio feature now ships as one PR.