@hanzo/dashboard 0.2.0 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 hanzo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,245 @@
+# @hanzo/dashboard
+
+The reusable **dashboard layer on [`@hanzo/gui`](https://github.com/hanzoai/gui)**.
+A set of composable, honest, reduced-motion-guarded dashboard primitives extracted
+from the Hanzo Cloud Console so every Hanzo app — console, admin surfaces,
+hanzo.team, desktop dashboards — builds the **same** dashboard system instead of
+re-implementing it.
+
+Everything here is **pure**: data comes in via props or a loader you supply, actions
+are callbacks, and `@hanzo/gui` is a peer dependency (this layer sits _on_ it, never
+forks it). No app-specific API imports.
+
+```bash
+pnpm add @hanzo/dashboard @hanzo/gui @hanzogui/lucide-icons-2
+```
+
+```tsx
+import '@hanzo/dashboard/dashboard.css' // once — ships the motion keyframes
+import { Overview, Kpi, Sparkline, Landing, Pipeline } from '@hanzo/dashboard'
+```
+
+> `dashboard.css` carries the loading shimmer, live-feed pulse, fade-up entrance, and
+> the deploy-pipeline animations — **every one reduced-motion-guarded** (→ static).
+> The count-up + live sparkline motion is driven in JS and gated on
+> `prefers-reduced-motion` in the hooks.
+
+---
+
+## Charts — the ONE way to draw a trend / series / share / distribution
+
+Monochrome SVG (dependency-free) that themes to the shell. Honest by construction: a
+`Sparkline` with < 2 points renders nothing; `Donut`/`Bars` with no positive value
+render an em-dash. Callers pass REAL series — these never fabricate data.
+
+| Export | What it draws |
+| --- | --- |
+| `Sparkline` | A fixed-size mini trend (for stat tiles). |
+| `Line` | A value over time (line + hover tooltip). |
+| `Columns` | A value over time (vertical bars + hover). |
+| `Donut` | Categorical share (optional legend, center slot). |
+| `Bars` | A ranked distribution (horizontal, token-native). |
+| `useContainerWidth` | Measure a container for responsive SVG. |
+| `CHART_PALETTE`, `CHART_OTHER` | The categorical hues. |
+| types `ChartPoint`, `Slice` | Data shapes. |
+
+```tsx
+<Line data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 30 }]} formatValue={(v) => `${v}`} />
+<Donut slices={[{ label: 'zen', value: 60 }, { label: 'gpt', value: 40 }]} legend />
+<Sparkline values={[3, 5, 4, 9, 12]} />
+```
+
+## Motion — pure math + rAF/interval hooks
+
+Unit-testable pure functions plus the thin browser hooks that drive them; every hook
+self-cleans on unmount (no leaked frames/timers).
+
+- Pure: `easeOutCubic`, `countUpValue`, `progress`, `pushSample`, `shouldTick`, `effectiveInterval`.
+- Hooks: `useCountUp`, `usePoll`, `useReducedMotion`, `usePageHidden`.
+
+```tsx
+const value = useCountUp(target, /* enabled */ true) // snaps to target under reduced motion
+const { tick, bump } = usePoll(15_000)                // paused when interval ≤ 0
+```
+
+## Overview — the videogame-like living dashboard
+
+Declare a product's tiles + a REAL data loader; `Overview` renders + animates the
+board and keeps it alive (one throttled poll loop, hidden-tab-paused, range selector,
+count-up on change). A product is added by writing a config, never overview UI.
+
+```tsx
+import { Overview, type OverviewConfig } from '@hanzo/dashboard'
+import { Cpu } from '@hanzogui/lucide-icons-2'
+
+const config: OverviewConfig = {
+  id: 'gpus', title: 'GPUs',
+  live: { pollMs: 15_000, countUp: true },
+  rows: [
+    [{ tile: 'metric', key: 'active', label: 'Active', icon: Cpu }],
+    [{ tile: 'timeseries', key: 'usage', title: 'Usage over time' },
+     { tile: 'distribution', key: 'byModel', title: 'By model' }],
+    [{ tile: 'activity' }, { tile: 'health' }],
+  ],
+  load: async ({ range }) => fromMyApi(await MyApi.overview(range)), // → OverviewData
+}
+
+<Overview config={config} isGlobalAdmin={amAdmin} />
+```
+
+The loader returns the normalized **`OverviewData`** (`kpi` / `series` / `distribution`
+/ `activity` / `alerts` / `health` maps). A missing slice renders an honest empty tile
+— you can over-declare tiles a slow backend hasn't filled yet. First load shows a
+spinner; a failure shows a retry card; a background refetch never blanks a board that
+already has real data.
+
+### Composable primitives (use without the driver)
+
+The tiles are also standalone, direct-props components — the valuable, reusable core:
+
+| Export | Props (data in, view out) |
+| --- | --- |
+| `Kpi` | `label`, `value` (null → "—"), `unit`, `deltaPct`, `series`, `icon`, `color`, `caption`, `animate`, `loading` |
+| `Feed` | `items: OverviewEvent[]`, `title`, `empty`, `loading` (virtualizes past a viewport) |
+| `Board` | `items: OverviewHealth[]`, `title`, `empty`, `loading` (health tally + dots) |
+| `Tile` | Render one declared tile spec against `OverviewData`. |
+| `Panel`, `SkeletonBar`, `EmptyPanel`, `PanelSpinner`, `LiveDot` | Shared chrome. |
+
+```tsx
+<Kpi label="Requests" value={32_412} unit="count" deltaPct={12} series={[10,14,22,31]} icon={Zap} />
+```
+
+Plus the pure tile logic (`formatMetric`, `deltaOf`, `hasTrend`, `mergeActivity`,
+`windowRows`, `statusColor`/`healthColor`/`severityColor`, `selectKpi`/`selectSeries`/
+`selectDistribution`, …) and the `OverviewConfig` / `OverviewData` / tile types.
+
+## Landing — the polished product landing kit
+
+Compose a `LandingConfig` and render `<Landing>` to get a hero + live count-up metrics
+row + an interactive code-sample block + a resources rail. Parts are exported too
+(`Hero`, `Metrics`, `Samples`, `Rail`).
+
+```tsx
+import { Landing, type LandingConfig } from '@hanzo/dashboard'
+
+const config: LandingConfig = {
+  productId: 'embeddings', title: 'Embeddings',
+  tagline: 'Vector search over your data.',
+  brandName: 'Hanzo Cloud', docsUrl: 'https://docs.hanzo.ai', docsProduct: 'embeddings',
+  primary: { label: 'Create collection', onPress: onCreate },
+  loadMetrics: async () => [{ key: 'vectors', label: 'Vectors', value: 1_240, series: [...] }],
+  samples: [{ lang: 'curl', label: 'cURL', code: 'curl https://api.hanzo.ai/v1/embeddings ...' }],
+}
+
+<Landing config={config}>{/* the product's own real content */}</Landing>
+```
+
+All links (docs / quickstart / examples / API / support) derive from `config.docsUrl`,
+so a Lux/Zoo console links to ITS OWN surfaces. Brand + accent come from the config
+(`brandName`, `accent`) — no hardcoded brand. Pure link helpers are exported
+(`apexFromDocs`, `apiBaseFromDocs`, `landingDocsUrl`, `standardResources`, `supportMailto`).
+
+## Pipeline — the deploy-stage line
+
+A small, presentational animated pipeline (Queued → Building → Deploying → Live, or any
+custom stages). Driven by a `stages` prop; derive it from a real status string with the
+pure `pipelineModel`, and poll to pass fresh stages.
+
+```tsx
+import { Pipeline, pipelineModel } from '@hanzo/dashboard'
+
+const model = pipelineModel(app.status, furthestReached) // furthest tracked across polls
+<Pipeline stages={model.stages} label={model.label} />
+```
+
+Pure helpers: `pipelineModel`, `pipelinePhase`, `stageIndex`, `isTerminalPhase`,
+`pipelineTone`, `PIPELINE_STAGES`, and the `PipelineStage`/`PipelineModel`/`StageState`
+types. Completed stages fill with a check, the current stage pulses, the active leg
+flows, a failure turns the reached stage red — all reduced-motion-guarded.
+
+---
+
+## Provenance — how each export maps back to the console
+
+Extracted (and generalized: no `~/lib/*` / `~/config` imports) from
+`~/work/hanzo/console2`:
+
+| `@hanzo/dashboard` | console2 source |
+| --- | --- |
+| `charts/Charts` (`Sparkline`/`Line`/`Columns`/`Donut`/`Bars`) | `src/components/ui/Charts.tsx` (`Sparkline`/`LineChart`/`BarChart`/`Donut`/`BarRows`) |
+| `motion/motion` + `motion/hooks` | `src/components/products/overview/living/{motion,hooks}.ts` |
+| `overview/{config,logic}` | `.../overview/living/{config,logic}.ts` |
+| `overview/primitives` (`Kpi`/`Feed`/`Board`) + `overview/tiles` (`Tile`) | `.../overview/living/tiles.tsx` (the tile views) |
+| `overview/Overview` | `.../overview/living/LivingOverview.tsx` |
+| `landing/*` (`Landing`/`Hero`/`Metrics`/`Samples`/`Rail`) | `src/components/products/landing/*` (`ProductLanding`/`LandingHero`/`LandingMetrics`/`CodeSamples`/`ResourceRail`) |
+| `pipeline/{pipeline,Pipeline}` | `src/components/products/paas/{railway.ts,RailwayDeploy.tsx}` |
+
+### Generalizations made during extraction
+
+- **Icons** are consumer-supplied (`IconComponent` = a `size`/`color` icon), replacing
+  the console's `ProductIcon` from its registry.
+- **`Overview`** drops `~/lib/api` `ApiError`, `useIsGlobalAdmin`, `PageHeader`,
+  `FadeIn`, and `States` — `isGlobalAdmin` is now a prop and the header/fade/error
+  chrome is inlined (self-contained).
+- **Landing** takes brand/docs/support/discord/accent from `LandingConfig` (was
+  `~/config`). `LandingHero` inlines the hero graphic + accent button (was
+  `../inference/parts`).
+- **Pipeline** takes a `stages` prop and drops the console's `PaasApi.getApp`
+  self-poll — the consumer polls and passes fresh stages.
+- Naming is de-branded and single-word: `LivingOverview` → `Overview`,
+  `RailwayDeploy` → `Pipeline`, `ProductLanding` → `Landing`, `LineChart`/`BarChart`/
+  `BarRows` → `Line`/`Columns`/`Bars`. CSS classes `hz-rail-*` → `hz-pipe-*`.
+
+---
+
+## Follow-up: swapping console2 onto this package (a later pass)
+
+console2 is **untouched** this pass. To consume `@hanzo/dashboard` back in console2,
+per component:
+
+1. **Charts** — delete `src/components/ui/Charts.tsx`; re-export from the package
+   (`export { Sparkline, Line as LineChart, Columns as BarChart, Bars as BarRows, Donut, useContainerWidth, CHART_PALETTE, CHART_OTHER } from '@hanzo/dashboard'`)
+   or update call sites to the new names. `~/components/products/inference/parts`,
+   `landing/*`, and `overview/living/tiles` import `Charts` — the alias keeps them working.
+2. **Motion** — replace `overview/living/{motion,hooks}.ts` with re-exports from
+   `@hanzo/dashboard`; `RailwayDeploy` + `LandingMetrics` import these hooks.
+3. **Overview** — replace `overview/living/{config,logic,tiles,LivingOverview}` with
+   thin wrappers over the package. The console's `LivingOverviewModule` keeps its
+   registry-router wrapper and passes `isGlobalAdmin={useIsGlobalAdmin()}` +
+   maps `ApiError` into the driver's caught error. `PageHeader`/`FadeIn`/`States`
+   stay in console (they're used elsewhere) — the driver now inlines its own.
+4. **Landing** — replace `products/landing/*` with the package; the console builds a
+   `LandingConfig` with `docsUrl: config.docsUrl`, `brandName: config.brandName`,
+   `discordUrl: 'https://discord.gg/CJCyAsm9Vr'`. `LandingHero`'s console-specific
+   `HeroGraphic`/`AccentButton` (from `inference/parts`) are now inlined in the package.
+5. **Pipeline** — swap `paas/RailwayDeploy.tsx` for `<Pipeline>`; the console owns the
+   `PaasApi.getApp` poll (`usePoll` + `PaasApi`) and the monotonic `furthest` state,
+   calling `pipelineModel(status, furthest)` and passing `.stages` + `.label`.
+
+Once swapped, the console2 tests that already cover the pure logic
+(`motion.test.ts`, `logic.test.ts`, `railway.test.ts`, `landing/logic.test.ts`) move
+here (or re-run against the re-exports) so coverage follows the code.
+
+## Honest about what didn't extract cleanly
+
+- The console's **`config.ts` registry** (`LivingOverviewConfig.load` adapters:
+  `fromCloudUsage`, `fromAdminOverview`, `fromFunctions`, `healthFromApps`) is
+  **product/API-specific** and stays in console2 — it's the data half. This package is
+  the view half; the `OverviewData` contract is the seam between them.
+- Console tile icons come from the console's product registry; here they're plain
+  `IconComponent` props (the consumer supplies them).
+- The `Pipeline` self-poll was PaaS-coupled and is intentionally dropped — the small,
+  minor pipeline primitive is presentational only.
+
+## Build
+
+```bash
+pnpm typecheck   # tsc --noEmit (strict) — clean
+pnpm build       # tsc → dist (proof; the package ships src)
+```
+
+The package **ships `src`** (source-only, like `@hanzo/data`); the consumer's bundler
+transpiles it, and the `@hanzo/gui` shorthand style props type-check against the real
+token unions via `gui.config.ts` + `gui.d.ts`.
+
+License: MIT · Hanzo AI, Inc. — see [LICENSE.md](../../LICENSE.md). HIP-0137 (`hanzoai/hips`).

package/package.json

@@ -1,65 +1,53 @@
 {
   "name": "@hanzo/dashboard",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
-  "description": "Hanzo Base tenant-management screens \u2014 host-agnostic @hanzo/gui v7 React surface, shared by the standalone dashboard (base.hanzo.ai) and the embedded console module (console.hanzo.ai).",
+  "description": "Hanzo Dashboard — the reusable dashboard layer on @hanzo/gui: monochrome SVG charts, a videogame-like LivingOverview (count-up KPIs, live sparklines, streaming feed, health), the ProductLanding kit, and a Pipeline deploy animation. Pure (data via props/loaders), typed, reduced-motion-guarded. Extracted from the Hanzo Cloud Console so every Hanzo app composes ONE dashboard system.",
   "exports": {
     ".": {
-      "types": "./src/lib/index.ts",
-      "default": "./src/lib/index.ts"
-    }
-  },
-  "main": "./src/lib/index.ts",
-  "module": "./src/lib/index.ts",
-  "types": "./src/lib/index.ts",
-  "sideEffects": false,
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./dashboard.css": "./src/dashboard.css"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
-    "src/lib"
+    "src"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
-    "@hanzo/gui": ">=7.2.2",
-    "react": ">=19",
-    "react-dom": ">=19"
+    "@hanzo/gui": ">=8.3.5",
+    "@hanzogui/lucide-icons-2": "^8.3.5",
+    "react": ">=19.2.8"
   },
   "devDependencies": {
-    "@hanzo/gui": "^7.2.2",
-    "@hanzo/iam": "^0.9.4",
-    "@hanzogui/config": "^7.0.0",
-    "@hanzogui/vite-plugin": "7.0.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^5.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-native-web": "^0.21.0",
-    "react-router-dom": "^7.0.2",
-    "typescript": "^5.7.2",
-    "vite": "^7.0.0"
-  },
-  "engines": {
-    "node": ">=20"
+    "@hanzo/gui": "8.3.5",
+    "@hanzogui/config": "8.3.5",
+    "@hanzogui/core": "8.3.5",
+    "@hanzogui/lucide-icons-2": "8.3.5",
+    "@hanzogui/web": "8.3.5",
+    "@types/react": "19.2.18",
+    "react": "19.2.8",
+    "typescript": "7.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "overrides": {
-    "@hanzogui/vite-plugin": "7.0.0",
-    "@hanzogui/web": "102.0.0-rc.41-hanzoai.1",
-    "@hanzogui/core": "102.0.0-rc.41-hanzoai.1",
-    "@hanzogui/themes": "102.0.0-rc.41-hanzoai.1"
-  },
-  "resolutions": {
-    "@hanzogui/vite-plugin": "7.0.0",
-    "@hanzogui/web": "102.0.0-rc.41-hanzoai.1",
-    "@hanzogui/core": "102.0.0-rc.41-hanzoai.1",
-    "@hanzogui/themes": "102.0.0-rc.41-hanzoai.1"
+  "license": "MIT",
+  "author": "Hanzo AI <dev@hanzo.ai>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/ui.git",
+    "directory": "pkg/dashboard"
   },
-  "license": "BSD-3-Clause",
-  "author": "Hanzo AI <dev@hanzo.ai>"
-}
+  "scripts": {
+    "tc": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc --outDir dist --declaration --emitDeclarationOnly false --module ESNext --moduleResolution bundler --jsx react-jsx --esModuleInterop true --skipLibCheck true --sourceMap true",
+    "test": "bun test"
+  }
+}

