npm - @burdenoff/microfe-brainyrich - Versions diffs - 2026.706.3 → 2026.706.4 - Mend

@burdenoff/microfe-brainyrich 2026.706.3 → 2026.706.4

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 (534) 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) and framer-motion (^12). 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 { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\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// 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 = '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 const Tag = as;\n return <Tag className={className}>{children}</Tag>;\n }\n const MotionTag = motion[as];\n return (\n <MotionTag\n className={className}\n initial={{ opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.25, ease: 'easeOut', delay: delay + index 0.04 }}\n >\n {children}\n </MotionTag>\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\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 <motion.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 initial={{ strokeDashoffset: reduce ? circ - dash : circ }}\n animate={{ strokeDashoffset: circ - dash }}\n transition={{ duration: reduce ? 0 : 0.25, ease: 'easeOut' }}\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\nexport { AnimatePresence };\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 className={cn('br-fade-in', className)} style={{ animationDelay: `${delay + index 0.04}s` }}>\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/pages/_shared.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { motion as e } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { useReducedMotion as t } from "../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
-import { Inbox as n, RefreshCw as r, TriangleAlert as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Badge as s, Button as c, Skeleton as l } from "@burdenoff/fe-libs/ui";
+import { useReducedMotion as e } from "../components/viz.js";
+import { useEffect as t, useState as n } from "react";
+import { Inbox as r, RefreshCw as i, TriangleAlert as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Badge as c, Button as l, Skeleton as u } from "@burdenoff/fe-libs/ui";
 //#region src/brainyrich/pages/_shared.tsx
-function u(e, t = "USD") {
+function d(e, t = "USD") {
 	return Number.isFinite(e) ? new Intl.NumberFormat("en-US", {
 		style: "currency",
 		currency: t,
 		maximumFractionDigits: 0
 	}).format(e) : "—";
 }
-function d(e, t) {
+function f(e, t) {
 	return Number.isFinite(e) ? new Intl.NumberFormat("en-US", {
 		notation: "compact",
 		maximumFractionDigits: 1,
@@ -21,10 +21,10 @@ function d(e, t) {
 		} : {}
 	}).format(e) : "—";
 }
-function f(e, t = 1) {
+function p(e, t = 1) {
 	return e == null || !Number.isFinite(e) ? "—" : `${e.toFixed(t)}%`;
 }
-function p(e) {
+function m(e) {
 	if (!e) return "—";
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? "—" : new Intl.DateTimeFormat("en-US", {
@@ -33,7 +33,7 @@ function p(e) {
 		day: "numeric"
 	}).format(t);
 }
-function m(e) {
+function h(e) {
 	let t = e.toUpperCase();
 	return [
 		"ACTIVE",
@@ -62,29 +62,29 @@ function m(e) {
 		"LOW"
 	].includes(t) ? "secondary" : "outline";
 }
-function h(e) {
+function g(e) {
 	return e > 0 ? "text-status-success-text" : e < 0 ? "text-status-error-text" : "text-text-secondary";
 }
-function g({ title: e, description: t, actionLabel: n, onAction: r, actions: i, badges: l = [], children: u }) {
-	return /* @__PURE__ */ o("div", {
+function _({ title: e, description: t, actionLabel: n, onAction: r, actions: i, badges: a = [], children: u }) {
+	return /* @__PURE__ */ s("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ s("div", {
 			className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between",
-			children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
+			children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h1", {
 				className: "text-2xl font-semibold text-text-primary",
 				children: e
-			}), /* @__PURE__ */ a("p", {
+			}), /* @__PURE__ */ o("p", {
 				className: "text-sm text-text-secondary",
 				children: t
-			})] }), /* @__PURE__ */ o("div", {
+			})] }), /* @__PURE__ */ s("div", {
 				className: "flex items-center gap-2",
 				children: [
-					l.map((e) => /* @__PURE__ */ a(s, {
+					a.map((e) => /* @__PURE__ */ o(c, {
 						variant: "secondary",
 						children: e
 					}, e)),
 					i,
-					n ? /* @__PURE__ */ a(c, {
+					n ? /* @__PURE__ */ o(l, {
 						size: "sm",
 						onClick: r,
 						children: n
@@ -94,123 +94,131 @@ function g({ title: e, description: t, actionLabel: n, onAction: r, actions: i,
 		}), u]
 	});
 }
-var _ = {
+var v = {
 	default: "bg-primary",
 	positive: "bg-status-success-bg",
 	negative: "bg-status-error-bg",
 	warning: "bg-status-warning-bg",
 	accent: "bg-accent-teal"
 };
-function v({ data: n }) {
-	let r = t(), i = n.filter((e) => Number.isFinite(e.value));
-	return i.length === 0 ? /* @__PURE__ */ a("p", {
+function y({ width: r, className: i }) {
+	let a = e(), [s, c] = n(a ? r : 0);
+	return t(() => {
+		let e = requestAnimationFrame(() => c(r));
+		return () => cancelAnimationFrame(e);
+	}, [r]), /* @__PURE__ */ o("div", {
+		className: i,
+		style: {
+			width: `${s}%`,
+			transition: a ? "none" : "width 500ms ease"
+		}
+	});
+}
+function b({ data: e }) {
+	let t = e.filter((e) => Number.isFinite(e.value));
+	return t.length === 0 ? /* @__PURE__ */ o("p", {
 		className: "text-sm text-text-secondary",
 		children: "No allocation data."
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		className: "space-y-3.5",
-		children: i.map((t) => {
-			let n = Math.max(0, Math.min(100, t.value));
-			return /* @__PURE__ */ o("div", {
+		children: t.map((e) => {
+			let t = Math.max(0, Math.min(100, e.value));
+			return /* @__PURE__ */ s("div", {
 				className: "space-y-1.5",
-				children: [/* @__PURE__ */ o("div", {
+				children: [/* @__PURE__ */ s("div", {
 					className: "flex items-center justify-between text-xs",
-					children: [/* @__PURE__ */ a("span", {
+					children: [/* @__PURE__ */ o("span", {
 						className: "font-medium text-text-primary",
-						children: t.label
-					}), /* @__PURE__ */ a("span", {
+						children: e.label
+					}), /* @__PURE__ */ o("span", {
 						className: "tabular-nums text-text-secondary",
-						children: t.caption ?? f(t.value)
+						children: e.caption ?? p(e.value)
 					})]
-				}), /* @__PURE__ */ a("div", {
+				}), /* @__PURE__ */ o("div", {
 					className: "h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken",
 					role: "progressbar",
-					"aria-valuenow": Math.round(n),
+					"aria-valuenow": Math.round(t),
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					"aria-label": t.label,
-					children: /* @__PURE__ */ a(e.div, {
-						className: `h-full rounded-full ${_[t.tone ?? "default"]}`,
-						initial: r ? !1 : { width: 0 },
-						animate: { width: `${n}%` },
-						transition: {
-							duration: .4,
-							ease: "easeOut"
-						}
+					"aria-label": e.label,
+					children: /* @__PURE__ */ o(y, {
+						width: t,
+						className: `h-full rounded-full ${v[e.tone ?? "default"]}`
 					})
 				})]
-			}, t.label);
+			}, e.label);
 		})
 	});
 }
-function y({ icon: e, title: t, description: r, action: i }) {
-	return /* @__PURE__ */ o("div", {
+function x({ icon: e, title: t, description: n, action: i }) {
+	return /* @__PURE__ */ s("div", {
 		className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-border-subtle bg-bg-surface px-6 py-12 text-center",
 		children: [
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "mb-4 flex size-12 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
-				children: e ?? /* @__PURE__ */ a(n, {
+				children: e ?? /* @__PURE__ */ o(r, {
 					className: "size-6",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ a("h3", {
+			/* @__PURE__ */ o("h3", {
 				className: "text-base font-semibold text-text-primary",
 				children: t
 			}),
-			r ? /* @__PURE__ */ a("p", {
+			n ? /* @__PURE__ */ o("p", {
 				className: "mt-1 max-w-md text-sm text-text-secondary",
-				children: r
+				children: n
 			}) : null,
-			i ? /* @__PURE__ */ a("div", {
+			i ? /* @__PURE__ */ o("div", {
 				className: "mt-4",
 				children: i
 			}) : null
 		]
 	});
 }
-function b({ rows: e = 4 }) {
-	return /* @__PURE__ */ a("div", {
+function S({ rows: e = 4 }) {
+	return /* @__PURE__ */ o("div", {
 		className: "space-y-3",
 		"aria-busy": "true",
 		"aria-live": "polite",
-		children: Array.from({ length: e }).map((e, t) => /* @__PURE__ */ o("div", {
+		children: Array.from({ length: e }).map((e, t) => /* @__PURE__ */ s("div", {
 			className: "flex items-center gap-4 rounded-lg border border-border-subtle bg-bg-surface p-4",
 			children: [
-				/* @__PURE__ */ a(l, { className: "size-10 rounded-full" }),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ o(u, { className: "size-10 rounded-full" }),
+				/* @__PURE__ */ s("div", {
 					className: "flex-1 space-y-2",
-					children: [/* @__PURE__ */ a(l, { className: "h-4 w-1/3" }), /* @__PURE__ */ a(l, { className: "h-3 w-1/2" })]
+					children: [/* @__PURE__ */ o(u, { className: "h-4 w-1/3" }), /* @__PURE__ */ o(u, { className: "h-3 w-1/2" })]
 				}),
-				/* @__PURE__ */ a(l, { className: "h-4 w-16" })
+				/* @__PURE__ */ o(u, { className: "h-4 w-16" })
 			]
 		}, t))
 	});
 }
-function x({ title: e = "Something went wrong", description: t = "We could not load this data. Please try again.", onRetry: n }) {
-	return /* @__PURE__ */ o("div", {
+function C({ title: e = "Something went wrong", description: t = "We could not load this data. Please try again.", onRetry: n }) {
+	return /* @__PURE__ */ s("div", {
 		className: "flex flex-col items-center justify-center rounded-lg border border-status-error-text/40 bg-status-error-bg px-6 py-12 text-center",
 		children: [
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "mb-4 flex size-12 items-center justify-center rounded-full bg-bg-surface text-status-error-text",
-				children: /* @__PURE__ */ a(i, {
+				children: /* @__PURE__ */ o(a, {
 					className: "size-6",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ a("h3", {
+			/* @__PURE__ */ o("h3", {
 				className: "text-base font-semibold text-text-primary",
 				children: e
 			}),
-			/* @__PURE__ */ a("p", {
+			/* @__PURE__ */ o("p", {
 				className: "mt-1 max-w-md text-sm text-text-secondary",
 				children: t
 			}),
-			n ? /* @__PURE__ */ o(c, {
+			n ? /* @__PURE__ */ s(l, {
 				variant: "outline",
 				size: "sm",
 				className: "mt-4",
 				onClick: n,
-				children: [/* @__PURE__ */ a(r, {
+				children: [/* @__PURE__ */ o(i, {
 					className: "size-4",
 					"aria-hidden": "true"
 				}), "Retry"]
@@ -219,6 +227,6 @@ function x({ title: e = "Something went wrong", description: t = "We could not l
 	});
 }
 //#endregion
-export { v as AllocationBars, y as EmptyState, x as ErrorState, b as LoadingState, g as SectionShell, h as deltaToneClass, d as formatCompact, p as formatDate, u as formatMoney, f as formatPct, m as statusBadgeVariant };
+export { b as AllocationBars, x as EmptyState, C as ErrorState, S as LoadingState, _ as SectionShell, g as deltaToneClass, f as formatCompact, m as formatDate, d as formatMoney, p as formatPct, h as statusBadgeVariant };
 //# sourceMappingURL=_shared.js.map

package/dist/brainyrich/pages/_shared.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_shared.js","names":[],"sources":["../../../src/brainyrich/pages/_shared.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ArrowDownRight, ArrowUpRight, Inbox, Minus, RefreshCw, TriangleAlert } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Badge, Button, Card, CardContent, Skeleton } from '@burdenoff/fe-libs/ui';\n\n// ============================================================================\n// Formatters\n// ============================================================================\n\n/** USD currency, no cents. Pass a currency code to override. /\nexport function formatMoney(value: number, currency = 'USD'): string {\n if (!Number.isFinite(value)) return '—';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency,\n maximumFractionDigits: 0,\n }).format(value);\n}\n\n/* Compact money/number, e.g. 1.2M, 950K. /\nexport function formatCompact(value: number, currency?: string): string {\n if (!Number.isFinite(value)) return '—';\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n ...(currency ? { style: 'currency', currency } : {}),\n }).format(value);\n}\n\n/* Percentage from a whole-number percent (e.g. 12.5 → \"12.5%\"). /\nexport function formatPct(value: number \| null \| undefined, fractionDigits = 1): string {\n if (value === null \|\| value === undefined \|\| !Number.isFinite(value)) return '—';\n return `${value.toFixed(fractionDigits)}%`;\n}\n\n/\n Guarded date formatter. Only wraps a present ISO string in `new Date()` at\n * render time — never calls `.getTime()` on a raw scalar and never `new Date(0)`.\n * Returns an em-dash for absent/invalid values.\n /\nexport function formatDate(iso?: string \| null): string {\n if (!iso) return '—';\n const d = new Date(iso);\n if (Number.isNaN(d.getTime())) return '—';\n return new Intl.DateTimeFormat('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n }).format(d);\n}\n\n// ============================================================================\n// Status → badge variant (semantic, no raw colors)\n// ============================================================================\n\n/\n Map a domain status/severity string to a shadcn Badge variant. Accepts the\n * Bra* enum members (ACTIVE, AT_RISK, HIGH, …) case-insensitively so pages can\n * pass raw enum values.\n /\nexport function statusBadgeVariant(\n status: string\n): 'default' \| 'secondary' \| 'destructive' \| 'outline' {\n const s = status.toUpperCase();\n if (['ACTIVE', 'ACHIEVED', 'ON_TRACK', 'AHEAD', 'RESOLVED', 'EXECUTED', 'APPROVED'].includes(s))\n return 'default';\n if (['AT_RISK', 'HIGH', 'CRITICAL', 'ABANDONED', 'REJECTED', 'CANCELLED', 'CLOSED'].includes(s))\n return 'destructive';\n if (\n ['ONBOARDING', 'PROSPECT', 'ON_HOLD', 'BEHIND', 'DRAFT', 'PROPOSED', 'MEDIUM', 'LOW'].includes(\n s\n )\n )\n return 'secondary';\n return 'outline';\n}\n\n/* Semantic text-color token for a signed delta (color is never the only signal). /\nexport function deltaToneClass(value: number): string {\n if (value > 0) return 'text-status-success-text';\n if (value < 0) return 'text-status-error-text';\n return 'text-text-secondary';\n}\n\n// ============================================================================\n// Section shell + KPIs\n// ============================================================================\n\ninterface SectionShellProps {\n title: string;\n description: string;\n actionLabel?: string;\n onAction?: () => void;\n actions?: ReactNode;\n badges?: string[];\n children: ReactNode;\n}\n\nexport function SectionShell({\n title,\n description,\n actionLabel,\n onAction,\n actions,\n badges = [],\n children,\n}: SectionShellProps) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n <div>\n <h1 className=\"text-2xl font-semibold text-text-primary\">{title}</h1>\n <p className=\"text-sm text-text-secondary\">{description}</p>\n </div>\n <div className=\"flex items-center gap-2\">\n {badges.map((badge) => (\n <Badge key={badge} variant=\"secondary\">\n {badge}\n </Badge>\n ))}\n {actions}\n {actionLabel ? (\n <Button size=\"sm\" onClick={onAction}>\n {actionLabel}\n </Button>\n ) : null}\n </div>\n </div>\n {children}\n </div>\n );\n}\n\nexport interface KpiItem {\n label: string;\n value: string;\n /* Optional signed delta rendered as a DeltaBadge (icon + sign + color). /\n delta?: number;\n /* Optional free-text trend line (neutral tone unless deltaTone provided). /\n trend?: string;\n deltaTone?: 'positive' \| 'negative' \| 'neutral';\n}\n\nexport function KpiGrid({ items }: { items: KpiItem[] }) {\n const reduce = useReducedMotion();\n return (\n <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n {items.map((item, i) => (\n <motion.div\n key={item.label}\n initial={reduce ? false : { opacity: 0, y: 8 }}\n animate={{ opacity: 1, y: 0 }}\n transition={{ duration: 0.25, ease: 'easeOut', delay: i 0.04 }}\n >\n <Card className=\"h-full transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]\">\n <CardContent className=\"space-y-1.5 p-4\">\n <p className=\"text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {item.label}\n </p>\n <p className=\"text-2xl font-semibold tracking-tight text-text-primary\">\n {item.value}\n </p>\n {item.delta !== undefined ? (\n <DeltaBadge value={item.delta} />\n ) : item.trend ? (\n <p\n className={\n item.deltaTone === 'positive'\n ? 'text-xs text-status-success-text'\n : item.deltaTone === 'negative'\n ? 'text-xs text-status-error-text'\n : 'text-xs text-text-secondary'\n }\n >\n {item.trend}\n </p>\n ) : null}\n </CardContent>\n </Card>\n </motion.div>\n ))}\n </div>\n );\n}\n\n// ============================================================================\n// Delta badge — icon + sign + semantic color (color never the only signal)\n// ============================================================================\n\nexport function DeltaBadge({\n value,\n suffix = '%',\n className = '',\n}: {\n value: number;\n suffix?: string;\n className?: string;\n}) {\n const positive = value > 0;\n const negative = value < 0;\n const Icon = positive ? ArrowUpRight : negative ? ArrowDownRight : Minus;\n const tone = 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 = positive ? '+' : '';\n return (\n <span\n className={`inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium ${tone} ${className}`}\n >\n <Icon className=\"size-3\" aria-hidden=\"true\" />\n {sign}\n {Number.isFinite(value) ? value.toFixed(1) : '—'}\n {suffix}\n </span>\n );\n}\n\n// ============================================================================\n// Allocation bars — tokenized horizontal bar primitive\n// ============================================================================\n\nexport type AllocationTone = 'default' \| 'positive' \| 'negative' \| 'warning' \| 'accent';\n\nconst TONE_FILL: Record<AllocationTone, string> = {\n default: 'bg-primary',\n positive: 'bg-status-success-bg',\n negative: 'bg-status-error-bg',\n warning: 'bg-status-warning-bg',\n accent: 'bg-accent-teal',\n};\n\nexport interface AllocationDatum {\n label: string;\n /** Percentage 0–100 for the bar width. /\n value: number;\n tone?: AllocationTone;\n /* Optional right-aligned caption (e.g. formatted money). Defaults to the %. */\n caption?: string;\n}\n\nexport function AllocationBars({ data }: { data: AllocationDatum[] }) {\n const reduce = useReducedMotion();\n const rows = data.filter((d) => Number.isFinite(d.value));\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No allocation data.</p>;\n }\n return (\n <div className=\"space-y-3.5\">\n {rows.map((d) => {\n const width = Math.max(0, Math.min(100, d.value));\n return (\n <div key={d.label} className=\"space-y-1.5\">\n <div className=\"flex items-center justify-between text-xs\">\n <span className=\"font-medium text-text-primary\">{d.label}</span>\n <span className=\"tabular-nums text-text-secondary\">\n {d.caption ?? formatPct(d.value)}\n </span>\n </div>\n <div\n className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\"\n role=\"progressbar\"\n aria-valuenow={Math.round(width)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={d.label}\n >\n <motion.div\n className={`h-full rounded-full ${TONE_FILL[d.tone ?? 'default']}`}\n initial={reduce ? false : { width: 0 }}\n animate={{ width: `${width}%` }}\n transition={{ duration: 0.4, ease: 'easeOut' }}\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n\n// ============================================================================\n// Empty / Loading / Error states (designed, shared)\n// ============================================================================\n\nexport function EmptyState({\n icon,\n title,\n description,\n action,\n}: {\n icon?: ReactNode;\n title: string;\n description?: string;\n action?: ReactNode;\n}) {\n return (\n <div className=\"flex flex-col items-center justify-center rounded-lg border border-dashed border-border-subtle bg-bg-surface px-6 py-12 text-center\">\n <div className=\"mb-4 flex size-12 items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n {icon ?? <Inbox className=\"size-6\" aria-hidden=\"true\" />}\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>\n {description ? (\n <p className=\"mt-1 max-w-md text-sm text-text-secondary\">{description}</p>\n ) : null}\n {action ? <div className=\"mt-4\">{action}</div> : null}\n </div>\n );\n}\n\nexport function LoadingState({ rows = 4 }: { rows?: number }) {\n return (\n <div className=\"space-y-3\" aria-busy=\"true\" aria-live=\"polite\">\n {Array.from({ length: rows }).map((_, i) => (\n <div\n key={i}\n className=\"flex items-center gap-4 rounded-lg border border-border-subtle bg-bg-surface p-4\"\n >\n <Skeleton className=\"size-10 rounded-full\" />\n <div className=\"flex-1 space-y-2\">\n <Skeleton className=\"h-4 w-1/3\" />\n <Skeleton className=\"h-3 w-1/2\" />\n </div>\n <Skeleton className=\"h-4 w-16\" />\n </div>\n ))}\n </div>\n );\n}\n\nexport function ErrorState({\n title = 'Something went wrong',\n description = 'We could not load this data. Please try again.',\n onRetry,\n}: {\n title?: string;\n description?: string;\n onRetry?: () => void;\n}) {\n return (\n <div className=\"flex flex-col items-center justify-center rounded-lg border border-status-error-text/40 bg-status-error-bg px-6 py-12 text-center\">\n <div className=\"mb-4 flex size-12 items-center justify-center rounded-full bg-bg-surface text-status-error-text\">\n <TriangleAlert className=\"size-6\" aria-hidden=\"true\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>\n <p className=\"mt-1 max-w-md text-sm text-text-secondary\">{description}</p>\n {onRetry ? (\n <Button variant=\"outline\" size=\"sm\" className=\"mt-4\" onClick={onRetry}>\n <RefreshCw className=\"size-4\" aria-hidden=\"true\" />\n Retry\n </Button>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"_shared.js","names":[],"sources":["../../../src/brainyrich/pages/_shared.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\nimport { ArrowDownRight, ArrowUpRight, Inbox, Minus, RefreshCw, TriangleAlert } from 'lucide-react';\nimport { Badge, Button, Card, CardContent, Skeleton } from '@burdenoff/fe-libs/ui';\nimport { FadeIn, useReducedMotion } from '../components/viz';\n\n// ============================================================================\n// Formatters\n// ============================================================================\n\n/** USD currency, no cents. Pass a currency code to override. /\nexport function formatMoney(value: number, currency = 'USD'): string {\n if (!Number.isFinite(value)) return '—';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency,\n maximumFractionDigits: 0,\n }).format(value);\n}\n\n/* Compact money/number, e.g. 1.2M, 950K. /\nexport function formatCompact(value: number, currency?: string): string {\n if (!Number.isFinite(value)) return '—';\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n ...(currency ? { style: 'currency', currency } : {}),\n }).format(value);\n}\n\n/* Percentage from a whole-number percent (e.g. 12.5 → \"12.5%\"). /\nexport function formatPct(value: number \| null \| undefined, fractionDigits = 1): string {\n if (value === null \|\| value === undefined \|\| !Number.isFinite(value)) return '—';\n return `${value.toFixed(fractionDigits)}%`;\n}\n\n/\n Guarded date formatter. Only wraps a present ISO string in `new Date()` at\n * render time — never calls `.getTime()` on a raw scalar and never `new Date(0)`.\n * Returns an em-dash for absent/invalid values.\n /\nexport function formatDate(iso?: string \| null): string {\n if (!iso) return '—';\n const d = new Date(iso);\n if (Number.isNaN(d.getTime())) return '—';\n return new Intl.DateTimeFormat('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n }).format(d);\n}\n\n// ============================================================================\n// Status → badge variant (semantic, no raw colors)\n// ============================================================================\n\n/\n Map a domain status/severity string to a shadcn Badge variant. Accepts the\n * Bra* enum members (ACTIVE, AT_RISK, HIGH, …) case-insensitively so pages can\n * pass raw enum values.\n /\nexport function statusBadgeVariant(\n status: string\n): 'default' \| 'secondary' \| 'destructive' \| 'outline' {\n const s = status.toUpperCase();\n if (['ACTIVE', 'ACHIEVED', 'ON_TRACK', 'AHEAD', 'RESOLVED', 'EXECUTED', 'APPROVED'].includes(s))\n return 'default';\n if (['AT_RISK', 'HIGH', 'CRITICAL', 'ABANDONED', 'REJECTED', 'CANCELLED', 'CLOSED'].includes(s))\n return 'destructive';\n if (\n ['ONBOARDING', 'PROSPECT', 'ON_HOLD', 'BEHIND', 'DRAFT', 'PROPOSED', 'MEDIUM', 'LOW'].includes(\n s\n )\n )\n return 'secondary';\n return 'outline';\n}\n\n/* Semantic text-color token for a signed delta (color is never the only signal). /\nexport function deltaToneClass(value: number): string {\n if (value > 0) return 'text-status-success-text';\n if (value < 0) return 'text-status-error-text';\n return 'text-text-secondary';\n}\n\n// ============================================================================\n// Section shell + KPIs\n// ============================================================================\n\ninterface SectionShellProps {\n title: string;\n description: string;\n actionLabel?: string;\n onAction?: () => void;\n actions?: ReactNode;\n badges?: string[];\n children: ReactNode;\n}\n\nexport function SectionShell({\n title,\n description,\n actionLabel,\n onAction,\n actions,\n badges = [],\n children,\n}: SectionShellProps) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n <div>\n <h1 className=\"text-2xl font-semibold text-text-primary\">{title}</h1>\n <p className=\"text-sm text-text-secondary\">{description}</p>\n </div>\n <div className=\"flex items-center gap-2\">\n {badges.map((badge) => (\n <Badge key={badge} variant=\"secondary\">\n {badge}\n </Badge>\n ))}\n {actions}\n {actionLabel ? (\n <Button size=\"sm\" onClick={onAction}>\n {actionLabel}\n </Button>\n ) : null}\n </div>\n </div>\n {children}\n </div>\n );\n}\n\nexport interface KpiItem {\n label: string;\n value: string;\n /* Optional signed delta rendered as a DeltaBadge (icon + sign + color). /\n delta?: number;\n /* Optional free-text trend line (neutral tone unless deltaTone provided). /\n trend?: string;\n deltaTone?: 'positive' \| 'negative' \| 'neutral';\n}\n\nexport function KpiGrid({ items }: { items: KpiItem[] }) {\n return (\n <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n {items.map((item, i) => (\n <FadeIn key={item.label} index={i}>\n <Card className=\"h-full transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]\">\n <CardContent className=\"space-y-1.5 p-4\">\n <p className=\"text-xs font-medium uppercase tracking-wide text-text-secondary\">\n {item.label}\n </p>\n <p className=\"text-2xl font-semibold tracking-tight text-text-primary\">\n {item.value}\n </p>\n {item.delta !== undefined ? (\n <DeltaBadge value={item.delta} />\n ) : item.trend ? (\n <p\n className={\n item.deltaTone === 'positive'\n ? 'text-xs text-status-success-text'\n : item.deltaTone === 'negative'\n ? 'text-xs text-status-error-text'\n : 'text-xs text-text-secondary'\n }\n >\n {item.trend}\n </p>\n ) : null}\n </CardContent>\n </Card>\n </FadeIn>\n ))}\n </div>\n );\n}\n\n// ============================================================================\n// Delta badge — icon + sign + semantic color (color never the only signal)\n// ============================================================================\n\nexport function DeltaBadge({\n value,\n suffix = '%',\n className = '',\n}: {\n value: number;\n suffix?: string;\n className?: string;\n}) {\n const positive = value > 0;\n const negative = value < 0;\n const Icon = positive ? ArrowUpRight : negative ? ArrowDownRight : Minus;\n const tone = 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 = positive ? '+' : '';\n return (\n <span\n className={`inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium ${tone} ${className}`}\n >\n <Icon className=\"size-3\" aria-hidden=\"true\" />\n {sign}\n {Number.isFinite(value) ? value.toFixed(1) : '—'}\n {suffix}\n </span>\n );\n}\n\n// ============================================================================\n// Allocation bars — tokenized horizontal bar primitive\n// ============================================================================\n\nexport type AllocationTone = 'default' \| 'positive' \| 'negative' \| 'warning' \| 'accent';\n\nconst TONE_FILL: Record<AllocationTone, string> = {\n default: 'bg-primary',\n positive: 'bg-status-success-bg',\n negative: 'bg-status-error-bg',\n warning: 'bg-status-warning-bg',\n accent: 'bg-accent-teal',\n};\n\nexport interface AllocationDatum {\n label: string;\n /* Percentage 0–100 for the bar width. /\n value: number;\n tone?: AllocationTone;\n /* Optional right-aligned caption (e.g. formatted money). Defaults to the %. /\n caption?: string;\n}\n\n/\n Single allocation bar fill. Starts at 0 width and grows to `width`% after\n * mount via a CSS transition; instant (no transition) under reduced motion.\n */\nfunction AllocationFill({ width, className }: { width: number; className: string }) {\n const reduce = useReducedMotion();\n // Reduced motion starts at the final width (instant); otherwise start at 0 and\n // grow on the next frame via the CSS width transition.\n const [w, setW] = useState(reduce ? width : 0);\n\n useEffect(() => {\n const id = requestAnimationFrame(() => setW(width));\n return () => cancelAnimationFrame(id);\n }, [width]);\n\n return (\n <div\n className={className}\n style={{ width: `${w}%`, transition: reduce ? 'none' : 'width 500ms ease' }}\n />\n );\n}\n\nexport function AllocationBars({ data }: { data: AllocationDatum[] }) {\n const rows = data.filter((d) => Number.isFinite(d.value));\n if (rows.length === 0) {\n return <p className=\"text-sm text-text-secondary\">No allocation data.</p>;\n }\n return (\n <div className=\"space-y-3.5\">\n {rows.map((d) => {\n const width = Math.max(0, Math.min(100, d.value));\n return (\n <div key={d.label} className=\"space-y-1.5\">\n <div className=\"flex items-center justify-between text-xs\">\n <span className=\"font-medium text-text-primary\">{d.label}</span>\n <span className=\"tabular-nums text-text-secondary\">\n {d.caption ?? formatPct(d.value)}\n </span>\n </div>\n <div\n className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\"\n role=\"progressbar\"\n aria-valuenow={Math.round(width)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={d.label}\n >\n <AllocationFill\n width={width}\n className={`h-full rounded-full ${TONE_FILL[d.tone ?? 'default']}`}\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n\n// ============================================================================\n// Empty / Loading / Error states (designed, shared)\n// ============================================================================\n\nexport function EmptyState({\n icon,\n title,\n description,\n action,\n}: {\n icon?: ReactNode;\n title: string;\n description?: string;\n action?: ReactNode;\n}) {\n return (\n <div className=\"flex flex-col items-center justify-center rounded-lg border border-dashed border-border-subtle bg-bg-surface px-6 py-12 text-center\">\n <div className=\"mb-4 flex size-12 items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n {icon ?? <Inbox className=\"size-6\" aria-hidden=\"true\" />}\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>\n {description ? (\n <p className=\"mt-1 max-w-md text-sm text-text-secondary\">{description}</p>\n ) : null}\n {action ? <div className=\"mt-4\">{action}</div> : null}\n </div>\n );\n}\n\nexport function LoadingState({ rows = 4 }: { rows?: number }) {\n return (\n <div className=\"space-y-3\" aria-busy=\"true\" aria-live=\"polite\">\n {Array.from({ length: rows }).map((_, i) => (\n <div\n key={i}\n className=\"flex items-center gap-4 rounded-lg border border-border-subtle bg-bg-surface p-4\"\n >\n <Skeleton className=\"size-10 rounded-full\" />\n <div className=\"flex-1 space-y-2\">\n <Skeleton className=\"h-4 w-1/3\" />\n <Skeleton className=\"h-3 w-1/2\" />\n </div>\n <Skeleton className=\"h-4 w-16\" />\n </div>\n ))}\n </div>\n );\n}\n\nexport function ErrorState({\n title = 'Something went wrong',\n description = 'We could not load this data. Please try again.',\n onRetry,\n}: {\n title?: string;\n description?: string;\n onRetry?: () => void;\n}) {\n return (\n <div className=\"flex flex-col items-center justify-center rounded-lg border border-status-error-text/40 bg-status-error-bg px-6 py-12 text-center\">\n <div className=\"mb-4 flex size-12 items-center justify-center rounded-full bg-bg-surface text-status-error-text\">\n <TriangleAlert className=\"size-6\" aria-hidden=\"true\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">{title}</h3>\n <p className=\"mt-1 max-w-md text-sm text-text-secondary\">{description}</p>\n {onRetry ? (\n <Button variant=\"outline\" size=\"sm\" className=\"mt-4\" onClick={onRetry}>\n <RefreshCw className=\"size-4\" aria-hidden=\"true\" />\n Retry\n </Button>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-brainyrich",
-  "version": "2026.706.3",
+  "version": "2026.706.4",
   "description": "Burdenoff BrainyRich Microfrontend",
   "type": "module",
   "files": [
@@ -40,10 +40,8 @@
   "dependencies": {
     "@apollo/client": "^4.0.11",
     "@burdenoff/fe-libs": "2026.704.3",
-    "@emotion/is-prop-valid": "^1.3.1",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.0.0",
     "graphql": "^16.10.0",
     "lucide-react": "^0.468.0",
     "react": "^19.0.0",

package/dist/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js DELETED Viewed

@@ -1,13 +0,0 @@
-import { __esmMin as e, __exportAll as t } from "../../../../_virtual/_rolldown/runtime.js";
-import { init_emotion_memoize_esm as n, memoize as r } from "../../memoize/dist/emotion-memoize.esm.js";
-//#region node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
-var i = /* @__PURE__ */ t({ default: () => o }), a, o, s = e((() => {
-	n(), a = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/, o = /* @__PURE__ */ r(function(e) {
-		return a.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91;
-	});
-}));
-//#endregion
-s();
-export { i as emotion_is_prop_valid_esm_exports, s as init_emotion_is_prop_valid_esm };
-//# sourceMappingURL=emotion-is-prop-valid.esm.js.map