@blukavantui/charts-community 0.0.0-stage → 1.2.0

package/src/motion/scatter.ts

@@ -0,0 +1,15 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {ScatterChart} from 'echarts/charts';
+import {GridComponent} from 'echarts/components';
+import {buildOption as scatter} from '../builders/scatter.ts';
+import type {ChartPoint,ScatterOptions} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionScatterChart(host: HTMLElement, options: ScatterOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([ScatterChart, GridComponent]); return createChartRuntime<ScatterOptions, ChartPoint>(host, 'scatter', options, events, scatter, policy);
+  });
+}

package/src/motion/sparkline.ts

@@ -0,0 +1,10 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {createMotionSparkline as sparklineWithPolicy} from '../web-motion-sparkline.ts';
+import type {SparklineOptions,SparklineEvents} from '../sparkline.ts';
+export function createMotionSparkline(host: HTMLElement, options: SparklineOptions, motion: MotionState, events: SparklineEvents = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      return sparklineWithPolicy(host, options, events, policy);
+  });
+}

package/src/motion-collection.ts

@@ -0,0 +1,20 @@
+import {createMotionSettingsGroup} from '@blukavantui/community/motion/settings';
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import type {MotionState} from './motion-policy.ts';
+export function bindMotionCharts<F extends Record<string, (host:any,options:any,motion:MotionState,events?:any,settings?:ComponentMotionSettings)=>any>>(factories:F, motion:MotionState,defaults:ComponentMotionSettings={}) {
+  const settings=createMotionSettingsGroup(defaults);
+  const owned=new Set<{destroy():void}>(); let dead=false;
+  function bind<F extends (host:any,options:any,motion:MotionState,events?:any,settings?:ComponentMotionSettings)=>any>(factory:F) {
+    return (host:Parameters<F>[0],options:Parameters<F>[1],events:Parameters<F>[3]={}):ReturnType<F> => {
+      if(dead)throw Error('Motion charts are destroyed.');
+      const instance=factory(host,options,motion,events,settings.settings),destroy=instance.destroy.bind(instance);let disposed=false;
+      const binding=settings.bind(instance.setMotion);instance.setMotion=binding.setMotion;
+      instance.destroy=()=>{if(disposed)return;disposed=true;owned.delete(instance);binding.destroy();destroy();};owned.add(instance);return instance;
+    };
+  }
+  return {
+    configure(next:ComponentMotionSettings={}){if(dead)throw Error('Motion charts are destroyed.');settings.configure(next);},
+    ...Object.fromEntries(Object.entries(factories).map(([name,factory])=>[name,bind(factory)])) as {[K in keyof F]:(host:Parameters<F[K]>[0],options:Parameters<F[K]>[1],events?:Parameters<F[K]>[3])=>ReturnType<F[K]>},
+    destroy(){if(dead)return;dead=true;for(const instance of [...owned])instance.destroy();}
+  };
+}

package/src/motion-community.ts

@@ -0,0 +1,22 @@
+import {bindMotionCharts} from './motion-collection.ts';
+import type {MotionState} from './motion-policy.ts';
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {createMotionSparkline} from './motion/sparkline.ts';
+export {createMotionSparkline} from './motion/sparkline.ts';
+import {createMotionLineChart} from './motion/line.ts';
+export {createMotionLineChart} from './motion/line.ts';
+import {createMotionBarChart} from './motion/bar.ts';
+export {createMotionBarChart} from './motion/bar.ts';
+import {createMotionPieChart} from './motion/pie.ts';
+export {createMotionPieChart} from './motion/pie.ts';
+import {createMotionDoughnutChart} from './motion/doughnut.ts';
+export {createMotionDoughnutChart} from './motion/doughnut.ts';
+import {createMotionScatterChart} from './motion/scatter.ts';
+export {createMotionScatterChart} from './motion/scatter.ts';
+import {createMotionRadarChart} from './motion/radar.ts';
+export {createMotionRadarChart} from './motion/radar.ts';
+import {createMotionHeatmap} from './motion/heatmap.ts';
+export {createMotionHeatmap} from './motion/heatmap.ts';
+export function createMotionCharts(motion:MotionState,defaults:ComponentMotionSettings={}) {
+  return bindMotionCharts({createSparkline:createMotionSparkline,createLineChart:createMotionLineChart,createBarChart:createMotionBarChart,createPieChart:createMotionPieChart,createDoughnutChart:createMotionDoughnutChart,createScatterChart:createMotionScatterChart,createRadarChart:createMotionRadarChart,createHeatmap:createMotionHeatmap},motion,defaults);
+}

