@fayz-ai/ui 0.9.0-next.1 → 0.10.0

package/src/dashboard/DashboardCanvas.tsx

@@ -1,210 +0,0 @@
-import * as React from 'react'
-import { EyeOff } from 'lucide-react'
-import {
-  usePluginRuntime,
-  getDashboardWidgets,
-  resolvePluginComponent,
-  hashRouterAdapter,
-  type DashboardLayoutConfig,
-  type DashboardSurface,
-  type DashboardWidgetDef,
-} from '@fayz-ai/core'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../primitives/card'
-import { DashboardGrid, type DashboardGridItem } from './DashboardGrid'
-import { resolveDashboardLayout, type LaidOutWidget } from './layout'
-import { useDashboardPreferences } from './preferences'
-import { DashboardRangeProvider, DashboardRangeControl, type DashboardRange } from './DashboardRange'
-import { DashboardCustomizeMenu } from './DashboardCustomizeMenu'
-
-/** Wrap a widget so a hide button fades in on hover (top-right corner). */
-function HoverHide({ id, onHide, children }: { id: string; onHide?: (id: string) => void; children: React.ReactNode }) {
-  if (!onHide) return <>{children}</>
-  return (
-    <div className="group relative h-full">
-      {children}
-      <button
-        type="button"
-        onClick={() => onHide(id)}
-        title="Hide widget"
-        aria-label="Hide widget"
-        className="absolute right-2 top-2 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-background/90 text-muted-foreground opacity-0 shadow-sm transition-opacity hover:text-foreground group-hover:opacity-100"
-      >
-        <EyeOff className="h-3.5 w-3.5" />
-      </button>
-    </div>
-  )
-}
-
-function toGridItems(laidOut: LaidOutWidget[], onHide?: (id: string) => void): DashboardGridItem[] {
-  return laidOut.map(({ def, span }) => {
-    const Component = resolvePluginComponent(def)
-    const node = Component ? <Component {...(def.props ?? {})} /> : null
-    return { id: def.id, span, node: <HoverHide id={def.id} onHide={onHide}>{node}</HoverHide> }
-  })
-}
-
-// ---------------------------------------------------------------------------
-// Navigation — widgets (e.g. onboarding) call useDashboardNavigate() to route.
-// Defaults to the shared hash router so widgets work without explicit wiring.
-// ---------------------------------------------------------------------------
-
-const DashboardNavigateContext = React.createContext<(path: string) => void>((path) =>
-  hashRouterAdapter().navigate(path),
-)
-
-export const DashboardNavigateProvider = DashboardNavigateContext.Provider
-
-export function useDashboardNavigate(): (path: string) => void {
-  return React.useContext(DashboardNavigateContext)
-}
-
-// ---------------------------------------------------------------------------
-// Shared widget grid — used by DashboardCanvas (registry) and by standalone
-// callers (e.g. the dashboard plugin's legacy DashboardPage shim). Resolves the
-// layout, then renders each widget by span.
-// ---------------------------------------------------------------------------
-
-export function WidgetGrid({ widgets, appLayout, surface }: {
-  widgets: DashboardWidgetDef[]
-  appLayout?: DashboardLayoutConfig
-  surface: DashboardSurface
-}) {
-  const { prefs, setVisible } = useDashboardPreferences(surface)
-  const laidOut = resolveDashboardLayout(widgets, appLayout, prefs ?? undefined)
-  return <DashboardGrid items={toGridItems(laidOut, (id) => setVisible(id, false))} />
-}
-
-// ---------------------------------------------------------------------------
-// DashboardCanvas — the registry-driven renderer. Serves the global app home
-// (surface="home", all domains) and a plugin's own overview (surface="plugin-home"
-// + domain). Widgets a plugin registers once appear on both.
-// ---------------------------------------------------------------------------
-
-export interface DashboardCanvasProps {
-  surface: DashboardSurface
-  /** Restrict to one plugin's widgets (used for plugin-home). */
-  domain?: string
-  title?: string
-  subtitle?: string
-  /** Render the in-content title/subtitle. Default: true. */
-  showHeader?: boolean
-  /** App-level curation of which widgets show, their order and span. */
-  appLayout?: DashboardLayoutConfig
-  /** App-level widgets injected into this surface's grid without a plugin — e.g.
-   *  an "Ask the assistant" CTA. Merged with the registry widgets, then laid out
-   *  (respects each widget's span/defaultOrder). Filtered to this surface. */
-  extraWidgets?: DashboardWidgetDef[]
-  /** Show a shared time-range control (sticky, top-right). Widgets read it via
-   *  useDashboardRange(). Pass `true` for defaults or an options object. */
-  range?: boolean | DashboardRangeOptions
-  /** Show the "Customize" menu so users can choose which widgets appear
-   *  (persisted per surface). Default: true. */
-  customizable?: boolean
-  /** Label for the customize menu trigger. */
-  customizeLabel?: string
-  /** Initial visibility before user prefs: 'default' honors each widget's
-   *  `defaultVisible` (used by the global home to curate a starting set); 'all'
-   *  shows every eligible widget. Defaults to 'all' on a plugin-home, 'default'
-   *  on the global home. */
-  initialVisibility?: 'default' | 'all'
-  /** Route handler for widgets that navigate (defaults to the hash router). */
-  onNavigate?: (path: string) => void
-  className?: string
-}
-
-export interface DashboardRangeOptions {
-  options?: DashboardRange[]
-  default?: DashboardRange
-  onChange?: (range: DashboardRange) => void
-}
-
-export function DashboardCanvas({
-  surface, domain, title, subtitle, showHeader = true, appLayout, extraWidgets, range,
-  customizable = true, customizeLabel, initialVisibility, onNavigate, className,
-}: DashboardCanvasProps) {
-  const runtime = usePluginRuntime()
-  const registryWidgets = getDashboardWidgets(runtime, { surface, domain })
-  const widgets = React.useMemo<DashboardWidgetDef[]>(() => {
-    const extra = (extraWidgets ?? []).filter((w) => {
-      if (!(w.surfaces ?? ['home', 'plugin-home']).includes(surface)) return false
-      return !domain || w.domain === domain
-    })
-    return extra.length ? [...registryWidgets, ...extra] : registryWidgets
-  }, [registryWidgets, extraWidgets, surface, domain])
-  const rangeOpts: DashboardRangeOptions | null = range ? (range === true ? {} : range) : null
-
-  const forceAll = (initialVisibility ?? (surface === 'plugin-home' ? 'all' : 'default')) === 'all'
-  const { prefs, setVisible, reset } = useDashboardPreferences(surface, domain ?? 'home')
-  const laidOut = resolveDashboardLayout(widgets, appLayout, prefs ?? undefined, forceAll)
-  const visibleIds = React.useMemo(() => new Set(laidOut.map((w) => w.def.id)), [laidOut])
-
-  const hasControls = Boolean(rangeOpts) || (customizable && widgets.length > 0)
-  const headerBlock = showHeader && (title || subtitle) ? (
-    <div>
-      {title ? <h1 className="text-2xl font-semibold tracking-tight">{title}</h1> : null}
-      {subtitle ? <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p> : null}
-    </div>
-  ) : null
-
-  // Controls sit inline on the header row (right-aligned) — no separate band, so
-  // there's no empty gap above the content.
-  const topRow = (headerBlock || hasControls) ? (
-    <div className="flex items-start justify-between gap-4">
-      {headerBlock ?? <span />}
-      {hasControls ? (
-        <div className="flex shrink-0 items-center gap-2">
-          {customizable && widgets.length > 0 ? (
-            <DashboardCustomizeMenu
-              widgets={widgets}
-              visibleIds={visibleIds}
-              onToggle={setVisible}
-              onReset={reset}
-              label={customizeLabel}
-            />
-          ) : null}
-          {rangeOpts ? <DashboardRangeControl /> : null}
-        </div>
-      ) : null}
-    </div>
-  ) : null
-
-  const content = (
-    <div className={className ?? 'space-y-6 p-6'}>
-      {topRow}
-
-      {widgets.length === 0 ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>Welcome!</CardTitle>
-            <CardDescription>Your dashboard will show key metrics and information here.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Enable plugins or register dashboard widgets to populate this view.
-            </p>
-          </CardContent>
-        </Card>
-      ) : laidOut.length === 0 ? (
-        <Card>
-          <CardContent className="p-6 text-sm text-muted-foreground">
-            All widgets are hidden. Use “Customize” to choose what to show.
-          </CardContent>
-        </Card>
-      ) : (
-        <DashboardGrid items={toGridItems(laidOut)} />
-      )}
-    </div>
-  )
-
-  const navWrapped = onNavigate
-    ? <DashboardNavigateProvider value={onNavigate}>{content}</DashboardNavigateProvider>
-    : content
-
-  return rangeOpts
-    ? (
-      <DashboardRangeProvider options={rangeOpts.options} defaultRange={rangeOpts.default} onChange={rangeOpts.onChange}>
-        {navWrapped}
-      </DashboardRangeProvider>
-    )
-    : navWrapped
-}

