[pei-tinybird]

Summary

Make the project easier to fork, simpler, and better documented. Also fixes a dashboard crash, hardens the console routes, and updates outdated dependencies.

Changes

Fixes

• /?range=toString returned a 500. lib/range.ts now uses Object.hasOwn, and a test covers it.
• /api/console/server-event and /api/console/stored reject bodies over 64 KB (413). stored now accepts same-origin requests only.
• Server SDK: pageUrl is sanitized like the browser client (no credentials, no hash, only allowed query params), with a new allowedQueryParams option. Relative URLs still throw.

Dependencies

• Updated @base-ui/react 1.9.0, @tabler/icons-react 3.49.0, @vercel/connect 2.4.1, tailwind-merge 3.7.0, @types/node 24.19.2 (kept on 24 to match engines).
• Removed unused playwright-core and class-variance-authority.

Design system

• One Button (components/button.tsx, no cva), plus shared cardClass, inputClass, focusRing, Notice, and ExternalLink in components/ui.tsx.
• Arbitrary values went from 41 to 1 (the sidebar height).
• Tokens: repeated literals aliased, one green, badge colors registered as utilities, unused tokens removed.
• Contrast: badge text is now at least 4.6:1 (was as low as 2.5:1). Chart series that share these colors are slightly darker.
• Recordings and console share the @4xl two-column breakpoint. The recordings list is 24rem wide.
• Accessibility: calendar arrow keys work (the day ref is now attached), and event viewer rows are keyboard buttons.
• Removed dead animation classes, dark: classes, unused props, and the provenance comments.

One component per file

• components/ui/: generic primitives (button, badge, tooltip, notice, popover, calendar) and shared class strings in styles.ts.
• components/dashboard/: cards, grid, bar list, charts, data table, date filter.
• components/console/: one file per console card. console-store.ts is unchanged.
• app/(dashboard)/_sections/: one file per dashboard section. page.tsx goes from 584 to 133 lines and console-app.tsx from 679 to 66.
• Removed SegmentedLinks, props no caller passes, and exports nobody imports. Compiled CSS is byte-identical and screenshots match before and after the split.

Forkability

• Branding lives in lib/site.ts (name, tagline, links).
• Engagement labels are built from ENGAGED_MS and QUICK_EXIT_MS, so they match the SQL.

Docs

• README: screenshot up top, corrected sign-in mode and required variables, a "Customize it" section (branding plus 6 steps to add a widget), and a troubleshooting table with the collector's error codes.
• SDK README: all options documented, one schema reference for events and recordings.
• CONTRIBUTING holds the rules. AGENTS.md links to it. .env.example matches the README.

Test plan

• npm run typecheck, npm test (97 tests), and npm run build pass
• Verified locally with npm run dev: dashboard, console, and recordings at 1440 and 1280px, the console at 600px, both sign-in tabs, date picker keyboard navigation
• Dashboard queries unchanged apart from the shared engagement constants
• Workspace picker after Vercel Connect (needs the OAuth flow)
• Phone widths below 600px

Screenshots

Dashboard, before and after. Badge text and chart series are darker for contrast, and cards use one ring edge. Shot on the synthetic demo_events data.

Before	After

public/overview.jpg is refreshed in this PR so the README matches the new colors.

🤖 Generated with Claude Code