fix: make callout blocks visually distinct from code blocks (#204)

[zacharias-ona]

Closes #204

What

Callout blocks and code blocks were visually indistinguishable — both used identical bg-muted styling with no differentiating border or color. The callout emoji icon only appeared after a hard refresh because it was injected asynchronously via a mutation listener rather than being part of the node's initial DOM.

How

• Added a colored left border (border-l-2) to callouts with variant-specific colors: accent (info), code-type (warning), code-string (success), destructive (error). All colors use existing design tokens.
• Moved emoji span creation from the plugin's registerMutationListener into CalloutNode.createDOM() so the icon renders immediately on insert.
• Updated updateDOM() to handle both variant and emoji changes.
• Removed the mutation listener from CalloutPlugin since the node now owns emoji rendering.

Testing

Added 5 regression tests in design-spec-compliance.test.ts:

• Emoji span is created in createDOM, not via mutation listener
• Callout uses border-l-2 for visual distinction from code blocks
• Each variant has a distinct border color class
• Plugin no longer uses registerMutationListener for emoji
• Existing emoji typography tests updated to read from callout-node.tsx

All checks pass: pnpm lint && pnpm typecheck && pnpm test (226 tests). E2E: 46/50 passed (1 pre-existing flaky failure in members.spec.ts, 3 skipped as dependents).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 17, 2026 10:46pm

[zacharias-ona]

✅ UI verification passed — design spec compliance confirmed.

Static analysis (code review against .agents/design.md):

Check	Result
Color tokens	✅ All border colors use existing design tokens (accent, code-type, code-string, destructive). bg-muted retained. No arbitrary hex/rgb.
Typography	✅ text-sm for body, text-lg for decorative emoji (non-editable, select-none — pre-existing convention).
Spacing	✅ mt-3, gap-3, p-4, border-l-2 — all Tailwind scale values. No arbitrary spacing.
Corners	✅ No rounded-* added. Callouts use sharp corners per spec.
Borders	✅ border-l-2 with variant-specific token colors for visual distinction from code blocks.
Dark mode	✅ All colors via CSS variable tokens.
Accessibility	✅ Emoji span is contentEditable="false", select-none. No new interactive elements needing aria-label.

Visual verification (Playwright screenshots):

Screenshotted editor and workspace pages at desktop (1280×800) and mobile (375×812) in dark mode. No broken layouts, overlapping elements, or horizontal scroll detected. Mobile touch targets adequate. Responsive behavior correct.

Note: The callout left-border styling is DOM-level (Lexical createDOM/updateDOM) and only renders when callout blocks exist in editor content. Token usage verified via static analysis.

[zacharias-ona]

✅ Post-merge verification passed.

E2E suite: 47/52 passed, 2 pre-existing failures, 3 skipped (serial dependents).

Check	Result
Landing page	✅ Passed
Sign-in page	✅ Passed
Health endpoint (/api/health)	✅ Passed
Authenticated login flow	✅ Passed
Workspace page load	✅ Passed
Console errors (unauth)	✅ None
Console errors (auth)	✅ None
/dashboard	⏭️ Skipped (not yet built)
Editor page navigation	⏭️ Skipped (no page buttons with timestamps found)

Pre-existing failures (not regressions from this PR):

• members.spec.ts:139 — "owner can re-invite and invited user can accept" — strict mode violation from leftover test data (noted in PR description)
• search.spec.ts:188 — "search with no matches shows empty state" — chronic issue tracked across bug: UI regression after PR #123 — search empty state never renders for no-match queries #126, bug: E2E failures after PR #134 — re-invite toast not shown, search empty state missing #136, bug: search empty state still broken — "No pages match your search" never renders #144, bug: search empty state still broken — "No pages match your search" never renders (4th recurrence) #162, bug: UI regression after PR #176 — search empty state E2E test fails #178, bug: UI regression after PR #179 — search empty state still shows skeletons instead of "No pages match your search" #181, bug: UI regression after PR #188 — search empty state still shows skeletons in production #192