@peter.prib/renderengine 0.13.0 → 0.14.0

package/dist/renderengine.umd.js

@@ -1340,12 +1340,15 @@
       },
       {
         key: 'stackedBar', label: 'Stacked Bar', method: 'stackedBarChart', category: '2d',
-        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+        seriesCapable: true,
         axes: [
           { role: 'category', kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.POSITION_X,        required: true },
-          { role: 'values',   kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: true },
+          { role: 'values',   kind: AXIS_KIND.NUMERIC_LIST, channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: false },
+          { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_STACKED, required: false },
+          { role: 'series',   kind: AXIS_KIND.CATEGORICAL,  channel: ENCODING_CHANNEL.COLOR,              required: false },
         ],
-        dataShape: "Array<{label, values:number[]}> e.g. [{label:'Jan', values:[10,20]}] — no built-in legend option despite being multi-series (a real gap; areaChart's stacked mode has one, this doesn't)",
+        dataShape: "Array<{label, values:number[]}> or multi-series Array<{name, values:Array<{label,value}>}> — segments stacked from zero, with optional series legend",
         streamShape: 'flat', // a new stacked bar is a whole new {label,values} record appended to the outer array, not growth of an existing record's values
       },
       {
@@ -1586,6 +1589,50 @@
         dataShape: 'Array<{label, x, y, z, size?, category?}> — real orbit camera (drag-rotate/wheel-zoom); a future sphere/ellipsoid variant is this same shape with a second shape-size-channeled role, not a new chart type',
         streamShape: 'flat',
       },
