From ed8213fb9c22a9d493d0af4ae57c94a0d940acbc Mon Sep 17 00:00:00 2001 From: Brian Love Date: Wed, 13 May 2026 18:11:07 -0700 Subject: [PATCH 1/9] docs: chat lib polish design (PR 2 of 3-PR sequence) Second in the cockpit dark mode polish series. Fixes the user-bubble text-wrap bug (max-width without fit-content), drops the duplicate chat.css token block in favor of chat-tokens.ts auto-injection, migrates the --a2ui-* namespace into the auto-injection path with a light variant (currently dark-only / broken in light mode), and closes two small a11y holes (control-btn focus ring, modal aria-label). Co-Authored-By: Claude Opus 4.7 --- .../2026-05-13-chat-lib-polish-design.md | 156 ++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 docs/superpowers/specs/2026-05-13-chat-lib-polish-design.md diff --git a/docs/superpowers/specs/2026-05-13-chat-lib-polish-design.md b/docs/superpowers/specs/2026-05-13-chat-lib-polish-design.md new file mode 100644 index 00000000..4910c662 --- /dev/null +++ b/docs/superpowers/specs/2026-05-13-chat-lib-polish-design.md @@ -0,0 +1,156 @@ +# `@ngaf/chat` Library Polish — Design + +**Date:** 2026-05-13 +**Status:** Spec — pending implementation plan +**Spec series:** Second in a three-PR sequence (cockpit polish → chat lib polish → cockpit ↔ website style alignment) + +## Goal + +Tighten `@ngaf/chat`: fix the user-message-bubble text-wrap bug, eliminate the drift-prone duplicate token system (`chat.css` vs `chat-tokens.ts`), patch the a2ui surface namespace so it works in light mode, and close two small accessibility holes surfaced during the audit. + +The audit pass for this PR turned up more than the user-visible bug — fixing them now gets the chat lib into the best state to receive PR 3's visual unification with the cockpit design tokens. + +Out of scope: +- Visual palette unification with `--ds-*` design tokens — PR 3 +- `image.component.ts` chained `[style.*]` bindings refactor — not a bug, deferred +- Any chat lib feature work beyond the listed fixes +- Migration of the broader chat lib API surface + +## Decisions + +| # | Decision | Choice | +|---|---|---| +| 1 | Text-wrap bug fix mechanism | `width: fit-content` on `.chat-message__bubble` to prevent flex-shrink below intrinsic content width | +| 2 | Regression test | None. Bubble width is a one-shot CSS fix, not a regression-prone surface. E2E coverage budget targets high-value scenarios elsewhere. | +| 3 | Token de-duplication direction | Drop `libs/chat/src/lib/styles/chat.css` entirely. `ensureChatRootStyles()` is the single source of truth. No backwards compat. | +| 4 | `--a2ui-*` namespace handling | Migrate the entire `--a2ui-*` block from `chat.css` into `chat-tokens.ts` so it's auto-injected. Add a `prefers-color-scheme: light` / `[data-theme="light"]` variant. | +| 5 | Hardcoded fallback color | Drop the `, #16a34a` fallback at `chat-message-actions.styles.ts:69`. `ensureChatRootStyles()` guarantees the var is defined. | +| 6 | `.chat-message__control-btn` focus | Add `:focus-visible` ring matching the existing `chat-message-actions.styles.ts:52` focus pattern (`outline: 2px solid var(--ngaf-chat-primary); outline-offset: 2px`) | +| 7 | `modal.component.ts` inline style | Move `style="display:contents"` to the styles array. Add explicit `aria-label` to the button-role element. | + +## Architecture + +**Token system after this PR:** + +- **Sole source of truth: `chat-tokens.ts`** — exports CSS string constants and `ensureChatRootStyles()`, which appends `