package/src/dashboard/DashboardCustomizeMenu.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { SlidersHorizontal, RotateCcw } from 'lucide-react'
-import type { DashboardWidgetDef } from '@fayz-ai/core'
-import { useTranslation } from '@fayz-ai/core'
-import { Button } from '../primitives/button'
-import {
-  Dropdown, DropdownTrigger, DropdownContent, DropdownLabel, DropdownSeparator, DropdownCheckboxItem, DropdownItem,
-} from '../primitives/dropdown'
-
-export interface DashboardCustomizeMenuProps {
-  /** Full set of registered widgets for this surface. */
-  widgets: DashboardWidgetDef[]
-  /** Ids currently visible. */
-  visibleIds: Set<string>
-  onToggle: (widgetId: string, visible: boolean) => void
-  onReset: () => void
-  label?: string
-}
-
-/** Gear menu to choose which widgets appear on the dashboard (persisted). */
-export function DashboardCustomizeMenu({ widgets, visibleIds, onToggle, onReset, label }: DashboardCustomizeMenuProps) {
-  const t = useTranslation()
-  if (widgets.length === 0) return null
-  return (
-    <Dropdown>
-      <DropdownTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <SlidersHorizontal className="h-3.5 w-3.5" />
-          {label ?? 'Customize'}
-        </Button>
-      </DropdownTrigger>
-      <DropdownContent align="end" className="max-h-[70vh] w-60 overflow-y-auto">
-        <DropdownLabel>{label ?? 'Show widgets'}</DropdownLabel>
-        <DropdownSeparator />
-        {widgets.map((w) => (
-          <DropdownCheckboxItem
-            key={w.id}
-            checked={visibleIds.has(w.id)}
-            onCheckedChange={(checked) => onToggle(w.id, Boolean(checked))}
-            onSelect={(e) => e.preventDefault()}
-          >
-            {t(w.title)}
-          </DropdownCheckboxItem>
-        ))}
-        <DropdownSeparator />
-        <DropdownItem onSelect={() => onReset()}>
-          <RotateCcw className="mr-2 h-3.5 w-3.5" />
-          {'Reset to defaults'}
-        </DropdownItem>
-      </DropdownContent>
-    </Dropdown>
-  )
-}

