inkplot 0.0.0-stage → 1.0.0-beta.1

package/dist/surface.js

@@ -0,0 +1,145 @@
+/** Fresh zeroed counters; the chart resets (rather than replaces) them each flush so surfaces keep a valid reference. */
+export const newCounters = () => ({
+    writes: 0, skipped: 0, names: new Set(), filled: 0, cached: 0, projected: 0, pointsIn: 0, pointsDrawn: 0, pathBytes: 0,
+    stages: { generate: 0, decimate: 0, normalize: 0, place: 0, path: 0 },
+});
+/**
+ * What an element draws with. Nodes are keyed, created on demand, positioned from the live tree,
+ * and written only when a value changed. An element's own content sits below its children (or above, with `above`).
+ *
+ * An element has no node of its own unless it asks for a wrapper, which it should only do when the wrapper
+ * does something: a transform, a clip, or style its content inherits. Otherwise its nodes sit directly
+ * in the parent's, in order, with nothing to mark where they start.
+ */
+export class Surface {
+    platform;
+    counters;
+    placement;
+    wrapperNode = null;
+    hidden = false;
+    nodes = new Map();
+    cache = new WeakMap();
+    constructor(platform, counters, placement) {
+        this.platform = platform;
+        this.counters = counters;
+        this.placement = placement;
+    }
+    /**
+     * The element's own `<g>` (or another tag). Children and own nodes go inside it. Create it before the
+     * element draws anything, typically on attach; asking again returns the same node.
+     */
+    wrapper(tag = 'g') {
+        if (!this.wrapperNode) {
+            if (this.nodes.size > 0 || this.placement.childrenFirst())
+                throw new Error('wrapper() must come before the element draws anything');
+            this.wrapperNode = this.platform.createNode(tag);
+            this.platform.insertBefore(this.placement.container(), this.wrapperNode, this.placement.end());
+            if (this.hidden)
+                this.set(this.wrapperNode, 'display', 'none');
+        }
+        return this.wrapperNode;
+    }
+    /** The wrapper, if the element has one. */
+    get wrapperRoot() { return this.wrapperNode; }
+    /** First own node below the children, if any. */
+    get firstBelow() { return this.firstOf(false); }
+    /** First own node above the children, if any. */
+    get firstAbove() { return this.firstOf(true); }
+    /**
+     * The node for `key`, created the first time and the same node afterwards. Keys are per element, so two elements
+     * can both use 'grid' without clashing.
+     */
+    node(key, tag, options = {}) {
+        let entry = this.nodes.get(key);
+        if (entry)
+            return entry.node;
+        const node = this.platform.createNode(tag);
+        const above = options.above ?? false;
+        if (options.parent) {
+            this.platform.insertBefore(options.parent, node, null);
+            entry = { node, parent: options.parent, above };
+        }
+        else {
+            // Inside a wrapper the range ends at the wrapper's end; without one it ends where the element does.
+            const end = this.wrapperNode ? null : this.placement.end();
+            const before = above ? end : (this.placement.childrenFirst() ?? this.firstAbove ?? end);
+            this.platform.insertBefore(this.wrapperNode ?? this.placement.container(), node, before);
+            entry = { node, parent: null, above };
+            if (this.hidden && !this.wrapperNode)
+                this.set(node, 'display', 'none');
+        }
+        this.nodes.set(key, entry);
+        return node;
+    }
+    /** Set an attribute if (and only if) it differs from what was last written. The platform cannot unset one, so use a neutral value ('none', 0) instead of removing. */
+    set(node, name, value) {
+        this.write(node, name, value, () => this.platform.setAttribute(node, name, value));
+    }
+    /** Set a text node's content, skipping unchanged writes like `set`. */
+    text(node, content) {
+        this.write(node, '#text', content, () => this.platform.setText(node, content));
+    }
+    /** Drop one keyed node, for content that comes and goes (a title, a clip path). */
+    remove(key) {
+        const entry = this.nodes.get(key);
+        if (!entry)
+            return;
+        this.nodes.delete(key);
+        this.platform.remove(entry.node);
+    }
+    /** Drop a keyed node and every node keyed beneath it (`key/…`), for a group made of several. */
+    removePrefix(key) {
+        this.remove(key);
+        const below = key + '/';
+        // oxlint-disable-next-line unicorn/no-useless-spread -- a snapshot: `remove` takes nodes out of the map while we walk it
+        for (const k of [...this.nodes.keys()])
+            if (k.startsWith(below))
+                this.remove(k);
+    }
+    /** Hide or show everything this element draws (the wrapper, or each top-level node if it has none). */
+    setHidden(hidden) {
+        this.hidden = hidden;
+        const display = hidden ? 'none' : 'inline';
+        if (this.wrapperNode) {
+            this.set(this.wrapperNode, 'display', display);
+            return;
+        }
+        for (const e of this.nodes.values())
+            if (!e.parent)
+                this.set(e.node, 'display', display);
+    }
+    /** Take this element's nodes out of the platform. */
+    dispose() {
+        if (this.wrapperNode)
+            this.platform.remove(this.wrapperNode);
+        else
+            for (const e of this.nodes.values())
+                if (!e.parent)
+                    this.platform.remove(e.node);
+        this.nodes.clear();
+        this.wrapperNode = null;
+    }
+    /** The first top-level node of one layer; the layers are what `end()`/`first()` placement is computed from. */
+    firstOf(above) {
+        for (const e of this.nodes.values())
+            if (!e.parent && e.above === above)
+                return e.node;
+        return null;
+    }
+    /** The write cache lives per node (a WeakMap) so a removed node's entries are collected with it. */
+    write(node, name, value, commit) {
+        let cached = this.cache.get(node);
+        if (!cached) {
+            cached = new Map();
+            this.cache.set(node, cached);
+        }
+        if (cached.get(name) === value) {
+            this.counters.skipped++;
+            return;
+        }
+        cached.set(name, value);
+        commit();
+        this.counters.writes++;
+        this.counters.names.add(name);
+    }
+}

