@fusion.dev/helix 0.194.0 → 0.195.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.194.0",
+  "version": "0.195.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -60,14 +60,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.194.0",
-    "@fusion.dev/helix-headless": "0.194.0",
-    "@fusion.dev/helix-styles": "0.194.0",
+    "@fusion.dev/helix-core": "0.195.0",
+    "@fusion.dev/helix-headless": "0.195.0",
+    "@fusion.dev/helix-styles": "0.195.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.194.0",
-    "@fusion.dev/helix-testing": "0.194.0",
+    "@fusion.dev/helix-cem": "0.195.0",
+    "@fusion.dev/helix-testing": "0.195.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/skills/helix/SKILL.md

@@ -2,12 +2,12 @@
 name: helix
 description: Writes and checks pages built with Helix, the web components in @fusion.dev/helix. Use when building or reviewing any user interface in a project that installs @fusion.dev/helix, and when code has helix- elements, Helix tokens, or the helix command line.
 metadata:
-  version: "0.194.0"
+  version: "0.195.0"
 ---
 
 # Helix
 
-This guide is for @fusion.dev/helix 0.194.0, the version installed beside it.
+This guide is for @fusion.dev/helix 0.195.0, the version installed beside it.
 
 ## Using Helix with an agent
 

package/types/jsx.d.ts