+      {
+        key: 'pareto', label: 'Pareto', method: 'paretoChart', category: '2d',
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.SEMANTIC, camera: CAMERA_MODE.NONE,
+        axes: [
+          { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+          { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+        ],
+        dataShape: 'Array<{label, value}> — sorted descending with a right-hand 0-100% cumulative percentage line and 80% cutoff reference line',
+        streamShape: 'flat',
+      },
+      {
+        key: 'lollipop', label: 'Lollipop', method: 'lollipopChart', category: '2d',
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+        seriesCapable: true,
+        axes: [
+          { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
+          { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
+          { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
+        ],
+        dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars',
+        streamShape: 'flat',
+      },
+      {
+        key: 'marimekko', label: 'Marimekko', method: 'marimekkoChart', category: '2d',
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+        seriesCapable: true,
+        axes: [
+          { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.SHAPE_WIDTH,       required: true },
+          { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_HEIGHT, required: true },
+          { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,             required: true },
+        ],
+        dataShape: 'Multi-series Array<{name, values:Array<{label,value}>}> or Array<{label, values:number[]}> — variable-width 100%-stacked mosaic columns',
+        streamShape: 'series',
+      },
+      {
+        key: 'icicle', label: 'Icicle', method: 'icicleChart', category: '2d',
+        coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+        axes: [
+          { role: 'value', kind: AXIS_KIND.NUMERIC,     channel: ENCODING_CHANNEL.ANGLE_OR_AREA,  required: true },
+          { role: 'group', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_ORDER, required: false },
+        ],
+        dataShape: 'Array<{label, value?, children?}> — rectangular hierarchical partition chart (top-down bands by depth, width proportional to value)',
+        streamShape: 'flat',
+      },
       {
         key: 'bar3DOrbit', label: 'Bar (3D Orbit)', method: 'barChart3DOrbit', category: '3d',
         coordSystem: COORD_SYSTEM.ORBIT_3D, title: true, legend: false, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.ORBIT,
@@ -11218,8 +11265,10 @@
             const box = ChartBox.fromRenderer(this.renderer);
             const {
                 x = box.x, y = box.y, width = box.width, height = box.height,
-                colors, title, xAxisLabel, yAxisLabel, stacked = false, legend: showLegend = false,
+                colors, title, xAxisLabel, yAxisLabel, stacked = false,
+                normalize = false, stackMode, legend: showLegend = false,
             } = options;
+            const isPercent = Boolean(stacked && (normalize || stackMode === 'percent'));
             const plotBox = { x, y, width, height };
             const isMultiline = Array.isArray(data[0]?.values);
             const series = isMultiline ? data : [{ name: 'default', values: data }];
@@ -11228,6 +11277,10 @@
             const palette = new ColorPalette(colors);
             const textAnchor = this.renderer.centerTextAnchor;
 
+            const pointTotals = isPercent
+                ? Array.from({ length: pointCount }, (_, i) => series.reduce((sum, s) => sum + Math.max(0, s.values[i]?.value ?? 0), 0))
+                : null;
+
             // Precompute each series' [base, top] band per point — base is 0
             // unless stacked, in which case it's the running cumulative of prior
             // series (computed once here, not re-derived during render).
@@ -11235,12 +11288,15 @@
             const bands = series.map(s => {
                 const band = s.values.map((d, i) => {
                     const base = stacked ? running[i] : 0;
-                    return { base, top: base + d.value };
+                    const val = isPercent
+                        ? (pointTotals[i] > 0 ? (Math.max(0, d.value) / pointTotals[i]) * 100 : 0)
+                        : d.value;
+                    return { base, top: base + val, pct: val };
                 });
                 if (stacked) running = band.map(b => b.top);
                 return band;
             });
-            const maxValue = Math.max(...bands.flat().map(b => b.top)) || 1;
+            const maxValue = isPercent ? 100 : (Math.max(...bands.flat().map(b => b.top)) || 1);
 
             new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
             this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
@@ -11255,6 +11311,14 @@
                 const { r, g, b: bl } = palette.hexToRgb(color);
                 this.renderer.path(areaPath, `rgba(${r},${g},${bl},0.35)`, null, { tooltip: s.name });
                 this.renderer.path('M' + topPts.map(p => `${p.px},${p.py}`).join(' L'), 'none', { color, width: 2 });
+                if (typeof this.renderer.circle === 'function') {
+                    topPts.forEach((p, i) => {
+                        const d = s.values[i];
+                        this._datum(this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
+                            tooltip: `${isMultiline ? s.name + ': ' : ''}${d.label}: ${d.value}`,
+                        }), { label: d.label, series: isMultiline ? s.name : null });
+                    });
+                }
 
                 if (seriesIndex === 0) {
                     const step = Axis.categoryLabelStep(s.values.map(d => d.label), width, { fontSize: 10 });
@@ -11419,8 +11483,11 @@
                 this.renderer.path(centerline, 'none', { color: palette.lighten(color, -0.25), width: 1 });
 
                 pts.forEach(p => {
-                    this.renderer.circle(p.x, p.y, 2, '#fff', { color, width: 1.5 },
-                        { tooltip: `${isMultiline ? s.name + ': ' : ''}${p.d.label}: ${p.d.value} (${metricCol}: ${p.d[metricCol] ?? 0})` });
+                    if (typeof this.renderer.circle === 'function') {
+                        this._datum(this.renderer.circle(p.x, p.y, 2, '#fff', { color, width: 1.5 },
+                            { tooltip: `${isMultiline ? s.name + ': ' : ''}${p.d.label}: ${p.d.value} (${metricCol}: ${p.d[metricCol] ?? 0})` }),
+                        { label: p.d.label, series: isMultiline ? s.name : null });
+                    }
                 });
 
                 if (seriesIndex === 0) {
@@ -11439,35 +11506,104 @@
 
     /**
      * StackedBarChart — vertical stacked bar chart.
+     *
+     * Accepts either:
+     *   - Multi-series `Array<{name: string, values: Array<{label: string, value: number}>}>` (the same
+     *     shape as `GroupedBarChart`, `LineChart` and `StackedAreaChart`), or
+     *   - Flat per-category stacks `Array<{label: string, values: number[]}>` with optional
+     *     `options.seriesLabels`.
+     *
+     * Draws a numeric Y axis (`_drawYAxis`), optional series legend (`legend: true`), and records each
+     * segment with `this._datum()` so `onDatumClick` / `PivotChart` drilling works on every segment.
      */
     class StackedBarChart extends BarChartBase {
         static chartType = 'stackedBar';
 
+        static _normalize(data, seriesLabels = null) {
+            if (!Array.isArray(data) || data.length === 0) return { categories: [], seriesNames: [] };
+            if (Array.isArray(data[0]?.values) && typeof data[0].values[0] === 'object' && data[0].values[0] !== null) {
+                const labels = [...new Set(data.flatMap(s => s.values.map(v => v.label)))];
+                const maps = data.map(s => new Map(s.values.map(v => [v.label, v.value])));
+                return {
+                    seriesNames: data.map((s, i) => s.name ?? seriesLabels?.[i] ?? `Series ${i + 1}`),
+                    categories: labels.map(label => ({ label, values: maps.map(m => m.get(label) ?? 0) })),
+                };
+            }
+            const maxLen = Math.max(0, ...data.map(d => d.values?.length ?? 0));
+            return {
+                seriesNames: Array.from({ length: maxLen }, (_, i) => seriesLabels?.[i] ?? `Series ${i + 1}`),
+                categories: data.map(d => ({ label: d.label, values: (d.values ?? []).map(v => v ?? 0) })),
+            };
+        }
+
+        _setup() {
+            this._normalized = StackedBarChart._normalize(this.data, this.options.seriesLabels);
+            super._setup();
+            if (this.options.legend && this.options.width === undefined && this._normalized.seriesNames.length > 0) {
+                this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+            }
+        }
+
+        _legendOptions() {
+            return {
+                items: this._normalized.seriesNames.map((name, i) => ({ label: name, color: this._palette.colorAt(i), dataIndex: i })),
+                itemHeight: 20, markerSize: 10,
+            };
+        }
+
+        _isNormalized() {
+            return Boolean(this.options.normalize || this.options.stackMode === 'percent');
+        }
+
         _computeMaxValue() {
-            const data = this.data;
-            return Math.max(...data.map(d => d.values.reduce((sum, val) => sum + val, 0)));
+            if (this._isNormalized()) {
+                return this._drawYAxis(100);
+            }
+            const { categories } = this._normalized;
+            const rawMax = Math.max(0, ...categories.map(d => d.values.reduce((sum, val) => sum + Math.max(0, val), 0))) || 1;
+            return this._drawYAxis(rawMax);
         }
 
         _renderBars(maxStackValue) {
-            const data = this.data;
+            const { categories, seriesNames } = this._normalized;
+            if (categories.length === 0) return;
             const { x, y, width, height } = this._plotBox;
-            const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width);
-            const { bandWidth, margin } = this._bandScale(data.length);
+            const normalize = this._isNormalized();
+            const labels = categories.map(d => d.label);
+            const { bandWidth, margin } = this._bandScale(categories.length);
             const textAnchor = this.renderer.centerTextAnchor;
+            const measure = (s) => this.renderer.measureText?.(s, { fontSize: '12px' }) ?? s.length * 12 * 0.55;
+            const room = (bandWidth + margin) - 4;
+            const cut = room >= measure('x'.repeat(6));
+            const labelStep = cut ? 1 : Axis.categoryLabelStep(labels, width);
 
-            data.forEach((d, i) => {
+            categories.forEach((d, i) => {
                 let currentY = y + height;
                 const barX = x + i * (bandWidth + margin);
+                const colTotal = d.values.reduce((sum, val) => sum + Math.max(0, val ?? 0), 0);
                 d.values.forEach((value, j) => {
-                    const barHeight = (value / maxStackValue) * height;
+                    if (value == null || value <= 0) return;
+                    const plotted = normalize ? (colTotal > 0 ? (value / colTotal) * 100 : 0) : value;
+                    const barHeight = (plotted / maxStackValue) * height;
                     currentY -= barHeight;
-                    this.renderer.rect(barX, currentY, bandWidth, barHeight, this._palette.colorAt(j), null, {
-                        tooltip: `${d.label} - Series ${j + 1}: ${value}`,
-                    });
+                    const series = seriesNames[j] ?? `Series ${j + 1}`;
+                    const tipVal = normalize ? `${plotted.toFixed(1)}% (${value})` : `${value}`;
+                    this._datum(this.renderer.rect(barX, currentY, bandWidth, barHeight, this._palette.colorAt(j), null, {
+                        tooltip: `${d.label} - ${series}: ${tipVal}`,
+                    }), { label: d.label, series });
                 });
-                if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+                if (i % labelStep === 0) {
+                    this.renderer.text(cut ? TableChart.fit(String(d.label), room, measure) : d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+                }
             });
         }
+
+        _afterBars() {
+            const { x, y, width } = this._plotBox;
+            if (this.options.legend && this._normalized.seriesNames.length > 0) {
+                Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
+            }
+        }
     }
 
     // Copyright 2026 Jaroslav Peter Prib, Purveyor of Excellence
@@ -11803,8 +11939,8 @@
                     ({ from, to } = referenceLine);
                 }
                 if (from && to) {
-                    const line = this.renderer.path(`M${toX(from.x)},${toY(from.y)} L${toX(to.x)},${toY(to.y)}`, 'none', { color: '#999', width: 1 });
-                    line.setAttribute('stroke-dasharray', '4 3');
+                    const line = this.renderer.path(`M${toX(from.x)},${toY(from.y)} L${toX(to.x)},${toY(to.y)}`, 'none', { color: '#999', width: 1, dashArray: [4, 3] });
+                    line?.setAttribute?.('stroke-dasharray', '4 3');
                 }
             }
 
@@ -11812,7 +11948,10 @@
                 const cx = toX(d.x);
                 const cy = toY(d.y);
                 const tooltip = d.label ? `${d.label}: (${d.x}, ${d.y})` : `(${d.x}, ${d.y})`;
-                this.renderer.circle(cx, cy, pointRadius, colorFor(d), { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip });
+                const series = catField ? ChartData.readColorCol(d, catField) : null;
+                this._datum(this.renderer.circle(cx, cy, pointRadius, colorFor(d), { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip }), {
+                    label: d.label ?? String(d.x), series: series != null ? String(series) : null,
+                });
 
                 const xLow = d.errorXMinus != null ? toX(d.x - d.errorXMinus)
                     : d.errorX != null ? toX(d.x - d.errorX) : null;
@@ -11915,7 +12054,10 @@
                     // 3D effect: draw a line to the "floor"
                     this.renderer.path(`M${floorX},${floorY} L${bubbleX},${bubbleY}`, 'none', { color: '#e0e0e0', width: 1 });
                 }
-                this.renderer.circle(bubbleX, bubbleY, radius, color, { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip: `${d.label}: (${d.x}, ${d.y}, ${d.z})` });
+                const series = catField ? ChartData.readColorCol(d, catField) : null;
+                this._datum(this.renderer.circle(bubbleX, bubbleY, radius, color, { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip: `${d.label}: (${d.x}, ${d.y}, ${d.z})` }), {
+                    label: d.label ?? String(d.x), series: series != null ? String(series) : null,
+                });
             });
 
             // Category color legend
@@ -12094,9 +12236,9 @@
                 const barY = y + height - barHeight;
                 // No gap between bars (unlike barChart's categorical gaps) — bins
                 // are contiguous numeric ranges, not independent categories.
-                this.renderer.rect(barX, barY, Math.max(1, barWidth - 1), barHeight, barColor, null, {
+                this._datum(this.renderer.rect(barX, barY, Math.max(1, barWidth - 1), barHeight, barColor, null, {
                     tooltip: `${Axis.formatValue(bin.from)}–${Axis.formatValue(bin.to)}: ${bin.count}`,
-                });
+                }), { label: `${Axis.formatValue(bin.from)}–${Axis.formatValue(bin.to)}` });
                 if (i % Math.ceil(bins.length / 10 || 1) === 0) {
                     this.renderer.text(Axis.formatValue(bin.from), barX, y + height + 16, { textAnchor: 'start', fontSize: '9px' });
                 }
@@ -12198,9 +12340,9 @@
             this.renderer.path(`M${cx - boxWidth / 4},${this._toY(s.min)} L${cx + boxWidth / 4},${this._toY(s.min)}`, 'none', { color: '#555', width: 1 });
             this.renderer.path(`M${cx - boxWidth / 4},${this._toY(s.max)} L${cx + boxWidth / 4},${this._toY(s.max)}`, 'none', { color: '#555', width: 1 });
             const boxTop = this._toY(s.q3), boxBottom = this._toY(s.q1);
-            this.renderer.rect(cx - boxWidth / 2, boxTop, boxWidth, Math.max(1, boxBottom - boxTop), boxColor, { color: '#333', width: 1 }, {
+            this._datum(this.renderer.rect(cx - boxWidth / 2, boxTop, boxWidth, Math.max(1, boxBottom - boxTop), boxColor, { color: '#333', width: 1 }, {
                 tooltip: `${d.label}: median ${Axis.formatValue(s.median)}, Q1 ${Axis.formatValue(s.q1)}, Q3 ${Axis.formatValue(s.q3)}`,
-            });
+            }), { label: d.label, series: d.label });
             this.renderer.path(`M${cx - boxWidth / 2},${this._toY(s.median)} L${cx + boxWidth / 2},${this._toY(s.median)}`, 'none', { color: '#fff', width: 2 });
             s.outliers.forEach(v => {
                 this.renderer.circle(cx, this._toY(v), 3, 'none', { color: boxColor, width: 1.5 }, { tooltip: `${d.label} outlier: ${Axis.formatValue(v)}` });
@@ -12262,7 +12404,7 @@
                 const topPath = 'M' + topPts.map(p => `${p.px},${p.py}`).join(' L');
                 const areaPath = topPath + ` L${x + width},${y + height} L${x},${y + height} Z`;
                 const { r, g, b } = ColorPalette.hexToRgb(color);
-                this.renderer.path(areaPath, `rgba(${r},${g},${b},0.25)`, null, { tooltip: d.label });
+                this._datum(this.renderer.path(areaPath, `rgba(${r},${g},${b},0.25)`, null, { tooltip: d.label }), { label: d.label, series: d.label });
                 this.renderer.path(topPath, 'none', { color, width: 2 });
             });
 
@@ -12300,9 +12442,9 @@
             const leftPts = curve.map(p => ({ px: cx - (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
             const path = 'M' + rightPts.map(p => `${p.px},${p.py}`).join(' L')
                 + ' L' + [...leftPts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
-            this.renderer.path(path, color, { color: '#333', width: 1 }, {
+            this._datum(this.renderer.path(path, color, { color: '#333', width: 1 }, {
                 tooltip: `${d.label}: n=${d.values.length}`,
-            });
+            }), { label: d.label, series: d.label });
 
             const median = Statistics.quantile([...d.values].sort((a, b) => a - b), 0.5);
             this.renderer.path(`M${cx - halfWidth},${this._toY(median)} L${cx + halfWidth},${this._toY(median)}`, 'none', { color: '#fff', width: 2 });
@@ -12557,6 +12699,34 @@
             return result;
         }
 
+        /**
+         * Recursive rectangular partition (icicle / flame graph) layout over a node tree.
+         * Partitions `width` proportionally to node value at each level and steps down by `bandHeight` per depth.
+         * @returns {Array<{node: object, x: number, y: number, width: number, height: number, depth: number, isLeaf: boolean, topAncestor: object}>}
+         */
+        static icicleLayout(nodes, x, y, width, bandHeight, depth = 0, topAncestors = null) {
+            const items = (nodes ?? [])
+                .map(node => ({ node, value: Hierarchy.value(node) }))
+                .filter(it => it.value > 0);
+            const total = items.reduce((s, it) => s + it.value, 0) || 1;
+
+            const result = [];
+            let cursorX = x;
+            for (const it of items) {
+                const { node } = it;
+                const spanW = (it.value / total) * width;
+                const isLeaf = !node.children?.length;
+                const topAncestor = topAncestors ? topAncestors.get(node) : node;
+                result.push({ node, x: cursorX, y, width: spanW, height: bandHeight, depth, isLeaf, topAncestor });
+                if (!isLeaf) {
+                    const childTopAncestors = new Map(node.children.map(c => [c, topAncestor]));
+                    result.push(...Hierarchy.icicleLayout(node.children, cursorX, y + bandHeight, spanW, bandHeight, depth + 1, childTopAncestors));
+                }
+                cursorX += spanW;
+            }
+            return result;
+        }
+
         /**
          * Flat, pre-order list of *visible* rows for an outline view. A branch
          * present in `collapsed` contributes its own row but none of its
@@ -12646,9 +12816,9 @@
                 const textColor = this._textColorForNode(topAncestor, depth);
 
                 if (isLeaf) {
-                    this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                    this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
                         tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                    });
+                    }), { label: node.label });
                     if (rw > 30 && rh > 14) {
                         this.renderer.text(node.label, rx + rw / 2, ry + rh / 2, {
                             textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
@@ -12657,9 +12827,9 @@
                 } else {
                     const headerH = Math.min(rh, TreemapChart.HEADER_H);
                     this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), 'rgba(0,0,0,0.03)', { color: '#ddd', width: 1 });
-                    this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
+                    this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
                         tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                    });
+                    }), { label: node.label });
                     if (rw > 30) {
                         this.renderer.text(node.label, rx + 4, ry + headerH / 2, {
                             textAnchor: 'start', verticalAlign: 'middle', fontSize: '9px', fontWeight: 'bold', fill: textColor, 'pointer-events': 'none',
@@ -12707,9 +12877,9 @@
                 const textColor = this._textColorForNode(topAncestor, depth);
 
                 const path = ShapePaths.donutSlicePath(ecx, ecy, rOuter, rInner, startAngle, endAngle);
-                this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+                this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                     tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
-                });
+                }), { label: node.label });
 
                 if (endAngle - startAngle > 0.35) {
                     const midAngle = (startAngle + endAngle) / 2;
@@ -12759,15 +12929,16 @@
                 const accentColor = this._colorForNode(topAncestor, depth);
 
                 const g = this.renderer.group();
-                g.appendChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
+                const addChild = (child) => g?.appendChild?.(child);
+                addChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
 
                 let labelX = indentX + 16;
                 if (hasChildren) {
                     const collapsedHere = this.collapsed ? this.collapsed.has(node) : false;
                     const badgeX = indentX + 26;
                     const badge = this.renderer.circle(badgeX, rowCenterY, 7, '#ffffff', { color: '#888', width: 1.2 });
-                    g.appendChild(badge);
-                    g.appendChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
+                    addChild(badge);
+                    addChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
                         textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px', fill: '#555', 'pointer-events': 'none',
                     }));
                     badge.style.cursor = 'pointer';
@@ -12781,22 +12952,23 @@
                     labelX = badgeX + 16;
                 }
 
-                g.appendChild(this.renderer.text(node.label, labelX, rowCenterY, {
+                const labelEl = this._datum(this.renderer.text(node.label, labelX, rowCenterY, {
                     textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#222',
-                }));
+                }), { label: node.label, series: null });
+                addChild(labelEl);
 
                 if (hasChildren) {
-                    g.appendChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
+                    addChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
                         textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                     }));
                 } else if (Number.isFinite(node.value)) {
-                    g.appendChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
+                    addChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
                         textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                     }));
                 } else {
                     const extra = Hierarchy.outlineExtraText(node, structuralKeys);
                     if (extra) {
-                        g.appendChild(this.renderer.text(extra, detailX, rowCenterY, {
+                        addChild(this.renderer.text(extra, detailX, rowCenterY, {
                             textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
                         }));
                     }
@@ -12818,6 +12990,308 @@
     OutlineChart.INDENT_W = 18;
     OutlineChart.HIERARCHY_STRUCTURAL_KEYS = new Set(['label', 'value', 'children']);
 
+    /**
+     * IcicleChart — rectangular hierarchical partition chart (top-down flame/icicle layout).
+     * Each depth level forms a horizontal band and each node's width is proportional to its value
+     * within its parent's span.
+     */
+    class IcicleChart extends HierarchyChart {
+        static chartType = 'icicle';
+
+        _render() {
+            const data = this.data ?? [];
+            const options = this.options;
+            const box = ChartBox.fromRenderer(this.renderer);
+            const { x = box.x, y = box.y, width = box.width, height = box.height, title } = options;
+            const plotBox = { x, y, width, height };
+
+            new ChartLabels({ title }).draw(this.renderer, plotBox);
+            if (data.length === 0) return;
+
+            const maxDepth = Math.max(1, ...data.map(n => Hierarchy.depth(n)));
+            const bandHeight = height / maxDepth;
+            const layout = Hierarchy.icicleLayout(data, x, y, width, bandHeight);
+            const textAnchor = this.renderer.centerTextAnchor;
+            const measure = (s) => this.renderer.measureText?.(s, { fontSize: '10px' }) ?? s.length * 10 * 0.55;
+
+            layout.forEach(entry => {
+                const { node, x: rx, y: ry, width: rw, height: rh, depth, topAncestor } = entry;
+                const color = this._colorForNode(topAncestor, depth);
+                const textColor = this._textColorForNode(topAncestor, depth);
+
+                this._datum(this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                    tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+                }), { label: node.label });
+
+                if (rw > 28 && rh > 14) {
+                    const fitted = TableChart.fit(String(node.label), rw - 6, measure);
+                    this.renderer.text(fitted, rx + rw / 2, ry + rh / 2, {
+                        textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
+                    });
+                }
+            });
+        }
+    }
+
+    /**
+     * ParetoChart — descending bar chart combined with a cumulative percentage line (0–100%)
+     * on a right-hand axis and an 80% cutoff reference line.
+     */
+    class ParetoChart extends BarChartBase {
+        static chartType = 'pareto';
+
+        _setup() {
+            super._setup();
+            if (this.options.width === undefined) {
+                this._plotBox.width = Math.max(80, this._plotBox.width - 36);
+            }
+            const items = (this.data ?? []).filter(d => d && typeof d.value === 'number' && d.value >= 0);
+            this._sorted = this.options.sorted === false ? [...items] : [...items].sort((a, b) => b.value - a.value);
+        }
+
+        _computeMaxValue() {
+            const rawMax = Math.max(0, ...this._sorted.map(d => d.value)) || 1;
+            return this._drawYAxis(rawMax, 0);
+        }
+
+        _renderBars(maxValue) {
+            const items = this._sorted;
+            if (items.length === 0) return;
+            const { x, y, width, height } = this._plotBox;
+            const {
+                barColor = '#3b82f6',
+                lineColor = '#dc2626',
+                cutoff = 80,
+                colors,
+            } = this.options;
+            const { bandWidth, margin } = this._bandScale(items.length);
+            const labelStep = Axis.categoryLabelStep(items.map(d => d.label), width);
+            const textAnchor = this.renderer.centerTextAnchor;
+            const total = items.reduce((sum, d) => sum + d.value, 0) || 1;
+
+            // Right-hand percentage axis (0%..100%).
+            const rightX = x + width;
+            this.renderer.path(`M${rightX},${y} L${rightX},${y + height}`, 'none', { color: '#64748b', width: 1 });
+            for (const pct of [0, 20, 40, 60, 80, 100]) {
+                const py = y + height - (pct / 100) * height;
+                this.renderer.path(`M${rightX},${py} L${rightX + 4},${py}`, 'none', { color: '#64748b', width: 1 });
+                this.renderer.text(`${pct}%`, rightX + 8, py + 3, { textAnchor: 'start', fontSize: '10px', fill: '#475569' });
+            }
+
+            // Dashed 80% cutoff reference line.
+            if (cutoff > 0 && cutoff < 100) {
+                const cutY = y + height - (cutoff / 100) * height;
+                this.renderer.path(`M${x},${cutY} L${rightX},${cutY}`, 'none', {
+                    color: lineColor, width: 1, dashArray: '4,4',
+                });
+            }
+
+            let running = 0;
+            const linePts = [];
+            items.forEach((d, i) => {
+                running += d.value;
+                const cumPct = (running / total) * 100;
+                const color = colors ? this._palette.colorAt(i) : barColor;
+                const bar = this._barSpan(d.value);
+                const barX = x + i * (bandWidth + margin);
+                const cx = barX + bandWidth / 2;
+                const py = y + height - (cumPct / 100) * height;
+                linePts.push({ cx, py, label: d.label, value: d.value, cumPct });
+
+                this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, {
+                    bar: true,
+                    dataIndex: i,
+                    tooltip: `${d.label}: ${d.value} (${cumPct.toFixed(1)}% cumulative)`,
+                }), { label: d.label });
+
+                if (i % labelStep === 0) {
+                    this.renderer.text(d.label, cx, y + height + 20, { textAnchor });
+                }
+            });
+
+            if (linePts.length > 0) {
+                const dPath = 'M' + linePts.map(p => `${p.cx},${p.py}`).join(' L');
+                this.renderer.path(dPath, 'none', { color: lineColor, width: 2 });
+                if (typeof this.renderer.circle === 'function') {
+                    linePts.forEach(p => {
+                        this._datum(this.renderer.circle(p.cx, p.py, 3.5, lineColor, { color: '#fff', width: 1.5 }, {
+                            tooltip: `${p.label}: ${p.cumPct.toFixed(1)}% cumulative`,
+                        }), { label: p.label });
+                    });
+                }
+            }
+        }
+    }
+
+    /**
+     * LollipopChart — stem-and-dot alternative to a bar chart for high-cardinality or multi-series
+     * categorical comparisons with minimal ink density.
+     *
+     * Accepts either:
+     *   - 1D `Array<{label: string, value: number}>`, or
+     *   - Multi-series `Array<{name: string, values: Array<{label: string, value: number}>}>`.
+     */
+    class LollipopChart extends BarChartBase {
+        static chartType = 'lollipop';
+
+        static _normalize(data) {
+            if (!Array.isArray(data) || data.length === 0) return { isMulti: false, series: [], labels: [] };
+            if (Array.isArray(data[0]?.values)) {
+                const labels = [...new Set(data.flatMap(s => s.values.map(v => v.label)))];
+                return { isMulti: true, series: data, labels };
+            }
+            return {
+                isMulti: false,
+                series: [{ name: 'default', values: data }],
+                labels: data.map(d => d.label),
+            };
+        }
+
+        _setup() {
+            this._norm = LollipopChart._normalize(this.data);
+            super._setup();
+            const showLegend = this.options.legend ?? this._norm.isMulti;
+            if (showLegend && this._norm.isMulti && this.options.width === undefined) {
+                this._plotBox.width = Legend.plotWidthBeside(this._plotBox, this.renderer.width, this._legendOptions());
+            }
+        }
+
+        _legendOptions() {
+            return {
+                items: this._norm.series.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
+                itemHeight: 20, markerSize: 10,
+            };
+        }
+
+        _computeMaxValue() {
+            const allValues = this._norm.series.flatMap(s => s.values.map(v => v.value)).filter(v => typeof v === 'number');
+            const rawMax = Math.max(0, ...allValues) || 1;
+            const rawMin = Math.min(0, ...allValues);
+            return this._drawYAxis(rawMax, rawMin);
+        }
+
+        _renderBars() {
+            const { isMulti, series, labels } = this._norm;
+            if (labels.length === 0) return;
+            const { x, y, width, height } = this._plotBox;
+            const {
+                color: singleColor = '#2563eb',
+                colors,
+                radius = 5,
+                stemWidth = 2,
+            } = this.options;
+            const { bandWidth, margin } = this._bandScale(labels.length);
+            const labelStep = Axis.categoryLabelStep(labels, width);
+            const textAnchor = this.renderer.centerTextAnchor;
+            const zeroY = this._barSpan(0).end;
+            const seriesCount = series.length;
+
+            labels.forEach((label, i) => {
+                const bandX = x + i * (bandWidth + margin);
+                series.forEach((s, sIdx) => {
+                    const pt = s.values.find(v => v.label === label);
+                    if (!pt || typeof pt.value !== 'number') return;
+                    const cx = seriesCount === 1
+                        ? bandX + bandWidth / 2
+                        : bandX + ((sIdx + 0.5) / seriesCount) * bandWidth;
+                    const span = this._barSpan(pt.value);
+                    const col = isMulti || colors ? this._palette.colorAt(sIdx) : singleColor;
+                    const tip = isMulti ? `${s.name} - ${label}: ${pt.value}` : `${label}: ${pt.value}`;
+
+                    this.renderer.path(`M${cx},${zeroY} L${cx},${span.end}`, 'none', { color: col, width: stemWidth });
+                    if (typeof this.renderer.circle === 'function') {
+                        this._datum(this.renderer.circle(cx, span.end, radius, col, { color: '#fff', width: 1.5 }, {
+                            tooltip: tip,
+                        }), { label, series: isMulti ? s.name : null });
+                    } else {
+                        this._datum(this.renderer.rect(cx - radius, span.end - radius, radius * 2, radius * 2, col, null, {
+                            tooltip: tip,
+                        }), { label, series: isMulti ? s.name : null });
+                    }
+                });
+                if (i % labelStep === 0) {
+                    this.renderer.text(label, bandX + bandWidth / 2, y + height + 20, { textAnchor });
+                }
+            });
+        }
+
+        _afterBars() {
+            const showLegend = this.options.legend ?? this._norm.isMulti;
+            if (showLegend && this._norm.isMulti) {
+                const { x, y, width } = this._plotBox;
+                Legend.beside({ x, y, width }, this.renderer.width, this._legendOptions()).draw(this.renderer);
+            }
+        }
+    }
+
+    /**
+     * MarimekkoChart — two-dimensional 100%-stacked mosaic chart where column width is proportional to
+     * each category's total across series and segment height is each series' percentage share within
+     * that category.
+     */
+    class MarimekkoChart extends Chart {
+        static chartType = 'marimekko';
+
+        _render() {
+            const normalized = StackedBarChart._normalize(this.data, this.options.seriesLabels);
+            const { categories, seriesNames } = normalized;
+            const box = ChartBox.fromRenderer(this.renderer);
+            const {
+                x = box.x, y = box.y, width: rawWidth = box.width, height = box.height,
+                colors, title, xAxisLabel, yAxisLabel, legend: showLegend = true,
+            } = this.options;
+            const palette = new ColorPalette(colors);
+            const legendOpts = {
+                items: seriesNames.map((name, i) => ({ label: name, color: palette.colorAt(i), dataIndex: i })),
+                itemHeight: 20, markerSize: 10,
+            };
+            const width = showLegend && this.options.width === undefined && seriesNames.length > 0
+                ? Legend.plotWidthBeside({ x, y, width: rawWidth, height }, this.renderer.width, legendOpts)
+                : rawWidth;
+            const plotBox = { x, y, width, height };
+
+            new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+            new Axis().drawYRange(this.renderer, plotBox, 0, 100);
+
+            const colTotals = categories.map(c => c.values.reduce((sum, v) => sum + Math.max(0, v ?? 0), 0));
+            const grandTotal = colTotals.reduce((sum, v) => sum + v, 0) || 1;
+            const textAnchor = this.renderer.centerTextAnchor;
+            const measure = (s) => this.renderer.measureText?.(s, { fontSize: '11px' }) ?? s.length * 11 * 0.55;
+
+            let cursorX = x;
+            categories.forEach((cat, i) => {
+                const colTotal = colTotals[i];
+                if (colTotal <= 0) return;
+                const colW = (colTotal / grandTotal) * width;
+                let cursorY = y + height;
+
+                cat.values.forEach((value, j) => {
+                    if (value == null || value <= 0) return;
+                    const share = (value / colTotal) * 100;
+                    const segH = (share / 100) * height;
+                    cursorY -= segH;
+                    const series = seriesNames[j] ?? `Series ${j + 1}`;
+                    const color = palette.colorAt(j);
+                    this._datum(this.renderer.rect(cursorX, cursorY, colW, segH, color, { color: '#fff', width: 1 }, {
+                        tooltip: `${cat.label} - ${series}: ${value} (${share.toFixed(1)}%)`,
+                    }), { label: cat.label, series });
+                });
+
+                if (colW >= 24) {
+                    const labelText = TableChart.fit(String(cat.label), colW - 4, measure);
+                    this.renderer.text(labelText, cursorX + colW / 2, y + height + 18, { textAnchor, fontSize: '11px' });
+                }
+                cursorX += colW;
+            });
+
+            this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+            if (showLegend && seriesNames.length > 0) {
+                Legend.beside({ x, y, width }, this.renderer.width, legendOpts).draw(this.renderer);
+            }
+        }
+    }
+
     /**
      * ChartChooser — which catalog chart types fit a set of result rows, best first, each with the rows
      * already shaped as that chart's `dataShape`. A table always fits, so it is always offered, last.
@@ -13551,6 +14025,16 @@
     class PivotView {
         static ROLLUP_COLUMN = '_rollup';
 
+        static AGGREGATIONS = [
+            { key: 'sum', label: 'Sum' },
+            { key: 'count', label: 'Count' },
+            { key: 'avg', label: 'Average' },
+            { key: 'median', label: 'Median' },
+            { key: 'min', label: 'Minimum' },
+            { key: 'max', label: 'Maximum' },
+            { key: 'stddev', label: 'Std Dev' },
+        ];
+
         /**
          * @param {Array<object>} rows result rows: dimension values, measure values, and `_rollup`
          * @param {object} [options]
@@ -13578,6 +14062,7 @@
          * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
          * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every measure or per
          *   measure (`TableChart.formatFor`): cells, totals and the traffic lights' cut-offs. A copy keeps the raw numbers.
+         * @param {string[]} [options.visibleMeasures] subset of `measures` currently shown in the grid and chart
          */
         constructor(rows, options = {}) {
             this.onChange = options.onChange ?? null;
@@ -13593,6 +14078,18 @@
             this.lightRules = options.trafficLights ?? null;
             /** Traffic lights showing: null (off), 'rules' (the host's), 'thirds-high' or 'thirds-low' (by thirds, higher or lower is better). */
             this.lights = this.lightRules ? 'rules' : null;
+            /** Optional sort on the row axis: `{ columnKey, measure, direction: 'asc'|'desc' }`, or null. */
+            this.rowSort = null;
+            /** Optional Top-N / Bottom-N filter on row siblings: `{ count, columnKey, measure, direction: 'desc'|'asc' }`, or null. */
+            this.topN = null;
+            /** Post-rollup derived formula measures: `Map<name, { name, formula, params, fn }>`. */
+            this.derivedMeasures = new Map();
+            /** Summary / aggregation mode: `'sum'`, `'count'`, `'avg'`, `'median'`, `'min'`, `'max'`, or `'stddev'`. */
+            this.aggregation = PivotView.AGGREGATIONS.some(a => a.key === options.aggregation) ? options.aggregation : 'sum';
+            /** Optional raw fact rows behind the cube, enabling exact cell-level Count, Average, Median, Min, Max, and Std Dev. */
+            this.facts = Array.isArray(options.facts) ? options.facts : null;
+            /** How cell values are shown: `'value'`, `'rowPercent'`, `'columnPercent'`, or `'totalPercent'`. */
+            this.valueMode = ['rowPercent', 'columnPercent', 'totalPercent'].includes(options.valueMode) ? options.valueMode : 'value';
             this._load(rows, options);
         }
 
@@ -13609,6 +14106,10 @@
         _load(rows, options) {
             this._options = options;
             this.rows = rows;
+            if (Array.isArray(options.facts)) this.facts = options.facts;
+            if (options.aggregation && PivotView.AGGREGATIONS.some(a => a.key === options.aggregation)) {
+                this.aggregation = options.aggregation;
+            }
             this.rowAxis = [...(options.rowAxis ?? [])];
             this.columnAxis = [...(options.columnAxis ?? [])];
             this.pageAxis = (options.pageAxis ?? []).map(p => ({ dimension: p.dimension, value: p.value ?? null }));
@@ -13617,9 +14118,42 @@
             const rollup = (options.columns ?? []).find(c => c.kind === 'rollup');
             this.rollupColumn = rollup?.name ?? PivotView.ROLLUP_COLUMN;
             this.dimensions = options.dimensions ?? rollup?.dimensions ?? [...this.rowAxis, ...this.columnAxis];
-            this.measures = options.measures ?? this._defaultMeasures(rows, options.columns);
+            if (Array.isArray(options.derivedMeasures)) {
+                this.derivedMeasures.clear();
+                for (const spec of options.derivedMeasures) {
+                    if (spec?.name && spec.formula) this.derivedMeasures.set(spec.name, PivotView._compileDerived(spec));
+                }
+            }
+            const baseMeasures = options.measures ?? this._defaultMeasures(rows, options.columns);
+            const derivedNames = [...this.derivedMeasures.keys()].filter(m => !baseMeasures.includes(m));
+            this.allMeasures = [...baseMeasures, ...derivedNames];
+            const keptMeasures = (options.visibleMeasures ?? this.measures ?? this.allMeasures).filter(m => this.allMeasures.includes(m));
+            this.measures = keptMeasures.length > 0 ? keptMeasures : [...this.allMeasures];
             this.collapsed = { rows: new Set(this.collapsed?.rows ?? []), columns: new Set(this.collapsed?.columns ?? []) };
             this._index();
+            if (options.topN && options.topN.count > 0) {
+                this.topN = {
+                    count: options.topN.count,
+                    columnKey: options.topN.columnKey ?? this.columnRoot.key,
+                    measure: options.topN.measure ?? this.measures[0],
+                    direction: options.topN.direction === 'asc' ? 'asc' : 'desc',
+                };
+            }
+        }
+
+        static _compileDerived({ name, formula, params = null }) {
+            if (typeof formula === 'function') {
+                return { name, formula, params, fn: (row) => formula(row) };
+            }
+            const builtins = new Set(['abs', 'min', 'max', 'sqrt', 'log', 'exp', 'floor', 'ceil', 'round', 'clamp']);
+            const paramList = Array.isArray(params) && params.length > 0
+                ? params
+                : [...new Set((String(formula).match(/[A-Za-z_][A-Za-z0-9_]*/g) ?? []).filter(id => !builtins.has(id)))];
+            const compiled = compileFormula(String(formula), paramList);
+            const fn = (row) => (paramList.some(p => typeof row[p] !== 'number')
+                ? null
+                : compiled(...paramList.map(p => row[p])));
+            return { name, formula, params: paramList, fn };
         }
 
         _defaultMeasures(rows, columns) {
@@ -13651,6 +14185,7 @@
 
         _index() {
             this.cells = new Map();
+            this._sampleCache = new Map();
             this.unplaced = 0;
             this.rowRoot = PivotView._node([], null);
             this.columnRoot = PivotView._node([], null);
@@ -13699,12 +14234,35 @@
 
         /**
          * The rows drawn, top to bottom: each member with its own totals, then (unless collapsed) the
-         * members below it, indented; the grand total last. `{ node, depth }`.
+         * members below it, indented; the grand total last. `{ node, depth }`. When `rowSort` is set,
+         * siblings at each level are ordered by that column/measure (nulls last).
          */
         visibleRows() {
             const out = [];
+            const sortList = (list, spec) => {
+                const { columnKey, measure, direction } = spec;
+                const sign = direction === 'desc' ? -1 : 1;
+                const colNode = this._findColumnNode(columnKey) ?? this.columnRoot;
+                const col = { node: colNode, measure: this.measures.includes(measure) ? measure : this.measures[0] };
+                return [...list].sort((a, b) => {
+                    const va = this.value(a, col), vb = this.value(b, col);
+                    if (va == null) return vb == null ? 0 : 1;
+                    if (vb == null) return -1;
+                    return sign * (va - vb);
+                });
+            };
+            const order = (children) => {
+                let list = [...children.values()];
+                if (this.topN && this.topN.count > 0) {
+                    list = sortList(list, this.topN).slice(0, this.topN.count);
+                }
+                if (this.rowSort) {
+                    list = sortList(list, this.rowSort);
+                }
+                return list;
+            };
             const walk = (node) => {
-                for (const child of node.children.values()) {
+                for (const child of order(node.children)) {
                     out.push({ node: child, depth: child.path.length - 1 });
                     if (!this.isCollapsed('rows', child)) walk(child);
                 }
@@ -13714,6 +14272,19 @@
             return out;
         }
 
+        _findColumnNode(key) {
+            if (!key || key === this.columnRoot.key) return this.columnRoot;
+            const walk = (node) => {
+                for (const child of node.children.values()) {
+                    if (child.key === key) return child;
+                    const found = walk(child);
+                    if (found) return found;
+                }
+                return null;
+            };
+            return walk(this.columnRoot);
+        }
+
         /**
          * The value columns drawn, left to right: each column-axis member's members (unless it is
          * collapsed, or has none), then its own total; the grand total last. One per measure for each.
@@ -13781,10 +14352,140 @@
             return out.map(({ id, ...cell }) => cell);
         }
 
-        /** The value at a row and column, from the row the data gave for that pair; null when it gave none. */
+        /** Evaluates `measure` on a single data or fact row (handling derived formulas). */
+        _rowMeasureValue(row, measure) {
+            if (!row) return null;
+            if (this.derivedMeasures.has(measure)) {
+                let scope = row;
+                if (this.derivedMeasures.size > 1) {
+                    scope = { ...row };
+                    for (const [name, d] of this.derivedMeasures) {
+                        const val = d.fn(scope);
+                        scope[name] = Number.isFinite(val) ? Math.round(val * 1000) / 1000 : null;
+                        if (name === measure) return scope[name];
+                    }
+                }
+                const d = this.derivedMeasures.get(measure);
+                const v = d.fn(scope);
+                return Number.isFinite(v) ? Math.round(v * 1000) / 1000 : null;
+            }
+            return row[measure] ?? null;
+        }
+
+        /**
+         * Collects the sample of numeric values behind `(rowNode, colNode, measure)` for statistical
+         * aggregations (`count`, `avg`, `median`, `min`, `max`, `stddev`):
+         * 1) From `this.facts` when raw fact rows are supplied,
+         * 2) Else from `row._values?.[measure]` when pre-attached,
+         * 3) Else from the descendant leaf cells in `this.cells`.
+         */
+        _cellSample(rowNode, colNode, measure) {
+            const cacheKey = `${rowNode.key}|${colNode.key}|${measure}`;
+            if (this._sampleCache?.has(cacheKey)) return this._sampleCache.get(cacheKey);
+            let values = [];
+            const row = this.cell(rowNode, colNode);
+            if (Array.isArray(this.facts) && this.facts.length > 0) {
+                const matching = this.facts.filter(f => rowNode.path.every((v, i) => f[this.rowAxis[i]] === v)
+                    && colNode.path.every((v, j) => f[this.columnAxis[j]] === v)
+                    && this.pageAxis.every(p => p.value === null || String(f[p.dimension]) === String(p.value))
+                    && this.memberFilters.every(m => (m.keep ? m.keep.includes(f[m.dimension]) : !m.remove?.includes(f[m.dimension]))));
+                values = matching.map(f => this._rowMeasureValue(f, measure)).filter(v => typeof v === 'number' && Number.isFinite(v));
+            } else if (Array.isArray(row?._values?.[measure])) {
+                values = row._values[measure].filter(v => typeof v === 'number' && Number.isFinite(v));
+            } else {
+                const leaves = (node) => {
+                    if (node.children.size === 0) return [node];
+                    const out = [];
+                    for (const c of node.children.values()) out.push(...leaves(c));
+                    return out;
+                };
+                const rLeaves = leaves(rowNode);
+                const cLeaves = leaves(colNode);
+                for (const r of rLeaves) {
+                    for (const c of cLeaves) {
+                        const leafRow = this.cell(r, c);
+                        const v = this._rowMeasureValue(leafRow, measure);
+                        if (typeof v === 'number' && Number.isFinite(v)) values.push(v);
+                    }
+                }
+            }
+            this._sampleCache?.set(cacheKey, values);
+            return values;
+        }
+
+        /** Computes `mode` (`'sum'|'count'|'avg'|'median'|'min'|'max'|'stddev'`) over `values`. */
+        static aggregateValues(values, mode = 'sum', sumValue = null, countOverride = null) {
+            if (mode === 'count') {
+                if (typeof countOverride === 'number') return countOverride;
+                return Array.isArray(values) ? values.length : 0;
+            }
+            if (!Array.isArray(values) || values.length === 0) {
+                return mode === 'sum' ? sumValue : null;
+            }
+            const round3 = (n) => (Number.isFinite(n) ? Math.round(n * 1000) / 1000 : null);
+            switch (mode) {
+                case 'sum':
+                    return sumValue !== null ? sumValue : round3(values.reduce((a, b) => a + b, 0));
+                case 'avg': {
+                    if (typeof countOverride === 'number' && countOverride > 0 && typeof sumValue === 'number') {
+                        return round3(sumValue / countOverride);
+                    }
+                    return round3(values.reduce((a, b) => a + b, 0) / values.length);
+                }
+                case 'median': {
+                    const sorted = [...values].sort((a, b) => a - b);
+                    const mid = Math.floor(sorted.length / 2);
+                    const med = sorted.length % 2 === 1 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+                    return round3(med);
+                }
+                case 'min':
+                    return round3(Math.min(...values));
+                case 'max':
+                    return round3(Math.max(...values));
+                case 'stddev': {
+                    const mean = values.reduce((a, b) => a + b, 0) / values.length;
+                    const variance = values.reduce((acc, v) => acc + (v - mean) ** 2, 0) / values.length;
+                    return round3(Math.sqrt(variance));
+                }
+                default:
+                    return sumValue;
+            }
+        }
+
+        /** The value at a row and column, from the row the data gave for that pair (or a post-rollup derived formula, or the active `aggregation`); null when it gave none. */
         value(rowNode, column) {
             const row = this.cell(rowNode, column.node);
-            return row === null ? null : row[column.measure] ?? null;
+            if (row === null) return null;
+            const raw = this._rowMeasureValue(row, column.measure);
+            if (!this.aggregation || this.aggregation === 'sum') return raw;
+            const sample = this._cellSample(rowNode, column.node, column.measure);
+            return PivotView.aggregateValues(sample, this.aggregation, raw, row._count);
+        }
+
+        /**
+         * The value at a row and column in the active `valueMode`: the raw value (`'value'`), or its share
+         * (`0..100`) of the row total (`'rowPercent'`), column total (`'columnPercent'`), or grand total
+         * (`'totalPercent'`). Returns null when the cell or its reference total is missing or zero.
+         */
+        displayValue(rowNode, column) {
+            const v = this.value(rowNode, column);
+            if (this.valueMode === 'value' || typeof v !== 'number') return v;
+            const base = this.valueMode === 'rowPercent'
+                ? this.value(rowNode, { node: this.columnRoot, measure: column.measure })
+                : this.valueMode === 'columnPercent'
+                    ? this.value(this.rowRoot, column)
+                    : this.value(this.rowRoot, { node: this.columnRoot, measure: column.measure });
+            if (typeof base !== 'number' || base === 0) return null;
+            return Math.round((v / base) * 1000) / 10;
+        }
+
+        /** How a cell at `(rowNode, column)` is formatted for display in the grid. */
+        cellText(rowNode, column, nullText = '—') {
+            const row = this.cell(rowNode, column.node);
+            if (row === null) return '';
+            if (this.valueMode === 'value') return this.valueText(column.measure, this.value(rowNode, column), nullText);
+            const pct = this.displayValue(rowNode, column);
+            return pct == null ? nullText : `${pct.toFixed(1)}%`;
         }
 
         // ── Changes ───────────────────────────────────────────────────────────────
@@ -13806,14 +14507,135 @@
             this._changed();
         }
 
+        /**
+         * Expands an axis to `level` (1 = outermost dimension only, 2 = first two dimensions, etc.) by
+         * expanding collapsible members above `level` and collapsing those at or below `level`.
+         */
+        expandToLevel(axis, level) {
+            const root = axis === 'rows' ? this.rowRoot : this.columnRoot;
+            this.collapsed[axis].clear();
+            const walk = (node) => {
+                for (const c of node.children.values()) {
+                    if (c.path.length >= level && this.collapsible(c)) this.collapsed[axis].add(c.key);
+                    walk(c);
+                }
+            };
+            walk(root);
+            this._changed();
+        }
+
+        /** Sets how cell values are shown: `'value'`, `'rowPercent'`, `'columnPercent'`, or `'totalPercent'`. */
+        setValueMode(mode) {
+            this.valueMode = ['rowPercent', 'columnPercent', 'totalPercent'].includes(mode) ? mode : 'value';
+            this._changed();
+        }
+
+        /**
+         * Sets the summary / aggregation function for cube cells:
+         * `'sum'`, `'count'`, `'avg'`, `'median'`, `'min'`, `'max'`, or `'stddev'`.
+         */
+        setAggregation(mode) {
+            this.aggregation = PivotView.AGGREGATIONS.some(a => a.key === mode) ? mode : 'sum';
+            this._changed();
+        }
+
         /** Rows become columns and columns rows. */
         swapAxes() {
             [this.rowAxis, this.columnAxis] = [this.columnAxis, this.rowAxis];
             this.collapsed = { rows: this.collapsed.columns, columns: this.collapsed.rows };
+            this.rowSort = null;
+            this.topN = null;
             this._index();
             this._changed();
         }
 
+        /**
+         * Sorts row members within each level by `column` (`{ node?, columnKey?, measure }`) in `direction`
+         * ('asc', 'desc', or null to clear).
+         */
+        sortRowsBy(column, direction = 'desc') {
+            if (!direction || !column) {
+                this.rowSort = null;
+            } else {
+                const columnKey = column.columnKey ?? column.node?.key ?? this.columnRoot.key;
+                const measure = column.measure ?? this.measures[0];
+                this.rowSort = { columnKey, measure, direction };
+            }
+            this._changed();
+        }
+
+        /** Clears any row sort, returning row members to their data order. */
+        clearRowSort() {
+            this.rowSort = null;
+            this._changed();
+        }
+
+        /**
+         * Filters sibling row members at each level to the top (`direction = 'desc'`) or bottom
+         * (`direction = 'asc'`) `count` members by `measure` / `column`. Pass `count <= 0` or `null` to clear.
+         */
+        setTopN(count, { column = null, columnKey = null, measure = null, direction = 'desc' } = {}) {
+            if (!count || count <= 0) {
+                this.topN = null;
+            } else {
+                this.topN = {
+                    count: Math.floor(count),
+                    columnKey: columnKey ?? column?.columnKey ?? column?.node?.key ?? this.columnRoot.key,
+                    measure: measure ?? column?.measure ?? this.measures[0],
+                    direction: direction === 'asc' ? 'asc' : 'desc',
+                };
+            }
+            this._changed();
+        }
+
+        /** Clears any Top-N / Bottom-N row filter, showing all row members again. */
+        clearTopN() {
+            this.topN = null;
+            this._changed();
+        }
+
+        /**
+         * Adds or updates a post-rollup derived formula measure (`{ name, formula, params? }`), evaluated at
+         * every detail, subtotal, and grand-total cell via `compileFormula`.
+         */
+        addDerivedMeasure({ name, formula, params = {} }) {
+            if (!name || !formula) return;
+            this.derivedMeasures.set(name, PivotView._compileDerived({ name, formula, params }));
+            if (!this.allMeasures.includes(name)) this.allMeasures.push(name);
+            if (!this.measures.includes(name)) this.measures.push(name);
+            this._changed();
+        }
+
+        /** Removes a derived formula measure by name. */
+        removeDerivedMeasure(name) {
+            if (!this.derivedMeasures.has(name)) return;
+            this.derivedMeasures.delete(name);
+            this.allMeasures = this.allMeasures.filter(m => m !== name);
+            const next = this.measures.filter(m => m !== name);
+            this.measures = next.length > 0 ? next : [...this.allMeasures];
+            this._changed();
+        }
+
+        /** Shows or hides a measure (`allMeasures` holds every available measure; at least one stays visible). */
+        toggleMeasure(measure) {
+            if (!this.allMeasures.includes(measure)) return;
+            if (this.measures.includes(measure)) {
+                if (this.measures.length <= 1) return;
+                this.measures = this.measures.filter(m => m !== measure);
+            } else {
+                this.measures = this.allMeasures.filter(m => this.measures.includes(m) || m === measure);
+            }
+            this._changed();
+        }
+
+        /** Sets the visible measures (kept in `allMeasures` order; ignored if none match). */
+        setMeasures(measures) {
+            const next = this.allMeasures.filter(m => measures.includes(m));
+            if (next.length === 0) return;
+            this.measures = next;
+            this._changed();
+        }
+
         _changed() {
             this.onChange?.(this);
             for (const listener of this._listeners) listener(this);
@@ -13996,22 +14818,83 @@
             const names = columns.map(seriesName);
             const rows = rowNodes.map((node, r) => Object.fromEntries([
                 [category, rowLabels[r]],
-                ...columns.map((c, i) => [names[i], this.value(node, c)]),
+                ...columns.map((c, i) => [names[i], this.displayValue(node, c)]),
             ]));
             const hint = (name) => (this._options.columns ?? []).find(c => c.name === name) ?? {};
             const depths = new Set(rowNodes.map(n => n.path.length));
             const innermost = depths.size === 1 ? this.rowAxis[[...depths][0] - 1] : null;
             const measureOf = (c) => hint(c.measure).measure ?? null;
+            const primaryMeasure = this.measures[0] ?? null;
+            const totalCol = this.columnRoot.hasCells && primaryMeasure ? { node: this.columnRoot, measure: primaryMeasure } : null;
+            const rowTotals = totalCol
+                ? rowNodes.map((node, r) => ({ label: rowLabels[r], value: this.displayValue(node, totalCol) })).filter(d => d.value != null)
+                : null;
             return {
                 rows,
                 columns: [
                     { name: category, kind: hint(innermost).kind === 'time' ? 'time' : 'categorical' },
                     ...columns.map((c, i) => ({ name: names[i], kind: 'numeric', measure: measureOf(c) })),
                 ],
-                // Members not broken down further cover the whole answer between them, unless rows went unplaced.
-                complete: this.unplaced === 0,
+                // Members not broken down further cover the whole answer between them, unless rows went unplaced or Top-N filtered.
+                complete: this.unplaced === 0 && !this.topN,
                 members: new Map(rowNodes.map((node, r) => [rowLabels[r], node])),
+                columnMembers: new Map(columns.map((c, i) => [names[i], c.node])),
+                rowTotals,
+                primaryMeasure: primaryMeasure ? { name: primaryMeasure, measure: measureOf({ measure: primaryMeasure }) } : null,
+                hierarchy: this.hierarchyData(),
+            };
+        }
+
+        /**
+         * The row-axis member tree shaped for hierarchical charts (`treemap`, `sunburst`, `outline`, `icicle`):
+         * `Array<{ label, value?, children? }>`, using the single column/measure showing (or the row totals
+         * column when multiple column members are showing) when the measure is additive and all values are
+         * non-negative, or null when hierarchical part-of-whole does not fit.
+         */
+        hierarchyData() {
+            if (this.unplaced > 0 || this.topN || this.rowAxis.length < 1) return null;
+            const columns = this.visibleColumns().filter(c => !c.total && (this.columnAxis.length === 0 || c.node.path.length > 0));
+            const col = columns.length === 1
+                ? columns[0]
+                : (columns.length > 1 && this.columnRoot.hasCells && this.measures.length > 0
+                    ? { node: this.columnRoot, measure: this.measures[0] }
+                    : null);
+            if (!col) return null;
+            const hint = (this._options.columns ?? []).find(c => c.name === col.measure) ?? {};
+            if (hint.measure !== 'additive') return null;
+            const allNodes = [];
+            const collect = (node) => {
+                for (const child of node.children.values()) {
+                    allNodes.push(child);
+                    if (!this.isCollapsed('rows', child)) collect(child);
+                }
+            };
+            collect(this.rowRoot);
+            if (allNodes.length === 0) return null;
+            const labelMap = new Map(allNodes.map((n, i) => [n, PivotView._labels(allNodes)[i]]));
+            let hasDeep = false;
+            let negative = false;
+            const build = (parent) => {
+                const list = [];
+                for (const child of parent.children.values()) {
+                    const label = labelMap.get(child) ?? PivotView.label(child);
+                    if (child.children.size > 0 && !this.isCollapsed('rows', child)) {
+                        const children = build(child);
+                        if (children.length > 0) {
+                            hasDeep = true;
+                            list.push({ label, children });
+                        }
+                    } else {
+                        const v = this.value(child, col);
+                        if (typeof v === 'number' && v < 0) negative = true;
+                        if (typeof v === 'number' && v > 0) list.push({ label, value: v });
+                    }
+                }
+                return list;
             };
+            const tree = build(this.rowRoot);
+            if (negative || tree.length === 0 || (!hasDeep && this.rowAxis.length < 2)) return null;
+            return { tree, members: new Map(allNodes.map(n => [labelMap.get(n) ?? PivotView.label(n), n])), measure: col.measure };
         }
 
         /** Each member's label; its path (` › `) only where two members' labels would read the same. */
@@ -14024,19 +14907,33 @@
         }
 
         /**
-         * A click on a charted member (ChartBlox): a collapsed member expands; a member at the row axis's
-         * finest level drills down (the host's, through onDrill). Says which it did, or null.
+         * A click on a charted member (ChartBlox): a collapsed member expands; a member at the axis's
+         * finest level drills down (the host's, through onDrill). `axis` defaults to `'rows'`, or if a
+         * row label does not match and `series` is given, tries `'columns'`. Says which it did, or null.
          */
-        drillFrom(label) {
-            const node = this.chartData().members.get(label);
-            if (!node || node.path.length === 0) return null;
-            if (this.isCollapsed('rows', node)) {
-                this.toggle('rows', node);
-                return 'expanded';
+        drillFrom(label, series = null) {
+            const data = this.chartData();
+            const rowNode = data.members.get(label) ?? data.hierarchy?.members.get(label);
+            if (rowNode && rowNode.path.length > 0) {
+                if (this.isCollapsed('rows', rowNode)) {
+                    this.toggle('rows', rowNode);
+                    return 'expanded';
+                }
+                if (rowNode.path.length === this.rowAxis.length && this.onDrill) {
+                    this.onDrill({ axis: 'rows', dimension: this.rowAxis.at(-1), direction: 'down', member: rowNode.path });
+                    return 'drilled';
+                }
             }
-            if (node.path.length === this.rowAxis.length && this.onDrill) {
-                this.onDrill({ axis: 'rows', dimension: this.rowAxis.at(-1), direction: 'down', member: node.path });
-                return 'drilled';
+            const colNode = series ? data.columnMembers.get(series) : data.columnMembers.get(label);
+            if (colNode && colNode.path.length > 0) {
+                if (this.isCollapsed('columns', colNode)) {
+                    this.toggle('columns', colNode);
+                    return 'expanded';
+                }
+                if (colNode.path.length === this.columnAxis.length && this.onDrill) {
+                    this.onDrill({ axis: 'columns', dimension: this.columnAxis.at(-1), direction: 'down', member: colNode.path });
+                    return 'drilled';
+                }
             }
             return null;
         }
@@ -14068,12 +14965,26 @@
                 }
             }
             items.push(...this._memberFilterItems(dimension, node));
+            if (axis === 'columns') items.push(...this._columnSortItems(node));
             items.push({ separator: true },
                 { label: `Expand all ${axis}`, action: () => this.collapseAll(axis, false) },
                 { label: `Collapse all ${axis}`, action: () => this.collapseAll(axis, true) });
             return [...items, ...this._extra('member', { axis, node, dimension })];
         }
 
+        _columnSortItems(node) {
+            if (this.rowAxis.length === 0 || !node.hasCells) return [];
+            const measure = this.measures[0];
+            const active = this.rowSort?.columnKey === node.key && this.rowSort?.measure === measure ? this.rowSort.direction : null;
+            const label = PivotView.label(node);
+            return [
+                { separator: true },
+                { label: `Sort rows by ${label} descending${active === 'desc' ? ' ✓' : ''}`, action: () => this.sortRowsBy({ node, measure }, 'desc') },
+                { label: `Sort rows by ${label} ascending${active === 'asc' ? ' ✓' : ''}`, action: () => this.sortRowsBy({ node, measure }, 'asc') },
+                ...(this.rowSort ? [{ label: 'Clear row sort', action: () => this.clearRowSort() }] : []),
+            ];
+        }
+
         // ── Traffic lights ─────────────────────────────────────────────────────────
 
         static LIGHTS = { low: '#f6d3cf', mid: '#fbe7b0', high: '#d3ebd4' };
@@ -14162,7 +15073,13 @@
          * collapsed on each axis, and the traffic lights. The layout itself is `layout()`.
          */
         displayState() {
-            return { collapsed: { rows: [...this.collapsed.rows], columns: [...this.collapsed.columns] }, lights: this.lights };
+            const state = { collapsed: { rows: [...this.collapsed.rows], columns: [...this.collapsed.columns] }, lights: this.lights };
+            if (this.rowSort) state.rowSort = { ...this.rowSort };
+            if (this.topN) state.topN = { ...this.topN };
+            if (this.allMeasures.length > 1 && this.measures.length < this.allMeasures.length) state.measures = [...this.measures];
+            if (this.valueMode !== 'value') state.valueMode = this.valueMode;
+            if (this.aggregation !== 'sum') state.aggregation = this.aggregation;
+            return state;
         }
 
         /**
@@ -14173,6 +15090,16 @@
             this.collapsed = { rows: new Set(state.collapsed?.rows ?? []), columns: new Set(state.collapsed?.columns ?? []) };
             const lights = state.lights ?? null;
             this.lights = ['thirds-high', 'thirds-low'].includes(lights) || (lights === 'rules' && this.lightRules) ? lights : null;
+            this.rowSort = state.rowSort && ['asc', 'desc'].includes(state.rowSort.direction) ? { ...state.rowSort } : null;
+            this.topN = state.topN && state.topN.count > 0 && ['asc', 'desc'].includes(state.topN.direction) ? { ...state.topN } : null;
+            if (Array.isArray(state.measures)) {
+                const kept = this.allMeasures.filter(m => state.measures.includes(m));
+                if (kept.length > 0) this.measures = kept;
+            } else {
+                this.measures = [...this.allMeasures];
+            }
+            this.valueMode = ['rowPercent', 'columnPercent', 'totalPercent'].includes(state.valueMode) ? state.valueMode : 'value';
+            this.aggregation = PivotView.AGGREGATIONS.some(a => a.key === state.aggregation) ? state.aggregation : 'sum';
             this._changed();
         }
 
@@ -14222,12 +15149,81 @@
             return items.length === 0 ? extra.slice(1) : [...items, ...extra];
         }
 
-        /** The grid's menu: swap the axes, expand or collapse everything, traffic lights, copy the grid. */
+        /** The grid's menu: swap the axes, expand or collapse everything, traffic lights, measures, sort, copy the grid. */
         gridMenu() {
             const light = (label, mode) => ({ label: label + (this.lights === mode ? ' ✓' : ''), action: () => this.setLights(mode) });
+            const measureItems = this.allMeasures.length > 1 ? [{
+                label: 'Measures',
+                items: this.allMeasures.map(m => ({
+                    label: `${m}${this.measures.includes(m) ? ' ✓' : ''}`,
+                    disabled: this.measures.length === 1 && this.measures[0] === m,
+                    action: () => this.toggleMeasure(m),
+                })),
+            }] : [];
+            const sortItems = this.rowAxis.length > 0 && this.rowRoot.children.size > 1 && this.columnRoot.hasCells ? [{
+                label: 'Sort rows',
+                items: [
+                    ...this.measures.flatMap(m => [
+                        {
+                            label: `By ${this.measures.length > 1 ? m + ' total' : 'total'} — highest first${this.rowSort?.columnKey === this.columnRoot.key && this.rowSort?.measure === m && this.rowSort?.direction === 'desc' ? ' ✓' : ''}`,
+                            action: () => this.sortRowsBy({ node: this.columnRoot, measure: m }, 'desc'),
+                        },
+                        {
+                            label: `By ${this.measures.length > 1 ? m + ' total' : 'total'} — lowest first${this.rowSort?.columnKey === this.columnRoot.key && this.rowSort?.measure === m && this.rowSort?.direction === 'asc' ? ' ✓' : ''}`,
+                            action: () => this.sortRowsBy({ node: this.columnRoot, measure: m }, 'asc'),
+                        },
+                    ]),
+                    ...(this.rowSort ? [{ separator: true }, { label: 'Default order', action: () => this.clearRowSort() }] : []),
+                ],
+            }] : [];
+            const topNChoice = (count, direction, label) => {
+                const m = this.measures[0];
+                const active = this.topN?.count === count && this.topN?.direction === direction && this.topN?.measure === m;
+                return {
+                    label: `${label}${active ? ' ✓' : ''}`,
+                    action: () => this.setTopN(count, { node: this.columnRoot, measure: m, direction }),
+                };
+            };
+            const topNItems = this.rowAxis.length > 0 && this.rowRoot.children.size > 1 && this.columnRoot.hasCells ? [{
+                label: 'Top / Bottom N',
+                items: [
+                    topNChoice(3, 'desc', 'Top 3'),
+                    topNChoice(5, 'desc', 'Top 5'),
+                    topNChoice(10, 'desc', 'Top 10'),
+                    { separator: true },
+                    topNChoice(3, 'asc', 'Bottom 3'),
+                    topNChoice(5, 'asc', 'Bottom 5'),
+                    ...(this.topN ? [{ separator: true }, { label: 'Show all rows', action: () => this.clearTopN() }] : []),
+                ],
+            }] : [];
+            const aggregationItems = (this.rowRoot.hasCells || this.columnRoot.hasCells) ? [{
+                label: 'Summary (Count / Avg / Median)',
+                items: PivotView.AGGREGATIONS.map(a => ({
+                    label: `${a.label}${this.aggregation === a.key ? ' ✓' : ''}`,
+                    action: () => this.setAggregation(a.key),
+                })),
+            }] : [];
+            const valueModeChoice = (label, mode) => ({
+                label: `${label}${this.valueMode === mode ? ' ✓' : ''}`,
+                action: () => this.setValueMode(mode),
+            });
+            const valueModeItems = (this.rowRoot.hasCells || this.columnRoot.hasCells) ? [{
+                label: 'Show values as',
+                items: [
+                    valueModeChoice('Values', 'value'),
+                    ...(this.columnAxis.length > 0 && this.columnRoot.hasCells ? [valueModeChoice('% of row total', 'rowPercent')] : []),
+                    ...(this.rowAxis.length > 0 && this.rowRoot.hasCells ? [valueModeChoice('% of column total', 'columnPercent')] : []),
+                    ...(this.rowRoot.hasCells && this.columnRoot.hasCells ? [valueModeChoice('% of grand total', 'totalPercent')] : []),
+                ],
+            }] : [];
             return [
                 { label: 'Swap rows and columns', action: () => this.swapAxes() },
                 { label: 'Expand all', action: () => { this.collapsed.rows.clear(); this.collapsed.columns.clear(); this._changed(); } },
+                ...sortItems,
+                ...topNItems,
+                ...measureItems,
+                ...aggregationItems,
+                ...valueModeItems,
                 {
                     label: 'Traffic lights',
                     items: [
@@ -14369,7 +15365,7 @@
                     const lit = view.cellFill(node, c, cuts);
                     if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
                     const row = view.cell(node, c.node);
-                    const text = row === null ? '' : view.valueText(c.measure, row[c.measure], nullText);
+                    const text = view.cellText ? view.cellText(node, c, nullText) : (row === null ? '' : view.valueText(c.measure, row[c.measure], nullText));
                     const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
                     // A cell with a value opens its menu (drill-through) where the host gives one.
                     if (row !== null && view.cellHasMenu()) {
@@ -14472,8 +15468,182 @@
 
         /** The charts that fit what the grid shows, best first. The grid itself is the table. */
         choices() {
-            const { rows, columns, complete } = this.view.chartData();
-            return this.chooser.choose(rows, columns, { complete }).filter(c => c.key !== 'table');
+            const chartData = this.view.chartData();
+            const { rows, columns, complete } = chartData;
+            const base = this.chooser.choose(rows, columns, { complete }).filter(c => c.key !== 'table');
+            const seen = new Set(base.map(c => c.key));
+            const extra = this._cubeChoices(chartData).filter(c => !seen.has(c.key) && this.chooser.registry.get(c.key));
+            return [...base, ...extra];
+        }
+
+        /**
+         * Additional chart types suited to a cube's hierarchy, series, and matrix structure beyond the
+         * general flat-table defaults in `ChartChooser`.
+         */
+        _cubeChoices({ rows, columns, complete, hierarchy, rowTotals = null, primaryMeasure = null }) {
+            if (!rows || rows.length === 0) return [];
+            const categories = columns.filter(c => c.kind !== 'numeric');
+            const numbers = columns.filter(c => c.kind === 'numeric');
+            if (categories.length !== 1 || numbers.length === 0) return [];
+            const category = categories[0];
+            const add = (key, reason, data, options) => ({
+                key,
+                label: this.chooser.registry.get(key)?.label ?? key,
+                reason,
+                data,
+                ...(options ? { options } : {}),
+            });
+            const out = [];
+
+            if (numbers.length === 1) {
+                const number = numbers[0];
+                const points = rows.filter(r => r[number.name] != null).map(r => ({
+                    label: String(r[category.name]),
+                    value: r[number.name],
+                }));
+                if (points.length < 2) return out;
+                this._addSingleSeriesChoices(out, add, category, number, points, complete, hierarchy, false);
+                return out;
+            }
+
+            // Multi-series (2+ numeric series from column-axis members or multiple measures).
+            const gaps = rows.some(r => numbers.some(n => r[n.name] == null));
+            if (gaps) return out;
+
+            const names = numbers.map(n => n.name).join(', ');
+            const seriesData = numbers.map(n => ({
+                name: n.name,
+                values: rows.map(r => ({ label: String(r[category.name]), value: r[n.name] })),
+            }));
+            const allNonNeg = rows.every(r => numbers.every(n => r[n.name] >= 0));
+            const additiveNonNeg = allNonNeg && numbers.every(n => n.measure !== 'semi-additive' && n.measure !== 'non-additive');
+
+            if (additiveNonNeg) {
+                out.push(add('stackedBar', `${names} stacked for each ${category.name}`, seriesData));
+                out.push(add('marimekko', `${names} share and total across ${category.name}, as a Marimekko mosaic`, seriesData));
+            }
+            out.push(add('lollipop', `${names} for each ${category.name}, as stems and dots`, seriesData));
+            if (allNonNeg && rows.length >= 2) {
+                out.push(add('area', `${names} across ${category.name}, filled`, seriesData));
+            }
+            if (additiveNonNeg && rows.length >= 2) {
+                out.push(add('stackedArea', `${names} stacked across ${category.name}`, seriesData));
+                out.push(add('streamGraph', `${names} flowing across ${category.name}`, seriesData));
+            }
+            if (allNonNeg && rows.length >= 2) {
+                out.push(add('pipe', `${names} tapering across ${category.name}`, seriesData.map(s => ({
+                    name: s.name,
+                    values: s.values.map(v => ({ label: v.label, value: v.value, metric: v.value })),
+                }))));
+            }
+            const heatData = rows.flatMap(r => numbers.map(n => ({
+                x: String(r[category.name]),
+                y: n.name,
+                value: r[n.name],
+            })));
+            out.push(add('heatmap', `${names} for each ${category.name}, as a colour grid`, heatData));
+            if (allNonNeg && rows.length >= 3 && rows.length <= 12) {
+                out.push(add('radar', `${names} across ${category.name} axes`, seriesData.map(s => ({
+                    name: s.name,
+                    values: s.values.map(v => ({ axis: v.label, value: v.value })),
+                }))));
+            }
+            if (rows.length >= 2) {
+                out.push(add('parallelCoordinates', `${names} across parallel axes for each ${category.name}`,
+                    rows.map(r => ({
+                        label: String(r[category.name]),
+                        category: String(r[category.name]),
+                        ...Object.fromEntries(numbers.map(n => [n.name, r[n.name]])),
+                    })),
+                    { dimensions: numbers.map(n => n.name) }));
+                if (allNonNeg) {
+                    out.push(add('populationPyramid', `${numbers[0].name} vs ${numbers[1].name} for each ${category.name}`,
+                        rows.map(r => ({ label: String(r[category.name]), left: r[numbers[0].name], right: r[numbers[1].name] })),
+                        { leftLabel: numbers[0].name, rightLabel: numbers[1].name, showValues: true }));
+                    const flowLinks = rows.flatMap(r => numbers
+                        .filter(n => r[n.name] > 0)
+                        .map(n => ({ source: String(r[category.name]), target: n.name, value: r[n.name] })));
+                    if (flowLinks.length > 0) {
+                        out.push(add('sankey', `flow from ${category.name} to ${names}`, { links: flowLinks }));
+                        out.push(add('chord', `chords between ${category.name} and ${names}`, { links: flowLinks }));
+                    }
+                }
+                if (rows.length >= 3) {
+                    const distData = numbers.map(n => ({ label: n.name, values: rows.map(r => r[n.name]) }));
+                    out.push(add('boxPlot', `distribution of ${category.name} values for each of ${names}`, distData));
+                    out.push(add('density', `density curve of ${category.name} values for each of ${names}`, distData));
+                    out.push(add('violin', `violin distribution of ${category.name} values for each of ${names}`, distData));
+                }
+                out.push(add('scatter', `${numbers[0].name} against ${numbers[1].name} for each ${category.name}`,
+                    rows.map(r => ({ x: r[numbers[0].name], y: r[numbers[1].name], label: String(r[category.name]) }))));
+                if (numbers.length >= 3 || (rowTotals && rowTotals.length === rows.length)) {
+                    out.push(add('bubble', `${numbers[0].name} and ${numbers[1].name} sized by ${numbers[2]?.name ?? (primaryMeasure?.name || 'Total')}`,
+                        rows.map((r, idx) => ({
+                            x: r[numbers[0].name],
+                            y: r[numbers[1].name],
+                            z: Math.max(1, numbers[2] ? r[numbers[2].name] : rowTotals[idx].value),
+                            label: String(r[category.name]),
+                        }))));
+                }
+            }
+            if (allNonNeg) {
+                out.push(add('bar3DOrbit', `${names} for each ${category.name}, in 3D`,
+                    rows.flatMap(r => numbers.map(n => ({ x: String(r[category.name]), z: n.name, value: r[n.name] })))));
+            }
+            if (additiveNonNeg) {
+                out.push(add('stackedBar3DOrbit', `${names} stacked for each ${category.name}, in 3D`,
+                    rows.map(r => ({ x: String(r[category.name]), z: category.name, values: numbers.map(n => r[n.name]) })),
+                    { seriesLabels: numbers.map(n => n.name) }));
+            }
+            if (rowTotals && rowTotals.length >= 2 && primaryMeasure) {
+                this._addSingleSeriesChoices(out, add, category, primaryMeasure, rowTotals, complete, hierarchy, true);
+            }
+            return out;
+        }
+
+        _addSingleSeriesChoices(out, add, category, number, points, complete, hierarchy, includeBase = false) {
+            const nonNeg = points.every(d => d.value >= 0);
+            if (includeBase) {
+                out.push(add('bar', `total ${number.name} for each ${category.name}`, points));
+                if (nonNeg && complete && number.measure === 'additive' && points.length <= 8) {
+                    out.push(add('pie', `share of total ${number.name} across ${category.name}`, points));
+                    out.push(add('donut', `share of total ${number.name} across ${category.name}, as a ring`, points));
+                }
+            }
+            if (hierarchy) {
+                out.push(add('treemap', `${number.name} across the ${category.name} hierarchy`, hierarchy.tree));
+                out.push(add('sunburst', `${number.name} across the ${category.name} hierarchy, in rings`, hierarchy.tree));
+                out.push(add('icicle', `${number.name} across the ${category.name} hierarchy, as an icicle partition`, hierarchy.tree));
+                out.push(add('outline', `${number.name} across the ${category.name} hierarchy, as an outline`, hierarchy.tree));
+            }
+            if (number.measure === 'additive') {
+                out.push(add('waterfall', `how each ${category.name} adds to ${number.name}`, points));
+                if (nonNeg && complete) {
+                    out.push(add('pareto', `cumulative share of ${number.name} across ${category.name}`, points));
+                }
+            }
+            if (!includeBase) {
+                out.push(add('lollipop', `${number.name} for each ${category.name}, as stems and dots`, points));
+                if (nonNeg && points.length >= 2) {
+                    out.push(add('pipe', `${number.name} tapering across ${category.name}`,
+                        points.map(d => ({ label: d.label, value: d.value, metric: d.value }))));
+                }
+            }
+            if (nonNeg && points.length <= 12) {
+                out.push(add('funnel', `${number.name} across ${category.name} stages`, points));
+                out.push(add('radialBar', `${number.name} for each ${category.name}, around a circle`, points));
+                if (!includeBase && points.length >= 3) {
+                    out.push(add('radar', `${number.name} across ${category.name} axes`, points.map(d => ({ axis: d.label, value: d.value }))));
+                }
+                out.push(add('wordCloud', `${category.name} sized by ${number.name}`, points.map(d => ({ text: d.label, value: d.value }))));
+                out.push(add('bar3D', `${number.name} for each ${category.name}, in 3D`, points));
+            }
+            if (points.length >= 3) {
+                const sample = points.map(d => d.value);
+                out.push(add('histogram', `frequency distribution of ${number.name} across ${category.name}`, sample));
+                out.push(add('qq', `normal Q-Q plot of ${number.name} across ${category.name}`, sample));
+                out.push(add('lag', `lag-1 autocorrelation of ${number.name} across ${category.name}`, sample));
+            }
         }
 
         /** The chart to draw: the one asked for while it still fits, else the best; null when none fits. */
@@ -14482,20 +15652,826 @@
             return choices.find(c => c.key === this.type) ?? choices[0] ?? null;
         }
 
-        /** The chart's menu: "Chart as" each chart that fits, the one showing ticked. */
-        menu(redraw) {
+        /** Sets the preferred chart type key (e.g. `'stackedBar'`, `'line'`, `'bar'`, `'pareto'`) and redraws if attached. */
+        setType(type) {
+            this.type = type;
+            this.redraw?.();
+            return this.chosen();
+        }
+
+        /** The chart's menu: "Chart as" each chart that fits (plus quick top-level items), the one showing ticked. */
+        menu(redraw = () => this.redraw?.()) {
             const current = this.chosen()?.key;
-            return [{
-                label: 'Chart as',
-                items: this.choices().map(c => ({
-                    label: `${c.label}${c.key === current ? ' ✓' : ''}`,
-                    action: () => { this.type = c.key; redraw(); },
-                })),
-            }];
+            const all = this.choices();
+            const toItem = (c) => ({
+                label: `${c.label}${c.key === current ? ' ✓' : ''}`,
+                action: () => { this.type = c.key; redraw(); },
+            });
+            const quickKeys = new Set([
+                'groupedBar', 'stackedBar', 'bar', 'line', 'area', 'stackedArea',
+                'pareto', 'waterfall', 'marimekko', 'lollipop', 'heatmap', 'radar',
+                'treemap', 'sunburst', 'icicle', 'sankey', 'pie', 'donut',
+            ]);
+            const quickItems = all.filter(c => quickKeys.has(c.key)).map(toItem);
+            return [
+                {
+                    label: 'Chart as',
+                    items: all.map(toItem),
+                },
+                ...(quickItems.length > 0 ? [{ separator: true }, ...quickItems] : []),
+            ];
         }
 
-        /** A click on a charted value: drill the grid at its member. */
-        click(datum) { return this.view.drillFrom(datum.label); }
+        /** A click on a charted value: drill the grid at its member (or its series' column member). */
+        click(datum) { return this.view.drillFrom(datum.label, datum.series ?? null); }
+    }
+
+    /**
+     * AskView — the state and next-word prediction model for an interactive "Ask" bar
+     * (question input, scrollable predictive typeahead list with semantic sense/reference/relation
+     * badges, keyboard navigation, and configurable next-word prediction), kept apart from DOM
+     * rendering so all of it can be unit-tested under Node.js without a browser.
+     *
+     * A host can supply its own `suggest(text, view)` callback (for example, semanticengine's
+     * `(text) => engine.suggest(text, { sampler: (dim) => engine.members(dim) })`), or pass
+     * declarative vocabulary hints (`measures`, `dimensions`, `members`, `vocabulary`,
+     * `sampleQuestions`) to use `AskView.nextWordPredictor(...)`.
+     */
+    class AskView {
+        /** Default choices for how many predicted next-word items are visible at once in the scrollable list (`0` = Off). */
+        static DEFAULT_PREDICT_CHOICES = [0, 3, 5, 8, 10];
+
+        /**
+         * @param {object} [options]
+         * @param {string} [options.value=''] initial question text
+         * @param {function} [options.suggest] `(text, view) => Array<string|{display, completion?, sense?, reference?, relation?, kind?}>`, or a promise of one
+         * @param {string[]} [options.measures] measure names for built-in next-word prediction
+         * @param {string[]} [options.dimensions] dimension names for built-in next-word prediction
+         * @param {function|object} [options.members] `(dimension) => Array<string|number>` or `{ dim: [...] }` for value prediction after `=`
+         * @param {Array<string|{display, completion?, sense?, reference?, relation?, kind?}>} [options.vocabulary] custom vocabulary entries
+         * @param {string[]} [options.sampleQuestions] sample questions used both as clickable pills and to learn next-word transitions
+         * @param {boolean} [options.predict=true] whether next-word prediction is initially enabled
+         * @param {number} [options.visibleCount=5] how many items are visible at once in the scrollable suggestion viewport
+         * @param {number[]} [options.predictChoices=[0, 3, 5, 8, 10]] configurable choices for the predict-next-word selector (`0` = Off)
+         * @param {number} [options.maxSuggestions=50] maximum number of suggestions kept in the scrollable list
+         * @param {function} [options.onAsk] `(question, view) => *` called when the user submits the question
+         * @param {function} [options.onComplete] `(item, view) => void` called when a suggestion is accepted
+         * @param {function} [options.onChange] `(view) => void` called whenever view state changes
+         */
+        constructor(options = {}) {
+            this.value = options.value ?? '';
+            this.samples = [...(options.sampleQuestions ?? options.samples ?? [])];
+            this.predictChoices = Array.isArray(options.predictChoices) && options.predictChoices.length > 0
+                ? [...options.predictChoices]
+                : [...AskView.DEFAULT_PREDICT_CHOICES];
+            const initialVisible = Number.isFinite(options.visibleCount) && options.visibleCount > 0 ? Math.floor(options.visibleCount) : 5;
+            this.visibleCount = initialVisible;
+            this.predict = options.predict !== false && options.visibleCount !== 0;
+            if (this.predict && !this.predictChoices.includes(this.visibleCount)) {
+                this.predictChoices = [...new Set([...this.predictChoices, this.visibleCount])].sort((a, b) => a - b);
+            }
+            this.maxSuggestions = Number.isFinite(options.maxSuggestions) && options.maxSuggestions > 0
+                ? Math.floor(options.maxSuggestions)
+                : 50;
+            this.suggestFn = typeof options.suggest === 'function'
+                ? options.suggest
+                : AskView.nextWordPredictor({
+                    measures: options.measures,
+                    dimensions: options.dimensions,
+                    members: options.members,
+                    vocabulary: options.vocabulary,
+                    sampleQuestions: this.samples,
+                });
+            this.onAsk = options.onAsk ?? null;
+            this.onComplete = options.onComplete ?? null;
+            this.onChange = options.onChange ?? null;
+            this.items = [];
+            this.selectedIndex = -1;
+            this.open = false;
+            this.history = [];
+            this._ticket = 0;
+        }
+
+        /**
+         * Current predict-next-word setting as a single number (`0` when Off, else `visibleCount`),
+         * matching `predictChoices`.
+         */
+        get predictCount() {
+            return this.predict ? this.visibleCount : 0;
+        }
+
+        /**
+         * Enables or disables next-word prediction, or sets how many items show at once in the
+         * scrollable list (`0` or `false` turns prediction off; a positive integer enables it with
+         * that viewport size).
+         */
+        setPredictCount(countOrEnabled) {
+            if (countOrEnabled === false || countOrEnabled === 0 || countOrEnabled === '0' || countOrEnabled === 'off') {
+                this.predict = false;
+                this.items = [];
+                this.selectedIndex = -1;
+                this.open = false;
+                this._changed();
+                return;
+            }
+            if (countOrEnabled === true) {
+                this.predict = true;
+                if (this.visibleCount <= 0) this.visibleCount = 5;
+            } else {
+                const n = Number(countOrEnabled);
+                if (Number.isFinite(n) && n > 0) {
+                    this.predict = true;
+                    this.visibleCount = Math.floor(n);
+                }
+            }
+            this.refresh();
+        }
+
+        /** Updates the input text and refreshes next-word predictions if enabled. */
+        setInput(text, { suggest = true } = {}) {
+            this.value = String(text ?? '');
+            if (suggest && this.predict) {
+                return this.refresh();
+            } else {
+                if (!suggest) {
+                    this.open = false;
+                    this.selectedIndex = -1;
+                }
+                this._changed();
+            }
+        }
+
+        /**
+         * Swaps the source of suggestions (a host whose vocabulary changed — another model or
+         * ontology) and refreshes the list.
+         */
+        setSuggest(suggest) {
+            this.suggestFn = typeof suggest === 'function' ? suggest : null;
+            this.refresh();
+        }
+
+        /**
+         * Recomputes suggestions for the current `value` and opens the list if any match. Nothing is
+         * selected until the user moves into the list, so Enter asks the question as typed.
+         *
+         * `suggest` may answer with a promise (an engine still loading, a server's vocabulary): the
+         * list keeps what it shows until it settles, and an answer for text since changed is dropped.
+         * Returns the items, or a promise of them.
+         */
+        refresh() {
+            const ticket = ++this._ticket;
+            if (!this.predict || !this.suggestFn) {
+                this._apply([]);
+                return this.items;
+            }
+            let raw;
+            try {
+                raw = this.suggestFn(this.value, this);
+            } catch {
+                this._apply([]);
+                return this.items;
+            }
+            if (raw && typeof raw.then === 'function') {
+                const asked = this.value;
+                return Promise.resolve(raw).then(
+                    (items) => (ticket === this._ticket && asked === this.value ? this._apply(items) : this.items),
+                    () => (ticket === this._ticket ? this._apply([]) : this.items),
+                );
+            }
+            return this._apply(raw);
+        }
+
+        /** Shows `raw` suggestions (anything not a list shows none). */
+        _apply(raw) {
+            this.items = Array.isArray(raw)
+                ? raw.slice(0, this.maxSuggestions).map((item) => AskView.normalizeItem(item, this.value))
+                : [];
+            this.selectedIndex = -1;
+            this.open = this.items.length > 0;
+            this._changed();
+            return this.items;
+        }
+
+        /**
+         * Moves the active highlight up (`-1`) or down (`+1`) in the scrollable list, wrapping around.
+         * From no selection, down goes to the first item and up to the last.
+         */
+        move(delta) {
+            if (!this.open || this.items.length === 0) {
+                this.refresh();
+                return this.selectedIndex;
+            }
+            const len = this.items.length;
+            this.selectedIndex = this.selectedIndex < 0
+                ? (delta > 0 ? 0 : len - 1)
+                : (this.selectedIndex + delta + len) % len;
+            this._changed();
+            return this.selectedIndex;
+        }
+
+        /**
+         * Applies the suggestion at `index` (defaults to `selectedIndex`, or `0`), replacing `value`
+         * with `item.completion` and immediately predicting the next word.
+         */
+        accept(index = this.selectedIndex >= 0 ? this.selectedIndex : 0) {
+            if (index < 0 || index >= this.items.length) return null;
+            const item = this.items[index];
+            this.value = item.completion;
+            this.onComplete?.(item, this);
+            if (this.predict) {
+                this.refresh();
+            } else {
+                this.close();
+            }
+            return item;
+        }
+
+        /** Closes the suggestion popup without changing `value`. */
+        close() {
+            if (!this.open && this.selectedIndex === -1) return;
+            this.open = false;
+            this.selectedIndex = -1;
+            this._changed();
+        }
+
+        /** Submits the current question (`value`), closes the suggestion list, and invokes `onAsk`. */
+        submit(question = this.value) {
+            this.value = String(question ?? '');
+            this.open = false;
+            this.selectedIndex = -1;
+            const trimmed = this.value.trim();
+            if (trimmed && this.history.at(-1) !== trimmed) {
+                this.history.push(trimmed);
+            }
+            this._changed();
+            return this.onAsk?.(this.value, this);
+        }
+
+        _changed() {
+            this.onChange?.(this);
+        }
+
+        /** Normalizes a string or suggestion object into `{ display, completion, sense, reference, relation, kind }`. */
+        static normalizeItem(item, currentText = '') {
+            if (typeof item === 'string') {
+                return {
+                    display: item,
+                    completion: AskView._completeWord(currentText, item),
+                    sense: null,
+                    reference: null,
+                    relation: null,
+                    kind: 'suggestion',
+                };
+            }
+            const display = String(item.display ?? item.word ?? item.label ?? item.completion ?? '');
+            const completion = item.completion !== undefined
+                ? String(item.completion)
+                : AskView._completeWord(currentText, display);
+            return {
+                display,
+                completion,
+                sense: item.sense ?? null,
+                reference: item.reference ?? null,
+                relation: item.relation ?? null,
+                kind: item.kind ?? 'suggestion',
+            };
+        }
+
+        /** Replaces the trailing partial token of `currentText` with `word` (followed by a space). */
+        static _completeWord(currentText, word) {
+            const text = String(currentText ?? '');
+            if (word.includes(' ') && word.toLowerCase().startsWith(text.trim().toLowerCase()) && text.trim().length > 0) {
+                return word;
+            }
+            const match = text.match(/^(.*?)(\S*)$/);
+            const prefix = match ? match[1] : '';
+            const cleanWord = String(word).trim();
+            return `${prefix}${cleanWord} `;
+        }
+
+        /**
+         * Builds a context-aware next-word predictor from declarative cube/table metadata and/or
+         * sample questions. Predicts metrics, dimensions, clauses (`by`, `and`, `where`, `top`, `vs`),
+         * sampled dimension members after `=`, and learned next-word bigrams from `sampleQuestions`.
+         */
+        static nextWordPredictor({
+            measures = [],
+            dimensions = [],
+            members = null,
+            vocabulary = [],
+            sampleQuestions = [],
+        } = {}) {
+            const catalog = [];
+            const addEntry = (display, kind, sense = null, reference = null, relation = null) => {
+                if (!display) return;
+                if (catalog.some(c => c.display.toLowerCase() === String(display).toLowerCase() && c.kind === kind)) return;
+                catalog.push({ display: String(display), kind, sense, reference, relation });
+            };
+
+            for (const m of measures) addEntry(m, 'metric', `Measure ${m}`, m, 'canonical');
+            for (const d of dimensions) addEntry(d, 'dimension', `Dimension ${d}`, d, 'canonical');
+            for (const v of vocabulary) {
+                if (typeof v === 'string') addEntry(v, 'term');
+                else addEntry(v.display ?? v.word ?? v.label, v.kind ?? 'term', v.sense ?? null, v.reference ?? null, v.relation ?? null);
+            }
+
+            const keywords = [
+                { display: 'by', kind: 'keyword', sense: 'Group or slice by dimension' },
+                { display: 'and', kind: 'keyword', sense: 'Add another measure or dimension' },
+                { display: 'where', kind: 'keyword', sense: 'Filter by dimension member' },
+                { display: 'top', kind: 'keyword', sense: 'Rank top N members' },
+                { display: '=', kind: 'operator', sense: 'Equals member value' },
+                { display: 'in', kind: 'keyword', sense: 'Match any of several members' },
+                { display: 'vs', kind: 'keyword', sense: 'Compare against another measure or period' },
+                { display: 'descending', kind: 'keyword', sense: 'Sort highest first' },
+                { display: 'ascending', kind: 'keyword', sense: 'Sort lowest first' },
+            ];
+            for (const kw of keywords) addEntry(kw.display, kw.kind, kw.sense);
+
+            // Learn next-word transitions (bigrams) from sampleQuestions.
+            const bigrams = new Map();
+            for (const q of sampleQuestions) {
+                const tokens = String(q).trim().split(/\s+/).filter(Boolean);
+                for (let i = 0; i < tokens.length - 1; i++) {
+                    const prev = tokens[i].replace(/,+$/, '').toLowerCase();
+                    const next = tokens[i + 1].replace(/,+$/, '');
+                    if (!bigrams.has(prev)) bigrams.set(prev, new Set());
+                    bigrams.get(prev).add(next);
+                    addEntry(tokens[i].replace(/,+$/, ''), 'term');
+                }
+                if (tokens.length > 0) addEntry(tokens.at(-1).replace(/,+$/, ''), 'term');
+            }
+
+            const getMembers = (dim) => {
+                if (!dim || !members) return [];
+                if (typeof members === 'function') return members(dim) ?? [];
+                const foundKey = Object.keys(members).find(k => k.toLowerCase() === dim.toLowerCase());
+                return foundKey ? members[foundKey] ?? [] : [];
+            };
+
+            return (text) => {
+                const raw = String(text ?? '');
+                const match = raw.match(/^(.*?)(\S*)$/);
+                const before = match ? match[1] : '';
+                const partial = (match ? match[2] : '').toLowerCase();
+                const priorTokens = before.trim().split(/\s+/).filter(Boolean);
+                const lastToken = (priorTokens.at(-1) ?? '').replace(/,+$/, '').toLowerCase();
+                const prevToken = (priorTokens.at(-2) ?? '').replace(/,+$/, '').toLowerCase();
+
+                const results = [];
+                const push = (entry, bonus = 0) => {
+                    const word = String(entry.display);
+                    if (partial && !word.toLowerCase().startsWith(partial)) return;
+                    if (results.some(r => r.display.toLowerCase() === word.toLowerCase())) return;
+                    results.push({
+                        display: word,
+                        completion: AskView._completeWord(raw, word),
+                        sense: entry.sense ?? null,
+                        reference: entry.reference ?? null,
+                        relation: entry.relation ?? null,
+                        kind: entry.kind ?? 'suggestion',
+                        _score: bonus + (word.toLowerCase() === partial ? 0 : 10),
+                    });
+                };
+
+                // 1. After `<dimension> =`, suggest sampled member values of that dimension.
+                if (lastToken === '=' && prevToken) {
+                    const dimName = dimensions.find(d => d.toLowerCase() === prevToken) ?? prevToken;
+                    for (const val of getMembers(dimName)) {
+                        push({
+                            display: String(val),
+                            kind: 'value',
+                            sense: `Member of ${dimName}`,
+                            reference: `${dimName} = ${val}`,
+                        }, 100);
+                    }
+                }
+
+                // 2. Context-sensitive grammar transitions.
+                if (!lastToken) {
+                    for (const c of catalog.filter(e => e.kind === 'metric')) push(c, 80);
+                    for (const c of catalog.filter(e => e.display === 'top')) push(c, 70);
+                    for (const c of catalog.filter(e => e.kind === 'dimension')) push(c, 60);
+                } else if (lastToken === 'by' || lastToken === 'where') {
+                    for (const c of catalog.filter(e => e.kind === 'dimension')) push(c, 90);
+                } else if (lastToken === 'and') {
+                    const inByClause = priorTokens.some(t => t.toLowerCase() === 'by');
+                    for (const c of catalog.filter(e => e.kind === (inByClause ? 'dimension' : 'metric'))) push(c, 90);
+                    for (const c of catalog.filter(e => e.kind === (inByClause ? 'metric' : 'dimension'))) push(c, 70);
+                } else if (dimensions.some(d => d.toLowerCase() === lastToken)) {
+                    const inWhere = priorTokens.some(t => t.toLowerCase() === 'where');
+                    if (inWhere) {
+                        for (const c of catalog.filter(e => e.display === '=')) push(c, 95);
+                    } else {
+                        for (const c of catalog.filter(e => ['and', 'where', 'descending', 'ascending'].includes(e.display))) push(c, 85);
+                    }
+                } else if (measures.some(m => m.toLowerCase() === lastToken)) {
+                    for (const c of catalog.filter(e => ['by', 'and', 'where', 'vs'].includes(e.display))) push(c, 90);
+                }
+
+                // 3. Learned bigram transitions from sample questions.
+                if (lastToken && bigrams.has(lastToken)) {
+                    for (const nextWord of bigrams.get(lastToken)) {
+                        const existing = catalog.find(c => c.display.toLowerCase() === nextWord.toLowerCase());
+                        push(existing ?? { display: nextWord, kind: 'next word', sense: `Follows "${lastToken}"` }, 88);
+                    }
+                }
+
+                // 4. All remaining catalog entries matching the partial prefix.
+                for (const c of catalog) push(c, 20);
+
+                return results
+                    .sort((a, b) => b._score - a._score)
+                    .map(({ _score, ...rest }) => rest);
+            };
+        }
+    }
+
+    /**
+     * AskBar — a self-contained browser UI component for asking questions with preemptive
+     * next-word prediction in a scrollable list (generalizing the Ask bar from
+     * `semanticengine/examples/browser/index.html` into a reusable RenderEngine capability).
+     *
+     * Follows the same OO encapsulation pattern as `ArchimateDiagramEditor`:
+     * - Owns DOM creation, CSS injection, event wiring, and keyboard/scroll management.
+     * - Separates pure state and prediction logic into `AskView` (`this.view`) so all logic is
+     *   DOM-free testable under Node.js.
+     * - Includes a configurable **Predict next word** selector allowing the user (or host) to
+     *   choose how many predicted items are visible at once in the scrollable list (e.g. `Off`,
+     *   `3`, `5`, `8`, `10`), while scrolling (`overflow-y: auto`) or pressing `↑`/`↓` browses
+     *   through the full list of predictions.
+     */
+    class AskBar {
+        /** Approximate height in pixels of one suggestion row in the scrollable list. */
+        static ITEM_HEIGHT = 44;
+
+        /** Numbers each bar's list, so several bars on one page each name their own (ARIA ids). */
+        static _count = 0;
+
+        /**
+         * @param {HTMLElement|string} container host element or its DOM id
+         * @param {object} [options] all `AskView` options plus UI options:
+         * @param {Document} [options.document] DOM document (defaults to `globalThis.document`)
+         * @param {string} [options.placeholder='Ask a question…'] input placeholder
+         * @param {string} [options.buttonLabel='Run'] submit button label
+         * @param {string} [options.ariaLabel='Question'] input aria-label
+         * @param {boolean} [options.showPredictControl=true] whether to show the configurable "Predict next word" selector
+         * @param {string} [options.predictLabel='Predict next word:'] label for the predict selector
+         * @param {boolean} [options.autoRun=false] whether to run `onAsk` immediately upon mounting
+         * @param {object} [options.resultEngine] optional `RenderEngine` instance whose `resultView()` displays `{ rows, columns, complete }` returned by `onAsk`
+         */
+        constructor(container, options = {}) {
+            this.options = options;
+            this.doc = options.document ?? container?.ownerDocument ?? globalThis.document ?? null;
+            this.container = typeof container === 'string'
+                ? this.doc?.getElementById?.(container) ?? null
+                : container ?? null;
+            this.resultEngine = options.resultEngine ?? null;
+
+            const userOnAsk = options.onAsk;
+            this.listId = `re-ask-list-${++AskBar._count}`;
+            this._blurTimer = null;
+            // An answer (`{ rows, columns, complete }`), or a promise of one, is shown by resultEngine.
+            const show = (res) => {
+                if (res && typeof res === 'object' && Array.isArray(res.rows) && this.resultEngine?.resultView) {
+                    this.resultEngine.resultView(res.rows, {
+                        columns: res.columns,
+                        complete: res.complete,
+                        pageSize: options.pageSize ?? 10,
+                    });
+                }
+                return res;
+            };
+            this.view = options.view instanceof AskView ? options.view : new AskView({
+                ...options,
+                onAsk: (question, view) => {
+                    const res = userOnAsk?.(question, view, this);
+                    return res && typeof res.then === 'function' ? Promise.resolve(res).then(show) : show(res);
+                },
+                onChange: (view) => {
+                    this._syncFromView();
+                    options.onChange?.(view, this);
+                },
+            });
+
+            this.root = null;
+            this.inputEl = null;
+            this.suggestEl = null;
+            this.predictSelectEl = null;
+            this.samplesEl = null;
+
+            if (this.container && this.doc) {
+                this.render();
+                if (options.autoRun && this.view.value) {
+                    this.view.submit(this.view.value);
+                }
+            }
+        }
+
+        /** Injects the component's scoped stylesheet once per document, build-free and theme-aware. */
+        static _injectStyles(doc) {
+            if (!doc?.head || doc.getElementById?.('re-ask-bar-styles')) return;
+            const style = doc.createElement('style');
+            style.id = 're-ask-bar-styles';
+            style.textContent = `
+            .re-ask-bar { display: flex; flex-direction: column; gap: 6px; font: 14px/1.45 system-ui, sans-serif; color: var(--ws-fg, var(--fg, #1d1d1f)); }
+            .re-ask-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
+            .re-ask-input-wrapper { position: relative; flex: 1 1 260px; min-width: 180px; }
+            .re-ask-input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; color: inherit; background: var(--ws-panel-bg, var(--bg, #fff)); border: 1px solid var(--ws-border, var(--line, #ccc)); border-radius: 6px; }
+            .re-ask-input:focus { outline: 2px solid var(--ws-accent, var(--accent, #2b5fd9)); outline-offset: -1px; }
+            .re-ask-submit { padding: 7px 14px; font: inherit; font-weight: 500; color: #fff; background: var(--ws-accent, var(--accent, #2b5fd9)); border: 0; border-radius: 6px; cursor: pointer; }
+            .re-ask-submit:hover { filter: brightness(1.06); }
+            .re-ask-predict-ctrl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ws-muted, var(--muted, #666)); }
+            .re-ask-predict-select { padding: 5px 7px; font: inherit; color: var(--ws-fg, var(--fg, #1d1d1f)); background: var(--ws-panel-bg, var(--bg, #fff)); border: 1px solid var(--ws-border, var(--line, #ccc)); border-radius: 5px; }
+            .re-ask-suggest-box {
+                position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 250;
+                background: var(--ws-panel-bg, var(--bg, #fff));
+                border: 1px solid var(--ws-border, var(--line, #ccc));
+                border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+                overflow-y: auto; display: flex; flex-direction: column;
+            }
+            .re-ask-suggest-box[hidden] { display: none !important; }
+            .re-ask-suggest-item {
+                display: flex; align-items: center; justify-content: space-between;
+                padding: 7px 10px; cursor: pointer; font-size: 13px; gap: 8px; user-select: none;
+                box-sizing: border-box; min-height: 36px;
+            }
+            .re-ask-suggest-item:hover, .re-ask-suggest-item.active {
+                background: var(--ws-accent, var(--accent, #2b5fd9)); color: #fff;
+            }
+            .re-ask-suggest-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+            .re-ask-suggest-text { font-family: ui-monospace, monospace; font-size: 13px; }
+            .re-ask-suggest-sense { font-size: 11px; color: var(--ws-muted, var(--muted, #6b6b70)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            .re-ask-suggest-item:hover .re-ask-suggest-sense,
+            .re-ask-suggest-item.active .re-ask-suggest-sense { color: rgba(255, 255, 255, 0.85); }
+            .re-ask-suggest-badges { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
+            .re-ask-suggest-badge {
+                font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
+                padding: 2px 6px; border-radius: 4px;
+                background: var(--ws-border, var(--line, #e0e0e4));
+                color: var(--ws-muted, var(--muted, #555)); flex-shrink: 0;
+            }
+            .re-ask-suggest-item:hover .re-ask-suggest-badge,
+            .re-ask-suggest-item.active .re-ask-suggest-badge {
+                background: rgba(255, 255, 255, 0.25); color: #fff;
+            }
+            .re-ask-samples { font-size: 12px; color: var(--ws-muted, var(--muted, #666)); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+            .re-ask-sample-pill {
+                font-family: ui-monospace, monospace; font-size: 11.5px;
+                padding: 2px 6px; border-radius: 4px; cursor: pointer;
+                background: rgba(127,127,127,0.12); border: 1px solid var(--ws-border, var(--line, #ddd));
+                color: var(--ws-fg, var(--fg, #222));
+            }
+            .re-ask-sample-pill:hover { border-color: var(--ws-accent, var(--accent, #2b5fd9)); }
+        `;
+            doc.head.appendChild(style);
+        }
+
+        /** Builds the AskBar DOM inside `this.container`. */
+        render() {
+            if (!this.container || !this.doc) return this;
+            AskBar._injectStyles(this.doc);
+
+            const root = this.doc.createElement('div');
+            root.className = 're-ask-bar';
+
+            const form = this.doc.createElement('form');
+            form.className = 're-ask-form';
+
+            const wrapper = this.doc.createElement('div');
+            wrapper.className = 're-ask-input-wrapper';
+
+            const input = this.doc.createElement('input');
+            input.className = 're-ask-input';
+            input.type = 'text';
+            input.value = this.view.value;
+            input.placeholder = this.options.placeholder ?? 'Ask a question…';
+            input.setAttribute('aria-label', this.options.ariaLabel ?? 'Question');
+            input.setAttribute('autocomplete', 'off');
+            input.setAttribute('spellcheck', 'false');
+            // A combobox over its list of completions (WAI-ARIA 1.2), so a screen reader follows ↑/↓.
+            input.setAttribute('role', 'combobox');
+            input.setAttribute('aria-autocomplete', 'list');
+            input.setAttribute('aria-controls', this.listId);
+            input.setAttribute('aria-expanded', 'false');
+
+            const suggestBox = this.doc.createElement('div');
+            suggestBox.className = 're-ask-suggest-box';
+            suggestBox.id = this.listId;
+            suggestBox.hidden = true;
+            suggestBox.setAttribute('role', 'listbox');
+            suggestBox.setAttribute('aria-label', 'Suggested completions');
+
+            wrapper.appendChild(input);
+            wrapper.appendChild(suggestBox);
+            form.appendChild(wrapper);
+
+            const submitBtn = this.doc.createElement('button');
+            submitBtn.type = 'submit';
+            submitBtn.className = 're-ask-submit';
+            submitBtn.textContent = this.options.buttonLabel ?? 'Run';
+            form.appendChild(submitBtn);
+
+            if (this.options.showPredictControl !== false) {
+                const ctrlLabel = this.doc.createElement('label');
+                ctrlLabel.className = 're-ask-predict-ctrl';
+                ctrlLabel.textContent = this.options.predictLabel ?? 'Predict next word:';
+
+                const select = this.doc.createElement('select');
+                select.className = 're-ask-predict-select';
+                select.setAttribute('aria-label', 'Predict next word in scrollable list');
+                for (const choice of this.view.predictChoices) {
+                    const n = Number(choice);
+                    const text = n <= 0 ? 'Off' : `${n} visible (scrollable)`;
+                    const opt = this.doc.createElement('option');
+                    opt.value = String(n);
+                    opt.textContent = text;
+                    if (n === this.view.predictCount) opt.selected = true;
+                    select.appendChild(opt);
+                }
+                select.addEventListener('change', () => {
+                    this.view.setPredictCount(Number(select.value));
+                });
+                ctrlLabel.appendChild(select);
+                form.appendChild(ctrlLabel);
+                this.predictSelectEl = select;
+            }
+
+            root.appendChild(form);
+
+            if (this.view.samples.length > 0) {
+                const samplesRow = this.doc.createElement('div');
+                samplesRow.className = 're-ask-samples';
+                const prefix = this.doc.createElement('span');
+                prefix.textContent = 'Try:';
+                samplesRow.appendChild(prefix);
+                for (const q of this.view.samples) {
+                    const pill = this.doc.createElement('code');
+                    pill.className = 're-ask-sample-pill';
+                    pill.textContent = q;
+                    pill.addEventListener('click', () => {
+                        this.view.submit(q);
+                    });
+                    samplesRow.appendChild(pill);
+                }
+                root.appendChild(samplesRow);
+                this.samplesEl = samplesRow;
+            }
+
+            this.root = root;
+            this.inputEl = input;
+            this.suggestEl = suggestBox;
+            this._wireEvents(form, input);
+            this.container.replaceChildren ? this.container.replaceChildren(root) : (this.container.innerHTML = '', this.container.appendChild(root));
+            this._syncFromView();
+            return this;
+        }
+
+        _wireEvents(form, input) {
+            input.addEventListener('input', () => {
+                this.view.setInput(input.value, { suggest: true });
+            });
+            input.addEventListener('focus', () => {
+                if (this.view.predict) this.view.refresh();
+            });
+            input.addEventListener('blur', () => {
+                this._blurTimer = setTimeout(() => { this._blurTimer = null; this.view.close(); }, 150);
+            });
+            input.addEventListener('keydown', (e) => {
+                if (!this.view.open || this.view.items.length === 0) {
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        this.view.refresh();
+                    }
+                    return;
+                }
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    this.view.move(1);
+                } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    this.view.move(-1);
+                } else if (e.key === 'Tab') {
+                    e.preventDefault();
+                    this.view.accept(this.view.selectedIndex >= 0 ? this.view.selectedIndex : 0);
+                    this.inputEl?.focus?.();
+                } else if (e.key === 'Enter' && this.view.selectedIndex >= 0) {
+                    e.preventDefault();
+                    this.view.accept(this.view.selectedIndex);
+                    this.inputEl?.focus?.();
+                } else if (e.key === 'Escape') {
+                    this.view.close();
+                }
+            });
+            form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                this.view.submit(input.value);
+            });
+        }
+
+        /** Swaps where suggestions come from (`AskView.setSuggest`): another model or ontology. */
+        setSuggest(suggest) {
+            this.view.setSuggest(suggest);
+            return this;
+        }
+
+        /** Sets the question shown, without suggesting. */
+        setValue(text) {
+            this.view.setInput(text, { suggest: false });
+            return this;
+        }
+
+        /** Puts the cursor in the question. */
+        focus() {
+            this.inputEl?.focus?.();
+            return this;
+        }
+
+        /** Takes the bar out of its container; a pending close is cancelled. */
+        destroy() {
+            if (this._blurTimer !== null) clearTimeout(this._blurTimer);
+            this._blurTimer = null;
+            this.root?.remove?.();
+            this.root = this.inputEl = this.suggestEl = this.predictSelectEl = this.samplesEl = null;
+        }
+
+        _syncFromView() {
+            if (!this.inputEl || !this.suggestEl) return;
+            if (this.inputEl.value !== this.view.value) {
+                this.inputEl.value = this.view.value;
+            }
+            if (this.predictSelectEl) {
+                const val = String(this.view.predictCount);
+                if (this.predictSelectEl.value !== val) this.predictSelectEl.value = val;
+            }
+
+            const active = this.view.selectedIndex;
+            if (active >= 0 && this.view.open) this.inputEl.setAttribute('aria-activedescendant', `${this.listId}-${active}`);
+            else this.inputEl.removeAttribute?.('aria-activedescendant');
+
+            if (!this.view.open || !this.view.predict || this.view.items.length === 0) {
+                this.inputEl.setAttribute('aria-expanded', 'false');
+                this.suggestEl.hidden = true;
+                if (this.suggestEl.replaceChildren) this.suggestEl.replaceChildren();
+                return;
+            }
+
+            this.suggestEl.style.maxHeight = `${Math.max(1, this.view.visibleCount) * AskBar.ITEM_HEIGHT}px`;
+            if (this.suggestEl.replaceChildren) this.suggestEl.replaceChildren();
+
+            this.view.items.forEach((item, idx) => {
+                const row = this.doc.createElement('div');
+                row.className = `re-ask-suggest-item${idx === this.view.selectedIndex ? ' active' : ''}`;
+                row.dataset.index = String(idx);
+                row.id = `${this.listId}-${idx}`;
+                row.setAttribute('role', 'option');
+                row.setAttribute('aria-selected', String(idx === this.view.selectedIndex));
+
+                const mainCol = this.doc.createElement('div');
+                mainCol.className = 're-ask-suggest-main';
+
+                const textSpan = this.doc.createElement('span');
+                textSpan.className = 're-ask-suggest-text';
+                textSpan.textContent = item.display;
+                mainCol.appendChild(textSpan);
+
+                if (item.sense) {
+                    const senseSpan = this.doc.createElement('span');
+                    senseSpan.className = 're-ask-suggest-sense';
+                    senseSpan.textContent = `${item.sense}${item.reference ? ` → ${item.reference}` : ''}`;
+                    mainCol.appendChild(senseSpan);
+                }
+
+                const badges = this.doc.createElement('div');
+                badges.className = 're-ask-suggest-badges';
+
+                if (item.relation && item.relation !== 'canonical' && item.relation !== 'function') {
+                    const relBadge = this.doc.createElement('span');
+                    relBadge.className = 're-ask-suggest-badge';
+                    relBadge.textContent = item.relation;
+                    badges.appendChild(relBadge);
+                }
+                if (item.kind) {
+                    const kindBadge = this.doc.createElement('span');
+                    kindBadge.className = 're-ask-suggest-badge';
+                    kindBadge.textContent = item.kind;
+                    badges.appendChild(kindBadge);
+                }
+
+                row.appendChild(mainCol);
+                row.appendChild(badges);
+                row.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    this.view.accept(idx);
+                    this.inputEl?.focus?.();
+                });
+                this.suggestEl.appendChild(row);
+                if (idx === this.view.selectedIndex && typeof row.scrollIntoView === 'function') {
+                    row.scrollIntoView({ block: 'nearest' });
+                }
+            });
+            this.suggestEl.hidden = false;
+            this.inputEl.setAttribute('aria-expanded', 'true');
+        }
     }
 
     /**
@@ -14517,7 +16493,7 @@
             } = options;
             const isMulti = Array.isArray(data[0]?.values);
             const series = isMulti ? data : [{ name: 'default', values: data }];
-            const axes = series[0].values.map(v => v.axis);
+            const axes = series[0].values.map(v => v.axis ?? v.label);
             const n = axes.length;
             const palette = new ColorPalette(colors);
             const axisMax = axes.map((_, ai) => Math.max(...series.map(s => s.values[ai]?.value ?? 0)) || 1);
@@ -14555,9 +16531,10 @@
                 const { r, g, b } = ColorPalette.hexToRgb(color);
                 this.renderer.path(path, `rgba(${r},${g},${b},0.25)`, { color, width: 2 }, { tooltip: s.name });
                 pts.forEach((p, i) => {
-                    this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
-                        tooltip: `${s.name} — ${s.values[i].axis}: ${s.values[i].value}`,
-                    });
+                    const axisLabel = s.values[i].axis ?? s.values[i].label;
+                    this._datum(this.renderer.circle(p.px, p.py, 3, color, { color: '#fff', width: 1 }, {
+                        tooltip: `${s.name} — ${axisLabel}: ${s.values[i].value}`,
+                    }), { label: axisLabel, series: isMulti ? s.name : null });
                 });
             });
 
@@ -14606,7 +16583,7 @@
                 const bottomRight = bottomLeft + bottomWidth;
 
                 const path = `M${topLeft},${top} L${topRight},${top} L${bottomRight},${bottom} L${bottomLeft},${bottom} Z`;
-                this.renderer.path(path, palette.colorAt(i), { color: '#fff', width: 1 }, { tooltip: `${d.label}: ${d.value}` });
+                this._datum(this.renderer.path(path, palette.colorAt(i), { color: '#fff', width: 1 }, { tooltip: `${d.label}: ${d.value}` }), { label: d.label });
                 this.renderer.text(`${d.label} (${d.value})`, x + width / 2, top + stageHeight / 2, {
                     textAnchor, verticalAlign: 'middle', fontSize: '12px', fill: '#fff', fontWeight: 'bold',
                 });
@@ -14670,9 +16647,9 @@
                 const top = toY(Math.max(band.from, band.to));
                 const bottom = toY(Math.min(band.from, band.to));
                 const color = band.isTotal ? totalColor : (band.to >= band.from ? upColor : downColor);
-                this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
+                this._datum(this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
                     tooltip: `${d.label}: ${band.isTotal ? band.to : (d.value >= 0 ? '+' : '') + d.value} (total: ${Axis.formatValue(band.to)})`,
-                });
+                }), { label: d.label });
                 if (i % labelStep === 0) this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
             });
         }
@@ -15801,12 +17778,12 @@
                 const barBaseY = y + height;
                 const color = palette.colorAt(i);
 
-                this.renderer.rect(
+                this._datum(this.renderer.rect(
                     barX, barBaseY - barHeight, barWidth, barHeight,
                     color,
                     { color: '#333', width: 1 },
                     { tooltip: `${d.label}: ${d.value}` },
-                );
+                ), { label: d.label });
 
                 // Top face
                 const topPath = `M${barX},${barBaseY - barHeight} L${barX + barWidth},${barBaseY - barHeight} L${barX + barWidth + depth},${barBaseY - barHeight - depth} L${barX + depth},${barBaseY - barHeight - depth} Z`;
@@ -15890,8 +17867,9 @@
 
         /**
          * Draw one 3D box through the orbit camera. Returns average corner depth.
+         * When `datum` is supplied (`{ label, series? }`), each face is recorded via `_datum()`.
          */
-        drawBox(renderer, x0, x1, y0, y1, z0, z1, color, toScreen) {
+        drawBox(renderer, x0, x1, y0, y1, z0, z1, color, toScreen, datum = null) {
             const camera = this.camera;
             const faceXSign = Math.sin(camera.theta) >= 0 ? 1 : -1;
             const faceZSign = Math.cos(camera.theta) >= 0 ? 1 : -1;
@@ -15905,7 +17883,8 @@
 
             const drawFace = (pts, shade) => {
                 const d = `M${pts[0].x},${pts[0].y} L${pts[1].x},${pts[1].y} L${pts[2].x},${pts[2].y} L${pts[3].x},${pts[3].y} Z`;
-                renderer.path(d, ColorPalette.lighten(color, shade), { color: '#333', width: 1 });
+                const el = renderer.path(d, ColorPalette.lighten(color, shade), { color: '#333', width: 1 });
+                if (datum) this._datum(el, datum);
             };
             drawFace(top, 0.15);
             drawFace(xSide, faceXSign > 0 ? -0.05 : -0.2);
@@ -16025,7 +18004,9 @@
             }).sort((a, b) => b.depth - a.depth);
 
             for (const bar of bars) {
-                this.drawBox(this.renderer, bar.x0, bar.x1, 0, bar.y1, bar.z0, bar.z1, bar.color, toScreen);
+                this.drawBox(this.renderer, bar.x0, bar.x1, 0, bar.y1, bar.z0, bar.z1, bar.color, toScreen, {
+                    label: bar.d.x, series: bar.d.z, x: bar.d.x, z: bar.d.z,
+                });
             }
 
             new Legend({
@@ -16076,13 +18057,16 @@
                     const segHeight = bar.d.values[j] / stackMax;
                     const y0 = yCursor, y1 = yCursor + segHeight;
                     yCursor = y1;
-                    this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen);
+                    const series = options.seriesLabels?.[j] ?? `Series ${j + 1}`;
+                    this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen, {
+                        label: bar.d.x, series, x: bar.d.x, z: bar.d.z,
+                    });
                 }
             }
 
             const maxSegments = Math.max(...data.map(d => d.values.length));
             new Legend({
-                items: Array.from({ length: maxSegments }, (_, j) => ({ label: `Series ${j + 1}`, color: palette.colorAt(j) })),
+                items: Array.from({ length: maxSegments }, (_, j) => ({ label: options.seriesLabels?.[j] ?? `Series ${j + 1}`, color: palette.colorAt(j) })),
                 x: bx + width - 100, y: by + 5, itemHeight: 18, fontSize: '11px', marker: 'circle',
             }).draw(this.renderer);
         }