package/dist/table.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Data as a table, outside any chart: `readTable(node)` reads a source or a transform into columns.
+ *
+ *   const t = readTable(boxStats);                      // domain, value, then every channel it offers
+ *   t.rows();                                           // [{ domain: 0, value: 5, min: 1, q1: 3, … }, …]
+ *   readTable(trend, { domain: { min: 0, max: 10 }, samples: 11 });   // a trendline or function, sampled where you say
+ *
+ * A source or transform is a function of nothing but its own attributes, so it needs no chart and no platform: the
+ * table is what a series of it would be given to draw, in the same order (ascending in the domain), before any scale,
+ * pixel or decimation. For data that is made up rather than stored (a `SyntheticDataSource`, a trendline) the rows are
+ * wherever you ask: `domain` is the span to cover and `samples` how many evenly spaced points. A `Decimator` is a
+ * transform like any other and reads as its thinned output, so read its source to get all the rows.
+ */
+import type { DataNode } from './data.ts';
+import type { Extent } from './geometry.ts';
+export interface TableOptions {
+    /** The channels to read, after the domain and the value. Default: every one the node offers (`channelNames`). */
+    channels?: readonly string[];
+    /** The part of the domain to read. Default: all of it. For generated data (a function, a trendline) it is the span sampled. */
+    domain?: Extent;
+    /** For generated data: how many evenly spaced points to make across the span (default: the node's own count, else 512). For a `Decimator`: the width in pixels it reduces to. */
+    samples?: number;
+    /** What to call the first two columns. Default `domain` and `value`. */
+    names?: {
+        domain?: string;
+        value?: string;
+    };
+}
+/** Columns of numbers, all `count` long. NaN is a gap. */
+export interface Table {
+    readonly columns: readonly string[];
+    readonly count: number;
+    /** One typed array for each of `columns`, in that order. */
+    readonly data: readonly Float64Array[];
+    column(name: string): Float64Array;
+    /** One object for each row, keyed by column name. */
+    rows(): Record<string, number>[];
+}
+export declare function readTable(node: DataNode, options?: TableOptions): Table;

package/dist/table.js