@@ -66148,7 +66148,8 @@ export type CustomElements = {
   /**
    * 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
@@ -66382,7 +66383,7 @@ export type CustomElements = {
    * - `placeReading(at: { x: number; y: number } | undefined) => void`: Says where the renderer draws the reading, as fractions of the strip from
    * its top left, or `undefined` while it draws none. The tooltip points
    * there. Called by the connector.
-   * - `placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
+   * - `placeCorners(at: DrawnCorners | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
    * first column and the last, as fractions of the strip from its top left,
    * or `undefined` while they are out of view, where the labels keep the
    * last place they had. The `start` and `end` labels stand there. Called by
@@ -66428,12 +66429,9 @@ export type CustomElements = {
    * - `--spatial-heatmap-left-shade`: How much less light the left face is than the top, as a step of OKLCH lightness from 0 to 1. 0.07 by default.
    * - `--spatial-heatmap-right-shade`: How much less light the right face is than the top, as a step of OKLCH lightness from 0 to 1. 0.14 by default.
    * - `--spatial-heatmap-selected-color`: The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one.
-   * - `--spatial-heatmap-depth`: 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.
-   * - `--spatial-heatmap-end-x`: 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.
-   * - `--spatial-heatmap-end-y`: 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.
+   * - `--spatial-heatmap-label-x`: 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.
+   * - `--spatial-heatmap-label-y`: 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.
    * - `--spatial-heatmap-span`: How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
-   * - `--spatial-heatmap-start-x`: 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.
-   * - `--spatial-heatmap-start-y`: 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.
    * - `--heatmap-rows`: How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.
    * - `--heatmap-tone`: The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.
    * - `--heatmap-tone-1`: The weakest step of the magnitude ramp, used by `tones="1 …"`.
@@ -66510,9 +66508,9 @@ export type CustomElements = {
   >;
 
   /**
-   * 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.
    *
    * ## Attributes & Properties
    *
@@ -66744,8 +66742,8 @@ export type CustomElements = {
   >;
 
   /**
-   * 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.
    *
@@ -97103,7 +97101,8 @@ export type CustomElementsSolidJs = {
   /**
    * 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
@@ -97337,7 +97336,7 @@ export type CustomElementsSolidJs = {
    * - `placeReading(at: { x: number; y: number } | undefined) => void`: Says where the renderer draws the reading, as fractions of the strip from
    * its top left, or `undefined` while it draws none. The tooltip points
    * there. Called by the connector.
-   * - `placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
+   * - `placeCorners(at: DrawnCorners | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
    * first column and the last, as fractions of the strip from its top left,
    * or `undefined` while they are out of view, where the labels keep the
    * last place they had. The `start` and `end` labels stand there. Called by
@@ -97383,12 +97382,9 @@ export type CustomElementsSolidJs = {
    * - `--spatial-heatmap-left-shade`: How much less light the left face is than the top, as a step of OKLCH lightness from 0 to 1. 0.07 by default.
    * - `--spatial-heatmap-right-shade`: How much less light the right face is than the top, as a step of OKLCH lightness from 0 to 1. 0.14 by default.
    * - `--spatial-heatmap-selected-color`: The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one.
-   * - `--spatial-heatmap-depth`: 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.
-   * - `--spatial-heatmap-end-x`: 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.
-   * - `--spatial-heatmap-end-y`: 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.
+   * - `--spatial-heatmap-label-x`: 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.
+   * - `--spatial-heatmap-label-y`: 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.
    * - `--spatial-heatmap-span`: How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
-   * - `--spatial-heatmap-start-x`: 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.
-   * - `--spatial-heatmap-start-y`: 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.
    * - `--heatmap-rows`: How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.
    * - `--heatmap-tone`: The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.
    * - `--heatmap-tone-1`: The weakest step of the magnitude ramp, used by `tones="1 …"`.
@@ -97468,9 +97464,9 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * 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.
    *
    * ## Attributes & Properties
    *
@@ -97703,8 +97699,8 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * 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.
    *
@@ -107036,18 +107032,12 @@ export type CustomCssProperties = {
   "--spatial-heatmap-right-shade"?: (string) | undefined;
   /** The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one. */
   "--spatial-heatmap-selected-color"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-depth"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-end-x"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-end-y"?: (string) | undefined;
+  /** 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. */
+  "--spatial-heatmap-label-x"?: (string) | undefined;
+  /** 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. */
+  "--spatial-heatmap-label-y"?: (string) | undefined;
   /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
   "--spatial-heatmap-span"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-start-x"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-start-y"?: (string) | undefined;
   /** How tall the plot is. */
   "--spatial-scatter-chart-block-size"?: (string) | undefined;
   /** How tall the plot is. */

package/types/vue.d.ts

@@ -24187,18 +24187,12 @@ export type CustomCssProperties = {
   "--spatial-heatmap-right-shade"?: (string) | undefined;
   /** The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one. */
   "--spatial-heatmap-selected-color"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-depth"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-end-x"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-end-y"?: (string) | undefined;
+  /** 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. */
+  "--spatial-heatmap-label-x"?: (string) | undefined;
+  /** 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. */
+  "--spatial-heatmap-label-y"?: (string) | undefined;
   /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
   "--spatial-heatmap-span"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-start-x"?: (string) | undefined;
-  /** 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. */
-  "--spatial-heatmap-start-y"?: (string) | undefined;
   /** How tall the plot is. */
   "--spatial-scatter-chart-block-size"?: (string) | undefined;
   /** How tall the plot is. */
@@ -25537,19 +25531,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixSparklineVueProps,
     HelixSparklineVueEvents
   >;
-  /** 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.  '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 change how large a cell may grow. */
+  /** 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. 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 change how large a cell may grow. */
   "helix-spatial-heatmap": DefineCustomElement<
     HelixSpatialHeatmap,
     HelixSpatialHeatmapVueProps,
     HelixSpatialHeatmapVueEvents
   >;
-  /** 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. */
   "helix-spatial-scatter-chart": DefineCustomElement<
     HelixSpatialScatterChart,
     HelixSpatialScatterChartVueProps,
     HelixSpatialScatterChartVueEvents
   >;
-  /** 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 ramp from the theme's primary color, quiet where it is low and strong where it is high, so the two drawings agree. */
+  /** 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. */
   "helix-spatial-surface-chart": DefineCustomElement<
     HelixSpatialSurfaceChart,
     HelixSpatialSurfaceChartVueProps,