@bagelink/vue 1.15.202 → 1.15.205

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.202",
+  "version": "1.15.205",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/charts/BarChart.vue

@@ -7,15 +7,18 @@
  *   <BarChart :series="[{name:'A',data:[…]},{name:'B',data:[…]}]" stacked />
  */
 import { computed, ref } from 'vue'
-import { chartUid } from './core/uid'
+import ChartTooltip from './ChartTooltip.vue'
 import type { RawPoint, RawSeries } from './core/data'
 import { allValues, normalizeSeries, sharedLabels } from './core/data'
-import { resolveColor } from './core/palette'
 import { formatLabel, formatValue, type ValueFormat } from './core/format'
-import { band, linear, niceMax, ticks } from './core/useScale'
-import { useChartFrame } from './core/useChartFrame'
+import { resolveColor } from './core/palette'
+import { chartUid } from './core/uid'
 import { useChartAnim } from './core/useChartAnim'
-import ChartTooltip from './ChartTooltip.vue'
+import { useChartFrame } from './core/useChartFrame'
+import { tipPinnedStyle, trackLocalPointer } from './core/useChartTip'
+import { band, linear, niceMax, ticks } from './core/useScale'
+
+defineOptions({ name: 'BglBarChart' })
 
 const props = withDefaults(defineProps<{
 	data?: RawPoint[]
@@ -104,18 +107,19 @@ const uid = chartUid('bar')
 const gradColors = computed(() => [...new Set(bars.value.map(b => b.color))])
 const gradIdFor = (color: string) => `${uid}-${gradColors.value.indexOf(color)}`
 
-// ── Shared hover tooltip (mouse-follow, per category) ────────────────────────
+// ── Shared hover tooltip (prefer="top", pinned) ──────────────────────────────
 const hoverIdx = ref<number | null>(null)
-const mouseX = ref(0)
+const tipX = ref(0)
 function onMove(e: MouseEvent) {
+	if (!cats.value.length) return
+	trackLocalPointer(e, tipX)
 	const host = el.value
-	if (!host || !cats.value.length) return
+	if (!host) return
 	const rect = host.getBoundingClientRect()
 	let local = e.clientX - rect.left - pad.value.left
 	if (flipX(0) !== 0) local = innerWidth.value - local
 	const i = Math.floor((local / Math.max(1, innerWidth.value)) * cats.value.length)
 	hoverIdx.value = Math.min(cats.value.length - 1, Math.max(0, i))
-	mouseX.value = e.clientX - rect.left
 }
 function onLeave() { hoverIdx.value = null }
 
@@ -132,11 +136,7 @@ const hoverTotal = computed(() => {
 	if (hoverIdx.value == null || !props.stacked) return null
 	return formatValue(stackTotals.value[hoverIdx.value] ?? 0, valueFmt.value)
 })
-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` }
-})
+const tooltipStyle = tipPinnedStyle(tipX, width)
 </script>
 
 <template>
@@ -164,7 +164,7 @@ const tooltipStyle = computed(() => {
 						v-for="(b, i) in bars" :key="i"
 						:x="b.x" :y="b.y" :width="Math.max(0, b.w)" :height="Math.max(0, b.h)"
 						:rx="Math.min(radius, b.w / 2)" :fill="gradient ? `url(#${gradIdFor(b.color)})` : b.color"
-						class="bgl-chart__bar" :class="{ 'is-dim opacity-5': hoverIdx != null && hoverIdx !== b.cat }"
+						class="bgl-chart__bar" :class="{ 'opacity-5': hoverIdx != null && hoverIdx !== b.cat }"
 					/>
 
 					<g class="bgl-chart__xlabels">

package/src/components/charts/ChartTooltip.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 /**
  * ChartTooltip — the single tooltip used by every chart (Line, Bar, Donut,
- * Funnel). Renders a label header, optional hero value, per-series rows
+ * Funnel, Map). Renders a label header, optional hero value, per-series rows
  * (dot · name · value), an optional total row, and an optional stats block.
  *
  * Positioned by the host via `style` (absolute left/top); the host owns
- * mouse tracking. Non-interactive (pointer-events: none).
+ * mouse tracking via `useChartTip` helpers. Non-interactive (pointer-events: none).
  *
- * Placement is dynamic by default: the tooltip measures itself and flips to
- * the opposite side of its anchor whenever the preferred side would clip past
- * the top/bottom of the viewport. Hosts only express a *preferred* side via
- * `prefer` (or the legacy `above`/`below` flags).
+ * Placement modes:
+ * - `prefer="above"|"below"`: cursor-anchored (Donut, Map, Funnel) — host sets
+ *   `{ left, top }` from the pointer.
+ * - `prefer="top"`: pinned to the top of the chart (Line, Bar) — host sets
+ *   `{ left }` only; no vertical flip.
  */
 import { nextTick, ref, watch } from 'vue'
 import { useI18n } from '@bagelink/vue'

package/src/components/charts/Donut.vue

@@ -11,11 +11,13 @@
  */
 import { computed, ref } from 'vue'
 import { useI18n } from '@bagelink/vue'
-import { ramp, resolveColor } from './core/palette'
+import type { ThemeType } from '../../types'
+import ChartTooltip from './ChartTooltip.vue'
+import { slicePath } from './core/arc'
 import { formatValue, type ValueFormat } from './core/format'
+import { ramp, resolveColor } from './core/palette'
 import { useChartAnim } from './core/useChartAnim'
-import ChartTooltip from './ChartTooltip.vue'
-import type { ThemeType } from '../../types'
+import { tipFollowStyle, trackLocalPointer } from './core/useChartTip'
 
 defineOptions({ name: 'BglDonut' })
 
@@ -66,10 +68,9 @@ const props = withDefaults(defineProps<{
 
 const { $t } = useI18n()
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 800 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const fmt = computed<ValueFormat>(() => ({ currency: props.currency, compact: true }))
-/** Formatted amount for a slice (used on-chart, in the legend + tooltip). */
 function fmtValue(v: number): string {
 	return formatValue(v, { currency: props.currency, compact: true })
 }
@@ -79,11 +80,8 @@ const inner = computed(() => (props.pie ? 0 : radius.value * (1 - props.thicknes
 
 interface Arc {
 	d: string; color: string; label: string; value: number; pct: number
-	/** Centroid for on-slice label placement. */
 	lx: number; ly: number
-	/** Whether this slice shows an on-chart label at all. */
 	tagged: boolean
-	/** Stacked on-slice label pieces (empty string = that line is hidden). */
 	tagName: string; tagValue: string; tagPct: string
 }
 const arcs = computed<Arc[]>(() => {
@@ -91,32 +89,14 @@ const arcs = computed<Arc[]>(() => {
 	const ri = inner.value
 	const cx = r
 	const cy = r
-	// Radius where the label centroid sits — pushed toward the outer edge
-	// (68% of the way from the inner edge to the rim) so labels sit near the rim.
 	const rMid = ri + (r - ri) * 0.68
-	let angle = -Math.PI / 2 // start at top
+	let angle = -Math.PI / 2
 	return props.data.map((d, i) => {
 		const frac = Math.max(0, d.value) / total.value
 		const sweep = frac * Math.PI * 2 * progress.value
 		const a0 = angle
-		const a1 = angle + sweep
-		angle = a1
-		const aMid = (a0 + a1) / 2
-		const large = sweep > Math.PI ? 1 : 0
-		const x0 = cx + r * Math.cos(a0)
-		const y0 = cy + r * Math.sin(a0)
-		const x1 = cx + r * Math.cos(a1)
-		const y1 = cy + r * Math.sin(a1)
-		let d2: string
-		if (ri > 0) {
-			const xi1 = cx + ri * Math.cos(a1)
-			const yi1 = cy + ri * Math.sin(a1)
-			const xi0 = cx + ri * Math.cos(a0)
-			const yi0 = cy + ri * Math.sin(a0)
-			d2 = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi0} ${yi0} Z`
-		} else {
-			d2 = `M ${cx} ${cy} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`
-		}
+		angle += sweep
+		const aMid = a0 + sweep / 2
 		const sliceColor = d.color
 			? resolveColor(d.color)
 			: props.mode === 'multi'
@@ -125,7 +105,11 @@ const arcs = computed<Arc[]>(() => {
 		const pct = frac * 100
 		const tagged = !!props.labels && frac >= props.labelMinShare
 		return {
-			d: d2, color: sliceColor, label: d.label, value: d.value, pct,
+			d: slicePath(cx, cy, r, ri, a0, sweep),
+			color: sliceColor,
+			label: d.label,
+			value: d.value,
+			pct,
 			lx: cx + rMid * Math.cos(aMid),
 			ly: cy + rMid * Math.sin(aMid),
 			tagged,
@@ -142,21 +126,22 @@ const centerText = computed(() => {
 	return ''
 })
 
-// ── Shared hover tooltip (slice-based, mouse-follow) ─────────────────────────
+// ── Shared hover tooltip (cursor-follow, prefer="above") ─────────────────────
 const hoverIdx = ref<number | null>(null)
 const tipX = ref(0)
 const tipY = ref(0)
 function onSliceEnter(i: number) { hoverIdx.value = i }
 function onLeave() { hoverIdx.value = null }
-function onMove(e: MouseEvent) {
-	const host = (e.currentTarget as HTMLElement).getBoundingClientRect()
-	tipX.value = e.clientX - host.left
-	tipY.value = e.clientY - host.top
-}
+function onMove(e: MouseEvent) { trackLocalPointer(e, tipX, tipY) }
+
 const hoverArc = computed(() => (hoverIdx.value == null ? null : arcs.value[hoverIdx.value]))
-const hoverValue = computed(() => (hoverArc.value ? fmtValue(hoverArc.value.value) : ''))
-const hoverStats = computed(() => (hoverArc.value ? [{ label: $t('charts.share'), value: `${hoverArc.value.pct.toFixed(0)}%` }] : []))
-const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.value}px` }))
+const hoverRows = computed(() => hoverArc.value
+	? [{ name: hoverArc.value.label, color: hoverArc.value.color, value: fmtValue(hoverArc.value.value) }]
+	: [])
+const hoverStats = computed(() => (hoverArc.value
+	? [{ label: $t('charts.share'), value: `${hoverArc.value.pct.toFixed(0)}%` }]
+	: []))
+const tooltipStyle = tipFollowStyle(tipX, tipY)
 </script>
 
 <template>
@@ -191,7 +176,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 			</div>
 			<ChartTooltip
 				v-if="hoverArc" prefer="above" :style="tooltipStyle"
-				:label="hoverArc.label" :hero="hoverValue" :stats="hoverStats"
+				:label="hoverArc.label" :rows="hoverRows" :stats="hoverStats"
 			/>
 		</div>
 

package/src/components/charts/Funnel.vue

@@ -17,6 +17,7 @@ import { formatValue, type ValueFormat } from './core/format'
 import { chartUid } from './core/uid'
 import ChartTooltip from './ChartTooltip.vue'
 import { useChartAnim } from './core/useChartAnim'
+import { tipFollowStyle, trackLocalPointer } from './core/useChartTip'
 import type { ThemeType } from '../../types'
 
 defineOptions({ name: 'BglFunnel' })
@@ -221,18 +222,14 @@ const subSegments = computed(() => {
 	return out
 })
 
-// ── Shared hover tooltip (matches LineChart) ─────────────────────────────────
+// ── Shared hover tooltip (cursor-follow, prefer="above") ─────────────────────
 const hoverIdx = ref<number | null>(null)
 const tipX = ref(0)
 const tipY = ref(0)
 
 function onSegEnter(i: number) { hoverIdx.value = i }
 function onSegLeave() { hoverIdx.value = null }
-function onFlowMove(e: MouseEvent) {
-	const host = (e.currentTarget as HTMLElement).getBoundingClientRect()
-	tipX.value = e.clientX - host.left
-	tipY.value = e.clientY - host.top
-}
+function onFlowMove(e: MouseEvent) { trackLocalPointer(e, tipX, tipY) }
 
 const hoverStage = computed(() => (hoverIdx.value == null ? null : stages.value[hoverIdx.value]))
 const hoverStats = computed(() => {
@@ -247,7 +244,7 @@ const hoverTotal = computed(() => {
 	const s = hoverStage.value
 	return s && isSegmented.value ? s.display : null
 })
-const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.value}px` }))
+const tooltipStyle = tipFollowStyle(tipX, tipY)
 </script>
 
 <template>
@@ -274,7 +271,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 					<path
 						v-for="(s, i) in segments" :key="i"
 						:d="s.path" :fill="gradient ? `url(#${s.gradId})` : s.color"
-						class="bgl-funnel__seg" :class="{ 'is-dim opacity-5': hoverIdx != null && hoverIdx !== i }"
+						class="bgl-funnel__seg" :class="{ 'opacity-5': hoverIdx != null && hoverIdx !== i }"
 						@mouseenter="onSegEnter(i)"
 					/>
 				</template>
@@ -290,13 +287,14 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 				</template>
 			</svg>
 
-			<!-- Shared tooltip -->
+			<!-- Shared tooltip (cursor-follow) -->
 			<ChartTooltip
 				v-if="hoverStage" prefer="above" :style="tooltipStyle"
 				:label="hoverStage.label"
-				:hero="isSegmented ? undefined : hoverStage.display"
-				:rows="isSegmented ? hoverStage.rows : []"
-				:total="isSegmented ? hoverTotal : null"
+				:rows="isSegmented
+					? hoverStage.rows
+					: [{ name: hoverStage.label, color: hoverStage.color, value: hoverStage.display }]"
+				:total="hoverTotal"
 				:stats="hoverStats"
 			/>
 

package/src/components/charts/Gauge.vue

@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
 })
 
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 900 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const stroke = computed(() => resolveColor(props.color))
 const r = computed(() => (props.size - props.thickness) / 2)
@@ -57,8 +57,10 @@ function polar(angleDeg: number): { x: number; y: number } {
 }
 
 function arcPath(fraction: number): string {
-	const span = arcSpan.value * fraction
+	let span = arcSpan.value * fraction
 	if (span <= 0) return ''
+	// SVG arcs collapse when start/end coincide — keep just under a full turn.
+	if (span >= 360) span = 359.999
 	const a0 = startAngle.value
 	const a1 = startAngle.value + span
 	const p0 = polar(a0)

package/src/components/charts/LineChart.vue

@@ -8,15 +8,18 @@
  *   <LineChart :series="[{ name:'2024', data:[…] }, { name:'2025', data:[…] }]" />
  */
 import { computed, ref } from 'vue'
-import { chartUid } from './core/uid'
+import ChartTooltip from './ChartTooltip.vue'
 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 { alpha, resolveColor } from './core/palette'
+import { chartUid } from './core/uid'
 import { useChartAnim } from './core/useChartAnim'
-import ChartTooltip from './ChartTooltip.vue'
+import { useChartFrame } from './core/useChartFrame'
+import { tipPinnedStyle, trackLocalPointer } from './core/useChartTip'
+import { linear, niceMax, ticks } from './core/useScale'
+
+defineOptions({ name: 'BglLineChart' })
 
 const props = withDefaults(defineProps<{
 	data?: RawPoint[]
@@ -53,7 +56,7 @@ const props = withDefaults(defineProps<{
 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 { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const series = computed(() => normalizeSeries(props.data, props.series, { labels: props.labels, defaultColor: props.color }))
 const cats = computed(() => sharedLabels(series.value))
@@ -112,20 +115,20 @@ const labelStride = computed(() => Math.max(1, Math.ceil(cats.value.length / pro
 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) ──────
+// ── Hover crosshair + shared tooltip (prefer="top", pinned) ───────────────────
 const hoverIdx = ref<number | null>(null)
-const mouseX = ref(0)
+const tipX = ref(0)
 
 function onMove(e: MouseEvent) {
+	if (!cats.value.length) return
+	trackLocalPointer(e, tipX)
 	const host = el.value
-	if (!host || !cats.value.length) return
+	if (!host) 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 }
 
@@ -158,12 +161,7 @@ const hoverTotal = computed(() => {
 	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` }
-})
+const tooltipStyle = tipPinnedStyle(tipX, width)
 </script>
 
 <template>

package/src/components/charts/MapChart.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+/**
+ * MapChart — SVG choropleth of countries (ISO-3166-1 alpha-2). Pure SVG, no
+ * tiles. Same “plot only / wrap in Card” contract as BarChart / Donut.
+ *
+ *   <MapChart :data="[{ id: 'US', value: 4200 }, { id: 'IL', label: 'Israel', value: 900 }]" />
+ *   <MapChart :data="rows" color="green" :height="280" />
+ */
+import { computed, ref } from 'vue'
+import type { ThemeType } from '../../types'
+import ChartTooltip from './ChartTooltip.vue'
+import { formatValue, type ValueFormat } from './core/format'
+import { resolveColor } from './core/palette'
+import { useChartAnim } from './core/useChartAnim'
+import { tipFollowStyle, trackLocalPointer } from './core/useChartTip'
+import { WORLD_NAMES, WORLD_PATHS, WORLD_VIEWBOX } from './core/world-paths'
+import type { MapDatum } from './mapTypes'
+
+defineOptions({ name: 'BglMapChart' })
+
+export type { MapDatum }
+
+const props = withDefaults(defineProps<{
+	data: MapDatum[]
+	/** Base tone for the value ramp (low → high intensity). */
+	color?: ThemeType | string
+	height?: number
+	/** Show min→max legend strip under the map. */
+	legend?: boolean
+	currency?: string
+	prefix?: string
+	suffix?: string
+	animated?: boolean
+}>(), {
+	color: 'primary',
+	height: 280,
+	legend: true,
+	animated: true,
+})
+
+const el = ref<HTMLElement>()
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
+
+const fmt = computed<ValueFormat>(() => ({
+	currency: props.currency,
+	prefix: props.prefix,
+	suffix: props.suffix,
+	compact: true,
+}))
+
+const byId = computed(() => {
+	const map = new Map<string, MapDatum>()
+	for (const d of props.data) {
+		const id = d.id?.toUpperCase?.() ?? ''
+		if (!id) continue
+		const prev = map.get(id)
+		map.set(id, prev
+			? { ...d, id, value: prev.value + d.value, label: d.label ?? prev.label }
+			: { ...d, id })
+	}
+	return map
+})
+
+const maxValue = computed(() => Math.max(0, ...[...byId.value.values()].map(d => d.value)))
+
+const baseColor = computed(() => resolveColor(props.color))
+const emptyFill = 'color-mix(in srgb, var(--bgl-gray) 12%, var(--bgl-box-bg))'
+const strokeColor = 'color-mix(in srgb, var(--bgl-gray) 28%, var(--bgl-box-bg))'
+
+/** Continuous ramp: empty → light tint → full base color by value share. */
+function fillFor(value: number | undefined): string {
+	if (value == null || value <= 0 || maxValue.value <= 0) return emptyFill
+	const t = Math.sqrt(value / maxValue.value) // sqrt so mid values stay visible
+	const pct = 28 + t * 72 * progress.value
+	return `color-mix(in srgb, ${baseColor.value} ${pct}%, var(--bgl-box-bg))`
+}
+
+interface CountryPath {
+	id: string
+	d: string
+	label: string
+	value: number | undefined
+	fill: string
+	hasData: boolean
+}
+
+const countries = computed<CountryPath[]>(() =>
+	Object.entries(WORLD_PATHS).map(([id, d]) => {
+		const row = byId.value.get(id)
+		const value = row?.value
+		return {
+			id,
+			d,
+			label: row?.label || WORLD_NAMES[id] || id,
+			value,
+			fill: fillFor(value),
+			hasData: value != null && value > 0,
+		}
+	}),
+)
+
+const hoverId = ref<string | null>(null)
+const tipX = ref(0)
+const tipY = ref(0)
+
+function onEnter(id: string) { hoverId.value = id }
+function onLeave() { hoverId.value = null }
+function onMove(e: MouseEvent) { trackLocalPointer(e, tipX, tipY) }
+
+const hover = computed(() => {
+	if (!hoverId.value) return null
+	const c = countries.value.find(x => x.id === hoverId.value)
+	return c?.hasData ? c : null
+})
+
+const hoverRows = computed(() => hover.value
+	? [{ name: hover.value.label, color: hover.value.fill, value: formatValue(hover.value.value!, fmt.value) }]
+	: [])
+
+const tooltipStyle = tipFollowStyle(tipX, tipY)
+
+const legendMin = computed(() => formatValue(0, fmt.value))
+const legendMax = computed(() => formatValue(maxValue.value, fmt.value))
+</script>
+
+<template>
+	<div ref="el" class="bgl-map w-100p flex column gap-075">
+		<div
+			class="bgl-map__plot relative w-100p"
+			:style="{ height: `${height}px` }"
+			@mousemove="onMove"
+			@mouseleave="onLeave"
+		>
+			<svg
+				class="bgl-map__svg"
+				dir="ltr"
+				:viewBox="`0 0 ${WORLD_VIEWBOX.width} ${WORLD_VIEWBOX.height}`"
+				preserveAspectRatio="xMidYMid meet"
+				width="100%"
+				height="100%"
+			>
+				<path
+					v-for="c in countries"
+					:key="c.id"
+					:d="c.d"
+					:fill="c.fill"
+					:stroke="strokeColor"
+					stroke-width="0.6"
+					vector-effect="non-scaling-stroke"
+					class="bgl-map__country"
+					:class="{
+						'opacity-5': hoverId != null && hoverId !== c.id,
+						'bgl-map__country--hot': hoverId === c.id && c.hasData,
+					}"
+					@mouseenter="onEnter(c.id)"
+				/>
+			</svg>
+
+			<ChartTooltip
+				v-if="hover"
+				prefer="above"
+				:style="tooltipStyle"
+				:label="hover.label"
+				:rows="hoverRows"
+			/>
+		</div>
+
+		<div
+			v-if="legend && maxValue > 0"
+			class="bgl-map__legend flex align-items-center gap-05 txt12 color-gray"
+		>
+			<span class="tabular-nums">{{ legendMin }}</span>
+			<div
+				class="bgl-map__ramp flex-1"
+				:style="{
+					background: `linear-gradient(to right, color-mix(in srgb, ${baseColor} 28%, var(--bgl-box-bg)), ${baseColor})`,
+				}"
+			/>
+			<span class="tabular-nums">{{ legendMax }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl-map__plot { min-height: 0; }
+.bgl-map__svg { display: block; overflow: visible; }
+.bgl-map__country {
+	cursor: default;
+	transition: opacity 0.15s ease, fill 0.15s ease;
+	outline: none;
+}
+.bgl-map__country--hot { stroke: var(--bgl-gray); stroke-width: 1.2; }
+.bgl-map__ramp {
+	height: 0.5rem;
+	border-radius: 999px;
+	min-width: 4rem;
+}
+</style>

package/src/components/charts/RadialBars.vue

@@ -11,6 +11,8 @@ import { alpha, resolveColor } from './core/palette'
 import { useChartAnim } from './core/useChartAnim'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglRadialBars' })
+
 interface Ring { label: string; value: number; color?: ThemeType | string; max?: number }
 
 const props = withDefaults(defineProps<{
@@ -37,7 +39,7 @@ const props = withDefaults(defineProps<{
 })
 
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 900 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const cx = computed(() => props.size / 2)
 

package/src/components/charts/RankBars.vue

@@ -11,6 +11,8 @@ import { ramp, resolveColor } from './core/palette'
 import { formatValue, type ValueFormat } from './core/format'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglRankBars' })
+
 interface Row { label: string; value: number; color?: ThemeType | string }
 
 const props = withDefaults(defineProps<{

package/src/components/charts/Sparkline.vue

@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<{
 })
 
 const el = ref<HTMLElement>()
-const { progress } = useChartAnim({ el, enabled: props.animated, duration: 600 })
+const { progress } = useChartAnim({ el, enabled: props.animated, duration: 700 })
 
 const stroke = computed(() => resolveColor(props.color))
 const points = computed(() => normalizeSeries(props.data, undefined)[0]?.points ?? [])

package/src/components/charts/StatCard.vue

@@ -15,6 +15,8 @@ import { formatValue } from './core/format'
 import { resolveColor } from './core/palette'
 import type { ThemeType } from '../../types'
 
+defineOptions({ name: 'BglStatCard' })
+
 const props = withDefaults(defineProps<{
 	label: string
 	value: number | string