npm - @burdenoff/microfe-brainyrich - Versions diffs - 2026.819.1 → 2026.825.1 - Mend

@burdenoff/microfe-brainyrich 2026.819.1 → 2026.825.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (496) hide show

package/dist/brainyrich/components/viz.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"viz.js","names":[],"sources":["../../../src/brainyrich/components/viz.tsx"],"sourcesContent":["/*\n BrainyRich data-viz + polish kit.\n * @module brainyrich/components/viz\n \n A tokenized, responsive, dark-mode-first visualization + motion kit built on\n * recharts (^2.15) with lightweight, dependency-free CSS motion. Every colour is read from the\n * platform's SEMANTIC CSS variables at runtime (see {@link useVizColors}) so\n * charts always track the active theme and the emerald BrainyRich brand\n * (`--color-action-primary-bg`). No raw hex/rgb literals live in this file.\n \n All chart components are wrapped in a recharts `<ResponsiveContainer>` so they\n * resize with their parent. Motion is tasteful (<=250ms) and disabled under\n * `prefers-reduced-motion`.\n \n Page agents: import from `#brainyrich/components/viz` (or the components\n * barrel). Pass values straight from the real `bra` hooks — this kit only\n renders; it never fabricates data.\n /\nimport { useEffect, useId, useMemo, useState, type CSSProperties, type ReactNode } from 'react';\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n Cell,\n Line,\n LineChart,\n Pie,\n PieChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nfunction cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n\n// ============================================================================\n// Motion primitives (dependency-free, pure CSS — no animation library)\n// ============================================================================\n\n/\n SSR-safe `prefers-reduced-motion` hook. Returns `false` on the server and on\n * the first client render, then subscribes to the media query so all motion in\n * this kit is disabled the moment the user asks for reduced motion.\n /\nfunction prefersReducedMotion(): boolean {\n if (typeof window === 'undefined' \|\| typeof window.matchMedia !== 'function') return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nexport function useReducedMotion(): boolean {\n // Read the current preference lazily at mount (SSR-safe: `false` on the\n // server), then only update via the media-query change listener.\n const [reduced, setReduced] = useState<boolean>(prefersReducedMotion);\n\n useEffect(() => {\n if (typeof window === 'undefined' \|\| typeof window.matchMedia !== 'function') return;\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n\n return reduced;\n}\n\n// Enter animation (translateY + opacity) injected once as a real stylesheet so\n// the keyframes + `.br-fade-in` class exist before the first animated paint.\nconst FADE_IN_STYLE_ID = 'brainyrich-viz-motion';\nconst FADE_IN_CSS = `\n@keyframes br-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: none; }\n}\n.br-fade-in {\n animation: br-fade-in 240ms var(--motion-easing-standard, ease-out) both;\n}\n`;\n\nif (typeof document !== 'undefined' && !document.getElementById(FADE_IN_STYLE_ID)) {\n const el = document.createElement('style');\n el.id = FADE_IN_STYLE_ID;\n el.textContent = FADE_IN_CSS;\n document.head.appendChild(el);\n}\n\n// ============================================================================\n// Token → colour resolution\n// ============================================================================\n//\n// recharts needs concrete colour strings (fills, stroke, gradient stops), so we\n// resolve each semantic CSS variable to its computed value off\n// `document.documentElement` and re-read whenever the theme attribute flips.\n// Consumers NEVER hard-code colours: they name a semantic token here.\n\nconst CORE_TOKENS = {\n brand: '--color-action-primary-bg',\n brandBorder: '--color-action-primary-border',\n grid: '--color-chart-grid',\n axis: '--color-chart-axis',\n positive: '--color-chart-positive',\n negative: '--color-chart-negative',\n success: '--color-status-success',\n error: '--color-status-error',\n warning: '--color-status-warning',\n info: '--color-status-info',\n teal: '--color-accent-teal',\n blue: '--color-accent-blue',\n purple: '--color-accent-purple',\n indigo: '--color-accent-indigo',\n textPrimary: '--color-text-primary',\n textSecondary: '--color-text-secondary',\n surface: '--color-bg-elevated',\n border: '--color-border-subtle',\n} as const;\n\ntype CoreToken = keyof typeof CORE_TOKENS;\n\n/* Ordered categorical palette — emerald brand first, then distinct chart hues. /\nconst PALETTE_VARS = [\n '--color-action-primary-bg',\n '--color-chart-2',\n '--color-chart-3',\n '--color-chart-4',\n '--color-chart-5',\n '--color-chart-6',\n '--color-chart-7',\n '--color-chart-8',\n '--color-chart-9',\n '--color-chart-10',\n '--color-chart-11',\n '--color-chart-12',\n];\n\nexport type VizColors = Record<CoreToken, string> & {\n /* Categorical palette (index 0 = emerald brand). /\n palette: string[];\n /* Resolve any semantic tone name to a concrete colour string. /\n tone: (tone?: VizTone) => string;\n};\n\n/* Named tones a datum may request; falls back to the categorical palette. /\nexport type VizTone =\n \| 'brand'\n \| 'primary'\n \| 'success'\n \| 'positive'\n \| 'error'\n \| 'negative'\n \| 'warning'\n \| 'info'\n \| 'teal'\n \| 'blue'\n \| 'purple'\n \| 'indigo'\n \| 'neutral';\n\nfunction readVar(name: string): string {\n if (typeof window === 'undefined') return `var(${name})`;\n const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n return v \|\| `var(${name})`;\n}\n\n/\n Resolve the semantic viz palette from CSS variables and keep it in sync with\n * the active theme. Returns concrete colour strings for use in recharts props.\n /\nexport function useVizColors(): VizColors {\n const [tick, setTick] = useState(0);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n const rerender = () => setTick((t) => t + 1);\n const obs = new MutationObserver(rerender);\n obs.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme', 'class', 'style'],\n });\n return () => obs.disconnect();\n }, []);\n\n return useMemo(() => {\n void tick; // re-resolve whenever the theme attribute changes\n const core = Object.fromEntries(\n (Object.keys(CORE_TOKENS) as CoreToken[]).map((k) => [k, readVar(CORE_TOKENS[k])])\n ) as Record<CoreToken, string>;\n const palette = PALETTE_VARS.map(readVar);\n\n const tone = (t?: VizTone): string => {\n switch (t) {\n case 'brand':\n case 'primary':\n return core.brand;\n case 'success':\n case 'positive':\n return core.success;\n case 'error':\n case 'negative':\n return core.error;\n case 'warning':\n return core.warning;\n case 'info':\n return core.info;\n case 'teal':\n return core.teal;\n case 'blue':\n return core.blue;\n case 'purple':\n return core.purple;\n case 'indigo':\n return core.indigo;\n case 'neutral':\n return core.textSecondary;\n default:\n return core.brand;\n }\n };\n\n return { ...core, palette, tone };\n }, [tick]);\n}\n\n// ============================================================================\n// Shared chart tooltip (themed — recharts' default is light-only)\n// ============================================================================\n\ninterface TooltipEntry {\n name?: string \| number;\n value?: string \| number;\n color?: string;\n payload?: Record<string, unknown>;\n}\n\nfunction useTooltipStyles(): { wrapper: CSSProperties; label: CSSProperties } {\n const c = useVizColors();\n return {\n wrapper: {\n background: c.surface,\n border: `1px solid ${c.border}`,\n borderRadius: 10,\n padding: '8px 12px',\n color: c.textPrimary,\n fontSize: 12,\n boxShadow: 'var(--shadow-pop, 0 8px 24px rgba(0,0,0,0.35))',\n },\n label: { color: c.textSecondary, marginBottom: 4, fontSize: 11 },\n };\n}\n\nfunction ChartTooltip({\n active,\n payload,\n label,\n valueFormatter,\n}: {\n active?: boolean;\n payload?: TooltipEntry[];\n label?: string \| number;\n valueFormatter?: (v: number) => string;\n}) {\n const styles = useTooltipStyles();\n if (!active \|\| !payload \|\| payload.length === 0) return null;\n return (\n <div style={styles.wrapper} role=\"tooltip\">\n {label !== undefined && label !== '' ? <div style={styles.label}>{label}</div> : null}\n {payload.map((entry, i) => {\n const raw = typeof entry.value === 'number' ? entry.value : Number(entry.value);\n const shown =\n valueFormatter && Number.isFinite(raw) ? valueFormatter(raw) : String(entry.value ?? '');\n return (\n <div key={i} className=\"flex items-center gap-2\">\n {entry.color ? (\n <span\n aria-hidden=\"true\"\n style={{\n width: 8,\n height: 8,\n borderRadius: 9999,\n background: entry.color,\n display: 'inline-block',\n }}\n />\n ) : null}\n {entry.name ? <span style={{ color: styles.label.color }}>{entry.name}:</span> : null}\n <span style={{ fontWeight: 600 }}>{shown}</span>\n </div>\n );\n })}\n </div>\n );\n}\n\n// ============================================================================\n// Motion helpers\n// ============================================================================\n\n/\n Staggered enter animation (translateY + opacity). Fully disabled under\n * `prefers-reduced-motion` (renders a plain element). Use `index` to stagger a\n * list/grid of cards.\n /\nexport function FadeIn({\n children,\n index = 0,\n delay = 0,\n className,\n as: Tag = 'div',\n}: {\n children: ReactNode;\n index?: number;\n delay?: number;\n className?: string;\n as?: 'div' \| 'li' \| 'section';\n}) {\n const reduce = useReducedMotion();\n if (reduce) {\n return <Tag className={className}>{children}</Tag>;\n }\n return (\n <Tag\n className={cn('br-fade-in', className)}\n style={{ animationDelay: `${delay + index 0.04}s` }}\n >\n {children}\n </Tag>\n );\n}\n\n// ============================================================================\n// GlassCard — sanctioned glass/elevation surface with graceful fallback\n// ============================================================================\n\n/*\n Floating/hero surface using the sanctioned glass tokens. Falls back to the\n * standard elevated surface when a glass token is absent (older brand builds).\n /\nexport function GlassCard({\n children,\n className,\n glow = false,\n}: {\n children: ReactNode;\n className?: string;\n /* Add a subtle emerald glow ring. /\n glow?: boolean;\n}) {\n return (\n <div\n className={cn(\n 'rounded-2xl border p-5',\n // Glass tokens with hard fallbacks to always-present semantic tokens.\n 'border-[var(--color-border-glass,var(--color-border-subtle))]',\n 'bg-[var(--color-surface-glass,var(--color-bg-elevated))]',\n 'shadow-[var(--shadow-float,var(--shadow-elevation-3))]',\n 'backdrop-blur-[var(--blur-glass,12px)]',\n glow && 'ring-1 ring-[var(--color-action-primary-border)]/40',\n className\n )}\n >\n {children}\n </div>\n );\n}\n\n// ============================================================================\n// DonutChart\n// ============================================================================\n\nexport interface DonutDatum {\n label: string;\n value: number;\n tone?: VizTone;\n}\n\nexport function DonutChart({\n data,\n centerLabel,\n centerValue,\n legend = true,\n height = 220,\n valueFormatter,\n}: {\n data: DonutDatum[];\n centerLabel?: string;\n centerValue?: string;\n legend?: boolean;\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const rows = data.filter((d) => Number.isFinite(d.value) && d.value > 0);\n\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No data.</p>;\n }\n\n const colorFor = (d: DonutDatum, i: number) =>\n d.tone ? c.tone(d.tone) : c.palette[i % c.palette.length];\n\n return (\n <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:items-center\">\n <div className=\"relative\" style={{ width: '100%', maxWidth: 260, height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <PieChart>\n <Pie\n data={rows}\n dataKey=\"value\"\n nameKey=\"label\"\n innerRadius=\"62%\"\n outerRadius=\"90%\"\n paddingAngle={2}\n stroke=\"transparent\"\n isAnimationActive={!reduce}\n animationDuration={250}\n >\n {rows.map((d, i) => (\n <Cell key={d.label} fill={colorFor(d, i)} />\n ))}\n </Pie>\n <Tooltip content={<ChartTooltip valueFormatter={valueFormatter} />} />\n </PieChart>\n </ResponsiveContainer>\n {centerValue \|\| centerLabel ? (\n <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center\">\n {centerValue ? (\n <span className=\"text-xl font-semibold text-text-primary\">{centerValue}</span>\n ) : null}\n {centerLabel ? (\n <span className=\"text-xs text-text-secondary\">{centerLabel}</span>\n ) : null}\n </div>\n ) : null}\n </div>\n {legend ? (\n <ul className=\"grid flex-1 grid-cols-1 gap-2 sm:grid-cols-2\" aria-label=\"Legend\">\n {rows.map((d, i) => (\n <li key={d.label} className=\"flex items-center gap-2 text-xs\">\n <span\n aria-hidden=\"true\"\n className=\"size-2.5 shrink-0 rounded-full\"\n style={{ background: colorFor(d, i) }}\n />\n <span className=\"truncate text-text-secondary\">{d.label}</span>\n <span className=\"ml-auto font-medium text-text-primary\">\n {valueFormatter ? valueFormatter(d.value) : d.value}\n </span>\n </li>\n ))}\n </ul>\n ) : null}\n </div>\n );\n}\n\n// ============================================================================\n// Sparkline\n// ============================================================================\n\nexport function Sparkline({\n data,\n tone = 'brand',\n height = 40,\n className,\n}: {\n data: number[];\n tone?: VizTone;\n height?: number;\n className?: string;\n}) {\n const c = useVizColors();\n const stroke = c.tone(tone);\n const points = data.filter((n) => Number.isFinite(n));\n const gradientId = `spark-${useId().replace(/:/g, '')}`;\n if (points.length < 2) {\n return <div className={className} style={{ height }} aria-hidden=\"true\" />;\n }\n const chartData = points.map((y, x) => ({ x, y }));\n return (\n <div className={className} style={{ width: '100%', height }} aria-hidden=\"true\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart data={chartData} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={stroke} stopOpacity={0.28} />\n <stop offset=\"100%\" stopColor={stroke} stopOpacity={0} />\n </linearGradient>\n </defs>\n <Area\n type=\"monotone\"\n dataKey=\"y\"\n stroke={stroke}\n strokeWidth={2}\n fill={`url(#${gradientId})`}\n isAnimationActive={false}\n dot={false}\n />\n </AreaChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// ProgressRing — clean SVG radial progress\n// ============================================================================\n\nexport function ProgressRing({\n value,\n label,\n tone = 'brand',\n size = 120,\n strokeWidth = 10,\n}: {\n value: number;\n label?: string;\n tone?: VizTone;\n size?: number;\n strokeWidth?: number;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const pct = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));\n const r = (size - strokeWidth) / 2;\n const circ = 2 Math.PI * r;\n const dash = (pct / 100) * circ;\n const stroke = c.tone(tone);\n const targetOffset = circ - dash;\n // Reduced motion renders filled immediately; otherwise start empty and fill\n // on the next frame so the ring animates from 0 → value via CSS.\n const [dashOffset, setDashOffset] = useState(reduce ? targetOffset : circ);\n\n useEffect(() => {\n const id = requestAnimationFrame(() => setDashOffset(targetOffset));\n return () => cancelAnimationFrame(id);\n }, [targetOffset]);\n\n return (\n <div\n className=\"relative inline-flex items-center justify-center\"\n style={{ width: size, height: size }}\n role=\"progressbar\"\n aria-valuenow={Math.round(pct)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={label ?? 'Progress'}\n >\n <svg width={size} height={size} className=\"-rotate-90\">\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke={c.border}\n strokeWidth={strokeWidth}\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke={stroke}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circ}\n strokeDashoffset={dashOffset}\n style={{ transition: reduce ? 'none' : 'stroke-dashoffset 600ms ease' }}\n />\n </svg>\n <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n <span className=\"text-lg font-semibold text-text-primary\">{Math.round(pct)}%</span>\n {label ? <span className=\"text-[10px] text-text-secondary\">{label}</span> : null}\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// TrendBars — diverging inflow/outflow cashflow bars\n// ============================================================================\n\nexport interface TrendDatum {\n label: string;\n inflow: number;\n outflow: number;\n}\n\nexport function TrendBars({\n data,\n height = 240,\n valueFormatter,\n}: {\n data: TrendDatum[];\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const rows = data.filter((d) => Number.isFinite(d.inflow) && Number.isFinite(d.outflow));\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No cashflow data.</p>;\n }\n // Diverging: inflow up (positive), outflow down (negative).\n const chartData = rows.map((d) => ({\n label: d.label,\n inflow: Math.abs(d.inflow),\n outflow: -Math.abs(d.outflow),\n }));\n\n return (\n <div style={{ width: '100%', height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart\n data={chartData}\n margin={{ top: 8, right: 8, bottom: 0, left: 8 }}\n stackOffset=\"sign\"\n >\n <XAxis\n dataKey=\"label\"\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={{ stroke: c.grid }}\n tickLine={false}\n />\n <YAxis\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={false}\n tickLine={false}\n width={44}\n tickFormatter={(v: number) =>\n valueFormatter ? valueFormatter(Math.abs(v)) : String(Math.abs(v))\n }\n />\n <ReferenceLine y={0} stroke={c.grid} />\n <Tooltip\n cursor={{ fill: c.border, opacity: 0.25 }}\n content={\n <ChartTooltip\n valueFormatter={(v) =>\n valueFormatter ? valueFormatter(Math.abs(v)) : String(Math.abs(v))\n }\n />\n }\n />\n <Bar\n dataKey=\"inflow\"\n name=\"Inflow\"\n fill={c.positive}\n radius={[4, 4, 0, 0]}\n isAnimationActive={!reduce}\n animationDuration={250}\n />\n <Bar\n dataKey=\"outflow\"\n name=\"Outflow\"\n fill={c.negative}\n radius={[0, 0, 4, 4]}\n isAnimationActive={!reduce}\n animationDuration={250}\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// MiniAreaChart — projection with optional dashed target line\n// ============================================================================\n\nexport interface AreaDatum {\n x: string \| number;\n y: number;\n}\n\nexport function MiniAreaChart({\n data,\n target,\n tone = 'brand',\n height = 200,\n valueFormatter,\n}: {\n data: AreaDatum[];\n target?: number;\n tone?: VizTone;\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const stroke = c.tone(tone);\n const rows = data.filter((d) => Number.isFinite(d.y));\n const gradientId = `area-${useId().replace(/:/g, '')}`;\n if (rows.length < 2) {\n return <p className=\"text-sm text-text-secondary\">Not enough data to chart.</p>;\n }\n return (\n <div style={{ width: '100%', height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart data={rows} margin={{ top: 8, right: 8, bottom: 0, left: 8 }}>\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={stroke} stopOpacity={0.3} />\n <stop offset=\"100%\" stopColor={stroke} stopOpacity={0.02} />\n </linearGradient>\n </defs>\n <XAxis\n dataKey=\"x\"\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={{ stroke: c.grid }}\n tickLine={false}\n />\n <YAxis\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={false}\n tickLine={false}\n width={44}\n tickFormatter={(v: number) => (valueFormatter ? valueFormatter(v) : String(v))}\n />\n <Tooltip content={<ChartTooltip valueFormatter={valueFormatter} />} />\n {target !== undefined && Number.isFinite(target) ? (\n <ReferenceLine\n y={target}\n stroke={c.textSecondary}\n strokeDasharray=\"5 4\"\n label={{\n value: valueFormatter ? `Target ${valueFormatter(target)}` : `Target ${target}`,\n position: 'insideTopRight',\n fill: c.textSecondary,\n fontSize: 10,\n }}\n />\n ) : null}\n <Area\n type=\"monotone\"\n dataKey=\"y\"\n stroke={stroke}\n strokeWidth={2}\n fill={`url(#${gradientId})`}\n isAnimationActive={!reduce}\n animationDuration={250}\n dot={false}\n />\n </AreaChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// LifecycleStepper — horizontal proposal/rebalance lifecycle\n// ============================================================================\n\nconst NEGATIVE_TERMINAL = /reject\|cancel\|abandon\|decline\|fail/i;\n\nexport function LifecycleStepper({\n steps,\n current,\n className,\n}: {\n steps: string[];\n current: string;\n className?: string;\n}) {\n const isNegativeTerminal = NEGATIVE_TERMINAL.test(current);\n const currentIndex = steps.findIndex((s) => s.toLowerCase() === current.toLowerCase());\n\n return (\n <ol\n className={cn('flex w-full items-center overflow-x-auto', className)}\n aria-label=\"Lifecycle progress\"\n >\n {steps.map((step, i) => {\n const isLast = i === steps.length - 1;\n const done = currentIndex >= 0 && i < currentIndex;\n const active = currentIndex >= 0 && i === currentIndex && !isNegativeTerminal;\n const state = done ? 'done' : active ? 'active' : 'upcoming';\n return (\n <li\n key={step}\n className=\"flex min-w-fit flex-1 items-center\"\n aria-current={active ? 'step' : undefined}\n >\n <div className=\"flex flex-col items-center gap-1.5 px-1\">\n <span\n className={cn(\n 'flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors',\n state === 'done' &&\n 'border-transparent bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]',\n state === 'active' &&\n 'border-[var(--color-action-primary-border)] bg-[var(--color-action-primary-bg)]/15 text-[var(--color-action-primary-text)]',\n state === 'upcoming' && 'border-border-subtle bg-bg-sunken text-text-secondary'\n )}\n aria-hidden=\"true\"\n >\n {done ? '✓' : i + 1}\n </span>\n <span\n className={cn(\n 'whitespace-nowrap text-[11px]',\n active ? 'font-medium text-text-primary' : 'text-text-secondary'\n )}\n >\n {step}\n </span>\n </div>\n {!isLast ? (\n <span\n aria-hidden=\"true\"\n className={cn(\n 'mx-1 h-0.5 flex-1 rounded-full',\n done ? 'bg-[var(--color-action-primary-bg)]' : 'bg-border-subtle'\n )}\n />\n ) : null}\n </li>\n );\n })}\n {isNegativeTerminal ? (\n <li className=\"ml-2 flex min-w-fit items-center gap-1.5\" aria-current=\"step\">\n <span className=\"mx-1 h-0.5 w-6 rounded-full bg-status-error-border\" aria-hidden=\"true\" />\n <div className=\"flex flex-col items-center gap-1.5 px-1\">\n <span\n className=\"flex size-7 items-center justify-center rounded-full border border-transparent bg-status-error text-xs font-semibold text-status-error-text\"\n aria-hidden=\"true\"\n >\n ✕\n </span>\n <span className=\"whitespace-nowrap text-[11px] font-medium text-status-error-text\">\n {current}\n </span>\n </div>\n </li>\n ) : null}\n </ol>\n );\n}\n\n// ============================================================================\n// StatTile — premium KPI tile\n// ============================================================================\n\nexport function StatTile({\n label,\n value,\n delta,\n deltaTone,\n deltaSuffix = '%',\n spark,\n sparkTone = 'brand',\n glow = false,\n icon,\n className,\n}: {\n label: string;\n value: string;\n /** Optional signed delta rendered as a chip (icon + sign + status colour). /\n delta?: number;\n /* Override the auto tone derived from the delta sign. /\n deltaTone?: 'positive' \| 'negative' \| 'neutral';\n deltaSuffix?: string;\n /* Optional inline sparkline series. /\n spark?: number[];\n sparkTone?: VizTone;\n /* Subtle emerald glow ring for hero tiles. */\n glow?: boolean;\n icon?: ReactNode;\n className?: string;\n}) {\n const positive = deltaTone ? deltaTone === 'positive' : (delta ?? 0) > 0;\n const negative = deltaTone ? deltaTone === 'negative' : (delta ?? 0) < 0;\n const deltaClass = positive\n ? 'text-status-success-text bg-status-success-bg'\n : negative\n ? 'text-status-error-text bg-status-error-bg'\n : 'text-text-secondary bg-bg-sunken';\n const sign = delta !== undefined && delta > 0 ? '+' : '';\n\n return (\n <div\n className={cn(\n 'group relative overflow-hidden rounded-xl border border-border-subtle bg-bg-surface p-4 transition-shadow',\n 'motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]',\n glow && 'ring-1 ring-[var(--color-action-primary-border)]/40',\n className\n )}\n >\n {glow ? (\n <span\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute -right-8 -top-8 size-24 rounded-full bg-[var(--color-action-primary-bg)]/15 blur-2xl\"\n />\n ) : null}\n <div className=\"flex items-start justify-between gap-2\">\n <p className=\"text-xs text-text-secondary\">{label}</p>\n {icon ? <span className=\"text-text-secondary\">{icon}</span> : null}\n </div>\n <p className=\"mt-1 text-2xl font-semibold text-text-primary\">{value}</p>\n <div className=\"mt-2 flex items-center justify-between gap-2\">\n {delta !== undefined && Number.isFinite(delta) ? (\n <span\n className={cn(\n 'inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium',\n deltaClass\n )}\n >\n <span aria-hidden=\"true\">{positive ? '▲' : negative ? '▼' : '—'}</span>\n {sign}\n {delta.toFixed(1)}\n {deltaSuffix}\n </span>\n ) : (\n <span />\n )}\n {spark && spark.length > 1 ? (\n <div className=\"w-20 shrink-0\">\n <Sparkline data={spark} tone={sparkTone} height={28} />\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"viz.js","names":[],"sources":["../../../src/brainyrich/components/viz.tsx"],"sourcesContent":["/*\n BrainyRich data-viz + polish kit.\n * @module brainyrich/components/viz\n \n A tokenized, responsive, dark-mode-first visualization + motion kit built on\n * recharts (^2.15) with lightweight, dependency-free CSS motion. Every colour is read from the\n * platform's SEMANTIC CSS variables at runtime (see {@link useVizColors}) so\n * charts always track the active theme and the emerald BrainyRich brand\n * (`--color-action-primary-bg`). No raw hex/rgb literals live in this file.\n \n All chart components are wrapped in a recharts `<ResponsiveContainer>` so they\n * resize with their parent. Motion is tasteful (<=250ms) and disabled under\n * `prefers-reduced-motion`.\n \n Page agents: import from `#brainyrich/components/viz` (or the components\n * barrel). Pass values straight from the real `bra` hooks — this kit only\n renders; it never fabricates data.\n /\nimport { useEffect, useId, useMemo, useState, type CSSProperties, type ReactNode } from 'react';\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n Cell,\n Line,\n LineChart,\n Pie,\n PieChart,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts';\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nfunction cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n\n// ============================================================================\n// Motion primitives (dependency-free, pure CSS — no animation library)\n// ============================================================================\n\n/\n SSR-safe `prefers-reduced-motion` hook. Returns `false` on the server and on\n * the first client render, then subscribes to the media query so all motion in\n * this kit is disabled the moment the user asks for reduced motion.\n /\nfunction prefersReducedMotion(): boolean {\n if (typeof window === 'undefined' \|\| typeof window.matchMedia !== 'function') return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nexport function useReducedMotion(): boolean {\n // Read the current preference lazily at mount (SSR-safe: `false` on the\n // server), then only update via the media-query change listener.\n const [reduced, setReduced] = useState<boolean>(prefersReducedMotion);\n\n useEffect(() => {\n if (typeof window === 'undefined' \|\| typeof window.matchMedia !== 'function') return;\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n mq.addEventListener('change', onChange);\n return () => mq.removeEventListener('change', onChange);\n }, []);\n\n return reduced;\n}\n\n// Enter animation (translateY + opacity) injected once as a real stylesheet so\n// the keyframes + `.br-fade-in` class exist before the first animated paint.\nconst FADE_IN_STYLE_ID = 'brainyrich-viz-motion';\nconst FADE_IN_CSS = `\n@keyframes br-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: none; }\n}\n.br-fade-in {\n animation: br-fade-in 240ms var(--motion-easing-standard, ease-out) both;\n}\n`;\n\nif (typeof document !== 'undefined' && !document.getElementById(FADE_IN_STYLE_ID)) {\n const el = document.createElement('style');\n el.id = FADE_IN_STYLE_ID;\n el.textContent = FADE_IN_CSS;\n document.head.appendChild(el);\n}\n\n// ============================================================================\n// Token → colour resolution\n// ============================================================================\n//\n// recharts needs concrete colour strings (fills, stroke, gradient stops), so we\n// resolve each semantic CSS variable to its computed value off\n// `document.documentElement` and re-read whenever the theme attribute flips.\n// Consumers NEVER hard-code colours: they name a semantic token here.\n\nconst CORE_TOKENS = {\n brand: '--color-action-primary-bg',\n brandBorder: '--color-action-primary-border',\n grid: '--color-chart-grid',\n axis: '--color-chart-axis',\n positive: '--color-chart-positive',\n negative: '--color-chart-negative',\n success: '--color-status-success',\n error: '--color-status-error',\n warning: '--color-status-warning',\n info: '--color-status-info',\n teal: '--color-accent-teal',\n blue: '--color-accent-blue',\n purple: '--color-accent-purple',\n indigo: '--color-accent-indigo',\n textPrimary: '--color-text-primary',\n textSecondary: '--color-text-secondary',\n surface: '--color-bg-elevated',\n border: '--color-border-subtle',\n} as const;\n\ntype CoreToken = keyof typeof CORE_TOKENS;\n\n/* Ordered categorical palette — emerald brand first, then distinct chart hues. /\nconst PALETTE_VARS = [\n '--color-action-primary-bg',\n '--color-chart-2',\n '--color-chart-3',\n '--color-chart-4',\n '--color-chart-5',\n '--color-chart-6',\n '--color-chart-7',\n '--color-chart-8',\n '--color-chart-9',\n '--color-chart-10',\n '--color-chart-11',\n '--color-chart-12',\n];\n\nexport type VizColors = Record<CoreToken, string> & {\n /* Categorical palette (index 0 = emerald brand). /\n palette: string[];\n /* Resolve any semantic tone name to a concrete colour string. /\n tone: (tone?: VizTone) => string;\n};\n\n/* Named tones a datum may request; falls back to the categorical palette. /\nexport type VizTone =\n \| 'brand'\n \| 'primary'\n \| 'success'\n \| 'positive'\n \| 'error'\n \| 'negative'\n \| 'warning'\n \| 'info'\n \| 'teal'\n \| 'blue'\n \| 'purple'\n \| 'indigo'\n \| 'neutral';\n\nfunction readVar(name: string): string {\n if (typeof window === 'undefined') return `var(${name})`;\n const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n return v \|\| `var(${name})`;\n}\n\n/\n Resolve the semantic viz palette from CSS variables and keep it in sync with\n * the active theme. Returns concrete colour strings for use in recharts props.\n /\nexport function useVizColors(): VizColors {\n const [tick, setTick] = useState(0);\n\n useEffect(() => {\n if (typeof window === 'undefined') return;\n const rerender = () => setTick((t) => t + 1);\n const obs = new MutationObserver(rerender);\n obs.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme', 'class', 'style'],\n });\n return () => obs.disconnect();\n }, []);\n\n return useMemo(() => {\n void tick; // re-resolve whenever the theme attribute changes\n const core = Object.fromEntries(\n (Object.keys(CORE_TOKENS) as CoreToken[]).map((k) => [k, readVar(CORE_TOKENS[k])])\n ) as Record<CoreToken, string>;\n const palette = PALETTE_VARS.map(readVar);\n\n const tone = (t?: VizTone): string => {\n switch (t) {\n case 'brand':\n case 'primary':\n return core.brand;\n case 'success':\n case 'positive':\n return core.success;\n case 'error':\n case 'negative':\n return core.error;\n case 'warning':\n return core.warning;\n case 'info':\n return core.info;\n case 'teal':\n return core.teal;\n case 'blue':\n return core.blue;\n case 'purple':\n return core.purple;\n case 'indigo':\n return core.indigo;\n case 'neutral':\n return core.textSecondary;\n default:\n return core.brand;\n }\n };\n\n return { ...core, palette, tone };\n }, [tick]);\n}\n\n// ============================================================================\n// Shared chart tooltip (themed — recharts' default is light-only)\n// ============================================================================\n\ninterface TooltipEntry {\n name?: string \| number;\n value?: string \| number;\n color?: string;\n payload?: Record<string, unknown>;\n}\n\nfunction useTooltipStyles(): { wrapper: CSSProperties; label: CSSProperties } {\n const c = useVizColors();\n return {\n wrapper: {\n background: c.surface,\n border: `1px solid ${c.border}`,\n borderRadius: 10,\n padding: '8px 12px',\n color: c.textPrimary,\n fontSize: 12,\n boxShadow: 'var(--shadow-pop, 0 8px 24px rgba(0,0,0,0.35))',\n },\n label: { color: c.textSecondary, marginBottom: 4, fontSize: 11 },\n };\n}\n\nfunction ChartTooltip({\n active,\n payload,\n label,\n valueFormatter,\n}: {\n active?: boolean;\n payload?: TooltipEntry[];\n label?: string \| number;\n valueFormatter?: (v: number) => string;\n}) {\n const styles = useTooltipStyles();\n if (!active \|\| !payload \|\| payload.length === 0) return null;\n return (\n <div style={styles.wrapper} role=\"tooltip\">\n {label !== undefined && label !== '' ? <div style={styles.label}>{label}</div> : null}\n {payload.map((entry, i) => {\n const raw = typeof entry.value === 'number' ? entry.value : Number(entry.value);\n const shown =\n valueFormatter && Number.isFinite(raw) ? valueFormatter(raw) : String(entry.value ?? '');\n return (\n <div key={i} className=\"flex items-center gap-2\">\n {entry.color ? (\n <span\n aria-hidden=\"true\"\n style={{\n width: 8,\n height: 8,\n borderRadius: 9999,\n background: entry.color,\n display: 'inline-block',\n }}\n />\n ) : null}\n {entry.name ? <span style={{ color: styles.label.color }}>{entry.name}:</span> : null}\n <span style={{ fontWeight: 600 }}>{shown}</span>\n </div>\n );\n })}\n </div>\n );\n}\n\n// ============================================================================\n// Motion helpers\n// ============================================================================\n\n/\n Staggered enter animation (translateY + opacity). Fully disabled under\n * `prefers-reduced-motion` (renders a plain element). Use `index` to stagger a\n * list/grid of cards.\n /\nexport function FadeIn({\n children,\n index = 0,\n delay = 0,\n className,\n as: Tag = 'div',\n}: {\n children: ReactNode;\n index?: number;\n delay?: number;\n className?: string;\n as?: 'div' \| 'li' \| 'section';\n}) {\n const reduce = useReducedMotion();\n if (reduce) {\n return <Tag className={className}>{children}</Tag>;\n }\n return (\n <Tag\n className={cn('br-fade-in', className)}\n style={{ animationDelay: `${delay + index 0.04}s` }}\n >\n {children}\n </Tag>\n );\n}\n\n// ============================================================================\n// GlassCard — sanctioned glass/elevation surface with graceful fallback\n// ============================================================================\n\n/*\n Floating/hero surface using the sanctioned glass tokens. Falls back to the\n * standard elevated surface when a glass token is absent (older brand builds).\n /\nexport function GlassCard({\n children,\n className,\n glow = false,\n}: {\n children: ReactNode;\n className?: string;\n /* Add a subtle emerald glow ring. /\n glow?: boolean;\n}) {\n return (\n <div\n className={cn(\n 'rounded-2xl border p-5',\n // Glass tokens with hard fallbacks to always-present semantic tokens.\n 'border-[var(--color-border-glass,var(--color-border-subtle))]',\n 'bg-[var(--color-surface-glass,var(--color-bg-elevated))]',\n 'shadow-[var(--shadow-float,var(--shadow-elevation-3))]',\n 'backdrop-blur-[var(--blur-glass,12px)]',\n glow && 'ring-1 ring-[var(--color-action-primary-border)]/40',\n className\n )}\n >\n {children}\n </div>\n );\n}\n\n// ============================================================================\n// DonutChart\n// ============================================================================\n\nexport interface DonutDatum {\n label: string;\n value: number;\n tone?: VizTone;\n}\n\nexport function DonutChart({\n data,\n centerLabel,\n centerValue,\n legend = true,\n height = 220,\n valueFormatter,\n}: {\n data: DonutDatum[];\n centerLabel?: string;\n centerValue?: string;\n legend?: boolean;\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const rows = data.filter((d) => Number.isFinite(d.value) && d.value > 0);\n\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No data.</p>;\n }\n\n const colorFor = (d: DonutDatum, i: number) =>\n d.tone ? c.tone(d.tone) : c.palette[i % c.palette.length];\n\n return (\n <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:items-center\">\n <div className=\"relative\" style={{ width: '100%', maxWidth: 260, height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <PieChart>\n <Pie\n data={rows}\n dataKey=\"value\"\n nameKey=\"label\"\n innerRadius=\"62%\"\n outerRadius=\"90%\"\n paddingAngle={2}\n stroke=\"transparent\"\n isAnimationActive={!reduce}\n animationDuration={250}\n >\n {rows.map((d, i) => (\n <Cell key={d.label} fill={colorFor(d, i)} />\n ))}\n </Pie>\n <Tooltip content={<ChartTooltip valueFormatter={valueFormatter} />} />\n </PieChart>\n </ResponsiveContainer>\n {centerValue \|\| centerLabel ? (\n <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center\">\n {centerValue ? (\n <span className=\"text-xl font-semibold text-text-primary\">{centerValue}</span>\n ) : null}\n {centerLabel ? (\n <span className=\"text-xs text-text-secondary\">{centerLabel}</span>\n ) : null}\n </div>\n ) : null}\n </div>\n {legend ? (\n <ul className=\"grid flex-1 grid-cols-1 gap-2 sm:grid-cols-2\" aria-label=\"Legend\">\n {rows.map((d, i) => (\n <li key={d.label} className=\"flex items-center gap-2 text-xs\">\n <span\n aria-hidden=\"true\"\n className=\"size-2.5 shrink-0 rounded-full\"\n style={{ background: colorFor(d, i) }}\n />\n <span className=\"truncate text-text-secondary\">{d.label}</span>\n <span className=\"ml-auto font-medium text-text-primary\">\n {valueFormatter ? valueFormatter(d.value) : d.value}\n </span>\n </li>\n ))}\n </ul>\n ) : null}\n </div>\n );\n}\n\n// ============================================================================\n// Sparkline\n// ============================================================================\n\nexport function Sparkline({\n data,\n tone = 'brand',\n height = 40,\n className,\n}: {\n data: number[];\n tone?: VizTone;\n height?: number;\n className?: string;\n}) {\n const c = useVizColors();\n const stroke = c.tone(tone);\n const points = data.filter((n) => Number.isFinite(n));\n const gradientId = `spark-${useId().replace(/:/g, '')}`;\n if (points.length < 2) {\n return <div className={className} style={{ height }} aria-hidden=\"true\" />;\n }\n const chartData = points.map((y, x) => ({ x, y }));\n return (\n <div className={className} style={{ width: '100%', height }} aria-hidden=\"true\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart data={chartData} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={stroke} stopOpacity={0.28} />\n <stop offset=\"100%\" stopColor={stroke} stopOpacity={0} />\n </linearGradient>\n </defs>\n <Area\n type=\"monotone\"\n dataKey=\"y\"\n stroke={stroke}\n strokeWidth={2}\n fill={`url(#${gradientId})`}\n isAnimationActive={false}\n dot={false}\n />\n </AreaChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// ProgressRing — clean SVG radial progress\n// ============================================================================\n\nexport function ProgressRing({\n value,\n label,\n tone = 'brand',\n size = 120,\n strokeWidth = 10,\n}: {\n value: number;\n label?: string;\n tone?: VizTone;\n size?: number;\n strokeWidth?: number;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const pct = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));\n const r = (size - strokeWidth) / 2;\n const circ = 2 Math.PI * r;\n const dash = (pct / 100) * circ;\n const stroke = c.tone(tone);\n const targetOffset = circ - dash;\n // Reduced motion renders filled immediately; otherwise start empty and fill\n // on the next frame so the ring animates from 0 → value via CSS.\n const [dashOffset, setDashOffset] = useState(reduce ? targetOffset : circ);\n\n useEffect(() => {\n const id = requestAnimationFrame(() => setDashOffset(targetOffset));\n return () => cancelAnimationFrame(id);\n }, [targetOffset]);\n\n return (\n <div\n className=\"relative inline-flex items-center justify-center\"\n style={{ width: size, height: size }}\n role=\"progressbar\"\n aria-valuenow={Math.round(pct)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={label ?? 'Progress'}\n >\n <svg width={size} height={size} className=\"-rotate-90\">\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke={c.border}\n strokeWidth={strokeWidth}\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke={stroke}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circ}\n strokeDashoffset={dashOffset}\n style={{ transition: reduce ? 'none' : 'stroke-dashoffset 600ms ease' }}\n />\n </svg>\n <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n <span className=\"text-lg font-semibold text-text-primary\">{Math.round(pct)}%</span>\n {label ? <span className=\"text-[10px] text-text-secondary\">{label}</span> : null}\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// TrendBars — diverging inflow/outflow cashflow bars\n// ============================================================================\n\nexport interface TrendDatum {\n label: string;\n inflow: number;\n outflow: number;\n}\n\nexport function TrendBars({\n data,\n height = 240,\n valueFormatter,\n}: {\n data: TrendDatum[];\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const rows = data.filter((d) => Number.isFinite(d.inflow) && Number.isFinite(d.outflow));\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No cashflow data.</p>;\n }\n // Diverging: inflow up (positive), outflow down (negative).\n const chartData = rows.map((d) => ({\n label: d.label,\n inflow: Math.abs(d.inflow),\n outflow: -Math.abs(d.outflow),\n }));\n\n return (\n <div style={{ width: '100%', height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart\n data={chartData}\n margin={{ top: 8, right: 8, bottom: 0, left: 8 }}\n stackOffset=\"sign\"\n >\n <XAxis\n dataKey=\"label\"\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={{ stroke: c.grid }}\n tickLine={false}\n />\n <YAxis\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={false}\n tickLine={false}\n width={44}\n tickFormatter={(v: number) =>\n valueFormatter ? valueFormatter(Math.abs(v)) : String(Math.abs(v))\n }\n />\n <ReferenceLine y={0} stroke={c.grid} />\n <Tooltip\n cursor={{ fill: c.border, opacity: 0.25 }}\n content={\n <ChartTooltip\n valueFormatter={(v) =>\n valueFormatter ? valueFormatter(Math.abs(v)) : String(Math.abs(v))\n }\n />\n }\n />\n <Bar\n dataKey=\"inflow\"\n name=\"Inflow\"\n fill={c.positive}\n radius={[4, 4, 0, 0]}\n isAnimationActive={!reduce}\n animationDuration={250}\n />\n <Bar\n dataKey=\"outflow\"\n name=\"Outflow\"\n fill={c.negative}\n radius={[0, 0, 4, 4]}\n isAnimationActive={!reduce}\n animationDuration={250}\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// MiniAreaChart — projection with optional dashed target line\n// ============================================================================\n\nexport interface AreaDatum {\n x: string \| number;\n y: number;\n}\n\nexport function MiniAreaChart({\n data,\n target,\n tone = 'brand',\n height = 200,\n valueFormatter,\n}: {\n data: AreaDatum[];\n target?: number;\n tone?: VizTone;\n height?: number;\n valueFormatter?: (v: number) => string;\n}) {\n const c = useVizColors();\n const reduce = useReducedMotion();\n const stroke = c.tone(tone);\n const rows = data.filter((d) => Number.isFinite(d.y));\n const gradientId = `area-${useId().replace(/:/g, '')}`;\n if (rows.length < 2) {\n return <p className=\"text-sm text-text-secondary\">Not enough data to chart.</p>;\n }\n return (\n <div style={{ width: '100%', height }}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <AreaChart data={rows} margin={{ top: 8, right: 8, bottom: 0, left: 8 }}>\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={stroke} stopOpacity={0.3} />\n <stop offset=\"100%\" stopColor={stroke} stopOpacity={0.02} />\n </linearGradient>\n </defs>\n <XAxis\n dataKey=\"x\"\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={{ stroke: c.grid }}\n tickLine={false}\n />\n <YAxis\n tick={{ fill: c.textSecondary, fontSize: 11 }}\n axisLine={false}\n tickLine={false}\n width={44}\n tickFormatter={(v: number) => (valueFormatter ? valueFormatter(v) : String(v))}\n />\n <Tooltip content={<ChartTooltip valueFormatter={valueFormatter} />} />\n {target !== undefined && Number.isFinite(target) ? (\n <ReferenceLine\n y={target}\n stroke={c.textSecondary}\n strokeDasharray=\"5 4\"\n label={{\n value: valueFormatter ? `Target ${valueFormatter(target)}` : `Target ${target}`,\n position: 'insideTopRight',\n fill: c.textSecondary,\n fontSize: 10,\n }}\n />\n ) : null}\n <Area\n type=\"monotone\"\n dataKey=\"y\"\n stroke={stroke}\n strokeWidth={2}\n fill={`url(#${gradientId})`}\n isAnimationActive={!reduce}\n animationDuration={250}\n dot={false}\n />\n </AreaChart>\n </ResponsiveContainer>\n </div>\n );\n}\n\n// ============================================================================\n// LifecycleStepper — horizontal proposal/rebalance lifecycle\n// ============================================================================\n\nconst NEGATIVE_TERMINAL = /reject\|cancel\|abandon\|decline\|fail/i;\n\nexport function LifecycleStepper({\n steps,\n current,\n className,\n}: {\n steps: string[];\n current: string;\n className?: string;\n}) {\n const isNegativeTerminal = NEGATIVE_TERMINAL.test(current);\n const currentIndex = steps.findIndex((s) => s.toLowerCase() === current.toLowerCase());\n\n return (\n <ol\n className={cn('flex w-full items-center overflow-x-auto', className)}\n aria-label=\"Lifecycle progress\"\n >\n {steps.map((step, i) => {\n const isLast = i === steps.length - 1;\n const done = currentIndex >= 0 && i < currentIndex;\n const active = currentIndex >= 0 && i === currentIndex && !isNegativeTerminal;\n const state = done ? 'done' : active ? 'active' : 'upcoming';\n return (\n <li\n key={step}\n className=\"flex min-w-fit flex-1 items-center\"\n aria-current={active ? 'step' : undefined}\n >\n <div className=\"flex flex-col items-center gap-1.5 px-1\">\n <span\n className={cn(\n 'flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors',\n state === 'done' &&\n 'border-transparent bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]',\n state === 'active' &&\n 'border-[var(--color-action-primary-border)] bg-[var(--color-action-primary-bg)]/15 text-[var(--color-action-primary-text)]',\n state === 'upcoming' && 'border-border-subtle bg-bg-sunken text-text-secondary'\n )}\n aria-hidden=\"true\"\n >\n {done ? '✓' : i + 1}\n </span>\n <span\n className={cn(\n 'whitespace-nowrap text-[11px]',\n active ? 'font-medium text-text-primary' : 'text-text-secondary'\n )}\n >\n {step}\n </span>\n </div>\n {!isLast ? (\n <span\n aria-hidden=\"true\"\n className={cn(\n 'mx-1 h-0.5 flex-1 rounded-full',\n done ? 'bg-[var(--color-action-primary-bg)]' : 'bg-border-subtle'\n )}\n />\n ) : null}\n </li>\n );\n })}\n {isNegativeTerminal ? (\n <li className=\"ml-2 flex min-w-fit items-center gap-1.5\" aria-current=\"step\">\n <span className=\"mx-1 h-0.5 w-6 rounded-full bg-status-error-border\" aria-hidden=\"true\" />\n <div className=\"flex flex-col items-center gap-1.5 px-1\">\n <span\n className=\"flex size-7 items-center justify-center rounded-full border border-transparent bg-status-error text-xs font-semibold text-status-error-text\"\n aria-hidden=\"true\"\n >\n ✕\n </span>\n <span className=\"whitespace-nowrap text-[11px] font-medium text-status-error-text\">\n {current}\n </span>\n </div>\n </li>\n ) : null}\n </ol>\n );\n}\n\n// ============================================================================\n// StatTile — premium KPI tile\n// ============================================================================\n\nexport function StatTile({\n label,\n value,\n delta,\n deltaTone,\n deltaSuffix = '%',\n spark,\n sparkTone = 'brand',\n glow = false,\n icon,\n className,\n}: {\n label: string;\n value: string;\n /** Optional signed delta rendered as a chip (icon + sign + status colour). /\n delta?: number;\n /* Override the auto tone derived from the delta sign. /\n deltaTone?: 'positive' \| 'negative' \| 'neutral';\n deltaSuffix?: string;\n /* Optional inline sparkline series. /\n spark?: number[];\n sparkTone?: VizTone;\n /* Subtle emerald glow ring for hero tiles. */\n glow?: boolean;\n icon?: ReactNode;\n className?: string;\n}) {\n const positive = deltaTone ? deltaTone === 'positive' : (delta ?? 0) > 0;\n const negative = deltaTone ? deltaTone === 'negative' : (delta ?? 0) < 0;\n const deltaClass = positive\n ? 'text-status-success-text bg-status-success-bg'\n : negative\n ? 'text-status-error-text bg-status-error-bg'\n : 'text-text-secondary bg-bg-sunken';\n const sign = delta !== undefined && delta > 0 ? '+' : '';\n\n return (\n <div\n className={cn(\n 'group relative overflow-hidden rounded-xl border border-border-subtle bg-bg-surface p-4 transition-shadow',\n 'motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]',\n glow && 'ring-1 ring-[var(--color-action-primary-border)]/40',\n className\n )}\n >\n {glow ? (\n <span\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute -right-8 -top-8 size-24 rounded-full bg-[var(--color-action-primary-bg)]/15 blur-2xl\"\n />\n ) : null}\n <div className=\"flex items-start justify-between gap-2\">\n <p className=\"text-xs text-text-secondary\">{label}</p>\n {icon ? <span className=\"text-text-secondary\">{icon}</span> : null}\n </div>\n <p className=\"mt-1 text-2xl font-semibold text-text-primary\">{value}</p>\n <div className=\"mt-2 flex items-center justify-between gap-2\">\n {delta !== undefined && Number.isFinite(delta) ? (\n <span\n className={cn(\n 'inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium',\n deltaClass\n )}\n >\n <span aria-hidden=\"true\">{positive ? '▲' : negative ? '▼' : '—'}</span>\n {sign}\n {delta.toFixed(1)}\n {deltaSuffix}\n </span>\n ) : (\n <span />\n )}\n {spark && spark.length > 1 ? (\n <div className=\"w-20 shrink-0\">\n <Sparkline data={spark} tone={sparkTone} height={28} />\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/brainyrich/hooks/useBrainyRichAnalytics.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBrainyRichAnalytics.js","names":[],"sources":["../../../src/brainyrich/hooks/useBrainyRichAnalytics.ts"],"sourcesContent":["/*\n BrainyRich analytics helpers.\n \n Emits product-scoped events on the shared shell event bus. The app shell's\n * RybbitSink forwards allow-listed fact events to Rybbit Cloud for product\n * analytics, and the OTel sink forwards them to the SRE telemetry pipeline.\n /\n\nimport { useCallback, useEffect } from 'react';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\n\nexport type BrainyRichPageEvent =\n \| 'brainyrich.dashboard.viewed'\n \| 'brainyrich.accounts.viewed'\n \| 'brainyrich.account.viewed'\n \| 'brainyrich.family.viewed'\n \| 'brainyrich.household.viewed'\n \| 'brainyrich.goals.viewed'\n \| 'brainyrich.goal.viewed'\n \| 'brainyrich.portfolios.viewed'\n \| 'brainyrich.portfolio.viewed'\n \| 'brainyrich.investments.viewed'\n \| 'brainyrich.risk.viewed'\n \| 'brainyrich.tax.viewed'\n \| 'brainyrich.reports.viewed'\n \| 'brainyrich.analytics.viewed'\n \| 'brainyrich.aiAssistant.viewed';\n\nexport function useBrainyRichAnalytics() {\n const bus = useEventBus();\n\n const emit = useCallback(\n (name: BrainyRichPageEvent, payload: Record<string, unknown> = {}) => {\n bus.emitCustom(name, payload);\n },\n [bus]\n );\n\n const trackPageView = useCallback(\n (name: BrainyRichPageEvent, payload: Record<string, unknown> = {}) => {\n emit(name, payload);\n },\n [emit]\n );\n\n return { emit, trackPageView };\n}\n\n/\n Emit a BrainyRich page-view event once per unique (name, id) tuple.\n */\nexport function useTrackBrainyRichPageView(\n name: BrainyRichPageEvent,\n payload: Record<string, unknown> = {}\n): void {\n const { trackPageView } = useBrainyRichAnalytics();\n\n useEffect(() => {\n trackPageView(name, payload);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [name, JSON.stringify(payload)]);\n}\n"],"mappings":";;;AA4BA,SAAgB,IAAyB;CACvC,IAAM,IAAM,~~GAAa~~,~~EAEnB~~,IAAO,GACV,GAA2B,IAAmC,~~EAAE~~,~~KAAK~~;~~AACpE~~,~~IAAI~~,WAAW,GAAM,~~EAAQ~~;~~IAE/B~~,CAAC,~~EAAI~~,CACN;~~AASD~~,~~QAAO~~;EAAE;EAAM,eAPO,GACnB,GAA2B,IAAmC,~~EAAE~~,~~KAAK~~;~~AACpE~~,~~KAAK~~,GAAM,~~EAAQ~~;~~KAErB~~,CAAC,~~EAAK~~,~~CACP~~;~~EAE6B;;AAMhC~~,SAAgB,EACd,GACA,IAAmC,~~EAAE~~,~~EAC/B~~;CACN,IAAM,EAAE,qBAAkB,~~GAAwB~~;~~AAElD~~,~~SAAgB~~;~~AACd~~,~~IAAc~~,GAAM,~~EAAQ~~;~~IAE3B~~,CAAC,GAAM,KAAK,UAAU,~~EAAQ~~,CAAC,CAAC"}
1	+ {"version":3,"file":"useBrainyRichAnalytics.js","names":[],"sources":["../../../src/brainyrich/hooks/useBrainyRichAnalytics.ts"],"sourcesContent":["/*\n BrainyRich analytics helpers.\n \n Emits product-scoped events on the shared shell event bus. The app shell's\n * RybbitSink forwards allow-listed fact events to Rybbit Cloud for product\n * analytics, and the OTel sink forwards them to the SRE telemetry pipeline.\n /\n\nimport { useCallback, useEffect } from 'react';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\n\nexport type BrainyRichPageEvent =\n \| 'brainyrich.dashboard.viewed'\n \| 'brainyrich.accounts.viewed'\n \| 'brainyrich.account.viewed'\n \| 'brainyrich.family.viewed'\n \| 'brainyrich.household.viewed'\n \| 'brainyrich.goals.viewed'\n \| 'brainyrich.goal.viewed'\n \| 'brainyrich.portfolios.viewed'\n \| 'brainyrich.portfolio.viewed'\n \| 'brainyrich.investments.viewed'\n \| 'brainyrich.risk.viewed'\n \| 'brainyrich.tax.viewed'\n \| 'brainyrich.reports.viewed'\n \| 'brainyrich.analytics.viewed'\n \| 'brainyrich.aiAssistant.viewed';\n\nexport function useBrainyRichAnalytics() {\n const bus = useEventBus();\n\n const emit = useCallback(\n (name: BrainyRichPageEvent, payload: Record<string, unknown> = {}) => {\n bus.emitCustom(name, payload);\n },\n [bus]\n );\n\n const trackPageView = useCallback(\n (name: BrainyRichPageEvent, payload: Record<string, unknown> = {}) => {\n emit(name, payload);\n },\n [emit]\n );\n\n return { emit, trackPageView };\n}\n\n/\n Emit a BrainyRich page-view event once per unique (name, id) tuple.\n */\nexport function useTrackBrainyRichPageView(\n name: BrainyRichPageEvent,\n payload: Record<string, unknown> = {}\n): void {\n const { trackPageView } = useBrainyRichAnalytics();\n\n useEffect(() => {\n trackPageView(name, payload);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [name, JSON.stringify(payload)]);\n}\n"],"mappings":";;;AA4BA,SAAgB,IAAyB;CACvC,IAAM,IAAM,EAAY,GAElB,IAAO,GACV,GAA2B,IAAmC,CAAC,MAAM;EACpE,EAAI,WAAW,GAAM,CAAO;CAC9B,GACA,CAAC,CAAG,CACN;CASA,OAAO;EAAE;EAAM,eAPO,GACnB,GAA2B,IAAmC,CAAC,MAAM;GACpE,EAAK,GAAM,CAAO;EACpB,GACA,CAAC,CAAI,CAGQ;CAAc;AAC/B;AAKA,SAAgB,EACd,GACA,IAAmC,CAAC,GAC9B;CACN,IAAM,EAAE,qBAAkB,EAAuB;CAEjD,QAAgB;EACd,EAAc,GAAM,CAAO;CAE7B,GAAG,CAAC,GAAM,KAAK,UAAU,CAAO,CAAC,CAAC;AACpC"}

package/dist/brainyrich/hooks/useBrainyRichApi.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Connection, BraNetWorthSummary, BraAccount, BraAccountStatus, BraPortfolio, BraPortfolioStatus, BraHolding, BraModelPortfolio, BraGoal, BraGoalStatus, BraGoalFunding, BraHousehold, BraHouseholdStatus, BraInsight, BraInsightSeverity, BraInsightStatus, BraTransaction, BraTransactionType, BraRebalanceProposal, BraRebalanceStatus, BraPortfolioRiskReport, BraRiskSummary, BraTaxLossReport, BraTaxLossThresholds, BraAdvisor, BraAdvisorRole, BraFirmReport, BraAdminFirmSummary, BraAdvisorBranding, BraUpsertAdvisorBrandingInput, BraClientPortalSummary, BraScheduledReport, BraReportRun, BraCreateScheduledReportInput, BraGenerateReportNowInput, BraMarketQuote, BraHoldingPriceRefreshResult, BraTradeInstruction, BraTradeInstructionStatus, BraCreateTradeInstructionInput, BraCreateAccountInput, BraUpdateAccountInput, BraCreatePortfolioInput, BraUpdatePortfolioInput, BraCreateHoldingInput, BraUpdateHoldingInput, BraCreateModelPortfolioInput, BraCreateGoalInput, BraUpdateGoalInput, BraLinkGoalFundingInput, BraCreateHouseholdInput, BraUpdateHouseholdInput, BraCreateInsightInput, BraCreateTransactionInput, BraCreateRebalanceProposalInput, PaginationInput } from '../types/bra';
 export interface AccountFilters {
     householdId?: string;
     status?: BraAccountStatus;