minerva-design 1.2.0 → 1.3.0

package/dist/charts/engine/shapes/types.d.ts

@@ -0,0 +1,292 @@
+import { ChartPadding } from '../types.js';
+/** Kind of shape chart */
+export type ShapeChartType = "pie" | "radar" | "gauge" | "funnel" | "treemap";
+/** A named value (pie slice, funnel stage) */
+export interface ShapeDatum {
+    /** Name shown in the legend, the labels and the tooltip */
+    name: string;
+    /** Value (negative values count as 0) */
+    value: number;
+    /** Color (any CSS color, `var(--x)` included); the palette when omitted */
+    color?: string;
+}
+/** Legend of a shape chart */
+export interface ShapeLegendOptions {
+    /**
+     * Legend position
+     * @default "bottom"
+     */
+    position?: "top" | "bottom";
+    /**
+     * Clicking an item hides / shows its slice, stage or series
+     * @default true
+     */
+    toggle?: boolean;
+}
+/** What the pointer is over */
+export interface ShapeHoverEvent {
+    /** Index of the slice / stage / series / leaf (treemap: in the flattened leaves) */
+    index: number;
+    /** Radar: index of the indicator closest to the pointer */
+    indicator?: number;
+    name: string;
+    value: number;
+    /** Share of the total, 0-1 (pie: of the visible total, funnel: of the first stage, treemap: of the root, gauge: of the range) */
+    percent: number;
+    /** Resolved CSS color of the mark */
+    color: string;
+    /** Treemap: names from the root to the leaf */
+    path?: string[];
+}
+/** Tooltip of a shape chart */
+export interface ShapeTooltipOptions {
+    /** Renders the tooltip content (a string is set as text) */
+    render?: (event: ShapeHoverEvent) => string | Node | null;
+}
+/** Options shared by every shape chart */
+export interface ShapeChartCommonOptions {
+    /** Colors of the marks without `color` (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Legend; shown by default for pie, funnel and multi-series radar charts */
+    legend?: boolean | ShapeLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | ShapeTooltipOptions;
+    /** Formats the values (labels, tooltip); compact numbers (1.2k, 3.4M) by default */
+    format?: (value: number) => string;
+    /**
+     * Formats the shares (labels, conversion rates, tooltip); `share` is 0-1
+     * @default one decimal, e.g. "40.0%"
+     */
+    percentFormat?: (share: number) => string;
+    /**
+     * Indexes of the hidden slices / stages / radar series / top-level treemap
+     * nodes. When set, the chart is controlled: this list wins over the legend
+     * state, and legend clicks (or `toggle()`) only emit the `toggle` event,
+     * whose `hiddenIndexes` should be passed back here.
+     */
+    hidden?: readonly number[];
+    /**
+     * Entry / update animation (skipped when the user prefers reduced motion)
+     * @default true
+     */
+    animation?: boolean;
+    /** Space around the drawing, in CSS pixels */
+    padding?: ChartPadding;
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+}
+/** Pie / donut chart */
+export interface PieChartOptions extends ShapeChartCommonOptions {
+    type: "pie";
+    data: readonly ShapeDatum[];
+    /**
+     * Inner radius as a fraction of the outer radius: 0 = pie, 0.6 = donut
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * Angle of the first slice, degrees clockwise from 12 o'clock
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Gap between the slices, in pixels
+     * @default 1 (pie), 2 (donut)
+     */
+    padAngle?: number;
+    /**
+     * Corner radius of the slices, in pixels
+     * @default 0 (pie), 4 (donut)
+     */
+    cornerRadius?: number;
+    /**
+     * Nightingale rose: the radius (instead of the angle) shows the value
+     * @default false
+     */
+    rose?: boolean;
+    /**
+     * Slice labels: `outside` with leader lines, `inside` the slices, or none
+     * @default "outside" (up to 12 slices), "none" otherwise
+     */
+    labels?: "outside" | "inside" | "none";
+    /** What a label shows: name, value, percent (combinable) */
+    labelContent?: readonly ("name" | "value" | "percent")[];
+    /** Big text in the hole of a donut (e.g. the total) */
+    centerValue?: string;
+    /** Small text under `centerValue` */
+    centerLabel?: string;
+}
+/** An axis of a radar chart */
+export interface RadarIndicator {
+    name: string;
+    /** Value at the rim; the largest value of the series when omitted */
+    max?: number;
+    /**
+     * Value at the center
+     * @default 0
+     */
+    min?: number;
+}
+/** A polygon of a radar chart */
+export interface RadarSeries {
+    name?: string;
+    /** One value per indicator */
+    values: readonly number[];
+    color?: string;
+    /**
+     * Fill opacity, 0-1
+     * @default 0.18
+     */
+    opacity?: number;
+}
+/** Radar (spider) chart */
+export interface RadarChartOptions extends ShapeChartCommonOptions {
+    type: "radar";
+    indicators: readonly RadarIndicator[];
+    series: readonly RadarSeries[];
+    /**
+     * Grid shape
+     * @default "polygon"
+     */
+    shape?: "polygon" | "circle";
+    /**
+     * Number of grid rings
+     * @default 4
+     */
+    levels?: number;
+    /**
+     * Dots on the vertices
+     * @default true
+     */
+    dots?: boolean;
+}
+/** A colored range of a gauge */
+export interface GaugeBand {
+    /** Upper bound of the band (the previous band's bound, or `min`, is the lower one) */
+    to: number;
+    color: string;
+}
+/** Gauge (speedometer) chart */
+export interface GaugeChartOptions extends ShapeChartCommonOptions {
+    type: "gauge";
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** Caption under the value */
+    label?: string;
+    /**
+     * Total angle of the arc, degrees
+     * @default 240
+     */
+    sweep?: number;
+    /**
+     * Thickness of the arc as a fraction of the radius
+     * @default 0.16
+     */
+    thickness?: number;
+    /** Colored ranges of the track; the value arc takes the color of its band */
+    bands?: readonly GaugeBand[];
+    /** Color of the value arc (when there are no bands); the first palette color by default */
+    color?: string;
+    /**
+     * Draws a needle in addition to the value arc
+     * @default false
+     */
+    needle?: boolean;
+    /**
+     * Tick labels at the ends (and at the band bounds)
+     * @default true
+     */
+    ticks?: boolean;
+}
+/** Funnel chart */
+export interface FunnelChartOptions extends ShapeChartCommonOptions {
+    type: "funnel";
+    data: readonly ShapeDatum[];
+    /**
+     * Order of the stages
+     * @default "none" (data order)
+     */
+    sort?: "descending" | "ascending" | "none";
+    /**
+     * Vertical gap between the stages, in pixels
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Shows the conversion rate from the previous stage
+     * @default true
+     */
+    conversion?: boolean;
+    /**
+     * Shape of the stages: trapezoids that narrow to the next stage, or centered bars
+     * @default "trapezoid"
+     */
+    shape?: "trapezoid" | "bar";
+}
+/** A node of a treemap: leaves carry a value, parents sum their children */
+export interface TreemapNode {
+    name: string;
+    value?: number;
+    color?: string;
+    children?: readonly TreemapNode[];
+}
+/** Treemap chart */
+export interface TreemapChartOptions extends ShapeChartCommonOptions {
+    type: "treemap";
+    data: readonly TreemapNode[];
+    /**
+     * Gap between the cells, in pixels
+     * @default 2
+     */
+    gap?: number;
+    /**
+     * Draws the names of the parents above their children
+     * @default true
+     */
+    headers?: boolean;
+}
+/** Options of a shape chart, by `type` */
+export type ShapeChartOptions = PieChartOptions | RadarChartOptions | GaugeChartOptions | FunnelChartOptions | TreemapChartOptions;
+/** A legend item was clicked (or `toggle()` was called) */
+export interface ShapeToggleEvent {
+    /** Index of the slice / stage / radar series / top-level treemap node */
+    index: number;
+    /** Whether that entry is (or, in a controlled chart, would be) hidden */
+    hidden: boolean;
+    /** Every hidden index after the toggle, ascending */
+    hiddenIndexes: number[];
+}
+/** Events of a shape chart */
+export interface ShapeChartEventMap {
+    hover: ShapeHoverEvent | null;
+    click: ShapeHoverEvent;
+    /**
+     * Legend click or `toggle()` call. Uncontrolled charts emit it after
+     * hiding / showing the entry; with the `hidden` option nothing changes
+     * until the new `hiddenIndexes` are passed back.
+     */
+    toggle: ShapeToggleEvent;
+}
+/** Shape chart created by `createShapeChart` */
+export interface ShapeChartInstance {
+    /** Replaces the options (animates from the previous values) */
+    setOptions(options: ShapeChartOptions): void;
+    /** Measures the container again (a ResizeObserver does it automatically) */
+    resize(): void;
+    /** Reads the CSS variables again (theme changes on `<html>` / `<body>` are detected automatically) */
+    refreshTheme(): void;
+    /**
+     * Hides / shows a slice, stage, radar series or top-level treemap node by
+     * index and emits `toggle` (with the `hidden` option: only emits `toggle`)
+     */
+    toggle(index: number): void;
+    /** Indexes of the hidden entries, ascending */
+    getHidden(): number[];
+    /** Subscribes to an event; returns the unsubscribe function */
+    on<K extends keyof ShapeChartEventMap>(type: K, listener: (event: ShapeChartEventMap[K]) => void): () => void;
+    /** Removes the DOM */
+    destroy(): void;
+}

