smithkit 0.1.1 → 0.2.0

package/README.md

@@ -5,17 +5,22 @@ interactive SVG Smith charts, RF calculations, and S11 measurement exploration.
 
 [Try the interactive demo](https://rosek86.github.io/smithkit/).
 
+Upgrading from 0.1.x? Version 0.2.0 groups calculation, parsing, formatting, and
+comparison functions into classes. See the [migration guide](https://github.com/rosek86/smithkit/blob/v0.2.0/docs/migration-0.2.md)
+for the changed imports.
+
 ## Features
 
 - Labeled resistance, reactance, conductance, and susceptance grids.
 - Configurable constant-Q and constant-VSWR circles.
 - Zoom, pan, view reset, and cursor readings.
-- Named traces with colors, visibility, and draggable markers that snap to samples.
+- Named traces with colors, visibility, and keyboard/touch/mouse markers that snap to samples.
 - Marker comparisons: frequency, complex impedance, and wrapped phase differences.
 - Physical impedance/admittance conversions and DOM-independent RF readings.
 - Twelve parameter scales mounted independently of chart zoom.
 - Four peripheral rulers for phase and electrical length.
 - One-port Touchstone 1.x import with RI, MA, and DB representations.
+- Standalone SVG export of the current chart and radial scales.
 - ESM modules and TypeScript declarations.
 
 ## Installation
@@ -63,11 +68,11 @@ must be finite and non-negative; both coordinates must be finite. A trace must
 contain at least one sample.
 
 Each new trace receives one marker on its first sample. Drag markers to select
-samples, scroll to zoom, and drag the chart to pan. Markers stay above all sample
-points. `chart.resetView()` restores the initial view, including peripheral rulers.
+samples with a mouse or touch, scroll to zoom, and drag the chart to pan. Markers
+and their focus indicators stay above grid labels and sample points. `chart.resetView()` restores the initial view, including peripheral rulers.
 
 Construct `Smith` only in a browser, such as your framework's mount hook. Importing
-the package and using its calculation or parsing functions does not require a DOM.
+the package and using its calculation or parsing methods does not require a DOM.
 
 Zoom is enabled by default. For a fixed view, call `chart.setZoomEnabled(false)` before or after mounting.
 It disables wheel/double-click zoom and mouse/touch panning and pinch zoom while
@@ -89,6 +94,25 @@ chart.draw('#smith');
 container throws. Call `chart.destroy()` on unmount; it removes the SVG, releases
 event handlers, and cancels queued notifications. Repeated destruction is safe.
 
+### Keyboard and touch markers
+
+Use Tab/Shift+Tab to focus a marker. Arrow keys move through samples in input order;
+Right/Up advances and Left/Down goes back. Shift+Arrow or Page Up/Down moves ten
+samples, and Home/End selects the first/last sample. Navigation clamps at the ends
+and also works when chart zoom is disabled. A single-sample trace remains focusable
+for reading, with its slider marked disabled.
+
+A focused marker has a contrasting outline and exposes its trace name, marker
+number, sample position, and frequency to assistive technology. Hidden traces are
+excluded from keyboard focus. `chart.focusMarker(id)` allows a separate marker
+selector to focus the matching chart control. The demo provides a **Focus on chart**
+button beside its marker selector.
+
+Markers have a 44 CSS px circular hit area and an 18 CSS px triangle, kept constant
+through zoom and container resizing. A marker touch gesture does not pan the chart;
+cancelling it releases the drag state. Touch target areas may overlap for nearby
+markers; use keyboard focus or the demo selector to reach an obscured marker.
+
 ## Traces and markers
 
 Trace and marker IDs are opaque strings, unique within a chart and never reused
@@ -121,6 +145,7 @@ chart.removeMarker(markerB);
 | `clearTraces()`                       | Removes all traces and their markers.                                                                                    |
 | `addMarker(traceId, sampleIndex = 0)` | Returns a marker ID, or `undefined` if the trace is missing.                                                             |
 | `getMarker(id)`                       | Returns a `MarkerSnapshot`, or `undefined` if missing.                                                                   |
+| `focusMarker(id)`                     | Moves keyboard focus to a mounted, visible marker; returns `false` if missing or not focusable.                          |
 | `setMarkerSample(id, sampleIndex)`    | Selects an existing sample and queues a marker notification.                                                             |
 | `removeMarker(id)`                    | Removes one marker without renumbering the remaining markers.                                                            |
 | `compareMarkers(a, b)`                | Returns B − A, or `undefined` if either marker is missing.                                                               |
@@ -192,7 +217,7 @@ const unsubscribe = chart.onEvent((event) => {
     console.log(event.data?.impedanceOhms?.toVector());
     return;
   }
-  // Marker, MarkerDragStart, and MarkerDragEnd always carry a MarkerSnapshot.
+  // Marker, MarkerSelect, MarkerDragStart, and MarkerDragEnd carry a MarkerSnapshot.
   console.log(event.data.markerId, event.data.frequencyHz);
 });
 
@@ -202,7 +227,12 @@ chart.destroy();
 ```
 
 The event types are `Cursor` (`'cursor'`), `Marker` (`'marker'`),
+`MarkerSelect` (`'marker-select'`),
 `MarkerDragStart` (`'marker-drag-start'`), and `MarkerDragEnd` (`'marker-drag-end'`).
+`MarkerSelect` fires synchronously when a marker receives focus or is engaged by
+keyboard navigation or a pointer press. Use it to select the corresponding
+readout; it does not indicate a position change. Keyboard changes use the normal
+queued `Marker` event and do not emit drag lifecycle events.
 Cursor movement is suspended during marker dragging. Drag start/end events fire
 synchronously; marker position notifications are queued and report the latest
 snapshot at delivery. Before delivery, repeated updates to the same marker coalesce
@@ -213,7 +243,7 @@ Trace metadata changes do not emit marker events; refresh metadata after mutatio
 Destruction suppresses application callbacks.
 
 `chart.cursorReading` returns the last cursor position. Cursor and marker readings
-share `SmithReading`; `readReflection(gamma, referenceImpedanceOhms = 50)` produces
+share `SmithReading`; `RfCalculations.readReflection(gamma, referenceImpedanceOhms = 50)` produces
 the same reading without constructing a chart.
 
 | Fields                                                                               | Units / meaning                                                        |
@@ -239,7 +269,7 @@ infinite scalar limit is preserved: perfect match gives infinite return loss;
 For active loads (\|Γ\| > 1), VSWR, standing-wave quantities, reflection loss,
 attenuation, and power transmission are `undefined`. Other quantities remain
 available. Non-finite complex inputs or invalid reference impedances throw
-`RangeError` in the public RF functions. Unrepresentable complex conversion
+`RangeError` in the public RF methods. Unrepresentable complex conversion
 results are `undefined`.
 
 ## Selecting a marker by frequency
@@ -259,22 +289,22 @@ measurement frequency; dragging and sample selection keep that field synchronize
 ## Calculations without a chart
 
 ```ts
-import { Complex, readReflection, impedanceToReflection } from 'smithkit';
+import { Complex, RfCalculations } from 'smithkit';
 
-const gamma = impedanceToReflection(Complex.from(75, 25), 50)!;
-const reading = readReflection(gamma, 50);
+const gamma = RfCalculations.impedanceToReflection(Complex.from(75, 25), 50)!;
+const reading = RfCalculations.readReflection(gamma, 50);
 console.log(reading.impedanceOhms?.toVector()); // Approximately [75, 25].
 console.log(reading.admittanceSiemens?.toVector());
 ```
 
-| Function                                                                 | Input and output                                                                                                |
-| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| `reflectionToImpedance(gamma, referenceImpedanceOhms = 50)`              | Γ → physical Z in Ω.                                                                                            |
-| `impedanceToReflection(impedanceOhms, referenceImpedanceOhms = 50)`      | Physical Z in Ω → Γ.                                                                                            |
-| `reflectionToAdmittance(gamma, referenceImpedanceOhms = 50)`             | Γ → physical Y in S.                                                                                            |
-| `admittanceToReflection(admittanceSiemens, referenceImpedanceOhms = 50)` | Physical Y in S → Γ.                                                                                            |
-| `readReflection(gamma, referenceImpedanceOhms = 50)`                     | Complete `SmithReading`.                                                                                        |
-| `compareMarkerReadings(a, b)`                                            | Compare readings without a chart. Each input needs `frequencyHz`, `reflectionCoefficient`, and `impedanceOhms`. |
+| Static method                                                                           | Input and output                                                                                                |
+| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `RfCalculations.reflectionToImpedance(gamma, referenceImpedanceOhms = 50)`              | Γ → physical Z in Ω.                                                                                            |
+| `RfCalculations.impedanceToReflection(impedanceOhms, referenceImpedanceOhms = 50)`      | Physical Z in Ω → Γ.                                                                                            |
+| `RfCalculations.reflectionToAdmittance(gamma, referenceImpedanceOhms = 50)`             | Γ → physical Y in S.                                                                                            |
+| `RfCalculations.admittanceToReflection(admittanceSiemens, referenceImpedanceOhms = 50)` | Physical Y in S → Γ.                                                                                            |
+| `RfCalculations.readReflection(gamma, referenceImpedanceOhms = 50)`                     | Complete `SmithReading`.                                                                                        |
+| `MarkerMeasurements.compare(a, b)`                                                      | Compare readings without a chart. Each input needs `frequencyHz`, `reflectionCoefficient`, and `impedanceOhms`. |
 
 Comparison results contain `frequencyDeltaHz`, `impedanceDeltaOhms`, and
 `phaseDeltaDegrees`. Phase differences use B − A wrapped to **[−180°, 180°)**:
@@ -285,27 +315,27 @@ a point comparison, not sweep phase unwrapping or group delay.
 
 `Complex.from(re, im)` constructs complex numbers. Read components through `re` and `im`. Arithmetic (`add`, `sub`,
 `mul`, `div`, `pow`) returns new values. The class also provides `abs`, `arg`
-(radians), and static functions such as `Complex.conj`, `Complex.sqrt`,
+(radians), and static methods such as `Complex.conj`, `Complex.sqrt`,
 `Complex.exp`, `Complex.log`, and trigonometric/hyperbolic functions and inverses. `toVector()` returns `[real, imaginary]`; `toString(dp)` formats
 a Cartesian value. See the exported declarations for all operations.
 
-Formatting helpers are independent exports: `formatNumber(value)` (three significant
-digits and SI prefixes), `formatComplex(value, unit?, decimalPlaces?)`, and
-`formatComplexPolar(value, unit?, decimalPlaces?)` (phase in degrees). They work
+The `SmithFormatter` class provides static methods: `SmithFormatter.number(value)` (three significant
+digits and SI prefixes), `SmithFormatter.complex(value, unit?, decimalPlaces?)`, and
+`SmithFormatter.polar(value, unit?, decimalPlaces?)` (phase in degrees). They work
 without a chart or DOM. Complex formatters default to three fractional digits.
-`formatNumber` includes spacing so you can append a unit, e.g. `formatNumber(1e9) + 'Hz'`.
+`SmithFormatter.number` includes spacing so you can append a unit, e.g. `SmithFormatter.number(1e9) + 'Hz'`.
 
-`reactanceToComponent(reactanceOhms, frequencyHz)` calculates an ideal equivalent
+`RfCalculations.reactanceToComponent(reactanceOhms, frequencyHz)` calculates an ideal equivalent
 series component without formatting or constructing a chart:
 
 ```ts
-import { reactanceToComponent, formatNumber } from 'smithkit';
+import { RfCalculations, SmithFormatter } from 'smithkit';
 
-const component = reactanceToComponent(-50, 1e9);
+const component = RfCalculations.reactanceToComponent(-50, 1e9);
 if (component?.kind === 'capacitor') {
-  console.log(formatNumber(component.capacitanceFarads) + 'F'); // 3.18 pF
+  console.log(SmithFormatter.number(component.capacitanceFarads) + 'F'); // 3.18 pF
 } else if (component?.kind === 'inductor') {
-  console.log(formatNumber(component.inductanceHenries) + 'H');
+  console.log(SmithFormatter.number(component.inductanceHenries) + 'H');
 }
 ```
 
@@ -333,9 +363,10 @@ chart.layers.vswr.setVisible(true);
 The four grid layers support `setVisible`, `setMinorVisible`, and
 `setStyle(Partial<GridStyle>)`. Style fields: `stroke`, `majorWidth`, `minorWidth`,
 `textColor`, `textFontFamily`, `textFontSize`. Widths are positive finite numbers
-in CSS pixels. Font size is a positive finite number in chart units because labels
-scale with the grid geometry. Partial updates retain other settings. Invalid numeric
-styles throw before any property is changed.
+in CSS pixels. Font size is a positive finite base size in chart units; adaptive
+layout raises it when needed to keep the font size at least 9 CSS pixels in the
+default view. Partial updates retain other settings. Invalid numeric styles throw
+before any property is changed.
 
 `layers.q` and `layers.vswr` support `setVisible`,
 `setStyle({ stroke?, strokeWidth? })`, `addValue`, and `removeValue`.
@@ -345,8 +376,23 @@ Duplicate additions and removal of absent values have no effect.
 
 Grid labels use normalized values; readings use physical units. Strokes default
 to slate gray with 1 px major and 0.6 px minor lines. Stroke widths stay constant
-under zoom; label sizes use SVG user units. Layer controls do not expose drawing
-objects or SVG nodes.
+under zoom. Layer controls do not expose drawing objects or SVG nodes.
+
+Grid labels adapt automatically to the chart's rendered size,
+including static charts with zoom disabled. The layout prioritizes key values,
+hides labels that overlap or extend beyond the default view, and prioritizes zero
+and the highest labeled axis value. It recalculates on resize and layer visibility
+or style changes. Zoom and pan preserve the chosen labels and scale them smoothly
+with the grid. This changes only labels; grid lines and ticks remain unchanged.
+SVG exports preserve the current label layout.
+
+For small static charts, hide minor grid lines and, when unnecessary, peripheral
+scales using the controls above. Very small charts necessarily show fewer values;
+use a larger container for detailed readings. Peripheral labels retain their full
+wording and scale with the chart. Their rulers form two outlined bands: phase
+(transmission/reflection) and electrical length (toward load/generator), with a
+shared tick circle inside each band.
+The independent `SmithScales` panel uses its own responsive layout.
 
 ## Parameter scales
 
@@ -404,12 +450,12 @@ result rejects the operation without changing Z₀ or data. Active marker drags
 cursor indicators are cleared, and marker readings are queued with the new values.
 Changing to the current Z₀ has no effect. Mutations after destruction throw.
 
-Two DOM-independent helpers are also exported:
+Two DOM-independent methods are available on `RfCalculations`:
 
-- `renormalizeReflection(gamma, fromOhms, toOhms)` returns the new complex Γ or
+- `RfCalculations.renormalizeReflection(gamma, fromOhms, toOhms)` returns the new complex Γ or
   `undefined` for a singular/unrepresentable result. Exact open and short limits
   remain Γ = +1 and −1. References must be positive, finite, real ohm values.
-- `renormalizeSamples(samples, fromOhms, toOhms)` returns a new sample array in
+- `RfCalculations.renormalizeSamples(samples, fromOhms, toOhms)` returns a new sample array in
   the same order, preserving frequencies. Invalid samples or a singular result
   throw `RangeError`; the input is never modified.
 
@@ -424,15 +470,15 @@ multiport renormalization are outside the supported scope.
 
 ## Touchstone import
 
-`parseTouchstone(text)` returns `{ samples, referenceImpedanceOhms }`. It accepts
+`Touchstone.parse(text)` returns `{ samples, referenceImpedanceOhms }`. It accepts
 one-port Touchstone 1.x, converts RI/MA/DB into Cartesian Γ and all frequencies
 into Hz, and throws for unsupported or invalid input.
 
 ```ts
-import { Smith, parseTouchstone } from 'smithkit';
+import { Smith, Touchstone } from 'smithkit';
 
 async function showMeasurement(file: File): Promise<Smith> {
-  const { samples, referenceImpedanceOhms } = parseTouchstone(await file.text());
+  const { samples, referenceImpedanceOhms } = Touchstone.parse(await file.text());
   const chart = new Smith(referenceImpedanceOhms);
   chart.draw('#smith');
   chart.addTrace(samples, { name: file.name });
@@ -441,10 +487,43 @@ async function showMeasurement(file: File): Promise<Smith> {
 ```
 
 Omitted options use Touchstone defaults: GHz, S, MA, 50 Ω. For an existing chart,
-use `renormalizeSamples` when the file reference differs from
+use `RfCalculations.renormalizeSamples` when the file reference differs from
 `chart.referenceImpedanceOhms`. The parser itself does not renormalize data.
 Multiport data and Touchstone 2.x are not supported.
 
+## SVG export
+
+`chart.toSvg()` and `scales.toSvg()` return SVG strings. Call them after `draw()`
+while the component is mounted and has a non-zero rendered size; exporting before
+mounting, from a `display: none` container, or after destruction throws an error.
+
+```ts
+const svg = chart.toSvg();
+const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+const url = URL.createObjectURL(blob);
+const link = document.createElement('a');
+link.href = url;
+link.download = 'smith-chart.svg';
+document.body.appendChild(link);
+link.click();
+link.remove();
+setTimeout(() => URL.revokeObjectURL(url), 1000);
+```
+
+The chart export preserves the current zoom/pan, layer visibility, labels, traces,
+markers, and visible indicators. It captures the rendered points, including dense
+trace point reduction; it is an image export, not a measurement-data export.
+The scale export combines all twelve axes into one SVG using their current layout
+and displayed readings. To export a marker reading, call `scales.update()` with
+that marker's reflection coefficient before `scales.toSvg()`.
+
+Files have explicit pixel dimensions and a transparent background. Presentation
+styles are inlined so the application's stylesheet is not required. Text remains
+editable, and curved captions retain their internal path references. Font files
+and surrounding HTML controls/backgrounds are not embedded. Downloading is the
+consumer's responsibility; the library does not create files or modify live nodes.
+The demo provides separate **Export chart SVG** and **Export scales SVG** buttons.
+
 ## Development and license
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for development, testing, release, and demo

package/dist/lib/MarkerMeasurements.d.ts

@@ -0,0 +1,6 @@
+import type { MarkerSnapshot, MarkerComparison } from './measurements.js';
+export declare class MarkerMeasurements {
+    private constructor();
+    /** Compare B against A without a chart or browser. Frequencies must be finite and non-negative. */
+    static compare(a: Pick<MarkerSnapshot, 'frequencyHz' | 'impedanceOhms' | 'reflectionCoefficient'>, b: Pick<MarkerSnapshot, 'frequencyHz' | 'impedanceOhms' | 'reflectionCoefficient'>): MarkerComparison;
+}

package/dist/lib/MarkerMeasurements.js

@@ -0,0 +1,22 @@
+export class MarkerMeasurements {
+    constructor() { }
+    /** Compare B against A without a chart or browser. Frequencies must be finite and non-negative. */
+    static compare(a, b) {
+        if (![a.frequencyHz, b.frequencyHz].every((frequencyHz) => Number.isFinite(frequencyHz) && frequencyHz >= 0)) {
+            throw new RangeError('Marker frequencies must be finite and non-negative.');
+        }
+        const isFinite = (value) => Number.isFinite(value.re) && Number.isFinite(value.im);
+        const hasPhase = (gamma) => isFinite(gamma) && (gamma.re !== 0 || gamma.im !== 0);
+        const phaseDelta = hasPhase(a.reflectionCoefficient) && hasPhase(b.reflectionCoefficient)
+            ? ((b.reflectionCoefficient.arg() - a.reflectionCoefficient.arg()) * 180) / Math.PI
+            : undefined;
+        const impedanceDelta = a.impedanceOhms && b.impedanceOhms && isFinite(a.impedanceOhms) && isFinite(b.impedanceOhms)
+            ? b.impedanceOhms.sub(a.impedanceOhms)
+            : undefined;
+        return {
+            frequencyDeltaHz: b.frequencyHz - a.frequencyHz,
+            impedanceDeltaOhms: impedanceDelta && isFinite(impedanceDelta) ? impedanceDelta : undefined,
+            phaseDeltaDegrees: phaseDelta === undefined ? undefined : ((phaseDelta + 540) % 360) - 180,
+        };
+    }
+}

package/dist/lib/Smith.d.ts

@@ -1,10 +1,11 @@
 import { TraceSamples } from './samples.js';
 import type { ChartLayers, PeripheralScales } from './layers.js';
-import type { SmithReading } from './rf.js';
+import type { SmithReading } from './rf/RfCalculations.js';
 import type { TraceOptions, TraceUpdateOptions, TraceInfo, MarkerSnapshot, MarkerComparison } from './measurements.js';
 export declare enum SmithEventType {
     Cursor = "cursor",
     Marker = "marker",
+    MarkerSelect = "marker-select",
     MarkerDragStart = "marker-drag-start",
     MarkerDragEnd = "marker-drag-end"
 }
@@ -12,19 +13,21 @@ export type SmithEvent = {
     type: SmithEventType.Cursor;
     data: SmithReading | undefined;
 } | {
-    type: SmithEventType.Marker | SmithEventType.MarkerDragStart | SmithEventType.MarkerDragEnd;
+    type: SmithEventType.Marker | SmithEventType.MarkerSelect | SmithEventType.MarkerDragStart | SmithEventType.MarkerDragEnd;
     data: MarkerSnapshot;
 };
 export declare class Smith {
     private referenceOhms;
     private calcs;
     private scalers;
+    private readonly defaultTransform;
     private transform;
     private zoomEnabled;
     private applyingView;
     private zoomBehavior;
     private svg;
     private resizeObserver;
+    private readonly labelLayout;
     private container;
     private dataContainer;
     private markerContainer;
@@ -52,6 +55,8 @@ export declare class Smith {
     readonly peripheralScales: PeripheralScales;
     constructor(referenceOhms?: number);
     draw(target: string | HTMLElement): void;
+    /** Export the current mounted view as standalone SVG with a transparent background. */
+    toSvg(): string;
     /** Remove this chart and release its event handlers. Safe to call more than once. */
     destroy(): void;
     private updateViewportScale;
@@ -85,6 +90,8 @@ export declare class Smith {
     /** Place a marker on an existing sample; no interpolation is performed. */
     addMarker(traceId: string, sampleIndex?: number): string | undefined;
     removeMarker(id: string): boolean;
+    /** Focus a mounted, visible marker for keyboard interaction. */
+    focusMarker(id: string): boolean;
     setMarkerSample(id: string, sampleIndex: number): boolean;
     /** Select the nearest measured frequency; ties choose the earliest input sample. */
     setMarkerFrequency(id: string, frequencyHz: number): boolean;

package/dist/lib/Smith.js

@@ -1,29 +1,32 @@
 import * as d3 from 'd3';
-import { MouseGesture } from './draw/MouseGesture.js';
-import { SmithSvg } from './draw/SmithSvg.js';
-import { SmithGroup } from './draw/SmithGroup.js';
-import { SmithCircle } from './draw/SmithCircle.js';
-import { SmithData } from './draw/SmithData.js';
-import { SmithCursor } from './draw/SmithCursor.js';
-import { ConstResistance } from './draw/ConstResistance.js';
-import { ConstReactance } from './draw/ConstReactance.js';
-import { ConstConductance } from './draw/ConstConductance.js';
-import { ConstSusceptance } from './draw/ConstSusceptance.js';
-import { ConstQCircles } from './draw/ConstQCircles.js';
-import { ConstSwrCircles } from './draw/ConstSwrCircles.js';
-import { SmithScaler } from './draw/SmithScaler.js';
-import { SmithConstantCircle } from './SmithConstantCircle.js';
-import { SmithArcsDefs } from './SmithArcsDefs.js';
-import { Complex } from './complex/Complex.js';
+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 { gridLayer, circleLayer } from './layers.js';
-import { renormalizeSamples } from './renormalization.js';
-import { readReflection } from './rf.js';
-import { compareMarkerReadings } from './measurements.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;
 (function (SmithEventType) {
     SmithEventType["Cursor"] = "cursor";
     SmithEventType["Marker"] = "marker";
+    SmithEventType["MarkerSelect"] = "marker-select";
     SmithEventType["MarkerDragStart"] = "marker-drag-start";
     SmithEventType["MarkerDragEnd"] = "marker-drag-end";
 })(SmithEventType || (SmithEventType = {}));
@@ -31,12 +34,14 @@ 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;
@@ -68,7 +73,7 @@ export class Smith {
             throw new RangeError('Reference impedance must be positive and finite.');
         }
         const viewBoxSize = 500;
-        const gridData = SmithArcsDefs.getData();
+        const gridData = GridDefinitions.create();
         this.scalers = this.createScalers(viewBoxSize);
         this.svg = new SmithSvg(viewBoxSize);
         this.container = new SmithGroup();
@@ -122,7 +127,6 @@ export class Smith {
         this.container.append(this.reactanceAxis);
         this.container.append(cursorContainer);
         this.container.append(this.dataContainer);
-        this.container.append(this.markerContainer);
         const labels = new SmithGroup().attr('data-layer', 'labels').attr('pointer-events', 'none');
         for (const [name, layer] of [
             ['conductance', this.constConductance],
@@ -134,14 +138,16 @@ export class Smith {
         }
         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: gridLayer(this.constResistance, assertAlive),
-            reactance: gridLayer(this.constReactance, assertAlive),
-            conductance: gridLayer(this.constConductance, assertAlive),
-            susceptance: gridLayer(this.constSusceptance, assertAlive),
-            q: circleLayer(this.constQCircles, 0, assertAlive),
-            vswr: circleLayer(this.constSwrCircles, 1, assertAlive),
+            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) => {
@@ -152,6 +158,7 @@ export class Smith {
                 else {
                     this.peripheralScaleRenderer.hide();
                 }
+                this.labelLayout.update(true);
             },
             update: (gamma) => {
                 assertAlive();
@@ -171,6 +178,11 @@ export class Smith {
         host.appendChild(this.svg.Node);
         this.updateViewportScale();
     }
+    /** Export the current mounted view as standalone SVG with a transparent 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) {
@@ -196,6 +208,7 @@ export class Smith {
             const scale = Math.hypot(matrix.a, matrix.b);
             this.data.forEach((trace) => trace.setViewportScale(scale));
         }
+        this.labelLayout.update();
     }
     assertAlive() {
         if (this.destroyed) {
@@ -252,19 +265,22 @@ export class Smith {
     }
     /** Last cursor position. Use cursor events to detect pointer leave. */
     get cursorReading() {
-        return readReflection(this.cursor.Position, this.referenceImpedanceOhms);
+        return RfCalculations.readReflection(this.cursor.Position, this.referenceImpedanceOhms);
     }
     initializeZoom() {
         const zoom = this.zoomBehavior
             .scaleExtent([0.6, 1000])
-            .filter((event) => this.zoomEnabled && (!event.ctrlKey || event.type === 'wheel') && !event.button)
+            .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.applyingView) {
+            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);
@@ -300,7 +316,7 @@ export class Smith {
     }
     resetView() {
         this.assertAlive();
-        const transform = d3.zoomIdentity.translate(62.5, 62.5).scale(0.75);
+        const transform = this.defaultTransform;
         this.applyView(transform);
     }
     onZoom(transform) {
@@ -411,6 +427,7 @@ export class Smith {
         data.setStyle(options);
         if (options.name !== undefined) {
             this.traceMetadata.get(data).name = options.name.trim();
+            data.setName(options.name.trim());
         }
         if (options.color !== undefined) {
             data.setColor(options.color);
@@ -459,6 +476,14 @@ export class Smith {
         const location = this.findMarker(id);
         return location ? this.data[location.datasetNo].removeMarker(location.markerNo) : false;
     }
+    /** Focus a mounted, visible marker for keyboard interaction. */
+    focusMarker(id) {
+        this.assertAlive();
+        const location = this.findMarker(id);
+        return location
+            ? this.data[location.datasetNo].Markers[location.markerNo].marker.focus()
+            : false;
+    }
     setMarkerSample(id, sampleIndex) {
         this.assertAlive();
         const location = this.findMarker(id);
@@ -482,7 +507,7 @@ export class Smith {
         const data = this.data[location.datasetNo];
         const marker = data.Markers[location.markerNo];
         return {
-            ...readReflection(Complex.from(...marker.selectedPoint.reflectionCoefficient), this.referenceImpedanceOhms),
+            ...RfCalculations.readReflection(Complex.from(...marker.selectedPoint.reflectionCoefficient), this.referenceImpedanceOhms),
             frequencyHz: marker.selectedPoint.frequencyHz,
             traceId: this.traceMetadata.get(data).id,
             markerId: id,
@@ -494,7 +519,7 @@ export class Smith {
     compareMarkers(a, b) {
         const first = this.getMarker(a);
         const second = this.getMarker(b);
-        return first && second ? compareMarkerReadings(first, second) : undefined;
+        return first && second ? MarkerMeasurements.compare(first, second) : undefined;
     }
     /** Current positive real reference impedance, in ohms. */
     get referenceImpedanceOhms() {
@@ -504,11 +529,11 @@ export class Smith {
     renormalize(referenceImpedanceOhms) {
         this.assertAlive();
         // Validate even with no traces, and prepare every result before changing any state.
-        renormalizeSamples([], this.referenceOhms, referenceImpedanceOhms);
+        RfCalculations.renormalizeSamples([], this.referenceOhms, referenceImpedanceOhms);
         if (referenceImpedanceOhms === this.referenceOhms) {
             return;
         }
-        const samples = this.data.map((data) => renormalizeSamples(data.Samples, this.referenceOhms, referenceImpedanceOhms));
+        const samples = this.data.map((data) => RfCalculations.renormalizeSamples(data.Samples, this.referenceOhms, referenceImpedanceOhms));
         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'));
@@ -534,6 +559,13 @@ export class Smith {
         }, this.markerContainer, options);
         const number = this.nextTraceId++;
         this.traceMetadata.set(data, { id: `trace-${number}`, name: `Trace ${number}` });
+        data.setName(`Trace ${number}`);
+        data.setMarkerSelectHandler((marker) => {
+            const snapshot = this.getMarker(this.markerId(marker));
+            if (snapshot) {
+                this.emit({ type: SmithEventType.MarkerSelect, data: snapshot });
+            }
+        });
         data.setMarkerMoveHandler((index) => {
             const marker = data.Markers[index];
             const snapshot = marker && this.getMarker(this.markerId(marker.marker));

package/dist/lib/SmithFormatter.d.ts

@@ -0,0 +1,10 @@
+import type { Complex } from './math/Complex.js';
+export declare class SmithFormatter {
+    private constructor();
+    /** Format with three significant digits and an SI prefix; includes spacing before the unit. */
+    static number(value: number): string;
+    /** Format Cartesian components to decimalPlaces fractional digits. */
+    static complex(value: Complex, unit?: string, decimalPlaces?: number): string;
+    /** Format magnitude and phase in degrees to decimalPlaces fractional digits. */
+    static polar(value: Complex, unit?: string, decimalPlaces?: number): string;
+}