package/src/dashboard/DashboardGrid.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-
-export interface DashboardGridItem {
-  id: string
-  /** Column span on the 4-col grid (defaults to 1). */
-  span?: number
-  node: React.ReactNode
-}
-
-/** Literal span → Tailwind classes (kept literal so the JIT compiler picks them up). */
-const SPAN_CLASS: Record<number, string> = {
-  1: '',
-  2: 'sm:col-span-2',
-  3: 'sm:col-span-2 lg:col-span-3',
-  4: 'sm:col-span-2 lg:col-span-4',
-}
-
-export interface DashboardGridProps {
-  items: DashboardGridItem[]
-  className?: string
-}
-
-/** Responsive 4-col dashboard grid — the layout every dashboard shares. */
-export function DashboardGrid({ items, className }: DashboardGridProps) {
-  return (
-    <div className={cn('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4', className)}>
-      {items.map((item) => (
-        <div key={item.id} className={SPAN_CLASS[Math.min(Math.max(item.span ?? 1, 1), 4)] ?? ''}>
-          {item.node}
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/dashboard/DashboardRange.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react'
-import { SegmentedControl } from '../primitives/segmented-control'
-
-// ---------------------------------------------------------------------------
-// Shared dashboard time range. The canvas provides it; widgets read it via
-// useDashboardRange() and refetch/filter their data accordingly.
-// ---------------------------------------------------------------------------
-
-export type DashboardRange = string
-
-export const DEFAULT_RANGE_OPTIONS: DashboardRange[] = ['7d', '30d', '90d']
-
-interface DashboardRangeContextValue {
-  range: DashboardRange
-  setRange: (range: DashboardRange) => void
-  options: DashboardRange[]
-}
-
-const DashboardRangeContext = React.createContext<DashboardRangeContextValue | null>(null)
-
-/**
- * Read the shared dashboard range. Returns null when no range control is
- * mounted, so widgets can stay range-agnostic.
- */
-export function useDashboardRange(): DashboardRangeContextValue | null {
-  return React.useContext(DashboardRangeContext)
-}
-
-export interface DashboardRangeProviderProps {
-  options?: DashboardRange[]
-  defaultRange?: DashboardRange
-  onChange?: (range: DashboardRange) => void
-  children: React.ReactNode
-}
-
-export function DashboardRangeProvider({
-  options = DEFAULT_RANGE_OPTIONS, defaultRange, onChange, children,
-}: DashboardRangeProviderProps) {
-  const [range, setRangeState] = React.useState<DashboardRange>(defaultRange ?? options[1] ?? options[0] ?? '30d')
-  const setRange = React.useCallback((r: DashboardRange) => {
-    setRangeState(r)
-    onChange?.(r)
-  }, [onChange])
-  const value = React.useMemo(() => ({ range, setRange, options }), [range, setRange, options])
-  return <DashboardRangeContext.Provider value={value}>{children}</DashboardRangeContext.Provider>
-}
-
-/** Segmented 7d / 30d / 90d control bound to the shared dashboard range.
- *  Thin wrapper over the canonical SegmentedControl primitive. */
-export function DashboardRangeControl({ className }: { className?: string }) {
-  const ctx = useDashboardRange()
-  if (!ctx) return null
-  return (
-    <SegmentedControl
-      options={ctx.options}
-      value={ctx.range}
-      onChange={ctx.setRange}
-      className={className}
-      aria-label="Time range"
-    />
-  )
-}

package/src/dashboard/GoldCard.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-
-export interface GoldCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Brand-colored hero variant — `bg-primary text-primary-foreground` with a
-   * soft branded shadow. Use for the headline card (e.g. a balance hero). When
-   * false (default) it's a plain surface card (`bg-card` + border).
-   */
-  branded?: boolean
-}
-
-/**
- * GoldCard — a generic, reusable rounded card wrapper for dashboard surfaces.
- *
- * The `branded` variant paints the card in the app's primary color so a single
- * hero (balance, headline KPI, CTA) pops against the neutral grid. Both variants
- * are internally full-width so they reflow cleanly inside the responsive
- * DashboardGrid (full-width on mobile, cell-width on desktop).
- */
-export const GoldCard = React.forwardRef<HTMLDivElement, GoldCardProps>(
-  ({ branded = false, className, children, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'h-full rounded-3xl p-5',
-        branded
-          ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
-          : 'border border-border bg-card text-card-foreground shadow-sm',
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  ),
-)
-GoldCard.displayName = 'GoldCard'

package/src/dashboard/KpiCard.tsx

@@ -1,238 +0,0 @@
-import * as React from 'react'
-import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
-import { renderIcon } from './icon'
-import type { KpiCurrency, IconRef, KpiFormat, KpiValue, KpiTrend } from './types'
-
-export function formatKpiValue(value: number, format?: KpiFormat, currency?: KpiCurrency): string {
-  const locale = currency?.locale ?? 'pt-BR'
-  switch (format) {
-    case 'currency':
-      return new Intl.NumberFormat(locale, { style: 'currency', currency: currency?.code ?? 'BRL', maximumFractionDigits: 0 }).format(value)
-    case 'percent':
-      return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)}%`
-    case 'duration':
-      return `${Math.round(value)} min`
-    default:
-      return new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)
-  }
-}
-
-function deriveTrend(current: number, previous: number | undefined, explicit: KpiTrend | undefined): KpiTrend | undefined {
-  if (explicit) return explicit
-  if (previous == null) return undefined
-  return current > previous ? 'up' : current < previous ? 'down' : 'neutral'
-}
-
-function TrendChip({ trend, delta, invert }: { trend: KpiTrend; delta: number | null; invert?: boolean }) {
-  if (trend === 'neutral') return null
-  const good = invert ? trend === 'down' : trend === 'up'
-  const Icon = trend === 'up' ? TrendingUp : TrendingDown
-  return (
-    <span className={cn(
-      'inline-flex items-center gap-0.5 text-xs font-medium',
-      good ? 'text-emerald-600' : 'text-rose-600',
-    )}>
-      <Icon className="h-3 w-3" />
-      {delta != null ? `${delta > 0 ? '+' : ''}${delta}%` : null}
-    </span>
-  )
-}
-
-/** Trend-aware accent: green when good, red when bad, theme-info when flat. */
-function trendColor(trend: KpiTrend | undefined, invert?: boolean): string {
-  if (!trend || trend === 'neutral') return 'hsl(var(--info))'
-  const good = invert ? trend === 'down' : trend === 'up'
-  return good ? '#10b981' : '#f43f5e'
-}
-
-/** Tiny dependency-free SVG sparkline (oldest → newest), with a soft area fill. */
-function Sparkline({ data, color }: { data: number[]; color: string }) {
-  const gid = React.useId()
-  if (!data || data.length < 2) return null
-  const W = 96, H = 32, P = 3
-  const min = Math.min(...data)
-  const max = Math.max(...data)
-  const span = max - min || 1
-  const step = (W - P * 2) / (data.length - 1)
-  const pts = data.map((d, i) => {
-    const x = P + i * step
-    const y = P + (H - P * 2) * (1 - (d - min) / span)
-    return [x, y] as const
-  })
-  const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ')
-  const area = `${line} L${pts[pts.length - 1][0].toFixed(1)},${H} L${pts[0][0].toFixed(1)},${H} Z`
-  return (
-    <svg viewBox={`0 0 ${W} ${H}`} className="h-8 w-24 shrink-0 overflow-visible" preserveAspectRatio="none" aria-hidden>
-      <defs>
-        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity="0.22" />
-          <stop offset="100%" stopColor={color} stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <path d={area} fill={`url(#${gid})`} />
-      <path d={line} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
-    </svg>
-  )
-}
-
-/** Semicircular radial gauge showing `value` as a fraction of `goal`. */
-function Gauge({ value, goal, color, children }: { value: number; goal: number; color: string; children: React.ReactNode }) {
-  const pct = goal > 0 ? Math.min(1, Math.max(0, value / goal)) : 0
-  const R = 40, CX = 50, CY = 46, SW = 9
-  const len = Math.PI * R
-  const d = `M ${CX - R} ${CY} A ${R} ${R} 0 0 1 ${CX + R} ${CY}`
-  return (
-    <div className="relative mx-auto w-full max-w-[160px]">
-      <svg viewBox="0 0 100 52" className="w-full" aria-hidden>
-        <path d={d} fill="none" stroke="hsl(var(--muted))" strokeWidth={SW} strokeLinecap="round" />
-        <path
-          d={d} fill="none" stroke={color} strokeWidth={SW} strokeLinecap="round"
-          strokeDasharray={len} strokeDashoffset={len * (1 - pct)}
-        />
-      </svg>
-      <div className="absolute inset-x-0 bottom-0 text-center text-2xl font-semibold tracking-tight text-foreground">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export interface KpiCardProps {
-  label: string
-  icon?: IconRef
-  /** Pre-formatted/sync value. Provide this OR `compute`. */
-  value?: React.ReactNode
-  /** Numeric value formatted via `format`. Ignored when `value` is set. */
-  amount?: number
-  /** Async loader; the card shows a skeleton until it resolves. */
-  compute?: () => Promise<KpiValue>
-  format?: KpiFormat
-  currency?: KpiCurrency
-  sub?: React.ReactNode
-  /** Trend chip inputs (for sync usage). */
-  current?: number
-  previous?: number
-  trend?: KpiTrend
-  /** For cost-style metrics where down is good (e.g. CPA). */
-  invertTrend?: boolean
-  /** Inline sparkline series (oldest → newest). Async usage: return via KpiValue.spark. */
-  spark?: number[]
-  /** Render the card as a radial gauge toward this goal value. */
-  goal?: number
-  /** Accent color for the sparkline/gauge. Defaults to a trend-aware color. */
-  accent?: string
-  loading?: boolean
-}
-
-/**
- * Canonical KPI card — consolidates the trend-chip card from plugin-marketing
- * and the async MetricCard from plugin-dashboard. Use directly, or via a
- * registered KPI widget (see defineKpiWidget).
- */
-export function KpiCard(props: KpiCardProps) {
-  const { label, icon, sub, format, currency, invertTrend } = props
-  const [computed, setComputed] = React.useState<KpiValue | null>(null)
-  const [errored, setErrored] = React.useState(false)
-
-  React.useEffect(() => {
-    if (!props.compute) return
-    let cancelled = false
-    props.compute()
-      .then((v) => { if (!cancelled) setComputed(v) })
-      .catch(() => { if (!cancelled) setErrored(true) })
-    return () => { cancelled = true }
-  }, [props.compute])
-
-  const isAsync = Boolean(props.compute)
-  const loading = props.loading || (isAsync && computed === null && !errored)
-
-  let display: React.ReactNode = props.value
-  let current = props.current
-  let previous = props.previous
-  let trend = props.trend
-  let unit: string | undefined
-  let spark = props.spark
-
-  if (isAsync && computed) {
-    display = formatKpiValue(computed.value, format, currency)
-    current = computed.value
-    previous = computed.previousValue
-    trend = computed.trend
-    unit = computed.unit
-    spark = computed.spark ?? spark
-  } else if (display == null && props.amount != null) {
-    display = formatKpiValue(props.amount, format, currency)
-    current = current ?? props.amount
-  }
-
-  const resolvedTrend = current != null ? deriveTrend(current, previous, trend) : trend
-  const delta = current != null && previous != null && previous !== 0
-    ? Math.round(((current - previous) / previous) * 100)
-    : null
-  const accent = props.accent ?? trendColor(resolvedTrend, invertTrend)
-
-  const valueText = (
-    <>
-      {display}
-      {unit ? <span className="ml-1 text-sm font-normal text-muted-foreground">{unit}</span> : null}
-    </>
-  )
-  const trendChip = resolvedTrend ? <TrendChip trend={resolvedTrend} delta={delta} invert={invertTrend} /> : null
-
-  // Pick a body layout: gauge (goal set) → sparkline (series set) → plain.
-  const isGauge = props.goal != null && current != null
-  const hasSpark = Boolean(spark && spark.length >= 2)
-
-  let body: React.ReactNode
-  if (errored) {
-    body = <span className="text-sm text-muted-foreground">—</span>
-  } else if (loading) {
-    body = isGauge
-      ? <div className="mx-auto h-16 w-32 animate-pulse rounded bg-muted" />
-      : <div className="h-7 w-20 animate-pulse rounded bg-muted" />
-  } else if (isGauge) {
-    body = (
-      <div>
-        <Gauge value={current!} goal={props.goal!} color={accent}>{valueText}</Gauge>
-        <div className="mt-1 flex items-center justify-center gap-2 text-xs text-muted-foreground">
-          {trendChip}
-          <span>{sub ?? `out of ${formatKpiValue(props.goal!, format, currency)}`}</span>
-        </div>
-      </div>
-    )
-  } else if (hasSpark) {
-    body = (
-      <div className="flex items-end justify-between gap-3">
-        <div className="min-w-0">
-          <div className="text-2xl font-semibold tracking-tight text-foreground">{valueText}</div>
-          {trendChip ? <div className="mt-0.5">{trendChip}</div> : null}
-        </div>
-        <Sparkline data={spark!} color={accent} />
-      </div>
-    )
-  } else {
-    body = (
-      <div className="flex items-baseline justify-between gap-2">
-        <span className="text-2xl font-semibold tracking-tight text-foreground">{valueText}</span>
-        {trendChip ? <span className="mb-0.5">{trendChip}</span> : null}
-      </div>
-    )
-  }
-
-  return (
-    // h-full so cards fill the (stretch) grid cell and every card in a row matches
-    // the tallest — labels/subtitles of different lengths no longer misalign them.
-    <Card className="h-full">
-      <CardContent className="flex h-full flex-col p-4">
-        <div className="mb-2 flex items-center justify-between gap-2">
-          <span className="text-sm text-muted-foreground">{label}</span>
-          <span className="text-muted-foreground">{renderIcon(icon)}</span>
-        </div>
-        {body}
-        {sub && !isGauge ? <p className="mt-0.5 text-xs text-muted-foreground">{sub}</p> : null}
-      </CardContent>
-    </Card>
-  )
-}