package/dist/charts/engine/signature.cjs

@@ -0,0 +1,2 @@
+var e=new WeakMap,t=0,n=n=>{let r=e.get(n);return r===void 0&&e.set(n,r=++t),r},r=(e,t,r)=>{let{base:i}=e,a=`${t}|${e.baseline}|${e.percent}|${i.x[0]},${i.x[1]}|${i.y[0]},${i.y[1]}`;for(let t of e.series)a+=`\n${t.key}|${t.type}|${n(t.cols)}|${t.colorCss}|${t.hidden}|${t.lineWidth}|${t.pointSize}|${t.opacity}|${t.barOffset}|${t.barHalfWidth}|${r(t.index)??``}|${t.curve}|${t.radius}`,t.type===`candlestick`?a+=`|${t.upColor}/${t.downColor}`:t.type===`heatmap`&&(a+=`|${t.colorScale.join(`;`)}/${t.valueRange[0]},${t.valueRange[1]}/${t.cellHalf.x},${t.cellHalf.y}`);return a};exports.itemsSignature=r;
+//# sourceMappingURL=signature.cjs.map

package/dist/charts/engine/signature.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.cjs","names":["ids","counter","idOf","id","value","itemsSignature","model","signature","themeKey","base","s","stackOf"],"sources":["../../../../charts/src/engine/signature.ts"],"sourcesContent":["// Signature of what the render items (GPU buffers) of a model depend on:\n// when it is unchanged, the items of the previous model can be kept.\n\nimport type { ChartModel } from \"./model\";\n\nconst ids = new WeakMap<object, number>();\nlet counter = 0;\n\n/** Stable id of an object (data columns compare by identity) */\nconst idOf = (value: object): number => {\n  let id = ids.get(value);\n  if (id === undefined) ids.set(value, (id = ++counter));\n  return id;\n};\n\n/**\n * Every input of `buildItems` (and of the origin of its positions): data\n * identity, types, colors, visibility, widths, bar layout, stacks, curves,\n * radii, candlestick and heatmap colors. `themeKey` covers the colors resolved\n * from the theme that the model doesn't spell out (per-point colors);\n * `stackOf` gives the `stack` option of a series.\n */\nexport const itemsSignature = (\n  model: ChartModel,\n  themeKey: number | string,\n  stackOf: (index: number) => string | undefined,\n): string => {\n  const { base } = model;\n  let signature = `${themeKey}|${model.baseline}|${model.percent}|${base.x[0]},${base.x[1]}|${base.y[0]},${base.y[1]}`;\n  for (const s of model.series) {\n    signature += `\\n${s.key}|${s.type}|${idOf(s.cols)}|${s.colorCss}|${s.hidden}|${s.lineWidth}|${s.pointSize}|${s.opacity}|${s.barOffset}|${s.barHalfWidth}|${stackOf(s.index) ?? \"\"}|${s.curve}|${s.radius}`;\n    if (s.type === \"candlestick\") signature += `|${s.upColor}/${s.downColor}`;\n    else if (s.type === \"heatmap\")\n      signature += `|${s.colorScale.join(\";\")}/${s.valueRange[0]},${s.valueRange[1]}/${s.cellHalf.x},${s.cellHalf.y}`;\n  }\n  return signature;\n};\n"],"mappings":"AAKA,IAAMA,EAAM,IAAI,QACZC,EAAU,EAGRC,EAAQ,GAA0B,CACtC,IAAIC,EAAKH,EAAI,IAAII,CAAK,EAEtB,OADID,IAAO,IAAA,IAAWH,EAAI,IAAII,EAAQ,EAAK,EAAEH,CAAQ,EAC9CE,CACT,EASaE,GACX,EACA,EACA,IACW,CACX,GAAM,CAAE,QAASC,EACbC,EAAY,GAAGC,EAAS,GAAGF,EAAM,SAAS,GAAGA,EAAM,QAAQ,GAAGG,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE,KAChH,IAAK,IAAMC,KAAKJ,EAAM,OACpB,GAAa,KAAKI,EAAE,IAAI,GAAGA,EAAE,KAAK,GAAGR,EAAKQ,EAAE,IAAI,EAAE,GAAGA,EAAE,SAAS,GAAGA,EAAE,OAAO,GAAGA,EAAE,UAAU,GAAGA,EAAE,UAAU,GAAGA,EAAE,QAAQ,GAAGA,EAAE,UAAU,GAAGA,EAAE,aAAa,GAAGC,EAAQD,EAAE,KAAK,GAAK,GAAG,GAAGA,EAAE,MAAM,GAAGA,EAAE,SAC9LA,EAAE,OAAS,cAAe,GAAa,IAAIA,EAAE,QAAQ,GAAGA,EAAE,YACrDA,EAAE,OAAS,YAClB,GAAa,IAAIA,EAAE,WAAW,KAAK,GAAG,EAAE,GAAGA,EAAE,WAAW,GAAG,GAAGA,EAAE,WAAW,GAAG,GAAGA,EAAE,SAAS,EAAE,GAAGA,EAAE,SAAS,KAEhH,OAAOH,CACT"}

package/dist/charts/engine/signature.d.cts

@@ -0,0 +1,9 @@
+import { ChartModel } from './model.cjs';
+/**
+ * Every input of `buildItems` (and of the origin of its positions): data
+ * identity, types, colors, visibility, widths, bar layout, stacks, curves,
+ * radii, candlestick and heatmap colors. `themeKey` covers the colors resolved
+ * from the theme that the model doesn't spell out (per-point colors);
+ * `stackOf` gives the `stack` option of a series.
+ */
+export declare const itemsSignature: (model: ChartModel, themeKey: number | string, stackOf: (index: number) => string | undefined) => string;

package/dist/charts/engine/signature.d.ts

@@ -0,0 +1,9 @@
+import { ChartModel } from './model.js';
+/**
+ * Every input of `buildItems` (and of the origin of its positions): data
+ * identity, types, colors, visibility, widths, bar layout, stacks, curves,
+ * radii, candlestick and heatmap colors. `themeKey` covers the colors resolved
+ * from the theme that the model doesn't spell out (per-point colors);
+ * `stackOf` gives the `stack` option of a series.
+ */
+export declare const itemsSignature: (model: ChartModel, themeKey: number | string, stackOf: (index: number) => string | undefined) => string;

package/dist/charts/engine/signature.js

@@ -0,0 +1,13 @@
+//#region src/engine/signature.ts
+var e = /* @__PURE__ */ new WeakMap(), t = 0, n = (n) => {
+	let r = e.get(n);
+	return r === void 0 && e.set(n, r = ++t), r;
+}, r = (e, t, r) => {
+	let { base: i } = e, a = `${t}|${e.baseline}|${e.percent}|${i.x[0]},${i.x[1]}|${i.y[0]},${i.y[1]}`;
+	for (let t of e.series) a += `\n${t.key}|${t.type}|${n(t.cols)}|${t.colorCss}|${t.hidden}|${t.lineWidth}|${t.pointSize}|${t.opacity}|${t.barOffset}|${t.barHalfWidth}|${r(t.index) ?? ""}|${t.curve}|${t.radius}`, t.type === "candlestick" ? a += `|${t.upColor}/${t.downColor}` : t.type === "heatmap" && (a += `|${t.colorScale.join(";")}/${t.valueRange[0]},${t.valueRange[1]}/${t.cellHalf.x},${t.cellHalf.y}`);
+	return a;
+};
+//#endregion
+export { r as itemsSignature };
+
+//# sourceMappingURL=signature.js.map

