50: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"] 51: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"] 52:T19ed,"use client"; import { useEffect, useState } from "react"; import styles from "./ai-state.module.css"; export interface InsightPoint { label?: string; value: number } export interface InsightSeries { id: string; label: string; data: readonly InsightPoint[]; color?: string; formatValue?: (value: number) => string } export interface Insight { id: string; title: string; description?: string; series: readonly InsightSeries[]; ctaLabel?: string; onCta?: () => void } export interface InsightCardsProps { insights: readonly Insight[]; initialPage?: number; className?: string } function Chart({ series }: { series: readonly InsightSeries[] }) { const [index, setIndex] = useState(null); const count = Math.max(0, ...series.map((item) => item.data.length)); const values = series.flatMap((item) => item.data.map((point) => point.value)); const min = Math.min(...values, 0); const max = Math.max(...values, 1); const range = max - min || 1; const x = (i: number) => count < 2 ? 50 : (i / (count - 1)) * 100; const y = (value: number) => 94 - ((value - min) / range) * 78; const selected = index === null ? null : Math.min(index, count - 1); function move(next: number) { setIndex(Math.max(0, Math.min(count - 1, next))); } if (count === 0) { return

No chart data

; } return (

{ const rect = event.currentTarget.getBoundingClientRect(); move(Math.round(((event.clientX - rect.left) / rect.width) * (count - 1))); }} onPointerDown={(event) => { const rect = event.currentTarget.getBoundingClientRect(); move(Math.round(((event.clientX - rect.left) / rect.width) * (count - 1))); }} onPointerLeave={() => setIndex(null)} onKeyDown={(event) => { if (event.key === "ArrowLeft") { event.preventDefault(); move((selected ?? count - 1) - 1); } if (event.key === "ArrowRight") { event.preventDefault(); move((selected ?? -1) + 1); } }} className="absolute inset-0 cursor-crosshair focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring" /> {selected !== null ?

{series[0]?.data[selected]?.label ?? `Point ${selected + 1}`}

{series.map((item) =>

); } export function InsightCards({ insights, initialPage = 0, className = "" }: InsightCardsProps) { const [page, setPage] = useState(() => Math.max(0, Math.min(initialPage, Math.max(0, insights.length - 1)))); useEffect(() => setPage((current) => Math.min(current, Math.max(0, insights.length - 1))), [insights.length]); if (insights.length === 0) return null; const insight = insights[page] ?? insights[0]; const move = (amount: number) => setPage((current) => (current + amount + insights.length) % insights.length); return
Insights {page + 1}/{insights.length}
{insight.description ?
{insight.description}
: null}
{insight.title}
{insight.series.map((item) =>
; } 4f:["$","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,["$","$L50",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ai/InsightCards.tsx","content":"$52","type":"registry:component","target":"@components/ai/InsightCards.tsx"}],"className":"h-[70svh] min-h-80"}]]}]