@@ -0,0 +1,37 @@
+export function readTable(node, options = {}) {
+    const channels = options.channels ?? (node.channelNames ?? []).filter((n) => n !== 'domain' && n !== 'value');
+    const context = {
+        width: options.samples ?? 0, height: 0, domainRange: options.domain ?? { min: -Infinity, max: Infinity }, channels,
+    };
+    const plan = node.plan(context), stride = 2 + channels.length;
+    const buffer = new Float64Array(plan.capacity * stride), { count } = plan.fill(buffer);
+    const columns = [options.names?.domain ?? 'domain', options.names?.value ?? 'value', ...channels];
+    const data = columns.map((_, c) => {
+        const out = new Float64Array(count);
+        // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+        for (let i = 0, j = c; i < count; i++, j += stride)
+            out[i] = buffer[j];
+        return out;
+    });
+    return {
+        columns, count, data,
+        column(name) {
+            const at = columns.indexOf(name);
+            if (at < 0)
+                throw new Error(`readTable: no column "${name}" (have ${columns.join(', ')})`);
+            // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+            return data[at];
+        },
+        rows() {
+            const rows = [];
+            for (let i = 0; i < count; i++) {
+                const row = {};
+                // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+                for (let c = 0; c < columns.length; c++)
+                    row[columns[c]] = data[c][i];
+                rows.push(row);
+            }
+            return rows;
+        },
+    };
+}

package/dist/text.d.ts

@@ -0,0 +1,23 @@
+/** Putting a resolved text look on a node. The look itself is a theme matter (`TextProps`, see theme.ts). */
+import type { PlatformNode, TextMeasurer } from './platform.ts';
+import type { Size } from './geometry.ts';
+import type { Surface } from './surface.ts';
+import type { TextProps } from './theme.ts';
+/**
+ * Put a style on a node, so that the text inside it, and in nodes below it that say nothing of their own, follows it.
+ * The anchor is the style's `align` unless the caller places the text by its own geometry and says so: setting it twice
+ * would write it twice every flush.
+ */
+export declare function applyText(surface: Surface, node: PlatformNode, t: TextProps, anchor?: 'start' | 'middle' | 'end'): void;
+/** Line height as a multiple of the font size. */
+export declare const LINE_HEIGHT = 1.25;
+/** The size of text that may span several lines (split at '\n'), and how many it has. */
+export declare function measureBlock(measure: TextMeasurer, text: string, t: TextProps): Size & {
+    lines: number;
+};
+/**
+ * Draw text that may span lines, one node per line since the platform has no tspans. `x` is where each line is anchored
+ * (its own `text-anchor` says which end of it), `top` the top of the block. Lines left over from a longer text are
+ * removed; `previous` is how many there were, and the new count is returned for the next call.
+ */
+export declare function paintLines(surface: Surface, prefix: string, text: string, x: number, top: number, t: TextProps, previous: number, parent?: PlatformNode): number;

package/dist/text.js

@@ -0,0 +1,44 @@
+/**
+ * Put a style on a node, so that the text inside it, and in nodes below it that say nothing of their own, follows it.
+ * The anchor is the style's `align` unless the caller places the text by its own geometry and says so: setting it twice
+ * would write it twice every flush.
+ */
+export function applyText(surface, node, t, anchor = t.align) {
+    surface.set(node, 'font-size', t.size);
+    surface.set(node, 'fill', t.color);
+    surface.set(node, 'text-anchor', anchor);
+    surface.set(node, 'font-family', t.family);
+    surface.set(node, 'font-weight', t.weight);
+    surface.set(node, 'stroke', t.halo);
+    surface.set(node, 'stroke-width', t.haloWidth);
+    // Paint the halo (the stroke) first, so it sits behind the glyphs instead of eating into them.
+    surface.set(node, 'paint-order', 'stroke');
+    surface.set(node, 'stroke-linejoin', 'round');
+}
+/** Line height as a multiple of the font size. */
+export const LINE_HEIGHT = 1.25;
+/** The size of text that may span several lines (split at '\n'), and how many it has. */
+export function measureBlock(measure, text, t) {
+    const lines = text.split('\n');
+    let width = 0;
+    for (const line of lines)
+        width = Math.max(width, measure(line, { family: t.family === 'inherit' ? 'sans-serif' : t.family, size: t.size, weight: t.weight }).width);
+    return { width, height: lines.length * t.size * LINE_HEIGHT, lines: lines.length };
+}
+/**
+ * Draw text that may span lines, one node per line since the platform has no tspans. `x` is where each line is anchored
+ * (its own `text-anchor` says which end of it), `top` the top of the block. Lines left over from a longer text are
+ * removed; `previous` is how many there were, and the new count is returned for the next call.
+ */
+export function paintLines(surface, prefix, text, x, top, t, previous, parent) {
+    const lines = text.split('\n');
+    lines.forEach((line, i) => {
+        const n = surface.node(`${prefix}${i}`, 'text', parent ? { parent } : {});
+        surface.set(n, 'x', Math.round(x * 100) / 100);
+        surface.set(n, 'y', Math.round((top + t.size * (0.85 + LINE_HEIGHT * i)) * 100) / 100);
+        surface.text(n, line);
+    });
+    for (let i = lines.length; i < previous; i++)
+        surface.remove(`${prefix}${i}`);
+    return lines.length;
+}

