@xenide-io/the-old-ui-theme 0.2.6 → 0.2.9

package/src/components/sections/ChartShowcase.tsx

@@ -0,0 +1,190 @@
+import {
+  HogTrendLineChart,
+  InsightDoughnutChart,
+  InsightHorizontalBarChart,
+  InsightPolarAreaChart,
+  InsightStackedBarChart,
+  InsightVerticalBarChart,
+} from "@/components/charts";
+import { DashboardWell, InsightShell, InsightShellHeader } from "@/components/dashboard";
+import { ShowcaseWrapper } from "@/components/ui";
+
+export default function ChartShowcase() {
+  const code = `import { HogTrendLineChart, InsightDoughnutChart, InsightHorizontalBarChart, InsightPolarAreaChart, InsightStackedBarChart, InsightVerticalBarChart } from "the-old-ui";
+import { DashboardWell, InsightShell, InsightShellHeader } from "the-old-ui";
+
+<DashboardWell>
+  <div className="grid gap-6 lg:grid-cols-2">
+    <InsightShell className="min-h-0">
+      <InsightShellHeader
+        title="Trends (hog-charts model · canvas + d3-scale)"
+        subtitle={
+          <>
+            Same <code className="ph-kbd">Series</code> shape as PostHog (<code className="ph-kbd">stroke.pattern</code>,
+            <code className="ph-kbd">fill.opacity</code>), 2&nbsp;px round-capped strokes, horizontal grid, dashed
+            crosshair, multi-series hover ring.
+          </>
+        }
+      />
+      <HogTrendLineChart />
+    </InsightShell>
+
+    <InsightShell className="min-h-0">
+      <InsightShellHeader
+        title="Vertical bars (Chart.js)"
+        subtitle={
+          <>
+            Bar charts in PostHog&apos;s UI are also built on <code className="ph-kbd">TimeSeriesBarChart</code> /
+            <code className="ph-kbd">BarChart</code> in hog-charts; this tile uses Chart.js with the same semantic
+            <code className="ph-kbd">--ph-data-*</code> colours.
+          </>
+        }
+      />
+      <InsightVerticalBarChart />
+    </InsightShell>
+
+    <InsightShell className="min-h-0 lg:col-span-2">
+      <InsightShellHeader
+        title="Horizontal bar (Chart.js)"
+        subtitle={
+          <>
+            <code className="ph-kbd">indexAxis: &quot;y&quot;</code> mirrors long-label breakdowns (URLs, flags, cohorts).
+          </>
+        }
+      />
+      <InsightHorizontalBarChart />
+    </InsightShell>
+
+    <InsightShell className="min-h-0 lg:col-span-2">
+      <InsightShellHeader
+        title="Stacked breakdown (Chart.js)"
+        subtitle={
+          <>
+            Multiple datasets with <code className="ph-kbd">stacked: true</code> — analogous to multi-series bar
+            layouts in insights.
+          </>
+        }
+      />
+      <InsightStackedBarChart />
+    </InsightShell>
+
+    <InsightShell className="min-h-0">
+      <InsightShellHeader
+        title="Doughnut (Chart.js)"
+        subtitle={
+          <>
+            <code className="ph-kbd">ArcElement</code> + <code className="ph-kbd">cutout</code> for donut slices;
+            legend and tooltip use the same CSS-variable palette.
+          </>
+        }
+      />
+      <InsightDoughnutChart />
+    </InsightShell>
+
+    <InsightShell className="min-h-0">
+      <InsightShellHeader
+        title="Polar area (Chart.js)"
+        subtitle={
+          <>
+            <code className="ph-kbd">RadialLinearScale</code> for spoke grid lines; useful for compact multi-metric
+            comparisons.
+          </>
+        }
+      />
+      <InsightPolarAreaChart />
+    </InsightShell>
+  </div>
+</DashboardWell>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Charts (PostHog-style)"
+      description="In the open-source PostHog app, most product-analytics trend lines and areas are drawn with hog-charts — Canvas 2D plus D3 scales. Chart.js remains for some chart types."
+      code={code}
+      filename="ChartExample.tsx"
+    >
+      <DashboardWell>
+        <div className="grid gap-6 lg:grid-cols-2">
+          <InsightShell className="min-h-0">
+            <InsightShellHeader
+              title="Trends (hog-charts model · canvas + d3-scale)"
+              subtitle={
+                <>
+                  Same <code className="ph-kbd">Series</code> shape as PostHog (<code className="ph-kbd">stroke.pattern</code>,
+                  <code className="ph-kbd">fill.opacity</code>), 2&nbsp;px round-capped strokes, horizontal grid, dashed
+                  crosshair, multi-series hover ring.
+                </>
+              }
+            />
+            <HogTrendLineChart />
+          </InsightShell>
+
+          <InsightShell className="min-h-0">
+            <InsightShellHeader
+              title="Vertical bars (Chart.js)"
+              subtitle={
+                <>
+                  Bar charts in PostHog&apos;s UI are also built on <code className="ph-kbd">TimeSeriesBarChart</code> /
+                  <code className="ph-kbd">BarChart</code> in hog-charts; this tile uses Chart.js with the same semantic
+                  <code className="ph-kbd">--ph-data-*</code> colours.
+                </>
+              }
+            />
+            <InsightVerticalBarChart />
+          </InsightShell>
+
+          <InsightShell className="min-h-0 lg:col-span-2">
+            <InsightShellHeader
+              title="Horizontal bar (Chart.js)"
+              subtitle={
+                <>
+                  <code className="ph-kbd">indexAxis: &quot;y&quot;</code> mirrors long-label breakdowns (URLs, flags, cohorts).
+                </>
+              }
+            />
+            <InsightHorizontalBarChart />
+          </InsightShell>
+
+          <InsightShell className="min-h-0 lg:col-span-2">
+            <InsightShellHeader
+              title="Stacked breakdown (Chart.js)"
+              subtitle={
+                <>
+                  Multiple datasets with <code className="ph-kbd">stacked: true</code> — analogous to multi-series bar
+                  layouts in insights.
+                </>
+              }
+            />
+            <InsightStackedBarChart />
+          </InsightShell>
+
+          <InsightShell className="min-h-0">
+            <InsightShellHeader
+              title="Doughnut (Chart.js)"
+              subtitle={
+                <>
+                  <code className="ph-kbd">ArcElement</code> + <code className="ph-kbd">cutout</code> for donut slices;
+                  legend and tooltip use the same CSS-variable palette.
+                </>
+              }
+            />
+            <InsightDoughnutChart />
+          </InsightShell>
+
+          <InsightShell className="min-h-0">
+            <InsightShellHeader
+              title="Polar area (Chart.js)"
+              subtitle={
+                <>
+                  <code className="ph-kbd">RadialLinearScale</code> for spoke grid lines; useful for compact multi-metric
+                  comparisons.
+                </>
+              }
+            />
+            <InsightPolarAreaChart />
+          </InsightShell>
+        </div>
+      </DashboardWell>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/CodeMockupShowcase.tsx

@@ -0,0 +1,56 @@
+import { IconQueryEditor } from "@/components/icons";
+import { ComponentDocs, ShowcaseWrapper, Terminal } from "@/components/ui";
+
+export default function CodeMockupShowcase() {
+  const code = `import { Terminal } from "the-old-ui";
+
+<Terminal
+  title="sandbox · posthog-wizard"
+  lines={[
+    { text: "❯ bun add posthog-js", color: "text-neutral-600" },
+    { text: "● added posthog-js@1...", color: "text-emerald-400" },
+    { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
+  ]}
+/>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Terminal capture"
+      description="Terminal and replay shells for documentation, demos, and embedded developer flows."
+      code={code}
+      filename="TerminalExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "title", type: "string", description: "Window title in the header." },
+            { name: "lines", type: "Array<{ text; color? }>", description: "Terminal lines to render." },
+            { name: "children", type: "ReactNode", description: "Custom content instead of lines." },
+          ]}
+        />
+      }
+    >
+      <div className="space-y-10">
+        <Terminal
+          title="sandbox · posthog-wizard"
+          lines={[
+            { text: "❯ bun add posthog-js", color: "text-neutral-600" },
+            { text: "● added posthog-js@1...", color: "text-emerald-400" },
+            { text: "❯ POSTHOG_KEY=...", color: "text-neutral-600" },
+          ]}
+        />
+
+        <div className="rounded-xl border border-ph-border shadow-ph-md">
+          <header className="relative flex items-center justify-center border-b border-ph-border px-10 py-3 text-[11px] font-semibold text-ph-mutedtext">
+            <span className="absolute left-5 top-4 h-px w-[88%] rounded-full bg-ph-border opacity-70" />
+            Replay preview
+          </header>
+          <div className="flex flex-col items-center gap-5 bg-ph-toolbar px-6 py-14 text-ph-subtle">
+            <IconQueryEditor className="h-14 w-14 opacity-50" />
+            <p className="text-center font-semibold text-ph-ink">Session snapshot shell</p>
+            <p className="max-w-xs text-center text-xs">Mirrors bordered frame around insight embeds rather than DaisyUI mocks.</p>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/ColorPalette.tsx

