@fusion.dev/helix-headless 0.198.0 → 0.199.0

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, shortNumber, spokenReading, words, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fieldOf } from '../field.js';
-import { boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, turned, } from '../view.js';
+import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, turned, } from '../view.js';
 const SERIES = 24;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
@@ -15,7 +15,9 @@ const TURNS = {
 let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.dropLines = false;
         this.groupBy = '';
+        this.noBox = false;
         this.plotLabel = '3D scatter chart';
         this.summaryLabel = '{count, plural, one {# point} other {# points}}: {x} across, {y} up, and {z} in depth.';
         this.rendered = false;
@@ -153,19 +155,25 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera);
+        const view = boxView(field.axes, this.camera, [], this.noBox);
         const places = field.points.map((point, index) => {
             const box = [
                 inBox(field.axes.x, point.x),
                 inBox(field.axes.y, point.y),
                 inBox(field.axes.z, point.z),
             ];
-            return { depth: view.depth(box), index, point, ...view.on(box) };
+            return {
+                depth: view.depth(box),
+                foot: view.on([box[0], -1, box[2]]),
+                index,
+                point,
+                ...view.on(box),
+            };
         });
         this.placed = places;
         const painted = [...places].sort((one, other) => one.depth - other.depth);
         const active = places[at];
-        const bounds = this.drag.frame(view.bounds, view.on([0, 0, 0]));
+        const bounds = this.drag.frame(this.noBox ? boundsOf(places, 0.1) : view.bounds, view.on([0, 0, 0]));
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
         part="drawing"