@@ -16593,6 +18577,14 @@
                 const path = StreamGraphChart.areaPath(topPts, bottomPts, smooth, tension);
                 const { r, g, b: bl } = palette.hexToRgb(color);
                 this.renderer.path(path, `rgba(${r},${g},${bl},0.75)`, { color: color, width: 1 }, { tooltip: s.name });
+                if (typeof this.renderer.circle === 'function') {
+                    topPts.forEach((p, i) => {
+                        const d = s.values[i];
+                        this._datum(this.renderer.circle(p.x, p.y, 3, color, { color: '#fff', width: 1 }, {
+                            tooltip: `${isMultiline ? s.name + ': ' : ''}${d.label}: ${d.value}`,
+                        }), { label: d.label, series: isMultiline ? s.name : null });
+                    });
+                }
             });
 
             // X-axis labels.
@@ -16671,9 +18663,9 @@
                 const rOuter = innerRadius + barLen;
                 const color = d.color ?? palette.colorAt(i);
                 const path = ShapePaths.donutSlicePath(cx, cy, rOuter, innerRadius, a0, a1);
-                this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+                this._datum(this.renderer.path(path, color, { color: '#fff', width: 1 }, {
                     tooltip: `${d.label}: ${d.value}`,
-                });
+                }), { label: d.label });
 
                 // Category label around the outer track.
                 const midAngle = (a0 + a1) / 2;
