4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T4ec,"use client"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { ShareBarList, ShareBarListContent, ShareBarListFill, ShareBarListItem, ShareBarListLabel, ShareBarListValue, } from "@/components/share-bar-list"; const segments = [ { label: "Returning visitors", share: 54 }, { label: "New visitors", share: 41 }, { label: "Logged-in users", share: 5 }, ] as const; export function AudienceMix() { return ( Audience mix Session split by familiarity in the last 12 months. {segments.map((row) => ( {row.label} {row.share}% ))} ); } 51:T4f2,"use client"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { ShareBarList, ShareBarListContent, ShareBarListFill, ShareBarListItem, ShareBarListLabel, ShareBarListValue, } from "@/components/share-bar-list"; const browsers = [ { label: "Chrome", share: 58 }, { label: "Safari", share: 22 }, { label: "Edge", share: 9 }, { label: "Firefox", share: 7 }, { label: "Other", share: 4 }, ] as const; export function BrowserShare() { return ( Browsers Share of sessions by primary browser family. {browsers.map((row) => ( {row.label} {row.share}% ))} ); } 52:T8ae,"use client"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; import { StatusIndicator } from "@/components/../../components/indicator"; import { ShareBarList, ShareBarListContent, ShareBarListFill, ShareBarListItem, ShareBarListLabel, ShareBarListValue, } from "@/components/share-bar-list"; const devices = [ { label: "Mobile", share: 65 }, { label: "Desktop", share: 33 }, { label: "Tablet", share: 2 }, ] as const; export function OnlineNow() { return (

94 In the last 5 minutes.

{devices.map((d) => ( {d.label} {d.share}% ))} ); } 53:Tbef,"use client"; import { cn } from "@/lib/utils"; import * as React from "react"; const BAR_COLOR = "var(--chart-2)"; type ShareBarListItemContextValue = { value: number; }; const ShareBarListItemContext = React.createContext(null); function useShareBarListItemContext(component: string) { const ctx = React.useContext(ShareBarListItemContext); if (!ctx) { throw new Error( `\`${component}\` must be used within \`ShareBarListItem\`.` ); } return ctx; } function ShareBarList({ className, ...props }: React.ComponentProps<"ul">) { return (

{children}

); } function ShareBarListLabel({ className, ...props }: React.ComponentProps<"span">) { return ( ); } function ShareBarListValue({ className, ...props }: React.ComponentProps<"span">) { return ( ); } function ShareBarListFill({ className, style, ...props }: React.ComponentProps<"div">) { const { value } = useShareBarListItemContext("ShareBarListFill"); const borderMixPercent = Math.min(100, Math.max(36, value * 1.75)); const borderRightColor = `color-mix(in srgb, ${BAR_COLOR} ${borderMixPercent}%, transparent)`; const fillStartColor = `color-mix(in srgb, ${BAR_COLOR} 4%, transparent)`; const fillEndColor = `color-mix(in srgb, ${BAR_COLOR} 36%, transparent)`; const backgroundImage = `linear-gradient(to right, ${fillStartColor}, ${fillEndColor})`; return (

); } export { ShareBarList, ShareBarListContent, ShareBarListFill, ShareBarListItem, ShareBarListLabel, ShareBarListValue, }; 54:Tcc6,import { formatInteger } from "@/lib/formater"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; const FLAGPACK_BASE = "https://flag.vercel.app"; const rows = [ { code: "US", visits: 6120, delta: 5.2 }, { code: "DE", visits: 2840, delta: 8.1 }, { code: "GB", visits: 1960, delta: -1.4 }, { code: "FR", visits: 1420, delta: 3.6 }, { code: "CA", visits: 1180, delta: 0.9 }, { code: "NL", visits: 890, delta: 12.2 }, ] as const; const regionNames = new Intl.DisplayNames(["en"], { type: "region" }); function flagUrl(countryCode: string) { return `${FLAGPACK_BASE}/s/${countryCode.toUpperCase()}.svg`; } export function TopCountries() { return ( Top countries Top countries in the last 12 months. Top countries by visits with year-over-year change. Country Visits Change {rows.map((row) => ( {`Flag

{regionNames.of(row.code) ?? row.code} {formatInteger(row.visits)} {row.delta > 0 ? "+" : ""} {row.delta}% ))}

); } 55:Tacb,import { formatInteger } from "@/lib/formater"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; const rows = [ { path: "/", visits: 18_420, delta: 4.1 }, { path: "/pricing", visits: 6280, delta: 12.4 }, { path: "/blog/product-updates", visits: 4110, delta: -2.0 }, { path: "/docs/getting-started", visits: 3920, delta: 6.8 }, { path: "/changelog", visits: 2150, delta: 0.4 }, ] as const; export function TopPages() { return ( Top pages First page in session, ranked by visits. Top landing pages by visits with year-over-year change. Path Visits Change {rows.map((row) => ( {row.path} {formatInteger(row.visits)} {row.delta > 0 ? "+" : ""} {row.delta}% ))}

); } 56:T916,import { formatInteger } from "@/lib/formater"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; const rows = [ { host: "news.ycombinator.com", sessions: 1420 }, { host: "t.co", sessions: 980 }, { host: "github.com", sessions: 760 }, { host: "producthunt.com", sessions: 540 }, { host: "reddit.com", sessions: 410 }, ] as const; export function TopReferrers() { return ( Top referrers External sites sending the most attributed sessions. Top referrer domains by attributed sessions. Host Sessions {rows.map((row) => ( {row.host} {formatInteger(row.sessions)} ))}

); } 57:T687,"use client"; import { formatCompactNumber } from "@/lib/formater"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { ShareBarList, ShareBarListContent, ShareBarListFill, ShareBarListItem, ShareBarListLabel, ShareBarListValue, } from "@/components/share-bar-list"; const chartData = [ { source: "Organic search", sessions: 4120 }, { source: "Direct", sessions: 2890 }, { source: "Referral", sessions: 1640 }, { source: "Paid social", sessions: 980 }, { source: "Email", sessions: 620 }, ] as const; const maxSessions = Math.max(...chartData.map((d) => d.sessions)); function barWidthPercent(sessions: number) { if (maxSessions <= 0) { return 0; } return (sessions / maxSessions) * 75; } export function TrafficSourcesChart() { return ( Sessions by source Attributed sessions in the last 12 months. {chartData.map((row) => ( {row.source} {formatCompactNumber(row.sessions)} ))} ); } 58:Tced,"use client"; import { useId } from "react"; import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; import { formatInteger } from "@/lib/formater"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; const chartData = [ { month: "January", visitors: 555 }, { month: "February", visitors: 904 }, { month: "March", visitors: 727 }, { month: "April", visitors: 801 }, { month: "May", visitors: 942 }, { month: "June", visitors: 1048 }, { month: "July", visitors: 702 }, { month: "August", visitors: 1103 }, { month: "September", visitors: 879 }, { month: "October", visitors: 1046 }, { month: "November", visitors: 1407 }, { month: "December", visitors: 548 }, ]; const totalVisitors = chartData.reduce((sum, row) => sum + row.visitors, 0); const chartConfig = { visitors: { label: "Visitors", color: "var(--chart-2)", }, } satisfies ChartConfig; export function VisitorsChart() { const gradientId = `visitors-area-${useId().replace(/:/g, "")}`; return (

{formatInteger(totalVisitors)} Total visitors in the last 12 months.

vs prior 12 months String(value).slice(0, 3)} tickLine={false} tickMargin={8} /> } cursor={{ stroke: "var(--color-visitors)", strokeDasharray: "3 3", strokeLinecap: "round", }} wrapperStyle={{ outline: "none" }} /> ); } 59:T6d6,import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; const vitals = [ { label: "LCP", name: "Largest Contentful Paint", value: "1.9s", delta: 120, deltaLabel: "faster vs prior month", suffix: "ms", }, { label: "INP", name: "Interaction to Next Paint", value: "142ms", delta: 18, deltaLabel: "faster vs prior month", suffix: "ms", }, { label: "CLS", name: "Cumulative Layout Shift", value: "0.04", delta: 0.07, deltaLabel: "lower vs prior month", suffix: "", }, ] as const; export function WebVitals() { return ( Core Web Vitals Field experience on real sessions, measured at the origin.

{v.label}

{v.name}

{v.value}

{v.deltaLabel}

); } 5a:T13a3,"use client"; import { cn } from "@/lib/utils"; import * as React from "react"; import { Badge } from "@/components/ui/badge"; type DeltaIconVariant = "default" | "trend" | "arrow"; type DeltaVariant = "default" | "badge"; type DeltaContextValue = { value: number; }; const DeltaContext = React.createContext(null); function useDeltaValue() { const context = React.useContext(DeltaContext); if (!context) { throw new Error( "DeltaIcon and DeltaValue must be used inside a `Delta` component." ); } return context.value; } function Delta({ className, value, variant = "default", ...props }: React.ComponentProps<"div"> & { value: number; variant?: DeltaVariant; }) { return ( {variant === "badge" ? ( 0 ? "bg-emerald-500/10 text-emerald-500" : "bg-red-500/10 text-red-500", className )} data-slot="delta" variant="secondary" {...(props as React.ComponentProps)} /> ) : (

0 ? "text-emerald-600 dark:text-emerald-400" : "", value < 0 ? "text-rose-600 dark:text-rose-400" : "", className )} data-slot="delta" {...props} /> )} ); } function FilledShell({ value, children, }: { value: number; children: React.ReactNode; }) { return ( 0 && "bg-emerald-500", value < 0 && "bg-red-500", (!value || value === 0) && "bg-muted-foreground" )} data-slot="delta-icon" > {children} ); } function DeltaIcon({ variant = "default", filled = false, className, ...props }: Omit, "fill"> & { variant?: DeltaIconVariant; filled?: boolean; }) { const resolvedValue = useDeltaValue(); const mergedClassName = cn(className); const shell = (node: React.ReactElement) => filled ? {node} : node; const slotProps = filled ? {} : { "data-slot": "delta-icon" as const }; if (!resolvedValue || resolvedValue === 0) { return shell( ); } if (resolvedValue > 0) { if (variant === "trend") { return shell( ); } if (variant === "arrow") { return shell( ); } return shell( ); } if (variant === "trend") { return shell( ); } if (variant === "arrow") { return shell( ); } return shell( ); } function DeltaValue({ className, precision = 1, suffix = "%", absolute = true, ...props }: React.ComponentProps<"span"> & { precision?: number; suffix?: string; absolute?: boolean; }) { const resolvedValue = useDeltaValue(); const formattedValue = ( absolute ? Math.abs(resolvedValue) : resolvedValue ).toFixed(precision); return ( {formattedValue} {suffix} ); } export { Delta, DeltaIcon, DeltaValue }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@efferd","registryDependencies":["badge","button","card","chart","table","tooltip","@efferd/app-shell-5","@efferd/formater"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/dashboard/5/audience-mix.tsx","content":"$50","type":"registry:component"},{"path":"registry/blocks/dashboard/5/browser-share.tsx","content":"$51","type":"registry:component"},{"path":"registry/blocks/dashboard/5/dashboard.tsx","content":"import { AudienceMix } from \"@/components/audience-mix\";\nimport { BrowserShare } from \"@/components/browser-share\";\nimport { OnlineNow } from \"@/components/online-now\";\nimport { TopCountries } from \"@/components/top-countries\";\nimport { TopPages } from \"@/components/top-pages\";\nimport { TopReferrers } from \"@/components/top-referrers\";\nimport { TrafficSourcesChart } from \"@/components/traffic-sources-chart\";\nimport { VisitorsChart } from \"@/components/visitors-chart\";\nimport { WebVitals } from \"@/components/web-vitals\";\n\nexport function Dashboard() {\n\treturn (\n\t\t

\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t

\n\t);\n}\n","type":"registry:component"},{"path":"registry/blocks/dashboard/5/online-now.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/dashboard/5/share-bar-list.tsx","content":"$53","type":"registry:component"},{"path":"registry/blocks/dashboard/5/top-countries.tsx","content":"$54","type":"registry:component"},{"path":"registry/blocks/dashboard/5/top-pages.tsx","content":"$55","type":"registry:component"},{"path":"registry/blocks/dashboard/5/top-referrers.tsx","content":"$56","type":"registry:component"},{"path":"registry/blocks/dashboard/5/traffic-sources-chart.tsx","content":"$57","type":"registry:component"},{"path":"registry/blocks/dashboard/5/visitors-chart.tsx","content":"$58","type":"registry:component"},{"path":"registry/blocks/dashboard/5/web-vitals.tsx","content":"$59","type":"registry:component"},{"path":"registry/blocks/dashboard/delta.tsx","content":"$5a","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]