Landing: Tracwell stats charts, sponsor tiers, and a shader footer

.claude/skills/bklit-ui/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: bklit-ui
+description: >
+  Bklit UI charts and data visualization for any project using the @bklit
+  shadcn registry. Install, compose, theme, and animate charts correctly.
+  Triggers when working with @bklitui/ui/charts, @bklit components, data
+  visualization, dashboards, or chart theming. Also invoke manually for
+  chart tasks.
+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
+---
+
+# Bklit UI
+
+Composable chart components for React, distributed via the `@bklit` shadcn registry. Charts are installed as source into the user's project.
+
+> **IMPORTANT:** Run shadcn CLI commands with the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`.
+
+## Current Project Context
+
+```json
+!`npx shadcn@latest info --json`
+```
+
+Use the JSON above for framework, aliases, Tailwind version, installed components, and resolved paths. Confirm the `@bklit` registry is configured before adding charts.
+
+## Principles
+
+1. **Install before inventing.** Use `npx shadcn@latest add @bklit/<chart>` — charts are registry components, not hand-rolled SVG.
+2. **Compose, don't flatten.** Root chart → `Grid` → series → axes → `ChartTooltip`. See [composition.md](./rules/composition.md).
+3. **Theme with tokens.** Use `chartCssVars` and `--chart-*` variables — never hardcode one-off colors. See [theming.md](./rules/theming.md).
+4. **Read the doc page first.** Each chart has props, data shape, and examples at `https://ui.bklit.com/docs/components/<slug>`.
+5. **Browse variants.** Gallery: `https://ui.bklit.com/charts/<slug>` — Studio: `https://ui.bklit.com/studio?chart=<slug>`.
+
+## Critical Rules
+
+These rules are **always enforced**. Each links to Incorrect/Correct examples.
+
+### Composition → [composition.md](./rules/composition.md)
+
+- **Series and axes live inside the root chart** — `LineChart`, `BarChart`, `AreaChart`, etc.
+- **One root per chart** — use `ComposedChart` for mixed series types.
+- **Grid before series** so lines/bars render above grid lines.
+- **`ChartTooltip` as a chart child** — required for crosshair and hover context.
+
+### Theming → [theming.md](./rules/theming.md)
+
+- **Use `chartCssVars`** from `@bklitui/ui/charts` instead of raw `"var(--chart-…)"` strings.
+- **Series palette:** `--chart-1` … `--chart-5` for multi-series charts.
+- **Tooltip surfaces:** `bg-popover text-popover-foreground` — avoids white-on-white in light mode.
+
+### Animation → [animation.md](./rules/animation.md)
+
+- **Default duration ~1100ms** for cartesian enter animations unless the doc specifies otherwise.
+- **Replay:** change `revealSignature` or remount with a new `key`.
+- **Live charts:** use `paused` on `LiveLineChart` to debug without stopping the rAF loop manually.
+
+### Tooltips → [tooltips.md](./rules/tooltips.md)
+
+- **Custom content via `ChartTooltip` `content` prop** or children patterns from docs.
+- **`indicatorColor` function** for candlestick / dynamic crosshair colors.
+- **Custom indicators:** use `useChart()` — do not track mouse globally outside chart context.
+
+### Installation → [installation.md](./rules/installation.md)
+
+- **Require `@bklit` registry** in `components.json`.
+- **Install:** `npx shadcn@latest add @bklit/<slug>`.
+- **Let the CLI install peer dependencies** — do not pin `@visx/*` / `motion` manually unless resolving a conflict.
+
+## Chart Catalog
+
+| Slug | Use when | Install | Docs | Gallery |
+|------|----------|---------|------|---------|
+| `area-chart` | Trends with filled regions under lines | `@bklit/area-chart` | [/docs/components/area-chart](https://ui.bklit.com/docs/components/area-chart) | [/charts/area-chart](https://ui.bklit.com/charts/area-chart) |
+| `bar-chart` | Category comparisons, stacked or grouped bars | `@bklit/bar-chart` | [/docs/components/bar-chart](https://ui.bklit.com/docs/components/bar-chart) | [/charts/bar-chart](https://ui.bklit.com/charts/bar-chart) |
+| `line-chart` | Time series, multi-line trends, markers | `@bklit/line-chart` | [/docs/components/line-chart](https://ui.bklit.com/docs/components/line-chart) | [/charts/line-chart](https://ui.bklit.com/charts/line-chart) |
+| `live-line-chart` | Streaming / real-time data | `@bklit/live-line-chart` | [/docs/components/live-line-chart](https://ui.bklit.com/docs/components/live-line-chart) | [/charts/live-line-chart](https://ui.bklit.com/charts/live-line-chart) |
+| `composed-chart` | Mixed bar + line (or similar) on one axis | `@bklit/composed-chart` | [/docs/components/composed-chart](https://ui.bklit.com/docs/components/composed-chart) | [/charts/composed-chart](https://ui.bklit.com/charts/composed-chart) |
+| `scatter-chart` | Correlation, distribution, bubble sizing | `@bklit/scatter-chart` | [/docs/components/scatter-chart](https://ui.bklit.com/docs/components/scatter-chart) | [/charts/scatter-chart](https://ui.bklit.com/charts/scatter-chart) |
+| `candlestick-chart` | OHLC financial data, brushes | `@bklit/candlestick-chart` | [/docs/components/candlestick-chart](https://ui.bklit.com/docs/components/candlestick-chart) | [/charts/candlestick-chart](https://ui.bklit.com/charts/candlestick-chart) |
+| `pie-chart` | Part-to-whole slices | `@bklit/pie-chart` | [/docs/components/pie-chart](https://ui.bklit.com/docs/components/pie-chart) | [/charts/pie-chart](https://ui.bklit.com/charts/pie-chart) |
+| `ring-chart` | Donut / ring KPIs | `@bklit/ring-chart` | [/docs/components/ring-chart](https://ui.bklit.com/docs/components/ring-chart) | [/charts/ring-chart](https://ui.bklit.com/charts/ring-chart) |
+| `radar-chart` | Multi-axis comparison | `@bklit/radar-chart` | [/docs/components/radar-chart](https://ui.bklit.com/docs/components/radar-chart) | [/charts/radar-chart](https://ui.bklit.com/charts/radar-chart) |
+| `gauge-chart` | Single-value KPI dial | `@bklit/gauge-chart` | [/docs/components/gauge-chart](https://ui.bklit.com/docs/components/gauge-chart) | [/charts/gauge-chart](https://ui.bklit.com/charts/gauge-chart) |
+| `funnel-chart` | Stage conversion funnels | `@bklit/funnel-chart` | [/docs/components/funnel-chart](https://ui.bklit.com/docs/components/funnel-chart) | [/charts/funnel-chart](https://ui.bklit.com/charts/funnel-chart) |
+| `sankey-chart` | Flow between nodes | `@bklit/sankey-chart` | [/docs/components/sankey-chart](https://ui.bklit.com/docs/components/sankey-chart) | [/charts/sankey-chart](https://ui.bklit.com/charts/sankey-chart) |
+| `choropleth-chart` | Geo regions colored by value | `@bklit/choropleth-chart` | [/docs/components/choropleth-chart](https://ui.bklit.com/docs/components/choropleth-chart) | [/charts/choropleth-chart](https://ui.bklit.com/charts/choropleth-chart) |
+
+## Workflow
+
+1. Run `npx shadcn@latest info --json` — verify `@bklit` registry and aliases.
+2. Pick a chart from the catalog (or ask the user what story the data tells).
+3. Open the doc URL for data shape and props.
+4. If not installed: `npx shadcn@latest add @bklit/<slug>`.
+5. Compose with grid, series, axes, tooltip — apply theming tokens.
+6. Point the user to the gallery or Studio URL for variant inspiration.
+
+## Quick Reference
+
+```bash
+# Project info
+npx shadcn@latest info --json
+
+# Add a chart
+npx shadcn@latest add @bklit/line-chart
+
+# Search registries (if configured)
+npx shadcn@latest search @bklit
+```
+
+```tsx
+import { LineChart, Line, Grid, XAxis, ChartTooltip, chartCssVars } from "@bklitui/ui/charts";
+
+<LineChart data={data} xDataKey="date">
+  <Grid horizontal />
+  <Line dataKey="users" stroke={chartCssVars.linePrimary} />
+  <XAxis />
+  <ChartTooltip />
+</LineChart>
+```
+
+## Utility docs
+
+- Theming: https://ui.bklit.com/docs/theming
+- Grid: https://ui.bklit.com/docs/utility/grid
+- Legend: https://ui.bklit.com/docs/utility/legend
+- Tooltip: https://ui.bklit.com/docs/utility/tooltip
+- Custom indicator: https://ui.bklit.com/docs/utility/custom-indicator
+- useChart: https://ui.bklit.com/docs/utility/use-chart
+
+## Detailed References
+
+- [composition.md](./rules/composition.md)
+- [theming.md](./rules/theming.md)
+- [animation.md](./rules/animation.md)
+- [tooltips.md](./rules/tooltips.md)
+- [installation.md](./rules/installation.md)

.claude/skills/bklit-ui/rules/animation.md

@@ -0,0 +1,42 @@
+# Animation
+
+## Defaults
+
+Most cartesian charts default to ~1100ms enter animation. Bar charts often use staggered reveals (~1.2s total) with easing `cubic-bezier(0.85, 0, 0.15, 1)`.
+
+## Replay enter animations
+
+Pass a changing `revealSignature` (or remount the chart with a new `key`) to replay mount animations after prop changes.
+
+### Correct
+
+```tsx
+const [replayKey, setReplayKey] = useState(0);
+
+<LineChart key={replayKey} data={data} revealSignature={String(replayKey)}>
+  {/* ... */}
+</LineChart>
+
+<button type="button" onClick={() => setReplayKey((k) => k + 1)}>
+  Replay
+</button>
+```
+
+## Live charts
+
+- `LiveLineChart` runs its own animation loop — use `paused` to freeze updates for debugging.
+- Avoid nesting heavy state updates inside the rAF path; pass stable props where possible.
+
+## Reduced motion
+
+Respect `prefers-reduced-motion` when adding custom animation wrappers around charts. Bklit charts handle reduced motion internally for enter transitions.
+
+## Performance
+
+- Prefer CSS/SVG-friendly props over re-creating large data arrays every frame.
+- For streaming data, append points and trim the window instead of replacing the full array when possible.
+
+## Inspiration
+
+Browse animated variants: https://ui.bklit.com/charts/<chart-slug>  
+Tune motion interactively: https://ui.bklit.com/studio?chart=<chart-slug>

.claude/skills/bklit-ui/rules/composition.md

@@ -0,0 +1,57 @@
+# Chart Composition
+
+## Root + children
+
+Charts use a composable API. Always wrap series, axes, and overlays inside the root chart component.
+
+### Incorrect
+
+```tsx
+<div className="h-80">
+  <Line dataKey="users" />
+  <XAxis />
+</div>
+```
+
+### Correct
+
+```tsx
+<LineChart data={data}>
+  <Grid horizontal />
+  <Line dataKey="users" />
+  <XAxis />
+  <ChartTooltip />
+</LineChart>
+```
+
+## Axes and grid
+
+- Put `Grid` before series so lines render on top.
+- Use `XAxis` / `YAxis` as siblings inside the root chart — not outside the chart context.
+- For live streaming charts, use `LiveXAxis` and `LiveYAxis` inside `LiveLineChart`.
+
+## Tooltips and markers
+
+- `ChartTooltip` must be a child of the root chart so it can read hover state.
+- Custom tooltip content receives chart context — prefer `useChart()` when building custom indicators.
+- `ChartMarkers` and marker content render inside `ChartTooltip` when showing event callouts.
+
+## Multi-series charts
+
+- One `Line` / `Bar` / `Area` child per `dataKey`.
+- Use `--chart-1` … `--chart-5` or explicit stroke/fill props for series differentiation.
+- For combined line + bar, use `ComposedChart` instead of nesting unrelated roots.
+
+## Data shape
+
+- Cartesian charts: array of objects; set `xDataKey` on the root (default `"date"`).
+- OHLC: use `CandlestickChart` with `{ date, open, high, low, close }`.
+- Live line: `{ time, value }` points with a separate `value` prop on the root.
+- Sankey / funnel / pie: follow each chart’s doc for node/link or slice shape.
+
+## Docs
+
+- Composition patterns: https://ui.bklit.com/docs/components/line-chart
+- `useChart` hook: https://ui.bklit.com/docs/utility/use-chart
+- Grid: https://ui.bklit.com/docs/utility/grid
+- Legend: https://ui.bklit.com/docs/utility/legend

.claude/skills/bklit-ui/rules/installation.md

@@ -0,0 +1,74 @@
+# Installation
+
+## Prerequisites
+
+Bklit UI is a shadcn registry. Initialize shadcn in the project first:
+
+```bash
+npx shadcn@latest init
+```
+
+## Registry namespace
+
+Add the `@bklit` namespace to `components.json` if it is not already present:
+
+```json
+{
+  "registries": {
+    "@bklit": "https://ui.bklit.com/r/{name}.json"
+  }
+}
+```
+
+New projects scaffolded with Bklit often include this automatically.
+
+## Install a chart
+
+```bash
+npx shadcn@latest add @bklit/line-chart
+```
+
+Replace `line-chart` with any chart slug from the catalog. The CLI copies source into your components directory and installs peer dependencies.
+
+## Verify project context
+
+```bash
+npx shadcn@latest info --json
+```
+
+Use the JSON to confirm framework, aliases, Tailwind version, and which `@bklit` components are already installed.
+
+## Import path
+
+After install, import from the charts entry (path may vary by alias — check `info --json`):
+
+```tsx
+import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@/components/ui/line-chart";
+// or from package re-exports when using the npm package directly:
+import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";
+```
+
+Prefer the import path your project’s shadcn install actually generated.
+
+## Common peer dependencies
+
+| Chart | Typical dependencies |
+|-------|---------------------|
+| line-chart, area-chart | `@visx/curve`, `@visx/shape`, `motion` |
+| bar-chart | `@visx/gradient`, `@visx/pattern`, `@visx/shape`, `motion` |
+| candlestick-chart | `@visx/scale`, `@visx/shape`, `@visx/responsive`, `d3-array`, `motion` |
+| live-line-chart | `@visx/curve`, `@visx/scale`, `@visx/shape`, `@visx/responsive`, `@visx/event`, `d3-array`, `motion` |
+| choropleth-chart | `@visx/geo`, `@visx/responsive`, `@visx/zoom`, `d3-geo`, `topojson-client`, `motion` |
+| sankey-chart | `@visx/gradient`, `@visx/pattern`, `@visx/responsive`, `@visx/sankey`, `motion` |
+| scatter-chart | `d3-scale`, `d3-array`, `motion`, `react-use-measure` |
+| pie-chart, ring-chart | `@visx/responsive`, `@visx/shape`, `motion` |
+| radar-chart | `@visx/responsive`, `d3-shape`, `motion` |
+| funnel-chart | `motion` |
+| gauge-chart | `@visx/responsive`, `motion` |
+
+The CLI installs these when adding a chart — do not guess versions; let `shadcn add` resolve them.
+
+## Docs
+
+- Installation: https://ui.bklit.com/docs/installation
+- Per-chart install tabs: https://ui.bklit.com/docs/components/<slug>

.claude/skills/bklit-ui/rules/theming.md

@@ -0,0 +1,55 @@
+# Theming
+
+## Use chartCssVars
+
+Prefer the typed `chartCssVars` export over raw CSS variable strings.
+
+### Incorrect
+
+```tsx
+<line stroke="var(--chart-crosshair)" />
+<rect fill="var(--chart-indicator-color)" />
+```
+
+### Correct
+
+```tsx
+import { chartCssVars } from "@bklitui/ui/charts";
+
+<line stroke={chartCssVars.crosshair} />
+<rect fill={chartCssVars.indicatorColor} />
+```
+
+## Series colors
+
+- Multi-series: `var(--chart-1)` through `var(--chart-5)` or theme tokens.
+- Line charts: `var(--chart-line-primary)` / `var(--chart-line-secondary)` for default strokes.
+- Do not hardcode hex colors unless the design explicitly requires brand colors outside the theme.
+
+## Tooltip and badge surfaces
+
+Tooltip boxes and live value badges should use shadcn popover tokens so text stays readable in light and dark mode:
+
+```tsx
+// Tooltip content / badges
+className="bg-popover text-popover-foreground"
+```
+
+## Dark mode
+
+Override chart variables in `:root` and `.dark` — do not sprinkle `dark:` on individual chart SVG elements.
+
+```css
+:root {
+  --chart-background: oklch(1 0 0);
+  --chart-grid: oklch(0.9 0 0);
+}
+.dark {
+  --chart-background: oklch(0.145 0.004 285);
+  --chart-grid: oklch(0.25 0 0);
+}
+```
+
+## Docs
+
+- Full theming guide: https://ui.bklit.com/docs/theming