smithkit 0.2.0 → 0.3.0

package/dist/lib/Smith.js

@@ -1,25 +1,9 @@
-import * as d3 from 'd3';
-import { MouseGesture } from './interaction/MouseGesture.js';
-import { SmithSvg } from './svg/SmithSvg.js';
-import { LabelLayout } from './svg/LabelLayout.js';
-import { SvgExporter } from './svg/SvgExporter.js';
-import { SmithGroup } from './svg/SmithGroup.js';
-import { SmithCircle } from './svg/SmithCircle.js';
-import { SmithData } from './traces/SmithData.js';
-import { SmithCursor } from './interaction/SmithCursor.js';
-import { ConstResistance } from './grid/ConstResistance.js';
-import { ConstReactance } from './grid/ConstReactance.js';
-import { ConstConductance } from './grid/ConstConductance.js';
-import { ConstSusceptance } from './grid/ConstSusceptance.js';
-import { ConstQCircles } from './grid/ConstQCircles.js';
-import { ConstSwrCircles } from './grid/ConstSwrCircles.js';
-import { SmithScaler } from './svg/SmithScaler.js';
-import { SmithConstantCircle } from './rf/SmithConstantCircle.js';
-import { GridDefinitions } from './grid/GridDefinitions.js';
+import { MarkerLegend } from './svg/MarkerLegend.js';
+import { ImageExporter } from './svg/ImageExporter.js';
+import { Theme } from './appearance/Theme.js';
+import { color as parseColor } from 'd3';
+import { SvgChartRenderer } from './rendering/SvgChartRenderer.js';
 import { Complex } from './math/Complex.js';
-import { SmithPeripheralScales } from './scales/SmithPeripheralScales.js';
-import { GridLayerControl } from './grid/GridLayerControl.js';
-import { CircleLayerControl } from './grid/CircleLayerControl.js';
 import { RfCalculations } from './rf/RfCalculations.js';
 import { MarkerMeasurements } from './MarkerMeasurements.js';
 export var SmithEventType;