package/dist/charts/engine/signature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.js","names":["ids","counter","idOf","id","value","itemsSignature","model","signature","themeKey","base","s","stackOf"],"sources":["../../../../charts/src/engine/signature.ts"],"sourcesContent":["// Signature of what the render items (GPU buffers) of a model depend on:\n// when it is unchanged, the items of the previous model can be kept.\n\nimport type { ChartModel } from \"./model\";\n\nconst ids = new WeakMap<object, number>();\nlet counter = 0;\n\n/** Stable id of an object (data columns compare by identity) */\nconst idOf = (value: object): number => {\n  let id = ids.get(value);\n  if (id === undefined) ids.set(value, (id = ++counter));\n  return id;\n};\n\n/**\n * Every input of `buildItems` (and of the origin of its positions): data\n * identity, types, colors, visibility, widths, bar layout, stacks, curves,\n * radii, candlestick and heatmap colors. `themeKey` covers the colors resolved\n * from the theme that the model doesn't spell out (per-point colors);\n * `stackOf` gives the `stack` option of a series.\n */\nexport const itemsSignature = (\n  model: ChartModel,\n  themeKey: number | string,\n  stackOf: (index: number) => string | undefined,\n): string => {\n  const { base } = model;\n  let signature = `${themeKey}|${model.baseline}|${model.percent}|${base.x[0]},${base.x[1]}|${base.y[0]},${base.y[1]}`;\n  for (const s of model.series) {\n    signature += `\\n${s.key}|${s.type}|${idOf(s.cols)}|${s.colorCss}|${s.hidden}|${s.lineWidth}|${s.pointSize}|${s.opacity}|${s.barOffset}|${s.barHalfWidth}|${stackOf(s.index) ?? \"\"}|${s.curve}|${s.radius}`;\n    if (s.type === \"candlestick\") signature += `|${s.upColor}/${s.downColor}`;\n    else if (s.type === \"heatmap\")\n      signature += `|${s.colorScale.join(\";\")}/${s.valueRange[0]},${s.valueRange[1]}/${s.cellHalf.x},${s.cellHalf.y}`;\n  }\n  return signature;\n};\n"],"mappings":";AAKA,IAAMA,oBAAM,IAAI,QAAwB,GACpCC,IAAU,GAGRC,KAAQ,MAA0B;CACtC,IAAIC,IAAKH,EAAI,IAAII,CAAK;CAEtB,OADID,MAAO,KAAA,KAAWH,EAAI,IAAII,GAAQ,IAAK,EAAEH,CAAQ,GAC9CE;AACT,GASaE,KACX,GACA,GACA,MACW;CACX,IAAM,EAAE,YAASC,GACbC,IAAY,GAAGC,EAAS,GAAGF,EAAM,SAAS,GAAGA,EAAM,QAAQ,GAAGG,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE,GAAG,GAAGA,EAAK,EAAE;CAChH,KAAK,IAAMC,KAAKJ,EAAM,QAEpB,AADA,KAAa,KAAKI,EAAE,IAAI,GAAGA,EAAE,KAAK,GAAGR,EAAKQ,EAAE,IAAI,EAAE,GAAGA,EAAE,SAAS,GAAGA,EAAE,OAAO,GAAGA,EAAE,UAAU,GAAGA,EAAE,UAAU,GAAGA,EAAE,QAAQ,GAAGA,EAAE,UAAU,GAAGA,EAAE,aAAa,GAAGC,EAAQD,EAAE,KAAK,KAAK,GAAG,GAAGA,EAAE,MAAM,GAAGA,EAAE,UAC9LA,EAAE,SAAS,gBAAe,KAAa,IAAIA,EAAE,QAAQ,GAAGA,EAAE,cACrDA,EAAE,SAAS,cAClB,KAAa,IAAIA,EAAE,WAAW,KAAK,GAAG,EAAE,GAAGA,EAAE,WAAW,GAAG,GAAGA,EAAE,WAAW,GAAG,GAAGA,EAAE,SAAS,EAAE,GAAGA,EAAE,SAAS;CAEhH,OAAOH;AACT"}

package/dist/charts/engine/theme.cjs

@@ -1,2 +1,2 @@
-const e=require("./color.cjs");var t=[`#4f46e5`,`#10b981`,`#f59e0b`,`#ef4444`,`#0ea5e9`,`#8b5cf6`,`#14b8a6`,`#f97316`],n=(e,t)=>e?.getPropertyValue(t).trim()??``,r=(t,r)=>{let i=t&&typeof getComputedStyle==`function`?getComputedStyle(t):null;return o(e=>n(i,e),e.domColorResolver(t),r,i?.fontFamily??``)},i=(e={},t)=>{let n=e.variables??{};return{...o(e=>n[e]?.trim()??``,a(n),t?.length?t:e.palette,``),...e.fontFamily?{fontFamily:e.fontFamily}:{},...e.fontSize?{fontSize:e.fontSize}:{}}},a=t=>(n,r)=>e.resolveStaticColor(n,t,r),o=(n,r,i,a)=>{let o=[.4,.4,.4,1],s=e=>r(e,o),c=(e,t)=>{for(let t of e)if(n(t))return s(`var(${t})`);return s(t)},l=c([`--surface-color`,`--background-color`],`#ffffff`),u=c([`--text-color`],`#1f2937`),d=c([`--text-secondary-color`,`--text-muted-color`],`#6b7280`),f=c([`--border-color`],`#e5e7eb`),p;if(i&&i.length)p=i.map(e=>s(e));else{let e=[];for(let t=1;t<=8;t++){let r=`--chart-series-${t}`;n(r)&&e.push(s(`var(${r})`))}p=e.length?e:[...[`--primary-color`,`--success-color`,`--warning-color`,`--danger-color`,`--info-color`].map((e,r)=>n(e)?s(`var(${e})`):s(t[r])),...t.slice(5).map(e=>s(e))]}let m=n(`--font-family-sans`)||a||`system-ui, -apple-system, 'Segoe UI', sans-serif`;return{palette:p,text:u,textMuted:d,grid:e.mix(l,f,.75),axis:f,background:l,surface:l,primary:p[0],fontFamily:m,fontSize:11,resolve:r}},s=e=>{if(typeof document>`u`)return()=>{};let t=[];if(typeof MutationObserver==`function`){let n=new MutationObserver(e);for(let e of[document.documentElement,document.body])e&&n.observe(e,{attributes:!0,attributeFilter:[`class`,`style`,`data-theme`,`data-mode`]});t.push(()=>n.disconnect())}if(typeof matchMedia==`function`){let n=matchMedia(`(prefers-color-scheme: dark)`);n.addEventListener?.(`change`,e),t.push(()=>n.removeEventListener?.(`change`,e))}return()=>t.forEach(e=>e())};exports.createTheme=i,exports.readTheme=r,exports.staticColorResolver=a,exports.watchTheme=s;
+const e=require("./color.cjs");var t=[`#4f46e5`,`#10b981`,`#f59e0b`,`#ef4444`,`#0ea5e9`,`#8b5cf6`,`#14b8a6`,`#f97316`],n=(e,t)=>e?.getPropertyValue(t).trim()??``,r=(t,r)=>{let i=t&&typeof getComputedStyle==`function`?getComputedStyle(t):null;return c(e=>n(i,e),e.memoizeColorResolver(e.domColorResolver(t)),r,i?.fontFamily??``)},i=[`text`,`textMuted`,`grid`,`axis`,`background`,`surface`,`primary`],a=(t,n)=>{if(t===n)return!1;if(t.palette.length!==n.palette.length||t.palette.some((t,r)=>!e.sameColor(t,n.palette[r]))||i.some(r=>!e.sameColor(t[r],n[r])))return!0;let r=t.resolve?.cache;if(!r||!n.resolve)return!0;let a=[NaN,NaN,NaN,NaN];for(let[t,i]of r){let r=n.resolve(t,a);if(!e.sameColor(i,r===a?null:r))return!0}return!1},o=(e={},t)=>{let n=e.variables??{};return{...c(e=>n[e]?.trim()??``,s(n),t?.length?t:e.palette,``),...e.fontFamily?{fontFamily:e.fontFamily}:{},...e.fontSize?{fontSize:e.fontSize}:{}}},s=t=>(n,r)=>e.resolveStaticColor(n,t,r),c=(n,r,i,a)=>{let o=[.4,.4,.4,1],s=e=>r(e,o),c=(e,t)=>{for(let t of e)if(n(t))return s(`var(${t})`);return s(t)},l=c([`--surface-color`,`--background-color`],`#ffffff`),u=c([`--text-color`],`#1f2937`),d=c([`--text-secondary-color`,`--text-muted-color`],`#6b7280`),f=c([`--border-color`],`#e5e7eb`),p;if(i&&i.length)p=i.map(e=>s(e));else{let e=[];for(let t=1;t<=8;t++){let r=`--chart-series-${t}`;n(r)&&e.push(s(`var(${r})`))}p=e.length?e:[...[`--primary-color`,`--success-color`,`--warning-color`,`--danger-color`,`--info-color`].map((e,r)=>n(e)?s(`var(${e})`):s(t[r])),...t.slice(5).map(e=>s(e))]}let m=n(`--font-family-sans`)||a||`system-ui, -apple-system, 'Segoe UI', sans-serif`;return{palette:p,text:u,textMuted:d,grid:e.mix(l,f,.75),axis:f,background:l,surface:l,primary:p[0],fontFamily:m,fontSize:11,resolve:r}},l=e=>{if(typeof document>`u`)return()=>{};let t=[];if(typeof MutationObserver==`function`){let n=new MutationObserver(e);for(let e of[document.documentElement,document.body])e&&n.observe(e,{attributes:!0,attributeFilter:[`class`,`style`,`data-theme`,`data-mode`]});t.push(()=>n.disconnect())}if(typeof matchMedia==`function`){let n=matchMedia(`(prefers-color-scheme: dark)`);n.addEventListener?.(`change`,e),t.push(()=>n.removeEventListener?.(`change`,e))}return()=>t.forEach(e=>e())};exports.createTheme=o,exports.readTheme=r,exports.staticColorResolver=s,exports.themeColorsChanged=a,exports.watchTheme=l;
 //# sourceMappingURL=theme.cjs.map

