@fusion.dev/helix 0.194.0 → 0.195.0

package/custom-elements.json

@@ -190912,7 +190912,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Each reading is a prism. The top face takes the cell's tone, and the two\nsides are the same tone, shaded darker, so the whole relief follows your\ntheme's colors.\n\n`tones=\"1 2 3 4 5\"` uses the same five-step ramp as `Heatmap`, so the tone\nand the height both show the value. Set `--spatial-heatmap-cell-size` to\nchange how large a cell may grow.",
+          "description": "Each reading is a prism. The top face takes the cell's tone, and the two\nsides are the same tone, shaded darker, so the whole relief follows your\ntheme's colors. The chart draws the relief in SVG, and\n`@fusion.dev/helix-plot` can draw it with three.js.\n\n`tones=\"1 2 3 4 5\"` uses the same five-step ramp as `Heatmap`, so the tone\nand the height both show the value. Set `--spatial-heatmap-cell-size` to\nchange how large a cell may grow.",
           "name": "HelixSpatialHeatmap",
           "cssProperties": [
             {
@@ -190932,24 +190932,16 @@
               "name": "--spatial-heatmap-selected-color"
             },
             {
-              "description": "How tall the drawing is for its width. The component writes it on the footer, and a stylesheet that stands the `start` and `end` labels at their corners reads it.",
-              "name": "--spatial-heatmap-depth",
+              "description": "Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.",
+              "name": "--spatial-heatmap-label-x",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialHeatmap",
                 "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
               }
             },
             {
-              "description": "Where the front edge ends, under the newest column, across the drawing, from 0 at its inline start to 1. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it.",
-              "name": "--spatial-heatmap-end-x",
-              "inheritedFrom": {
-                "name": "HelixHeadlessSpatialHeatmap",
-                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
-              }
-            },
-            {
-              "description": "How far down the drawing the front edge ends, under the newest column, as a share of the drawing's width: its whole depth in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it.",
-              "name": "--spatial-heatmap-end-y",
+              "description": "Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.",
+              "name": "--spatial-heatmap-label-y",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialHeatmap",
                 "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
@@ -190963,22 +190955,6 @@
                 "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
               }
             },
-            {
-              "description": "Where the front edge starts, under the first column, across the drawing, from 0 at its inline start to 1: 0 in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it.",
-              "name": "--spatial-heatmap-start-x",
-              "inheritedFrom": {
-                "name": "HelixHeadlessSpatialHeatmap",
-                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
-              }
-            },
-            {
-              "description": "How far down the drawing the front edge starts, under the first column, as a share of the drawing's width. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it.",
-              "name": "--spatial-heatmap-start-y",
-              "inheritedFrom": {
-                "name": "HelixHeadlessSpatialHeatmap",
-                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
-              }
-            },
             {
               "description": "How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.",
               "name": "--heatmap-rows",
@@ -191200,7 +191176,100 @@
               },
               "privacy": "private",
               "default": "ISOMETRIC",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns.",
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "labelSizes",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "What places the first and last labels again when one of them, or the footer, changes size.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "observeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Places the labels again whenever one of them or the footer changes size,\nas a webfont arriving after the first measure changes a label's width,\nand with it how far down the front edge reaches over it. Once the footer\nis rendered, and guarded because Lit SSR provides no `ResizeObserver`.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingMove",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingUp",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onStripUp",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A tap shows the prism under it, unless the touch was a drag, which turned the view.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialHeatmap",
+                "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onPrismOver",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A pointer passing over a prism shows it, unless it is turning the view.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialHeatmap",
                 "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
@@ -191237,7 +191306,7 @@
               "kind": "field",
               "name": "corners",
               "type": {
-                "text": "{ end: { x: number; y: number }; start: { x: number; y: number } } | undefined"
+                "text": "DrawnCorners | undefined"
               },
               "privacy": "private",
               "description": "Where the renderer draws the two ends of the front edge, which the first and last labels stand at.",
@@ -191378,13 +191447,13 @@
                 {
                   "name": "at",
                   "type": {
-                    "text": "{ end: { x: number; y: number }; start: { x: number; y: number } } | undefined"
+                    "text": "DrawnCorners | undefined"
                   }
                 }
               ],
               "description": "Says where the renderer draws the two ends of the front edge, under the\nfirst column and the last, as fractions of the strip from its top left,\nor `undefined` while they are out of view, where the labels keep the\nlast place they had. The `start` and `end` labels stand there. Called by\nthe connector.",
               "type": {
-                "text": "placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void"
+                "text": "placeCorners(at: DrawnCorners | undefined) => void"
               },
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialHeatmap",
@@ -191503,22 +191572,14 @@
             },
             {
               "kind": "method",
-              "name": "cornersStyle",
+              "name": "placeLabels",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "string | typeof nothing"
+                  "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "relief",
-                  "type": {
-                    "text": "Relief"
-                  }
-                }
-              ],
-              "description": "Where the front edge's two ends stand, for the labels that name them.\n**As shares of the drawing's width**, the one length a percentage margin\nis measured against, so a sheet places a label with no height to read.",
+              "description": "Stands the first and last labels under their ends of the front edge,\nclear of the drawing, as the page lays them out: on each label,\n`--spatial-heatmap-label-x` from the footer's inline start and\n`--spatial-heatmap-label-y` from its top, and `data-placed` once it has\na place. **Measured**, because a label is the page's type and the\ndrawing scales with its box, so neither size is known before layout.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialHeatmap",
                 "module": "src/spatial-heatmap/root/spatial-heatmap-root.ts"