package/src/analytics/index.ts

@@ -0,0 +1,20 @@
+// Analytics views, built once and mounted by analytics.hanzo.ai and by a project's
+// page in the platform: the same components over the same source.
+export { WebAnalytics } from './web'
+export { ProductAnalytics, JOURNEY } from './product'
+export {
+  analyticsSource,
+  windowOf,
+  RANGES,
+  ZONE,
+  SourceError,
+  type Source,
+  type Range,
+  type Stats,
+  type Series,
+  type Point,
+  type Dimension,
+  type Step,
+  type FunnelStep,
+  type Website,
+} from './source'

package/src/analytics/parts.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { Button, Text, XStack, YStack } from '@hanzo/gui'
+import { EmptyPanel, Panel, PanelSpinner } from '../overview/primitives'
+import { RANGES, type Point, type Range } from './source'
+
+/** What a load is: loading, its value, or why there is none. */
+export type Load<T> = { state: 'loading' } | { state: 'ok'; value: T } | { state: 'error'; error: string }
+
+/** Run `read` whenever `deps` change, and answer its Load. */
+export function useLoad<T>(read: () => Promise<T>, deps: unknown[]): Load<T> {
+  const [load, setLoad] = useState<Load<T>>({ state: 'loading' })
+  useEffect(() => {
+    let live = true
+    setLoad({ state: 'loading' })
+    read()
+      .then((value) => live && setLoad({ state: 'ok', value }))
+      .catch((err: unknown) => live && setLoad({ state: 'error', error: err instanceof Error ? err.message : String(err) }))
+    return () => {
+      live = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+  return load
+}
+
+/** The range switch every view carries. */
+export function RangeSwitch({ range, onRange }: { range: Range; onRange: (r: Range) => void }) {
+  return (
+    <XStack gap="$1" role="tablist" aria-label="Range">
+      {RANGES.map((r) => (
+        <Button
+          key={r}
+          size="$2"
+          role="tab"
+          aria-selected={r === range}
+          theme={r === range ? 'accent' : undefined}
+          chromeless={r !== range}
+          onPress={() => onRange(r)}
+        >
+          {r}
+        </Button>
+      ))}
+    </XStack>
+  )
+}
+
+/** A panel whose body is a Load: spinner, error note, or the rendered value. */
+export function Loaded<T>({ title, load, empty, children, right, minW = 300 }: {
+  title: string
+  load: Load<T>
+  empty?: (value: T) => boolean
+  children: (value: T) => ReactNode
+  right?: ReactNode
+  minW?: number
+}) {
+  return (
+    <Panel title={title} right={right} minW={minW} flex={1}>
+      {load.state === 'loading' ? (
+        <PanelSpinner />
+      ) : load.state === 'error' ? (
+        <EmptyPanel note={load.error} />
+      ) : empty?.(load.value) ? (
+        <EmptyPanel note="Nothing in this range yet." />
+      ) : (
+        children(load.value)
+      )}
+    </Panel>
+  )
+}
+
+/** A ranked list: label, a bar proportional to the leader, and the count. */
+export function TopList({ rows, format = (x) => x || '(none)' }: { rows: Point[]; format?: (x: string) => string }) {
+  const max = Math.max(1, ...rows.map((r) => r.y))
+  return (
+    <YStack gap="$2">
+      {rows.map((r) => (
+        <XStack key={r.x} gap="$3" items="center">
+          <YStack flex={1} minW={0} position="relative" height={24} justify="center">
+            <YStack position="absolute" l={0} t={0} b={0} width={`${Math.max(2, (r.y / max) * 100)}%`} bg="$color3" rounded="$2" />
+            <Text px="$2" fontSize="$2" color="$color12" numberOfLines={1}>
+              {format(r.x)}
+            </Text>
+          </YStack>
+          <Text width={56} fontSize="$2" color="$color12" fontWeight="600" text="right">
+            {r.y.toLocaleString()}
+          </Text>
+        </XStack>
+      ))}
+    </YStack>
+  )
+}

package/src/analytics/product.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { Text, XStack, YStack } from '@hanzo/gui'
+import { Loaded, RangeSwitch, TopList, useLoad } from './parts'
+import type { FunnelStep, Range, Source, Step } from './source'
+
+/** The sign-up journey, in @hanzo/events names (HIP-1190 §6.1). */
+export const JOURNEY: Step[] = [
+  { type: 'event', value: 'signup_viewed' },
+  { type: 'event', value: 'signup_submitted' },
+  { type: 'event', value: 'signup_completed' },
+  { type: 'event', value: 'first_action' },
+  { type: 'event', value: 'checkout_started' },
+  { type: 'event', value: 'order_completed' },
+]
+
+function Funnel({ steps }: { steps: FunnelStep[] }) {
+  const first = steps[0]?.visitors || 0
+  return (
+    <YStack gap="$2">
+      {steps.map((s, i) => (
+        <XStack key={s.value} gap="$3" items="center">
+          <Text width={150} fontSize="$2" color="$color11" numberOfLines={1}>
+            {i + 1}. {s.value}
+          </Text>
+          <YStack flex={1} height={12} bg="$color3" rounded="$2" overflow="hidden">
+            <YStack height={12} width={`${first ? Math.max(1, (s.visitors / first) * 100) : 0}%`} bg="$color9" rounded="$2" />
+          </YStack>
+          <Text width={64} fontSize="$2" color="$color12" fontWeight="600" text="right">
+            {s.visitors.toLocaleString()}
+          </Text>
+          <Text width={56} fontSize="$2" color="$color10" text="right">
+            {i === 0 || !steps[i - 1].visitors ? '' : `${Math.round((s.visitors / steps[i - 1].visitors) * 100)}%`}
+          </Text>
+        </XStack>
+      ))}
+    </YStack>
+  )
+}
+
+/**
+ * Product analytics for one website: what people did (the named events) and how
+ * far they got through the sign-up journey, one visitor followed across steps.
+ */
+export function ProductAnalytics({ source, website, steps = JOURNEY, initial = '7d' }: { source: Source; website: string; steps?: Step[]; initial?: Range }) {
+  const [range, setRange] = useState<Range>(initial)
+  const funnel = useLoad(() => source.funnel(website, steps, range), [source, website, range, steps])
+  const events = useLoad(() => source.top(website, 'event', range, 20), [source, website, range])
+  return (
+    <YStack gap="$4" width="100%">
+      <XStack justify="space-between" items="center" gap="$3" flexWrap="wrap">
+        <Text fontSize="$6" fontWeight="600" color="$color12">
+          Product analytics
+        </Text>
+        <RangeSwitch range={range} onRange={setRange} />
+      </XStack>
+      <Loaded title="Sign-up journey" load={funnel} empty={(v) => !v.length || !v[0].visitors}>
+        {(v) => <Funnel steps={v} />}
+      </Loaded>
+      <Loaded title="Events" load={events} empty={(v) => !v.length}>
+        {(rows) => <TopList rows={rows} />}
+      </Loaded>
+    </YStack>
+  )
+}