@bagelink/vue 1.15.63 → 1.15.65

package/src/components/charts/core/data.ts

@@ -0,0 +1,95 @@
+/**
+ * Ergonomic data normalization for the chart family.
+ *
+ * Accepts the simplest thing that works and progressively enhances:
+ *   :data="[5, 8, 6, 12]"                       → one series, x = index
+ *   :data="[{ x: 'Jan', y: 5 }, …]"             → one series, labelled
+ *   :series="[{ name, color, data: number[] }]"  → many series
+ *   :labels="['Jan','Feb',…]"                    → shared x labels
+ *
+ * A server can return `{ labels, series }` and drop it straight in.
+ */
+import type { ThemeType } from '../../../types'
+
+/** A single value the way callers pass it. */
+export type RawPoint = number | { x?: string | number; y: number; label?: string }
+
+/** A caller-supplied series. */
+export interface RawSeries {
+	name?: string
+	/** Tone name (`primary`, `blue`, …) or any CSS color. */
+	color?: ThemeType | string
+	data: RawPoint[]
+}
+
+/** Normalized point used internally by every chart. */
+export interface Point {
+	/** Numeric x for scaling (index if labels are categorical). */
+	x: number
+	y: number
+	/** Display label for the x value. */
+	label: string
+}
+
+/** Normalized series used internally by every chart. */
+export interface Series {
+	name: string
+	/** Resolved CSS color (already `var(--bgl-…)` or a raw color). */
+	color?: ThemeType | string
+	points: Point[]
+}
+
+export interface NormalizeOptions {
+	/** Shared x labels; overrides per-point labels when provided. */
+	labels?: (string | number)[]
+	/** Fallback color (tone name or CSS) for series that don't set their own.
+	    Lets a single-series chart honor a top-level `color` prop. */
+	defaultColor?: ThemeType | string
+}
+
+function toPoints(data: RawPoint[], labels?: (string | number)[]): Point[] {
+	return data.map((d, i) => {
+		if (typeof d === 'number') {
+			return { x: i, y: d, label: String(labels?.[i] ?? i) }
+		}
+		const label = d.label ?? labels?.[i] ?? d.x ?? i
+		return { x: typeof d.x === 'number' ? d.x : i, y: d.y, label: String(label) }
+	})
+}
+
+/**
+ * Resolve `data` / `series` props into a uniform `Series[]`.
+ * Exactly one of `data` or `series` is expected; `series` wins if both given.
+ */
+export function normalizeSeries(
+	data: RawPoint[] | undefined,
+	series: RawSeries[] | undefined,
+	opts: NormalizeOptions = {},
+): Series[] {
+	if (series?.length) {
+		// Only apply the chart-level default to a lone series; multi-series keep
+		// their automatic per-index tone sequence unless each sets its own color.
+		const useDefault = series.length === 1
+		return series.map((s, i) => ({
+			name: s.name ?? `Series ${i + 1}`,
+			color: s.color ?? (useDefault ? opts.defaultColor : undefined),
+			points: toPoints(s.data ?? [], opts.labels),
+		}))
+	}
+	if (data?.length) {
+		return [{ name: 'Series 1', color: opts.defaultColor, points: toPoints(data, opts.labels) }]
+	}
+	return []
+}
+
+/** Flatten all y-values across series (for domain calc). */
+export function allValues(series: Series[]): number[] {
+	return series.flatMap(s => s.points.map(p => p.y))
+}
+
+/** The x labels of the first/longest series (charts share an x axis). */
+export function sharedLabels(series: Series[]): string[] {
+	let longest: Point[] = []
+	for (const s of series) if (s.points.length > longest.length) longest = s.points
+	return longest.map(p => p.label)
+}

package/src/components/charts/core/format.ts

