smithkit 0.2.0 → 0.3.0

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

@@ -0,0 +1,55 @@
+/** Resolved appearance shared by charts and independent scales. Lengths are positive. */
+export interface SmithTheme {
+    background: string;
+    fontFamily: string;
+    grid: {
+        stroke: string;
+        textColor: string;
+        majorWidth: number;
+        minorWidth: number;
+        fontSize: number;
+    };
+    boundary: {
+        stroke: string;
+        width: number;
+    };
+    circles: {
+        q: string;
+        vswr: string;
+        width: number;
+    };
+    scales: {
+        stroke: string;
+        boundaryColor: string;
+        textColor: string;
+        valueColor: string;
+        indicatorColor: string;
+        indicatorOutline: string;
+        fontSize: number;
+        titleFontSize: number;
+        valueFontSize: number;
+        peripheralFontSize: number;
+    };
+    cursor: {
+        pointColor: string;
+        impedanceColor: string;
+        admittanceColor: string;
+        pointSize: number;
+        lineWidth: number;
+    };
+    marker: {
+        outlineColor: string;
+        textColor: string;
+        focusColor: string;
+        focusHaloColor: string;
+    };
+    traceColors: readonly string[];
+}
+export type SmithThemeOverrides = {
+    [K in keyof SmithTheme]?: SmithTheme[K] extends readonly string[] ? readonly string[] : SmithTheme[K] extends object ? Partial<SmithTheme[K]> : SmithTheme[K];
+};
+/** Each application replaces the previous appearance, starting from the named preset. */
+export interface SmithAppearance {
+    theme?: 'light' | 'dark';
+    overrides?: SmithThemeOverrides;
+}

package/dist/lib/appearance/types.js

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

package/dist/lib/grid/ConstCircles.d.ts

