smithkit 0.2.0 → 0.4.0

package/dist/lib/interaction/SmithCursor.js

@@ -8,11 +8,6 @@ export class SmithCursor {
     scaler;
     epsilon = 1.5e-4;
     pendingMove;
-    drawingOpts = {
-        point: { radius: 5, color: 'red' },
-        impedance: { width: 1, color: 'red' },
-        admittance: { width: 1, color: 'green' },
-    };
     calcs = new SmithConstantCircle();
     zClipCircle = this.calcs.resistanceCircle(0);
     yClipCircle = this.calcs.conductanceCircle(0);
@@ -27,8 +22,8 @@ export class SmithCursor {
         this.group = new SmithGroup().attr('pointer-events', 'none');
         this.impedance = {
             group: new SmithGroup({
-                stroke: this.drawingOpts.impedance.color,
-                strokeWidth: this.drawingOpts.impedance.width.toString(),
+                stroke: 'var(--smithkit-cursor-impedanceColor)',
+                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
                 fill: 'none',
             }),
             resistance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -42,8 +37,8 @@ export class SmithCursor {
         this.impedance.reactance.line.nonScalingStroke();
         this.admittance = {
             group: new SmithGroup({
-                stroke: this.drawingOpts.admittance.color,
-                strokeWidth: this.drawingOpts.admittance.width.toString(),
+                stroke: 'var(--smithkit-cursor-admittanceColor)',
+                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
                 fill: 'none',
             }),
             conductance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -56,8 +51,8 @@ export class SmithCursor {
         this.admittance.susceptance.arc.nonScalingStroke();
         this.admittance.susceptance.line.nonScalingStroke();
         this.point = new SmithLine([0, 0], [0, 0], {
-            stroke: this.drawingOpts.point.color,
-            strokeWidth: this.drawingOpts.point.radius.toString(),
+            stroke: 'var(--smithkit-cursor-pointColor)',
+            strokeWidth: 'var(--smithkit-cursor-pointSize)',
             fill: 'none',
         });
         this.point.nonScalingStroke();
@@ -180,7 +175,4 @@ export class SmithCursor {
             this.cancelPendingMove();
         }
     }
-    setDrawOptions(opts) {
-        this.drawingOpts = opts;
-    }
 }

package/dist/lib/layers.d.ts

@@ -15,15 +15,21 @@ export interface CircleStyle {
     /** Non-scaling stroke width in CSS pixels. */
     strokeWidth: number;
 }
+export type GridDetail = 'basic' | 'standard' | 'detailed';
 /** Grid styling uses SVG user units, except non-scaling stroke widths in screen pixels. */
 export interface GridLayer {
     setVisible(visible: boolean): void;
-    setMinorVisible(visible: boolean): void;
+    /** Show or hide labels independently of grid lines. Default: true. */
+    setLabelsVisible(visible: boolean): void;
+    /** Default: standard. Basic shows only the principal normalized values. */
+    setDetail(detail: GridDetail): void;
     setStyle(style: Partial<GridStyle>): void;
 }
 export interface CircleLayer {
     setVisible(visible: boolean): void;
     setStyle(style: Partial<CircleStyle>): void;
+    /** Replace the complete set after validation; duplicates are ignored and empty clears it. */
+    setValues(values: readonly number[]): void;
     addValue(value: number): void;
     removeValue(value: number): void;
 }

package/dist/lib/options.d.ts

@@ -0,0 +1,54 @@
+import type { SmithAppearance } from './appearance/types.js';
+import type { CircleStyle, GridDetail, GridStyle } from './layers.js';
+/** Settings for an individual impedance/admittance grid layer. */
+export interface GridLayerOptions {
+    visible?: boolean;
+    detail?: GridDetail;
+    labelsVisible?: boolean;
+    style?: Partial<GridStyle>;
+}
+/** Shared settings for all four grids, followed by per-layer overrides. */
+export interface GridOptions {
+    /** Default: standard. */
+    detail?: GridDetail;
+    /** Default: true. */
+    labelsVisible?: boolean;
+    style?: Partial<GridStyle>;
+    layers?: {
+        resistance?: GridLayerOptions;
+        reactance?: GridLayerOptions;
+        conductance?: GridLayerOptions;
+        susceptance?: GridLayerOptions;
+    };
+}
+export interface CircleLayerOptions {
+    /** Default: false. */
+    visible?: boolean;
+    style?: Partial<CircleStyle>;
+    /** Replace the default values. Empty hides all circles; duplicate values are ignored. */
+    values?: readonly number[];
+}
+export interface CircleOptions {
+    q?: CircleLayerOptions;
+    vswr?: CircleLayerOptions;
+}
+export interface InteractionOptions {
+    /** Enable wheel/pan/pinch gestures. Default: false. */
+    zoom?: boolean;
+    /** Enable cursor overlay and pointer readings. Default: false. */
+    cursor?: boolean;
+}
+export interface PeripheralScalesOptions {
+    /** Show the peripheral rulers as one group. Default: false. */
+    visible?: boolean;
+}
+export interface SmithOptions {
+    /** Positive real reference impedance in ohms. Default: 50. */
+    referenceImpedanceOhms?: number;
+    /** Default: the light preset. Use overrides for fonts, colors, and marker/cursor styling. */
+    appearance?: SmithAppearance;
+    interaction?: InteractionOptions;
+    grid?: GridOptions;
+    circles?: CircleOptions;
+    peripheralScales?: PeripheralScalesOptions;
+}

package/dist/lib/options.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/rendering/SvgChartRenderer.d.ts

@@ -0,0 +1,69 @@
+import type { SmithTheme } from '../appearance/types.js';
+import { SmithData } from '../traces/SmithData.js';
+import type { SmithMarker } from '../traces/SmithMarker.js';
+import { TraceSamples } from '../samples.js';
+import { Complex } from '../math/Complex.js';
+import type { ChartLayers, PeripheralScales } from '../layers.js';
+import type { TraceStyle } from '../measurements.js';
+/** Internal SVG backend. Owns chart elements, view transforms, and SVG gestures. */
+export declare class SvgChartRenderer {
+    private onCursorChange;
+    private calcs;
+    private scalers;
+    private readonly defaultTransform;
+    private transform;
+    private zoomEnabled;
+    private cursorEnabled;
+    private applyingView;
+    private zoomBehavior;
+    private svg;
+    private resizeObserver;
+    private readonly labelLayout;
+    private container;
+    private dataContainer;
+    private markerContainer;
+    private reactanceAxis;
+    private constResistance;
+    private constReactance;
+    private constConductance;
+    private constSusceptance;
+    private constSwrCircles;
+    private constQCircles;
+    private cursor;
+    private peripheralScaleRenderer;
+    private readonly traces;
+    private destroyed;
+    private mouseGesture;
+    private markerDragging;
+    private cursorBeforeMarkerDrag;
+    readonly layers: ChartLayers;
+    readonly peripheralScales: PeripheralScales;
+    constructor(onCursorChange: ((position: Complex | undefined) => void) | null);
+    setTheme(theme: SmithTheme): void;
+    draw(target: string | HTMLElement): void;
+    /** Export the current mounted view as standalone SVG with its configured background. */
+    toSvg(): string;
+    /** Remove this chart and release its event handlers. Safe to call more than once. */
+    destroy(): void;
+    private updateViewportScale;
+    private assertAlive;
+    private createScalers;
+    private cursorMove;
+    setMarkerDragging(dragging: boolean): void;
+    hideCursor(): void;
+    /** Disable tracking and cancel queued readings; enabling waits for the next pointer move. */
+    setCursorEnabled(enabled: boolean): void;
+    private initCursor;
+    get cursorPosition(): Complex;
+    private initializeZoom;
+    /** Enable or disable wheel, double-click, and mouse/touch zoom/pan. Keeps the current view. */
+    setZoomEnabled(enabled: boolean): void;
+    private applyView;
+    resetView(): void;
+    private onZoom;
+    private cursorContainer;
+    private drawReactanceAxis;
+    /** Construct trace rendering without exposing chart containers or scalers to Smith. */
+    createTrace(values: TraceSamples, color: string, style: Partial<TraceStyle>, onMarkerDrag: (marker: SmithMarker, dragging: boolean) => void): SmithData;
+    removeTrace(trace: SmithData): void;
+}

package/dist/lib/rendering/SvgChartRenderer.js

@@ -0,0 +1,364 @@
+import { SvgTheme } from '../appearance/SvgTheme.js';
+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 { Complex } from '../math/Complex.js';
+import { SmithPeripheralScales } from '../scales/SmithPeripheralScales.js';
+import { GridLayerControl } from '../grid/GridLayerControl.js';
+import { CircleLayerControl } from '../grid/CircleLayerControl.js';
+/** Internal SVG backend. Owns chart elements, view transforms, and SVG gestures. */
+export class SvgChartRenderer {
+    onCursorChange;
+    calcs = new SmithConstantCircle();
+    scalers;
+    defaultTransform = d3.zoomIdentity.translate(62.5, 62.5).scale(0.75);
+    transform = d3.zoomIdentity;
+    zoomEnabled = false;
+    cursorEnabled = false;
+    applyingView = false;
+    zoomBehavior = d3.zoom();
+    svg;
+    resizeObserver;
+    labelLayout;
+    container;
+    dataContainer;
+    markerContainer;
+    reactanceAxis;
+    constResistance;
+    constReactance;
+    constConductance;
+    constSusceptance;
+    constSwrCircles;
+    constQCircles;
+    cursor;
+    peripheralScaleRenderer = new SmithPeripheralScales();
+    traces = new Set();
+    destroyed = false;
+    mouseGesture = new MouseGesture();
+    markerDragging = false;
+    cursorBeforeMarkerDrag = null;
+    layers;
+    peripheralScales;
+    constructor(onCursorChange) {
+        this.onCursorChange = onCursorChange;
+        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,
+            detail: 'standard',
+        });
+        this.constResistance.show();
+        this.constReactance = new ConstReactance({
+            data: gridData,
+            scaler: this.scalers.default,
+            detail: 'standard',
+        });
+        this.constReactance.show();
+        this.constConductance = new ConstConductance({
+            data: gridData,
+            scaler: this.scalers.default,
+            detail: 'standard',
+        });
+        this.constConductance.hide();
+        this.constSusceptance = new ConstSusceptance({
+            data: gridData,
+            scaler: this.scalers.default,
+            detail: 'standard',
+        });
+        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: 'var(--smithkit-boundary-stroke)',
+            strokeWidth: 'var(--smithkit-boundary-width)',
+            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));
+        }
+        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 (typeof visible !== 'boolean') {
+                    throw new TypeError('Peripheral scale visibility must be a boolean.');
+                }
+                if (visible) {
+                    this.peripheralScaleRenderer.show();
+                }
+                else {
+                    this.peripheralScaleRenderer.hide();
+                }
+                this.labelLayout.update(true);
+            },
+            update: (gamma) => {
+                assertAlive();
+                this.peripheralScaleRenderer.update(gamma);
+            },
+        };
+        this.peripheralScaleRenderer.hide();
+        this.initializeZoom();
+        this.resizeObserver = new ResizeObserver(() => this.updateViewportScale());
+        this.resizeObserver.observe(this.svg.Node);
+    }
+    setTheme(theme) {
+        this.assertAlive();
+        SvgTheme.apply(this.svg.Node, theme);
+        this.labelLayout.update(true);
+    }
+    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();
+    }
+    /** Export the current mounted view as standalone SVG with its configured background. */
+    toSvg() {
+        this.assertAlive();
+        return SvgExporter.chart(this.svg.Node);
+    }
+    /** Remove this chart and release its event handlers. Safe to call more than once. */
+    destroy() {
+        if (this.destroyed) {
+            return;
+        }
+        this.resizeObserver.disconnect();
+        this.traces.forEach((trace) => trace.destroy());
+        this.traces.clear();
+        this.destroyed = true;
+        this.cursor.setMoveHandler(null);
+        this.onCursorChange = 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.traces.forEach((trace) => trace.setViewportScale(scale));
+        }
+        this.labelLayout.update();
+    }
+    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.cursorEnabled || this.markerDragging) {
+            return;
+        }
+        this.cursor.Position = Complex.from(this.scalers.default.pointInvert(p));
+    }
+    setMarkerDragging(dragging) {
+        this.markerDragging = dragging;
+        if (dragging) {
+            this.cursorBeforeMarkerDrag = this.svg.Node.style.getPropertyValue('cursor') || null;
+            this.svg.Element.style('cursor', 'grabbing').style('--smithkit-marker-cursor', 'grabbing');
+            this.hideCursor();
+        }
+        else {
+            this.svg.Element.style('cursor', () => this.cursorBeforeMarkerDrag).style('--smithkit-marker-cursor', null);
+            this.cursorBeforeMarkerDrag = null;
+        }
+    }
+    hideCursor() {
+        this.cursor.hide();
+        if (this.cursorEnabled) {
+            this.onCursorChange?.(undefined);
+        }
+    }
+    /** Disable tracking and cancel queued readings; enabling waits for the next pointer move. */
+    setCursorEnabled(enabled) {
+        this.assertAlive();
+        if (typeof enabled !== 'boolean') {
+            throw new TypeError('Cursor enabled must be a boolean.');
+        }
+        if (this.cursorEnabled === enabled) {
+            return;
+        }
+        this.cursorEnabled = enabled;
+        if (!enabled) {
+            this.cursor.hide();
+            this.onCursorChange?.(undefined);
+        }
+    }
+    initCursor() {
+        const cursor = new SmithCursor(this.scalers.default);
+        cursor.Group.attr('class', 'smith-cursor');
+        cursor.setMoveHandler(() => {
+            this.onCursorChange?.(this.cursor.Position);
+        });
+        return cursor;
+    }
+    get cursorPosition() {
+        return this.cursor.Position;
+    }
+    initializeZoom() {
+        const zoom = this.zoomBehavior
+            .scaleExtent([0.6, 1000])
+            .filter((event) => this.zoomEnabled &&
+            !this.markerDragging &&
+            (!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.markerDragging) && !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();
+    }
+    /** 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;
+        }
+    }
+    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.traces.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.hideCursor();
+        });
+        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);
+    }
+    /** Construct trace rendering without exposing chart containers or scalers to Smith. */
+    createTrace(values, color, style, onMarkerDrag) {
+        this.assertAlive();
+        const trace = new SmithData(values, color, this.transform, this.dataContainer, this.scalers.default, onMarkerDrag, this.markerContainer, style);
+        this.traces.add(trace);
+        this.updateViewportScale();
+        return trace;
+    }
+    removeTrace(trace) {
+        // Release gestures while Smith can still resolve the marker's public snapshot.
+        trace.destroy();
+        this.traces.delete(trace);
+    }
+}