package/dist/theme.d.ts

@@ -0,0 +1,174 @@
+/**
+ * Themes: every default look in one place, and the rule for choosing between them.
+ *
+ * Why a stylesheet and not flat options: a chart has dozens of things that can be styled (tick labels, titles, gridlines,
+ * markers…) and new elements add more. A theme maps *selectors* (names for kinds of thing) to bags of style properties,
+ * so a new element needs a new name and no change here, and a user can restyle a whole family at once (`text`) or one
+ * member (`tickLabel`).
+ *
+ * How a look is decided
+ * ─────────────────────
+ * An element asks for its look with a *chain* of selectors, most specific first, ending in a *root*:
+ *
+ *     this.styleFor(['tickLabel', 'axis', 'text'])        // → every text property, all defined
+ *
+ * Each property is found independently, by the first of these that defines it:
+ *   1. The element's own attributes (`local`): the common ones, such as `stroke` or `fill`, which are exactly the
+ *      style properties of the same name.
+ *   2. The `style` blocks of the element and then each ancestor up to the chart: nearest first. Inside one block the
+ *      chain is tried in order, so `tickLabel` beats `axis` beats `text`.
+ *   3. The chart's base theme, the same way, except that the element's *accent* (the colour its series was given from the
+ *      palette) is tried just before the root. So the palette is the default colour, and anything that names the colour
+ *      beats it.
+ *
+ * Nearest-first means a block you write close to an element wins over the whole of the base theme, however specific the
+ * base theme's selector was: `plane.style = { text: { color: 'red' } }` really does make that plane's text red. The
+ * price is that to override one specific selector against a nearer general one, set the specific one at that level too.
+ *
+ * Why the types hold together: the base theme must define every property of every root (`Roots`), and a chain must end
+ * in a root, so there is always a value to find and `styleFor` can be typed as returning all of them. Both interfaces
+ * below can be augmented, which is how a custom element joins in:
+ *
+ *     declare module 'inkplot' { interface Selectors { boxLabel: TextProps } }
+ *     // in the element:  this.styleFor(['boxLabel', 'text'])
+ */
+/**
+ * The look of text. `halo` is a colour drawn round the glyphs to keep them legible over data, `haloWidth` its total width.
+ * `align` is where text sits in the room it has: a title along its band, the lines of a callout in its box, a line
+ * annotation's label along its line. Text that is placed at a point by its own geometry (tick labels) ignores it.
+ */
+export interface TextProps {
+    size: number;
+    color: string;
+    family: string;
+    weight: number | string;
+    halo: string;
+    haloWidth: number;
+    align: 'start' | 'middle' | 'end';
+}
+/** The look of a stroked line. `dash` is an SVG dash pattern, or 'none'. */
+export interface LineProps {
+    color: string;
+    width: number;
+    dash: string;
+    opacity: number;
+}
+/** The look of a filled shape. `stroke` may be 'none'. */
+export interface ShapeProps {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+}
+/** Room an axis takes, in pixels: tick length, gap between ticks and labels, and padding round the title and after the axis. */
+export interface AxisMetrics {
+    tickLength: number;
+    labelGap: number;
+    spacing: number;
+}
+/** Half the width of a marker in pixels. */
+export interface MarkerMetrics {
+    size: number;
+}
+/**
+ * What a callout is made of, besides how it looks. `outline` is which of the box's edges are drawn: 'box' all four,
+ * 'edge' only the one the arm meets, 'none' none (the fill, if any, stays). `offset` is how far an automatically placed
+ * box sits from its point, `padding` the room round the text inside it, and `pointer` the radius of the dot on the point.
+ */
+export interface CalloutMetrics {
+    padding: number;
+    outline: 'box' | 'edge' | 'none';
+    offset: number;
+    pointer: number;
+}
+/**
+ * The selectors, and the properties each can set. `axis` and `key` carry a colour that flows to both their text and
+ * their lines, so one setting colours a whole axis. Augment to add your own.
+ */
+export interface Selectors {
+    text: TextProps;
+    line: LineProps;
+    shape: ShapeProps;
+    axis: Partial<AxisMetrics & TextProps & LineProps>;
+    marker: Partial<MarkerMetrics & ShapeProps>;
+    callout: Partial<CalloutMetrics>;
+    /** The chart itself. `background` is a colour for a rect filling the whole drawing; unset (the default) paints nothing. */
+    chart: {
+        background?: string;
+    };
+    /** A tooltip's metrics: what it leaves unsaid it takes from `callout`. */
+    tooltip: Partial<CalloutMetrics>;
+    tickLabel: TextProps;
+    axisTitle: TextProps;
+    chartTitle: TextProps;
+    chartSubtitle: TextProps;
+    chartCaption: TextProps;
+    annotationLabel: TextProps;
+    calloutText: TextProps;
+    tooltipText: TextProps;
+    key: Partial<TextProps & LineProps>;
+    keyTitle: TextProps;
+    keyLabel: TextProps;
+    legend: Partial<TextProps>;
+    legendTitle: TextProps;
+    legendLabel: TextProps;
+    axisLine: LineProps;
+    gridline: LineProps;
+    frame: LineProps;
+    /** The guide lines of a crosshair. */
+    crosshair: LineProps;
+    /** The outline round what has keyboard focus. */
+    focusRing: LineProps;
+    keyLine: LineProps;
+    seriesLine: LineProps;
+    annotationLine: LineProps;
+    /** The whiskers and caps of an `ErrorBars`. */
+    errorBar: LineProps;
+    /** The median, whiskers and caps of a `BoxPath`. */
+    boxLine: LineProps;
+    calloutArm: LineProps;
+    /** The box a `BoxZoom` drags out, and the one a `Brush` leaves. */
+    selection: ShapeProps;
+    seriesArea: ShapeProps;
+    /** The region of an `ErrorBand`. */
+    errorBand: ShapeProps;
+    /** The box of a `BoxPath`. */
+    seriesBox: ShapeProps;
+    seriesBar: ShapeProps;
+    /** The cells of a `HeatMap`. */
+    heatCell: ShapeProps;
+    calloutBox: ShapeProps;
+    tooltipBox: ShapeProps;
+    dotMarker: Partial<MarkerMetrics & ShapeProps>;
+    lineMarker: Partial<MarkerMetrics & ShapeProps>;
+    shapeMarker: Partial<MarkerMetrics & ShapeProps>;
+}
+/** The selectors every chain ends in. The base theme defines all of their properties. Augment together with `Selectors`. */
+export interface Roots {
+    text: TextProps;
+    line: LineProps;
+    shape: ShapeProps;
+    axis: AxisMetrics;
+    marker: MarkerMetrics;
+    callout: CalloutMetrics;
+}
+export type SelectorName = keyof Selectors;
+/** Selectors to style, each with only the properties it wants to change. */
+export type Theme = {
+    [S in keyof Selectors]?: Partial<Selectors[S]>;
+};
+/** A complete theme: every root fully defined, and the colours series take in turn. */
+export type BaseTheme = Theme & {
+    [R in keyof Roots]: Roots[R];
+} & {
+    palette: readonly string[];
+};
+/**
+ * Finds each property of the chain's root. `scopes` run from the nearest `style` block outwards; `base` is last.
+ * Pure, so it can be tested without a chart.
+ */
+export declare function resolveStyle<R extends keyof Roots>(chain: readonly [...SelectorName[], R], scopes: readonly (Theme | undefined)[], base: BaseTheme, local?: Partial<Roots[R]>, accent?: Partial<Roots[R]>): Roots[R];
+/** A theme derived from another: each selector in `patch` is merged over the same one in `base`, property by property. */
+export declare function extendTheme<B extends BaseTheme>(base: B, patch: Theme & {
+    palette?: readonly string[];
+}): B;