@@ -0,0 +1,64 @@
+/**
+ * Locale-aware value formatting for charts. Uses the app i18n locale (via
+ * `resolveI18n`) instead of a hardcoded locale, with graceful fallbacks.
+ */
+import { getI18n } from '../../../i18n'
+
+function currentLocale(): string {
+	try {
+		const loc = getI18n().global.locale as unknown
+		const v = (loc as { value?: string })?.value ?? loc
+		if (typeof v === 'string' && v) return v
+	} catch { /* i18n not initialized — fall through */ }
+	if (typeof document !== 'undefined') {
+		return document.documentElement.lang || navigator?.language || 'en'
+	}
+	return 'en'
+}
+
+export interface ValueFormat {
+	/** ISO currency code (e.g. 'USD', 'ILS'). When set, formats as currency. */
+	currency?: string
+	prefix?: string
+	suffix?: string
+	/** Compact large numbers (1.2K, 3.4M). Default true for axis ticks. */
+	compact?: boolean
+	maximumFractionDigits?: number
+}
+
+export function formatValue(value: number, fmt: ValueFormat = {}): string {
+	const locale = currentLocale()
+	let out: string
+	try {
+		if (fmt.currency) {
+			out = new Intl.NumberFormat(locale, {
+				style: 'currency',
+				currency: fmt.currency,
+				notation: fmt.compact ? 'compact' : 'standard',
+				maximumFractionDigits: fmt.maximumFractionDigits ?? (fmt.compact ? 1 : 0),
+			}).format(value)
+		} else {
+			out = new Intl.NumberFormat(locale, {
+				notation: fmt.compact ? 'compact' : 'standard',
+				maximumFractionDigits: fmt.maximumFractionDigits ?? (fmt.compact ? 1 : 2),
+			}).format(value)
+		}
+	} catch {
+		out = String(value)
+	}
+	return `${fmt.prefix ?? ''}${out}${fmt.suffix ?? ''}`
+}
+
+/** Format an x label that may be an ISO date; otherwise pass through. */
+export function formatLabel(label: string): string {
+	// Only treat as a date if it parses AND looks date-ish (has - or /).
+	if (/[-/]/.test(label)) {
+		const d = new Date(label)
+		if (!Number.isNaN(d.getTime())) {
+			try {
+				return d.toLocaleDateString(currentLocale(), { month: 'short', day: 'numeric' })
+			} catch { /* noop */ }
+		}
+	}
+	return label
+}

package/src/components/charts/core/palette.ts

@@ -0,0 +1,52 @@
+/**
+ * Color resolution for charts. Tone names map to theme CSS vars so charts are
+ * automatically theme + dark-mode aware; any raw CSS color passes through.
+ */
+import type { ThemeType } from '../../../types'
+
+const TONES = [
+	'blue', 'green', 'red', 'yellow', 'purple', 'brown',
+	'orange', 'turquoise', 'gray', 'black', 'pink', 'primary', 'white',
+]
+
+/** A pleasant default multi-series sequence (theme tokens). */
+export const SERIES_TONES: ThemeType[] = [
+	'primary', 'purple', 'turquoise', 'orange', 'pink', 'green', 'blue', 'yellow', 'red',
+]
+
+/** Is this string one of the known theme tones (incl. -light/-tint suffixes)? */
+function isTone(c: string): boolean {
+	const base = c.replace(/-(light|tint|dark|\d+)$/, '')
+	return TONES.includes(base)
+}
+
+/**
+ * Resolve a caller color into a paintable CSS value.
+ * - tone name → `var(--bgl-<tone>)`
+ * - anything else (hex/rgb/var(...)) → returned as-is
+ * - undefined → falls back to the series-index tone
+ */
+export function resolveColor(color: ThemeType | string | undefined, index = 0): string {
+	if (!color) return `var(--bgl-${SERIES_TONES[index % SERIES_TONES.length]})`
+	if (typeof color === 'string' && isTone(color)) return `var(--bgl-${color})`
+	return color
+}
+
+/** A translucent version of a resolved color (for area fills / hovers). */
+export function alpha(cssColor: string, pct: number): string {
+	return `color-mix(in srgb, ${cssColor} ${pct}%, transparent)`
+}
+
+/**
+ * A monochrome ramp: `count` shades of one base color, from full strength to a
+ * lighter tint. Reads premium for donut/pie slices and stacked categories.
+ * `index 0` is the strongest; later slices fade toward white.
+ */
+export function ramp(base: ThemeType | string | undefined, count: number, index = 0): string {
+	const color = resolveColor(base ?? 'primary')
+	if (count <= 1) return color
+	// Spread mix from 100% (strongest) down to ~40% (lightest) of the base.
+	const minPct = 42
+	const pct = 100 - (index / (count - 1)) * (100 - minPct)
+	return `color-mix(in srgb, ${color} ${pct}%, var(--bgl-box-bg))`
+}

package/src/components/charts/core/uid.ts