package/src/motion-policy.ts

@@ -0,0 +1,36 @@
+import type {ChartPresentation} from './catalogue-runtime.ts';
+import {createComponentMotionState,validateComponentMotion,type ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {motionEasings} from '@blukavantui/community/motion';
+export interface MotionState { readonly mode:'full'|'reduced'|'off'; }
+const engineEasing={standard:'cubicOut','ease-in':'cubicIn','ease-out':'cubicOut','ease-in-out':'cubicInOut',linear:'linear',spring:'backOut'};
+export function chartMotionPolicy(motion:MotionState,state?:ReturnType<typeof createComponentMotionState>) {
+  const listeners=new Set<()=>void>();
+  const policy:ChartPresentation & {notify():void} = {
+    mode(host) {
+      if(motion.mode==='off'||host.closest('[data-blu-motion="off"], .blu-motion-off'))return 'off';
+      return motion.mode==='reduced'||host.closest('[data-blu-motion="reduced"]')?'reduced':'full';
+    },
+    timing() {const s=state?.settings;return {duration:s?.duration,easing:s?.easing?engineEasing[s.easing]:undefined,curve:s?.easing?motionEasings[s.easing]:undefined};},
+    subscribe(host,refresh) {
+      let previous=policy.mode(host);
+      const changed=()=>{previous=policy.mode(host);refresh();};listeners.add(changed);
+      const observer=new MutationObserver(()=>{if(policy.mode(host)!==previous)changed();});
+      for(let ancestor:HTMLElement|null=host;ancestor;ancestor=ancestor.parentElement)observer.observe(ancestor,{attributes:true,attributeFilter:['data-blu-motion','class']});
+      return ()=>{listeners.delete(changed);observer.disconnect();};
+    },
+    notify(){for(const listener of listeners)listener();},
+  };
+  return policy;
+}
+/** Preserves the original chart instance, selection, events, licence and disposal. */
+export function configuredChart<C extends {destroy():void}>(host:HTMLElement,motion:MotionState,settings:ComponentMotionSettings,create:(policy:ChartPresentation,root:HTMLElement)=>C) {
+  validateComponentMotion(settings);
+  // A collection may append several charts to one host. Each owns its own scope.
+  const root=document.createElement('div');root.className='blu-chart-motion-scope';host.append(root);
+  const state=createComponentMotionState(root,motion,settings),policy=chartMotionPolicy(motion,state);
+  let instance:C;
+  try{instance=create(policy,root);}catch(error){state.destroy();root.remove();throw error;}
+  const destroy=instance.destroy.bind(instance);let dead=false;
+  instance.destroy=()=>{if(dead)return;dead=true;destroy();state.destroy();root.remove();};
+  return Object.assign(instance,{setMotion(next:ComponentMotionSettings={}){if(dead)throw Error('Chart motion is destroyed.');state.update(next);policy.notify();}});
+}

package/src/options.ts

@@ -0,0 +1,24 @@
+import type { EChartsCoreOption } from 'echarts/core';
+import type { MixedChartOptions, HeatmapOptions, ChartOptions } from './types.ts';
+import { formatValue, heatmapRange, heatmapPoint } from './model.ts';
+import { automaticPalette, componentPalette, isComponentColor, resolveChartColor, contrastText, interpolateColor } from './colors.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal } from './accessibility.ts';
+import { escapeText } from './validation.ts';
+
+export interface ChartTheme { surface: string; text: string; muted: string; border: string; dark: boolean; forcedColors?: boolean; read: (name: string) => string; palette: string[]; }
+export function themeTokens(host: HTMLElement): ChartTheme {
+  const style = getComputedStyle(host);
+  const read = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback;
+  const dark = document.documentElement.dataset.bluuiTheme === 'dark';
+  const forcedColors = matchMedia('(forced-colors: active)').matches;
+  if (forcedColors) {
+    const probe = document.createElement('span');
+    probe.style.cssText = 'position:absolute;visibility:hidden;color:Canvas;background-color:CanvasText;forced-color-adjust:none';
+    host.append(probe);
+    const computed = getComputedStyle(probe), surface = computed.color, text = computed.backgroundColor;
+    probe.remove();
+    return { surface, text, muted: text, border: text, dark, forcedColors, read: () => '', palette: Array(8).fill(text) };
+  }
+  return { forcedColors, surface: read('--bluui-surface', '#fff'), text: read('--bluui-text', '#182230'), muted: read('--bluui-text-muted', '#667085'), border: read('--bluui-border', '#e3e5ed'), dark, read: (name: string) => style.getPropertyValue(name),
+    palette: automaticPalette(dark) };
+}

package/src/pie.ts

@@ -0,0 +1,12 @@
+import { buildOption } from './builders/pie.ts';
+import { use } from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import { createCatalogueChart } from './catalogue-runtime.ts';
+import type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+import type { ChartEvents } from './types.ts';
+export type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+export type PieChartOptions = OptionsByKind['pie'];
+export function createPieChart(host: HTMLElement, options: PieChartOptions, events: ChartEvents<ChartPoint> = {}) {
+  use([PieChart]);
+  return createCatalogueChart(host, 'pie', options, events, buildOption);
+}

package/src/radar.ts

@@ -0,0 +1,12 @@
+import { buildOption } from './builders/radar.ts';
+import { use } from 'echarts/core';
+import { RadarChart } from 'echarts/charts';
+import { RadarComponent } from 'echarts/components';
+import { createCatalogueChart } from './catalogue-runtime.ts';
+import type { RadarOptions, ChartPoint } from './catalogue-types.ts';
+import type { ChartEvents } from './types.ts';
+export type { RadarOptions, RadarCategory } from './catalogue-types.ts';
+export function createRadarChart(host: HTMLElement, options: RadarOptions, events: ChartEvents<ChartPoint> = {}) {
+  use([RadarChart, RadarComponent]);
+  return createCatalogueChart(host, 'radar', options, events, buildOption);
+}

package/src/runtime.ts

@@ -0,0 +1,7 @@
+import {createChartRuntime} from './catalogue-runtime.ts';
+import type {MixedChartOptions,HeatmapOptions,MixedPoint,HeatmapPoint,ChartEvents,ChartInstance} from './types.ts';
+import type {EChartsCoreOption} from 'echarts/core';
+import type {themeTokens} from './options.ts';
+export function createChart<O extends MixedChartOptions|HeatmapOptions,P extends MixedPoint|HeatmapPoint>(host:HTMLElement,kind:'mixed'|'heatmap',initial:O,events:ChartEvents<P>,build:(o:any,t:ReturnType<typeof themeTokens>)=>EChartsCoreOption):ChartInstance<O> {
+  return createChartRuntime(host,kind,initial,events,build);
+}

package/src/scatter.ts

@@ -0,0 +1,13 @@
+import { buildOption } from './builders/scatter.ts';
+import { use } from 'echarts/core';
+import { ScatterChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { createCatalogueChart } from './catalogue-runtime.ts';
+import type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+import type { ChartEvents } from './types.ts';
+export type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+export type ScatterChartOptions = OptionsByKind['scatter'];
+export function createScatterChart(host: HTMLElement, options: ScatterChartOptions, events: ChartEvents<ChartPoint> = {}) {
+  use([ScatterChart, GridComponent]);
+  return createCatalogueChart(host, 'scatter', options, events, buildOption);
+}

package/src/sparkline-runtime/runtime.d.ts

@@ -0,0 +1,10 @@
+export function installSparkline(): {
+  sync(id: string, options: object, events: { Error?(message: string): unknown }, key: string): string;
+  destroy(key: string): void;
+  geometry(raw: string | Array<{ Value: number; Label?: string }>, height: number, width?: number, lineStyle?: 'Straight' | 'Smooth'): {
+    rows: Array<{ Value: number; Label?: string }>;
+    coordinates: number[][];
+    line: string;
+    area: string;
+  };
+};

package/src/sparkline-runtime/runtime.js

@@ -0,0 +1,263 @@
+// Lightweight SVG renderer, migrated from the Community Sparkline.
+// Module-local ownership keeps Charts independent of the native UI runtime.
+var shared = { instances: new Map(), serial: 0 };
+var installed;
+function el(tag, cls, text) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function attr(n, key, value) {
+  n.setAttribute(key, String(value));
+  return n;
+}
+function report(s, message) {
+  if (!s.error) {
+    s.error = attr(el("p", "blu-common-error"), "role", "alert");
+    s.host.append(s.error);
+  }
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && s.lastError !== message && s.events.Error) {
+    s.lastError = message;
+    try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+  if (!message) s.lastError = "";
+}
+function integer(value, fallback, min, max) {
+  value = value === void 0 ? fallback : Number(value);
+  if (!Number.isInteger(value) || value < min || value > max) throw Error("Expected an integer between " + min + " and " + max + ".");
+  return value;
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s) return;
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  s.owned.forEach(function(n) {
+    n.remove();
+  });
+  if (s.host._bluChartsSparklineOwner === key) {
+    delete s.host._bluChartsSparklineOwner;
+    s.host.removeAttribute("data-blu-ready");
+  }
+  shared.instances.delete(key);
+}
+function own(s, node) {
+  s.owned.push(node);
+  return node;
+}
+function geometry(raw, height, width = 300, lineStyle = 'Smooth') {
+  var rows = typeof raw === "string" ? JSON.parse(raw || "[]") : raw || [];
+  if (!Array.isArray(rows) || rows.length > 1e4) throw Error("Points must be a list with at most 10,000 items.");
+  var values = rows.map(function(p) {
+    if (!p || typeof p.Value !== "number" || !Number.isFinite(p.Value)) throw Error("Every Sparkline point needs a finite numeric Value.");
+    return p.Value;
+  });
+  if (!values.length) return { rows, coordinates: [], line: "", area: "" };
+  var min = Math.min.apply(null, values), max = Math.max.apply(null, values), range = max - min;
+  var scale = Math.max(Math.abs(min), Math.abs(max), 1), low = min / scale, spread = max / scale - low;
+  var coordinates = values.map(function(value, index) {
+    return [values.length === 1 ? width / 2 : 6 + index * (width - 12) / (values.length - 1), spread ? height - 6 - (value / scale - low) / spread * (height - 12) : height / 2];
+  });
+  var line = coordinates.map(function(p, i) {
+    return (i ? "L" : "M") + p[0].toFixed(3) + " " + p[1].toFixed(3);
+  }).join(" ");
+  if (lineStyle === 'Smooth' && coordinates.length > 2) {
+    // Monotone cubic interpolation keeps each segment within its observed values.
+    var step = (width - 12) / (coordinates.length - 1);
+    var slopes = coordinates.slice(1).map(function(p, i) { return (p[1] - coordinates[i][1]) / step; });
+    var tangents = coordinates.map(function(_, i) {
+      if (i === 0) return slopes[0];
+      if (i === coordinates.length - 1) return slopes[i - 1];
+      var before = slopes[i - 1], after = slopes[i];
+      return before * after > 0 ? 2 * before * after / (before + after) : 0;
+    });
+    line = 'M' + coordinates[0][0].toFixed(3) + ' ' + coordinates[0][1].toFixed(3);
+    for (var i = 1; i < coordinates.length; i++) {
+      var start = coordinates[i - 1], end = coordinates[i];
+      line += ' C' + (start[0] + step / 3).toFixed(3) + ' ' + (start[1] + tangents[i - 1] * step / 3).toFixed(3)
+        + ' ' + (end[0] - step / 3).toFixed(3) + ' ' + (end[1] - tangents[i] * step / 3).toFixed(3)
+        + ' ' + end[0].toFixed(3) + ' ' + end[1].toFixed(3);
+    }
+  }
+  return { rows, coordinates, line, area: line + " L" + coordinates[coordinates.length - 1][0] + " " + (height - 4) + " L" + coordinates[0][0] + " " + (height - 4) + " Z", min, max, first: values[0], last: values[values.length - 1] };
+}
+function sparkline(s) {
+  var o = s.options, width = Math.max(24, Math.round(s.host.clientWidth || 300)), signature = JSON.stringify([o, width, s.reducedMotion.matches]);
+  const msg=(key,fallback,values={})=>(o.Messages?.[key]??fallback).replace(/\{(\w+)\}/g,(token,name)=>values[name]??token);
+  if (s.renderSignature === signature) return;
+  var lineStyle = o.LineStyle || 'Smooth';
+  if (!['Straight', 'Smooth'].includes(lineStyle)) throw Error('LineStyle must be Straight or Smooth.');
+  var height = integer(o.Height, 64, 24, 240), geometryKey = JSON.stringify([o.PointsJson, height, width, lineStyle]);
+  var g = s.geometryKey === geometryKey ? s.geometry : geometry(o.PointsJson, height, width, lineStyle);
+  var animation = o.Animation || (o.AnimateGlow === false ? 'Off' : 'Once');
+  if (!['Off', 'Once', 'Continuous'].includes(animation)) throw Error('Animation must be Off, Once or Continuous.');
+  var duration = o.AnimationDuration === undefined ? 5 : Number(o.AnimationDuration);
+  if (!Number.isFinite(duration) || duration < 1 || duration > 60) throw Error('AnimationDuration must be between 1 and 60 seconds.');
+  var opacity = o.AreaOpacity === undefined ? 18 : Number(o.AreaOpacity);
+  if (!Number.isFinite(opacity) || opacity < 0 || opacity > 100) throw Error('AreaOpacity must be between 0 and 100 percent.');
+  if (s.animation !== animation) s.animationPaused = false;
+  s.animation = animation;
+  s.geometryKey = geometryKey;
+  s.geometry = g;
+  var color = String(o.Color || "Primary").toLowerCase();
+  if ("default primary secondary success processing warning error danger magenta red volcano orange gold lime green cyan blue geekblue purple".split(" ").indexOf(color) < 0) throw Error("Unknown ComponentColor.");
+  if (!s.body) {
+    s.body = own(s, el("div", "blu-sparkline"));
+    s.host.append(s.body);
+  }
+  var body = s.body, wasOpen = !!(body.querySelector("details") && body.querySelector("details").open), hadFocus = body.contains(document.activeElement);
+  while (body.firstChild) body.removeChild(body.firstChild);
+  body.style.setProperty("--blu-sparkline-color", "var(--bluui-color-" + color + "-text)");
+  body.style.setProperty("--blu-sparkline-height", height + "px");
+  if (!g.rows.length) {
+    body.append(el("p", "blu-sparkline__empty", o.EmptyText || "No trend data."));
+    s.renderSignature = signature;
+    return;
+  }
+  var ns = "http://www.w3.org/2000/svg", svg = document.createElementNS(ns, "svg");
+  attr(svg, "viewBox", "0 0 " + width + " " + height);
+  attr(svg, "preserveAspectRatio", "none");
+  attr(svg, "role", "img");
+  const direction=g.last>g.first?'Rising':g.last<g.first?'Falling':'Unchanged';
+  var summary = o.SummaryText || msg('TrendSummary','{count} points. {direction} from {first} to {last}. Minimum {min}, maximum {max}.',{count:g.rows.length,direction:msg(direction,direction),first:g.first,last:g.last,min:g.min,max:g.max});
+  attr(svg, "aria-label", (o.AccessibleLabel || "Trend") + ". " + summary);
+  var title = document.createElementNS(ns, "title");
+  title.textContent = (o.AccessibleLabel || "Trend") + ". " + summary;
+  svg.append(title);
+  if (o.ShowArea !== false && g.rows.length > 1) {
+    var defs = document.createElementNS(ns, 'defs'), gradient = document.createElementNS(ns, 'linearGradient');
+    attr(gradient, 'id', s.uid + '-area');
+    attr(gradient, 'x1', '0%'); attr(gradient, 'y1', '0%'); attr(gradient, 'x2', '0%'); attr(gradient, 'y2', '100%');
+    [opacity / 100, o.AreaFade === false ? opacity / 100 : 0].forEach(function(value, index) {
+      var stop = document.createElementNS(ns, 'stop');
+      attr(stop, 'offset', index ? '100%' : '0%');
+      stop.style.stopColor = 'var(--blu-sparkline-color)';
+      attr(stop, 'stop-opacity', value); gradient.append(stop);
+    });
+    defs.append(gradient); svg.append(defs);
+    var area = document.createElementNS(ns, "path");
+    attr(area, "d", g.area);
+    attr(area, "class", "blu-sparkline__area");
+    area.style.fill = 'url(#' + s.uid + '-area)';
+    svg.append(area);
+  }
+  var path = document.createElementNS(ns, "path");
+  attr(path, "d", g.line);
+  attr(path, "class", "blu-sparkline__line");
+  attr(path, "vector-effect", "non-scaling-stroke");
+  svg.append(path);
+  var moving = animation !== 'Off' && g.rows.length > 1 && !s.reducedMotion.matches;
+  if ((!moving && o.ShowEndMarker !== false) || g.rows.length === 1) {
+    var p = g.coordinates[g.coordinates.length - 1], circle = document.createElementNS(ns, "circle");
+    attr(circle, "cx", p[0]);
+    attr(circle, "cy", p[1]);
+    attr(circle, "r", 3);
+    attr(circle, "class", "blu-sparkline__point");
+    svg.append(circle);
+  }
+  if (moving) {
+    var traveler = document.createElementNS(ns, 'g');
+    attr(traveler, 'class', 'blu-sparkline__traveler'); attr(traveler, 'aria-hidden', 'true');
+    [['halo', 6], ['ring', 4.5], ['cursor', 3]].forEach(function(part) {
+      var marker = document.createElementNS(ns, 'circle');
+      attr(marker, 'r', part[1]);
+      attr(marker, 'class', 'blu-sparkline__' + part[0]); traveler.append(marker);
+    });
+    var motion = document.createElementNS(ns, 'animateMotion'), fade = document.createElementNS(ns, 'animate');
+    attr(motion, 'path', g.line); attr(motion, 'calcMode', 'spline');
+    attr(motion, 'keyPoints', '0;1'); attr(motion, 'keyTimes', '0;1');
+    attr(motion, 'keySplines', '0.22 0.61 0.36 1');
+    attr(fade, 'attributeName', 'opacity'); attr(fade, 'values', '0;1;1;0'); attr(fade, 'keyTimes', '0;0.03;0.96;1');
+    [motion, fade].forEach(function(effect) {
+      attr(effect, 'dur', duration + 's'); attr(effect, 'repeatCount', animation === 'Continuous' ? 'indefinite' : '1'); attr(effect, 'fill', 'freeze'); traveler.append(effect);
+    });
+    svg.append(traveler);
+  }
+  body.append(svg);
+  if (moving && (animation === 'Continuous' || duration > 5)) {
+    var pause = el('button', 'blu-sparkline__pause'); pause.type = 'button';
+    var updatePause = function() {
+      pause.textContent = s.animationPaused ? msg('ResumeAnimation','Resume animation') : msg('PauseAnimation','Pause animation');
+      if (s.animationPaused) svg.pauseAnimations(); else svg.unpauseAnimations();
+    };
+    pause.addEventListener('click', function() { s.animationPaused = !s.animationPaused; updatePause(); });
+    body.append(pause); updatePause();
+  }
+  if (o.ShowDataTable) {
+    let buildTable = function() {
+      if (!details.open || tableBuilt) return;
+      var table = el("table"), caption = el("caption", "", o.AccessibleLabel || "Trend"), thead = el("thead"), headings = el("tr");
+      headings.append(attr(el("th", "", msg('Point','Point')), "scope", "col"), attr(el("th", "", msg('Value','Value')), "scope", "col"));
+      thead.append(headings);
+      table.append(caption, thead);
+      var tbody = el("tbody");
+      g.rows.forEach(function(row, index) {
+        var tr = el("tr");
+        tr.append(attr(el("th", "", row.Label || String(index + 1)), "scope", "row"), el("td", "", String(row.Value)));
+        tbody.append(tr);
+      });
+      table.append(tbody);
+      details.append(table);
+      tableBuilt = true;
+    };
+    var details = el("details", "blu-sparkline__data");
+    details.open = wasOpen;
+    details.append(el("summary", "", msg('ViewData','View trend data')));
+    var tableBuilt = false;
+    details.addEventListener("toggle", buildTable);
+    body.append(details);
+    buildTable();
+    if (hadFocus) details.querySelector("summary").focus();
+  }
+  s.renderSignature = signature;
+}
+function api(kind, render) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared.instances.get(key);
+    if (s && s.host !== host) {
+      destroy(key);
+      s = null;
+    }
+    if (host._bluChartsSparklineOwner && host._bluChartsSparklineOwner !== key) destroy(host._bluChartsSparklineOwner);
+    if (!s) {
+      s = { host, key, uid: "blu-charts-trend-" + ++shared.serial, owned: [], cleanup: [], reducedMotion: matchMedia('(prefers-reduced-motion: reduce)') };
+      shared.instances.set(key, s);
+      var refresh = function() { if (!s.dead && s.options) { try { render(s); } catch (_) {} } };
+      var observer = new ResizeObserver(refresh); observer.observe(host);
+      s.reducedMotion.addEventListener('change', refresh);
+      s.cleanup.push(function() { observer.disconnect(); s.reducedMotion.removeEventListener('change', refresh); });
+    }
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    host._bluChartsSparklineOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    attr(host, "data-blu-ready", "true");
+    try {
+      render(s);
+      report(s, "");
+      return "";
+    } catch (e) {
+      s.renderSignature = void 0;
+      report(s, e.message || String(e));
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function installSparkline() {
+  return installed || (installed = Object.assign(api("Sparkline", sparkline), { geometry }));
+}
+export {
+  installSparkline
+};

package/src/sparkline-validation.ts

@@ -0,0 +1,19 @@
+import type {SparklineOptions} from './sparkline.ts';
+import {boundedList,boundedText,safeNumber} from './limits.ts';
+import {isComponentColor} from './colors.ts';
+/** Validate before touching the SVG or committing an update. */
+export function validateSparkline(o:SparklineOptions) {
+  boundedList(o.Points,'Points');
+  if(o.Messages!==undefined&&(!o.Messages||typeof o.Messages!=='object'||Array.isArray(o.Messages)||Object.keys(o.Messages).length>100||!Object.values(o.Messages).every(boundedText)))throw new Error('Messages must contain plain text translations.');
+  if(o.Points.some(p=>!p||!safeNumber(p.Value)||p.Label!==undefined&&!boundedText(p.Label)))throw new Error('Points require supported finite values and plain text labels.');
+  for(const key of ['AnimateGlow','ShowArea','AreaFade','ShowEndMarker','ShowDataTable'] as const)
+    if(o[key]!==undefined&&typeof o[key]!=='boolean')throw new Error(`${key} must be Boolean.`);
+  for(const key of ['AccessibleLabel','SummaryText','EmptyText','ExtendedClass'] as const)
+    if(o[key]!==undefined&&!boundedText(o[key]))throw new Error(`${key} must be plain text within the text limit.`);
+  if(o.Color!==undefined&&!isComponentColor(o.Color))throw new Error('Unknown ComponentColor.');
+  if(o.LineStyle!==undefined&&!['Straight','Smooth'].includes(o.LineStyle))throw new Error('LineStyle must be Straight or Smooth.');
+  if(o.Animation!==undefined&&!['Off','Once','Continuous'].includes(o.Animation))throw new Error('Animation must be Off, Once or Continuous.');
+  if(o.Height!==undefined&&(!Number.isInteger(o.Height)||o.Height<24||o.Height>240))throw new Error('Height must be an integer from 24 to 240.');
+  if(o.AnimationDuration!==undefined&&(!safeNumber(o.AnimationDuration)||o.AnimationDuration<1||o.AnimationDuration>60))throw new Error('AnimationDuration must be between 1 and 60.');
+  if(o.AreaOpacity!==undefined&&(!safeNumber(o.AreaOpacity)||o.AreaOpacity<0||o.AreaOpacity>100))throw new Error('AreaOpacity must be between 0 and 100.');
+}

package/src/sparkline.css

@@ -0,0 +1,25 @@
+/* BluKavantUI Charts Community / Sparkline. SVG scales with the container; colors inherit the
+   shared palette. Values are always exposed through an accessible summary. */
+.blu-sparkline { min-width: 0; width: 100%; color: var(--bluui-text); }
+.blu-sparkline svg { display: block; width: 100%; height: var(--blu-sparkline-height, 64px); overflow: visible; }
+.blu-sparkline__line { fill: none; stroke: var(--blu-sparkline-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.blu-sparkline__area { fill: var(--blu-sparkline-color); opacity: 1; }
+.blu-sparkline__point { fill: var(--blu-sparkline-color); }
+.blu-sparkline__empty { margin: 0; min-height: var(--blu-sparkline-height, 64px); display: flex; align-items: center; color: var(--bluui-text-muted); }
+.blu-sparkline__data { margin-top: 8px; font-size: 13px; }
+.blu-sparkline__data summary { width: fit-content; padding: 6px 0; cursor: pointer; color: var(--bluui-color-primary-text); }
+.blu-sparkline__data table { border-collapse: collapse; width: 100%; margin-top: 8px; }
+.blu-sparkline__data :is(th,td) { padding: 6px 12px; border-bottom: 1px solid var(--bluui-border); text-align: start; }
+.blu-sparkline__data summary:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+
+
+/* A small point and its soft halo travel along the line, easing into the end. */
+.blu-sparkline__traveler { pointer-events: none; fill: var(--blu-sparkline-color); }
+.blu-sparkline__halo { opacity: .18; filter: blur(1.5px); }
+.blu-sparkline__ring { opacity: .12; }
+.blu-sparkline__cursor { stroke: none; }
+.blu-sparkline__pause { margin-top: 8px; padding: 5px 8px; min-height: 28px; border: 1px solid var(--bluui-border); border-radius: 5px; background: var(--bluui-surface); color: var(--bluui-text-muted); font: inherit; font-size: 11px; cursor: pointer; }
+.blu-sparkline__pause:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__traveler { display: none; }
+}

package/src/sparkline.ts

@@ -0,0 +1,68 @@
+import { installSparkline } from './sparkline-runtime/runtime.js'
+import type { ComponentColor } from './types.ts'
+import { validateSparkline } from './sparkline-validation.ts'
+
+/** One ordered numeric observation. */
+export interface BluSparklinePoint { Label?: string; Value: number }
+export interface SparklineOptions {
+  Points: BluSparklinePoint[]
+  /** Height in pixels, from 24 to 240. Defaults to 64. */
+  Height?: number
+  Color?: ComponentColor
+  /** A smooth curve that stays within the data range, or straight segments. Defaults to Smooth. */
+  LineStyle?: 'Straight' | 'Smooth'
+  /** @deprecated Use Animation. False disables motion; true uses Once. */
+  AnimateGlow?: boolean
+  /** A glow and point follow the line. Defaults to Once; reduced motion disables it. */
+  Animation?: 'Off' | 'Once' | 'Continuous'
+  /** Seconds per pass, from 1 to 60. Defaults to 5. */
+  AnimationDuration?: number
+  ShowArea?: boolean
+  /** Area opacity from 0 to 100 percent. Defaults to 18. */
+  AreaOpacity?: number
+  /** Fade the area to transparent at the bottom. Defaults to true. */
+  AreaFade?: boolean
+  /** Final point for a static trend. Hidden during animation; a single value always remains visible. */
+  ShowEndMarker?: boolean
+  ShowDataTable?: boolean
+  AccessibleLabel?: string
+  SummaryText?: string
+  EmptyText?: string
+  ExtendedClass?: string
+  /** Plain-text translations for the summary, animation controls and data disclosure. */
+  Messages?: Record<string,string>
+}
+export interface SparklineEvents { Error?(message: string): unknown }
+export interface SparklineInstance {
+  element: HTMLElement
+  update(options: Partial<SparklineOptions>): void
+  destroy(): void
+}
+
+/** Compact SVG trend. Importing this entry does not load ECharts. */
+export function createSparkline(host: HTMLElement, options: SparklineOptions, events: SparklineEvents = {}): SparklineInstance {
+  const runtime = installSparkline()
+  const element = document.createElement('div')
+  element.id = 'blu-charts-sparkline-' + crypto.randomUUID()
+  host.append(element)
+  let current = { ...options }
+  let disposed = false
+  const update = (patch: Partial<SparklineOptions>) => {
+    if (disposed) throw new Error('Component is destroyed.')
+    const next = { ...current, ...structuredClone(patch) }
+    try { validateSparkline(next) } catch(error) { try { events.Error?.((error as Error).message) } catch {} throw error }
+    const { Points, ExtendedClass, ...rest } = next
+    const error = runtime.sync(element.id, { ...rest, PointsJson: JSON.stringify(Points || []) }, events, element.id)
+    if (error) throw new Error(error)
+    current = next
+    element.className = ExtendedClass || ''
+  }
+  const destroy = () => {
+    if (disposed) return
+    disposed = true
+    runtime.destroy(element.id)
+    element.remove()
+  }
+  try { update({}) } catch (error) { destroy(); throw error }
+  return { element, update, destroy }
+}

package/src/state-announcement.ts

@@ -0,0 +1,17 @@
+/** Give a control's focus/value announcement time to settle before a chart state
+ * change. Keep the live region outside aria-busy so loading is not deferred. */
+export function stateAnnouncement(element: HTMLElement) {
+  let previous = '', timer = 0;
+  return {
+    update(message: string) {
+      if (message === previous) return;
+      const initial = !previous;
+      previous = message;
+      window.clearTimeout(timer);
+      if (initial) { element.textContent = message; return; }
+      element.textContent = '';
+      timer = window.setTimeout(() => { if (element.isConnected) element.textContent = message; }, 150);
+    },
+    destroy() { window.clearTimeout(timer); },
+  };
+}