@fusion.dev/helix-docs 0.193.0 → 0.195.0

package/content/charting.mdx

@@ -12,11 +12,11 @@ Helix has these chart families, and each one has its own API page:
 - `Line Chart`
 - `Area Chart`
 - `Scatter Chart`
-- `Spatial Scatter Chart`, drawn in three dimensions by `@fusion.dev/helix-plot`
-- `Spatial Surface Chart`, drawn in three dimensions by `@fusion.dev/helix-plot`
+- `Spatial Scatter Chart`, drawn in three dimensions
+- `Spatial Surface Chart`, drawn in three dimensions
 - `Donut Chart`
 - `Heatmap`
-- `Spatial Heatmap`
+- `Spatial Heatmap`, drawn in three dimensions
 - `Sparkline`
 - `Trend`
 - `Legend`, which all of the charts share
@@ -40,20 +40,14 @@ Choose a chart by the question it answers.
   overlaps the series, and `Area Chart` adds them.
 - **Parts of one whole, at one moment.** `Donut Chart`.
 - **Whether two measures relate.** `Scatter Chart`, with one point per row.
-- **Where rows fall on three measures, and which gather together.** `Scatter
-  3D`, with one point per row in a box you can turn. Use it for data that has
-  three dimensions, such as clusters or embeddings. Its table and its flat
-  scatter carry the exact values.
-- **How one measure rises and falls over two others.** `Spatial Surface Chart`, with one
-  row per place on a grid, drawn as a surface you can turn. Use it for a measure
-  over two ranges, such as load by hour and by day. Its table carries the exact
-  values.
-
-The spatial charts and `Spatial Heatmap` draw themselves in 3D in SVG, which a
-server, a print, and a page without WebGL all show. Shift with an arrow turns
-the spatial charts' drawing. `@fusion.dev/helix-plot` draws all three with
-three.js instead, lit and in perspective, in a view you can drag round and
-zoom.
+- **Where rows fall on three measures, and which gather together.** `Spatial
+  Scatter Chart`, with one point per row in a box you can turn. Use it for data
+  that has three dimensions, such as clusters or embeddings. Its table and its
+  tooltip carry the exact values.
+- **How one measure rises and falls over two others.** `Spatial Surface Chart`,
+  with one row per place on a grid, drawn as a surface you can turn. Use it for
+  a measure over two ranges, such as load by hour and by day. Its table carries
+  the exact values.
 - **How each day or check went.** `Heatmap`, for uptime, contributions, or
   activity.
 - **The same days, as a relief.** `Spatial Heatmap` reads the same table as
@@ -65,6 +59,12 @@ zoom.
   Use `Trend` to show which way one measurement moved and whether that is good
   news.
 
