fix(Chat): align composer tokens to middle instead of synthesized baseline

[athz]

Problem

Tokens inserted into ChatComposerInput sit a few pixels high relative to typed text. The text appears to sag below the chip.

Root cause

Three things compound:

1. Astryx wraps every inserted token in a <span> with display: inline-flex and vertical-align: baseline.
2. A flex container derives its baseline from its first flex item. For a token with an icon, that's an SVG — which has no text baseline — so CSS synthesizes one from the box's bottom margin edge.
3. vertical-align: baseline therefore aligns the chip's bottom edge to the text baseline, rather than the chip's label baseline. The visual gap equals roughly the label's descender depth.

Fix

Both sites changed together (they must stay in sync):

• useChatComposerTokens (imperative span created on token insert): vertical-align → middle
• ChatComposerTokenElement (exported React component): moved from inline style to a StyleX class with vertical-align: middle

middle is the conventional alignment for an inline chip taller than its surrounding text — it centers the chip's midpoint on the parent's x-height midpoint, producing visually centered alignment regardless of icon presence.

Bonus: StyleX over inline style

ChatComposerTokenElement previously used style={{ display: 'inline-flex', verticalAlign: 'baseline' }}. An inline style is unreachable from a stylesheet without !important, so consumers had no clean way to adjust alignment. It now uses a StyleX class, making it overridable through normal specificity.

Risk

Low. No test pins the previous value (verified — the only verticalAlign assertions in the suite are in Table). All 51 Chat tests pass unchanged.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 22, 2026 6:23am

[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.

Modified Components

Chat _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	5410	-
Complexity	N/A	Very High (438)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

Chat - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/9 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

---

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