package/dist/theme.js

@@ -0,0 +1,73 @@
+/* oxlint-disable typescript/consistent-type-assertions -- theme bags are open maps merged by key at runtime; the result is typed as the schema it was checked against */
+/**
+ * Themes: every default look in one place, and the rule for choosing between them.
+ *
+ * Why a stylesheet and not flat options: a chart has dozens of things that can be styled (tick labels, titles, gridlines,
+ * markers…) and new elements add more. A theme maps *selectors* (names for kinds of thing) to bags of style properties,
+ * so a new element needs a new name and no change here, and a user can restyle a whole family at once (`text`) or one
+ * member (`tickLabel`).
+ *
+ * How a look is decided
+ * ─────────────────────
+ * An element asks for its look with a *chain* of selectors, most specific first, ending in a *root*:
+ *
+ *     this.styleFor(['tickLabel', 'axis', 'text'])        // → every text property, all defined
+ *
+ * Each property is found independently, by the first of these that defines it:
+ *   1. The element's own attributes (`local`): the common ones, such as `stroke` or `fill`, which are exactly the
+ *      style properties of the same name.
+ *   2. The `style` blocks of the element and then each ancestor up to the chart: nearest first. Inside one block the
+ *      chain is tried in order, so `tickLabel` beats `axis` beats `text`.
+ *   3. The chart's base theme, the same way, except that the element's *accent* (the colour its series was given from the
+ *      palette) is tried just before the root. So the palette is the default colour, and anything that names the colour
+ *      beats it.
+ *
+ * Nearest-first means a block you write close to an element wins over the whole of the base theme, however specific the
+ * base theme's selector was: `plane.style = { text: { color: 'red' } }` really does make that plane's text red. The
+ * price is that to override one specific selector against a nearer general one, set the specific one at that level too.
+ *
+ * Why the types hold together: the base theme must define every property of every root (`Roots`), and a chain must end
+ * in a root, so there is always a value to find and `styleFor` can be typed as returning all of them. Both interfaces
+ * below can be augmented, which is how a custom element joins in:
+ *
+ *     declare module 'inkplot' { interface Selectors { boxLabel: TextProps } }
+ *     // in the element:  this.styleFor(['boxLabel', 'text'])
+ */
+/**
+ * Finds each property of the chain's root. `scopes` run from the nearest `style` block outwards; `base` is last.
+ * Pure, so it can be tested without a chart.
+ */
+export function resolveStyle(chain, scopes, base, local, accent) {
+    // The chain's names and the theme's blocks are typed by selector; here they are looked up by string.
+    const root = chain[chain.length - 1], names = chain, blocks = base;
+    const out = {};
+    const loc = local, acc = accent;
+    // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+    for (const key of Object.keys(blocks[root])) {
+        let v = loc?.[key];
+        for (let s = 0; v === undefined && s < scopes.length; s++) {
+            const scope = scopes[s];
+            // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+            if (scope)
+                for (let c = 0; v === undefined && c < names.length; c++)
+                    v = scope[names[c]]?.[key];
+        }
+        for (let c = 0; v === undefined && c < names.length; c++) {
+            // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+            const sel = names[c];
+            if (sel === root)
+                v = acc?.[key];
+            v ??= blocks[sel]?.[key];
+        }
+        out[key] = v;
+    }
+    return out;
+}
+/** A theme derived from another: each selector in `patch` is merged over the same one in `base`, property by property. */
+export function extendTheme(base, patch) {
+    const out = { ...base };
+    for (const [selector, props] of Object.entries(patch)) {
+        out[selector] = selector === 'palette' ? props : { ...base[selector], ...props };
+    }
+    return out;
+}