@@ -0,0 +1,6 @@
+/** Stable per-instance id for SVG defs (gradients, clips, masks). */
+let n = 0
+export function chartUid(prefix = 'bglc'): string {
+	n += 1
+	return `${prefix}-${n}`
+}

package/src/components/charts/core/useChartAnim.ts

@@ -0,0 +1,60 @@
+/**
+ * Reveal animation: eases 0→1 once the chart scrolls into view. Respects
+ * `prefers-reduced-motion` (snaps to 1) and cleans up after itself.
+ */
+import { onMounted, onUnmounted, ref, type Ref } from 'vue'
+
+export interface AnimOptions {
+	el: Ref<HTMLElement | undefined>
+	enabled?: boolean
+	duration?: number
+	delay?: number
+}
+
+function easeOutCubic(t: number): number {
+	return 1 - (1 - t) ** 3
+}
+
+function prefersReduced(): boolean {
+	return typeof window !== 'undefined'
+		&& window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+}
+
+export function useChartAnim(opts: AnimOptions) {
+	const progress = ref(opts.enabled === false || prefersReduced() ? 1 : 0)
+	let observer: IntersectionObserver | null = null
+	let raf = 0
+	let started = false
+
+	function run() {
+		if (started) return
+		started = true
+		const duration = opts.duration ?? 700
+		const start = performance.now() + (opts.delay ?? 0)
+		const tick = (now: number) => {
+			const elapsed = now - start
+			if (elapsed < 0) { raf = requestAnimationFrame(tick); return }
+			const t = Math.min(elapsed / duration, 1)
+			progress.value = easeOutCubic(t)
+			if (t < 1) raf = requestAnimationFrame(tick)
+		}
+		raf = requestAnimationFrame(tick)
+	}
+
+	onMounted(() => {
+		if (progress.value === 1) return
+		if (typeof IntersectionObserver === 'undefined') { run(); return }
+		observer = new IntersectionObserver((entries) => {
+			for (const e of entries) if (e.isIntersecting) { run(); observer?.disconnect() }
+		}, { threshold: 0.25 })
+		if (opts.el.value) observer.observe(opts.el.value)
+		else run()
+	})
+
+	onUnmounted(() => {
+		observer?.disconnect()
+		cancelAnimationFrame(raf)
+	})
+
+	return { progress }
+}

package/src/components/charts/core/useChartFrame.ts

@@ -0,0 +1,49 @@
+/**
+ * Responsive chart frame: tracks the container's width via ResizeObserver,
+ * exposes inner plot dimensions, and detects RTL once (charts flip x in RTL).
+ */
+import { computed, onMounted, onUnmounted, ref, type Ref } from 'vue'
+
+export interface Padding { top: number; right: number; bottom: number; left: number }
+
+export interface FrameOptions {
+	height: Ref<number> | number
+	padding?: Partial<Padding>
+}
+
+const DEFAULT_PAD: Padding = { top: 8, right: 8, bottom: 22, left: 36 }
+
+export function useChartFrame(el: Ref<HTMLElement | undefined>, opts: FrameOptions) {
+	const width = ref(0)
+	const height = computed(() => (typeof opts.height === 'number' ? opts.height : opts.height.value))
+	const pad = computed<Padding>(() => ({ ...DEFAULT_PAD, ...opts.padding }))
+
+	const innerWidth = computed(() => Math.max(0, width.value - pad.value.left - pad.value.right))
+	const innerHeight = computed(() => Math.max(0, height.value - pad.value.top - pad.value.bottom))
+
+	const isRTL = ref(false)
+	function detectRTL() {
+		if (typeof document === 'undefined') return
+		const node = el.value
+		const dir = node?.closest('[dir]')?.getAttribute('dir') || document.documentElement.dir
+		isRTL.value = dir === 'rtl' || document.documentElement.lang === 'he'
+	}
+
+	let ro: ResizeObserver | null = null
+	onMounted(() => {
+		detectRTL()
+		if (el.value) {
+			width.value = el.value.clientWidth || 0
+			ro = new ResizeObserver((entries) => {
+				for (const e of entries) width.value = e.contentRect.width
+			})
+			ro.observe(el.value)
+		}
+	})
+	onUnmounted(() => ro?.disconnect())
+
+	/** Map a plot-local x (0..innerWidth) to the painted x, flipping in RTL. */
+	const flipX = (x: number) => (isRTL.value ? innerWidth.value - x : x)
+
+	return { width, height, pad, innerWidth, innerHeight, isRTL, flipX }
+}

