enarratio-astro 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -7,6 +7,30 @@ every such change is listed here.
 
 ## [Unreleased]
 
+## [0.4.3] - 2026-11-07
+
+### Changed
+
+- The `astro` peer dependency is `>=6` (was exactly `7.4.4`), as the README says. A site on any supported Astro version now installs
+  without a peer conflict; the version tested here stays pinned in the repository's dev dependencies.
+
+### Removed
+
+- `parseChartBlock` is no longer exported from `enarratio-astro/markdown`. It was undocumented; use the
+  `remarkCharts` or `satteriCharts` plugin instead.
+
+## [0.4.2] - 2026-11-03
+
+### Changed
+
+- Draws with Enarratio 0.7.3: charts no longer move the page when the enhancement layer loads. The redraw keeps the
+  height the server drawing showed, a legend entry has its button's box before it is a button, and an interactive
+  chart's figure holds the controls the layer adds (Show table, Play as sound, the downloads), inert until it
+  arrives.
+- A chart that is not interactive leaves those controls out (Enarratio's `controls: false`), since no layer ever
+  makes them work. `renderChart` takes a second argument, `{ interactive }`, for this; it defaults to true, as
+  Enarratio does.
+
 ## [0.4.1] - 2026-11-03
 
 ### Changed

package/README.md

@@ -36,6 +36,7 @@ const downloads = [
   { year: 2026, package: "Plugin", downloads: 2800 },
 ];
 ---
+
 <Chart
   type="line"
   data={downloads}
@@ -57,7 +58,7 @@ columns. The chart CSS is written once per page, however many charts it has.
 A code block whose language is `chart` becomes a chart: options, a line of three dashes, then the
 data.
 
-~~~md
+````md
 ```chart
 type: bar
 x: team
@@ -72,7 +73,7 @@ Support,Closed,22
 Platform,Open,5
 Platform,Closed,31
 ```
-~~~
+````
 
 Register the plugin for Astro's Markdown processor. Astro 7's default, Sätteri:
 
@@ -102,28 +103,28 @@ interactive chart on the page and works with view transitions.
 
 The component's props and a Markdown block's keys are the same:
 
-| Option | Used by | Notes |
-|---|---|---|
-| `type` | all | `bar` (default), `line`, `area` (stacked), `scatter` or `heatmap`. |
-| `data` | all | The data (component only; in Markdown it follows the dashes). Up to 5000 rows and 50 columns. |
-| `alt` | all | **Required.** What the chart shows and finds, in a sentence. It names the chart for screen readers. |
-| `title`, `subtitle` | all | Optional. Shown above the chart. |
-| `caption`, `notes` | all | Optional. The caption, under the chart, is for method or caveats; notes are a smaller line for definitions. |
-| `source`, `sourceHref` | all | Optional. Where the data came from, linked when `sourceHref` is set, beside a CSV download of the data. |
-| `byline` | all | Optional. Who made the chart. |
-| `x` | all | The column along the x axis. Column names match without regard to case. ISO dates make a time axis in line and area charts. |
-| `y` | all | The value column. Bar charts count rows when it is missing. For a heatmap, the row column. |
-| `series` | bar, line, area, scatter | Splits rows into series, told apart by color and by legend, labels or symbols. |
-| `value` | heatmap | The cell value column. |
-| `xLabel`, `yLabel` | all | Axis labels. |
-| `xUnit`, `yUnit` | all | Optional. The unit, shown after the axis label (`Sales (units)`) and in the table and summary. |
-| `layout` | bar | `stacked` (default) or `grouped`. |
-| `orientation` | bar | `vertical` (default) or `horizontal`. |
-| `scale` | line, scatter | `linear` (default) or `log`. |
-| `regression` | scatter | A least-squares line with its 95% band. |
-| `dataTable` | all | `details` (default; behind a "Data table" toggle) or `visually-hidden` (screen readers only). |
-| `id` | all | The figure's id. |
-| `interactive` | all | Adds the enhancement script. Off by default, so pages stay script-free. |
+| Option                 | Used by                  | Notes                                                                                                                       |
+| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| `type`                 | all                      | `bar` (default), `line`, `area` (stacked), `scatter` or `heatmap`.                                                          |
+| `data`                 | all                      | The data (component only; in Markdown it follows the dashes). Up to 5000 rows and 50 columns.                               |
+| `alt`                  | all                      | **Required.** What the chart shows and finds, in a sentence. It names the chart for screen readers.                         |
+| `title`, `subtitle`    | all                      | Optional. Shown above the chart.                                                                                            |
+| `caption`, `notes`     | all                      | Optional. The caption, under the chart, is for method or caveats; notes are a smaller line for definitions.                 |
+| `source`, `sourceHref` | all                      | Optional. Where the data came from, linked when `sourceHref` is set, beside a CSV download of the data.                     |
+| `byline`               | all                      | Optional. Who made the chart.                                                                                               |
+| `x`                    | all                      | The column along the x axis. Column names match without regard to case. ISO dates make a time axis in line and area charts. |
+| `y`                    | all                      | The value column. Bar charts count rows when it is missing. For a heatmap, the row column.                                  |
+| `series`               | bar, line, area, scatter | Splits rows into series, told apart by color and by legend, labels or symbols.                                              |
+| `value`                | heatmap                  | The cell value column.                                                                                                      |
+| `xLabel`, `yLabel`     | all                      | Axis labels.                                                                                                                |
+| `xUnit`, `yUnit`       | all                      | Optional. The unit, shown after the axis label (`Sales (units)`) and in the table and summary.                              |
+| `layout`               | bar                      | `stacked` (default) or `grouped`.                                                                                           |
+| `orientation`          | bar                      | `vertical` (default) or `horizontal`.                                                                                       |
+| `scale`                | line, scatter            | `linear` (default) or `log`.                                                                                                |
+| `regression`           | scatter                  | A least-squares line with its 95% band.                                                                                     |
+| `dataTable`            | all                      | `details` (default; behind a "Data table" toggle) or `visually-hidden` (screen readers only).                               |
+| `id`                   | all                      | The figure's id.                                                                                                            |
+| `interactive`          | all                      | Adds the enhancement script. Off by default, so pages stay script-free.                                                     |
 
 A chart that cannot be drawn (a column that is not in the data, text in a number column, a missing
 `alt`) is replaced by a short note saying why, and the reason is logged, so one mistake never

package/dist/chart.d.ts

@@ -63,10 +63,19 @@ export type ChartResult = {
     readonly ok: false;
     readonly error: string;
 };
+/** How a chart is drawn, beside what it shows. */
+export interface RenderOptions {
+    /**
+     * Whether the page enhances the chart (`<Chart interactive>`). An enhanced chart's figure holds
+     * the controls the enhancement layer adds, inert until it arrives, so the page does not move;
+     * a chart that is never enhanced leaves them out. Defaults to true, as Enarratio does.
+     */
+    readonly interactive?: boolean | undefined;
+}
 /**
  * Draws a chart. Bar, line and area charts come from `enarratio/lite`, which builds the SVG as a
  * string with no DOM, the cheapest render on a Worker; scatter plots and heatmaps load
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export declare function renderChart(spec: ChartSpec): Promise<ChartResult>;
+export declare function renderChart(spec: ChartSpec, options?: RenderOptions): Promise<ChartResult>;

package/dist/chart.js

@@ -22,8 +22,8 @@ function numeric(table, name) {
     if (bad)
         throw new Error(`The column "${name}" should hold numbers, but has "${bad[name]}".`);
 }
-/** The options every chart type shares: text, the data table and the id. */
-function figure(spec) {
+/** The options every chart type shares: text, the data table, the id and the pending controls. */
+function figure(spec, options) {
     const alt = text(spec.alt);
     if (!alt)
         throw new Error("Add a description (alt): one sentence on what the chart shows.");
@@ -43,14 +43,15 @@ function figure(spec) {
         ...(source ? { source: sourceHref ? { name: source, href: sourceHref } : source } : {}),
         ...(id ? { id } : {}),
         dataTable: spec.dataTable === "visually-hidden" ? "visually-hidden" : "details",
+        ...(options.interactive === false ? { controls: false } : {}),
     };
 }
-async function draw(spec) {
+async function draw(spec, options) {
     const type = (text(spec.type) ?? "bar").toLowerCase();
     if (!CHART_TYPES.includes(type)) {
         throw new Error(`There is no chart type "${spec.type}". Use one of: ${CHART_TYPES.join(", ")}.`);
     }
-    const common = figure(spec);
+    const common = figure(spec, options);
     const table = typeof spec.data === "string" ? parseTable(spec.data) : tableFromRows(spec.data);
     const x = column(table, spec.x, "x axis");
     const seriesName = text(spec.series) ? column(table, spec.series, "series") : undefined;
@@ -109,9 +110,9 @@ async function draw(spec) {
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export async function renderChart(spec) {
+export async function renderChart(spec, options = {}) {
     try {
-        return { ok: true, html: await draw(spec) };
+        return { ok: true, html: await draw(spec, options) };
     }
     catch (error) {
         return { ok: false, error: error instanceof Error ? error.message : String(error) };

package/dist/data.d.ts

@@ -5,9 +5,6 @@ export interface Table {
     readonly columns: readonly string[];
     readonly rows: ReadonlyArray<Readonly<Record<string, Cell>>>;
 }
-/** Limits that keep one chart's render bounded, whatever an editor pastes. */
-export declare const MAX_ROWS = 5000;
-export declare const MAX_COLUMNS = 50;
 /**
  * Parses the data an editor pasted or typed: CSV, semicolon-separated or tab-separated text
  * whose first row names the columns. Throws an Error whose message an editor can act on.

package/dist/data.js

@@ -1,6 +1,6 @@
 /** Limits that keep one chart's render bounded, whatever an editor pastes. */
-export const MAX_ROWS = 5000;
-export const MAX_COLUMNS = 50;
+const MAX_ROWS = 5000;
+const MAX_COLUMNS = 50;
 const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
 const GROUPED_NUMBER = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d+)?$/;
 /** Reads a cell: numbers (including "1,234") become numbers, an empty cell `null`, the rest text. */

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @packageDocumentation
  */
-export { CHART_TYPES, type ChartResult, type ChartSpec, type ChartType, renderChart, } from "./chart.js";
+export { CHART_TYPES, type ChartResult, type ChartSpec, type ChartType, type RenderOptions, renderChart, } from "./chart.js";
 export { type Cell, parseTable, type Table, tableFromRows } from "./data.js";
 export { chartMarkup } from "./figure.js";
 export { chartStyles, type StyleOptions, type Styles } from "./styles.js";

package/dist/markdown.d.ts

@@ -1,23 +1,6 @@
-import { type ChartSpec } from "./chart.js";
 import { type StyleOptions } from "./styles.js";
 /** Options for the Markdown plugins: how charts are styled. */
 export type MarkdownChartOptions = StyleOptions;
-/**
- * Reads a `chart` code block: `key: value` lines, a line of three dashes, then the data.
- *
- * ```chart
- * type: line
- * x: month
- * y: visitors
- * alt: Monthly visitors rise from 820 to 1,190.
- * ---
- * month,visitors
- * 2026-01-01,820
- * ```
- */
-export declare function parseChartBlock(source: string): ChartSpec & {
-    readonly interactive: boolean;
-};
 /** The parts of a Markdown code node the plugins read. */
 interface CodeNode {
     readonly type: "code";

package/dist/markdown.js

@@ -41,7 +41,7 @@ const KEYS = new Set([
  * 2026-01-01,820
  * ```
  */
-export function parseChartBlock(source) {
+function parseChartBlock(source) {
     const lines = source.split(/\r?\n/);
     const rule = lines.findIndex((line) => line.trim() === "---");
     if (rule === -1)
@@ -69,7 +69,7 @@ async function chartHtml(source, first, options) {
     let markup;
     try {
         const { interactive, ...spec } = parseChartBlock(source);
-        const result = await renderChart(spec);
+        const result = await renderChart(spec, { interactive });
         if (!result.ok)
             console.warn(`[enarratio-astro] Markdown chart not drawn: ${result.error}`);
         markup = chartMarkup(result, interactive);

package/package.json

@@ -1,27 +1,33 @@
 {
   "name": "enarratio-astro",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Accessible charts for Astro: a Chart component and charts in Markdown, drawn on the server by Enarratio",
   "keywords": [
+    "accessibility",
     "astro",
     "astro-component",
-    "withastro",
     "charts",
-    "accessibility",
+    "enarratio",
     "markdown",
-    "enarratio"
+    "withastro"
   ],
   "homepage": "https://github.com/DrDustinEdwards/astro/tree/main/packages/enarratio-astro#readme",
   "bugs": {
     "url": "https://github.com/DrDustinEdwards/astro/issues"
   },
+  "license": "MIT",
+  "author": "Dustin Edwards (https://dustinedwards.info)",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/DrDustinEdwards/astro.git",
     "directory": "packages/enarratio-astro"
   },
-  "license": "MIT",
-  "author": "Dustin Edwards (https://dustinedwards.info)",
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "README.md"
+  ],
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -37,30 +43,24 @@
     "./Enhance.astro": "./src/Enhance.astro",
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "src",
-    "CHANGELOG.md",
-    "README.md"
-  ],
-  "engines": {
-    "node": ">=22.22"
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "test": "vitest run",
     "prepare": "npm run build"
   },
-  "peerDependencies": {
-    "astro": "7.4.4"
-  },
   "dependencies": {
     "@observablehq/plot": "0.6.17",
-    "enarratio": "0.7.2",
+    "enarratio": "0.7.3",
     "linkedom": "0.18.14"
   },
-  "publishConfig": {
-    "access": "public",
-    "tag": "latest"
+  "peerDependencies": {
+    "astro": ">=6"
+  },
+  "engines": {
+    "node": ">=22.22"
   }
 }

package/src/Chart.astro

@@ -21,7 +21,7 @@ interface Props extends ChartSpec, StyleOptions {
 }
 
 const { interactive = false, styles, theme, stylesheetOptions, ...spec } = Astro.props;
-const result = await renderChart(spec);
+const result = await renderChart(spec, { interactive });
 const css = firstOnPage(Astro.request) ? chartStyles({ styles, theme, stylesheetOptions }) : "";
 if (!result.ok) console.warn(`[enarratio-astro] chart ${spec.id ?? ""} not drawn: ${result.error}`);
 ---

package/src/Enhance.astro

@@ -11,7 +11,9 @@
   import { enhance } from "enarratio/enhance";
 
   function run() {
-    for (const chart of document.querySelectorAll<HTMLElement>("[data-enarratio-interactive-chart]")) {
+    for (const chart of document.querySelectorAll<HTMLElement>(
+      "[data-enarratio-interactive-chart]",
+    )) {
       enhance(chart);
     }
   }

package/src/chart.ts

@@ -88,8 +88,18 @@ function numeric(table: Table, name: string): void {
   if (bad) throw new Error(`The column "${name}" should hold numbers, but has "${bad[name]}".`);
 }
 
-/** The options every chart type shares: text, the data table and the id. */
-function figure(spec: ChartSpec) {
+/** How a chart is drawn, beside what it shows. */
+export interface RenderOptions {
+  /**
+   * Whether the page enhances the chart (`<Chart interactive>`). An enhanced chart's figure holds
+   * the controls the enhancement layer adds, inert until it arrives, so the page does not move;
+   * a chart that is never enhanced leaves them out. Defaults to true, as Enarratio does.
+   */
+  readonly interactive?: boolean | undefined;
+}
+
+/** The options every chart type shares: text, the data table, the id and the pending controls. */
+function figure(spec: ChartSpec, options: RenderOptions) {
   const alt = text(spec.alt);
   if (!alt) throw new Error("Add a description (alt): one sentence on what the chart shows.");
   const title = text(spec.title);
@@ -111,17 +121,18 @@ function figure(spec: ChartSpec) {
     ...(id ? { id } : {}),
     dataTable:
       spec.dataTable === "visually-hidden" ? ("visually-hidden" as const) : ("details" as const),
+    ...(options.interactive === false ? { controls: false } : {}),
   };
 }
 
-async function draw(spec: ChartSpec): Promise<string> {
+async function draw(spec: ChartSpec, options: RenderOptions): Promise<string> {
   const type = (text(spec.type) ?? "bar").toLowerCase();
   if (!CHART_TYPES.includes(type as ChartType)) {
     throw new Error(
       `There is no chart type "${spec.type}". Use one of: ${CHART_TYPES.join(", ")}.`,
     );
   }
-  const common = figure(spec);
+  const common = figure(spec, options);
   const table = typeof spec.data === "string" ? parseTable(spec.data) : tableFromRows(spec.data);
   const x = column(table, spec.x, "x axis");
   const seriesName = text(spec.series) ? column(table, spec.series, "series") : undefined;
@@ -130,9 +141,8 @@ async function draw(spec: ChartSpec): Promise<string> {
   const log = spec.scale === "log" ? ({ yType: "log" } as const) : {};
 
   // Enarratio types its field options by the row type; parsed rows are only known at run time,
-  // so the options are checked here and passed on as plain objects.
-  // biome-ignore lint/suspicious/noExplicitAny: see above
-  type Loose = any;
+  // so every row is a record of cells and the columns are checked here.
+  type Loose = Record<string, Cell>;
 
   switch (type as ChartType) {
     case "bar": {
@@ -186,9 +196,12 @@ async function draw(spec: ChartSpec): Promise<string> {
  * `enarratio/plot` (Observable Plot and linkedom) only when a page has one. Never throws: a chart
  * that cannot be drawn returns the reason instead, so one mistake cannot break a page.
  */
-export async function renderChart(spec: ChartSpec): Promise<ChartResult> {
+export async function renderChart(
+  spec: ChartSpec,
+  options: RenderOptions = {},
+): Promise<ChartResult> {
   try {
-    return { ok: true, html: await draw(spec) };
+    return { ok: true, html: await draw(spec, options) };
   } catch (error) {
     return { ok: false, error: error instanceof Error ? error.message : String(error) };
   }

package/src/data.ts

@@ -8,8 +8,8 @@ export interface Table {
 }
 
 /** Limits that keep one chart's render bounded, whatever an editor pastes. */
-export const MAX_ROWS = 5000;
-export const MAX_COLUMNS = 50;
+const MAX_ROWS = 5000;
+const MAX_COLUMNS = 50;
 
 const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
 const GROUPED_NUMBER = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d+)?$/;

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   type ChartResult,
   type ChartSpec,
   type ChartType,
+  type RenderOptions,
   renderChart,
 } from "./chart.js";
 export { type Cell, parseTable, type Table, tableFromRows } from "./data.js";

package/src/markdown.ts

@@ -46,7 +46,7 @@ const KEYS = new Set([
  * 2026-01-01,820
  * ```
  */
-export function parseChartBlock(source: string): ChartSpec & { readonly interactive: boolean } {
+function parseChartBlock(source: string): ChartSpec & { readonly interactive: boolean } {
   const lines = source.split(/\r?\n/);
   const rule = lines.findIndex((line) => line.trim() === "---");
   if (rule === -1)
@@ -78,7 +78,7 @@ async function chartHtml(
   let markup: string;
   try {
     const { interactive, ...spec } = parseChartBlock(source);
-    const result = await renderChart(spec);
+    const result = await renderChart(spec, { interactive });
     if (!result.ok) console.warn(`[enarratio-astro] Markdown chart not drawn: ${result.error}`);
     markup = chartMarkup(result, interactive);
   } catch (error) {