@@ -35,9 +35,6 @@ export declare abstract class ConstCircles {
     visibility(visible: boolean): void;
     show(): void;
     hide(): void;
-    displayMinor(display: boolean): void;
-    showMinor(): void;
-    hideMinor(): void;
     protected build(): SmithGroup;
     /** Mount labels separately so every grid line is painted before any label. */
     get labels(): SmithGroup;

package/dist/lib/grid/ConstCircles.js

@@ -26,20 +26,6 @@ export class ConstCircles {
         this.container.hide();
         this.texts.hide();
     }
-    displayMinor(display) {
-        if (display) {
-            this.minor.show();
-        }
-        else {
-            this.minor.hide();
-        }
-    }
-    showMinor() {
-        this.minor.show();
-    }
-    hideMinor() {
-        this.minor.hide();
-    }
     build() {
         this.texts.hide();
         return this.container.append(this.minor).append(this.major).hide();
@@ -108,12 +94,12 @@ export class ConstCircles {
     defaultDrawingOptions() {
         return {
             // Keep curved grid strokes visible at normal browser zoom and low pixel density.
-            stroke: '#64748b',
-            majorWidth: '1',
-            minorWidth: '0.6',
-            textColor: 'black',
-            textFontFamily: 'Verdana',
-            textFontSize: '1',
+            stroke: 'var(--smithkit-grid-stroke)',
+            majorWidth: 'var(--smithkit-grid-majorWidth)',
+            minorWidth: 'var(--smithkit-grid-minorWidth)',
+            textColor: 'var(--smithkit-grid-textColor)',
+            textFontFamily: 'var(--smithkit-fontFamily)',
+            textFontSize: 'var(--smithkit-grid-fontSize)',
         };
     }
     scaleArc(scaler, d) {

package/dist/lib/grid/ConstQCircles.js

@@ -28,7 +28,7 @@ export class ConstQCircles {
         this.container.append(a2);
     }
     getDefaultDrawOptions() {
-        return { stroke: 'blue', strokeWidth: '1' };
+        return { stroke: 'var(--smithkit-circles-q)', strokeWidth: 'var(--smithkit-circles-width)' };
     }
     setDrawOptions(opts) {
         this.opts = opts;

package/dist/lib/grid/ConstSwrCircles.js

@@ -27,7 +27,7 @@ export class ConstSwrCircles {
         this.container.append(circle);
     }
     getDefaultDrawOptions() {
-        return { stroke: 'orange', strokeWidth: '1' };
+        return { stroke: 'var(--smithkit-circles-vswr)', strokeWidth: 'var(--smithkit-circles-width)' };
     }
     setDrawOptions(opts) {
         this.opts = opts;

package/dist/lib/grid/GridDefinitions.d.ts

@@ -1,6 +1,12 @@
-import type { SmithTicksData } from './types.js';
+import type { SmithTicksData, SmithTicksShapes } from './types.js';
 export declare class GridDefinitions {
     private constructor();
+    static readonly basicValues: readonly number[];
+    /** Complete principal circles and boundary-to-axis arcs for a sparse grid. */
+    static basic(): {
+        resistance: SmithTicksShapes;
+        reactance: SmithTicksShapes;
+    };
     private static readonly resistanceMajor;
     private static readonly resistanceMinor;
     private static readonly reactanceMajor;

package/dist/lib/grid/GridDefinitions.js

@@ -1,5 +1,34 @@
 export class GridDefinitions {
     constructor() { }
+    static basicValues = Object.freeze([0.2, 0.5, 1, 2, 5]);
+    /** Complete principal circles and boundary-to-axis arcs for a sparse grid. */
+    static basic() {
+        return {
+            resistance: { lines: [], circles: [...GridDefinitions.basicValues], arcs: [] },
+            reactance: {
+                lines: [{ p1: [-1, 0], p2: [1, 0] }],
+                circles: [],
+                arcs: GridDefinitions.basicValues.flatMap((value) => [
+                    [
+                        value,
+                        [
+                            [0, 0],
+                            [0, 1],
+                        ],
+                        [false, false],
+                    ],
+                    [
+                        -value,
+                        [
+                            [0, 1],
+                            [0, 0],
+                        ],
+                        [false, true],
+                    ],
+                ]),
+            },
+        };
+    }
     static resistanceMajor = [
         [[0.05, 0.15], 0.2, -0.2, false],
         [[0.1, 0.3, 0.5, 0.7, 0.9], 2, -2, true],

package/dist/lib/grid/GridLayerControl.d.ts

@@ -1,12 +1,13 @@
-import type { ConstCircles } from './ConstCircles.js';
-import type { GridLayer, GridStyle } from '../layers.js';
+import type { SmithGridLayer } from './SmithGridLayer.js';
+import type { GridDetail, GridLayer, GridStyle } from '../layers.js';
 import { LayerControl } from './LayerControl.js';
 /** Exposes grid controls without exposing the SVG renderer. */
 export declare class GridLayerControl extends LayerControl implements GridLayer {
     private readonly layer;
     private readonly changed;
-    constructor(layer: ConstCircles, assertAlive: () => void, changed: () => void);
+    constructor(layer: SmithGridLayer, assertAlive: () => void, changed: () => void);
     setVisible(visible: boolean): void;
-    setMinorVisible(visible: boolean): void;
+    setLabelsVisible(visible: boolean): void;
+    setDetail(detail: GridDetail): void;
     setStyle(style: Partial<GridStyle>): void;
 }

package/dist/lib/grid/GridLayerControl.js

@@ -13,9 +13,18 @@ export class GridLayerControl extends LayerControl {
         this.layer.visibility(visible);
         this.changed();
     }
-    setMinorVisible(visible) {
+    setLabelsVisible(visible) {
         this.assertAlive();
-        this.layer.displayMinor(visible);
+        this.layer.setLabelsVisible(visible);
+        this.changed();
+    }
+    setDetail(detail) {
+        this.assertAlive();
+        if (!['basic', 'standard', 'detailed'].includes(detail)) {
+            throw new RangeError('Grid detail must be basic, standard, or detailed.');
+        }
+        this.layer.setDetail(detail);
+        this.changed();
     }
     setStyle(style) {
         this.assertAlive();

package/dist/lib/grid/SmithGridLayer.d.ts

@@ -3,9 +3,10 @@ import { SmithGroup } from '../svg/SmithGroup.js';
 import type { SmithScaler } from '../svg/SmithScaler.js';
 import type { SmithTicksData } from './types.js';
 import { type GridKind } from './GridGeometry.js';
+import type { GridDetail } from '../layers.js';
 export interface GridLayerParams {
     scaler: SmithScaler;
-    showMinor: boolean;
+    detail: GridDetail;
     data: SmithTicksData;
 }
 /** SVG adapter shared by the four constant impedance/admittance layers. */
@@ -14,7 +15,12 @@ export declare class SmithGridLayer extends ConstCircles {
     protected major: SmithGroup;
     protected minor: SmithGroup;
     protected texts: SmithGroup;
+    private readonly standardDefinitions;
+    private readonly basicDefinitions;
+    private detail;
     constructor(params: GridLayerParams, kind: GridKind);
+    setLabelsVisible(visible: boolean): void;
+    setDetail(detail: GridDetail): void;
     private static labelPriority;
     private drawGrid;
 }

package/dist/lib/grid/SmithGridLayer.js

@@ -2,6 +2,7 @@ import { ConstCircles } from './ConstCircles.js';
 import { SmithGroup } from '../svg/SmithGroup.js';
 import { SmithText } from '../svg/SmithText.js';
 import { GridGeometry } from './GridGeometry.js';
+import { GridDefinitions } from './GridDefinitions.js';
 import { GridLabels } from './GridLabels.js';
 /** SVG adapter shared by the four constant impedance/admittance layers. */
 export class SmithGridLayer extends ConstCircles {
@@ -9,17 +10,23 @@ export class SmithGridLayer extends ConstCircles {
     major;
     minor;
     texts;
+    standardDefinitions;
+    basicDefinitions;
+    detail = 'detailed';
     constructor(params, kind) {
         super(params.scaler);
         this.kind = kind;
         const real = kind === 'resistance' || kind === 'conductance';
         const definitions = params.data[real ? 'resistance' : 'reactance'];
+        this.standardDefinitions = definitions.major;
+        this.basicDefinitions = GridDefinitions.basic()[real ? 'resistance' : 'reactance'];
         this.major = this.drawGrid(definitions.major, this.opts.majorWidth);
         this.minor = this.drawGrid(definitions.minor, this.opts.minorWidth);
         this.texts = new SmithGroup()
             .attr('stroke', 'none')
-            .attr('font-size', '7')
-            .attr('font-family', 'Verdana');
+            .attr('font-size', this.opts.textFontSize)
+            .attr('font-family', this.opts.textFontFamily)
+            .attr('fill', this.opts.textColor);
         for (const tick of real ? GridLabels.resistance() : GridLabels.reactance()) {
             const label = GridGeometry.label(kind, tick.definition);
             const text = new SmithText(this.scaler.point(label.point), label.text, {
@@ -30,12 +37,36 @@ export class SmithGridLayer extends ConstCircles {
                 dominantBaseline: label.dominantBaseline,
             });
             text.Element.attr('data-label-priority', SmithGridLayer.labelPriority(tick.definition.point.r, tick.definition.point.i));
+            const { r, i } = tick.definition.point;
+            const basic = real
+                ? i === 0 && (r === 0 || GridDefinitions.basicValues.includes(r))
+                : r === 0 && GridDefinitions.basicValues.includes(Math.abs(i));
+            text.Element.attr('data-basic-label', String(basic));
             this.texts.append(text);
         }
         this.build();
-        if (!params.showMinor) {
+        this.setDetail(params.detail);
+    }
+    setLabelsVisible(visible) {
+        // Keep this separate from whole-layer opacity and detail-specific label filtering.
+        this.texts.attr('display', visible ? null : 'none');
+    }
+    setDetail(detail) {
+        if (detail === this.detail) {
+            return;
+        }
+        if ((detail === 'basic') !== (this.detail === 'basic')) {
+            this.major.Element.selectAll('*').remove();
+            this.drawGrid(detail === 'basic' ? this.basicDefinitions : this.standardDefinitions, this.opts.majorWidth, this.major);
+        }
+        if (detail === 'detailed') {
+            this.minor.show();
+        }
+        else {
             this.minor.hide();
         }
+        this.texts.Element.selectAll('[data-basic-label="false"]').attr('display', detail === 'basic' ? 'none' : null);
+        this.detail = detail;
     }
     static labelPriority(real, imaginary) {
         const value = Math.abs(imaginary === 0 ? real : imaginary);
@@ -52,9 +83,8 @@ export class SmithGridLayer extends ConstCircles {
                             : 40;
         return importance + (imaginary === 0 ? 20 : real === 0 ? 10 : 0);
     }
-    drawGrid(definitions, width) {
+    drawGrid(definitions, width, group = new SmithGroup()) {
         const geometry = GridGeometry.shapes(this.kind, definitions);
-        const group = new SmithGroup();
         this.drawShapes(group.Element, this.opts.stroke, width, {
             lines: geometry.lines.map((line) => this.scaler.line(line)),
             circles: geometry.circles.map((circle) => this.scaler.circle(circle)),

package/dist/lib/index.d.ts

@@ -9,6 +9,8 @@ export { MarkerMeasurements } from './MarkerMeasurements.js';
 export type { TraceOptions, TraceUpdateOptions, MarkerSelectionStrategy, TraceStyle, TraceRenderMode, TraceInfo, MarkerInfo, MarkerSnapshot, MarkerComparison, } from './measurements.js';
 export { RfCalculations } from './rf/RfCalculations.js';
 export type { SmithReading } from './rf/RfCalculations.js';
-export type { GridStyle, CircleStyle, GridLayer, CircleLayer, ChartLayers, PeripheralScales, } from './layers.js';
+export type { GridStyle, CircleStyle, GridLayer, GridDetail, CircleLayer, ChartLayers, PeripheralScales, } from './layers.js';
 export { SmithFormatter } from './SmithFormatter.js';
 export type { ReactiveComponent } from './rf/RfCalculations.js';
+export type { SmithAppearance, SmithTheme, SmithThemeOverrides } from './appearance/types.js';
+export type { MarkerLegendField, MarkerLegendOptions, ImageExportOptions, SmithImageExportOptions, ScaleImageExportOptions, ScaleExportReadout, } from './svg/export.js';

package/dist/lib/interaction/SmithCursor.d.ts

@@ -1,25 +1,10 @@
 import { SmithGroup } from '../svg/SmithGroup.js';
 import { SmithScaler } from '../svg/SmithScaler.js';
 import { Complex } from '../math/Complex.js';
-interface DrawOptions {
-    point: {
-        radius: number;
-        color: string;
-    };
-    impedance: {
-        width: number;
-        color: string;
-    };
-    admittance: {
-        width: number;
-        color: string;
-    };
-}
 export declare class SmithCursor {
     private scaler;
     private epsilon;
     private pendingMove;
-    private drawingOpts;
     private calcs;
     private zClipCircle;
     private yClipCircle;
@@ -44,6 +29,4 @@ export declare class SmithCursor {
     hide(): void;
     private cancelPendingMove;
     setMoveHandler(handler: ((rc: Complex) => void) | null): void;
-    setDrawOptions(opts: DrawOptions): void;
 }
-export {};

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,10 +15,14 @@ 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: detailed. Basic shows only the principal normalized values. */
+    setDetail(detail: GridDetail): void;
     setStyle(style: Partial<GridStyle>): void;
 }
 export interface CircleLayer {

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

@@ -0,0 +1,66 @@
+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 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;
+    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;
+}