@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/qr-code/root/qr-code-root.js

@@ -10,6 +10,18 @@ import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
 import { qrSvg } from '../export.js';
 const QUIET = 4;
+const pixelsOf = (image) => {
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        canvas.getContext('2d')?.drawImage(image, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    catch {
+        return image.currentSrc || image.src;
+    }
+};
 const isFinder = (x, y, size) => {
     const near = (a, b) => a < 8 && b < 8;
     return near(x, y) || near(size - 1 - x, y) || near(x, size - 1 - y);
@@ -96,7 +108,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     updated(changed) {
         super.updated(changed);
         const key = `${this.level}:${this.value}`;
-        if (this.value !== '' && this.encoded() === undefined) {
+        const overflow = this.value !== '' && this.encoded() === undefined;
+        this.toggleState('overflow', overflow);
+        if (overflow) {
             if (this.overflowed !== key) {
                 this.overflowed = key;
                 this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
@@ -115,16 +129,53 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         }
         const ground = getComputedStyle(this).backgroundColor;
         const clear = ground === '' || ground === 'transparent' || /^rgba\(.*,\s*0\)$/.test(ground);
+        const background = clear ? '#ffffff' : rgbOf(ground);
+        const box = Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0);
+        const logo = this.logoDrawing(code, box, background);
         return qrSvg({
-            background: clear ? '#ffffff' : rgbOf(ground),
-            box: Number(code.getAttribute('viewBox')?.split(' ')[2] ?? 0),
+            background,
+            box,
             finderColor: rgbOf(getComputedStyle(finders).fill || '#000000'),
             finders: finders.getAttribute('d') ?? '',
             moduleColor: rgbOf(getComputedStyle(modules).fill || '#000000'),
             modules: modules.getAttribute('d') ?? '',
             quiet: QUIET,
+            ...(logo ? { logo } : {}),
         }, size);
     }
+    logoDrawing(code, box, background) {
+        const holder = this.renderRoot.querySelector('[part="logo"]');
+        const mark = this.knownChildren.find((child) => child.slot === 'logo');
+        const area = code.getBoundingClientRect();
+        if (!holder || holder.hidden || !mark || area.width === 0) {
+            return undefined;
+        }
+        const scale = box / area.width;
+        const at = (rect) => [
+            (rect.left - area.left) * scale,
+            (rect.top - area.top) * scale,
+            rect.width * scale,
+            rect.height * scale,
+        ];
+        const frame = at(holder.getBoundingClientRect());
+        if (frame[0] < 0 || frame[1] < 0 || frame[0] + frame[2] > box || frame[1] + frame[3] > box) {
+            return undefined;
+        }
+        const fill = getComputedStyle(holder).backgroundColor;
+        const ground = fill === '' || fill === 'transparent' || /^rgba\(.*,\s*0\)$/.test(fill);
+        const logo = {
+            frame,
+            ground: ground ? background : rgbOf(fill),
+            mark: at(mark.getBoundingClientRect()),
+        };
+        if (mark instanceof HTMLImageElement) {
+            return { ...logo, href: pixelsOf(mark) };
+        }
+        if (mark instanceof SVGSVGElement) {
+            return { ...logo, svg: new XMLSerializer().serializeToString(mark) };
+        }
+        return undefined;
+    }
     async toPng(size = 512) {
         const markup = this.toSvg(size);
         if (markup === '') {
@@ -151,11 +202,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         link.click();
         setTimeout(() => URL.revokeObjectURL(url));
     }
-    renderCode() {
-        if (this.value === '') {
-            return nothing;
-        }
-        const result = this.encoded();
+    renderCode(result) {
         if (result === undefined) {
             return nothing;
         }
@@ -186,7 +233,9 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     </svg>`;
     }
     render() {
-        return html `${this.renderCode()}
+        const result = this.value === '' ? undefined : this.encoded();
+        const overflow = this.value !== '' && result === undefined;
+        return html `${this.renderCode(result)}${overflow ? html `<span part="fallback"><slot name="fallback"></slot></span>` : nothing}
     <span ?hidden=${!this.logo} part="logo">
       <slot
         name="logo"

package/dist/quote/marks.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether quoted text starts or ends with a quotation mark someone typed.
+ *
+ * A Quote renders a `<q>`, which sets the marks itself, so typed ones show
+ * twice: “"like this"”. Only the ends are read, since a mark inside the text
+ * is a quotation within it, which a nested Quote should set.
+ */
+export declare const typedMarks: (text: string) => boolean;

package/dist/quote/marks.js

@@ -0,0 +1,5 @@
+const MARKS = new Set(['"', "'", '“', '”', '‘', '’', '„', '«', '»', '‹', '›', '「', '」']);
+export const typedMarks = (text) => {
+    const trimmed = text.trim();
+    return trimmed !== '' && (MARKS.has(trimmed[0] ?? '') || MARKS.has(trimmed.at(-1) ?? ''));
+};

package/dist/quote/root/quote-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A short quotation, set inline with the text around it.
  *
@@ -7,7 +7,10 @@ import { type TemplateResult } from 'lit';
  * Renders a real `<q>`, so the browser supplies the quotation marks. It inserts
  * the correct marks for the document's language and nests them correctly when
  * one quotation sits inside another. Do not type quotation marks into the
- * content.
+ * content: one that starts or ends with a typed mark warns once, with the
+ * runtime kind `typed-marks`. A quotation in a language other than the page's takes `lang` on the
+ * element, and its marks follow it: `lang="de"` sets „…“ and `lang="fr"` «…»
+ * inside an English page.
  *
  * For a passage set off from the surrounding text, use a blockquote.
  *
@@ -26,6 +29,15 @@ export declare class HelixHeadlessQuote extends HelixElement {
      * URL identifying where the quotation came from.
      */
     cite: string;
+    /** Whether this quote has said its text carries typed marks, so it says so once. */
+    private warned;
+    /**
+     * Reads the quoted text as it first renders and as it changes, for marks the
+     * `<q>` would double. On the shadow root rather than in the template, so the
+     * served markup is the `<q>` and its slot and nothing else.
+     */
+    private readonly readText;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/quote/root/quote-root.js

@@ -4,13 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { typedMarks } from '../marks.js';
 let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
     constructor() {
         super(...arguments);
         this.cite = '';
+        this.warned = false;
+        this.readText = () => {
+            const text = [...this.childNodes]
+                .filter((node) => !(node instanceof Element) || !node.slot)
+                .map((node) => node.textContent ?? '')
+                .join('');
+            if (this.warned || !typedMarks(text)) {
+                return;
+            }
+            this.warned = true;
+            reportRuntime({
+                kind: 'typed-marks',
+                message: `<${this.localName}> starts or ends with a typed quotation mark, and the browser sets its own, so the marks show twice. Take the typed marks out.`,
+                tag: this.localName,
+            });
+        };
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readText();
+        this.renderRoot.addEventListener('slotchange', this.readText);
     }
     render() {
         return html `<q part="quote" cite=${this.cite || nothing}><slot></slot></q>`;

package/dist/radio/root/radio-root.d.ts

@@ -29,15 +29,19 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  * replaces the visible label, and the label becomes the name read by screen
  * readers. The icon has its own slot so the chip can hide the label and show
  * the icon.
+ * @slot indicator - An icon drawn inside the circle in place of the dot, such
+ * as a check mark.
  *
  * @event {HelixSelectEvent} helix-select - Fired when the radio is chosen. Cancelable: call `preventDefault()` to keep the current choice.
  *
  * @csspart box - The circle. Draw the dot inside it with `::part(box)::after` in
- * your stylesheet. This tier ships no CSS, so it renders no separate element for
- * the dot, which would add an empty child to your layout.
+ * your stylesheet, or slot an icon into `indicator`. This tier ships no CSS, so
+ * it renders no separate element for the dot, which would add an empty child to
+ * your layout.
  * @csspart item - The button, which covers the whole row.
  * @csspart label - The label beside the circle.
  *
+ * @cssstate has-indicator - An icon is slotted into `indicator`.
  * @cssstate selected - The radio is chosen.
  */
 export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {

package/dist/radio/root/radio-root.js

@@ -32,7 +32,12 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
-      <span part="box"></span>
+      <span part="box" aria-hidden="true"
+        ><slot
+          name="indicator"
+          @slotchange=${(event) => this.toggleState('has-indicator', event.target.assignedNodes().length > 0)}
+        ></slot
+      ></span>
       <slot name="icon"></slot>
       <span part="label"><slot></slot></span>
     </button>`;

package/dist/rating/root/rating-root.d.ts

@@ -24,6 +24,7 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @aliases Stars, Score, Review score
  * @documentation https://fusion.dev/helix/components/rating
  *
+ * @slot empty-mark - The shape of an unfilled mark, copied into every position of the track, such as an outlined star beside a filled `mark`. Without it, the track copies `mark`.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
  * @slot label - The label, for content richer than the `label` text.
@@ -32,6 +33,7 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
  * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
  * @event {HelixClearEvent} helix-clear - The rating went back to unrated, under `clearable`. Sent after `input` and `change`.
+ * @event {HelixPreviewEvent} helix-preview - The score under the pointer, shown before it is chosen, or `''` once the marks show the score again. Sent once each time the preview changes.
  * @event {Event} input - The score changed.
  *
  * @csspart feedback - The message that says what is wrong.
@@ -223,6 +225,8 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     /** The shape for one place, or nothing when the stylesheet is drawing it. */
     private markFor;
     private readonly handleMarkSlot;
+    /** The element slotted into `empty-mark`, which the track copies. */
+    private emptySource;
     /**
      * The step under a point on the row, or the nearest one to it.
      *
@@ -297,10 +301,11 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     /** The name of one score, as `optionLabel` writes it. */
     private nameFor;
     /**
-     * The option holding the tab stop: the chosen one, or for a score between
-     * steps, such as an average of 3.5 on whole marks, the step below it, and
-     * the first while nothing is chosen. Between steps no option matched, and
-     * the rating left the tab order.
+     * The option that is checked and holds the tab stop: the chosen one, or for
+     * a score between steps, such as an average of 3.4 on whole marks, the
+     * nearest step, and the first while nothing is chosen. Between steps no
+     * option matched, so no option was checked and the rating left the tab
+     * order.
      */
     private stopAt;
     protected render(): TemplateResult;

package/dist/rating/root/rating-root.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { nearestStep } from '../steps.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -33,9 +34,17 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.dragging = undefined;
         this.clones = new Map();
         this.handleMarkSlot = (event) => {
+            const slot = event.target;
+            const source = slot.assignedElements({ flatten: true })[0];
             this.clones.clear();
-            this.markSource = event.target.assignedElements({ flatten: true })[0];
+            if (slot.name === 'empty-mark') {
+                this.emptySource = source;
+            }
+            else {
+                this.markSource = source;
+            }
         };
+        this.emptySource = undefined;
         this.handleDragStart = (event) => {
             if (this.isDisabled || this.readOnly || event.button !== 0) {
                 return;
@@ -158,7 +167,8 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         }));
     }
     markFor(layer, index) {
-        if (!this.markSource) {
+        const source = layer === 'track' ? (this.emptySource ?? this.markSource) : this.markSource;
+        if (!source) {
             return undefined;
         }
         const key = `${layer}:${index}`;
@@ -166,7 +176,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         if (held) {
             return held;
         }
-        const clone = this.markSource.cloneNode(true);
+        const clone = source.cloneNode(true);
         this.clones.set(key, clone);
         return clone;
     }
@@ -208,6 +218,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     }
     updated(changed) {
         super.updated?.(changed);
+        if (changed.has('previewing')) {
+            this.dispatchEvent(new HelixPreviewEvent({
+                value: this.previewing === undefined ? '' : String(this.previewing),
+            }));
+        }
         this.sync();
         if (this.floor !== this.min && !this.warned) {
             this.warned = true;
@@ -225,6 +240,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         if (!this.markRead && this.childrenKnown) {
             this.markRead = true;
             this.markSource = this.knownChildren.find((child) => child.slot === 'mark');
+            this.emptySource = this.knownChildren.find((child) => child.slot === 'empty-mark');
         }
     }
     firstUpdated(changed) {
@@ -239,8 +255,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         if (!answered) {
             return first;
         }
-        const below = this.steps.filter((score) => score <= this.score);
-        return below.at(-1) ?? first;
+        return nearestStep(this.steps, this.score) ?? first;
     }
     render() {
         const showing = this.previewing ?? this.score;
@@ -276,9 +291,15 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         hidden
         @slotchange=${this.handleMarkSlot}
       ></slot>
+      <slot
+        name="empty-mark"
+        hidden
+        @slotchange=${this.handleMarkSlot}
+      ></slot>
       <span
         part="track"
         aria-hidden="true"
+        data-slotted=${this.emptySource ? '' : nothing}
         >${marksIn('track')}</span
       >
       <span
@@ -295,7 +316,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
                 part="option"
                 role="radio"
                 type="button"
-                aria-checked=${answered && this.score === score ? 'true' : 'false'}
+                aria-checked=${answered && score === stop ? 'true' : 'false'}
                 aria-label=${this.nameFor(score)}
                 data-score=${String(score)}
                 style=${`--rating-step: ${index + 1}`}
@@ -352,6 +373,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessRating.prototype, "previewing", void 0);
+__decorate([
+    state()
+], HelixHeadlessRating.prototype, "emptySource", void 0);
 HelixHeadlessRating = __decorate([
     customElement('helix-headless-rating')
 ], HelixHeadlessRating);

package/dist/rating/steps.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The step a score stands at: the step itself, or for a score between steps,
+ * such as an average of 3.4 on whole marks, the nearest one. Halfway between
+ * two goes to the lower, so a score is never read as more than it is.
+ * `undefined` for a row with no steps.
+ */
+export declare const nearestStep: (steps: readonly number[], score: number) => number | undefined;

package/dist/rating/steps.js

@@ -0,0 +1,9 @@
+export const nearestStep = (steps, score) => {
+    let nearest;
+    for (const step of steps) {
+        if (nearest === undefined || Math.abs(step - score) < Math.abs(nearest - score)) {
+            nearest = step;
+        }
+    }
+    return nearest;
+};

package/dist/scatter-chart/fit.d.ts

@@ -0,0 +1,15 @@
+/** Pearson's r, or nothing where there are too few points or no spread to have one. */
+export declare const correlation: (pairs: ReadonlyArray<readonly [number, number]>) => number | undefined;
+/** A straight line, as the measure up at any measure across. */
+export interface Fit {
+    /** The measure up where the measure across is zero. */
+    intercept: number;
+    /** How far up the line goes for each step across. */
+    slope: number;
+}
+/**
+ * The straight line nearest the points, by least squares, or nothing where
+ * there are fewer than two points or they share one measure across, which no
+ * line up the page can be fitted to.
+ */
+export declare const leastSquares: (pairs: ReadonlyArray<readonly [number, number]>) => Fit | undefined;

package/dist/scatter-chart/fit.js

@@ -0,0 +1,35 @@
+const mean = (values) => values.reduce((sum, one) => sum + one, 0) / values.length;
+export const correlation = (pairs) => {
+    if (pairs.length < 3) {
+        return undefined;
+    }
+    const across = mean(pairs.map(([x]) => x));
+    const up = mean(pairs.map(([, y]) => y));
+    let both = 0;
+    let xs = 0;
+    let ys = 0;
+    for (const [x, y] of pairs) {
+        both += (x - across) * (y - up);
+        xs += (x - across) ** 2;
+        ys += (y - up) ** 2;
+    }
+    return xs === 0 || ys === 0 ? undefined : both / Math.sqrt(xs * ys);
+};
+export const leastSquares = (pairs) => {
+    if (pairs.length < 2) {
+        return undefined;
+    }
+    const across = mean(pairs.map(([x]) => x));
+    const up = mean(pairs.map(([, y]) => y));
+    let both = 0;
+    let xs = 0;
+    for (const [x, y] of pairs) {
+        both += (x - across) * (y - up);
+        xs += (x - across) ** 2;
+    }
+    if (xs === 0) {
+        return undefined;
+    }
+    const slope = both / xs;
+    return { intercept: up - slope * across, slope };
+};

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

@@ -32,6 +32,9 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * Both axes are labeled, because both positions are values. The ticks sit at
  * round numbers, and the range extends to them.
  *
+ * `trend` draws each series' line of best fit, by least squares, across the
+ * plot in the series' color.
+ *
  * The summary gives each series' correlation coefficient and its number of
  * points. The table has every number, and the drawing is hidden from screen
  * readers.
@@ -66,7 +69,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart point - One row, as a point.
  * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
  * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
- * @csspart svg - The drawing surface the gridlines sit on.
+ * @csspart svg - The drawing surface the gridlines and the trend lines sit on.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -83,6 +86,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip-right - The bubble while it is right of the reading. Set alongside `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the reading. Set alongside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ * @csspart trend - One series' line of best fit, under `trend`. Carries its series color as `--chart-series`.
  * @csspart x-axis - The values along the horizontal axis, under the plot.
  * @csspart x-name - The name of the horizontal measure.
  * @csspart x-tick - One labeled value on the horizontal axis. Each axis has its own tick part, because `::part()` cannot tell which axis a tick is on.
@@ -112,6 +116,16 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * The word the summary uses for a row when it counts them.
      */
     pointsLabel: string;
+    /**
+     * Draws each series' line of best fit across the plot, by least squares, in
+     * the series' color: the regression line a reader would otherwise draw by
+     * eye.
+     *
+     * Absent draws none. A series with fewer than two points, or with every
+     * point at one measure across, has no line to draw. The summary already
+     * gives each series' correlation, which says how near the points are to it.
+     */
+    trend: boolean;
     /** The points as last drawn, which the pointer searches. */
     private drawn;
     /** The point a pointer is resting nearest, which the tooltip sits on. */
@@ -150,6 +164,12 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
     protected render(): TemplateResult;
     /** The rules and the points, behind a seam the styled tier can move. */
     protected renderPlot(field: ScatterField, along: (value: number) => number, up: (value: number) => number): TemplateResult;
+    /**
+     * Each shown series' line of best fit, from one end of the measure across
+     * to the other, under `trend`. The drawing clips a line that leaves the
+     * plot.
+     */
+    protected renderTrends(field: ScatterField, along: (value: number) => number, up: (value: number) => number): TemplateResult[] | typeof nothing;
     /**
      * What a reader who cannot see the points is told.
      *

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

@@ -8,6 +8,7 @@ import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixEle
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+import { correlation, leastSquares } from '../fit.js';
 const REACH = 24;
 const COEFFICIENTS = new Map();
 const coefficientIn = (locale) => {
@@ -31,28 +32,12 @@ const nice = ([low, high]) => {
     const round = (value) => Number(value.toPrecision(12));
     return [round(Math.floor(low / step) * step), round(Math.ceil(high / step) * step)];
 };
-const correlation = (pairs) => {
-    if (pairs.length < 3) {
-        return undefined;
-    }
-    const mean = (values) => values.reduce((sum, one) => sum + one, 0) / values.length;
-    const across = mean(pairs.map(([x]) => x));
-    const up = mean(pairs.map(([, y]) => y));
-    let both = 0;
-    let xs = 0;
-    let ys = 0;
-    for (const [x, y] of pairs) {
-        both += (x - across) * (y - up);
-        xs += (x - across) ** 2;
-        ys += (y - up) ** 2;
-    }
-    return xs === 0 || ys === 0 ? undefined : both / Math.sqrt(xs * ys);
-};
 let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinChartSource(HelixElement) {
     constructor() {
         super(...arguments);
         this.correlationLabel = 'correlation';
         this.pointsLabel = 'points';
+        this.trend = false;
         this.drawn = [];
         this.nearest = undefined;
         this.handleMove = (event) => {
@@ -180,6 +165,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         ${this.rulesY
             ? ticks(field.y).map((level) => svg `<line part="gridline" x1="0" x2=${PLOT_WIDTH} y1=${up(level)} y2=${up(level)} />`)
             : nothing}
+        ${this.renderTrends(field, along, up)}
       </svg>
       ${field.points.map((point) => {
             const index = seriesIndex(point.depth);
@@ -194,6 +180,30 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
       ${this.renderTooltip()}
     </div>`;
     }
+    renderTrends(field, along, up) {
+        if (!this.trend) {
+            return nothing;
+        }
+        const [start, end] = field.x;
+        return field.yNames.flatMap((name, depth) => {
+            const fit = this.showsSeries(name) ? leastSquares(field.pairs[depth] ?? []) : undefined;
+            if (fit === undefined) {
+                return [];
+            }
+            const index = seriesIndex(depth);
+            return [
+                svg `<line
+          data-series=${index}
+          part="trend"
+          style="--chart-series: var(--chart-series-${index})"
+          x1=${along(start)}
+          x2=${along(end)}
+          y1=${up(fit.intercept + fit.slope * start)}
+          y2=${up(fit.intercept + fit.slope * end)}
+        />`,
+            ];
+        });
+    }
     renderSummary(field) {
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
@@ -233,6 +243,9 @@ __decorate([
 __decorate([
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessScatterChart.prototype, "trend", void 0);
 HelixHeadlessScatterChart = __decorate([
     customElement('helix-headless-scatter-chart')
 ], HelixHeadlessScatterChart);