@@ -178,7 +186,7 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         @pointerleave=${this.onDrawingLeave}
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
-      >${drawBox(view)}${painted.map((place) => svg `<circle cx=${place.x} cy=${place.y} part="point${place.index === at ? ' point-active' : ''}" r="0.045" style="--chart-series: var(--chart-series-${(place.point.groupIndex % SERIES) + 1})"></circle>`)}${active
+      >${this.noBox ? nothing : drawBox(view)}${painted.map((place) => svg `${this.dropLines ? svg `<path d="M${shortNumber(place.x)} ${shortNumber(place.y)}L${shortNumber(place.foot.x)} ${shortNumber(place.foot.y)}" part="drop-line" style="--chart-series: var(--chart-series-${(place.point.groupIndex % SERIES) + 1})"></path>` : nothing}<circle cx=${place.x} cy=${place.y} part="point${place.index === at ? ' point-active' : ''}" r="0.045" style="--chart-series: var(--chart-series-${(place.point.groupIndex % SERIES) + 1})"></circle>`)}${active
             ? svg `<circle cx=${active.x} cy=${active.y} part="ring" r="0.085"></circle><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.x} y=${active.y}>${this.renderOwnTooltip(active.point.row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
@@ -222,9 +230,15 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
     }
 };
+__decorate([
+    property({ attribute: 'drop-lines', reflect: true, type: Boolean })
+], HelixHeadlessSpatialScatterChart.prototype, "dropLines", void 0);
 __decorate([
     property({ attribute: 'group-by' })
 ], HelixHeadlessSpatialScatterChart.prototype, "groupBy", void 0);
+__decorate([
+    property({ attribute: 'no-box', reflect: true, type: Boolean })
+], HelixHeadlessSpatialScatterChart.prototype, "noBox", void 0);
 __decorate([
     words,
     property({ attribute: 'plot-label' })

package/dist/spatial-scatter-chart/view.d.ts

@@ -25,6 +25,13 @@ export declare const SPATIAL_VIEW: Camera;
 export declare const VIEW_STEP = 15;
 /** A place in the box: across, up, and in depth, each from -1 to 1. */
 export type BoxPoint = readonly [number, number, number];
+/**
+ * How long the box is along each axis, across, up, and in depth, as a share
+ * of the cube's: `[1, 1, 1]` where a chart does not say, and less along an
+ * axis whose grid is shorter, as a bar chart of one series is a long, low
+ * row. A place in the box is still from -1 to 1 along each.
+ */
+export type BoxExtent = readonly [number, number, number];
 /** A number or a name written in the drawing, where it stands on the page. */
 export interface ViewLabel {
     /** Whether it is a measure's name, drawn stronger, rather than a tick's number. */
@@ -63,10 +70,16 @@ export declare const NAME_SIZE = 0.15;
  * the page, which `extra` adds to the bounds.
  */
 export declare const boxView: (axes: {
+    extent?: BoxExtent | undefined;
     x: PlotAxis;
     y: PlotAxis;
     z: PlotAxis;
-}, camera: Camera, extra?: readonly PagePoint[]) => BoxView;
+}, camera: Camera, extra?: readonly PagePoint[], bare?: boolean) => BoxView;
+/**
+ * The part of the page that holds `points`, `pad` beyond them on every side:
+ * the frame of a drawing with no box, which fits its readings alone.
+ */
+export declare const boundsOf: (points: readonly PagePoint[], pad: number) => BoxView['bounds'];
 /** A place on the page as a share of the bounds, from their top left, for a mark the tooltip points at. */
 export declare const shareOf: (view: BoxView, point: PagePoint) => {
     x: number;

package/dist/spatial-scatter-chart/view.js

@@ -11,10 +11,11 @@ const WIDE = 0.58;
 export const TICK_SIZE = 0.13;
 export const NAME_SIZE = 0.15;
 const LABEL_GAP = 0.06;
-export const boxView = (axes, camera, extra = []) => {
+export const boxView = (axes, camera, extra = [], bare = false) => {
     const projection = projectionOf(camera);
-    const on = ([x, y, z]) => projection.at(x, -z, y);
-    const depth = ([x, , z]) => projection.depth(x, -z);
+    const [ex, ey, ez] = axes.extent ?? [1, 1, 1];
+    const on = ([x, y, z]) => projection.at(x * ex, -z * ez, y * ey);
+    const depth = ([x, , z]) => projection.depth(x * ex, -z * ez);
     const lines = [];
     const line = (from, to) => {
         const [a, b] = [on(from), on(to)];
@@ -27,26 +28,31 @@ export const boxView = (axes, camera, extra = []) => {
             line([a, b, -1], [a, b, 1]);
         }
     }
-    for (const tick of axes.x.ticks) {
+    for (const tick of axes.x.rules ?? axes.x.ticks) {
         const x = inBox(axes.x, tick);
         line([x, -1, -1], [x, -1, 1]);
         line([x, -1, -1], [x, 1, -1]);
     }
-    for (const tick of axes.z.ticks) {
+    for (const tick of axes.z.rules ?? axes.z.ticks) {
         const z = inBox(axes.z, tick);
         line([-1, -1, z], [1, -1, z]);
         line([-1, -1, z], [-1, 1, z]);
     }
-    for (const tick of axes.y.ticks) {
+    for (const tick of axes.y.rules ?? axes.y.ticks) {
         const y = inBox(axes.y, tick);
         line([-1, y, -1], [1, y, -1]);
         line([-1, y, -1], [-1, y, 1]);
     }
     const text = (axis) => ({
         name: axis.name,
-        ticks: axis.ticks.map((tick) => ({ at: inBox(axis, tick), text: tickText(tick) })),
+        ticks: axis.ticks.map((tick, index) => ({
+            at: inBox(axis, tick),
+            text: axis.labels?.[index] ?? tickText(tick),
+        })),
     });
-    const labels = boxLabels((point) => ({ ...on(point), depth: depth(point) }), { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: LABEL_GAP, name: NAME_SIZE, tick: TICK_SIZE, wide: WIDE });
+    const labels = bare
+        ? []
+        : boxLabels((point) => ({ ...on(point), depth: depth(point) }), { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: LABEL_GAP, name: NAME_SIZE, tick: TICK_SIZE, wide: WIDE });
     const corners = [];
     for (const x of [-1, 1]) {
         for (const y of [-1, 1]) {
@@ -67,12 +73,26 @@ export const boxView = (axes, camera, extra = []) => {
     return {
         bounds: { height: Math.max(...ys) - top, width: Math.max(...xs) - left, x: left, y: top },
         depth,
-        grid: lines.join(''),
+        grid: bare ? '' : lines.join(''),
         labels,
         on,
         projection,
     };
 };
+export const boundsOf = (points, pad) => {
+    if (points.length === 0) {
+        return { height: 2 * pad, width: 2 * pad, x: -pad, y: -pad };
+    }
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    const [left, top] = [Math.min(...xs) - pad, Math.min(...ys) - pad];
+    return {
+        height: Math.max(...ys) + pad - top,
+        width: Math.max(...xs) + pad - left,
+        x: left,
+        y: top,
+    };
+};
 export const shareOf = (view, point) => ({
     x: (point.x - view.bounds.x) / view.bounds.width,
     y: (point.y - view.bounds.y) / view.bounds.height,

package/dist/spatial-surface-chart/grid.d.ts

@@ -40,6 +40,8 @@ export interface SurfaceField {
     /** The lowest and the highest reading, which every level is measured between. */
     lowest: number;
     highest: number;
+    /** The contour lines at each tick of the height inside the readings, which `contours` draws on the surface. */
+    contours: Contour[];
 }
 /**
  * Reads the table: **the first numeric column is across, the second is in
@@ -51,3 +53,23 @@ export interface SurfaceField {
 export declare const surfaceOf: (rows: readonly FieldRow[], columns: readonly number[]) => SurfaceField;
 /** How high a cell stands between the lowest and the highest reading, from 0 to 1, or undefined where it has none. */
 export declare const levelOf: (field: SurfaceField, cell: SurfaceCell) => number | undefined;
+/** A contour line's pieces at one height: each a straight segment from one place on the floor to another, in the table's own numbers. */
+export interface Contour {
+    /** The height the line runs at. */
+    level: number;
+    /** Each segment as two places, across and in depth. */
+    segments: Array<[[number, number], [number, number]]>;
+    /** The square of the grid each segment crosses, by its first corner's place in `cells`, in the order of `segments`. */
+    squares: number[];
+}
+/**
+ * The surface's contour lines at `levels`, by marching squares: in each
+ * square of the grid whose four readings are all there, a line crosses each
+ * edge whose two ends stand either side of the level, at the place along it
+ * the level falls. A square whose diagonal corners stand on the same side
+ * is read by the middle of the square, the average of its four corners, so
+ * the two lines through it never cross.
+ */
+export declare const contoursOf: (field: SurfaceField, levels: readonly number[]) => Contour[];
+/** The levels a surface's contour lines run at: its height's ticks strictly between its lowest and highest reading. */
+export declare const contourLevels: (field: SurfaceField) => number[];

package/dist/spatial-surface-chart/grid.js

@@ -24,7 +24,7 @@ export const surfaceOf = (rows, columns) => {
         const range = exact && low < high ? [low, high] : niceRange(low, high);
         return { name: nameOf(column), range, ticks: ticks(range) };
     };
-    return {
+    const field = {
         acrosses,
         axes: {
             x: axis(xAt, acrosses, true),
@@ -32,11 +32,14 @@ export const surfaceOf = (rows, columns) => {
             z: axis(zAt, depths, true),
         },
         cells,
+        contours: [],
         depths,
         highest: read.length > 0 ? Math.max(...read.map((one) => one.value)) : 0,
         lowest: read.length > 0 ? Math.min(...read.map((one) => one.value)) : 0,
         readings: read.length,
     };
+    field.contours = contoursOf(field, contourLevels(field));
+    return field;
 };
 export const levelOf = (field, cell) => {
     if (cell.value === undefined) {
@@ -45,3 +48,66 @@ export const levelOf = (field, cell) => {
     const { highest: high, lowest: low } = field;
     return high === low ? 0.5 : (cell.value - low) / (high - low);
 };
+export const contoursOf = (field, levels) => {
+    const depths = field.depths.length;
+    const value = (across, depth) => field.cells[across * depths + depth]?.value;
+    return levels.map((level) => {
+        const segments = [];
+        const squares = [];
+        for (let across = 0; across + 1 < field.acrosses.length; across++) {
+            for (let depth = 0; depth + 1 < depths; depth++) {
+                const corners = [
+                    [across, depth],
+                    [across + 1, depth],
+                    [across + 1, depth + 1],
+                    [across, depth + 1],
+                ];
+                const values = corners.map(([a, d]) => value(a, d));
+                if (values.some((one) => one === undefined)) {
+                    continue;
+                }
+                const [v0, v1, v2, v3] = values;
+                const place = (from, to) => {
+                    const [a, b] = [
+                        corners[from],
+                        corners[to],
+                    ];
+                    const [va, vb] = [values[from], values[to]];
+                    const t = vb === va ? 0.5 : (level - va) / (vb - va);
+                    const at = (i, j) => field.acrosses[i] +
+                        (field.acrosses[j] - field.acrosses[i]) * t;
+                    const deep = (i, j) => field.depths[i] +
+                        (field.depths[j] - field.depths[i]) * t;
+                    return [at(a[0], b[0]), deep(a[1], b[1])];
+                };
+                const edges = [
+                    [0, 1],
+                    [1, 2],
+                    [3, 2],
+                    [0, 3],
+                ];
+                const crossed = edges
+                    .filter(([from, to]) => values[from] >= level !== values[to] >= level)
+                    .map(([from, to]) => place(from, to));
+                const square = across * depths + depth;
+                if (crossed.length === 2) {
+                    segments.push([crossed[0], crossed[1]]);
+                    squares.push(square);
+                }
+                else if (crossed.length === 4) {
+                    const [bottom, right, top, left] = crossed;
+                    const middle = (v0 + v1 + v2 + v3) / 4 >= level;
+                    if (middle === v0 >= level) {
+                        segments.push([bottom, right], [top, left]);
+                    }
+                    else {
+                        segments.push([bottom, left], [right, top]);
+                    }
+                    squares.push(square, square);
+                }
+            }
+        }
+        return { level, segments, squares };
+    });
+};
+export const contourLevels = (field) => field.axes.y.ticks.filter((tick) => tick > field.lowest && tick < field.highest);

package/dist/spatial-surface-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { levelOf, type SurfaceCell, type SurfaceField, surfaceOf } from './grid.js';
+export { type Contour, contourLevels, contoursOf, levelOf, type SurfaceCell, type SurfaceField, surfaceOf, } from './grid.js';
 export { HelixHeadlessSpatialSurfaceChart } from './root/spatial-surface-chart-root.js';

package/dist/spatial-surface-chart/index.js

@@ -1,2 +1,2 @@
-export { levelOf, surfaceOf } from './grid.js';
+export { contourLevels, contoursOf, levelOf, surfaceOf, } from './grid.js';
 export { HelixHeadlessSpatialSurfaceChart } from './root/spatial-surface-chart-root.js';

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -71,6 +71,7 @@ declare const HelixHeadlessSpatialSurfaceChart_base: typeof HelixElement & (new
  * @event {HelixReadingPressEvent} helix-reading-press - A place was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  *
  * @csspart axis-name - A measure's name, along its edge of the box, in the chart's own drawing.
+ * @csspart contour - The pieces of one contour line that cross one square of the surface, drawn under `contours` at their height, colored along the ramp by it.
  * @csspart drawing - The chart's own drawing in SVG: the box, its grid and numbers, and the surface.
  * @csspart empty - The words when the table has no readings: the `empty` slot, falling back to `empty-text`.
  * @csspart face - One square of the surface between four readings, or a triangle where one is missing, shaded by its height and by which way it faces.
@@ -115,6 +116,19 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
      * `registerWords('de', { 'helix-spatial-surface-chart': { emptyText: 'Keine Werte' } })`.
      */
     static words: string;
+    /**
+     * Draws the surface's contour lines on it, at each tick of its height, in
+     * the ramp's colors, so its shape reads as on a map and two places at the
+     * same height read as such. A renderer draws them too.
+     */
+    contours: boolean;
+    /**
+     * Draws no box: no edges, grid, numbers, or names, so the readings stand
+     * alone and fill the plot, as a picture on a product's own page does. The
+     * table, the summary, the tooltip, and the keys still carry every value,
+     * and a renderer draws no box either.
+     */
+    noBox: boolean;
     /**
      * What the readout says for a place with no reading. `{x}` and `{z}` are
      * the place's numbers across and in depth, and `{across}` and `{depth}`
@@ -221,6 +235,12 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
      * has drawn and where none is connected.
      */
     private renderFallback;
+    /**
+     * The contour lines that cross one square of the grid, at their heights, as
+     * one path for each, drawn straight after the square's face so the faces
+     * in front of it cover them as they cover the face.
+     */
+    private renderContoursIn;
     /** The readout: the reading at the place in words, once the keys have moved to one. */
     private renderLive;
     /**

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
-import { html, nothing, svg } from 'lit';
+import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, shape, turned, } from '../../spatial-scatter-chart/view.js';
+import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, shape, turned, } from '../../spatial-scatter-chart/view.js';
 import { levelOf, surfaceOf } from '../grid.js';
 const LIGHT = (() => {
     const [x, y, z] = [-0.45, 1, 0.35];
@@ -20,6 +20,8 @@ const TURNS = {
 let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
+        this.contours = false;
+        this.noBox = false;
         this.openLabel = '{across} {x}, {depth} {z}: no reading';
         this.plotLabel = '3D surface chart';
         this.summaryLabel = '{count, plural, one {# reading} other {# readings}} of {y} over {x} and {z}, from {low} to {high}.';
@@ -160,7 +162,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera);
+        const view = boxView(field.axes, this.camera, [], this.noBox);
         const depths = field.depths.length;
         const boxed = field.cells.map((cell) => cell.value === undefined
             ? undefined
@@ -186,13 +188,14 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
                     level: corners.reduce((sum, index) => sum + (levelOf(field, field.cells[index]) ?? 0), 0) / corners.length,
                     points,
                     shade: shadeOf(points),
+                    square: here,
                 });
             }
         }
         faces.sort((one, other) => one.depth - other.depth);
         const active = places.find((place) => place.index === at);
         const row = field.cells[at]?.row;
-        const bounds = this.drag.frame(view.bounds, view.on([0, 0, 0]));
+        const bounds = this.drag.frame(this.noBox ? boundsOf(places, 0.1) : view.bounds, view.on([0, 0, 0]));
         const short = (value) => Math.round(value * 1000) / 1000;
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
@@ -206,11 +209,35 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         @pointerleave=${this.onDrawingLeave}
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}
-      >${drawBox(view)}${faces.map((face) => svg `<path d=${shape(face.points.map((point) => view.on(point)))} data-corners=${face.corners.join(' ')} part="face" style="--spatial-surface-chart-level: ${short(face.level)}; --spatial-surface-chart-shade: ${short(face.shade)}"></path>`)}${active
+      >${this.noBox ? nothing : drawBox(view)}${faces.map((face) => svg `<path d=${shape(face.points.map((point) => view.on(point)))} data-corners=${face.corners.join(' ')} part="face" style="--spatial-surface-chart-level: ${short(face.level)}; --spatial-surface-chart-shade: ${short(face.shade)}"></path>${this.contours ? this.renderContoursIn(field, face.square, view.on) : nothing}`)}${active
             ? svg `<circle cx=${active.x} cy=${active.y} part="ring" r="0.085"></circle><foreignObject height="0.001" overflow="visible" width="0.001" x=${active.x} y=${active.y}>${this.renderOwnTooltip(row)}</foreignObject>`
             : nothing}</svg>
     </div>`;
     }
+    renderContoursIn(field, square, on) {
+        const { highest, lowest } = field;
+        const short = (value) => Math.round(value * 1000) / 1000;
+        return field.contours.flatMap((contour) => {
+            const pieces = contour.segments.filter((_, at) => contour.squares[at] === square);
+            if (pieces.length === 0) {
+                return [];
+            }
+            const height = inBox(field.axes.y, contour.level);
+            const d = pieces
+                .map(([from, to]) => {
+                const [a, b] = [
+                    on([inBox(field.axes.x, from[0]), height, inBox(field.axes.z, from[1])]),
+                    on([inBox(field.axes.x, to[0]), height, inBox(field.axes.z, to[1])]),
+                ];
+                return `M${short(a.x)} ${short(a.y)}L${short(b.x)} ${short(b.y)}`;
+            })
+                .join('');
+            const level = highest === lowest ? 0.5 : (contour.level - lowest) / (highest - lowest);
+            return [
+                svg `<path d=${d} part="contour" style="--spatial-surface-chart-level: ${short(level)}"></path>`,
+            ];
+        });
+    }
     renderLive(field, at) {
         const cell = field.cells[at];
         const row = cell?.row === undefined ? undefined : this.sourceRows[cell.row];
@@ -259,6 +286,12 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSpatialSurfaceChart.prototype, "contours", void 0);
+__decorate([
+    property({ attribute: 'no-box', reflect: true, type: Boolean })
+], HelixHeadlessSpatialSurfaceChart.prototype, "noBox", void 0);
 __decorate([
     words,
     property({ attribute: 'open-label' })

package/dist/spatial-treemap/blocks.d.ts

@@ -0,0 +1,106 @@
+/**
+ * A 3D treemap's table read as blocks on a floor, each as large as its size.
+ *
+ * Kept apart from the element because it is arithmetic a picture hides: a
+ * floor not shared out in proportion makes one item look larger than another
+ * that is the same, and blocks painted in the wrong order cover the ones in
+ * front of them.
+ */
+import { type Drawn, type PagePoint, type Projection } from '@fusion.dev/helix-core';
+import { type FieldRow, type PlotAxis } from '../spatial-scatter-chart/field.js';
+import { type BoxExtent } from '../spatial-scatter-chart/view.js';
+/** A part of the floor: across from `x0` to `x1`, and in depth from `z0` to `z1`, each from -1 to 1. */
+export interface FloorArea {
+    x0: number;
+    x1: number;
+    z0: number;
+    z1: number;
+}
+/** One row drawn as a block. */
+export interface TreemapBlock {
+    /** Its part of the floor, inside its group's. */
+    area: FloorArea;
+    /** Its group, from the `group-by` column, or `''` where there is none. */
+    group: string;
+    /** Its group's place among the groups, which its color is read by. */
+    groupIndex: number;
+    /** Its height, from the second numeric column, where the table has one. */
+    height?: number | undefined;
+    /** The row's own label. */
+    label: string;
+    /** The row it was read from, counting from zero. */
+    row: number;
+    /** Its size, from the first numeric column, which its share of the floor is. */
+    size: number;
+}
+/** The table as a 3D treemap reads it. */
+export interface TreemapField {
+    /**
+     * Across and in depth, the floor, which the blocks share out and which
+     * carries no measure; up, the height, from zero.
+     */
+    axes: {
+        extent: BoxExtent;
+        x: PlotAxis;
+        y: PlotAxis;
+        z: PlotAxis;
+    };
+    /** Every block, in the table's order, which the keys walk. */
+    blocks: TreemapBlock[];
+    /** Every group, in the order its first row comes. */
+    groups: string[];
+    /** The height column's heading, or `''` where there is none. */
+    height: string;
+    /** The size column's heading. */
+    size: string;
+}
+/**
+ * The floor shared out among `sizes`, by squarified layout: in proportion to
+ * each, and as near to square as a row of them allows, so a long, thin sliver
+ * is rare and two sizes compare by area. `sizes` run from the largest down,
+ * and so does what is returned, the largest at the low corner.
+ */
+export declare const squarified: (sizes: readonly number[], within: FloorArea) => FloorArea[];
+/**
+ * Reads the table: **the first numeric column is each block's size, and the
+ * second, where there is one, its height**, and `groupBy` names a column
+ * whose text puts each block in a group. A row with no size, or a size of
+ * zero or less, has no share of the floor and is left out.
+ *
+ * The floor is shared among the groups by their totals, and each group's
+ * share among its blocks, so a group's whole area is its total. **The
+ * largest stand at the back left**, where they hide the least.
+ */
+export declare const treemapOf: (rows: readonly FieldRow[], columns: readonly number[], groupBy?: string) => TreemapField;
+/** A block as the chart's own drawing paints it. */
+export interface DrawnBlock {
+    /** Its eight corners on the page, which a drawing with no box is framed around. */
+    corners: PagePoint[];
+    drawn: Drawn;
+    /** Its footprint on the projection's floor: across from `x0` to `x1`, and back from `y0` to `y1`. */
+    floor: {
+        x0: number;
+        x1: number;
+        y0: number;
+        y1: number;
+    };
+    /** Its place in `field.blocks`. */
+    index: number;
+}
+/**
+ * Each block as a solid, seen through `projection`: on its part of the floor,
+ * from zero to its height, or as a slab where the table gives no heights. A
+ * height below zero hangs from zero.
+ */
+export declare const blocksDrawn: (field: TreemapField, projection: Projection) => DrawnBlock[];
+/**
+ * The blocks in the order to paint them, back to front.
+ *
+ * **Two blocks whose footprints do not overlap are parted by a line across or
+ * in depth**, and the camera sees the far side of that line first, so the
+ * block on it goes first. Ordering by each block's middle alone fails on a
+ * treemap, where a long block beside a small one has its middle further back
+ * though its near end stands in front. Where two lines give opposite orders,
+ * no view sees one block through the other, and neither is held first.
+ */
+export declare const paintOrder: (projection: Projection, blocks: readonly DrawnBlock[]) => DrawnBlock[];