package/dist/themes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The built-in themes. Separate from `theme.ts` and from each other's use so that a chart bundles only the one it names:
+ * a theme is a plain object, and one that nothing imports is dropped by the bundler.
+ */
+import { type BaseTheme } from './theme.ts';
+/** Dark text and lines on a light page. The look the library had before themes existed. */
+export declare const lightTheme: BaseTheme;
+/** Light text and lines for a dark page. The chart paints no background unless `chart.background` is set. */
+export declare const darkTheme: BaseTheme;

package/dist/themes.js

@@ -0,0 +1,56 @@
+/**
+ * The built-in themes. Separate from `theme.ts` and from each other's use so that a chart bundles only the one it names:
+ * a theme is a plain object, and one that nothing imports is dropped by the bundler.
+ */
+import { extendTheme } from './theme.js';
+const FONT = 'system-ui, -apple-system, "Segoe UI", sans-serif';
+/** Dark text and lines on a light page. The look the library had before themes existed. */
+export const lightTheme = {
+    palette: ['#2a6fdb', '#e0483e', '#2e9e5b', '#e0a01b', '#8a56c9', '#1c9aa6'],
+    text: { size: 11, color: '#444', family: FONT, weight: 'normal', halo: 'none', haloWidth: 3, align: 'start' },
+    line: { color: '#444', width: 1, dash: 'none', opacity: 1 },
+    shape: { fill: '#2a6fdb', stroke: 'none', strokeWidth: 1, opacity: 1 },
+    axis: { tickLength: 5, labelGap: 3, spacing: 4 },
+    marker: { size: 3 },
+    callout: { padding: 6, outline: 'box', offset: 22, pointer: 3 },
+    axisTitle: { size: 12 },
+    chartTitle: { size: 16, weight: 600 },
+    chartSubtitle: { size: 12, color: '#666' },
+    chartCaption: { size: 10, color: '#777' },
+    annotationLine: { color: '#8a5a44', dash: '5 3' },
+    calloutBox: { fill: '#fff', stroke: '#999' },
+    calloutArm: { color: '#999' },
+    calloutText: { color: '#333' },
+    keyTitle: { weight: 600 },
+    legendTitle: { weight: 600 },
+    gridline: { color: '#e6e6e6' },
+    frame: { color: '#bbb' },
+    crosshair: { color: '#888', dash: '4 3' },
+    focusRing: { color: '#0b57d0', width: 2 },
+    selection: { fill: '#2a6fdb', stroke: '#2a6fdb', opacity: 0.2 },
+    seriesLine: { width: 1.5 },
+    seriesArea: { opacity: 0.3, strokeWidth: 1.5 },
+    errorBar: { width: 1.5 },
+    boxLine: { width: 1.5 },
+    seriesBox: { opacity: 0.4, strokeWidth: 1.5 },
+    errorBand: { opacity: 0.2 },
+    lineMarker: { strokeWidth: 1.5 },
+};
+/** Light text and lines for a dark page. The chart paints no background unless `chart.background` is set. */
+// Marked pure so that a bundle that only uses `lightTheme` leaves this out: a call at the top of a module is otherwise kept.
+export const darkTheme = /* @__PURE__ */ extendTheme(lightTheme, {
+    palette: ['#5b9bff', '#ff6b61', '#4fcf85', '#f2bc45', '#b18af0', '#4cc4d1'],
+    text: { color: '#d4d4d4' },
+    line: { color: '#d4d4d4' },
+    gridline: { color: '#333' },
+    frame: { color: '#666' },
+    crosshair: { color: '#999' },
+    focusRing: { color: '#8ab4f8' },
+    chartSubtitle: { color: '#aaa' },
+    chartCaption: { color: '#999' },
+    annotationLine: { color: '#d9a98f' },
+    calloutBox: { fill: '#1b252b', stroke: '#778' },
+    calloutArm: { color: '#889' },
+    calloutText: { color: '#e0e0e0' },
+    selection: { fill: '#5b9bff', stroke: '#5b9bff' },
+});