smithkit 0.1.1 → 0.3.0

package/dist/lib/{SmithConstantCircle.js → rf/SmithConstantCircle.js}

@@ -1,5 +1,4 @@
-import { complexRatio } from './math/complexRatio.js';
-import { Complex } from './complex/Complex.js';
+import { Complex } from '../math/Complex.js';
 export class SmithConstantCircle {
     Z0;
     constructor(Z0 = 50) {
@@ -18,8 +17,8 @@ export class SmithConstantCircle {
         return this.transform(c, 1 - c.re, -c.im, 1 + c.re, c.im, -2);
     }
     transform(value, nr, ni, dr, di, determinant) {
-        const quotient = complexRatio(nr, ni, dr, di);
-        if (!quotient) {
+        const quotient = Complex.div(Complex.from(nr, ni), Complex.from(dr, di));
+        if (!Number.isFinite(quotient.re) || !Number.isFinite(quotient.im)) {
             return;
         }
         // The analytic imaginary numerator avoids cancellation of nearly equal products.

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

@@ -0,0 +1,16 @@
+import type { Complex } from '../math/Complex.js';
+export interface PeripheralScale {
+    id: string;
+    title: string;
+    unit: '°' | 'λ';
+    ticks: number[];
+    major: (value: number) => boolean;
+    angle: (value: number) => number;
+    read: (gamma: Complex) => number | null;
+}
+export declare class PeripheralScaleDefinitions {
+    private constructor();
+    private static phase;
+    /** A full reflection-coefficient rotation represents half a wavelength along the line. */
+    static create(): PeripheralScale[];
+}

package/dist/lib/scales/PeripheralScaleDefinitions.js

@@ -0,0 +1,54 @@
+export class PeripheralScaleDefinitions {
+    constructor() { }
+    static phase(gamma) {
+        return gamma.re === 0 && gamma.im === 0
+            ? null
+            : (Math.atan2(gamma.im, gamma.re) * 180) / Math.PI;
+    }
+    /** A full reflection-coefficient rotation represents half a wavelength along the line. */
+    static create() {
+        const wavelengths = (gamma, direction) => {
+            const degrees = PeripheralScaleDefinitions.phase(gamma);
+            return degrees === null ? null : (0.25 + (direction * degrees) / 720 + 0.5) % 0.5;
+        };
+        return [
+            {
+                id: 'transmission-phase',
+                title: 'Transmission phase · °',
+                unit: '°',
+                ticks: Array.from({ length: 179 }, (_, i) => -89 + i),
+                major: (v) => v % 5 === 0,
+                // Project from Γ = −1 to the perimeter, not from the chart center.
+                angle: (v) => 2 * v,
+                read: (gamma) => PeripheralScaleDefinitions.phase({ re: 1 + gamma.re, im: gamma.im }),
+            },
+            {
+                id: 'reflection-phase',
+                title: 'Reflection phase · °',
+                unit: '°',
+                ticks: Array.from({ length: 180 }, (_, i) => -178 + i * 2),
+                major: (v) => v % 10 === 0,
+                angle: (v) => v,
+                read: PeripheralScaleDefinitions.phase,
+            },
+            {
+                id: 'wavelengths-load',
+                title: 'Wavelengths → load',
+                unit: 'λ',
+                ticks: Array.from({ length: 250 }, (_, i) => i / 500),
+                major: (v) => Math.round(v * 500) % 5 === 0,
+                angle: (v) => 720 * v - 180,
+                read: (gamma) => wavelengths(gamma, 1),
+            },
+            {
+                id: 'wavelengths-generator',
+                title: 'Wavelengths → generator',
+                unit: 'λ',
+                ticks: Array.from({ length: 250 }, (_, i) => i / 500),
+                major: (v) => Math.round(v * 500) % 5 === 0,
+                angle: (v) => 180 - 720 * v,
+                read: (gamma) => wavelengths(gamma, -1),
+            },
+        ];
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { Complex } from '../math/Complex.js';
+export interface RadialScale {
+    id: string;
+    title: string;
+    description?: string;
+    unit: 'dB' | 'ratio';
+    read: (gamma: Complex) => number;
+    values: number[];
+    position: (value: number) => number;
+}
+export declare class RadialScaleDefinitions {
+    private constructor();
+    /** Normalized positions along each scale, from zero to one. */
+    static create(): RadialScale[];
+}

package/dist/lib/scales/RadialScaleDefinitions.js

@@ -0,0 +1,112 @@
+import { SmithConstantCircle } from '../rf/SmithConstantCircle.js';
+export class RadialScaleDefinitions {
+    constructor() { }
+    /** Normalized positions along each scale, from zero to one. */
+    static create() {
+        const calcs = new SmithConstantCircle();
+        return [
+            {
+                id: 'vswr',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToSwr(gamma),
+                title: 'VSWR',
+                values: [1, 1.5, 2, 3, 5, 10, Infinity],
+                position: (v) => (v === Infinity ? 1 : calcs.swrToRflCoeffEOrI(v)),
+            },
+            {
+                id: 'vswr-db',
+                unit: 'dB',
+                read: (gamma) => calcs.rflCoeffToDBS(gamma),
+                title: 'Standing-wave ratio · dB',
+                values: [0, 3, 6, 10, 15, 20, Infinity],
+                position: (v) => (v === Infinity ? 1 : calcs.dBSToAbsRflCoeff(v)),
+            },
+            {
+                id: 'return-loss',
+                unit: 'dB',
+                read: (gamma) => calcs.rflCoeffToReturnLoss(gamma),
+                title: 'Return loss · dB',
+                values: [Infinity, 20, 14, 10, 6, 3, 0],
+                position: (v) => calcs.returnLossToRflCoeffEOrI(v),
+            },
+            {
+                id: 'mismatch-loss',
+                unit: 'dB',
+                read: (gamma) => calcs.rflCoeffToMismatchLoss(gamma),
+                title: 'Reflection loss · dB',
+                description: 'Reflection loss (mismatch loss): −10 log10(1 − |Γ|²), in dB.',
+                values: [0, 0.1, 0.5, 1, 2, 4, Infinity],
+                position: (v) => calcs.mismatchLossToRflCoeffEOrI(v),
+            },
+            {
+                id: 'reflected-power',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffP(gamma),
+                title: 'Power reflection coefficient',
+                description: 'Reflected power divided by incident power: |Γ|² (dimensionless).',
+                values: [0, 0.01, 0.1, 0.25, 0.5, 0.75, 1],
+                position: (v) => calcs.rflCoeffPToEOrI(v),
+            },
+            {
+                id: 'transmitted-power',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToTransmCoeffP(gamma),
+                title: 'Power transmission coefficient',
+                description: 'Net power delivered to the load divided by incident power: 1 − |Γ|² (dimensionless).',
+                values: [1, 0.99, 0.9, 0.75, 0.5, 0.25, 0],
+                position: (v) => calcs.transmCoeffPToRflCoeffEOrI(v),
+            },
+            {
+                id: 'standing-wave-loss',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToSwLossCoeff(gamma),
+                title: 'Standing-wave loss coefficient',
+                values: [1, 1.1, 1.5, 2, 3, 5, Infinity],
+                position: (v) => (v === Infinity ? 1 : calcs.swLossCoeffToRflCoeffEOrI(v)),
+            },
+            {
+                id: 'standing-wave-peak',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToSwPeakConstP(gamma),
+                title: 'Standing-wave peak · constant power',
+                values: [1, 1.2, 1.5, 2, 3, Infinity],
+                position: (v) => (v === Infinity ? 1 : calcs.swPeakConstPToRflCoeffEOrI(v)),
+            },
+            {
+                id: 'reflection-coefficient',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffEOrI(gamma),
+                title: 'Reflection coefficient · |Γ|',
+                values: [0, 0.2, 0.4, 0.6, 0.8, 1],
+                position: (v) => v,
+            },
+            {
+                id: 'attenuation',
+                unit: 'dB',
+                read: (gamma) => calcs.rflCoeffToAttenuation(gamma),
+                title: 'Attenuation · dB',
+                description: 'One-way attenuation of a matched line or attenuator terminated in an open or short circuit. Not insertion loss of an arbitrary load.',
+                values: [Infinity, 10, 7, 5, 3, 1, 0],
+                position: (v) => calcs.attenuationToRflCoeff(v),
+            },
+            {
+                id: 'voltage-transmission',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToTransmCoeffEOrI(gamma),
+                title: 'Voltage transmission coefficient',
+                description: 'Voltage transmission magnitude: |1 + Γ| (dimensionless).',
+                values: [0, 0.4, 0.8, 1.2, 1.6, 2],
+                position: (v) => v / 2,
+            },
+            {
+                id: 'current-transmission',
+                unit: 'ratio',
+                read: (gamma) => calcs.rflCoeffToCurrentTransmission(gamma),
+                title: 'Current transmission coefficient',
+                description: 'Current transmission magnitude: |1 − Γ|, using the voltage reflection coefficient Γ (dimensionless).',
+                values: [0, 0.4, 0.8, 1.2, 1.6, 2],
+                position: (v) => v / 2,
+            },
+        ];
+    }
+}

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

@@ -1,7 +1,9 @@
-import type { Complex } from '../complex/Complex.js';
-import { SmithGroup } from '../draw/SmithGroup.js';
+import type { Complex } from '../math/Complex.js';
+import { SmithGroup } from '../svg/SmithGroup.js';
 /** Peripheral rulers in the chart's 500-unit coordinate system. */
 export declare class SmithPeripheralScales extends SmithGroup {
+    private static point;
+    private static rulerRadius;
     readonly labels: SmithGroup;
     private readonly scales;
     private readonly axes;

package/dist/lib/scales/SmithPeripheralScales.js

@@ -1,19 +1,22 @@
 import { select, format } from 'd3';
-import { SmithGroup } from '../draw/SmithGroup.js';
-import { peripheralScales } from './peripheralScales.js';
+import { SmithGroup } from '../svg/SmithGroup.js';
+import { PeripheralScaleDefinitions } from './PeripheralScaleDefinitions.js';
 let nextScaleId = 0;
-const firstRadius = 250;
-const ringSpacing = 20;
-function point(radius, degrees) {
-    const angle = (degrees * Math.PI) / 180;
-    return [250 + radius * Math.cos(angle), 250 - radius * Math.sin(angle)];
-}
+const chartRadius = 250;
+const groupWidth = 40;
 /** Peripheral rulers in the chart's 500-unit coordinate system. */
 export class SmithPeripheralScales extends SmithGroup {
+    static point(radius, degrees) {
+        const angle = (degrees * Math.PI) / 180;
+        return [250 + radius * Math.cos(angle), 250 - radius * Math.sin(angle)];
+    }
+    static rulerRadius(index) {
+        return chartRadius + groupWidth / 2 + Math.floor(index / 2) * groupWidth;
+    }
     labels = new SmithGroup()
         .attr('data-label-layer', 'peripheral-scales')
         .attr('pointer-events', 'none');
-    scales = peripheralScales();
+    scales = PeripheralScaleDefinitions.create();
     axes = this.Element.attr('data-layer', 'peripheral-scales')
         .attr('pointer-events', 'none')
         .selectAll('g')
@@ -29,38 +32,55 @@ export class SmithPeripheralScales extends SmithGroup {
             .join('g')
             .attr('data-label-scale', (scale) => scale.id)
             .nodes();
+        // Two paired rulers: transmission/reflection phase, then electrical length
+        // toward load/generator. Strong boundaries enclose each pair.
+        this.Element.selectAll('circle.peripheral-boundary')
+            .data([chartRadius, chartRadius + groupWidth, chartRadius + 2 * groupWidth])
+            .join('circle')
+            .attr('class', 'peripheral-boundary')
+            .attr('cx', 250)
+            .attr('cy', 250)
+            .attr('r', (radius) => radius)
+            .attr('fill', 'none')
+            .attr('stroke', 'var(--smithkit-scales-boundaryColor)')
+            .attr('stroke-width', 1.1)
+            .attr('vector-effect', 'non-scaling-stroke');
         this.axes.each(function (scale, index) {
             const labelAxis = select(labelAxes[index]);
             const axis = select(this);
-            const radius = firstRadius + index * ringSpacing;
+            const radius = SmithPeripheralScales.rulerRadius(index);
+            const side = index % 2 === 0 ? -1 : 1;
             const captionAngle = scale.unit === 'λ' ? 180 : 0;
             axis.append('title').text(scale.title);
-            axis
-                .append('circle')
-                .attr('cx', 250)
-                .attr('cy', 250)
-                .attr('r', radius)
-                .attr('fill', 'none')
-                .attr('stroke', '#475569')
-                .attr('stroke-width', 0.8)
-                .attr('vector-effect', 'non-scaling-stroke');
+            if (index % 2 === 0) {
+                axis
+                    .append('circle')
+                    .attr('class', 'peripheral-ruler')
+                    .attr('cx', 250)
+                    .attr('cy', 250)
+                    .attr('r', radius)
+                    .attr('fill', 'none')
+                    .attr('stroke', 'var(--smithkit-scales-stroke)')
+                    .attr('stroke-width', 0.6)
+                    .attr('vector-effect', 'non-scaling-stroke');
+            }
             for (const value of scale.ticks) {
                 const angle = scale.angle(value);
-                const [x1, y1] = point(radius, angle);
+                const [x1, y1] = SmithPeripheralScales.point(radius, angle);
                 const major = scale.major(value);
-                const [x2, y2] = point(radius - (major ? 4 : 2), angle);
+                const [x2, y2] = SmithPeripheralScales.point(radius + side * (major ? 4 : 2), angle);
                 axis
                     .append('line')
                     .attr('x1', x1)
                     .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);
                 if (major && captionDistance > 25) {
-                    const [x, y] = point(radius + 8, angle);
+                    const [x, y] = SmithPeripheralScales.point(radius + side * 11, angle);
                     const rotation = angle >= 0 ? 90 - angle : -90 - angle;
                     labelAxis
                         .append('text')
@@ -69,16 +89,16 @@ 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));
                 }
             }
             // Reserve a label sector for the curved caption without masking the ruler or its ticks.
-            const captionRadius = radius + 5;
-            const start = point(captionRadius, captionAngle + 45);
-            const end = point(captionRadius, captionAngle - 45);
+            const captionRadius = radius + (side < 0 ? -15 : 5);
+            const start = SmithPeripheralScales.point(captionRadius, captionAngle + 45);
+            const end = SmithPeripheralScales.point(captionRadius, captionAngle - 45);
             const pathId = `smithkit-peripheral-caption-${nextScaleId++}`;
             axis
                 .append('defs')
@@ -94,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%')
@@ -108,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);
         });
     }
@@ -134,7 +154,7 @@ export class SmithPeripheralScales extends SmithGroup {
                 dot.attr('visibility', 'hidden').attr('data-value', null);
                 return;
             }
-            const [x, y] = point(firstRadius + index * ringSpacing, scale.angle(value));
+            const [x, y] = SmithPeripheralScales.point(SmithPeripheralScales.rulerRadius(index), scale.angle(value));
             dot.attr('cx', x).attr('cy', y).attr('data-value', value).attr('visibility', null);
         });
     }

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

@@ -1,4 +1,6 @@
-import type { Complex } from '../complex/Complex.js';
+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 {
     private readonly scales;
@@ -7,10 +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;
+    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;
 }

package/dist/lib/scales/SmithScales.js

@@ -1,8 +1,12 @@
+import { ImageExporter } from '../svg/ImageExporter.js';
+import { Theme } from '../appearance/Theme.js';
+import { SvgTheme } from '../appearance/SvgTheme.js';
 import { select, format } from 'd3';
-import { radialScales } from './radialScales.js';
+import { RadialScaleDefinitions } from './RadialScaleDefinitions.js';
+import { SvgExporter } from '../svg/SvgExporter.js';
 /** Independent parameter scales. Connect update() to a chart's cursor events. */
 export class SmithScales {
-    scales = radialScales();
+    scales = RadialScaleDefinitions.create();
     container = select(document.createElement('div'))
         .attr('class', 'radial-scales')
         .style('display', 'grid')
@@ -23,25 +27,27 @@ export class SmithScales {
         .style('display', 'block')
         .style('width', '100%')
         .style('height', 'auto');
-    constructor() {
+    constructor(appearance = {}) {
+        this.setAppearance(appearance);
         const labels = this.axes.append('g').attr('data-role', 'labels').attr('pointer-events', 'none');
         labels
             .append('text')
             .attr('x', this.start)
             .attr('y', 12)
-            .attr('font-family', 'system-ui, sans-serif')
-            .attr('font-size', 12)
-            .attr('fill', '#334155')
+            .attr('font-family', 'var(--smithkit-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-titleFontSize)')
+            .attr('fill', 'var(--smithkit-scales-textColor)')
             .text((scale) => scale.title);
         labels
             .append('text')
             .attr('class', 'scale-value')
+            .attr('data-role', 'scale-value')
             .attr('x', this.start)
             .attr('y', 25)
-            .attr('font-family', 'system-ui, sans-serif')
-            .attr('font-size', 11)
+            .attr('font-family', 'var(--smithkit-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-valueFontSize)')
             .attr('font-weight', 600)
-            .attr('fill', '#b42318')
+            .attr('fill', 'var(--smithkit-scales-valueColor)')
             .text('—');
         this.axes
             .append('line')
@@ -50,7 +56,7 @@ export class SmithScales {
             .attr('x2', this.start + this.length)
             .attr('y1', 36)
             .attr('y2', 36)
-            .attr('stroke', '#64748b')
+            .attr('stroke', 'var(--smithkit-scales-stroke)')
             .attr('stroke-width', 1);
         const start = this.start;
         const length = this.length;
@@ -61,7 +67,11 @@ export class SmithScales {
                 .join('g')
                 .attr('class', 'scale-tick')
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`);
-            ticks.append('line').attr('y2', 5).attr('stroke', '#64748b').attr('stroke-width', 1);
+            ticks
+                .append('line')
+                .attr('y2', 5)
+                .attr('stroke', 'var(--smithkit-scales-stroke)')
+                .attr('stroke-width', 1);
             select(this)
                 .select('[data-role=labels]')
                 .selectAll('g')
@@ -70,9 +80,9 @@ export class SmithScales {
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`)
                 .append('text')
                 .attr('y', 17)
-                .attr('font-size', 10)
-                .attr('font-family', 'system-ui, sans-serif')
-                .attr('fill', '#334155')
+                .attr('font-size', 'var(--smithkit-scales-fontSize)')
+                .attr('font-family', 'var(--smithkit-fontFamily)')
+                .attr('fill', 'var(--smithkit-scales-textColor)')
                 .attr('text-anchor', (_, i) => i === 0 ? 'start' : i === scale.values.length - 1 ? 'end' : 'middle')
                 .text((value) => (value === Infinity ? '∞' : String(value)));
         });
@@ -83,12 +93,17 @@ export class SmithScales {
             .attr('cx', this.start)
             .attr('cy', 36)
             .attr('r', 4)
-            .attr('fill', '#dc2626')
-            .attr('stroke', 'white')
+            .attr('fill', 'var(--smithkit-scales-indicatorColor)')
+            .attr('stroke', 'var(--smithkit-scales-indicatorOutline)')
             .attr('stroke-width', 1);
         labels.raise();
         this.axes.append('title').text((scale) => scale.description ?? scale.title);
     }
+    /** Replace the preset and overrides without changing readings or layout. */
+    setAppearance(appearance) {
+        this.assertAlive();
+        SvgTheme.apply(this.container.node(), Theme.resolve(appearance));
+    }
     draw(target) {
         this.assertAlive();
         const host = typeof target === 'string' ? document.querySelector(target) : target;
@@ -100,32 +115,57 @@ export class SmithScales {
     /** Show a passive-load reflection coefficient, or hide indicators with null. */
     update(gamma) {
         this.assertAlive();
+        this.axes.each((scale, index, nodes) => this.updateAxis(nodes[index], scale, gamma));
+    }
+    updateAxis(node, scale, gamma) {
+        const axis = select(node);
         const magnitude = gamma === null ? NaN : Math.hypot(gamma.re, gamma.im);
         if (!gamma || !Number.isFinite(magnitude) || magnitude > 1) {
-            this.axes.select('circle').attr('visibility', 'hidden').attr('data-position', null);
-            this.axes.select('.scale-value').text('—');
-            this.axes.attr('aria-label', (scale) => `${scale.title}. ${scale.description ?? ''}`.trim());
-            this.axes.select('title').text((scale) => scale.description ?? scale.title);
-            return;
-        }
-        const start = this.start;
-        const length = this.length;
-        this.axes.each(function (scale) {
-            const value = scale.read(gamma);
-            const position = Math.max(0, Math.min(1, scale.position(value)));
-            const axis = select(this);
-            const number = value === Infinity ? '∞' : format('.4~g')(value);
-            const suffix = scale.unit === 'dB' ? ' dB' : scale.id === 'vswr' ? ' : 1' : '';
-            const readout = number + suffix;
-            const label = `${scale.title}: ${readout}${scale.description ? `. ${scale.description}` : ''}`;
-            axis.select('.scale-value').text(readout);
-            axis.attr('aria-label', label).select('title').text(label);
             axis
                 .select('circle')
-                .attr('cx', start + position * length)
-                .attr('data-position', position)
-                .attr('visibility', null);
-        });
+                .attr('visibility', 'hidden')
+                .style('visibility', 'hidden')
+                .attr('data-position', null);
+            axis.select('[data-role="scale-value"]').text('—');
+            axis.attr('aria-label', `${scale.title}. ${scale.description ?? ''}`.trim());
+            axis.select('title').text(scale.description ?? scale.title);
+            return;
+        }
+        const value = scale.read(gamma);
+        const position = Math.max(0, Math.min(1, scale.position(value)));
+        const number = value === Infinity ? '∞' : format('.4~g')(value);
+        const suffix = scale.unit === 'dB' ? ' dB' : scale.id === 'vswr' ? ' : 1' : '';
+        const readout = number + suffix;
+        const label = `${scale.title}: ${readout}${scale.description ? `. ${scale.description}` : ''}`;
+        axis.select('[data-role="scale-value"]').text(readout);
+        axis.attr('aria-label', label).select('title').text(label);
+        axis
+            .select('circle')
+            .attr('cx', this.start + position * this.length)
+            .attr('data-position', position)
+            .attr('visibility', null)
+            .style('visibility', 'visible');
+    }
+    /** Export mounted scales, optionally with a separate reading and its description. */
+    toSvg(options) {
+        this.assertAlive();
+        const container = this.container.node();
+        const style = getComputedStyle(container);
+        const readout = options?.readout;
+        const source = SvgExporter.scales(container, this.axes.nodes(), readout
+            ? (copy, index) => this.updateAxis(copy, this.scales[index], readout.reflectionCoefficient)
+            : undefined, readout?.label
+            ? {
+                text: readout.label,
+                color: style.getPropertyValue('--smithkit-scales-textColor').trim(),
+                fontFamily: style.getPropertyValue('--smithkit-fontFamily').trim(),
+            }
+            : undefined);
+        return options === undefined ? source : ImageExporter.svg([source], options);
+    }
+    /** Export mounted scales as PNG without changing their live readings. */
+    async toPng(options = {}) {
+        return ImageExporter.png([this.toSvg({ readout: options.readout })], options);
     }
     destroy() {
         if (this.destroyed) {

package/dist/lib/svg/ImageExporter.d.ts

@@ -0,0 +1,18 @@
+import type { ImageExportOptions } from './export.js';
+interface Legend {
+    entries: {
+        name: string;
+        color: string;
+    }[];
+    textColor: string;
+    fontFamily: string;
+}
+/** Compose SVG snapshots and rasterize PNG reports without changing live chart nodes. */
+export declare class ImageExporter {
+    private constructor();
+    private static layout;
+    static png(sources: string[], options: ImageExportOptions, legend?: Legend): Promise<Blob>;
+    static svg(sources: string[], options: ImageExportOptions, legend?: Legend): string;
+    private static wrap;
+}
+export {};