package/dist/charts/engine/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","names":["domColorResolver","resolveStaticColor","mix","require_color","DEFAULT_PALETTE","readVar","style","name","readTheme","element","buildTheme","palette","createTheme","variables","input","staticColorResolver","value","fallback","fallbackGray","resolveColor","resolve","color","names","readVariable","background","text","textMuted","border","colors","c","custom","i","fontFamily","inheritedFont","watchTheme","cleanups","observer","onChange","node","query","fn"],"sources":["../../../../charts/src/engine/theme.ts"],"sourcesContent":["// Chart colors and fonts read from the Minerva CSS variables.\n\nimport {\n  domColorResolver,\n  mix,\n  resolveStaticColor,\n  type ColorResolver,\n  type Rgba,\n} from \"./color\";\n\nexport interface ChartTheme {\n  palette: Rgba[];\n  text: Rgba;\n  textMuted: Rgba;\n  grid: Rgba;\n  axis: Rgba;\n  background: Rgba;\n  surface: Rgba;\n  primary: Rgba;\n  fontFamily: string;\n  /** Tick label font size in CSS pixels */\n  fontSize: number;\n  /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */\n  resolve?: ColorResolver;\n}\n\n/** Used when no CSS variable is defined (e.g. without the Minerva stylesheet) */\nconst DEFAULT_PALETTE = [\n  \"#4f46e5\",\n  \"#10b981\",\n  \"#f59e0b\",\n  \"#ef4444\",\n  \"#0ea5e9\",\n  \"#8b5cf6\",\n  \"#14b8a6\",\n  \"#f97316\",\n];\n\nconst readVar = (style: CSSStyleDeclaration | null, name: string) =>\n  style?.getPropertyValue(name).trim() ?? \"\";\n\n/** Reads the theme from the computed style of `element` */\nexport const readTheme = (\n  element: Element | null,\n  palette?: readonly string[],\n): ChartTheme => {\n  const style =\n    element && typeof getComputedStyle === \"function\"\n      ? getComputedStyle(element)\n      : null;\n  return buildTheme(\n    (name) => readVar(style, name),\n    domColorResolver(element),\n    palette,\n    style?.fontFamily ?? \"\",\n  );\n};\n\n/** Theme of the charts drawn without a DOM (mini-programs, React Native) */\nexport interface ChartThemeInput {\n  /**\n   * Values of the Minerva CSS variables (`--primary-color`, `--text-color`,\n   * `--chart-series-1`, ...) used for the theme colors and to resolve\n   * `var(--name)` colors of the options\n   */\n  variables?: Readonly<Record<string, string>>;\n  /** Series colors (hex / rgb) */\n  palette?: readonly string[];\n  /** Font family of the labels */\n  fontFamily?: string;\n  /**\n   * Font size of the tick labels, in pixels\n   * @default 11\n   */\n  fontSize?: number;\n}\n\n/** Builds a theme from plain values (no DOM) */\nexport const createTheme = (\n  input: ChartThemeInput = {},\n  palette?: readonly string[],\n): ChartTheme => {\n  const variables = input.variables ?? {};\n  const theme = buildTheme(\n    (name) => variables[name]?.trim() ?? \"\",\n    staticColorResolver(variables),\n    palette?.length ? palette : input.palette,\n    \"\",\n  );\n  return {\n    ...theme,\n    ...(input.fontFamily ? { fontFamily: input.fontFamily } : {}),\n    ...(input.fontSize ? { fontSize: input.fontSize } : {}),\n  };\n};\n\n/** Resolver of `var(--name, fallback)` colors against plain variables */\nexport const staticColorResolver =\n  (variables: Readonly<Record<string, string>>): ColorResolver =>\n  (value, fallback) =>\n    resolveStaticColor(value, variables, fallback);\n\nconst buildTheme = (\n  readVariable: (name: string) => string,\n  resolve: ColorResolver,\n  palette: readonly string[] | undefined,\n  inheritedFont: string,\n): ChartTheme => {\n  const fallbackGray: Rgba = [0.4, 0.4, 0.4, 1];\n  const resolveColor = (value: string) => resolve(value, fallbackGray);\n  const color = (names: string[], fallback: string): Rgba => {\n    for (const name of names) {\n      if (readVariable(name)) return resolveColor(`var(${name})`);\n    }\n    return resolveColor(fallback);\n  };\n\n  const background = color(\n    [\"--surface-color\", \"--background-color\"],\n    \"#ffffff\",\n  );\n  const text = color([\"--text-color\"], \"#1f2937\");\n  const textMuted = color(\n    [\"--text-secondary-color\", \"--text-muted-color\"],\n    \"#6b7280\",\n  );\n  const border = color([\"--border-color\"], \"#e5e7eb\");\n\n  let colors: Rgba[];\n  if (palette && palette.length) {\n    colors = palette.map((c) => resolveColor(c));\n  } else {\n    const custom: Rgba[] = [];\n    for (let i = 1; i <= 8; i++) {\n      const name = `--chart-series-${i}`;\n      if (readVariable(name)) custom.push(resolveColor(`var(${name})`));\n    }\n    if (custom.length) {\n      colors = custom;\n    } else {\n      const themed = [\n        \"--primary-color\",\n        \"--success-color\",\n        \"--warning-color\",\n        \"--danger-color\",\n        \"--info-color\",\n      ].map((name, i) =>\n        readVariable(name)\n          ? resolveColor(`var(${name})`)\n          : resolveColor(DEFAULT_PALETTE[i]),\n      );\n      colors = [\n        ...themed,\n        ...DEFAULT_PALETTE.slice(5).map((c) => resolveColor(c)),\n      ];\n    }\n  }\n\n  const fontFamily =\n    readVariable(\"--font-family-sans\") ||\n    inheritedFont ||\n    \"system-ui, -apple-system, 'Segoe UI', sans-serif\";\n\n  return {\n    palette: colors,\n    text,\n    textMuted,\n    grid: mix(background, border, 0.75),\n    axis: border,\n    background,\n    surface: background,\n    primary: colors[0],\n    fontFamily,\n    fontSize: 11,\n    resolve,\n  };\n};\n\n/**\n * Calls `onChange` when the theme may have changed: attributes of `<html>` /\n * `<body>` (class, style, data-theme) and the color scheme.\n */\nexport const watchTheme = (onChange: () => void): (() => void) => {\n  if (typeof document === \"undefined\") return () => {};\n  const cleanups: (() => void)[] = [];\n  if (typeof MutationObserver === \"function\") {\n    const observer = new MutationObserver(onChange);\n    for (const node of [document.documentElement, document.body]) {\n      if (node) {\n        observer.observe(node, {\n          attributes: true,\n          attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-mode\"],\n        });\n      }\n    }\n    cleanups.push(() => observer.disconnect());\n  }\n  if (typeof matchMedia === \"function\") {\n    const query = matchMedia(\"(prefers-color-scheme: dark)\");\n    query.addEventListener?.(\"change\", onChange);\n    cleanups.push(() => query.removeEventListener?.(\"change\", onChange));\n  }\n  return () => cleanups.forEach((fn) => fn());\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.cjs","names":["memoizeColorResolver","domColorResolver","sameColor","resolveStaticColor","mix","require_color","DEFAULT_PALETTE","readVar","style","name","readTheme","element","buildTheme","palette","THEME_COLORS","themeColorsChanged","previous","next","c","i","key","cache","probe","value","color","resolved","createTheme","variables","input","staticColorResolver","fallback","fallbackGray","resolveColor","resolve","names","readVariable","background","text","textMuted","border","colors","custom","fontFamily","inheritedFont","watchTheme","cleanups","observer","onChange","node","query","fn"],"sources":["../../../../charts/src/engine/theme.ts"],"sourcesContent":["// Chart colors and fonts read from the Minerva CSS variables.\n\nimport {\n  domColorResolver,\n  memoizeColorResolver,\n  mix,\n  resolveStaticColor,\n  sameColor,\n  type ColorResolver,\n  type MemoizedColorResolver,\n  type Rgba,\n} from \"./color\";\n\nexport interface ChartTheme {\n  palette: Rgba[];\n  text: Rgba;\n  textMuted: Rgba;\n  grid: Rgba;\n  axis: Rgba;\n  background: Rgba;\n  surface: Rgba;\n  primary: Rgba;\n  fontFamily: string;\n  /** Tick label font size in CSS pixels */\n  fontSize: number;\n  /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */\n  resolve?: ColorResolver;\n}\n\n/** Used when no CSS variable is defined (e.g. without the Minerva stylesheet) */\nconst DEFAULT_PALETTE = [\n  \"#4f46e5\",\n  \"#10b981\",\n  \"#f59e0b\",\n  \"#ef4444\",\n  \"#0ea5e9\",\n  \"#8b5cf6\",\n  \"#14b8a6\",\n  \"#f97316\",\n];\n\nconst readVar = (style: CSSStyleDeclaration | null, name: string) =>\n  style?.getPropertyValue(name).trim() ?? \"\";\n\n/**\n * Reads the theme from the computed style of `element`. Its resolver caches\n * the colors (DOM probes are costly): read the theme again to see new values.\n */\nexport const readTheme = (\n  element: Element | null,\n  palette?: readonly string[],\n): ChartTheme => {\n  const style =\n    element && typeof getComputedStyle === \"function\"\n      ? getComputedStyle(element)\n      : null;\n  return buildTheme(\n    (name) => readVar(style, name),\n    memoizeColorResolver(domColorResolver(element)),\n    palette,\n    style?.fontFamily ?? \"\",\n  );\n};\n\nconst THEME_COLORS = [\n  \"text\",\n  \"textMuted\",\n  \"grid\",\n  \"axis\",\n  \"background\",\n  \"surface\",\n  \"primary\",\n] as const;\n\n/**\n * Whether `next` (a re-read of `previous`) resolves any color differently:\n * the theme colors, the palette and every color `previous` has resolved so\n * far (series, points, annotations...). `true` when it cannot tell.\n */\nexport const themeColorsChanged = (\n  previous: ChartTheme,\n  next: ChartTheme,\n): boolean => {\n  if (previous === next) return false;\n  if (previous.palette.length !== next.palette.length) return true;\n  if (previous.palette.some((c, i) => !sameColor(c, next.palette[i])))\n    return true;\n  if (THEME_COLORS.some((key) => !sameColor(previous[key], next[key])))\n    return true;\n  const cache = (previous.resolve as Partial<MemoizedColorResolver> | undefined)\n    ?.cache;\n  if (!cache || !next.resolve) return true;\n  const probe: Rgba = [NaN, NaN, NaN, NaN];\n  for (const [value, color] of cache) {\n    const resolved = next.resolve(value, probe);\n    if (!sameColor(color, resolved === probe ? null : resolved)) return true;\n  }\n  return false;\n};\n\n/** Theme of the charts drawn without a DOM (mini-programs, React Native) */\nexport interface ChartThemeInput {\n  /**\n   * Values of the Minerva CSS variables (`--primary-color`, `--text-color`,\n   * `--chart-series-1`, ...) used for the theme colors and to resolve\n   * `var(--name)` colors of the options\n   */\n  variables?: Readonly<Record<string, string>>;\n  /** Series colors (hex / rgb) */\n  palette?: readonly string[];\n  /** Font family of the labels */\n  fontFamily?: string;\n  /**\n   * Font size of the tick labels, in pixels\n   * @default 11\n   */\n  fontSize?: number;\n}\n\n/** Builds a theme from plain values (no DOM) */\nexport const createTheme = (\n  input: ChartThemeInput = {},\n  palette?: readonly string[],\n): ChartTheme => {\n  const variables = input.variables ?? {};\n  const theme = buildTheme(\n    (name) => variables[name]?.trim() ?? \"\",\n    staticColorResolver(variables),\n    palette?.length ? palette : input.palette,\n    \"\",\n  );\n  return {\n    ...theme,\n    ...(input.fontFamily ? { fontFamily: input.fontFamily } : {}),\n    ...(input.fontSize ? { fontSize: input.fontSize } : {}),\n  };\n};\n\n/** Resolver of `var(--name, fallback)` colors against plain variables */\nexport const staticColorResolver =\n  (variables: Readonly<Record<string, string>>): ColorResolver =>\n  (value, fallback) =>\n    resolveStaticColor(value, variables, fallback);\n\nconst buildTheme = (\n  readVariable: (name: string) => string,\n  resolve: ColorResolver,\n  palette: readonly string[] | undefined,\n  inheritedFont: string,\n): ChartTheme => {\n  const fallbackGray: Rgba = [0.4, 0.4, 0.4, 1];\n  const resolveColor = (value: string) => resolve(value, fallbackGray);\n  const color = (names: string[], fallback: string): Rgba => {\n    for (const name of names) {\n      if (readVariable(name)) return resolveColor(`var(${name})`);\n    }\n    return resolveColor(fallback);\n  };\n\n  const background = color(\n    [\"--surface-color\", \"--background-color\"],\n    \"#ffffff\",\n  );\n  const text = color([\"--text-color\"], \"#1f2937\");\n  const textMuted = color(\n    [\"--text-secondary-color\", \"--text-muted-color\"],\n    \"#6b7280\",\n  );\n  const border = color([\"--border-color\"], \"#e5e7eb\");\n\n  let colors: Rgba[];\n  if (palette && palette.length) {\n    colors = palette.map((c) => resolveColor(c));\n  } else {\n    const custom: Rgba[] = [];\n    for (let i = 1; i <= 8; i++) {\n      const name = `--chart-series-${i}`;\n      if (readVariable(name)) custom.push(resolveColor(`var(${name})`));\n    }\n    if (custom.length) {\n      colors = custom;\n    } else {\n      const themed = [\n        \"--primary-color\",\n        \"--success-color\",\n        \"--warning-color\",\n        \"--danger-color\",\n        \"--info-color\",\n      ].map((name, i) =>\n        readVariable(name)\n          ? resolveColor(`var(${name})`)\n          : resolveColor(DEFAULT_PALETTE[i]),\n      );\n      colors = [\n        ...themed,\n        ...DEFAULT_PALETTE.slice(5).map((c) => resolveColor(c)),\n      ];\n    }\n  }\n\n  const fontFamily =\n    readVariable(\"--font-family-sans\") ||\n    inheritedFont ||\n    \"system-ui, -apple-system, 'Segoe UI', sans-serif\";\n\n  return {\n    palette: colors,\n    text,\n    textMuted,\n    grid: mix(background, border, 0.75),\n    axis: border,\n    background,\n    surface: background,\n    primary: colors[0],\n    fontFamily,\n    fontSize: 11,\n    resolve,\n  };\n};\n\n/**\n * Calls `onChange` when the theme may have changed: attributes of `<html>` /\n * `<body>` (class, style, data-theme) and the color scheme.\n */\nexport const watchTheme = (onChange: () => void): (() => void) => {\n  if (typeof document === \"undefined\") return () => {};\n  const cleanups: (() => void)[] = [];\n  if (typeof MutationObserver === \"function\") {\n    const observer = new MutationObserver(onChange);\n    for (const node of [document.documentElement, document.body]) {\n      if (node) {\n        observer.observe(node, {\n          attributes: true,\n          attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-mode\"],\n        });\n      }\n    }\n    cleanups.push(() => observer.disconnect());\n  }\n  if (typeof matchMedia === \"function\") {\n    const query = matchMedia(\"(prefers-color-scheme: dark)\");\n    query.addEventListener?.(\"change\", onChange);\n    cleanups.push(() => query.removeEventListener?.(\"change\", onChange));\n  }\n  return () => cleanups.forEach((fn) => fn());\n};\n"],"mappings":"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"}