package/dist/lib/scales/SmithPeripheralScales.js

@@ -42,7 +42,7 @@ export class SmithPeripheralScales extends SmithGroup {
             .attr('cy', 250)
             .attr('r', (radius) => radius)
             .attr('fill', 'none')
-            .attr('stroke', '#334155')
+            .attr('stroke', 'var(--smithkit-scales-boundaryColor)')
             .attr('stroke-width', 1.1)
             .attr('vector-effect', 'non-scaling-stroke');
         this.axes.each(function (scale, index) {
@@ -60,7 +60,7 @@ export class SmithPeripheralScales extends SmithGroup {
                     .attr('cy', 250)
                     .attr('r', radius)
                     .attr('fill', 'none')
-                    .attr('stroke', '#475569')
+                    .attr('stroke', 'var(--smithkit-scales-stroke)')
                     .attr('stroke-width', 0.6)
                     .attr('vector-effect', 'non-scaling-stroke');
             }
@@ -75,7 +75,7 @@ export class SmithPeripheralScales extends SmithGroup {
                     .attr('y1', y1)
                     .attr('x2', x2)
                     .attr('y2', y2)
-                    .attr('stroke', '#475569')
+                    .attr('stroke', 'var(--smithkit-scales-stroke)')
                     .attr('stroke-width', major ? 0.8 : 0.5)
                     .attr('vector-effect', 'non-scaling-stroke');
                 const captionDistance = Math.abs(((angle - captionAngle + 540) % 360) - 180);
@@ -89,9 +89,9 @@ export class SmithPeripheralScales extends SmithGroup {
                         .attr('transform', `rotate(${rotation},${x},${y})`)
                         .attr('text-anchor', 'middle')
                         .attr('dominant-baseline', 'central')
-                        .attr('font-family', 'system-ui, sans-serif')
-                        .attr('font-size', 10.5)
-                        .attr('fill', '#334155')
+                        .attr('font-family', 'var(--smithkit-fontFamily)')
+                        .attr('font-size', 'var(--smithkit-scales-peripheralFontSize)')
+                        .attr('fill', 'var(--smithkit-scales-textColor)')
                         .text(scale.unit === 'λ' ? value.toFixed(2) : String(value));
                 }
             }
@@ -114,11 +114,11 @@ export class SmithPeripheralScales extends SmithGroup {
                 .append('text')
                 .attr('class', 'peripheral-caption')
                 .attr('text-anchor', 'middle')
-                .attr('font-family', 'system-ui, sans-serif')
-                .attr('font-size', 10.5)
+                .attr('font-family', 'var(--smithkit-fontFamily)')
+                .attr('font-size', 'var(--smithkit-scales-peripheralFontSize)')
                 .attr('font-weight', 500)
                 .attr('letter-spacing', 0.3)
-                .attr('fill', '#334155')
+                .attr('fill', 'var(--smithkit-scales-textColor)')
                 .append('textPath')
                 .attr('href', `#${pathId}`)
                 .attr('startOffset', '50%')
@@ -128,8 +128,8 @@ export class SmithPeripheralScales extends SmithGroup {
                 .attr('class', 'peripheral-indicator')
                 .attr('r', 3)
                 .attr('visibility', 'hidden')
-                .attr('fill', '#dc2626')
-                .attr('stroke', 'white')
+                .attr('fill', 'var(--smithkit-scales-indicatorColor)')
+                .attr('stroke', 'var(--smithkit-scales-indicatorOutline)')
                 .attr('stroke-width', 1);
         });
     }

package/dist/lib/scales/SmithScales.d.ts

@@ -1,3 +1,5 @@
+import type { ScaleImageExportOptions } from '../svg/export.js';
+import type { SmithAppearance } from '../appearance/types.js';
 import type { Complex } from '../math/Complex.js';
 /** Independent parameter scales. Connect update() to a chart's cursor events. */
 export declare class SmithScales {
@@ -7,12 +9,17 @@ export declare class SmithScales {
     private readonly start;
     private readonly length;
     private readonly axes;
-    constructor();
+    constructor(appearance?: SmithAppearance);
+    /** Replace the preset and overrides without changing readings or layout. */
+    setAppearance(appearance: SmithAppearance): void;
     draw(target: string | HTMLElement): void;
     /** Show a passive-load reflection coefficient, or hide indicators with null. */
     update(gamma: Complex | null): void;
-    /** Export all mounted scales in their current layout as a standalone SVG. */
-    toSvg(): string;
+    private updateAxis;
+    /** Export mounted scales, optionally with a separate reading and its description. */
+    toSvg(options?: ScaleImageExportOptions): string;
+    /** Export mounted scales as PNG without changing their live readings. */
+    toPng(options?: ScaleImageExportOptions): Promise<Blob>;
     destroy(): void;
     private assertAlive;
 }