Mobile sidenav scrim + drawer elevation + z-index tokens

[blove]

Summary

Fixes the chat-sidenav drawer's broken mobile interaction (scrim renders over content, drawer can't be tapped/scrolled), adds a right-edge drawer shadow, moves the demo's hamburger out of fixed-positioning into the toolbar's flex row, and promotes z-index hardcodes to documented CSS variables.

Lib (@ngaf/chat)

• New primitive `` — single-purpose backdrop rendered as a sibling of ``. `:host { display: contents; }` so it doesn't create a stacking context — its fixed-positioned button sits at the document root.
• `` stops rendering its internal scrim. Old DOM structure trapped the scrim inside the drawer's z-index 1001 stacking context; the scrim's z-index 1000 then painted over the drawer's static ``, swallowing every click. Lifting the scrim out fixes it.
• Drawer right-edge shadow: `box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18)` on `:host([data-mode="drawer"][data-open="true"])`.
• Three z-index layer tokens in chat-tokens.ts: `--ngaf-chat-z-overlay-content: 30` (chat-sidebar panel, chat-popup window), `--ngaf-chat-z-drawer-scrim: 1000`, `--ngaf-chat-z-drawer: 1001`. All existing hardcodes replaced with these tokens.

Demo

• Demo-shell wires the new scrim as a sibling of chat-sidenav, bound to `drawerOpen`.
• Hamburger moves into the toolbar's flex row as the first child when in drawer mode. Drops `position: fixed`, `z-index: 1100`, hardcoded colors + box-shadow. No more visual conflict with the toolbar.

@ngaf/* 0.0.44.

Test plan

• `pnpm nx test chat` — green
• `pnpm nx test examples-chat-angular` — 21 tests pass
• Local chrome-mcp verify at 375×812:
  • Hamburger inside toolbar, `position: static`
  • Open drawer: scrim z 1000, drawer z 1001, drawer shadow visible
  • `elementFromPoint` at drawer center returns a thread item (NOT the scrim)
  • Threads scrollTop 0 → 200 confirmed
• Canonical demo redeploys on demo.threadplane.ai

Spec: `docs/superpowers/specs/2026-05-19-mobile-sidenav-scrim-design.md`
Plan: `docs/superpowers/plans/2026-05-19-mobile-sidenav-scrim.md`

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
threadplane	Ready	Preview, Comment	May 19, 2026 8:33pm