@@ -192991,6 +193052,10 @@
               {
                 "description": "The same sixteen weeks drawn in 3D by three.js. Drag to turn the relief, or press Shift with an arrow.",
                 "slug": "three"
+              },
+              {
+                "description": "A full year of commits, fifty-two weeks in seven rows, each day a prism as tall as its count.",
+                "slug": "year"
               }
             ],
             "source": "helix/styled/src/spatial-heatmap"
@@ -193869,7 +193934,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The points are drawn in 3D by a renderer the page connects, and as a flat\nscatter of the first two measures until it has drawn. Each group takes a\nseries color from the theme, as every chart's series does.",
+          "description": "The chart draws the points in 3D in SVG, and `@fusion.dev/helix-plot` can\ndraw them with three.js. Each group takes a series color from the theme, as\nevery chart's series does, in both drawings.",
           "name": "HelixSpatialScatterChart",
           "cssProperties": [
             {
@@ -194306,7 +194371,19 @@
               },
               "privacy": "private",
               "default": "SPATIAL_VIEW",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns.",
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialScatterChart",
+                "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialScatterChart",
                 "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
@@ -194392,6 +194469,19 @@
                 "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "memo",
+              "type": {
+                "text": "{ field: PlotField; groupBy: string; rows: unknown } | undefined"
+              },
+              "privacy": "private",
+              "description": "The field last read, and what it was read from.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialScatterChart",
+                "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "active",
@@ -194507,6 +194597,27 @@
                 "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialScatterChart",
+                "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingCancel",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A press the browser took back, such as for a scroll, which ends a drag as a release does.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialScatterChart",
+                "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "onDrawingLeave",
@@ -194522,7 +194633,7 @@
               "name": "onDrawingTap",
               "privacy": "private",
               "readonly": true,
-              "description": "A tap is a touch reader's hover: it shows the point nearest it until a tap lands elsewhere.",
+              "description": "A tap is a touch reader's hover, unless it was a drag, which turned the\nview: it shows the point nearest it until a tap lands elsewhere.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialScatterChart",
                 "module": "src/spatial-scatter-chart/root/spatial-scatter-chart-root.ts"
@@ -195587,7 +195698,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The surface is drawn in 3D by a renderer the page connects, and as a flat\ngrid seen from above until it has drawn. Every height is shaded along one\nramp from the theme's primary color, quiet where it is low and strong where\nit is high, so the two drawings agree.",
+          "description": "The chart draws the surface in 3D in SVG, and `@fusion.dev/helix-plot` can\ndraw it with three.js. Every height is shaded along one\nramp from the theme's primary color, quiet where it is low and strong where\nit is high, so the two drawings agree.",
           "name": "HelixSpatialSurfaceChart",
           "cssProperties": [
             {
@@ -196051,7 +196162,19 @@
               },
               "privacy": "private",
               "default": "SPATIAL_VIEW",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns.",
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialSurfaceChart",
+                "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialSurfaceChart",
                 "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
@@ -196088,11 +196211,10 @@
               "kind": "field",
               "name": "last",
               "type": {
-                "text": "string"
+                "text": "SurfaceField | undefined"
               },
               "privacy": "private",
-              "default": "''",
-              "description": "The field last read, kept so a change of it can be told.",
+              "description": "The field last told, kept so a change of it can be told.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialSurfaceChart",
                 "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
@@ -196137,6 +196259,19 @@
                 "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "memo",
+              "type": {
+                "text": "{ field: SurfaceField; rows: unknown } | undefined"
+              },
+              "privacy": "private",
+              "description": "The field last read, and the rows it was read from.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialSurfaceChart",
+                "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "active",
@@ -196282,6 +196417,27 @@
                 "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialSurfaceChart",
+                "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingCancel",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A press the browser took back, such as for a scroll, which ends a drag as a release does.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessSpatialSurfaceChart",
+                "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "onDrawingLeave",
@@ -196297,7 +196453,7 @@
               "name": "onDrawingTap",
               "privacy": "private",
               "readonly": true,
-              "description": "A tap is a touch reader's hover: it shows the place nearest it until a tap lands elsewhere.",
+              "description": "A tap is a touch reader's hover, unless it was a drag, which turned the\nview: it shows the place nearest it until a tap lands elsewhere.",
               "inheritedFrom": {
                 "name": "HelixHeadlessSpatialSurfaceChart",
                 "module": "src/spatial-surface-chart/root/spatial-surface-chart-root.ts"
@@ -260656,6 +260812,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.194.0"
+    "version": "0.195.0"
   }
 }

package/dist/spatial-heatmap/root/spatial-heatmap-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"] {inset-block-start: 0;inset-inline-start: calc(var(--spatial-heatmap-start-x, 0) * 100%);margin-block-start: calc((var(--spatial-heatmap-start-y, 0) - var(--spatial-heatmap-depth, 0)) * 100% + 1lh);position: absolute;white-space: nowrap}[part="end"] {inset-block-start: 0;margin-block-start: calc((var(--spatial-heatmap-end-y, 0) - var(--spatial-heatmap-depth, 0)) * 100%);inset-inline-start: calc(var(--spatial-heatmap-end-x, 1) * 100%);position: absolute;translate: -50% 0;white-space: nowrap}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="cell"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);
+export const styles = createSheet(`:host {--_spatial-heatmap-cell: var(--spatial-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--spatial-heatmap-span, 1) * 0.866 * var(--_spatial-heatmap-cell));max-inline-size: 100%;position: relative}::slotted([slot="renderer"]) {inset: 0;position: absolute}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part~="cell"], [part~="base"] {--_spatial-heatmap-left: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-left-shade, 0.07)) c h);--_spatial-heatmap-right: oklch(from var(--_spatial-heatmap-top) calc(l - var(--spatial-heatmap-right-shade, 0.14)) c h)}[part~="cell"] {--_spatial-heatmap-top: var(--heatmap-tone, color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-surface) 60%))}[part~="base"] {--_spatial-heatmap-top: color-mix(in oklab, var(--helix-color-surface-sunken), var(--helix-color-border) 45%)}[part~="top-face"], [part~="base-top"] {--_spatial-heatmap-face: var(--_spatial-heatmap-top)}[part~="left-face"], [part~="base-left"] {--_spatial-heatmap-face: var(--_spatial-heatmap-left)}[part~="right-face"], [part~="base-right"] {--_spatial-heatmap-face: var(--_spatial-heatmap-right)}[part~="cell"] > *, [part~="base"] > * {--_spatial-heatmap-ink: oklch(from var(--_spatial-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);--_spatial-heatmap-edge: oklch(from var(--_spatial-heatmap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-heatmap-face);stroke: var(--_spatial-heatmap-edge);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--spatial-heatmap-selected-color, var(--_spatial-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_spatial-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);min-block-size: 1lh;padding-block-start: var(--helix-space-xs);position: relative}[part="start"], [part="end"] {inset-block-start: 0;position: absolute;white-space: nowrap}[part="start"] {inset-inline-start: 0}[part="end"] {inset-inline-end: 0}[part="start"][data-placed], [part="end"][data-placed] {inset-block-start: var(--spatial-heatmap-label-y);inset-inline-end: auto;inset-inline-start: var(--spatial-heatmap-label-x)}[part="summary"] {text-align: center}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="cell"] > *, [part~="base"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="base"] > * {fill: Canvas;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);

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

@@ -7,7 +7,8 @@ import '../../tooltip/index.js';
  * @description
  * Each reading is a prism. The top face takes the cell's tone, and the two
  * sides are the same tone, shaded darker, so the whole relief follows your
- * theme's colors.
+ * theme's colors. The chart draws the relief in SVG, and
+ * `@fusion.dev/helix-plot` can draw it with three.js.
  *
  * `tones="1 2 3 4 5"` uses the same five-step ramp as `Heatmap`, so the tone
  * and the height both show the value. Set `--spatial-heatmap-cell-size` to

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="point"] {fill: var(--chart-series, var(--helix-color-primary));stroke: var(--helix-color-surface-sunken);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

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

@@ -5,9 +5,9 @@ import '../../tooltip/index.js';
  * @summary A chart that plots each row as a point in three dimensions, for data with three measures.
  *
  * @description
- * The points are drawn in 3D by a renderer the page connects, and as a flat
- * scatter of the first two measures until it has drawn. Each group takes a
- * series color from the theme, as every chart's series does.
+ * The chart draws the points in 3D in SVG, and `@fusion.dev/helix-plot` can
+ * draw them with three.js. Each group takes a series color from the theme, as
+ * every chart's series does, in both drawings.
  *
  * @since 0.190.0
  * @status experimental

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-lit);stroke: var(--_spatial-surface-chart-rule);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

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

@@ -5,8 +5,8 @@ import '../../tooltip/index.js';
  * @summary A chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others.
  *
  * @description
- * The surface is drawn in 3D by a renderer the page connects, and as a flat
- * grid seen from above until it has drawn. Every height is shaded along one
+ * The chart draws the surface in 3D in SVG, and `@fusion.dev/helix-plot` can
+ * draw it with three.js. Every height is shaded along one
  * ramp from the theme's primary color, quiet where it is low and strong where
  * it is high, so the two drawings agree.
  *