@@ -16779,15 +18771,15 @@
 
                 // Left bar grows from center to the left.
                 if (leftW > 0) {
-                    this.renderer.rect(centerX - leftW, rowY, leftW, bh, leftColor, null, {
+                    this._datum(this.renderer.rect(centerX - leftW, rowY, leftW, bh, leftColor, null, {
                         tooltip: `${d.label} — ${leftLabel}: ${d.left}`,
-                    });
+                    }), { label: d.label, series: leftLabel });
                 }
                 // Right bar grows from center to the right.
                 if (rightW > 0) {
-                    this.renderer.rect(centerX, rowY, rightW, bh, rightColor, null, {
+                    this._datum(this.renderer.rect(centerX, rowY, rightW, bh, rightColor, null, {
                         tooltip: `${d.label} — ${rightLabel}: ${d.right}`,
-                    });
+                    }), { label: d.label, series: rightLabel });
                 }
 
                 // Row label centered on the axis.
@@ -16927,18 +18919,18 @@
                     const linkH = l.value * scale;
                     const path = this._linkPath(n.x + nodeWidth, outY + linkH / 2, t.x, inY + linkH / 2, linkH);
                     const { r, g, b: bl } = palette.hexToRgb(n.color);
-                    this.renderer.path(path, `rgba(${r},${g},${bl},${linkOpacity})`, null, {
+                    this._datum(this.renderer.path(path, `rgba(${r},${g},${bl},${linkOpacity})`, null, {
                         tooltip: `${n.label} → ${t.label}: ${l.value}`,
-                    });
+                    }), { label: n.label, series: t.label });
                     outY += linkH;
                 });
             });
 
             // Draw nodes.
             nodes.forEach(n => {
-                this.renderer.rect(n.x, n.y, nodeWidth, Math.max(1, n.h), n.color, null, {
+                this._datum(this.renderer.rect(n.x, n.y, nodeWidth, Math.max(1, n.h), n.color, null, {
                     tooltip: `${n.label}: ${n.value}`,
-                });
+                }), { label: n.label });
                 this.renderer.text(n.label, n.x + nodeWidth / 2, n.y - 6, {
                     textAnchor: 'middle', fontSize: '10px', fill: '#333',
                 });
@@ -17078,19 +19070,19 @@
                 const c2x = cx + (innerRadius * 0.2) * Math.cos(t.mid);
                 const c2y = cy + (innerRadius * 0.2) * Math.sin(t.mid);
                 const width = Math.max(1, (l.value / maxLink) * maxStroke);
-                this.renderer.path(`M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`, 'none', {
+                this._datum(this.renderer.path(`M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`, 'none', {
                     color: s.color, width,
                 }, {
                     tooltip: `${s.label} ↔ ${t.label}: ${l.value}`,
-                });
+                }), { label: s.label, series: t.label });
             });
 
             // Draw node arcs.
             nodes.forEach(n => {
                 const path = this._arcPath(cx, cy, radius, innerRadius, n.start, n.end);
-                this.renderer.path(path, n.color, { color: '#fff', width: 1 }, {
+                this._datum(this.renderer.path(path, n.color, { color: '#fff', width: 1 }, {
                     tooltip: `${n.label}: ${n.value}`,
-                });
+                }), { label: n.label });
 
                 // Label outside the circle.
                 const lx = cx + (radius + 16) * Math.cos(n.mid);
@@ -17180,10 +19172,10 @@
                 if (!pos) return; // Could not place; skip.
                 placed.push({ x: pos.x, y: pos.y, w: box.w, h: box.h });
                 const color = palette.colorAt(i);
-                this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
+                this._datum(this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
                     textAnchor, fontSize: `${fontSize}px`, fill: color, fontFamily,
                     tooltip: `${d.text}: ${d.value}`,
-                });
+                }), { label: d.text });
             });
         }
 