package/src/components/charts/core/useScale.ts

@@ -0,0 +1,39 @@
+/**
+ * Minimal scale + tick helpers. No d3 — just the bits dashboards need.
+ */
+
+/** "Nice" rounded domain max so axis ticks land on clean numbers. */
+export function niceMax(max: number, ticks = 4): number {
+	if (max <= 0) return ticks
+	const rough = max / ticks
+	const mag = 10 ** Math.floor(Math.log10(rough))
+	const norm = rough / mag
+	const step = norm >= 5 ? 10 : norm >= 2 ? 5 : norm >= 1 ? 2 : 1
+	const niceStep = step * mag
+	return Math.ceil(max / niceStep) * niceStep
+}
+
+/** Evenly spaced tick values from min..max (inclusive). */
+export function ticks(min: number, max: number, count = 4): number[] {
+	const out: number[] = []
+	const step = (max - min) / count
+	for (let i = 0; i <= count; i++) out.push(min + step * i)
+	return out
+}
+
+/** Linear scale factory: maps a value in [d0,d1] → pixel in [r0,r1]. */
+export function linear(d0: number, d1: number, r0: number, r1: number) {
+	const span = d1 - d0 || 1
+	return (v: number) => r0 + ((v - d0) / span) * (r1 - r0)
+}
+
+/** Band scale for categorical x: returns center x + band width. */
+export function band(count: number, range: number, padding = 0.2) {
+	const step = range / Math.max(1, count)
+	const bandWidth = step * (1 - padding)
+	return {
+		bandWidth,
+		center: (i: number) => step * i + step / 2,
+		start: (i: number) => step * i + (step - bandWidth) / 2,
+	}
+}

package/src/components/charts/index.ts

@@ -0,0 +1,12 @@
+export { default as Sparkline } from './Sparkline.vue'
+export { default as LineChart } from './LineChart.vue'
+export { default as BarChart } from './BarChart.vue'
+export { default as Donut } from './Donut.vue'
+export { default as Funnel } from './Funnel.vue'
+export { default as Gauge } from './Gauge.vue'
+export { default as RadialBars } from './RadialBars.vue'
+export { default as RankBars } from './RankBars.vue'
+export { default as StatCard } from './StatCard.vue'
+
+export type { RawPoint, RawSeries, NormalizeOptions } from './core/data'
+export type { ValueFormat } from './core/format'

package/src/components/form/inputs/RadioGroup.vue

