feat: examples page, scroll reset, bracket highlights, agent context arch, padding polish#59
Conversation
- Switch ScrollToTop to useLayoutEffect (SSR-guarded) so the reset fires before paint and eliminates mid-page flash. - Depend on pathname + search + hash + key so query-string and hash navigations also trigger a reset. - If location.hash is set, scrollIntoView the target element instead of jumping to the top. - Add window.scrollTo(0,0) fallback for layouts without #main-scroll. - Add Playwright test: scroll Overview halfway, navigate to /atoms, assert #main-scroll scrollTop === 0. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds ExamplesPage at /ai/examples showing three end-to-end brand overrides (violet dark prompt library, blue obs dashboard, amber AI-ops platform) using CSS-only token changes. Registers the route in AiDetailPage platformMap. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 44 minutes and 22 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Add fourth card to the Customize with your brand grid linking to /ai/examples (Layers icon, Violet · Blue · Amber badge). Update grid from lg:grid-cols-3 to lg:grid-cols-4 for a balanced single row on desktop, 2×2 on tablet. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Before → After: | Page | subtitle | cat-sum | |--------------|----------|---------| | AtomsPage | 10 → 11 | 15 → 11 | | MoleculesPage| 18 → 17 | 16 → 17 | | OrganismsPage| 19 ✓ | 19 ✓ | | TemplatesPage| 7 ✓ | — ✓ | AtomsPage changes: - Renamed local CodeBlock helper → ApiSnippet to un-shadow the atom import - Added sections for 4 previously unlisted custom atoms: CopyButton (cat-form), StatusBadge (cat-labels), CodeBlock (cat-utility), Logo (cat-utility) - Category counts now represent custom democrito atoms only (sum = 11): cat-form=1, cat-labels=6, cat-feedback=1, cat-utility=3 - Subtitle corrected: "10 atoms" → "11 atoms" MoleculesPage changes: - Added missing TokenReferenceCard section to cat-data - cat-data count: 5 → 6; total 16 → 17 - Subtitle corrected: "18 molecules" → "17 molecules" Cross-check findings: - All 11 custom atoms have files ✓ (no missing, no unlisted) - All 17 molecules have files ✓ (TokenReferenceCard was built but unlisted on page) - All 19 organisms have files ✓ - Templates: 7 files match the "7 templates" subtitle; SettingsLayout, AuthLayout, ModalLayout appear as previews on the page but have no component files — these are known planned templates (noted in docs/design-system.md §7) - docs/design-system.md §7 inventory already correct; no doc changes needed - organisms/ai/ (5 AI-page organisms) are intentionally excluded from the public surface and from OrganismsPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
mmorerasanchez
changed the title
mmorerasanchez
changed the title
1 participant
Summary
useLayoutEffect+[pathname, search, hash, key]deps; hash-awarescrollIntoView;window.scrollTofallback[bracketed]variables in prompt and code blocks viatokenizeBrackets/ai/examplespage — three worked customizations (Violet, Blue, Amber), token overrides only, no component files touchedlg:grid-cols-4(single row on desktop, 2×2 on tablet)p-5on Overview stat tiles, Sections grid, and Design-principle cards — matches the How-path cards baselineTest plan
/ai/examplesloads and displays three customization previews (Violet, Blue, Amber)p-5, consistent with How-path cards; no overflow at tablet or mobile[variable]tokens render highlighted in CodeBlock and prompt atomsnpm run lintpasses cleannpm run testpasses (89 unit tests)🤖 Generated with Claude Code