feat(site): companion 8-state callouts#210
Merged
Merged
Conversation
Reworks the guide Callout into the eight Pocket Relic Bot states from the companion design brief: info, hint, warning, pitfall, success, debug, invalid, broken. Each callout now pairs the painterly companion sprite (a trailing-edge badge with a state-coloured screen-glow) with a state-coloured glyph + label — glyph and label carry the meaning, so the callout still reads via shape and text, not colour alone. - 8 transparent companion sprites keyed + optimised to ~6 KB WebP each in site/public/brand/companion/. - Colour exclusivity per the brief: amber=warning, mint=success, gray=invalid, red=broken; info/hint/pitfall/debug share the companion cyan and are told apart by glyph. State colours are fixed, so they stay stable across the user-selectable accent themes. - Migrates the existing usages to the new states: common-mistake→pitfall, tip→hint, and the two browser callouts → info / warning by meaning. Verified all eight states render cleanly in light and dark (Playwright), with no sprite halo on either theme; astro check 0 errors. The right-rail "Need a hand?" helper card is a deliberate follow-up.
Exoridus
added a commit
that referenced
this pull request
Jun 27, 2026
…#211) Follow-up to the 8-state callouts (#210). The first pass used the wrong, stale sprite source and rendered the companion too small. - Source: slice the 8 states from the production 8-state sheet (exojs-companion-12), which carries the finished faces + state glyphs — not the raw faceless bodies. - Crop to the upper body (head + torso, where the expression lives) and seat it large on the callout's bottom edge, legs clipped — matching the mockup scale. - Flip the companion to face inward toward the text; pitfall and debug keep their native orientation so their ?/[ ] face glyphs don't mirror. - Swap the weak text-in-thin-circle glyph for proper Lucide-style SVG icons in a soft state-tinted chip; sentence-case titles. Verified all eight states light + dark and side-by-side against the canonical mockup (scale / upper-body crop / inward orientation now match); astro check 0. Co-authored-by: Exoridus <github@codexo.de>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the guide
Calloutinto the eight Pocket Relic Bot states from the companion design brief:info,hint,warning,pitfall,success,debug,invalid,broken.Each callout now pairs the painterly companion sprite (a trailing-edge badge with a state-coloured screen-glow) with a state-coloured glyph + label. Glyph and label carry the meaning, so the callout still reads via shape and text — not colour alone (a11y).
site/public/brand/companion/.common-mistake→pitfall,tip→hint, and the twobrowsercallouts →info/warningby meaning.Verification: all eight states render cleanly in light + dark (Playwright element shots), no sprite halo on either theme,
astro check0 errors,verify:quickgreen.Follow-up (deferred by request): the right-rail "Need a hand?" helper card.