@bagelink/vue 1.15.63 → 1.15.65

package/src/components/charts/LineChart.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+/**
+ * LineChart — line + optional area fill, single or multi-series, theme-driven.
+ * Renders JUST the plot (no title/card chrome) so you can drop it in any Card.
+ *
+ *   <LineChart :data="[5,8,6,12]" />
+ *   <LineChart :data="revenue" color="green" area :currency="'USD'" />
+ *   <LineChart :series="[{ name:'2024', data:[…] }, { name:'2025', data:[…] }]" />
+ */
+import { computed, ref } from 'vue'
+import { chartUid } from './core/uid'
+import type { RawPoint, RawSeries } from './core/data'
+import { allValues, normalizeSeries, sharedLabels } from './core/data'
+import { alpha, resolveColor } from './core/palette'
+import { formatLabel, formatValue, type ValueFormat } from './core/format'
+import { linear, niceMax, ticks } from './core/useScale'
+import { useChartFrame } from './core/useChartFrame'
+import { useChartAnim } from './core/useChartAnim'
+import ChartTooltip from './ChartTooltip.vue'
+
+const props = withDefaults(defineProps<{
+	data?: RawPoint[]
+	series?: RawSeries[]
+	labels?: (string | number)[]
+	color?: string
+	/** Fill area under each line. */
+	area?: boolean
+	/** Use a soft top→bottom gradient for area fills (premium look).
+	    Implies `area`. On by default when `area`/`stacked` is set. */
+	gradient?: boolean
+	/** Stack multi-series areas (implies `area`). Composition over time. */
+	stacked?: boolean
+	height?: number
+	/** Show horizontal grid lines + y ticks. */
+	grid?: boolean
+	/** Show data-point dots. */
+	points?: boolean
+	/** Currency code → formats values as currency. */
+	currency?: string
+	prefix?: string
+	suffix?: string
+	/** Max x-axis labels to show (avoids crowding). */
+	maxLabels?: number
+	animated?: boolean
+}>(), {
+	height: 220,
+	grid: true,
+	points: false,
+	maxLabels: 7,
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const heightRef = computed(() => props.height)
+const { width, height: plotH, pad, innerWidth, innerHeight, flipX, isRTL } = useChartFrame(el, { height: heightRef })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 800 })
+
+const series = computed(() => normalizeSeries(props.data, props.series, { labels: props.labels, defaultColor: props.color }))
+const cats = computed(() => sharedLabels(series.value))
+
+const valueFmt = computed<ValueFormat>(() => ({ currency: props.currency, prefix: props.prefix, suffix: props.suffix }))
+const axisFmt = computed<ValueFormat>(() => ({ ...valueFmt.value, compact: true }))
+
+const isStacked = computed(() => props.stacked && series.value.length > 1)
+
+// Per-label cumulative totals for the stacked domain.
+const stackTotals = computed(() => cats.value.map((_, i) => series.value.reduce((sum, s) => sum + (s.points[i]?.y ?? 0), 0)))
+
+const yMax = computed(() => niceMax(isStacked.value ? Math.max(0, ...stackTotals.value) : Math.max(0, ...allValues(series.value))))
+const yMin = computed(() => (isStacked.value ? 0 : Math.min(0, ...allValues(series.value))))
+
+const sx = computed(() => linear(0, Math.max(1, cats.value.length - 1), 0, innerWidth.value))
+const sy = computed(() => linear(yMin.value, yMax.value, innerHeight.value, 0))
+
+const yTicks = computed(() => (props.grid ? ticks(yMin.value, yMax.value, 4) : []))
+
+const lines = computed(() => {
+	const base = innerHeight.value
+	// Running cumulative per label for stacking.
+	const cum = cats.value.map(() => 0)
+	return series.value.map((s, i) => {
+		const color = resolveColor(s.color, i)
+		if (isStacked.value) {
+			const lower = cats.value.map((_, idx) => cum[idx])
+			const upper = cats.value.map((_, idx) => cum[idx] + (s.points[idx]?.y ?? 0))
+			upper.forEach((v, idx) => { cum[idx] = v })
+			const topCoords = upper.map((v, idx) => ({ x: flipX(sx.value(idx)), y: sy.value(v), p: s.points[idx] ?? { label: cats.value[idx], y: v } }))
+			const line = topCoords.map((c, idx) => `${idx === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ')
+			const lowerPts = lower.map((v, idx) => ({ x: flipX(sx.value(idx)), y: sy.value(v) }))
+			const down = [...lowerPts].reverse().map(c => `L ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ')
+			const areaPath = topCoords.length ? `${line} ${down} Z` : ''
+			return { name: s.name, color, coords: topCoords, line, areaPath }
+		}
+		const coords = s.points.map((p, idx) => ({ x: flipX(sx.value(idx)), y: sy.value(p.y), p }))
+		const line = coords.map((c, idx) => `${idx === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ')
+		const areaPath = coords.length
+			? `${line} L ${coords[coords.length - 1].x.toFixed(1)} ${base} L ${coords[0].x.toFixed(1)} ${base} Z`
+			: ''
+		return { name: s.name, color, coords, line, areaPath }
+	})
+})
+
+// In stacked mode the area is always shown (it's the whole point).
+const showArea = computed(() => props.area || isStacked.value)
+// Gradient fills default ON whenever an area is shown, unless explicitly off.
+const useGradient = computed(() => showArea.value && props.gradient !== false)
+
+const uid = chartUid()
+const gradId = (i: number) => `${uid}-grad-${i}`
+
+const labelStride = computed(() => Math.max(1, Math.ceil(cats.value.length / props.maxLabels)))
+const dashLength = computed(() => (innerWidth.value + innerHeight.value) * 2)
+const dashOffset = computed(() => dashLength.value * (1 - progress.value))
+
+// ── Hover crosshair + shared tooltip (follows the mouse across the plot) ──────
+const hoverIdx = ref<number | null>(null)
+const mouseX = ref(0)
+
+function onMove(e: MouseEvent) {
+	const host = el.value
+	if (!host || !cats.value.length) return
+	const rect = host.getBoundingClientRect()
+	// Mouse x within the plot area (account for left padding + RTL flip).
+	let local = e.clientX - rect.left - pad.value.left
+	if (isRTL.value) local = innerWidth.value - local
+	const idx = Math.round((local / Math.max(1, innerWidth.value)) * (cats.value.length - 1))
+	hoverIdx.value = Math.min(cats.value.length - 1, Math.max(0, idx))
+	mouseX.value = e.clientX - rect.left
+}
+function onLeave() { hoverIdx.value = null }
+
+const hoverX = computed(() => (hoverIdx.value == null ? 0 : flipX(sx.value(hoverIdx.value))))
+
+// Markers (one per series) at the hovered index.
+const hoverMarkers = computed(() => {
+	if (hoverIdx.value == null) return []
+	return lines.value
+		.map(l => l.coords[hoverIdx.value as number])
+		.filter(Boolean)
+		.map((c, i) => ({ x: c.x, y: c.y, color: lines.value[i].color }))
+})
+
+// Tooltip rows: every series' value at the hovered label.
+const hoverRows = computed(() => {
+	if (hoverIdx.value == null) return []
+	return series.value.map((s, i) => ({
+		name: s.name,
+		color: resolveColor(s.color, i),
+		value: formatValue(s.points[hoverIdx.value as number]?.y ?? 0, valueFmt.value),
+	}))
+})
+const hoverLabel = computed(() => (hoverIdx.value == null ? '' : formatLabel(cats.value[hoverIdx.value])))
+
+// Total row for stacked charts.
+const hoverTotal = computed(() => {
+	if (hoverIdx.value == null || !isStacked.value) return null
+	const sum = series.value.reduce((s, srs) => s + (srs.points[hoverIdx.value as number]?.y ?? 0), 0)
+	return formatValue(sum, valueFmt.value)
+})
+
+// Keep the tooltip inside the chart horizontally.
+const tooltipStyle = computed(() => {
+	const half = 70
+	const x = Math.min(Math.max(mouseX.value, half), Math.max(half, width.value - half))
+	return { left: `${x}px` }
+})
+</script>
+
+<template>
+	<div ref="el" class="bgl-chart w-100p relative" :style="{ height: `${plotH}px` }" @mousemove="onMove" @mouseleave="onLeave">
+		<svg v-if="width" :width="width" :height="plotH" class="display-block overflow-hidden">
+			<defs v-if="useGradient">
+				<linearGradient
+					v-for="(l, i) in lines" :id="gradId(i)" :key="i"
+					gradientUnits="userSpaceOnUse" :x1="0" :y1="0" :x2="0" :y2="innerHeight"
+				>
+					<stop offset="0%" :stop-color="l.color" :stop-opacity="isStacked ? 0.9 : 0.32" />
+					<stop offset="100%" :stop-color="l.color" :stop-opacity="isStacked ? 0.15 : 0.02" />
+				</linearGradient>
+			</defs>
+			<g :transform="`translate(${pad.left}, ${pad.top})`">
+				<!-- grid + y ticks -->
+				<g v-if="grid" class="bgl-chart__grid">
+					<g v-for="(t, i) in yTicks" :key="i">
+						<line :x1="0" :x2="innerWidth" :y1="sy(t)" :y2="sy(t)" />
+						<text class="bgl-chart__ytick" :x="-8" :y="sy(t) + 3">{{ formatValue(t, axisFmt) }}</text>
+					</g>
+				</g>
+
+				<!-- area fills (gradient by default; stacked layers read as bands) -->
+				<template v-if="showArea">
+					<path
+						v-for="(l, i) in lines" :key="`a${i}`" :d="l.areaPath"
+						:fill="useGradient ? `url(#${gradId(i)})` : alpha(l.color, isStacked ? 78 : 14)"
+						stroke="none" :opacity="progress"
+					/>
+				</template>
+
+				<!-- lines -->
+				<path
+					v-for="(l, i) in lines" :key="`l${i}`" :d="l.line" :stroke="l.color" stroke-width="2.5"
+					fill="none" stroke-linecap="round" stroke-linejoin="round"
+					:stroke-dasharray="dashLength" :stroke-dashoffset="dashOffset"
+				/>
+
+				<!-- points (values shown via the shared hover tooltip) -->
+				<template v-if="points">
+					<g v-for="(l, i) in lines" :key="`p${i}`">
+						<circle
+							v-for="(c, idx) in l.coords" :key="idx"
+							:cx="c.x" :cy="c.y" r="3.5" :fill="l.color" class="bgl-chart__pt" :opacity="progress"
+						/>
+					</g>
+				</template>
+
+				<!-- x labels -->
+				<g class="bgl-chart__xlabels">
+					<text
+						v-for="(lbl, i) in cats" v-show="i % labelStride === 0" :key="i"
+						:x="flipX(sx(i))" :y="innerHeight + 16" text-anchor="middle"
+					>{{ formatLabel(lbl) }}</text>
+				</g>
+
+				<!-- hover crosshair + per-series markers -->
+				<g v-if="hoverIdx != null" class="bgl-chart__hover" pointer-events="none">
+					<line :x1="hoverX" :x2="hoverX" :y1="0" :y2="innerHeight" class="bgl-chart__crosshair" />
+					<circle v-for="(m, i) in hoverMarkers" :key="i" :cx="m.x" :cy="m.y" r="4" :fill="m.color" class="bgl-chart__hoverpt" />
+				</g>
+			</g>
+		</svg>
+
+		<!-- shared tooltip following the mouse -->
+		<ChartTooltip
+			v-if="hoverIdx != null" :style="tooltipStyle"
+			:label="hoverLabel" :rows="hoverRows" :total="hoverTotal"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.bgl-chart { direction: inherit; }
+.bgl-chart__grid line { stroke: var(--bgl-border-color); stroke-width: 1; }
+.bgl-chart__ytick,
+.bgl-chart__xlabels text { fill: var(--bgl-gray); font-size: 11px; }
+.bgl-chart__ytick { text-anchor: end; }
+.bgl-chart__pt { cursor: pointer; transition: r 0.15s ease; outline: none; }
+.bgl-chart__pt:hover { r: 5; }
+.bgl-chart__pt:focus,
+.bgl-chart__pt:focus-visible { outline: none; }
+[dir="rtl"] .bgl-chart__ytick { text-anchor: start; }
+
+/* hover crosshair + markers */
+.bgl-chart__crosshair { stroke: var(--bgl-border-color); stroke-width: 1; stroke-dasharray: 3 3; }
+.bgl-chart__hoverpt { stroke: var(--bgl-box-bg); stroke-width: 2; }
+</style>

package/src/components/charts/RadialBars.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * RadialBars — concentric progress rings (the "activity rings" look). Each item
+ * is a value 0–max rendered as a ring; great for multi-KPI completion tiles.
+ *
+ *   <RadialBars :data="[{label:'Sales',value:82},{label:'Leads',value:64},{label:'Churn',value:23}]" />
+ *   <RadialBars :data="rings" :max="100" :legend="false" />
+ */
+import { computed, ref } from 'vue'
+import { alpha, resolveColor } from './core/palette'
+import { useChartAnim } from './core/useChartAnim'
+import type { ThemeType } from '../../types'
+
+interface Ring { label: string; value: number; color?: ThemeType | string; max?: number }
+
+const props = withDefaults(defineProps<{
+	data: Ring[]
+	/** Shared max when a ring doesn't set its own. */
+	max?: number
+	size?: number
+	/** Ring thickness in px. */
+	thickness?: number
+	/** Gap between rings in px. */
+	gap?: number
+	legend?: boolean
+	/** Show the value of each ring in the legend. Default %. */
+	suffix?: string
+	animated?: boolean
+}>(), {
+	max: 100,
+	size: 180,
+	thickness: 14,
+	gap: 6,
+	legend: true,
+	suffix: '%',
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 900 })
+
+const cx = computed(() => props.size / 2)
+
+function ringPath(r: number): string {
+	const c = cx.value
+	// Full-circle path (two arcs) starting at 12 o'clock.
+	return `M ${c} ${c - r} A ${r} ${r} 0 1 1 ${c - 0.001} ${c - r} Z`
+}
+
+interface Arc { path: string; color: string; label: string; display: string; circ: number; filled: number }
+const arcs = computed<Arc[]>(() =>
+	props.data.map((d, i) => {
+		const r = cx.value - props.thickness / 2 - i * (props.thickness + props.gap)
+		const max = d.max ?? props.max
+		const frac = Math.min(1, Math.max(0, d.value / (max || 1)))
+		const circ = 2 * Math.PI * r
+		return {
+			path: ringPath(r),
+			color: resolveColor(d.color, i),
+			label: d.label,
+			display: `${d.value}${props.suffix}`,
+			circ,
+			filled: circ * frac * progress.value,
+		}
+	}),
+)
+</script>
+
+<template>
+	<div
+		ref="el" class="bgl-radial inline-flex gap-1"
+		:class="legend ? 'row' : 'column'"
+	>
+		<svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="bgl-radial__svg flex-shrink-0">
+			<g v-for="(a, i) in arcs" :key="i">
+				<path :d="a.path" :stroke="alpha(a.color, 14)" :stroke-width="thickness" fill="none" stroke-linecap="round" />
+				<path
+					:d="a.path" :stroke="a.color" :stroke-width="thickness" fill="none" stroke-linecap="round"
+					:stroke-dasharray="`${a.filled} ${a.circ}`"
+					:transform="`rotate(-90 ${cx} ${cx})`"
+				/>
+			</g>
+		</svg>
+
+		<ul v-if="legend" class="bgl-radial__legend grid gap-05 m-0 min-w-0">
+			<li v-for="(a, i) in arcs" :key="i" class="flex align-items-center gap-05 txt13">
+				<span class="bgl-radial__dot flex-shrink-0" :style="{ background: a.color }" />
+				<span>{{ a.label }}</span>
+				<span class="bgl-radial__val semibold tabular-nums ms-auto">{{ a.display }}</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+.bgl-radial__svg path { transition: stroke-dasharray 0.3s ease; }
+.bgl-radial__legend { list-style: none; padding: 0; }
+.bgl-radial__dot { width: 10px; height: 10px; border-radius: 3px; }
+</style>

package/src/components/charts/RankBars.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * RankBars — horizontal ranked bars for top-N lists (leaderboards, sources by
+ * revenue, most-viewed). Pure CSS bars: label + bar + value per row.
+ *
+ *   <RankBars :data="[{label:'Google',value:4200},{label:'Direct',value:3100}]" />
+ *   <RankBars :data="rows" color="purple" currency="USD" :max-rows="5" />
+ */
+import { computed } from 'vue'
+import { ramp, resolveColor } from './core/palette'
+import { formatValue, type ValueFormat } from './core/format'
+import type { ThemeType } from '../../types'
+
+interface Row { label: string; value: number; color?: ThemeType | string }
+
+const props = withDefaults(defineProps<{
+	data: Row[]
+	/** Base tone for bars (monochrome shade ramp by rank). */
+	color?: ThemeType | string
+	/** One tone per row instead of shades. Per-row `color` always wins. */
+	mode?: 'shades' | 'multi'
+	/** Cap rows shown (already-sorted input recommended). */
+	maxRows?: number
+	/** Sort descending by value before rendering. */
+	sort?: boolean
+	currency?: string
+	prefix?: string
+	suffix?: string
+}>(), {
+	color: 'primary',
+	mode: 'shades',
+	sort: true,
+})
+
+const fmt = computed<ValueFormat>(() => ({ currency: props.currency, prefix: props.prefix, suffix: props.suffix }))
+
+const rows = computed(() => {
+	let r = [...props.data]
+	if (props.sort) r.sort((a, b) => b.value - a.value)
+	if (props.maxRows) r = r.slice(0, props.maxRows)
+	const max = Math.max(1, ...r.map(d => d.value))
+	return r.map((d, i) => ({
+		label: d.label,
+		value: d.value,
+		display: formatValue(d.value, fmt.value),
+		pct: (d.value / max) * 100,
+		color: d.color
+			? resolveColor(d.color)
+			: props.mode === 'multi'
+				? resolveColor(undefined, i)
+				: ramp(props.color, r.length, i),
+	}))
+})
+</script>
+
+<template>
+	<div class="bgl-rank grid w-100p gap-05">
+		<div v-for="(r, i) in rows" :key="i" class="bgl-rank__row align-items-center grid gap-075">
+			<span class="bgl-rank__label ellipsis-1 txt14" :title="r.label">{{ r.label }}</span>
+			<span class="bgl-rank__track overflow-hidden round">
+				<span class="bgl-rank__bar display-block round" :style="{ width: `${r.pct}%`, background: r.color }" />
+			</span>
+			<span class="txt13 tabular-nums semibold">{{ r.display }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-rank__row { grid-template-columns: minmax(60px, 28%) 1fr auto; }
+.bgl-rank__track { height: 10px; background: var(--bgl-border-color); }
+.bgl-rank__bar { height: 100%; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
+</style>

package/src/components/charts/Sparkline.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * Sparkline — a tiny inline line/area chart with no axes or labels. Perfect for
+ * cards, table cells, and stat tiles.
+ *
+ *   <Sparkline :data="[5,8,6,12,9,14]" />
+ *   <Sparkline :data="trend" color="green" area />
+ */
+import { computed, ref } from 'vue'
+import type { RawPoint } from './core/data'
+import { normalizeSeries } from './core/data'
+import { alpha, resolveColor } from './core/palette'
+import { linear } from './core/useScale'
+import { useChartAnim } from './core/useChartAnim'
+import { chartUid } from './core/uid'
+
+defineOptions({ name: 'BglSparkline' })
+
+const props = withDefaults(defineProps<{
+	data: RawPoint[]
+	color?: string
+	/** Fill the area under the line. */
+	area?: boolean
+	/** Use a soft gradient for the area fill (default on when `area`). */
+	gradient?: boolean
+	width?: number
+	height?: number
+	strokeWidth?: number
+	/** Draw a dot on the last point. */
+	marker?: boolean
+	animated?: boolean
+}>(), {
+	width: 100,
+	height: 28,
+	strokeWidth: 2,
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 600 })
+
+const stroke = computed(() => resolveColor(props.color))
+const points = computed(() => normalizeSeries(props.data, undefined)[0]?.points ?? [])
+const useGradient = computed(() => props.area && props.gradient !== false)
+const gradId = chartUid('spark') + '-grad'
+
+const pad = computed(() => props.strokeWidth + (props.marker ? 2 : 0))
+const geom = computed(() => {
+	const pts = points.value
+	if (pts.length < 2) return { line: '', area: '', last: null as null | { x: number; y: number } }
+	const ys = pts.map(p => p.y)
+	const min = Math.min(...ys)
+	const max = Math.max(...ys)
+	const sx = linear(0, pts.length - 1, pad.value, props.width - pad.value)
+	const sy = linear(min, max, props.height - pad.value, pad.value)
+	const coords = pts.map((p, i) => ({ x: sx(i), y: sy(p.y) }))
+	const line = coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ')
+	const area = `${line} L ${coords[coords.length - 1].x.toFixed(1)} ${props.height - pad.value} L ${coords[0].x.toFixed(1)} ${props.height - pad.value} Z`
+	return { line, area, last: coords[coords.length - 1] }
+})
+
+// Animate by revealing the stroke via dash offset.
+const dashLength = computed(() => props.width * 2)
+const dashOffset = computed(() => dashLength.value * (1 - progress.value))
+</script>
+
+<template>
+	<span ref="el" class="bgl-sparkline inline-block line-height-0 vertical-align-middle" :style="{ width: `${width}px`, height: `${height}px` }">
+		<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="none" class="bgl-sparkline__svg display-block">
+			<defs v-if="useGradient">
+				<linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0%" :stop-color="stroke" stop-opacity="0.35" />
+					<stop offset="100%" :stop-color="stroke" stop-opacity="0.02" />
+				</linearGradient>
+			</defs>
+			<path v-if="area && geom.area" :d="geom.area" :fill="useGradient ? `url(#${gradId})` : alpha(stroke, 14)" stroke="none" :opacity="progress" />
+			<path
+				:d="geom.line" :stroke="stroke" :stroke-width="strokeWidth" fill="none"
+				stroke-linecap="round" stroke-linejoin="round"
+				:stroke-dasharray="dashLength" :stroke-dashoffset="dashOffset"
+			/>
+			<circle v-if="marker && geom.last" :cx="geom.last.x" :cy="geom.last.y" :r="strokeWidth + 0.5" :fill="stroke" :opacity="progress" />
+		</svg>
+	</span>
+</template>
+
+<style scoped>
+/* Only the SVG overflow has no utility equivalent. */
+.bgl-sparkline__svg { overflow: visible; }
+</style>

package/src/components/charts/StatCard.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * StatCard — a KPI tile: label, big value, delta chip, and an optional trend
+ * sparkline. Composes Card + Sparkline; all formatting is locale-aware.
+ *
+ *   <StatCard label="Revenue" :value="48200" currency="USD" :change="12.4" :trend="[…]" />
+ *   <StatCard label="Active users" :value="1280" :change="-3.1" icon="group" color="purple" />
+ */
+import { computed } from 'vue'
+import Card from '../Card.vue'
+import Icon from '../Icon/Icon.vue'
+import Sparkline from './Sparkline.vue'
+import type { RawPoint } from './core/data'
+import { formatValue } from './core/format'
+import { resolveColor } from './core/palette'
+import type { ThemeType } from '../../types'
+
+const props = withDefaults(defineProps<{
+	label: string
+	value: number | string
+	icon?: string
+	color?: ThemeType | string
+	/** Percentage change; sign drives the up/down chip color. */
+	change?: number
+	/** Invert chip colors when down is good (e.g. churn, cost). */
+	invertChange?: boolean
+	/** Sparkline data for a trend line. */
+	trend?: RawPoint[]
+	currency?: string
+	prefix?: string
+	suffix?: string
+	subtitle?: string
+	loading?: boolean
+	/** Outlined card (transparent bg + border), like `<Card outline>`. */
+	outline?: boolean
+	/** Hairline framed card, like `<Card frame>`. */
+	frame?: boolean
+}>(), {
+	color: 'primary',
+})
+
+const accent = computed(() => resolveColor(props.color))
+const formatted = computed(() =>
+	typeof props.value === 'number'
+		? formatValue(props.value, { currency: props.currency, prefix: props.prefix, suffix: props.suffix })
+		: `${props.prefix ?? ''}${props.value}${props.suffix ?? ''}`,
+)
+const hasChange = computed(() => props.change !== undefined && props.change !== 0)
+const up = computed(() => (props.change ?? 0) > 0)
+const good = computed(() => (props.invertChange ? !up.value : up.value))
+</script>
+
+<template>
+	<Card thin :outline="outline" :frame="frame" class="bgl-stat flex column gap-1">
+		<div class="flex space-between w-100p align-items-start gap-05">
+			<div class="flex gap-05 align-items-center min-w-0">
+				<span v-if="icon" class="bgl-stat__icon grid place-items-center flex-shrink-0" :style="{ color: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` }">
+					<Icon :name="icon" :size="1.1" />
+				</span>
+				<div class="min-w-0">
+					<p class="txt13 opacity-6 m-0 ellipsis-1">{{ label }}</p>
+					<p v-if="subtitle" class="txt12 color-gray m-0 ellipsis-1">{{ subtitle }}</p>
+				</div>
+			</div>
+			<span v-if="hasChange" class="bgl-stat__delta inline-flex align-items-center flex-shrink-0 semibold" :class="good ? 'bgl-stat__delta--up' : 'bgl-stat__delta--down'">
+				<Icon :name="up ? 'trending_up' : 'trending_down'" :size="0.9" />
+				{{ Math.abs(change!).toFixed(1) }}%
+			</span>
+		</div>
+
+		<div class="flex space-between w-100p align-items-end gap-1">
+			<span class="txt28 m_txt24 semibold line-height-1 tabular-nums" :class="{ 'opacity-4': loading }">{{ loading ? '…' : formatted }}</span>
+			<Sparkline v-if="trend?.length" :data="trend" :color="color" area class="flex-shrink-0 opacity-9" :width="96" :height="32" />
+		</div>
+	</Card>
+</template>
+
+<style scoped>
+.bgl-stat__icon { width: 34px; height: 34px; border-radius: 9px; }
+/* Delta chip: layout via utilities; pill shape + sizing stay here. */
+.bgl-stat__delta { gap: 0.15rem; font-size: 0.78rem; padding: 0.1rem 0.4rem; border-radius: 999px; }
+.bgl-stat__delta--up { color: var(--bgl-green); background: color-mix(in srgb, var(--bgl-green) 12%, transparent); }
+.bgl-stat__delta--down { color: var(--bgl-red); background: color-mix(in srgb, var(--bgl-red) 12%, transparent); }
+</style>