package/dist/charts/engine/theme.d.cts

@@ -14,8 +14,17 @@ export interface ChartTheme {
     /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */
     resolve?: ColorResolver;
 }
-/** Reads the theme from the computed style of `element` */
+/**
+ * Reads the theme from the computed style of `element`. Its resolver caches
+ * the colors (DOM probes are costly): read the theme again to see new values.
+ */
 export declare const readTheme: (element: Element | null, palette?: readonly string[]) => ChartTheme;
+/**
+ * Whether `next` (a re-read of `previous`) resolves any color differently:
+ * the theme colors, the palette and every color `previous` has resolved so
+ * far (series, points, annotations...). `true` when it cannot tell.
+ */
+export declare const themeColorsChanged: (previous: ChartTheme, next: ChartTheme) => boolean;
 /** Theme of the charts drawn without a DOM (mini-programs, React Native) */
 export interface ChartThemeInput {
     /**

package/dist/charts/engine/theme.d.ts

@@ -14,8 +14,17 @@ export interface ChartTheme {
     /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */
     resolve?: ColorResolver;
 }
-/** Reads the theme from the computed style of `element` */
+/**
+ * Reads the theme from the computed style of `element`. Its resolver caches
+ * the colors (DOM probes are costly): read the theme again to see new values.
+ */
 export declare const readTheme: (element: Element | null, palette?: readonly string[]) => ChartTheme;
