@fusion.dev/helix-headless 0.190.0 → 0.192.0

package/custom-elements.json

@@ -152188,9 +152188,16 @@
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "name": "camera",
+              "default": "ISOMETRIC",
+              "type": {
+                "text": "Camera"
+              }
             }
           ],
-          "description": "Every reading as a prism, filling down each column of `rows` and then\nacross, as the flat heatmap does.\n\n**Columns run down to the right and rows down to the left, so the order of\nthe readings is the order to paint them in.** A prism can only cover the\nneighbors behind it, which are the one before it in its column and the one in\nthe same row of the column before, and both come earlier in the table. With\nthe axes the other way round, the newest column would stand at the back and\nevery tall reading in front of it would hide it.\n\n`footprint` is how much of its cell a prism covers along each edge, so `1`\nleaves no gap between neighbors."
+          "description": "Every reading as a prism, filling down each column of `rows` and then\nacross, as the flat heatmap does, seen from `camera`.\n\n**Columns run down to the right and rows down to the left, from the\nisometric camera, so there the order of the readings is the order to paint\nthem in.** A prism can only cover the neighbors behind it, which are the one\nbefore it in its column and the one in the same row of the column before,\nand both come earlier in the table. Turned, the order comes from how near\nthe camera each prism stands, which is `order`.\n\n`footprint` is how much of its cell a prism covers along each edge, so `1`\nleaves no gap between neighbors."
         }
       ],
       "exports": [
@@ -152250,7 +152257,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The same strip as `Heatmap`, seen from above at an angle. Each reading is a\nprism: its top face takes the cell's tone, and its height repeats the value,\nmeasured from zero against the highest reading in the table. `rows=\"7\"`\nmakes a contribution graph, with each week a column running down to the\nright.\n\n**The height says what the tone says.** Read the exact value from the tooltip\nor the table, and compare readings by tone. A tall reading at the front can\nhide a short one behind it, so the newest column stands at the front, where\nnothing covers it.\n\n**Everything else is `Heatmap`.** The table named by `for`, the tones and\nthresholds, the keys, the tooltip, the overview, `selection-mode`, and the\nevents all work as they do there. The class extends the headless heatmap,\nand its own entry point carries the drawing, so a page using only `Heatmap`\nloads none of it.\n\n**It was `helix-isometric-heatmap` until 0.189.0**, and\n`helix-headless-isometric-heatmap` in the headless tier. The old tags are\ngone, and so are the `--isometric-heatmap-*` hooks, which are\n`--spatial-heatmap-*`, and the words key, which is `helix-spatial-heatmap`.\nThe two shade hooks now take a step of lightness, such as `0.07`, where they\ntook a percentage mixed toward black. Every attribute, part, and event kept\nits name.\n\n**`flat` lays every prism down** at no height, which leaves the tones on a\nplane at the same angle.\n\n**The prisms stand on a slab**, the `base`, which reaches a little past the\ngrid, so the relief reads as one object. The `start` and `end` slots name\nthe two ends of the front edge, which is the strip's first and last column:\nthe component writes where those corners are on the `footer`, and a\nstylesheet stands each label at its corner. A renderer tells the chart where\nit draws those corners, so the labels stand at them there too, and follow\nthem as the view turns.\n\n**`gap` and `min-cell` set the smallest cell.** The drawing scales as a\nwhole, so a wider box draws larger cells and the gap grows with them. A box\ntoo narrow for every column at `min-cell` draws the newest that fit.\n\n**The drawing is SVG and holds still.** It scales with its box through its\n`viewBox`, needs no WebGL, and has no motion to pause.\n\n**A renderer can draw it in 3D instead.** Put a box for it in the\n`renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`\ndraws the prisms in it with three.js, lit, in the same tones, in a view\nthat drags round and zooms. The chart publishes its readings in `field`,\nand its own drawing stays under the renderer's, unseen, where a screen\nreader and the keys still reach it. Shift with an arrow turns the view,\nexcept under `selection-mode=\"multiple\"`, where it selects.\n\n**Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a\ncolumn, drawn down to the left, and Right to the same reading in the next\ncolumn, drawn down to the right.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode=\"multiple\"`. |\n| Shift with an arrow | Turns a renderer's view, where one is connected and `selection-mode` is not `multiple`. |\n| Escape | Puts the cell's tooltip away. |",
+          "description": "The same strip as `Heatmap`, seen from above at an angle. Each reading is a\nprism: its top face takes the cell's tone, and its height repeats the value,\nmeasured from zero against the highest reading in the table. `rows=\"7\"`\nmakes a contribution graph, with each week a column running down to the\nright.\n\n**The height says what the tone says.** Read the exact value from the tooltip\nor the table, and compare readings by tone. A tall reading at the front can\nhide a short one behind it, so the newest column stands at the front, where\nnothing covers it.\n\n**Everything else is `Heatmap`.** The table named by `for`, the tones and\nthresholds, the keys, the tooltip, the overview, `selection-mode`, and the\nevents all work as they do there. The class extends the headless heatmap,\nand its own entry point carries the drawing, so a page using only `Heatmap`\nloads none of it.\n\n**It was `helix-isometric-heatmap` until 0.190.0**, and\n`helix-headless-isometric-heatmap` in the headless tier. The old tags are\ngone, and so are the `--isometric-heatmap-*` hooks, which are\n`--spatial-heatmap-*`, and the words key, which is `helix-spatial-heatmap`.\nThe two shade hooks now take a step of lightness, such as `0.07`, where they\ntook a percentage mixed toward black. Every attribute, part, and event kept\nits name.\n\n**`flat` lays every prism down** at no height, which leaves the tones on a\nplane at the same angle.\n\n**The prisms stand on a slab**, the `base`, which reaches a little past the\ngrid, so the relief reads as one object. The `start` and `end` slots name\nthe two ends of the front edge, which is the strip's first and last column:\nthe component writes where those corners are on the `footer`, and a\nstylesheet stands each label at its corner. A renderer tells the chart where\nit draws those corners, so the labels stand at them there too, and follow\nthem as the view turns.\n\n**`gap` and `min-cell` set the smallest cell.** The drawing scales as a\nwhole, so a wider box draws larger cells and the gap grows with them. A box\ntoo narrow for every column at `min-cell` draws the newest that fit.\n\n**The drawing is SVG and holds still.** It scales with its box through its\n`viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow\nturns it a step, or tilts it, from the isometric view it starts at.\n**Under `selection-mode`, the prisms are painted back to front for the\nview, and the grid's rows and cells stand beside them in the table's\norder**, holding no drawing of their own, so a turned view paints\ncorrectly and a screen reader still reads the grid in order.\n\n**A renderer can draw it in 3D instead.** Put a box for it in the\n`renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`\ndraws the prisms in it with three.js, lit, in the same tones, in a view\nthat drags round and zooms. The chart publishes its readings in `field`,\nand its own drawing stays under the renderer's, unseen, where a screen\nreader and the keys still reach it. Shift with an arrow turns the view,\nexcept under `selection-mode=\"multiple\"`, where it selects.\n\n**Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a\ncolumn, drawn down to the left, and Right to the same reading in the next\ncolumn, drawn down to the right.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode=\"multiple\"`. |\n| Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under `selection-mode=\"multiple\"`. |\n| Escape | Puts the cell's tooltip away. |",
           "name": "HelixHeadlessSpatialHeatmap",
           "cssProperties": [
             {
@@ -152408,7 +152415,7 @@
               "name": "base-top"
             },
             {
-              "description": "One reading: a group holding its three faces.",
+              "description": "One reading drawn as a prism: a group holding the faces the view shows. Under `selection-mode` it is the picture of a grid cell, hidden from screen readers.",
               "name": "cell",
               "inheritedFrom": {
                 "name": "HelixHeadlessHeatmap",
@@ -152420,15 +152427,15 @@
               "name": "drawing"
             },
             {
-              "description": "The face of a prism toward the next row, drawn at its lower left.",
+              "description": "The side of a prism facing the light more: from the isometric view, the side toward the next row, drawn at its lower left. Left out where the view shows no side.",
               "name": "left-face"
             },
             {
-              "description": "The face of a prism toward the next column, drawn at its lower right.",
+              "description": "The side of a prism facing the light less: from the isometric view, the side toward the next column, drawn at its lower right. Left out where the view shows one side or none.",
               "name": "right-face"
             },
             {
-              "description": "A column of prisms, which a grid reads as a row, under `selection-mode`.",
+              "description": "A column of the strip, which a grid reads as a row, under `selection-mode`. It holds the column's grid cells, which draw nothing: the prisms are painted apart, in the order the view needs.",
               "name": "row",
               "inheritedFrom": {
                 "name": "HelixHeadlessHeatmap",
@@ -152794,6 +152801,16 @@
               "default": "undefined",
               "description": "The prisms drawn on the last render, which the tooltip is placed against."
             },
+            {
+              "kind": "field",
+              "name": "camera",
+              "type": {
+                "text": "Camera"
+              },
+              "privacy": "private",
+              "default": "ISOMETRIC",
+              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns."
+            },
             {
               "kind": "field",
               "name": "rendered",
@@ -152944,7 +152961,7 @@
               "name": "onTurnKeydown",
               "privacy": "private",
               "readonly": true,
-              "description": "Shift with an arrow turns a renderer's view, and moves no reading,\nexcept under `selection-mode=\"multiple\"`, where it selects a range."
+              "description": "Shift with an arrow turns the view, the chart's own drawing or a\nrenderer's, and moves no reading, except under\n`selection-mode=\"multiple\"`, where it selects a range."
             },
             {
               "kind": "field",
@@ -152982,27 +152999,9 @@
               },
               "parameters": [
                 {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "top",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "left",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "right",
+                  "name": "prism",
                   "type": {
-                    "text": "string"
+                    "text": "Prism"
                   }
                 },
                 {
@@ -153030,7 +153029,7 @@
                   }
                 }
               ],
-              "description": "One reading as a prism. The sides come first, so the top face is painted\nover the edge they share with it.\n\nUnder `selection-mode` the prism is a `gridcell` named by its row in the\ntable and saying whether it is selected, as the flat strip's cell is."
+              "description": "One reading as a prism. The sides come first, so the top face is painted\nover the edge they share with it, and a side the view does not show is\nleft out. Under `selection-mode` it is the picture of a grid cell, hidden\nfrom a screen reader, which reads the cell itself."
             },
             {
               "kind": "method",
@@ -153072,7 +153071,7 @@
             },
             {
               "kind": "method",
-              "name": "renderPrismRows",
+              "name": "renderGridRows",
               "privacy": "private",
               "return": {
                 "type": {
@@ -153081,13 +153080,25 @@
               },
               "parameters": [
                 {
-                  "name": "prisms",
+                  "name": "count",
                   "type": {
-                    "text": "SVGTemplateResult[]"
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "keys",
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                },
+                {
+                  "name": "chosen",
+                  "type": {
+                    "text": "ReadonlySet<string>"
                   }
                 }
               ],
-              "description": "The prisms as a grid's rows, one for each column of the strip, which is\nalso the order they are painted in."
+              "description": "The grid's rows, one for each column of the strip, and its cells in the\ntable's order, each named by its row and saying whether it is selected,\nas the flat strip's cell is. They hold no drawing: the prisms are painted\napart, in the order the view needs."
             },
             {
               "kind": "method",
@@ -154943,7 +154954,7 @@
           "summary": "A heatmap drawn as a relief, where each reading stands as tall as its value.",
           "helix": {
             "category": "charts",
-            "since": "0.189.0",
+            "since": "0.190.0",
             "status": "experimental",
             "documentation": "https://fusion.dev/helix/components/spatial-heatmap",
             "aliases": [
@@ -156531,7 +156542,7 @@
           "summary": "A chart that plots each row as a point in three dimensions, for data with three measures.",
           "helix": {
             "category": "charts",
-            "since": "0.189.0",
+            "since": "0.190.0",
             "status": "experimental",
             "documentation": "https://fusion.dev/helix/components/spatial-scatter-chart",
             "aliases": [
@@ -158437,7 +158448,7 @@
           "summary": "A chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others.",
           "helix": {
             "category": "charts",
-            "since": "0.189.0",
+            "since": "0.190.0",
             "status": "experimental",
             "documentation": "https://fusion.dev/helix/components/spatial-surface-chart",
             "aliases": [
@@ -209045,6 +209056,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.190.0"
+    "version": "0.192.0"
   }
 }

package/dist/spatial-heatmap/projection.d.ts

@@ -1,5 +1,5 @@
 /**
- * Where each reading of a spatial heatmap stands, in the isometric projection, as SVG path data.
+ * Where each reading of a spatial heatmap stands, seen from a camera that turns and tilts, as SVG path data.
  *
  * Kept apart from the element because it is arithmetic a picture hides: a face
  * drawn in the wrong order is covered by the prism it should cover, and a
@@ -10,30 +10,35 @@
  * the `viewBox` and a server can write it with no width to measure.
  *
  * **The projection is the one every spatial drawing shares**, `helix-core`'s,
- * seen from the isometric camera. What is here is the heatmap's own: which way
- * its columns and rows run, its prisms, and the slab under them.
+ * seen from the isometric camera until the reader turns it. What is here is the
+ * heatmap's own: which way its columns and rows run, its prisms, the slab
+ * under them, and the order to paint them in.
  */
-import { type PagePoint } from '@fusion.dev/helix-core';
+import { type Camera, type PagePoint } from '@fusion.dev/helix-core';
 /** How far across the page one step along either axis goes: the cosine of 30 degrees. */
 export declare const ACROSS: number;
 /** A point on the page, in cells. */
 export type Point = PagePoint;
-/** One reading drawn as a prism: three visible faces, as path data. */
+/**
+ * One reading drawn as a prism: the faces the camera sees, as path data. From
+ * the isometric camera, the lighter side is the one toward the next row,
+ * drawn at the lower left, and the darker the one toward the next column.
+ */
 export interface Prism {
     /** The reading's place among those drawn. */
     index: number;
-    /** The face toward the next row, drawn at the lower left. */
+    /** The side facing the light more, or `''` where the camera sees no side. */
     left: string;
     /** The middle of the top face, which is where the tooltip points. */
     peak: Point;
-    /** The face toward the next column, drawn at the lower right. */
+    /** The side facing it less, or `''` where the camera sees one side or none. */
     right: string;
     /** The face the reading's tone is painted on. */
     top: string;
 }
 /**
- * The slab the prisms stand on: its top, which is the floor, and its two
- * sides seen from the front, as path data.
+ * The slab the prisms stand on: its top, which is the floor, and the two
+ * sides the camera sees, lighter first, as path data.
  */
 export interface Base {
     left: string;
@@ -60,7 +65,12 @@ export interface Relief {
         end: Point;
         start: Point;
     } | undefined;
-    /** In the order they are painted, which is the order of the readings. */
+    /**
+     * The prisms' places in `prisms`, back to front, the order to paint them
+     * in. From the isometric camera it is the order of the readings.
+     */
+    order: number[];
+    /** In the order of the readings. */
     prisms: Prism[];
 }
 /** How far the slab reaches past the grid on every side, in cells. */
@@ -81,16 +91,16 @@ export declare const heightsOf: (values: readonly (number | undefined)[], highes
 export declare const highestOf: (values: readonly (number | undefined)[]) => number;
 /**
  * Every reading as a prism, filling down each column of `rows` and then
- * across, as the flat heatmap does.
+ * across, as the flat heatmap does, seen from `camera`.
  *
- * **Columns run down to the right and rows down to the left, so the order of
- * the readings is the order to paint them in.** A prism can only cover the
- * neighbors behind it, which are the one before it in its column and the one in
- * the same row of the column before, and both come earlier in the table. With
- * the axes the other way round, the newest column would stand at the back and
- * every tall reading in front of it would hide it.
+ * **Columns run down to the right and rows down to the left, from the
+ * isometric camera, so there the order of the readings is the order to paint
+ * them in.** A prism can only cover the neighbors behind it, which are the one
+ * before it in its column and the one in the same row of the column before,
+ * and both come earlier in the table. Turned, the order comes from how near
+ * the camera each prism stands, which is `order`.
  *
  * `footprint` is how much of its cell a prism covers along each edge, so `1`
  * leaves no gap between neighbors.
  */
-export declare const reliefOf: (heights: readonly number[], rows: number, footprint: number) => Relief;
+export declare const reliefOf: (heights: readonly number[], rows: number, footprint: number, camera?: Camera) => Relief;

package/dist/spatial-heatmap/projection.js

@@ -1,4 +1,4 @@
-import { ISOMETRIC, pathData, projectionOf } from '@fusion.dev/helix-core';
+import { depthOrder, ISOMETRIC, pathData, projectionOf, solid, } from '@fusion.dev/helix-core';
 export const ACROSS = Math.sqrt(3) / 2;
 export const MARGIN = 0.3;
 export const THICKNESS = 0.25;
@@ -6,69 +6,97 @@ export const heightsOf = (values, highest, tallest) => values.map((value) => hig
     ? (Math.min(value, highest) / highest) * tallest
     : 0);
 export const highestOf = (values) => values.reduce((high, value) => (value !== undefined && value > high ? value : high), 0);
-const isometric = projectionOf(ISOMETRIC);
-const at = (column, row, height) => isometric.at(column, -row, height);
-const path = pathData;
-export const reliefOf = (heights, rows, footprint) => {
+const floor = (column, row) => ({ x: column, y: -row });
+const boxFaces = (projection, low, high, bottom, top) => {
+    const at = (x, y, z) => projection.at(x, y, z);
+    const corners = [
+        [low.x, low.y],
+        [high.x, low.y],
+        [high.x, high.y],
+        [low.x, high.y],
+    ];
+    const outward = [
+        [0, -1],
+        [1, 0],
+        [0, 1],
+        [-1, 0],
+    ];
+    const sides = [];
+    corners.forEach(([x, y], index) => {
+        const [nx, ny] = outward[index];
+        if (nx * projection.toward[0] + ny * projection.toward[1] <= 1e-6) {
+            return;
+        }
+        const [x2, y2] = corners[(index + 1) % 4];
+        sides.push({
+            d: pathData([at(x, y, top), at(x2, y2, top), at(x2, y2, bottom), at(x, y, bottom)]),
+            light: nx * projection.across[0] + ny * projection.across[1],
+        });
+    });
+    sides.sort((one, other) => one.light - other.light);
+    const points = corners.flatMap(([x, y]) => [at(x, y, top), at(x, y, bottom)]);
+    return {
+        points,
+        sides: sides.map((side) => side.d),
+        top: pathData(corners.map(([x, y]) => at(x, y, top))),
+    };
+};
+export const reliefOf = (heights, rows, footprint, camera = ISOMETRIC) => {
+    const projection = projectionOf(camera);
     const count = Math.max(1, Math.floor(rows) || 1);
-    const inset = (1 - Math.min(1, Math.max(0, footprint))) / 2;
-    let left = Number.POSITIVE_INFINITY;
-    let right = Number.NEGATIVE_INFINITY;
-    let top = Number.POSITIVE_INFINITY;
-    let bottom = Number.NEGATIVE_INFINITY;
-    const prisms = heights.map((height, index) => {
+    const width = Math.min(1, Math.max(0, footprint));
+    const points = [];
+    const places = heights.map((height, index) => {
         const column = Math.floor(index / count);
         const row = index % count;
-        const near = column + inset;
-        const far = column + 1 - inset;
-        const start = row + inset;
-        const end = row + 1 - inset;
-        const back = at(near, start, height);
-        const across = at(far, start, height);
-        const front = at(far, end, height);
-        const down = at(near, end, height);
-        const acrossFloor = at(far, start, 0);
-        const frontFloor = at(far, end, 0);
-        const downFloor = at(near, end, 0);
-        left = Math.min(left, down.x);
-        right = Math.max(right, across.x);
-        top = Math.min(top, back.y);
-        bottom = Math.max(bottom, frontFloor.y);
+        return { height, index, ...floor(column + 0.5, row + 0.5) };
+    });
+    const prisms = places.map(({ height, index, x, y }) => {
+        const drawn = solid(projection, 'block', x, y, width, height);
+        const sides = drawn.faces.slice(0, -1).sort((one, other) => one.darken - other.darken);
+        const half = width / 2;
+        for (const corner of [
+            [x - half, y - half],
+            [x + half, y - half],
+            [x + half, y + half],
+            [x - half, y + half],
+        ]) {
+            points.push(projection.at(corner[0], corner[1], 0), projection.at(corner[0], corner[1], height));
+        }
         return {
             index,
-            left: path([down, front, frontFloor, downFloor]),
-            peak: at(column + 0.5, row + 0.5, height),
-            right: path([front, across, acrossFloor, frontFloor]),
-            top: path([back, across, front, down]),
+            left: sides[0]?.d ?? '',
+            peak: drawn.peak,
+            right: sides[1]?.d ?? '',
+            top: drawn.faces.at(-1)?.d ?? '',
         };
     });
     if (prisms.length === 0) {
-        return { base: undefined, box: { height: 0, width: 0, x: 0, y: 0 }, corners: undefined, prisms };
+        return {
+            base: undefined,
+            box: { height: 0, width: 0, x: 0, y: 0 },
+            corners: undefined,
+            order: [],
+            prisms,
+        };
     }
     const columns = Math.ceil(heights.length / count);
     const deep = Math.min(count, heights.length);
-    const [first, last] = [-MARGIN, columns + MARGIN];
-    const [near, far] = [-MARGIN, deep + MARGIN];
-    const back = at(first, near, 0);
-    const across = at(last, near, 0);
-    const front = at(last, far, 0);
-    const down = at(first, far, 0);
-    const acrossFoot = at(last, near, -THICKNESS);
-    const frontFoot = at(last, far, -THICKNESS);
-    const downFoot = at(first, far, -THICKNESS);
-    const base = {
-        left: path([down, front, frontFoot, downFoot]),
-        right: path([front, across, acrossFoot, frontFoot]),
-        top: path([back, across, front, down]),
-    };
-    left = Math.min(left, downFoot.x);
-    right = Math.max(right, acrossFoot.x);
-    top = Math.min(top, back.y);
-    bottom = Math.max(bottom, frontFoot.y);
+    const [low, high] = [floor(-MARGIN, deep + MARGIN), floor(columns + MARGIN, -MARGIN)];
+    const slab = boxFaces(projection, low, high, -THICKNESS, 0);
+    const base = { left: slab.sides[0] ?? '', right: slab.sides[1] ?? '', top: slab.top };
+    points.push(...slab.points);
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    const [left, top] = [Math.min(...xs), Math.min(...ys)];
     return {
         base,
-        box: { height: bottom - top, width: right - left, x: left, y: top },
-        corners: { end: frontFoot, start: downFoot },
+        box: { height: Math.max(...ys) - top, width: Math.max(...xs) - left, x: left, y: top },
+        corners: {
+            end: projection.at(columns + MARGIN, -(deep + MARGIN), -THICKNESS),
+            start: projection.at(-MARGIN, -(deep + MARGIN), -THICKNESS),
+        },
+        order: depthOrder(projection, places).map((place) => place.index),
         prisms,
     };
 };

package/dist/spatial-heatmap/root/spatial-heatmap-root.d.ts

@@ -22,7 +22,7 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  * and its own entry point carries the drawing, so a page using only `Heatmap`
  * loads none of it.
  *
- * **It was `helix-isometric-heatmap` until 0.189.0**, and
+ * **It was `helix-isometric-heatmap` until 0.190.0**, and
  * `helix-headless-isometric-heatmap` in the headless tier. The old tags are
  * gone, and so are the `--isometric-heatmap-*` hooks, which are
  * `--spatial-heatmap-*`, and the words key, which is `helix-spatial-heatmap`.
@@ -46,7 +46,12 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  * too narrow for every column at `min-cell` draws the newest that fit.
  *
  * **The drawing is SVG and holds still.** It scales with its box through its
- * `viewBox`, needs no WebGL, and has no motion to pause.
+ * `viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow
+ * turns it a step, or tilts it, from the isometric view it starts at.
+ * **Under `selection-mode`, the prisms are painted back to front for the
+ * view, and the grid's rows and cells stand beside them in the table's
+ * order**, holding no drawing of their own, so a turned view paints
+ * correctly and a screen reader still reads the grid in order.
  *
  * **A renderer can draw it in 3D instead.** Put a box for it in the
  * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`
@@ -69,10 +74,10 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
  * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
  * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
- * | Shift with an arrow | Turns a renderer's view, where one is connected and `selection-mode` is not `multiple`. |
+ * | Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under `selection-mode="multiple"`. |
  * | Escape | Puts the cell's tooltip away. |
  *
- * @since 0.189.0
+ * @since 0.190.0
  * @status experimental
  * @category charts
  * @aliases Isometric heatmap, Isometric chart, 3D heatmap, Relief chart, Isometric contribution graph
@@ -87,11 +92,11 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  * @csspart base-left - The slab's side toward the viewer at the lower left, under the strip's last row.
  * @csspart base-right - The slab's side toward the viewer at the lower right, under the newest column.
  * @csspart base-top - The slab's top, which is the floor the prisms stand on.
- * @csspart cell - One reading: a group holding its three faces.
+ * @csspart cell - One reading drawn as a prism: a group holding the faces the view shows. Under `selection-mode` it is the picture of a grid cell, hidden from screen readers.
  * @csspart drawing - The SVG every prism is drawn in. It is mirrored on a right-to-left page.
- * @csspart left-face - The face of a prism toward the next row, drawn at its lower left.
- * @csspart right-face - The face of a prism toward the next column, drawn at its lower right.
- * @csspart row - A column of prisms, which a grid reads as a row, under `selection-mode`.
+ * @csspart left-face - The side of a prism facing the light more: from the isometric view, the side toward the next row, drawn at its lower left. Left out where the view shows no side.
+ * @csspart right-face - The side of a prism facing the light less: from the isometric view, the side toward the next column, drawn at its lower right. Left out where the view shows one side or none.
+ * @csspart row - A column of the strip, which a grid reads as a row, under `selection-mode`. It holds the column's grid cells, which draw nothing: the prisms are painted apart, in the order the view needs.
  * @csspart strip - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart top-face - The top of a prism, which carries the reading's tone.
  *
@@ -122,6 +127,8 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
     relief: number;
     /** The prisms drawn on the last render, which the tooltip is placed against. */
     private shown;
+    /** Where the chart's own drawing is seen from, which Shift with an arrow turns. */
+    private camera;
     /** Whether a renderer has drawn the relief, which its own drawing then stays under. */
     private rendered;
     /** Where the renderer draws the reading, which the tooltip points at. */
@@ -187,8 +194,9 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
     } | undefined): void;
     protected updated(changed: PropertyValues): void;
     /**
-     * Shift with an arrow turns a renderer's view, and moves no reading,
-     * except under `selection-mode="multiple"`, where it selects a range.
+     * Shift with an arrow turns the view, the chart's own drawing or a
+     * renderer's, and moves no reading, except under
+     * `selection-mode="multiple"`, where it selects a range.
      */
     private readonly onTurnKeydown;
     /**
@@ -204,10 +212,9 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
     protected render(): TemplateResult;
     /**
      * One reading as a prism. The sides come first, so the top face is painted
-     * over the edge they share with it.
-     *
-     * Under `selection-mode` the prism is a `gridcell` named by its row in the
-     * table and saying whether it is selected, as the flat strip's cell is.
+     * over the edge they share with it, and a side the view does not show is
+     * left out. Under `selection-mode` it is the picture of a grid cell, hidden
+     * from a screen reader, which reads the cell itself.
      */
     private renderPrism;
     /**
@@ -222,10 +229,12 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
      */
     private cornersStyle;
     /**
-     * The prisms as a grid's rows, one for each column of the strip, which is
-     * also the order they are painted in.
+     * The grid's rows, one for each column of the strip, and its cells in the
+     * table's order, each named by its row and saying whether it is selected,
+     * as the flat strip's cell is. They hold no drawing: the prisms are painted
+     * apart, in the order the view needs.
      */
-    private renderPrismRows;
+    private renderGridRows;
     /**
      * The bubble over the top face of the reading the pointer or the keys rest
      * on, placed as a share of the drawing, which the strip's box matches.