@@ -0,0 +1,117 @@
+import type { CSSProperties } from "react";
+import { ShowcaseWrapper } from "@/components/ui";
+
+const brandSurface: { label: string; token: string; style: CSSProperties; textClass: string }[] = [
+  { label: "Brand orange", token: "--ph-accent", style: { background: "var(--ph-accent)" }, textClass: "text-white" },
+  { label: "Brand blue", token: "--ph-blue", style: { background: "var(--ph-blue)" }, textClass: "text-white" },
+  { label: "Purple accent", token: "--ph-purple", style: { background: "var(--ph-purple)" }, textClass: "text-white" },
+  { label: "Canvas (3000-50)", token: "--ph-canvas", style: { background: "var(--ph-canvas)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
+  { label: "Muted surface", token: "--ph-muted", style: { background: "var(--ph-muted)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
+  { label: "White surface", token: "--ph-surface", style: { background: "var(--ph-surface)" }, textClass: "text-ph-ink ring-1 ring-inset ring-ph-border" },
+  { label: "Border", token: "--ph-border", style: { background: "var(--ph-border)" }, textClass: "text-ph-ink" },
+  { label: "Success", token: "--ph-success", style: { background: "var(--ph-success)" }, textClass: "text-white" },
+  { label: "Warning", token: "--ph-warning", style: { background: "var(--ph-warning)" }, textClass: "text-white" },
+  { label: "Danger", token: "--ph-danger", style: { background: "var(--ph-danger)" }, textClass: "text-white" },
+  { label: "Info", token: "--ph-info", style: { background: "var(--ph-info)" }, textClass: "text-white" },
+];
+
+const dataSeries = [1, 2, 3, 4, 5, 6, 7].map((n) => ({
+  label: `Data ${n}`,
+  token: `--ph-data-${n}`,
+  style: { background: `var(--ph-data-${n})` } as CSSProperties,
+  textClass: "text-white",
+}));
+
+const productRail = [
+  { label: "Session replay", token: "--ph-product-session-replay", style: { background: "var(--ph-product-session-replay)" } as CSSProperties },
+  { label: "Product analytics", token: "--ph-product-product-analytics", style: { background: "var(--ph-product-product-analytics)" } as CSSProperties },
+  { label: "Data pipeline", token: "--ph-product-data-pipeline", style: { background: "var(--ph-product-data-pipeline)" } as CSSProperties },
+  { label: "Feature flags", token: "--ph-product-feature-flags", style: { background: "var(--ph-product-feature-flags)" } as CSSProperties },
+  { label: "Experiments", token: "--ph-product-experiments", style: { background: "var(--ph-product-experiments)" } as CSSProperties },
+  { label: "Data warehouse", token: "--ph-product-data-warehouse", style: { background: "var(--ph-product-data-warehouse)" } as CSSProperties },
+  { label: "Surveys", token: "--ph-product-surveys", style: { background: "var(--ph-product-surveys)" } as CSSProperties },
+].map((row) => ({ ...row, textClass: "text-white" }));
+
+function SwatchGrid({
+  title,
+  description,
+  items,
+}: {
+  title: string;
+  description: string;
+  items: { label: string; token: string; style: CSSProperties; textClass: string }[];
+}) {
+  return (
+    <div>
+      <h3 className="mb-1 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">{title}</h3>
+      <p className="mb-3 text-sm text-ph-subtle">{description}</p>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+        {items.map((c) => (
+          <div
+            key={c.token}
+            className={`rounded-[var(--ph-radius-app)] p-5 ${c.textClass}`}
+            style={{
+              ...c.style,
+              boxShadow: "var(--ph-shadow-elevation-3000)",
+            }}
+          >
+            <p className="text-sm font-semibold">{c.label}</p>
+            <p className="mt-1 font-mono text-[11px] opacity-90">{c.token}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function ColorPalette() {
+  const code = `/* CSS variables update with the active theme */
+
+// Brand & surfaces
+background: var(--ph-accent);     // Brand orange
+background: var(--ph-canvas);     // Canvas
+background: var(--ph-surface);    // White surface
+border-color: var(--ph-border);   // Hairline borders
+
+// Semantic status
+color: var(--ph-success);         // Success green
+color: var(--ph-danger);          // Danger red
+color: var(--ph-warning);         // Warning amber
+color: var(--ph-info);            // Info blue
+
+// Data series (charts)
+background: var(--ph-data-1);     // Primary
+background: var(--ph-data-2);     // Secondary
+// ... up to ph-data-7
+
+// Product rail
+background: var(--ph-product-session-replay);
+background: var(--ph-product-product-analytics);`;
+
+  return (
+    <ShowcaseWrapper
+      title="Colour tokens"
+      description="Tokens update with the Theme select in the header — surfaces, accents, chart series, and product rail colours all swap together."
+      code={code}
+      filename="Tokens.css"
+    >
+      <div className="space-y-10">
+        <SwatchGrid
+          title="Brand & surfaces"
+          description="Core UI chrome and semantic status hues."
+          items={brandSurface}
+        />
+        <SwatchGrid
+          title="Insight data series"
+          description="Default trend / breakdown palette."
+          items={dataSeries}
+        />
+        <SwatchGrid
+          title="Product rail"
+          description="Saturated nav / marketing tiles."
+          items={productRail}
+        />
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/CommandPaletteShowcase.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { Button, CommandPalette, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
+import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "@/components/icons";
+
+export default function CommandPaletteShowcase() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const items = [
+    { id: "1", label: "Go to Dashboard", shortcut: "Cmd+D", icon: <IconHome className="h-5 w-5" />, onSelect: () => {} },
+    { id: "2", label: "Search Events", shortcut: "Cmd+K", icon: <IconSearch className="h-5 w-5" />, onSelect: () => {} },
+    { id: "3", label: "Run Query", shortcut: "Cmd+R", icon: <IconBolt className="h-5 w-5" />, onSelect: () => {} },
+    { id: "4", label: "Settings", shortcut: "Cmd+,", icon: <IconTuning className="h-5 w-5" />, onSelect: () => {} },
+    { id: "5", label: "Profile", icon: <IconPerson className="h-5 w-5" />, onSelect: () => {} },
+  ];
+
+  const code = `import { Button, CommandPalette } from "the-old-ui";
+import { IconSearch, IconBolt, IconTuning, IconHome, IconPerson } from "the-old-ui";
+
+<div className="ph-panel">
+  <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
+  <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Command Palette"
+      description="Application command launcher with controlled open state and typed item actions."
+      code={code}
+      filename="CommandPaletteExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "items", type: "{ id; label; shortcut?; icon?; onSelect }[]", description: "Commands shown in the palette." },
+            { name: "isOpen", type: "boolean", description: "Controls palette visibility." },
+            { name: "onClose", type: "() => void", description: "Called by escape, backdrop, or selection." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel">
+        <Button onClick={() => setIsOpen(true)}>Open Command Palette</Button>
+        <CommandPalette items={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/CountdownShowcase.tsx

@@ -0,0 +1,43 @@
+import { ShowcaseWrapper } from "@/components/ui";
+
+export default function CountdownShowcase() {
+  const code = `
+
+<div className="ph-panel">
+  <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
+  <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
+    {[
+      { v: "04", label: "Days" },
+      { v: "12", label: "Hrs" },
+      { v: "33", label: "Min" },
+      { v: "09", label: "Sec" },
+    ].map(({ v, label }) => (
+      <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
+        <span className="text-3xl font-bold tabular-nums">{v}</span>
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
+      </div>
+    ))}
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Countdown motif" code={code} filename="CountdownExample.tsx">
+      <div className="ph-panel">
+        <p className="mb-6 text-sm text-ph-subtle">Static split — swap for synced timers once you plug in real experiment deadlines.</p>
+        <div className="flex flex-wrap justify-center gap-3 text-ph-ink sm:justify-start">
+          {[
+            { v: "04", label: "Days" },
+            { v: "12", label: "Hrs" },
+            { v: "33", label: "Min" },
+            { v: "09", label: "Sec" },
+          ].map(({ v, label }) => (
+            <div key={label} className="flex min-w-[4.75rem] flex-col items-center rounded-xl border border-ph-border bg-ph-surface px-4 py-3 shadow-ph">
+              <span className="text-3xl font-bold tabular-nums">{v}</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-ph-mutedtext">{label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/DashboardShowcase.tsx

@@ -0,0 +1,191 @@
+import { IconAreaChart, IconArrowUp, IconCohort, IconPlus } from "@/components/icons";
+import {
+  DashboardFiltersBar,
+  DashboardGrid,
+  DashboardInsightPlaceholder,
+  DashboardKpiCard,
+  DashboardToolbar,
+  DashboardWell,
+  InsightMiniCard,
+} from "@/components/dashboard";
+import { Button, ShowcaseWrapper } from "@/components/ui";
+
+const insightCards = [
+  {
+    title: "Weekly active users",
+    subtitle: "Last 14 days · product analytics",
+    ribbonColour: "var(--ph-product-product-analytics)",
+    heights: [40, 55, 48, 62, 58, 70, 52, 45, 68, 72, 65, 80, 75, 88],
+  },
+  {
+    title: "Session length",
+    subtitle: "Median minutes · replay cohort",
+    ribbonColour: "var(--ph-product-session-replay)",
+    heights: [52, 48, 45, 50, 55, 60, 58, 54, 50, 48, 55, 60, 58, 62],
+  },
+  {
+    title: "Flag evaluations",
+    subtitle: "Per minute · infrastructure",
+    ribbonColour: "var(--ph-product-feature-flags)",
+    heights: [30, 35, 42, 38, 45, 50, 48, 52, 55, 58, 54, 50, 48, 55],
+  },
+] as const;
+
+export default function DashboardShowcase() {
+  const code = `import { IconAreaChart, IconArrowUp, IconCohort, IconPlus } from "the-old-ui";
+import { DashboardFiltersBar, DashboardGrid, DashboardInsightPlaceholder, DashboardKpiCard, DashboardToolbar, DashboardWell, InsightMiniCard } from "the-old-ui";
+import { Button } from "the-old-ui";
+
+<DashboardWell className="space-y-6">
+  <DashboardToolbar
+    title="Marketing overview"
+    description="Mock layout · spacing and elevation only"
+    actions={
+      <Button variant="secondary" size="sm">
+        Edit layout
+      </Button>
+    }
+  />
+
+  <DashboardFiltersBar className="text-xs">
+    <span className="font-semibold text-ph-ink">Last 14 days</span>
+    <span className="text-ph-mutedtext">·</span>
+    <span>Global cohort</span>
+    <Button variant="ghost" size="xs" className="rounded-md px-2">
+      Breakdown
+    </Button>
+  </DashboardFiltersBar>
+
+  <div className="grid gap-4 md:grid-cols-3">
+    <DashboardKpiCard
+      icon={<IconArrowUp className="text-ph-brand" aria-hidden />}
+      label="Event volume"
+      value={<span className="text-ph-brand tabular-nums">2.6M</span>}
+      footer={
+        <>
+          <span className="font-semibold text-emerald-700">▲ 21%</span> vs previous window
+        </>
+      }
+    />
+    <DashboardKpiCard
+      icon={<IconCohort className="text-ph-blue" aria-hidden />}
+      label="Weekly active users"
+      value={<span className="text-ph-blue tabular-nums">12.8K</span>}
+      footer="Stable vs trailing 28-day baseline"
+    />
+    <DashboardKpiCard
+      icon={<IconAreaChart className="text-ph-purple" aria-hidden />}
+      label="Experiments exposing"
+      value={<span className="text-ph-purple tabular-nums">4</span>}
+      footer="Flags + multivariates counted"
+    />
+  </div>
+
+  <DashboardGrid>
+    {insightCards.map((card) => (
+      <InsightMiniCard
+        key={card.title}
+        title={card.title}
+        subtitle={card.subtitle}
+        ribbonColour={card.ribbonColour}
+        heights={card.heights}
+      />
+    ))}
+  </DashboardGrid>
+
+  <div className="grid gap-4 md:grid-cols-2">
+    <InsightMiniCard
+      title="Activation funnel"
+      subtitle="Mock · drop-off by step"
+      ribbonColour="var(--ph-product-experiments)"
+      heights={[88, 72, 58, 44, 32, 28, 24, 22, 20, 18, 16, 15, 14, 13]}
+    />
+    <DashboardInsightPlaceholder>
+      <IconPlus className="h-8 w-8 text-ph-mutedtext group-hover:text-ph-brand" aria-hidden />
+      <span className="text-sm font-medium text-ph-subtle group-hover:text-ph-ink">Add insight</span>
+      <span className="max-w-[14rem] text-xs text-ph-mutedtext">Opens the same picker pattern your app uses for new tiles.</span>
+    </DashboardInsightPlaceholder>
+  </div>
+</DashboardWell>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Dashboard shells"
+      description="Inset canvas (DashboardWell) and raised insight tiles (InsightShell / InsightMiniCard) mirror how the PostHog app frames dashboards."
+      code={code}
+      filename="DashboardExample.tsx"
+    >
+      <DashboardWell className="space-y-6">
+        <DashboardToolbar
+          title="Marketing overview"
+          description="Mock layout · spacing and elevation only"
+          actions={
+            <Button variant="secondary" size="sm">
+              Edit layout
+            </Button>
+          }
+        />
+
+        <DashboardFiltersBar className="text-xs">
+          <span className="font-semibold text-ph-ink">Last 14 days</span>
+          <span className="text-ph-mutedtext">·</span>
+          <span>Global cohort</span>
+          <Button variant="ghost" size="xs" className="rounded-md px-2">
+            Breakdown
+          </Button>
+        </DashboardFiltersBar>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          <DashboardKpiCard
+            icon={<IconArrowUp className="text-ph-brand" aria-hidden />}
+            label="Event volume"
+            value={<span className="text-ph-brand tabular-nums">2.6M</span>}
+            footer={
+              <>
+                <span className="font-semibold text-emerald-700">▲ 21%</span> vs previous window
+              </>
+            }
+          />
+          <DashboardKpiCard
+            icon={<IconCohort className="text-ph-blue" aria-hidden />}
+            label="Weekly active users"
+            value={<span className="text-ph-blue tabular-nums">12.8K</span>}
+            footer="Stable vs trailing 28-day baseline"
+          />
+          <DashboardKpiCard
+            icon={<IconAreaChart className="text-ph-purple" aria-hidden />}
+            label="Experiments exposing"
+            value={<span className="text-ph-purple tabular-nums">4</span>}
+            footer="Flags + multivariates counted"
+          />
+        </div>
+
+        <DashboardGrid>
+          {insightCards.map((card) => (
+            <InsightMiniCard
+              key={card.title}
+              title={card.title}
+              subtitle={card.subtitle}
+              ribbonColour={card.ribbonColour}
+              heights={card.heights}
+            />
+          ))}
+        </DashboardGrid>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <InsightMiniCard
+            title="Activation funnel"
+            subtitle="Mock · drop-off by step"
+            ribbonColour="var(--ph-product-experiments)"
+            heights={[88, 72, 58, 44, 32, 28, 24, 22, 20, 18, 16, 15, 14, 13]}
+          />
+          <DashboardInsightPlaceholder>
+            <IconPlus className="h-8 w-8 text-ph-mutedtext group-hover:text-ph-brand" aria-hidden />
+            <span className="text-sm font-medium text-ph-subtle group-hover:text-ph-ink">Add insight</span>
+            <span className="max-w-[14rem] text-xs text-ph-mutedtext">Opens the same picker pattern your app uses for new tiles.</span>
+          </DashboardInsightPlaceholder>
+        </div>
+      </DashboardWell>
+    </ShowcaseWrapper>
+  );
+}