@@ -42,6 +42,7 @@ const props = withDefaults(
 		borderColor?: string
 		textColor?: string
 		textAlign?: 'left' | 'center' | 'right'
+		wrapperClass?: string
 	} & BagelInputShellProps>(),
 	{
 		align: 'center'
@@ -112,7 +113,7 @@ function handleChange() {
 		<p v-if="label" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
-<div class="radio-group-wrap">
+<div class="radio-group-wrap" :class="wrapperClass">
 	<label v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`" class="border rounded flex active-list-item hover mb-05" :for="opt.id || `${name}-${index}`"
 		:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
 				:style="{ backgroundColor: bgColor, borderColor }">

package/src/components/form/inputs/RangeInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { resolveI18n } from '@bagelink/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 
 export interface RangeInputProps extends BagelInputShellProps {
@@ -12,13 +12,18 @@ export interface RangeInputProps extends BagelInputShellProps {
 	label?: string
 	disabled?: boolean
 	id?: string
+	/** Force direction. Omit to inherit the page/parent `dir` (recommended). */
 	rtl?: boolean
 	multiRange?: boolean
 	formatValue?: (value: number) => string
-	/** צבע הרקע של הפס (track) */
+	/** Track (background) color. */
 	trackColor?: string
-	/** צבע הפס הפעיל והעיגול — ברירת מחדל: labelActiveColor או primary */
+	/** Active range + thumb color — defaults to labelActiveColor or primary. */
 	activeColor?: string
+	/** Slim variant for bare sliders / media scrubbers (smaller thumb + track). */
+	size?: 'sm' | 'md'
+	/** Hide the min/max footer labels (e.g. for a media scrubber). */
+	hideMinMax?: boolean
 }
 
 const props = defineProps<RangeInputProps>()
@@ -32,6 +37,17 @@ const {
 	formatValue = (value: number) => value.toString()
 } = props
 
+// Resolve direction: explicit `rtl` prop wins; otherwise inherit the element's
+// computed `dir` so a slider in an RTL page fills from the start edge natively.
+const rootEl = ref<HTMLElement | null>(null)
+const inheritedRtl = ref(false)
+onMounted(() => {
+	if (props.rtl === undefined && rootEl.value) {
+		inheritedRtl.value = getComputedStyle(rootEl.value).direction === 'rtl'
+	}
+})
+const isRtl = computed(() => props.rtl ?? inheritedRtl.value)
+
 const from = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue ?? min))
 const to = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[1] : max)
 
@@ -60,16 +76,16 @@ function handleInput(value: number, isFromInput: boolean) {
 	emit('update:modelValue', multiRange ? [validFrom.value, validTo.value] : validFrom.value)
 }
 
+// Position the active range with logical properties so the browser handles RTL.
 const rangeStyle = computed(() => {
 	if (multiRange) {
 		return {
-			left: `${fromPercentage.value}%`,
+			insetInlineStart: `${fromPercentage.value}%`,
 			width: `${toPercentage.value - fromPercentage.value}%`
 		}
 	}
-	return props.rtl
-		? { left: `${100 - fromPercentage.value}%`, width: `${fromPercentage.value}%` }
-		: { left: '0', width: `${fromPercentage.value}%` }
+	// Single value: always fills from the inline-start edge (start = min).
+	return { insetInlineStart: '0', width: `${fromPercentage.value}%` }
 })
 
 const displayFrom = computed(() => formatValue(validFrom.value))
@@ -78,11 +94,14 @@ const displayTo = computed(() => formatValue(validTo.value))
 
 <template>
 	<div
-		:dir="rtl ? 'rtl' : 'ltr'"
+		ref="rootEl"
+		:dir="rtl === undefined ? undefined : (rtl ? 'rtl' : 'ltr')"
+		:class="{ 'range-sm': size === 'sm' }"
 		:style="[
 			minWidth ? { minWidth } : {},
 			maxWidth ? { maxWidth } : {},
 			activeColor ? { '--bgl-range-thumb-color': activeColor } : {},
+			activeColor ? { '--bgl-input-label-active-color': activeColor } : {},
 			labelActiveColor ? { '--bgl-input-label-active-color': labelActiveColor } : {},
 		]"
 	>
@@ -145,7 +164,7 @@ const displayTo = computed(() => formatValue(validTo.value))
 				</slot>
 			</p>
 		</div>
-		<p class="txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05">
+		<p v-if="!hideMinMax" class="txt-center txt-14 user-select-none range-slider-txt flex space-between opacity-4 mx-05">
 			<slot name="min" :max="formatValue(max)" :min="formatValue(min)" :from="displayFrom" :to="displayTo" :progress="displayFrom">
 				<span>{{ formatValue(min) }}</span>
 			</slot>
@@ -160,23 +179,33 @@ const displayTo = computed(() => formatValue(validTo.value))
 
 .range-slider-position-txt{
 margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
-top: calc(var(--bgl-range-thumb-size) / 2 ) ;
-transition: transform 0.1s, opacity 0.5s, top 0.5s;
+/* Float the value bubble ABOVE the thumb so the thumb never covers it. */
+bottom: calc(100% + 0.25rem);
+transition: transform 0.1s, opacity 0.3s, bottom 0.3s;
 transform: scale(0.8);
+transform-origin: bottom center;
+opacity: 0;
 width: var(--bgl-range-thumb-size);
 }
-.range-slider:hover .range-slider-position-txt{
+.range-slider:hover .range-slider-position-txt,
+.range-slider:focus-within .range-slider-position-txt{
 opacity: 1;
 transform: scale(1);
-top: calc(var(--bgl-range-thumb-size) / 2);
 }
 
 .range-slider {
-height: var(--bgl-range-track-size);
+height: var(--bgl-range-thumb-size);
 display: flex;
 align-items: center;
 margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
 }
+
+/* Slim variant — smaller thumb + thinner track for bare sliders / scrubbers. */
+.range-sm {
+--bgl-range-thumb-size: 14px;
+--bgl-range-track-height: 4px;
+}
+.range-sm .range-slider { margin-top: 0; }
 .range-slider-txt{
 margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
@@ -230,7 +259,6 @@ cursor: grabbing;
 .range-slider-position-txt{
 	opacity: 1;
 	transform: scale(1);
-	top: calc(var(--bgl-range-thumb-size) / 1.8) ;
 }
 }
 

package/src/components/form/inputs/SelectInput.vue

@@ -303,10 +303,7 @@ onMounted(() => {
 						<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
 							<Btn flat thin icon="clear" class="color-gray" @click="selectedItems = []; emitUpdate()" />
 						</div>
-						<Transition v-if="!disabled" name="icon-swap" mode="out-in">
-							<Icon v-if="open" key="open" thin :icon="underlined ? 'expand_less' : 'unfold_less'" />
-							<Icon v-else key="closed" thin :icon="underlined ? 'expand_more' : 'unfold_more'" />
-						</Transition>
+						<Icon v-if="!disabled" thin transition="rotate" :icon="open ? (underlined ? 'expand_less' : 'unfold_less') : (underlined ? 'expand_more' : 'unfold_more')" />
 					</button>
 					<input
 						v-if="required && !underlined" tabindex="-1"
@@ -393,21 +390,6 @@ background: var(--bgl-gray-tint);
 opacity: 0.3;
 }
 
-.icon-swap-enter-active,
-.icon-swap-leave-active {
-transition: opacity 0.12s ease, transform 0.12s ease;
-}
-
-.icon-swap-enter-from {
-opacity: 0;
-transform: translateY(-4px);
-}
-
-.icon-swap-leave-to {
-opacity: 0;
-transform: translateY(4px);
-}
-
 .selected {
 color: var(--bgl-input-label-active-color, var(--bgl-primary));
 background: var(--bgl-selected);

package/src/components/index.ts

@@ -3,7 +3,8 @@ export { default as AccordionItem } from './AccordionItem.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
 export { default as AddToCalendar } from './AddToCalendar.vue'
 export { default as Alert } from './Alert.vue'
-export * from './analytics'
+export { BarChart, Donut, Funnel, Gauge, LineChart, RadialBars, RankBars, Sparkline, StatCard } from './charts'
+export type { NormalizeOptions, RawPoint, RawSeries, ValueFormat } from './charts'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 /** @deprecated Renamed to Badge. Pill is an alias that will be removed in a future version. */
@@ -19,6 +20,7 @@ export { default as TableSchema } from './dataTable/DataTable.vue'
 export { Draggable, useDraggable, vDraggable } from './draggable'
 export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
+export { default as EmptyState } from './EmptyState.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as FilterQuery } from './FilterQuery.vue'
 export type { FilterField, QueryOption } from './FilterQuery.types'

package/src/components/layout/Timeline.types.ts

@@ -0,0 +1,9 @@
+import type { IconType, ThemeType } from '@bagelink/vue'
+
+export interface TimelineEntry {
+	title?: string
+	meta?: string
+	icon?: IconType
+	color?: ThemeType
+	[key: string]: any
+}

package/src/components/layout/Timeline.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglTimeline' })
+import { useSlots } from 'vue'
+import type { TimelineEntry } from './Timeline.types'
+import TimelineItem from './TimelineItem.vue'
+
+/**
+ * Vertical activity / history feed. Two ways to use it:
+ *
+ * 1. Data-driven — pass `items`; each maps to a <TimelineItem>. Use the default
+ *    scoped slot to render custom body content per entry:
+ *      <Timeline :items="activity">
+ *        <template #default="{ item }">{{ item.title }}</template>
+ *      </Timeline>
+ *
+ * 2. Composition — drop <TimelineItem> children directly (omit `items`). Mark the
+ *    last one with `last` to drop its connector, or let data-driven mode do it.
+ */
+const { items = [] } = defineProps<{
+	items?: TimelineEntry[]
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<div class="bgl-timeline grid">
+		<template v-if="items.length">
+			<TimelineItem
+				v-for="(item, i) in items"
+				:key="i"
+				:title="item.title"
+				:meta="item.meta"
+				:icon="item.icon"
+				:color="item.color"
+				:last="i === items.length - 1"
+			>
+				<template v-if="slots.default" #default>
+					<slot :item="item" :index="i" />
+				</template>
+				<template v-if="slots.meta" #meta>
+					<slot name="meta" :item="item" :index="i" />
+				</template>
+			</TimelineItem>
+		</template>
+		<slot v-else name="items" />
+	</div>
+</template>
+
+<style scoped>
+.bgl-timeline {
+	align-content: start;
+}
+</style>