@@ -17299,11 +19291,11 @@
                     pathData += `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`;
                 });
                 const label = row.label || (hasCategories ? row.category : null);
-                this.renderer.path(pathData, 'none', {
+                this._datum(this.renderer.path(pathData, 'none', {
                     color, width: lineWidth,
                     opacity: lineOpacity,
                     tooltip: label ? `${label}: ${dimensions.map(d => `${d}=${this._fmt(row[d])}`).join(', ')}` : undefined,
-                });
+                }), { label: label ?? String(rowIndex) });
             });
 
             if (legendVisible && hasCategories) {
@@ -17535,9 +19527,12 @@
                     const cellX = x + xi * cellW;
                     const cellY = y + yi * cellH;
                     const color = v == null ? '#eee' : ColorPalette.scaleColor(colorScale, vMin, vMax, v);
-                    this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
+                    const cellRect = this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
                         tooltip: `${xc} / ${yc}: ${v ?? 'n/a'}`,
                     });
+                    if (v != null) {
+                        this._datum(cellRect, { label: yc, series: xc, x: xc, y: yc });
+                    }
                     if (showValues && v != null) {
                         this.renderer.text(Axis.formatValue(v), cellX + cellW / 2, cellY + cellH / 2, {
                             textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: ColorPalette.isDark(color) ? '#fff' : '#333',
@@ -52181,6 +54176,39 @@ ${theirs}` : theirs;
             const back = this.renderer.text('◂ Table', 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle' });
             back?.addEventListener?.('click', () => this._drawResultTable(view, options));
             if (back?.style) back.style.cursor = 'pointer';
+            const choices = view.chartChoices();
+            if (choices.length > 1) {
+                const pick = this.renderer.text(`${choice.label} ▾`, 68, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
+                const show = options.showMenu ?? ((x, y, items) => PopupMenu.show(x, y, items));
+                pick?.addEventListener?.('click', (e) => show(e.clientX, e.clientY, choices.map(c => ({
+                    label: `${c.label}${c.key === choice.key ? ' ✓' : ''}`,
+                    action: () => this._drawResultChart(view, c, options),
+                }))));
+                if (pick?.style) pick.style.cursor = 'pointer';
+            }
+        }
+
+        /**
+         * Mounts an interactive `AskBar` (question input, configurable next-word prediction in a
+         * scrollable list, semantic sense/reference/relation badges, and sample query pills) into
+         * `container` (or links `resultEngine: this` when called as `engine.askBar(container, options)`).
+         * @param {HTMLElement|string|object} containerOrOptions host container element/id, or options when mounting into `this.container`
+         * @param {object} [options] `AskBar` / `AskView` options (`suggest`, `measures`, `dimensions`, `members`, `sampleQuestions`, `visibleCount`, `predictChoices`, `onAsk`, etc.)
+         * @returns {AskBar}
+         */
+        askBar(containerOrOptions, options = {}) {
+            const isPlainOptions = containerOrOptions
+                && typeof containerOrOptions === 'object'
+                && !containerOrOptions.nodeType
+                && typeof containerOrOptions.appendChild !== 'function';
+            const container = isPlainOptions ? this.container : containerOrOptions;
+            const opts = isPlainOptions ? containerOrOptions : options;
+            return new AskBar(container, { resultEngine: this, ...opts });
+        }
+
+        /** Static helper: `RenderEngine.askBar(container, options)` constructs and mounts an `AskBar`. */
+        static askBar(container, options = {}) {
+            return new AskBar(container, options);
         }
 
         /**
@@ -52231,7 +54259,8 @@ ${theirs}` : theirs;
         pivotChart(view, options = {}) {
             if (!this.renderer) return null;
             const chart = new PivotChart(view, options);
-            chart.detach = view.listen(() => this._drawPivotChart(chart, options));
+            chart.redraw = () => this._drawPivotChart(chart, options);
+            chart.detach = view.listen(chart.redraw);
             this._drawPivotChart(chart, options);
             return chart;
         }
@@ -52242,15 +54271,19 @@ ${theirs}` : theirs;
             if (choice === null) {
                 this.renderer.clear();
                 this.renderer.text('No chart fits what the grid shows', 8, 14, { fill: '#666', fontSize: '12px', verticalAlign: 'middle' });
+                options.onDraw?.(null, chart);
                 return;
             }
             // No title unless one is given: the grid beside it says what is charted, and the link below
             // names the chart (with the chooser's reason as its tooltip).
             this.renderChartType(choice.key, choice.data, {
+                ...choice.options,
                 title: options.title,
                 legend: true,   // a series per column member: which colour is which must be said
                 onDatumClick: (datum) => chart.click(datum),
+                onNodeClick: (node) => chart.click({ label: node.label }),
             });
+            options.onDraw?.(choice, chart);
             // Which chart, and the menu to change it, drawn over the chart as resultView's "◂ Table" is.
             if (!this.renderer.supportsSceneGraph) return;
             const pick = this.renderer.text(`${choice.label} ▾`, 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle', tooltip: choice.reason });
@@ -52268,6 +54301,57 @@ ${theirs}` : theirs;
             this.fitToContainer();
         }
 
+        /**
+         * Renders an icicle chart — rectangular hierarchical partition chart (top-down bands by depth,
+         * width proportional to value within each parent's span).
+         * @param {Array<{label: string, value?: number, children?: Array}>} data
+         * @param {object} [options]
+         */
+        icicleChart(data, options = {}) {
+            if (!this.renderer) return;
+            this._chart3D = false;
+            this._chartState = { type: 'icicle', data, options };
+            this._renderChart(new IcicleChart(this.renderer, data, options));
+        }
+
+        /**
+         * Renders a Pareto chart — categories sorted descending with a cumulative percentage line (0–100%)
+         * on a right-hand axis and an 80% cutoff reference line.
+         * @param {Array<{label: string, value: number}>} data
+         * @param {object} [options]
+         */
+        paretoChart(data, options = {}) {
+            if (!this.renderer) return;
+            this._chart3D = false;
+            this._chartState = { type: 'pareto', data, options };
+            this._renderChart(new ParetoChart(this.renderer, data, options));
+        }
+
+        /**
+         * Renders a lollipop chart — stem-and-dot alternative to bars for 1D or multi-series comparisons.
+         * @param {Array<{label: string, value: number}>|Array<{name: string, values: Array<{label: string, value: number}>}>} data
+         * @param {object} [options]
+         */
+        lollipopChart(data, options = {}) {
+            if (!this.renderer) return;
+            this._chart3D = false;
+            this._chartState = { type: 'lollipop', data, options };
+            this._renderChart(new LollipopChart(this.renderer, data, options));
+        }
+
+        /**
+         * Renders a Marimekko (mosaic) chart — variable-width 100%-stacked columns where column width is
+         * proportional to each category's total and segment height is each series' share within that category.
+         * @param {Array<{name: string, values: Array<{label: string, value: number}>}>|Array<{label: string, values: number[]}>} data
+         * @param {object} [options]
+         */
+        marimekkoChart(data, options = {}) {
+            if (!this.renderer) return;
+            this._chart3D = false;
+            this._chartState = { type: 'marimekko', data, options };
+            this._renderChart(new MarimekkoChart(this.renderer, data, options));
+        }
+
         /**
          * Renders a waterfall chart — running-total bars, each floating from the
          * previous cumulative value to the new one (a "delta" bar), except
@@ -53606,6 +55690,8 @@ ${theirs}` : theirs;
     exports.ArchimateView = ArchimateView;
     exports.Arrangement = Arrangement;
     exports.ArrowMarker = ArrowMarker;
+    exports.AskBar = AskBar;
+    exports.AskView = AskView;
     exports.AssociationKind = AssociationKind;
     exports.AttributedLevel = AttributedLevel;
     exports.AzureDevOpsApi = AzureDevOpsApi;
@@ -53728,6 +55814,7 @@ ${theirs}` : theirs;
     exports.ICON_DEFS = ICON_DEFS;
     exports.ITElementType = ITElementType;
     exports.ITIconNotation = ITIconNotation;
+    exports.IcicleChart = IcicleChart;
     exports.IconSet = IconSet;
     exports.ImageSelector = ImageSelector;
     exports.ItemGroup = ItemGroup;
@@ -53742,10 +55829,12 @@ ${theirs}` : theirs;
     exports.LocalJsonStore = LocalJsonStore;
     exports.LockCommand = LockCommand;
     exports.LogicalLevel = LogicalLevel;
+    exports.LollipopChart = LollipopChart;
     exports.LowerCommand = LowerCommand;
     exports.MAX_IMAGE_PIXELS = MAX_IMAGE_PIXELS;
     exports.MODEL_ELEMENT_MIME = MODEL_ELEMENT_MIME;
     exports.ManualInputTemplate = ManualInputTemplate;
+    exports.MarimekkoChart = MarimekkoChart;
     exports.Mat4 = Mat4;
     exports.MeasuredCategory = MeasuredCategory;
     exports.MenuBar = MenuBar;
@@ -53773,6 +55862,7 @@ ${theirs}` : theirs;
     exports.PackageTemplate = PackageTemplate;
     exports.Palette = Palette;
     exports.ParallelogramTemplate = ParallelogramTemplate;
+    exports.ParetoChart = ParetoChart;
     exports.PentagonTemplate = PentagonTemplate;
     exports.PhysicalLevel = PhysicalLevel;
     exports.PivotChart = PivotChart;