docs(core): declare Chat subcomponent playground scaffolds and tidy progress example

[cixzhang]

What this fixes

Refs #2877 (BB-008, BB-009) — Chat example/playground polish.

• BB-008 (cluster C10, Chat example polish): the ChatComposerDrawer — With Progress example showed a redundant visible "42%" value label in the compact header.
• BB-009 (cluster C11, playground scaffold/container): the ChatComposer and ChatComposerDrawer playgrounds previewed poorly standalone — ChatComposer was squished at its full-width default, and ChatComposerDrawer rendered as a bare, top-rounded fragment with no width/container context.

Root cause

BB-008: The example rendered <ProgressBar value={42} label="Context usage" isLabelHidden hasValueLabel />. In ProgressBar.tsx these two props are orthogonal by design: isLabelHidden visually hides the text label (kept for accessibility via aria-labelledby), while hasValueLabel independently surfaces a visible value label (showValueLabel = hasValueLabel && !isIndeterminate). So the value "42%" stayed visible — redundant clutter in the header context. The component is correct (an existing test documents that isLabelHidden hasValueLabel still shows the value); this is an example-composition issue.

BB-009: PR #2906 added a playground.wrapper mechanism ({component, props?}) so a doc can declare the parent/container its component needs for a realistic preview. It was declared for Tab (TabList), SegmentedControlItem (SegmentedControl), and RadioListItem (RadioList) — but not for the Chat subcomponents, so they previewed without sensible width/scaffold.

Reproduction (failed → passes)

• BB-008 — packages/core/src/ProgressBar/ProgressBar.test.tsx: a new render test using the fixed example's exact props (value={42} label="Context usage" isLabelHidden, no hasValueLabel) asserts no visible "42%" value label renders while the accessible label "Context usage" is present and linked via aria-labelledby. 23/23 ProgressBar tests pass.
• BB-009 — apps/docsite/src/__tests__/data-extraction.test.ts: a new test runs the generator and asserts both ChatComposer and ChatComposerDrawer resolve playground.wrapper {component: 'Stack', props: {width: 480}} (and the drawer's playground.defaults). 74/74 data-extraction tests pass. Codegen proof: regenerated componentRegistry.ts Stack-wrapper count for Chat subcomponents went from 0 → 2.

Fix

• BB-008: drop hasValueLabel from ChatComposerDrawerWithProgress.tsx, keeping the accessible label.
• BB-009: add playground.wrapper to ChatComposer.doc.mjs and ChatComposerDrawer.doc.mjs, wrapping both in Stack at width: 480 (matching the realistic composer width used in the block example). ChatComposerDrawer also gets playground.defaults (realistic count/label plus Token children) so its collapse-with-badge geometry is demonstrated. No new playground schema invented — the schema supports only defaults and wrapper.

Files changed: ChatComposerDrawerWithProgress.tsx, ChatComposer.doc.mjs, ChatComposerDrawer.doc.mjs, ProgressBar.test.tsx, data-extraction.test.ts, plus a @astryxdesign/core + @astryxdesign/cli patch changeset.

Scope — what I did NOT change

• ProgressBar component behavior is untouched — isLabelHidden/hasValueLabel are correct as designed; this is purely an example-composition fix.
• The generic playground.wrapper injects the previewed component as the wrapper's children. ChatComposer renders its drawer slot (not children), so a wrapper cannot route ChatComposerDrawer into the drawer region; the faithful in-schema fix is a sizing/container wrapper so geometry matches real usage. Surfacing the drawer inside a live composer slot would need a mechanism change beyond this docs fix.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jun 28, 2026 3:32pm

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.6KB	0B

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}