+The three spatial charts draw themselves in 3D in SVG, which a
+print and a page without WebGL show too, and a drag or Shift with an arrow
+turns. `@fusion.dev/helix-plot` can also draw all three with three.js, lit and
+in perspective, in a view you can drag round and zoom. The
+[spatial charts guide](./spatial-charts) covers both.
+
 ## Charts read their data from a table
 
 ```html
@@ -127,8 +127,11 @@ reading a chart is usually read for:
 - `Donut Chart`: each slice's share of the whole.
 - `Scatter Chart`: each series' number of points and how strongly the two
   measures relate.
+- `Spatial Scatter Chart`: its three measures and its number of points.
+- `Spatial Surface Chart`: its measures, its number of readings, and the range
+  of its heights.
 
-`Heatmap` is an image with that name. `Sparkline` takes a `label` of its own.
+`Heatmap` and `Spatial Heatmap` are each an image with that name. `Sparkline` takes a `label` of its own.
 
 ## Tables that change
 
@@ -184,6 +187,8 @@ These parts change direction:
   right
 - `Line Chart`, `Area Chart`, and `Sparkline`, with their end marks
 - `Heatmap`'s weeks, which were already a grid laid out along the line
+- `Spatial Heatmap`'s weeks in its SVG drawing. A three.js drawing keeps its
+  direction, and the chart's labels follow it.
 - A half `Donut Chart`, which is read across
 
 These parts keep their direction:
@@ -197,6 +202,9 @@ These parts keep their direction:
   number line runs that way in every script. Its axis names read in their own
   direction, so a name in Arabic reads right to left under the far end of the
   plot. Its summary and tooltip follow the page's direction.
+- `Spatial Scatter Chart` and `Spatial Surface Chart` are laid out as on a
+  left-to-right page, because all three of their axes are measures. Their
+  summaries and tooltips follow the page's direction.
 
 To keep a chart left to right on a right-to-left page, such as a number line in
 a mathematics text, set `dir="ltr"` on the chart element. You need nothing else.

package/content/coding-agents.mdx

@@ -1,5 +1,5 @@
 ---
-description: The files an AI agent can read to write Helix code, and where to find each one.
+description: Install Helix for a coding agent, and the files an agent can read to write Helix code.
 order: 4
 section: Getting started
 title: Coding agents
@@ -11,6 +11,72 @@ We publish Helix as text for agents that write Helix code, so an agent does not
 need to read the rendered website. Three sources give it the library as text.
 We generate all three from the same sources as this site.
 
+## Install the plugin
+
+Helix's plugin gives an agent the [Helix skill](./using-helix-with-an-agent) and
+the Helix MCP server in one install. The server runs
+`npx @fusion.dev/helix-cli mcp`, the command line your project installs, so its
+answers are your version's.
+
+| Tool | Install |
+|---|---|
+| Claude Code | `claude plugin marketplace add project-fusion/fusion`, then `claude plugin install helix@fusion` |
+| Cursor | `/plugin marketplace add https://github.com/project-fusion/fusion` in Cursor's agent, then install `helix`. A team marketplace can import the repository instead |
+| VS Code | Add `"chat.plugins.marketplaces": ["project-fusion/fusion"]` to your settings, search `@agentPlugins` in the Extensions view, and install `helix` |
+| GitHub Copilot CLI | `copilot plugin install project-fusion/fusion:helix/plugin` |
+| Codex | `codex plugin marketplace add project-fusion/fusion`, then `codex plugin add helix@fusion` |
+| Devin | `devin plugins install project-fusion/fusion#helix/plugin` |
+| Gemini CLI | `gemini skills install https://github.com/project-fusion/fusion.git --path helix/plugin/skills/helix`, for the skill alone |
+
+The plugin follows the latest release of Helix. Its skill points to the copy in
+`node_modules`, which matches the version you installed.
+
+## Link the skill without a plugin
+
+**Point your tool at the skill, and do not copy it.** A copy starts to go stale
+as soon as you paste it, and the skill changes with the library. The skill in
+the package matches the Helix you installed.
+
+Most tools read skills from `.agents/skills`, and Claude Code and Cline from
+`.claude/skills`. Link it into the one your tool reads:
+
+```sh
+mkdir -p .agents/skills
+ln -s ../../node_modules/@fusion.dev/helix/skills/helix .agents/skills/helix
+```
+
+Other tools read a file in your repository. Add a line to it that names the
+skill, or this page:
+
+```md
+Helix: read node_modules/@fusion.dev/helix/skills/helix/SKILL.md before
+writing components, and node_modules/@fusion.dev/helix/api.json for the API.
+```
+
+| Tool | Where it goes |
+|---|---|
+| Claude Code | `.claude/skills/helix`, or a line in `AGENTS.md` or `CLAUDE.md` |
+| Cursor | `.cursor/rules/` |
+| GitHub Copilot | `.github/copilot-instructions.md` |
+| Anything else | Whatever it reads. The line is the same |
+
+We do not write those files for you, and we chose this on purpose. You would
+have to maintain a file we generated in your repository against our changes. A
+tool that rewrote it on install would be a dependency you did not ask for, in a
+directory you own. You add the link or the line, and you can delete it.
+
+## Install the Helix MCP server
+
+```sh
+helix mcp init --client claude
+```
+
+`helix mcp` answers from the Helix packages your project installs: families,
+examples, import lines, tokens, and the theme a brand color produces. `--client`
+takes `claude`, `cursor`, or `vscode`, and writes the server into the file that
+client reads. [The Helix MCP server](#the-helix-mcp-server) lists the tools. It runs on your
+machine, talks to a client you chose, and makes no network requests.
+
 ## The manifest
 
 ```
@@ -78,37 +144,12 @@ agent uses most:
 - `specifier` and `words` on each element: the line that registers it, and the
   properties `registerWords` translates
 
-## Import every family you write
-
-Each tag needs its family's entry imported. A family registers its own parts,
-so `@fusion.dev/helix/tabs` registers Tab and Tab Panel. A family does not
-register another family's elements that you write inside it:
-
-```js
-import '@fusion.dev/helix/select'
-import '@fusion.dev/helix/option'
-```
-
-Without the Option import, the options are unknown elements and the Select
-offers nothing. The same is true
-of the layout around an example: a Button inside a Flex needs both imports.
-Copy the import lines above an example together with its markup.
-
 ## Check the code you wrote
 
-These checks run on your project, and each one prints JSON with `--json`:
-
-| Command | What it finds |
-|---|---|
-| `helix scan` | Unknown tags, attributes, values, slots, parts, hooks, React event props, and tokens, a `--_helix-` primitive read, `[disabled]` on a form control, a selector on an attribute the element never writes back, and a tag whose entry nothing imports, each with its file and line |
-| `helix theme audit` | Every foreground and background pair in your theme that misses its contrast target |
-| `initDiagnostics()` from `@fusion.dev/helix-diagnostics` | The same findings on the running page, and what the library reports as it runs, such as an option nobody imported |
-
-`helix scan` and `helix theme audit` exit 1 when they find an error and 0 when
-they find none. Run them after you write Helix code, and fix each finding
-before you finish. `helix scan --file <path>` reports one file's findings, and
-`helix scan --stdin tsx` reads a snippet from stdin. Both still read the whole
-project, so an import in another file counts.
+`helix scan`, `helix diagnostics --once`, and `helix theme audit` check what an
+agent wrote, and the MCP server runs the same checks.
+[Using Helix with an agent](./using-helix-with-an-agent#check-the-code-you-wrote)
+lists what each finds.
 
 ## The index
 

package/content/introduction.mdx

@@ -64,6 +64,7 @@ each framework.
 | `@fusion.dev/helix-icons` | You are drawing an icon outside a component |
 | `@fusion.dev/helix-map` | You are drawing a map with MapLibre, Leaflet, or a renderer of your own. See [Maps](./maps) |
 | `@fusion.dev/helix-graph` | You are drawing a graph with Sigma.js, cosmos.gl, three.js, or a renderer of your own. See [Graphs](./graphs) |
+| `@fusion.dev/helix-plot` | You are drawing a spatial chart with three.js. See [Spatial charts](./spatial-charts) |
 | `@fusion.dev/helix-core` | You are building a new Helix component |
 
 React uses the elements directly. Helix ships a `jsx.d.ts` that types every