+/**
+ * Whether `next` (a re-read of `previous`) resolves any color differently:
+ * the theme colors, the palette and every color `previous` has resolved so
+ * far (series, points, annotations...). `true` when it cannot tell.
+ */
+export declare const themeColorsChanged: (previous: ChartTheme, next: ChartTheme) => boolean;
 /** Theme of the charts drawn without a DOM (mini-programs, React Native) */
 export interface ChartThemeInput {
     /**

package/dist/charts/engine/theme.js

@@ -1,6 +1,6 @@
-import { domColorResolver as e, mix as t, resolveStaticColor as n } from "./color.js";
+import { domColorResolver as e, memoizeColorResolver as t, mix as n, resolveStaticColor as r, sameColor as i } from "./color.js";
 //#region src/engine/theme.ts
-var r = [
+var a = [
 	"#4f46e5",
 	"#10b981",
 	"#f59e0b",
@@ -9,27 +9,51 @@ var r = [
 	"#8b5cf6",
 	"#14b8a6",
 	"#f97316"
-], i = (e, t) => e?.getPropertyValue(t).trim() ?? "", a = (t, n) => {
-	let r = t && typeof getComputedStyle == "function" ? getComputedStyle(t) : null;
-	return c((e) => i(r, e), e(t), n, r?.fontFamily ?? "");
-}, o = (e = {}, t) => {
+], o = (e, t) => e?.getPropertyValue(t).trim() ?? "", s = (n, r) => {
+	let i = n && typeof getComputedStyle == "function" ? getComputedStyle(n) : null;
+	return f((e) => o(i, e), t(e(n)), r, i?.fontFamily ?? "");
+}, c = [
+	"text",
+	"textMuted",
+	"grid",
+	"axis",
+	"background",
+	"surface",
+	"primary"
+], l = (e, t) => {
+	if (e === t) return !1;
+	if (e.palette.length !== t.palette.length || e.palette.some((e, n) => !i(e, t.palette[n])) || c.some((n) => !i(e[n], t[n]))) return !0;
+	let n = e.resolve?.cache;
+	if (!n || !t.resolve) return !0;
+	let r = [
+		NaN,
+		NaN,
+		NaN,
+		NaN
+	];
+	for (let [e, a] of n) {
+		let n = t.resolve(e, r);
+		if (!i(a, n === r ? null : n)) return !0;
+	}
+	return !1;
+}, u = (e = {}, t) => {
 	let n = e.variables ?? {};
 	return {
-		...c((e) => n[e]?.trim() ?? "", s(n), t?.length ? t : e.palette, ""),
+		...f((e) => n[e]?.trim() ?? "", d(n), t?.length ? t : e.palette, ""),
 		...e.fontFamily ? { fontFamily: e.fontFamily } : {},
 		...e.fontSize ? { fontSize: e.fontSize } : {}
 	};
-}, s = (e) => (t, r) => n(t, e, r), c = (e, n, i, a) => {
+}, d = (e) => (t, n) => r(t, e, n), f = (e, t, r, i) => {
 	let o = [
 		.4,
 		.4,
 		.4,
 		1
-	], s = (e) => n(e, o), c = (t, n) => {
+	], s = (e) => t(e, o), c = (t, n) => {
 		for (let n of t) if (e(n)) return s(`var(${n})`);
 		return s(n);
 	}, l = c(["--surface-color", "--background-color"], "#ffffff"), u = c(["--text-color"], "#1f2937"), d = c(["--text-secondary-color", "--text-muted-color"], "#6b7280"), f = c(["--border-color"], "#e5e7eb"), p;
-	if (i && i.length) p = i.map((e) => s(e));
+	if (r && r.length) p = r.map((e) => s(e));
 	else {
 		let t = [];
 		for (let n = 1; n <= 8; n++) {
@@ -42,23 +66,23 @@ var r = [
 			"--warning-color",
 			"--danger-color",
 			"--info-color"
-		].map((t, n) => e(t) ? s(`var(${t})`) : s(r[n])), ...r.slice(5).map((e) => s(e))];
+		].map((t, n) => e(t) ? s(`var(${t})`) : s(a[n])), ...a.slice(5).map((e) => s(e))];
 	}
-	let m = e("--font-family-sans") || a || "system-ui, -apple-system, 'Segoe UI', sans-serif";
+	let m = e("--font-family-sans") || i || "system-ui, -apple-system, 'Segoe UI', sans-serif";
 	return {
 		palette: p,
 		text: u,
 		textMuted: d,
-		grid: t(l, f, .75),
+		grid: n(l, f, .75),
 		axis: f,
 		background: l,
 		surface: l,
 		primary: p[0],
 		fontFamily: m,
 		fontSize: 11,
-		resolve: n
+		resolve: t
 	};
-}, l = (e) => {
+}, p = (e) => {
 	if (typeof document > "u") return () => {};
 	let t = [];
 	if (typeof MutationObserver == "function") {
@@ -81,6 +105,6 @@ var r = [
 	return () => t.forEach((e) => e());
 };
 //#endregion
-export { o as createTheme, a as readTheme, s as staticColorResolver, l as watchTheme };
+export { u as createTheme, s as readTheme, d as staticColorResolver, l as themeColorsChanged, p as watchTheme };
 
 //# sourceMappingURL=theme.js.map

package/dist/charts/engine/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["DEFAULT_PALETTE","readVar","style","name","readTheme","element","buildTheme","domColorResolver","palette","createTheme","variables","input","staticColorResolver","resolveStaticColor","value","fallback","fallbackGray","resolveColor","resolve","color","names","readVariable","background","text","textMuted","border","colors","c","custom","i","fontFamily","inheritedFont","mix","watchTheme","cleanups","observer","onChange","node","query","fn"],"sources":["../../../../charts/src/engine/theme.ts"],"sourcesContent":["// Chart colors and fonts read from the Minerva CSS variables.\n\nimport {\n  domColorResolver,\n  mix,\n  resolveStaticColor,\n  type ColorResolver,\n  type Rgba,\n} from \"./color\";\n\nexport interface ChartTheme {\n  palette: Rgba[];\n  text: Rgba;\n  textMuted: Rgba;\n  grid: Rgba;\n  axis: Rgba;\n  background: Rgba;\n  surface: Rgba;\n  primary: Rgba;\n  fontFamily: string;\n  /** Tick label font size in CSS pixels */\n  fontSize: number;\n  /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */\n  resolve?: ColorResolver;\n}\n\n/** Used when no CSS variable is defined (e.g. without the Minerva stylesheet) */\nconst DEFAULT_PALETTE = [\n  \"#4f46e5\",\n  \"#10b981\",\n  \"#f59e0b\",\n  \"#ef4444\",\n  \"#0ea5e9\",\n  \"#8b5cf6\",\n  \"#14b8a6\",\n  \"#f97316\",\n];\n\nconst readVar = (style: CSSStyleDeclaration | null, name: string) =>\n  style?.getPropertyValue(name).trim() ?? \"\";\n\n/** Reads the theme from the computed style of `element` */\nexport const readTheme = (\n  element: Element | null,\n  palette?: readonly string[],\n): ChartTheme => {\n  const style =\n    element && typeof getComputedStyle === \"function\"\n      ? getComputedStyle(element)\n      : null;\n  return buildTheme(\n    (name) => readVar(style, name),\n    domColorResolver(element),\n    palette,\n    style?.fontFamily ?? \"\",\n  );\n};\n\n/** Theme of the charts drawn without a DOM (mini-programs, React Native) */\nexport interface ChartThemeInput {\n  /**\n   * Values of the Minerva CSS variables (`--primary-color`, `--text-color`,\n   * `--chart-series-1`, ...) used for the theme colors and to resolve\n   * `var(--name)` colors of the options\n   */\n  variables?: Readonly<Record<string, string>>;\n  /** Series colors (hex / rgb) */\n  palette?: readonly string[];\n  /** Font family of the labels */\n  fontFamily?: string;\n  /**\n   * Font size of the tick labels, in pixels\n   * @default 11\n   */\n  fontSize?: number;\n}\n\n/** Builds a theme from plain values (no DOM) */\nexport const createTheme = (\n  input: ChartThemeInput = {},\n  palette?: readonly string[],\n): ChartTheme => {\n  const variables = input.variables ?? {};\n  const theme = buildTheme(\n    (name) => variables[name]?.trim() ?? \"\",\n    staticColorResolver(variables),\n    palette?.length ? palette : input.palette,\n    \"\",\n  );\n  return {\n    ...theme,\n    ...(input.fontFamily ? { fontFamily: input.fontFamily } : {}),\n    ...(input.fontSize ? { fontSize: input.fontSize } : {}),\n  };\n};\n\n/** Resolver of `var(--name, fallback)` colors against plain variables */\nexport const staticColorResolver =\n  (variables: Readonly<Record<string, string>>): ColorResolver =>\n  (value, fallback) =>\n    resolveStaticColor(value, variables, fallback);\n\nconst buildTheme = (\n  readVariable: (name: string) => string,\n  resolve: ColorResolver,\n  palette: readonly string[] | undefined,\n  inheritedFont: string,\n): ChartTheme => {\n  const fallbackGray: Rgba = [0.4, 0.4, 0.4, 1];\n  const resolveColor = (value: string) => resolve(value, fallbackGray);\n  const color = (names: string[], fallback: string): Rgba => {\n    for (const name of names) {\n      if (readVariable(name)) return resolveColor(`var(${name})`);\n    }\n    return resolveColor(fallback);\n  };\n\n  const background = color(\n    [\"--surface-color\", \"--background-color\"],\n    \"#ffffff\",\n  );\n  const text = color([\"--text-color\"], \"#1f2937\");\n  const textMuted = color(\n    [\"--text-secondary-color\", \"--text-muted-color\"],\n    \"#6b7280\",\n  );\n  const border = color([\"--border-color\"], \"#e5e7eb\");\n\n  let colors: Rgba[];\n  if (palette && palette.length) {\n    colors = palette.map((c) => resolveColor(c));\n  } else {\n    const custom: Rgba[] = [];\n    for (let i = 1; i <= 8; i++) {\n      const name = `--chart-series-${i}`;\n      if (readVariable(name)) custom.push(resolveColor(`var(${name})`));\n    }\n    if (custom.length) {\n      colors = custom;\n    } else {\n      const themed = [\n        \"--primary-color\",\n        \"--success-color\",\n        \"--warning-color\",\n        \"--danger-color\",\n        \"--info-color\",\n      ].map((name, i) =>\n        readVariable(name)\n          ? resolveColor(`var(${name})`)\n          : resolveColor(DEFAULT_PALETTE[i]),\n      );\n      colors = [\n        ...themed,\n        ...DEFAULT_PALETTE.slice(5).map((c) => resolveColor(c)),\n      ];\n    }\n  }\n\n  const fontFamily =\n    readVariable(\"--font-family-sans\") ||\n    inheritedFont ||\n    \"system-ui, -apple-system, 'Segoe UI', sans-serif\";\n\n  return {\n    palette: colors,\n    text,\n    textMuted,\n    grid: mix(background, border, 0.75),\n    axis: border,\n    background,\n    surface: background,\n    primary: colors[0],\n    fontFamily,\n    fontSize: 11,\n    resolve,\n  };\n};\n\n/**\n * Calls `onChange` when the theme may have changed: attributes of `<html>` /\n * `<body>` (class, style, data-theme) and the color scheme.\n */\nexport const watchTheme = (onChange: () => void): (() => void) => {\n  if (typeof document === \"undefined\") return () => {};\n  const cleanups: (() => void)[] = [];\n  if (typeof MutationObserver === \"function\") {\n    const observer = new MutationObserver(onChange);\n    for (const node of [document.documentElement, document.body]) {\n      if (node) {\n        observer.observe(node, {\n          attributes: true,\n          attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-mode\"],\n        });\n      }\n    }\n    cleanups.push(() => observer.disconnect());\n  }\n  if (typeof matchMedia === \"function\") {\n    const query = matchMedia(\"(prefers-color-scheme: dark)\");\n    query.addEventListener?.(\"change\", onChange);\n    cleanups.push(() => query.removeEventListener?.(\"change\", onChange));\n  }\n  return () => cleanups.forEach((fn) => fn());\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":["DEFAULT_PALETTE","readVar","style","name","readTheme","element","buildTheme","memoizeColorResolver","domColorResolver","palette","THEME_COLORS","themeColorsChanged","previous","next","sameColor","c","i","key","cache","probe","value","color","resolved","createTheme","variables","input","staticColorResolver","resolveStaticColor","fallback","fallbackGray","resolveColor","resolve","names","readVariable","background","text","textMuted","border","colors","custom","fontFamily","inheritedFont","mix","watchTheme","cleanups","observer","onChange","node","query","fn"],"sources":["../../../../charts/src/engine/theme.ts"],"sourcesContent":["// Chart colors and fonts read from the Minerva CSS variables.\n\nimport {\n  domColorResolver,\n  memoizeColorResolver,\n  mix,\n  resolveStaticColor,\n  sameColor,\n  type ColorResolver,\n  type MemoizedColorResolver,\n  type Rgba,\n} from \"./color\";\n\nexport interface ChartTheme {\n  palette: Rgba[];\n  text: Rgba;\n  textMuted: Rgba;\n  grid: Rgba;\n  axis: Rgba;\n  background: Rgba;\n  surface: Rgba;\n  primary: Rgba;\n  fontFamily: string;\n  /** Tick label font size in CSS pixels */\n  fontSize: number;\n  /** Resolves the colors of the options (`var(--x)` included); static colors only when omitted */\n  resolve?: ColorResolver;\n}\n\n/** Used when no CSS variable is defined (e.g. without the Minerva stylesheet) */\nconst DEFAULT_PALETTE = [\n  \"#4f46e5\",\n  \"#10b981\",\n  \"#f59e0b\",\n  \"#ef4444\",\n  \"#0ea5e9\",\n  \"#8b5cf6\",\n  \"#14b8a6\",\n  \"#f97316\",\n];\n\nconst readVar = (style: CSSStyleDeclaration | null, name: string) =>\n  style?.getPropertyValue(name).trim() ?? \"\";\n\n/**\n * Reads the theme from the computed style of `element`. Its resolver caches\n * the colors (DOM probes are costly): read the theme again to see new values.\n */\nexport const readTheme = (\n  element: Element | null,\n  palette?: readonly string[],\n): ChartTheme => {\n  const style =\n    element && typeof getComputedStyle === \"function\"\n      ? getComputedStyle(element)\n      : null;\n  return buildTheme(\n    (name) => readVar(style, name),\n    memoizeColorResolver(domColorResolver(element)),\n    palette,\n    style?.fontFamily ?? \"\",\n  );\n};\n\nconst THEME_COLORS = [\n  \"text\",\n  \"textMuted\",\n  \"grid\",\n  \"axis\",\n  \"background\",\n  \"surface\",\n  \"primary\",\n] as const;\n\n/**\n * Whether `next` (a re-read of `previous`) resolves any color differently:\n * the theme colors, the palette and every color `previous` has resolved so\n * far (series, points, annotations...). `true` when it cannot tell.\n */\nexport const themeColorsChanged = (\n  previous: ChartTheme,\n  next: ChartTheme,\n): boolean => {\n  if (previous === next) return false;\n  if (previous.palette.length !== next.palette.length) return true;\n  if (previous.palette.some((c, i) => !sameColor(c, next.palette[i])))\n    return true;\n  if (THEME_COLORS.some((key) => !sameColor(previous[key], next[key])))\n    return true;\n  const cache = (previous.resolve as Partial<MemoizedColorResolver> | undefined)\n    ?.cache;\n  if (!cache || !next.resolve) return true;\n  const probe: Rgba = [NaN, NaN, NaN, NaN];\n  for (const [value, color] of cache) {\n    const resolved = next.resolve(value, probe);\n    if (!sameColor(color, resolved === probe ? null : resolved)) return true;\n  }\n  return false;\n};\n\n/** Theme of the charts drawn without a DOM (mini-programs, React Native) */\nexport interface ChartThemeInput {\n  /**\n   * Values of the Minerva CSS variables (`--primary-color`, `--text-color`,\n   * `--chart-series-1`, ...) used for the theme colors and to resolve\n   * `var(--name)` colors of the options\n   */\n  variables?: Readonly<Record<string, string>>;\n  /** Series colors (hex / rgb) */\n  palette?: readonly string[];\n  /** Font family of the labels */\n  fontFamily?: string;\n  /**\n   * Font size of the tick labels, in pixels\n   * @default 11\n   */\n  fontSize?: number;\n}\n\n/** Builds a theme from plain values (no DOM) */\nexport const createTheme = (\n  input: ChartThemeInput = {},\n  palette?: readonly string[],\n): ChartTheme => {\n  const variables = input.variables ?? {};\n  const theme = buildTheme(\n    (name) => variables[name]?.trim() ?? \"\",\n    staticColorResolver(variables),\n    palette?.length ? palette : input.palette,\n    \"\",\n  );\n  return {\n    ...theme,\n    ...(input.fontFamily ? { fontFamily: input.fontFamily } : {}),\n    ...(input.fontSize ? { fontSize: input.fontSize } : {}),\n  };\n};\n\n/** Resolver of `var(--name, fallback)` colors against plain variables */\nexport const staticColorResolver =\n  (variables: Readonly<Record<string, string>>): ColorResolver =>\n  (value, fallback) =>\n    resolveStaticColor(value, variables, fallback);\n\nconst buildTheme = (\n  readVariable: (name: string) => string,\n  resolve: ColorResolver,\n  palette: readonly string[] | undefined,\n  inheritedFont: string,\n): ChartTheme => {\n  const fallbackGray: Rgba = [0.4, 0.4, 0.4, 1];\n  const resolveColor = (value: string) => resolve(value, fallbackGray);\n  const color = (names: string[], fallback: string): Rgba => {\n    for (const name of names) {\n      if (readVariable(name)) return resolveColor(`var(${name})`);\n    }\n    return resolveColor(fallback);\n  };\n\n  const background = color(\n    [\"--surface-color\", \"--background-color\"],\n    \"#ffffff\",\n  );\n  const text = color([\"--text-color\"], \"#1f2937\");\n  const textMuted = color(\n    [\"--text-secondary-color\", \"--text-muted-color\"],\n    \"#6b7280\",\n  );\n  const border = color([\"--border-color\"], \"#e5e7eb\");\n\n  let colors: Rgba[];\n  if (palette && palette.length) {\n    colors = palette.map((c) => resolveColor(c));\n  } else {\n    const custom: Rgba[] = [];\n    for (let i = 1; i <= 8; i++) {\n      const name = `--chart-series-${i}`;\n      if (readVariable(name)) custom.push(resolveColor(`var(${name})`));\n    }\n    if (custom.length) {\n      colors = custom;\n    } else {\n      const themed = [\n        \"--primary-color\",\n        \"--success-color\",\n        \"--warning-color\",\n        \"--danger-color\",\n        \"--info-color\",\n      ].map((name, i) =>\n        readVariable(name)\n          ? resolveColor(`var(${name})`)\n          : resolveColor(DEFAULT_PALETTE[i]),\n      );\n      colors = [\n        ...themed,\n        ...DEFAULT_PALETTE.slice(5).map((c) => resolveColor(c)),\n      ];\n    }\n  }\n\n  const fontFamily =\n    readVariable(\"--font-family-sans\") ||\n    inheritedFont ||\n    \"system-ui, -apple-system, 'Segoe UI', sans-serif\";\n\n  return {\n    palette: colors,\n    text,\n    textMuted,\n    grid: mix(background, border, 0.75),\n    axis: border,\n    background,\n    surface: background,\n    primary: colors[0],\n    fontFamily,\n    fontSize: 11,\n    resolve,\n  };\n};\n\n/**\n * Calls `onChange` when the theme may have changed: attributes of `<html>` /\n * `<body>` (class, style, data-theme) and the color scheme.\n */\nexport const watchTheme = (onChange: () => void): (() => void) => {\n  if (typeof document === \"undefined\") return () => {};\n  const cleanups: (() => void)[] = [];\n  if (typeof MutationObserver === \"function\") {\n    const observer = new MutationObserver(onChange);\n    for (const node of [document.documentElement, document.body]) {\n      if (node) {\n        observer.observe(node, {\n          attributes: true,\n          attributeFilter: [\"class\", \"style\", \"data-theme\", \"data-mode\"],\n        });\n      }\n    }\n    cleanups.push(() => observer.disconnect());\n  }\n  if (typeof matchMedia === \"function\") {\n    const query = matchMedia(\"(prefers-color-scheme: dark)\");\n    query.addEventListener?.(\"change\", onChange);\n    cleanups.push(() => query.removeEventListener?.(\"change\", onChange));\n  }\n  return () => cleanups.forEach((fn) => fn());\n};\n"],"mappings":";;AA8BA,IAAMA,IAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAEMC,KAAW,GAAmC,MAClDC,GAAO,iBAAiBC,CAAI,CAAC,CAAC,KAAK,KAAK,IAM7BC,KACX,GACA,MACe;CACf,IAAMF,IACJG,KAAW,OAAO,oBAAqB,aACnC,iBAAiBA,CAAO,IACxB;CACN,OAAOC,GACJ,MAASL,EAAQC,GAAOC,CAAI,GAC7BI,EAAqBC,EAAiBH,CAAO,CAAC,GAC9CI,GACAP,GAAO,cAAc,EACvB;AACF,GAEMQ,IAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAOaC,KACX,GACA,MACY;CACZ,IAAIC,MAAaC,GAAM,OAAO;CAI9B,IAHID,EAAS,QAAQ,WAAWC,EAAK,QAAQ,UACzCD,EAAS,QAAQ,MAAM,GAAG,MAAM,CAACE,EAAUC,GAAGF,EAAK,QAAQG,EAAE,CAAC,KAE9DN,EAAa,MAAM,MAAQ,CAACI,EAAUF,EAASK,IAAMJ,EAAKI,EAAI,CAAC,GACjE,OAAO;CACT,IAAMC,IAASN,EAAS,SACpB;CACJ,IAAI,CAACM,KAAS,CAACL,EAAK,SAAS,OAAO;CACpC,IAAMM,IAAc;EAAC;EAAK;EAAK;EAAK;CAAG;CACvC,KAAK,IAAM,CAACC,GAAOC,MAAUH,GAAO;EAClC,IAAMI,IAAWT,EAAK,QAAQO,GAAOD,CAAK;EAC1C,IAAI,CAACL,EAAUO,GAAOC,MAAaH,IAAQ,OAAOG,CAAQ,GAAG,OAAO;CACtE;CACA,OAAO;AACT,GAsBaC,KACX,IAAyB,CAAC,GAC1B,MACe;CACf,IAAMC,IAAYC,EAAM,aAAa,CAAC;CAOtC,OAAO;EACL,GAPYnB,GACX,MAASkB,EAAUrB,EAAK,EAAE,KAAK,KAAK,IACrCuB,EAAoBF,CAAS,GAC7Bf,GAAS,SAASA,IAAUgB,EAAM,SAClC,EAGG;EACH,GAAIA,EAAM,aAAa,EAAE,YAAYA,EAAM,WAAW,IAAI,CAAC;EAC3D,GAAIA,EAAM,WAAW,EAAE,UAAUA,EAAM,SAAS,IAAI,CAAC;CACvD;AACF,GAGaC,KACV,OACA,GAAO,MACNC,EAAmBP,GAAOI,GAAWI,CAAQ,GAE3CtB,KACJ,GACA,GACA,GACA,MACe;CACf,IAAMuB,IAAqB;EAAC;EAAK;EAAK;EAAK;CAAC,GACtCC,KAAgB,MAAkBC,EAAQX,GAAOS,CAAY,GAC7DR,KAAS,GAAiB,MAA2B;EACzD,KAAK,IAAMlB,KAAQ6B,GACjB,IAAIC,EAAa9B,CAAI,GAAG,OAAO2B,EAAa,OAAO3B,EAAK,EAAE;EAE5D,OAAO2B,EAAaF,CAAQ;CAC9B,GAEMM,IAAab,EACjB,CAAC,mBAAmB,oBAAoB,GACxC,SACF,GACMc,IAAOd,EAAM,CAAC,cAAc,GAAG,SAAS,GACxCe,IAAYf,EAChB,CAAC,0BAA0B,oBAAoB,GAC/C,SACF,GACMgB,IAAShB,EAAM,CAAC,gBAAgB,GAAG,SAAS,GAE9CiB;CACJ,IAAI7B,KAAWA,EAAQ,QACrB,IAASA,EAAQ,KAAK,MAAMqB,EAAaf,CAAC,CAAC;MACtC;EACL,IAAMwB,IAAiB,CAAC;EACxB,KAAK,IAAIvB,IAAI,GAAGA,KAAK,GAAG,KAAK;GAC3B,IAAMb,IAAO,kBAAkBa;GAC/B,AAAIiB,EAAa9B,CAAI,KAAGoC,EAAO,KAAKT,EAAa,OAAO3B,EAAK,EAAE,CAAC;EAClE;EACA,AAcEmC,IAdEC,EAAO,SACAA,IAaA,CACP,GAZa;GACb;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAM,MACXN,EAAa9B,CAAI,IACb2B,EAAa,OAAO3B,EAAK,EAAE,IAC3B2B,EAAa9B,EAAgBgB,EAAE,CAGhC,GACH,GAAGhB,EAAgB,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM8B,EAAaf,CAAC,CAAC,CACxD;CAEJ;CAEA,IAAMyB,IACJP,EAAa,oBAAoB,KACjCQ,KACA;CAEF,OAAO;EACL,SAASH;EACT;EACA;EACA,MAAMI,EAAIR,GAAYG,GAAQ,GAAI;EAClC,MAAMA;EACN;EACA,SAASH;EACT,SAASI,EAAO;EAChB;EACA,UAAU;EACV;CACF;AACF,GAMaK,KAAc,MAAuC;CAChE,IAAI,OAAO,WAAa,KAAa,aAAa,CAAC;CACnD,IAAMC,IAA2B,CAAC;CAClC,IAAI,OAAO,oBAAqB,YAAY;EAC1C,IAAMC,IAAW,IAAI,iBAAiBC,CAAQ;EAC9C,KAAK,IAAMC,KAAQ,CAAC,SAAS,iBAAiB,SAAS,IAAI,GACzD,AAAIA,KACFF,EAAS,QAAQE,GAAM;GACrB,YAAY;GACZ,iBAAiB;IAAC;IAAS;IAAS;IAAc;GAAW;EAC/D,CAAC;EAGL,EAAS,WAAWF,EAAS,WAAW,CAAC;CAC3C;CACA,IAAI,OAAO,cAAe,YAAY;EACpC,IAAMG,IAAQ,WAAW,8BAA8B;EAEvD,AADAA,EAAM,mBAAmB,UAAUF,CAAQ,GAC3CF,EAAS,WAAWI,EAAM,sBAAsB,UAAUF,CAAQ,CAAC;CACrE;CACA,aAAaF,EAAS,SAAS,MAAOK,EAAG,CAAC;AAC5C"}