@@ -32,206 +16,101 @@ export var SmithEventType;
 })(SmithEventType || (SmithEventType = {}));
 export class Smith {
     referenceOhms;
-    calcs = new SmithConstantCircle();
-    scalers;
-    defaultTransform = d3.zoomIdentity.translate(62.5, 62.5).scale(0.75);
-    transform = d3.zoomIdentity;
-    zoomEnabled = true;
-    applyingView = false;
-    zoomBehavior = d3.zoom();
-    svg;
-    resizeObserver;
-    labelLayout;
-    container;
-    dataContainer;
-    markerContainer;
-    reactanceAxis;
-    constResistance;
-    constReactance;
-    constConductance;
-    constSusceptance;
-    constSwrCircles;
-    constQCircles;
-    cursor;
-    peripheralScaleRenderer = new SmithPeripheralScales();
+    theme;
+    renderer;
     data = [];
     destroyed = false;
-    mouseGesture = new MouseGesture();
     nextDatasetColor = 0;
     nextTraceId = 1;
     nextMarkerId = 1;
     traceMetadata = new WeakMap();
     markerIds = new WeakMap();
     draggedMarkers = new Set();
-    cursorBeforeMarkerDrag = null;
     listeners = new Set();
     layers;
     peripheralScales;
-    constructor(referenceOhms = 50) {
+    constructor(referenceOhms = 50, appearance = {}) {
         this.referenceOhms = referenceOhms;
         if (!Number.isFinite(referenceOhms) || referenceOhms <= 0) {
             throw new RangeError('Reference impedance must be positive and finite.');
         }
-        const viewBoxSize = 500;
-        const gridData = GridDefinitions.create();
-        this.scalers = this.createScalers(viewBoxSize);
-        this.svg = new SmithSvg(viewBoxSize);
-        this.container = new SmithGroup();
-        this.constResistance = new ConstResistance({
-            data: gridData,
-            scaler: this.scalers.default,
-            showMinor: true,
+        this.theme = Theme.resolve(appearance);
+        this.renderer = new SvgChartRenderer((position) => {
+            this.emit({
+                type: SmithEventType.Cursor,
+                data: position ? RfCalculations.readReflection(position, this.referenceOhms) : undefined,
+            });
         });
-        this.constResistance.show();
-        this.constReactance = new ConstReactance({
-            data: gridData,
-            scaler: this.scalers.default,
-            showMinor: true,
-        });
-        this.constReactance.show();
-        this.constConductance = new ConstConductance({
-            data: gridData,
-            scaler: this.scalers.default,
-            showMinor: true,
-        });
-        this.constConductance.hide();
-        this.constSusceptance = new ConstSusceptance({
-            data: gridData,
-            scaler: this.scalers.default,
-            showMinor: true,
-        });
-        this.constSusceptance.hide();
-        this.constQCircles = new ConstQCircles(this.scalers.default);
-        this.constQCircles.hide();
-        this.constSwrCircles = new ConstSwrCircles(this.scalers.default);
-        this.constSwrCircles.hide();
-        this.cursor = this.initCursor();
-        const cursorContainer = this.cursorContainer();
-        this.reactanceAxis = this.drawReactanceAxis({
-            stroke: '#334155',
-            strokeWidth: '1',
-            fill: 'none',
-        });
-        this.dataContainer = new SmithGroup().attr('data-layer', 'samples');
-        this.markerContainer = new SmithGroup().attr('data-layer', 'markers');
-        // build chart
-        this.svg.append(this.container);
-        this.container.append(this.constConductance.draw().attr('data-layer', 'conductance'));
-        this.container.append(this.constSusceptance.draw().attr('data-layer', 'susceptance'));
-        this.container.append(this.constResistance.draw().attr('data-layer', 'resistance'));
-        this.container.append(this.constReactance.draw().attr('data-layer', 'reactance'));
-        this.container.append(this.constQCircles.draw());
-        this.container.append(this.constSwrCircles.draw());
-        this.container.append(this.peripheralScaleRenderer);
-        this.container.append(this.cursor.Group);
-        this.container.append(this.reactanceAxis);
-        this.container.append(cursorContainer);
-        this.container.append(this.dataContainer);
-        const labels = new SmithGroup().attr('data-layer', 'labels').attr('pointer-events', 'none');
-        for (const [name, layer] of [
-            ['conductance', this.constConductance],
-            ['susceptance', this.constSusceptance],
-            ['resistance', this.constResistance],
-            ['reactance', this.constReactance],
-        ]) {
-            labels.append(layer.labels.attr('data-label-layer', name));
+        this.renderer.setTheme(this.theme);
+        this.layers = this.renderer.layers;
+        this.peripheralScales = this.renderer.peripheralScales;
+    }
+    /** Replace the appearance while retaining explicit layer styles and trace colors. */
+    setAppearance(appearance) {
+        this.assertAlive();
+        const theme = Theme.resolve(appearance);
+        this.theme = theme;
+        this.renderer.setTheme(theme);
+        for (const data of this.data) {
+            const index = this.traceMetadata.get(data).colorIndex;
+            if (index !== undefined) {
+                data.setColor(theme.traceColors[index % theme.traceColors.length]);
+            }
         }
-        labels.append(this.peripheralScaleRenderer.labels);
-        this.container.append(labels);
-        this.container.append(this.markerContainer);
-        this.labelLayout = new LabelLayout(this.svg.Node, labels.Node, this.defaultTransform);
-        const assertAlive = () => this.assertAlive();
-        this.layers = {
-            resistance: new GridLayerControl(this.constResistance, assertAlive, () => this.labelLayout.update(true)),
-            reactance: new GridLayerControl(this.constReactance, assertAlive, () => this.labelLayout.update(true)),
-            conductance: new GridLayerControl(this.constConductance, assertAlive, () => this.labelLayout.update(true)),
-            susceptance: new GridLayerControl(this.constSusceptance, assertAlive, () => this.labelLayout.update(true)),
-            q: new CircleLayerControl(this.constQCircles, 0, assertAlive),
-            vswr: new CircleLayerControl(this.constSwrCircles, 1, assertAlive),
-        };
-        this.peripheralScales = {
-            setVisible: (visible) => {
-                assertAlive();
-                if (visible) {
-                    this.peripheralScaleRenderer.show();
-                }
-                else {
-                    this.peripheralScaleRenderer.hide();
-                }
-                this.labelLayout.update(true);
-            },
-            update: (gamma) => {
-                assertAlive();
-                this.peripheralScaleRenderer.update(gamma);
-            },
-        };
-        this.initializeZoom();
-        this.resizeObserver = new ResizeObserver(() => this.updateViewportScale());
-        this.resizeObserver.observe(this.svg.Node);
     }
     draw(target) {
         this.assertAlive();
-        const host = typeof target === 'string' ? document.querySelector(target) : target;
-        if (!host) {
-            throw new Error('Chart container was not found.');
-        }
-        host.appendChild(this.svg.Node);
-        this.updateViewportScale();
+        this.renderer.draw(target);
     }
-    /** Export the current mounted view as standalone SVG with a transparent background. */
-    toSvg() {
+    /** Export the current mounted view as standalone SVG with its configured background. */
+    toSvg(options) {
         this.assertAlive();
-        return SvgExporter.chart(this.svg.Node);
+        const source = this.renderer.toSvg();
+        if (options === undefined) {
+            return source;
+        }
+        const sources = [source];
+        if (options.scales) {
+            sources.push(options.scales.toSvg({ readout: options.scaleReadout }));
+        }
+        return ImageExporter.svg(sources, options, this.exportLegend(options));
+    }
+    exportLegend(options) {
+        const traces = this.getTraces();
+        return {
+            entries: [
+                ...(options.legend ? traces.filter((trace) => trace.visible) : []),
+                ...(options.markerLegend
+                    ? MarkerLegend.entries(traces, (id) => this.getMarker(id), options.markerLegend)
+                    : []),
+            ],
+            textColor: this.theme.grid.textColor,
+            fontFamily: this.theme.fontFamily,
+        };
+    }
+    /** Export the mounted view as PNG, optionally with radial scales and a trace legend. */
+    async toPng(options = {}) {
+        const sources = [this.toSvg()];
+        if (options.scales) {
+            sources.push(options.scales.toSvg({ readout: options.scaleReadout }));
+        }
+        return ImageExporter.png(sources, options, this.exportLegend(options));
     }
     /** Remove this chart and release its event handlers. Safe to call more than once. */
     destroy() {
         if (this.destroyed) {
             return;
         }
-        this.resizeObserver.disconnect();
         this.listeners.clear();
         this.clearTraces();
         this.destroyed = true;
-        this.cursor.setMoveHandler(null);
-        this.mouseGesture.destroy();
-        this.zoomBehavior.on('start', null).on('zoom', null);
-        this.svg.Element.interrupt().on('.zoom', null);
-        this.svg.Element.selectAll('*').interrupt().on('.smithkit', null).on('.drag', null);
-        this.svg.Element.remove();
-    }
-    updateViewportScale() {
-        if (this.destroyed) {
-            return;
-        }
-        const matrix = this.svg.Node.getScreenCTM();
-        if (matrix) {
-            const scale = Math.hypot(matrix.a, matrix.b);
-            this.data.forEach((trace) => trace.setViewportScale(scale));
-        }
-        this.labelLayout.update();
+        this.renderer.destroy();
     }
     assertAlive() {
         if (this.destroyed) {
             throw new Error('This Smith chart has been destroyed. Create a new instance.');
         }
     }
-    createScalers(size) {
-        const impedance = new SmithScaler(d3.scaleLinear().domain([-1, 1]).range([0, size]), d3.scaleLinear().domain([1, -1]).range([0, size]), d3
-            .scaleLinear()
-            .domain([0, 1])
-            .range([0, size / 2]));
-        const admittance = new SmithScaler(d3.scaleLinear().domain([1, -1]).range([0, size]), d3.scaleLinear().domain([-1, 1]).range([0, size]), d3
-            .scaleLinear()
-            .domain([0, 1])
-            .range([0, size / 2]));
-        return { default: impedance, impedance, admittance };
-    }
-    cursorMove(p) {
-        if (this.draggedMarkers.size > 0) {
-            return;
-        }
-        this.cursor.Position = Complex.from(this.scalers.default.pointInvert(p));
-    }
     markerDragChanged(marker, dragging) {
         const wasDragging = this.draggedMarkers.size > 0;
         if (dragging) {
@@ -244,107 +123,23 @@ export class Smith {
         if (isDragging === wasDragging) {
             return;
         }
+        this.renderer.setMarkerDragging(isDragging);
         if (isDragging) {
-            this.cursorBeforeMarkerDrag = this.svg.Node.style.getPropertyValue('cursor') || null;
-            this.svg.Element.style('cursor', 'grabbing').style('--smithkit-marker-cursor', 'grabbing');
-            this.cursor.hide();
             this.emit({ type: SmithEventType.Cursor, data: undefined });
         }
-        else {
-            this.svg.Element.style('cursor', () => this.cursorBeforeMarkerDrag).style('--smithkit-marker-cursor', null);
-            this.cursorBeforeMarkerDrag = null;
-        }
-    }
-    initCursor() {
-        const cursor = new SmithCursor(this.scalers.default);
-        cursor.Group.attr('class', 'smith-cursor');
-        cursor.setMoveHandler(() => {
-            this.emit({ type: SmithEventType.Cursor, data: this.cursorReading });
-        });
-        return cursor;
     }
     /** Last cursor position. Use cursor events to detect pointer leave. */
     get cursorReading() {
-        return RfCalculations.readReflection(this.cursor.Position, this.referenceImpedanceOhms);
-    }
-    initializeZoom() {
-        const zoom = this.zoomBehavior
-            .scaleExtent([0.6, 1000])
-            .filter((event) => this.zoomEnabled &&
-            this.draggedMarkers.size === 0 &&
-            (!event.ctrlKey || event.type === 'wheel') &&
-            !event.button)
-            .on('start', (event) => {
-            if (event.sourceEvent) {
-                this.mouseGesture.capture(event.sourceEvent, 'zoom');
-            }
-        })
-            .on('zoom', (event) => {
-            if ((!this.zoomEnabled || this.draggedMarkers.size > 0) && !this.applyingView) {
-                // An already active mouse/touch gesture still needs its normal end event.
-                // Restore D3's view through its public API while that gesture finishes.
-                this.applyView(this.transform);
-                return;
-            }
-            this.onZoom(event.transform);
-        });
-        this.svg.Element.call(zoom);
-        this.resetView();
+        return RfCalculations.readReflection(this.renderer.cursorPosition, this.referenceOhms);
     }
     /** Enable or disable wheel, double-click, and mouse/touch zoom/pan. Keeps the current view. */
     setZoomEnabled(enabled) {
         this.assertAlive();
-        if (typeof enabled !== 'boolean') {
-            throw new TypeError('Zoom enabled must be a boolean.');
-        }
-        if (this.zoomEnabled === enabled) {
-            return;
-        }
-        this.zoomEnabled = enabled;
-        if (!enabled) {
-            this.svg.Element.interrupt();
-        }
-    }
-    applyView(transform) {
-        this.applyingView = true;
-        try {
-            this.svg.Element.call(this.zoomBehavior.transform, transform);
-        }
-        finally {
-            this.applyingView = false;
-        }
+        this.renderer.setZoomEnabled(enabled);
     }
     resetView() {
         this.assertAlive();
-        const transform = this.defaultTransform;
-        this.applyView(transform);
-    }
-    onZoom(transform) {
-        if (this.destroyed) {
-            return;
-        }
-        this.transform = transform;
-        this.container.Element.attr('transform', transform.toString());
-        this.data.forEach((d) => d.zoom(transform));
-    }
-    cursorContainer() {
-        const shape = this.drawReactanceAxis({ fill: 'transparent', stroke: 'none' });
-        shape.Element.style('pointer-events', 'all')
-            .on('pointermove.smithkit', (event) => {
-            this.cursorMove(d3.pointer(event));
-        })
-            .on('pointerleave.smithkit', () => {
-            this.cursor.hide();
-            this.emit({ type: SmithEventType.Cursor, data: undefined });
-        });
-        return shape;
-    }
-    drawReactanceAxis(opts) {
-        const c = this.calcs.resistanceCircle(0);
-        c.p[0] = this.scalers.default.x(c.p[0]);
-        c.p[1] = this.scalers.default.y(c.p[1]);
-        c.r = this.scalers.default.r(c.r);
-        return new SmithCircle(c, opts);
+        this.renderer.resetView();
     }
     /** Add a named trace with one initial marker. Returns a chart-local, stable ID. */
     addTrace(values, options = {}) {
@@ -356,7 +151,6 @@ export class Smith {
         const data = this.createSmithData(values, this.nextDatasetColor, options);
         this.nextDatasetColor++;
         this.data.push(data);
-        this.updateViewportScale();
         const id = this.traceMetadata.get(data).id;
         this.setTraceOptions(id, options);
         return id;
@@ -364,7 +158,8 @@ export class Smith {
     /** Detached metadata snapshots; IDs and marker display numbers survive removals. */
     getTraces() {
         return this.data.map((data) => ({
-            ...this.traceMetadata.get(data),
+            id: this.traceMetadata.get(data).id,
+            name: this.traceMetadata.get(data).name,
             ...data.Style,
             color: data.Color,
             visible: data.Visible,
@@ -410,7 +205,7 @@ export class Smith {
             throw new TypeError('Trace name must not be empty.');
         }
         if (options.color !== undefined &&
-            (typeof options.color !== 'string' || !d3.color(options.color))) {
+            (typeof options.color !== 'string' || !parseColor(options.color))) {
             throw new TypeError('Trace color must be a solid CSS color.');
         }
         if (options.visible !== undefined && typeof options.visible !== 'boolean') {
@@ -431,6 +226,7 @@ export class Smith {
         }
         if (options.color !== undefined) {
             data.setColor(options.color);
+            delete this.traceMetadata.get(data).colorIndex;
         }
         if (options.visible !== undefined) {
             data.setVisible(options.visible);
@@ -457,7 +253,7 @@ export class Smith {
         if (index < 0) {
             return false;
         }
-        this.data[index].destroy();
+        this.renderer.removeTrace(this.data[index]);
         this.data.splice(index, 1);
         return true;
     }
@@ -537,17 +333,17 @@ export class Smith {
         this.data.forEach((data) => data.Markers.forEach((entry) => entry.marker.cancelDrag()));
         this.referenceOhms = referenceImpedanceOhms;
         this.data.forEach((data, index) => data.update(samples[index], 'sample-index'));
-        this.cursor.hide();
+        this.renderer.hideCursor();
         this.emit({ type: SmithEventType.Cursor, data: undefined });
     }
     clearTraces() {
         this.assertAlive();
-        this.data.forEach((dataset) => dataset.destroy());
+        this.data.forEach((dataset) => this.renderer.removeTrace(dataset));
         this.data = [];
     }
     createSmithData(values, dataset, options) {
-        const color = d3.schemeCategory10[(1 + dataset) % d3.schemeCategory10.length];
-        const data = new SmithData(values, color, this.transform, this.dataContainer, this.scalers.default, (marker, dragging) => {
+        const color = this.theme.traceColors[dataset % this.theme.traceColors.length];
+        const data = this.renderer.createTrace(values, color, options, (marker, dragging) => {
             this.markerDragChanged(marker, dragging);
             const snapshot = this.getMarker(this.markerId(marker));
             if (snapshot) {
@@ -556,9 +352,13 @@ export class Smith {
                     data: snapshot,
                 });
             }
-        }, this.markerContainer, options);
+        });
         const number = this.nextTraceId++;
-        this.traceMetadata.set(data, { id: `trace-${number}`, name: `Trace ${number}` });
+        this.traceMetadata.set(data, {
+            id: `trace-${number}`,
+            name: `Trace ${number}`,
+            colorIndex: dataset,
+        });
         data.setName(`Trace ${number}`);
         data.setMarkerSelectHandler((marker) => {
             const snapshot = this.getMarker(this.markerId(marker));

package/dist/lib/appearance/SvgTheme.d.ts

@@ -0,0 +1,6 @@
+import type { SmithTheme } from './types.js';
+/** Scope presentation tokens to one chart or scale component. Explicit SVG styles take priority. */
+export declare class SvgTheme {
+    private constructor();
+    static apply(element: HTMLElement | SVGElement, theme: SmithTheme): void;
+}

package/dist/lib/appearance/SvgTheme.js

@@ -0,0 +1,21 @@
+/** Scope presentation tokens to one chart or scale component. Explicit SVG styles take priority. */
+export class SvgTheme {
+    constructor() { }
+    static apply(element, theme) {
+        for (const [section, value] of Object.entries(theme)) {
+            if (Array.isArray(value)) {
+                continue;
+            }
+            if (typeof value === 'object') {
+                for (const [key, entry] of Object.entries(value)) {
+                    const suffix = key.toLowerCase().endsWith('fontsize') ? 'px' : '';
+                    element.style.setProperty(`--smithkit-${section}-${key}`, String(entry) + suffix);
+                }
+            }
+            else {
+                element.style.setProperty(`--smithkit-${section}`, value);
+            }
+        }
+        element.style.backgroundColor = theme.background;
+    }
+}

package/dist/lib/appearance/Theme.d.ts

@@ -0,0 +1,8 @@
+import type { SmithAppearance, SmithTheme } from './types.js';
+/** Resolve and validate a detached theme before touching any chart state or DOM. */
+export declare class Theme {
+    private constructor();
+    static resolve(appearance?: SmithAppearance): SmithTheme;
+    private static merge;
+    private static isColor;
+}

package/dist/lib/appearance/Theme.js

@@ -0,0 +1,120 @@
+import { color } from 'd3';
+/** Resolve and validate a detached theme before touching any chart state or DOM. */
+export class Theme {
+    constructor() { }
+    static resolve(appearance = {}) {
+        if (!appearance || typeof appearance !== 'object' || Array.isArray(appearance)) {
+            throw new TypeError('Appearance must be an object.');
+        }
+        const name = appearance.theme === undefined ? 'light' : appearance.theme;
+        if (name !== 'light' && name !== 'dark') {
+            throw new TypeError('Theme must be light or dark.');
+        }
+        const dark = name === 'dark';
+        const theme = {
+            background: dark ? '#0f172a' : 'transparent',
+            fontFamily: 'Verdana, sans-serif',
+            grid: {
+                stroke: dark ? '#94a3b8' : '#64748b',
+                textColor: dark ? '#e2e8f0' : '#111827',
+                majorWidth: 1,
+                minorWidth: 0.6,
+                fontSize: 7,
+            },
+            boundary: { stroke: dark ? '#cbd5e1' : '#334155', width: 1 },
+            circles: { q: dark ? '#93c5fd' : 'blue', vswr: dark ? '#fbbf24' : 'orange', width: 1 },
+            scales: {
+                stroke: dark ? '#94a3b8' : '#64748b',
+                boundaryColor: dark ? '#cbd5e1' : '#334155',
+                textColor: dark ? '#e2e8f0' : '#334155',
+                valueColor: dark ? '#fca5a5' : '#b42318',
+                indicatorColor: dark ? '#f87171' : '#dc2626',
+                indicatorOutline: dark ? '#0f172a' : 'white',
+                fontSize: 10,
+                titleFontSize: 12,
+                valueFontSize: 11,
+                peripheralFontSize: 10.5,
+            },
+            cursor: {
+                pointColor: dark ? '#fca5a5' : 'red',
+                impedanceColor: dark ? '#fca5a5' : 'red',
+                admittanceColor: dark ? '#86efac' : 'green',
+                pointSize: 5,
+                lineWidth: 1,
+            },
+            marker: {
+                outlineColor: dark ? '#e2e8f0' : 'gray',
+                textColor: 'white',
+                focusColor: dark ? '#93c5fd' : '#1d4ed8',
+                focusHaloColor: dark ? '#0f172a' : 'white',
+            },
+            traceColors: dark
+                ? [
+                    '#fb923c',
+                    '#4ade80',
+                    '#f87171',
+                    '#c084fc',
+                    '#d6a681',
+                    '#f472b6',
+                    '#cbd5e1',
+                    '#d4d45c',
+                    '#22d3ee',
+                    '#60a5fa',
+                ]
+                : [
+                    '#ff7f0e',
+                    '#2ca02c',
+                    '#d62728',
+                    '#9467bd',
+                    '#8c564b',
+                    '#e377c2',
+                    '#7f7f7f',
+                    '#bcbd22',
+                    '#17becf',
+                    '#1f77b4',
+                ],
+        };
+        if (appearance.overrides !== undefined) {
+            Theme.merge(theme, appearance.overrides);
+        }
+        return theme;
+    }
+    static merge(target, source, path = 'appearance') {
+        if (!source || typeof source !== 'object' || Array.isArray(source)) {
+            throw new TypeError(`${path} overrides must be an object.`);
+        }
+        for (const [key, value] of Object.entries(source)) {
+            if (!Object.hasOwn(target, key)) {
+                throw new TypeError(`Unknown appearance setting: ${path}.${key}.`);
+            }
+            if (value === undefined) {
+                continue;
+            }
+            const previous = target[key];
+            if (Array.isArray(previous)) {
+                if (!Array.isArray(value) || value.length === 0 || !value.every(Theme.isColor)) {
+                    throw new TypeError('Trace colors must be a non-empty array of solid CSS colors.');
+                }
+                target[key] = [...value];
+            }
+            else if (typeof previous === 'object') {
+                Theme.merge(previous, value, `${path}.${key}`);
+            }
+            else if (typeof previous === 'number') {
+                if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+                    throw new RangeError(`${path}.${key} must be positive and finite.`);
+                }
+                target[key] = value;
+            }
+            else {
+                if (key === 'fontFamily' ? typeof value !== 'string' || !value.trim() : !Theme.isColor(value)) {
+                    throw new TypeError(`${path}.${key} must be ${key === 'fontFamily' ? 'a non-empty font family' : 'a solid CSS color'}.`);
+                }
+                target[key] = value;
+            }
+        }
+    }
+    static isColor(value) {
+        return typeof value === 'string' && color(value) !== null;
+    }
+}