smithkit 0.6.0 → 0.7.0

package/README.md

@@ -60,8 +60,7 @@ Mount a container with a non-zero size:
 ```ts
 import { Smith } from 'smithkit';
 
-const chart = new Smith({ referenceImpedanceOhms: 50 });
-chart.draw('#smith');
+const chart = new Smith('#smith', { referenceImpedanceOhms: 50 });
 const traceId = chart.addTrace(
   [
     [1e9, 0.5, -0.5],
@@ -84,6 +83,7 @@ packed `Float64Array` triples are also supported. Inputs are validated and copie
 By default, the chart shows a labeled standard impedance grid with zoom, cursor
 tracking, and peripheral scales disabled. No markers are added automatically.
 The constructor and `setOptions()` share the same grouped configuration schema.
+To mount later, use `new Smith(options)` and then `chart.draw(elementOrSelector)`.
 
 Create charts in the browser after mounting the host; call `destroy()` on unmount.
 Calculation, formatting, and Touchstone classes also work without a DOM.

package/dist/lib/OptionsValidation.d.ts

@@ -1,5 +1,5 @@
 import type { SmithOptions } from './options.js';
-import type { CircleStyle, GridDetail, GridStyle } from './layers.js';
+import type { CircleStyleOptions, GridDetail, GridStyleOptions } from './layers.js';
 /** Shared validation for initial configuration, patches, and individual controls. */
 export declare class OptionsValidation {
     private constructor();
@@ -8,8 +8,8 @@ export declare class OptionsValidation {
     static detail(value: GridDetail): void;
     private static lengths;
     private static strings;
-    static gridStyle(style: Partial<GridStyle>): void;
-    static circleStyle(style: Partial<CircleStyle>): void;
+    static gridStyle(style: GridStyleOptions): void;
+    static circleStyle(style: CircleStyleOptions): void;
     static circleValue(value: number, minimum: number): void;
     static circleValues(values: readonly number[], minimum: number): void;
     static chart(options: SmithOptions): void;

package/dist/lib/OptionsValidation.js

@@ -41,21 +41,25 @@ export class OptionsValidation {
         }
     }
     static gridStyle(style) {
-        OptionsValidation.object(style, 'Grid style', [
-            'stroke',
-            'majorWidth',
-            'minorWidth',
-            'textColor',
-            'textFontFamily',
-            'textFontSize',
-        ]);
-        OptionsValidation.lengths(style, ['majorWidth', 'minorWidth', 'textFontSize']);
-        OptionsValidation.strings(style, ['stroke', 'textColor', 'textFontFamily']);
+        OptionsValidation.object(style, 'Grid style', ['line', 'text']);
+        if (style.line !== undefined) {
+            OptionsValidation.object(style.line, 'Grid line', ['color', 'majorWidth', 'minorWidth']);
+            OptionsValidation.lengths(style.line, ['majorWidth', 'minorWidth']);
+            OptionsValidation.strings(style.line, ['color']);
+        }
+        if (style.text !== undefined) {
+            OptionsValidation.object(style.text, 'Grid text', ['color', 'fontFamily', 'fontSize']);
+            OptionsValidation.lengths(style.text, ['fontSize']);
+            OptionsValidation.strings(style.text, ['color', 'fontFamily']);
+        }
     }
     static circleStyle(style) {
-        OptionsValidation.object(style, 'Circle style', ['stroke', 'strokeWidth']);
-        OptionsValidation.lengths(style, ['strokeWidth']);
-        OptionsValidation.strings(style, ['stroke']);
+        OptionsValidation.object(style, 'Circle style', ['line']);
+        if (style.line !== undefined) {
+            OptionsValidation.object(style.line, 'Circle line', ['color', 'width']);
+            OptionsValidation.lengths(style.line, ['width']);
+            OptionsValidation.strings(style.line, ['color']);
+        }
     }
     static circleValue(value, minimum) {
         if (!Number.isFinite(value) || value < minimum || value <= 0) {

package/dist/lib/Smith.d.ts

@@ -34,7 +34,10 @@ export declare class Smith {
     private listeners;
     readonly layers: ChartLayers;
     readonly peripheralScales: PeripheralScales;
+    /** Configure a chart for later mounting with draw(). */
     constructor(options?: SmithOptions);
+    /** Configure and mount immediately. String targets are CSS selectors, as in draw(). */
+    constructor(target: string | HTMLElement, options?: SmithOptions);
     /** Apply a validated patch. Omitted fields retain their current settings. */
     setOptions(options: SmithOptions): void;
     private applyOptions;

package/dist/lib/Smith.js

@@ -1,4 +1,5 @@
 import { OptionsValidation } from './OptionsValidation.js';
+import { ChartHost } from './rendering/ChartHost.js';
 import { MarkerLegend } from './svg/MarkerLegend.js';
 import { ImageExporter } from './svg/ImageExporter.js';
 import { Theme } from './appearance/Theme.js';
@@ -30,7 +31,18 @@ export class Smith {
     listeners = new Set();
     layers;
     peripheralScales;
-    constructor(options = {}) {
+    constructor(targetOrOptions = {}, configuration) {
+        const target = typeof targetOrOptions === 'string' || ChartHost.isElement(targetOrOptions)
+            ? targetOrOptions
+            : undefined;
+        if (target === undefined && configuration !== undefined) {
+            throw new TypeError('A container is required before the second options argument.');
+        }
+        const options = target === undefined
+            ? targetOrOptions
+            : configuration === undefined
+                ? {}
+                : configuration;
         OptionsValidation.chart(options);
         this.referenceOhms =
             options.referenceImpedanceOhms === undefined ? 50 : options.referenceImpedanceOhms;
@@ -49,6 +61,9 @@ export class Smith {
         this.peripheralScales = this.renderer.peripheralScales;
         try {
             this.applyOptions(options);
+            if (target !== undefined) {
+                this.draw(target);
+            }
         }
         catch (error) {
             // Invalid constructor options must not retain observers or event handlers.
@@ -133,7 +148,7 @@ export class Smith {
         for (const data of this.data) {
             const index = this.traceMetadata.get(data).colorIndex;
             if (index !== undefined) {
-                data.setColor(theme.traceColors[index % theme.traceColors.length]);
+                data.setColor(theme.traces.colors[index % theme.traces.colors.length]);
             }
         }
     }
@@ -176,8 +191,8 @@ export class Smith {
                     ? MarkerLegend.entries(traces, (id) => this.getMarker(id), options.markerLegend)
                     : []),
             ],
-            textColor: this.theme.grid.textColor,
-            fontFamily: this.theme.fontFamily,
+            textColor: this.theme.grid.text.color,
+            fontFamily: this.theme.text.fontFamily,
         };
     }
     /** Export the mounted view as PNG, optionally with radial scales and a trace legend. */
@@ -287,15 +302,31 @@ export class Smith {
         return;
     }
     validateTraceOptions(options) {
+        OptionsValidation.object(options, 'Trace', [
+            'mode',
+            'line',
+            'point',
+            'name',
+            'color',
+            'visible',
+        ]);
+        if (options.line !== undefined) {
+            OptionsValidation.object(options.line, 'Trace line', ['width', 'tolerancePx']);
+        }
+        if (options.point !== undefined) {
+            OptionsValidation.object(options.point, 'Trace point', ['radius']);
+        }
         if (options.mode !== undefined && !['points', 'line', 'both'].includes(options.mode)) {
             throw new TypeError('Trace mode must be points, line, or both.');
         }
-        if (options.lineTolerancePx !== undefined &&
-            (!Number.isFinite(options.lineTolerancePx) || options.lineTolerancePx < 0)) {
+        if (options.line?.tolerancePx !== undefined &&
+            (!Number.isFinite(options.line.tolerancePx) || options.line.tolerancePx < 0)) {
             throw new RangeError('Line tolerance must be finite and non-negative.');
         }
-        for (const key of ['lineWidth', 'pointRadius']) {
-            const value = options[key];
+        for (const [key, value] of [
+            ['line.width', options.line?.width],
+            ['point.radius', options.point?.radius],
+        ]) {
             if (value !== undefined && (!Number.isFinite(value) || value <= 0)) {
                 throw new RangeError(`${key} must be positive and finite.`);
             }
@@ -439,7 +470,7 @@ export class Smith {
         this.data = [];
     }
     createSmithData(values, dataset, options) {
-        const color = this.theme.traceColors[dataset % this.theme.traceColors.length];
+        const color = this.theme.traces.colors[dataset % this.theme.traces.colors.length];
         const data = this.renderer.createTrace(values, color, options, (marker, dragging) => {
             this.markerDragChanged(marker, dragging);
             const snapshot = this.getMarker(this.markerId(marker));

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

@@ -3,4 +3,5 @@ import type { SmithTheme } from './types.js';
 export declare class SvgTheme {
     private constructor();
     static apply(element: HTMLElement | SVGElement, theme: SmithTheme): void;
+    private static tokens;
 }

package/dist/lib/appearance/SvgTheme.js

@@ -2,20 +2,21 @@
 export class SvgTheme {
     constructor() { }
     static apply(element, theme) {
-        for (const [section, value] of Object.entries(theme)) {
+        SvgTheme.tokens(element, theme, '--smithkit');
+        element.style.backgroundColor = theme.background;
+    }
+    static tokens(element, values, prefix) {
+        for (const [key, value] of Object.entries(values)) {
             if (Array.isArray(value)) {
                 continue;
             }
             if (typeof value === 'object') {
-                for (const [key, entry] of Object.entries(value)) {
-                    const suffix = key.toLowerCase().endsWith('fontsize') ? 'px' : '';
-                    element.style.setProperty(`--smithkit-${section}-${key}`, String(entry) + suffix);
-                }
+                SvgTheme.tokens(element, value, `${prefix}-${key}`);
             }
             else {
-                element.style.setProperty(`--smithkit-${section}`, value);
+                const suffix = key === 'fontSize' ? 'px' : '';
+                element.style.setProperty(`${prefix}-${key}`, String(value) + suffix);
             }
         }
-        element.style.backgroundColor = theme.background;
     }
 }

package/dist/lib/appearance/Theme.js

@@ -18,66 +18,63 @@ export class Theme {
         const dark = name === 'dark';
         const theme = {
             background: dark ? '#0f172a' : 'transparent',
-            fontFamily: 'Verdana, sans-serif',
+            text: { fontFamily: 'Verdana, sans-serif' },
             grid: {
-                stroke: dark ? '#94a3b8' : '#64748b',
-                textColor: dark ? '#e2e8f0' : '#111827',
-                majorWidth: 1,
-                minorWidth: 0.6,
-                fontSize: 7,
+                line: { color: dark ? '#94a3b8' : '#64748b', majorWidth: 1, minorWidth: 0.6 },
+                text: { color: dark ? '#e2e8f0' : '#111827', fontSize: 7 },
+            },
+            boundary: { color: dark ? '#cbd5e1' : '#334155', width: 1 },
+            circles: {
+                q: { color: dark ? '#93c5fd' : 'blue', width: 1 },
+                vswr: { color: dark ? '#fbbf24' : 'orange', width: 1 },
             },
-            boundary: { stroke: dark ? '#cbd5e1' : '#334155', width: 1 },
-            circles: { q: dark ? '#93c5fd' : 'blue', vswr: dark ? '#fbbf24' : 'orange', width: 1 },
             scales: {
-                stroke: dark ? '#94a3b8' : '#64748b',
-                boundaryColor: dark ? '#cbd5e1' : '#334155',
-                textColor: dark ? '#e2e8f0' : '#334155',
-                valueColor: dark ? '#fca5a5' : '#b42318',
-                indicatorColor: dark ? '#f87171' : '#dc2626',
-                indicatorOutline: dark ? '#0f172a' : 'white',
-                fontSize: 10,
-                titleFontSize: 12,
-                valueFontSize: 11,
-                peripheralFontSize: 10.5,
+                line: { color: dark ? '#94a3b8' : '#64748b' },
+                boundary: { color: dark ? '#cbd5e1' : '#334155' },
+                text: { color: dark ? '#e2e8f0' : '#334155', fontSize: 10 },
+                value: { color: dark ? '#fca5a5' : '#b42318', fontSize: 11 },
+                indicator: { color: dark ? '#f87171' : '#dc2626', outline: dark ? '#0f172a' : 'white' },
+                title: { fontSize: 12 },
+                peripheral: { fontSize: 10.5 },
             },
             cursor: {
-                pointColor: dark ? '#fca5a5' : 'red',
-                impedanceColor: dark ? '#fca5a5' : 'red',
-                admittanceColor: dark ? '#86efac' : 'green',
-                pointSize: 5,
-                lineWidth: 1,
+                point: { color: dark ? '#fca5a5' : 'red', size: 5 },
+                impedance: { color: dark ? '#fca5a5' : 'red' },
+                admittance: { color: dark ? '#86efac' : 'green' },
+                line: { width: 1 },
             },
             marker: {
-                outlineColor: dark ? '#e2e8f0' : 'gray',
-                textColor: 'white',
-                focusColor: dark ? '#93c5fd' : '#1d4ed8',
-                focusHaloColor: dark ? '#0f172a' : 'white',
+                outline: { color: dark ? '#e2e8f0' : 'gray' },
+                text: { color: 'white' },
+                focus: { color: dark ? '#93c5fd' : '#1d4ed8', halo: dark ? '#0f172a' : 'white' },
+            },
+            traces: {
+                colors: dark
+                    ? [
+                        '#fb923c',
+                        '#4ade80',
+                        '#f87171',
+                        '#c084fc',
+                        '#d6a681',
+                        '#f472b6',
+                        '#cbd5e1',
+                        '#d4d45c',
+                        '#22d3ee',
+                        '#60a5fa',
+                    ]
+                    : [
+                        '#ff7f0e',
+                        '#2ca02c',
+                        '#d62728',
+                        '#9467bd',
+                        '#8c564b',
+                        '#e377c2',
+                        '#7f7f7f',
+                        '#bcbd22',
+                        '#17becf',
+                        '#1f77b4',
+                    ],
             },
-            traceColors: dark
-                ? [
-                    '#fb923c',
-                    '#4ade80',
-                    '#f87171',
-                    '#c084fc',
-                    '#d6a681',
-                    '#f472b6',
-                    '#cbd5e1',
-                    '#d4d45c',
-                    '#22d3ee',
-                    '#60a5fa',
-                ]
-                : [
-                    '#ff7f0e',
-                    '#2ca02c',
-                    '#d62728',
-                    '#9467bd',
-                    '#8c564b',
-                    '#e377c2',
-                    '#7f7f7f',
-                    '#bcbd22',
-                    '#17becf',
-                    '#1f77b4',
-                ],
         };
         if (appearance.overrides !== undefined) {
             Theme.merge(theme, appearance.overrides);

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

@@ -1,52 +1,96 @@
 /** Resolved appearance shared by charts and independent scales. Lengths are positive. */
 export interface SmithTheme {
     background: string;
-    fontFamily: string;
+    text: {
+        fontFamily: string;
+    };
     grid: {
-        stroke: string;
-        textColor: string;
-        majorWidth: number;
-        minorWidth: number;
-        fontSize: number;
+        line: {
+            color: string;
+            majorWidth: number;
+            minorWidth: number;
+        };
+        text: {
+            color: string;
+            fontSize: number;
+        };
     };
     boundary: {
-        stroke: string;
+        color: string;
         width: number;
     };
     circles: {
-        q: string;
-        vswr: string;
-        width: number;
+        q: {
+            color: string;
+            width: number;
+        };
+        vswr: {
+            color: string;
+            width: number;
+        };
     };
     scales: {
-        stroke: string;
-        boundaryColor: string;
-        textColor: string;
-        valueColor: string;
-        indicatorColor: string;
-        indicatorOutline: string;
-        fontSize: number;
-        titleFontSize: number;
-        valueFontSize: number;
-        peripheralFontSize: number;
+        line: {
+            color: string;
+        };
+        boundary: {
+            color: string;
+        };
+        text: {
+            color: string;
+            fontSize: number;
+        };
+        title: {
+            fontSize: number;
+        };
+        value: {
+            color: string;
+            fontSize: number;
+        };
+        indicator: {
+            color: string;
+            outline: string;
+        };
+        peripheral: {
+            fontSize: number;
+        };
     };
     cursor: {
-        pointColor: string;
-        impedanceColor: string;
-        admittanceColor: string;
-        pointSize: number;
-        lineWidth: number;
+        point: {
+            color: string;
+            size: number;
+        };
+        impedance: {
+            color: string;
+        };
+        admittance: {
+            color: string;
+        };
+        line: {
+            width: number;
+        };
     };
     marker: {
-        outlineColor: string;
-        textColor: string;
-        focusColor: string;
-        focusHaloColor: string;
+        outline: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+        focus: {
+            color: string;
+            halo: string;
+        };
+    };
+    traces: {
+        colors: readonly string[];
     };
-    traceColors: readonly string[];
 }
+/** Each visual group can be overridden independently, down to individual properties. */
 export type SmithThemeOverrides = {
-    [K in keyof SmithTheme]?: SmithTheme[K] extends readonly string[] ? readonly string[] : SmithTheme[K] extends object ? Partial<SmithTheme[K]> : SmithTheme[K];
+    [K in keyof SmithTheme]?: SmithTheme[K] extends string ? string : {
+        [P in keyof SmithTheme[K]]?: SmithTheme[K][P] extends readonly string[] ? readonly string[] : SmithTheme[K][P] extends object ? Partial<SmithTheme[K][P]> : SmithTheme[K][P];
+    };
 };
 /** Each application replaces the previous appearance, starting from the named preset. */
 export interface SmithAppearance {

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

@@ -1,6 +1,6 @@
 import type { ConstQCircles } from './ConstQCircles.js';
 import type { ConstSwrCircles } from './ConstSwrCircles.js';
-import type { CircleLayer, CircleStyle } from '../layers.js';
+import type { CircleLayer, CircleStyleOptions } from '../layers.js';
 import { LayerControl } from './LayerControl.js';
 /** Exposes Q/VSWR circle controls without exposing the SVG renderer. */
 export declare class CircleLayerControl extends LayerControl implements CircleLayer {
@@ -8,7 +8,7 @@ export declare class CircleLayerControl extends LayerControl implements CircleLa
     private readonly minimum;
     constructor(layer: ConstQCircles | ConstSwrCircles, minimum: number, assertAlive: () => void);
     setVisible(visible: boolean): void;
-    setStyle(style: Partial<CircleStyle>): void;
+    setStyle(style: CircleStyleOptions): void;
     setValues(values: readonly number[]): void;
     addValue(value: number): void;
     removeValue(value: number): void;

package/dist/lib/grid/CircleLayerControl.js

@@ -17,11 +17,11 @@ export class CircleLayerControl extends LayerControl {
     setStyle(style) {
         this.assertAlive();
         OptionsValidation.circleStyle(style);
-        if (style.stroke !== undefined) {
-            this.layer.Stroke = style.stroke;
+        if (style.line?.color !== undefined) {
+            this.layer.Stroke = style.line.color;
         }
-        if (style.strokeWidth !== undefined) {
-            this.layer.StrokeWidth = String(style.strokeWidth);
+        if (style.line?.width !== undefined) {
+            this.layer.StrokeWidth = String(style.line.width);
         }
     }
     setValues(values) {

package/dist/lib/grid/ConstCircles.js

@@ -94,12 +94,12 @@ export class ConstCircles {
     defaultDrawingOptions() {
         return {
             // Keep curved grid strokes visible at normal browser zoom and low pixel density.
-            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)',
+            stroke: 'var(--smithkit-grid-line-color)',
+            majorWidth: 'var(--smithkit-grid-line-majorWidth)',
+            minorWidth: 'var(--smithkit-grid-line-minorWidth)',
+            textColor: 'var(--smithkit-grid-text-color)',
+            textFontFamily: 'var(--smithkit-text-fontFamily)',
+            textFontSize: 'var(--smithkit-grid-text-fontSize)',
         };
     }
     scaleArc(scaler, d) {

package/dist/lib/grid/ConstQCircles.js

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

package/dist/lib/grid/ConstSwrCircles.js

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

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

@@ -1,5 +1,5 @@
 import type { SmithGridLayer } from './SmithGridLayer.js';
-import type { GridDetail, GridLayer, GridStyle } from '../layers.js';
+import type { GridDetail, GridLayer, GridStyleOptions } from '../layers.js';
 import { LayerControl } from './LayerControl.js';
 /** Exposes grid controls without exposing the SVG renderer. */
 export declare class GridLayerControl extends LayerControl implements GridLayer {
@@ -9,5 +9,5 @@ export declare class GridLayerControl extends LayerControl implements GridLayer
     setVisible(visible: boolean): void;
     setLabelsVisible(visible: boolean): void;
     setDetail(detail: GridDetail): void;
-    setStyle(style: Partial<GridStyle>): void;
+    setStyle(style: GridStyleOptions): void;
 }

package/dist/lib/grid/GridLayerControl.js

@@ -30,18 +30,17 @@ export class GridLayerControl extends LayerControl {
     setStyle(style) {
         this.assertAlive();
         OptionsValidation.gridStyle(style);
-        const properties = {
-            stroke: 'Stroke',
-            majorWidth: 'MajorWidth',
-            minorWidth: 'MinorWidth',
-            textColor: 'TextColor',
-            textFontFamily: 'TextFontFamily',
-            textFontSize: 'TextFontSize',
-        };
-        for (const key of Object.keys(properties)) {
-            const value = style[key];
+        const properties = [
+            ['Stroke', style.line?.color],
+            ['MajorWidth', style.line?.majorWidth],
+            ['MinorWidth', style.line?.minorWidth],
+            ['TextColor', style.text?.color],
+            ['TextFontFamily', style.text?.fontFamily],
+            ['TextFontSize', style.text?.fontSize],
+        ];
+        for (const [property, value] of properties) {
             if (value !== undefined) {
-                this.layer[properties[key]] = String(value);
+                this.layer[property] = String(value);
             }
         }
         this.changed();

package/dist/lib/index.d.ts

@@ -6,10 +6,10 @@ export { Touchstone } from './io/Touchstone.js';
 export type { TouchstoneData, TouchstoneParseOptions, TouchstoneWriteOptions } from './io/types.js';
 export { SmithScales } from './scales/SmithScales.js';
 export { MarkerMeasurements } from './MarkerMeasurements.js';
-export type { TraceOptions, TraceUpdateOptions, MarkerSelectionStrategy, TraceStyle, TraceRenderMode, TraceInfo, MarkerInfo, MarkerSnapshot, MarkerComparison, } from './measurements.js';
+export type { TraceOptions, TraceUpdateOptions, MarkerSelectionStrategy, TraceStyle, TraceStyleOptions, 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, GridDetail, CircleLayer, ChartLayers, PeripheralScales, } from './layers.js';
+export type { GridStyle, GridStyleOptions, CircleStyle, CircleStyleOptions, 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';

package/dist/lib/interaction/SmithCursor.js

@@ -22,8 +22,8 @@ export class SmithCursor {
         this.group = new SmithGroup().attr('pointer-events', 'none');
         this.impedance = {
             group: new SmithGroup({
-                stroke: 'var(--smithkit-cursor-impedanceColor)',
-                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
+                stroke: 'var(--smithkit-cursor-impedance-color)',
+                strokeWidth: 'var(--smithkit-cursor-line-width)',
                 fill: 'none',
             }),
             resistance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -37,8 +37,8 @@ export class SmithCursor {
         this.impedance.reactance.line.nonScalingStroke();
         this.admittance = {
             group: new SmithGroup({
-                stroke: 'var(--smithkit-cursor-admittanceColor)',
-                strokeWidth: 'var(--smithkit-cursor-lineWidth)',
+                stroke: 'var(--smithkit-cursor-admittance-color)',
+                strokeWidth: 'var(--smithkit-cursor-line-width)',
                 fill: 'none',
             }),
             conductance: { circle: new SmithCircle({ p: [0, 0], r: 1 }) },
@@ -51,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: 'var(--smithkit-cursor-pointColor)',
-            strokeWidth: 'var(--smithkit-cursor-pointSize)',
+            stroke: 'var(--smithkit-cursor-point-color)',
+            strokeWidth: 'var(--smithkit-cursor-point-size)',
             fill: 'none',
         });
         this.point.nonScalingStroke();

package/dist/lib/layers.d.ts

@@ -1,19 +1,33 @@
 import type { Complex } from './math/Complex.js';
 export interface GridStyle {
-    stroke: string;
-    /** Non-scaling stroke width in CSS pixels. */
-    majorWidth: number;
-    /** Non-scaling stroke width in CSS pixels. */
-    minorWidth: number;
-    textColor: string;
-    textFontFamily: string;
-    /** Base font size in chart units; adaptive layout enforces a 9 CSS px minimum in the default view. */
-    textFontSize: number;
+    line: {
+        color: string;
+        /** Non-scaling stroke width in CSS pixels. */
+        majorWidth: number;
+        /** Non-scaling stroke width in CSS pixels. */
+        minorWidth: number;
+    };
+    text: {
+        color: string;
+        fontFamily: string;
+        /** Base font size in chart units; adaptive layout enforces a 9 CSS px minimum in the default view. */
+        fontSize: number;
+    };
+}
+/** A grid style patch. Omitted nested properties retain their existing values. */
+export interface GridStyleOptions {
+    line?: Partial<GridStyle['line']>;
+    text?: Partial<GridStyle['text']>;
 }
 export interface CircleStyle {
-    stroke: string;
-    /** Non-scaling stroke width in CSS pixels. */
-    strokeWidth: number;
+    line: {
+        color: string;
+        /** Non-scaling stroke width in CSS pixels. */
+        width: number;
+    };
+}
+export interface CircleStyleOptions {
+    line?: Partial<CircleStyle['line']>;
 }
 export type GridDetail = 'basic' | 'standard' | 'detailed';
 /** Grid styling uses SVG user units, except non-scaling stroke widths in screen pixels. */
@@ -23,11 +37,11 @@ export interface GridLayer {
     setLabelsVisible(visible: boolean): void;
     /** Default: standard. Basic shows only the principal normalized values. */
     setDetail(detail: GridDetail): void;
-    setStyle(style: Partial<GridStyle>): void;
+    setStyle(style: GridStyleOptions): void;
 }
 export interface CircleLayer {
     setVisible(visible: boolean): void;
-    setStyle(style: Partial<CircleStyle>): void;
+    setStyle(style: CircleStyleOptions): void;
     /** Replace the complete set after validation; duplicates are ignored and empty clears it. */
     setValues(values: readonly number[]): void;
     addValue(value: number): void;

package/dist/lib/measurements.d.ts

@@ -3,14 +3,24 @@ import type { SmithReading } from './rf/RfCalculations.js';
 export type TraceRenderMode = 'points' | 'line' | 'both';
 export interface TraceStyle {
     mode: TraceRenderMode;
-    /** Non-scaling SVG stroke width in CSS pixels. Default: 2. */
-    lineWidth: number;
-    /** Point radius in CSS pixels; remains constant under chart zoom and container resize. Default: 2. */
-    pointRadius: number;
-    /** Maximum additional line simplification error in CSS pixels. Zero disables it (default). */
-    lineTolerancePx: number;
-}
-export interface TraceOptions extends Partial<TraceStyle> {
+    line: {
+        /** Non-scaling SVG stroke width in CSS pixels. Default: 2. */
+        width: number;
+        /** Maximum additional line simplification error in CSS pixels. Zero disables it (default). */
+        tolerancePx: number;
+    };
+    point: {
+        /** Radius in CSS pixels; constant under chart zoom and container resize. Default: 2. */
+        radius: number;
+    };
+}
+/** A partial style patch; omitted nested properties retain their current values. */
+export interface TraceStyleOptions {
+    mode?: TraceRenderMode;
+    line?: Partial<TraceStyle['line']>;
+    point?: Partial<TraceStyle['point']>;
+}
+export interface TraceOptions extends TraceStyleOptions {
     name?: string;
     /** A solid CSS color, such as '#2563eb' or 'orange'. */
     color?: string;
@@ -29,6 +39,8 @@ export interface MarkerInfo {
     readonly sampleIndex: number;
 }
 export interface TraceInfo extends Readonly<TraceStyle> {
+    readonly line: Readonly<TraceStyle['line']>;
+    readonly point: Readonly<TraceStyle['point']>;
     readonly id: string;
     readonly name: string;
     readonly color: string;

package/dist/lib/options.d.ts

@@ -1,11 +1,11 @@
 import type { SmithAppearance } from './appearance/types.js';
-import type { CircleStyle, GridDetail, GridStyle } from './layers.js';
+import type { CircleStyleOptions, GridDetail, GridStyleOptions } from './layers.js';
 /** Settings for an individual impedance/admittance grid layer. */
 export interface GridLayerOptions {
     visible?: boolean;
     detail?: GridDetail;
     labelsVisible?: boolean;
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
 }
 /** Shared settings for all four grids, followed by per-layer overrides. */
 export interface GridOptions {
@@ -13,7 +13,7 @@ export interface GridOptions {
     detail?: GridDetail;
     /** Default: true. */
     labelsVisible?: boolean;
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
     layers?: {
         resistance?: GridLayerOptions;
         reactance?: GridLayerOptions;
@@ -24,7 +24,7 @@ export interface GridOptions {
 export interface CircleLayerOptions {
     /** Default: false. */
     visible?: boolean;
-    style?: Partial<CircleStyle>;
+    style?: CircleStyleOptions;
     /** Replace the default values. Empty hides all circles; duplicate values are ignored. */
     values?: readonly number[];
 }

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

@@ -0,0 +1,5 @@
+/** Recognize HTML hosts across windows without accessing browser globals at import time. */
+export declare class ChartHost {
+    private constructor();
+    static isElement(value: unknown): value is HTMLElement;
+}

package/dist/lib/rendering/ChartHost.js

@@ -0,0 +1,14 @@
+/** Recognize HTML hosts across windows without accessing browser globals at import time. */
+export class ChartHost {
+    constructor() { }
+    static isElement(value) {
+        if (!value || typeof value !== 'object') {
+            return false;
+        }
+        if (typeof HTMLElement !== 'undefined' && value instanceof HTMLElement) {
+            return true;
+        }
+        const elementType = value.ownerDocument?.defaultView?.HTMLElement;
+        return elementType !== undefined && value instanceof elementType;
+    }
+}

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

@@ -4,7 +4,7 @@ import type { SmithMarker } from '../traces/SmithMarker.js';
 import { TraceInput } from '../samples.js';
 import { Complex } from '../math/Complex.js';
 import type { ChartLayers, PeripheralScales } from '../layers.js';
-import type { TraceStyle } from '../measurements.js';
+import type { TraceStyleOptions } from '../measurements.js';
 /** Internal SVG backend. Owns chart elements, view transforms, and SVG gestures. */
 export declare class SvgChartRenderer {
     private onCursorChange;
@@ -64,6 +64,6 @@ export declare class SvgChartRenderer {
     private cursorContainer;
     private drawReactanceAxis;
     /** Construct trace rendering without exposing chart containers or scalers to Smith. */
-    createTrace(values: TraceInput, color: string, style: Partial<TraceStyle>, onMarkerDrag: (marker: SmithMarker, dragging: boolean) => void): SmithData;
+    createTrace(values: TraceInput, color: string, style: TraceStyleOptions, onMarkerDrag: (marker: SmithMarker, dragging: boolean) => void): SmithData;
     removeTrace(trace: SmithData): void;
 }

package/dist/lib/rendering/SvgChartRenderer.js

@@ -93,7 +93,7 @@ export class SvgChartRenderer {
         this.cursor = this.initCursor();
         const cursorContainer = this.cursorContainer();
         this.reactanceAxis = this.drawReactanceAxis({
-            stroke: 'var(--smithkit-boundary-stroke)',
+            stroke: 'var(--smithkit-boundary-color)',
             strokeWidth: 'var(--smithkit-boundary-width)',
             fill: 'none',
         });

package/dist/lib/scales/SmithPeripheralScales.js

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

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

@@ -9,7 +9,10 @@ export declare class SmithScales {
     private readonly start;
     private readonly length;
     private readonly axes;
+    /** Configure independent scales for later mounting with draw(). */
     constructor(appearance?: SmithAppearance);
+    /** Configure and mount immediately. String targets are CSS selectors, as in draw(). */
+    constructor(target: string | HTMLElement, appearance?: SmithAppearance);
     /** Replace the preset and overrides without changing readings or layout. */
     setAppearance(appearance: SmithAppearance): void;
     draw(target: string | HTMLElement): void;

package/dist/lib/scales/SmithScales.js

@@ -1,4 +1,5 @@
 import { ImageExporter } from '../svg/ImageExporter.js';
+import { ChartHost } from '../rendering/ChartHost.js';
 import { Theme } from '../appearance/Theme.js';
 import { SvgTheme } from '../appearance/SvgTheme.js';
 import { select, format } from 'd3';
@@ -27,16 +28,27 @@ export class SmithScales {
         .style('display', 'block')
         .style('width', '100%')
         .style('height', 'auto');
-    constructor(appearance = {}) {
+    constructor(targetOrAppearance = {}, configuration) {
+        const target = typeof targetOrAppearance === 'string' || ChartHost.isElement(targetOrAppearance)
+            ? targetOrAppearance
+            : undefined;
+        if (target === undefined && configuration !== undefined) {
+            throw new TypeError('A container is required before the second appearance argument.');
+        }
+        const appearance = target === undefined
+            ? targetOrAppearance
+            : configuration === undefined
+                ? {}
+                : configuration;
         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', 'var(--smithkit-fontFamily)')
-            .attr('font-size', 'var(--smithkit-scales-titleFontSize)')
-            .attr('fill', 'var(--smithkit-scales-textColor)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-title-fontSize)')
+            .attr('fill', 'var(--smithkit-scales-text-color)')
             .text((scale) => scale.title);
         labels
             .append('text')
@@ -44,10 +56,10 @@ export class SmithScales {
             .attr('data-role', 'scale-value')
             .attr('x', this.start)
             .attr('y', 25)
-            .attr('font-family', 'var(--smithkit-fontFamily)')
-            .attr('font-size', 'var(--smithkit-scales-valueFontSize)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
+            .attr('font-size', 'var(--smithkit-scales-value-fontSize)')
             .attr('font-weight', 600)
-            .attr('fill', 'var(--smithkit-scales-valueColor)')
+            .attr('fill', 'var(--smithkit-scales-value-color)')
             .text('—');
         this.axes
             .append('line')
@@ -56,7 +68,7 @@ export class SmithScales {
             .attr('x2', this.start + this.length)
             .attr('y1', 36)
             .attr('y2', 36)
-            .attr('stroke', 'var(--smithkit-scales-stroke)')
+            .attr('stroke', 'var(--smithkit-scales-line-color)')
             .attr('stroke-width', 1);
         const start = this.start;
         const length = this.length;
@@ -70,7 +82,7 @@ export class SmithScales {
             ticks
                 .append('line')
                 .attr('y2', 5)
-                .attr('stroke', 'var(--smithkit-scales-stroke)')
+                .attr('stroke', 'var(--smithkit-scales-line-color)')
                 .attr('stroke-width', 1);
             select(this)
                 .select('[data-role=labels]')
@@ -80,9 +92,9 @@ export class SmithScales {
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`)
                 .append('text')
                 .attr('y', 17)
-                .attr('font-size', 'var(--smithkit-scales-fontSize)')
-                .attr('font-family', 'var(--smithkit-fontFamily)')
-                .attr('fill', 'var(--smithkit-scales-textColor)')
+                .attr('font-size', 'var(--smithkit-scales-text-fontSize)')
+                .attr('font-family', 'var(--smithkit-text-fontFamily)')
+                .attr('fill', 'var(--smithkit-scales-text-color)')
                 .attr('text-anchor', (_, i) => i === 0 ? 'start' : i === scale.values.length - 1 ? 'end' : 'middle')
                 .text((value) => (value === Infinity ? '∞' : String(value)));
         });
@@ -93,11 +105,20 @@ export class SmithScales {
             .attr('cx', this.start)
             .attr('cy', 36)
             .attr('r', 4)
-            .attr('fill', 'var(--smithkit-scales-indicatorColor)')
-            .attr('stroke', 'var(--smithkit-scales-indicatorOutline)')
+            .attr('fill', 'var(--smithkit-scales-indicator-color)')
+            .attr('stroke', 'var(--smithkit-scales-indicator-outline)')
             .attr('stroke-width', 1);
         labels.raise();
         this.axes.append('title').text((scale) => scale.description ?? scale.title);
+        if (target !== undefined) {
+            try {
+                this.draw(target);
+            }
+            catch (error) {
+                this.destroy();
+                throw error;
+            }
+        }
     }
     /** Replace the preset and overrides without changing readings or layout. */
     setAppearance(appearance) {
@@ -157,8 +178,8 @@ export class SmithScales {
             : undefined, readout?.label
             ? {
                 text: readout.label,
-                color: style.getPropertyValue('--smithkit-scales-textColor').trim(),
-                fontFamily: style.getPropertyValue('--smithkit-fontFamily').trim(),
+                color: style.getPropertyValue('--smithkit-scales-text-color').trim(),
+                fontFamily: style.getPropertyValue('--smithkit-text-fontFamily').trim(),
             }
             : undefined);
         return ImageExporter.svg([source], options);

package/dist/lib/traces/SmithData.d.ts

@@ -1,5 +1,5 @@
 import { SmithGroup } from '../svg/SmithGroup.js';
-import type { TraceStyle, MarkerSelectionStrategy } from '../measurements.js';
+import type { TraceStyle, TraceStyleOptions, MarkerSelectionStrategy } from '../measurements.js';
 import { SmithMarker } from './SmithMarker.js';
 import { SmithScaler } from '../svg/SmithScaler.js';
 import type { TraceInput, TraceSample } from '../samples.js';
@@ -22,7 +22,7 @@ export declare class SmithData {
     private selectHandler;
     private visible;
     private handler;
-    constructor(data: TraceInput, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: Partial<TraceStyle>);
+    constructor(data: TraceInput, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, markerDragHandler?: ((marker: SmithMarker, dragging: boolean) => void) | undefined, markerContainer?: SmithGroup, style?: TraceStyleOptions);
     setViewportScale(scale: number): void;
     zoom(transform: TraceTransform): void;
     addMarker(sampleIndex?: number): number;
@@ -40,7 +40,7 @@ export declare class SmithData {
         path: string;
     } | undefined;
     get Style(): TraceStyle;
-    setStyle(options: Partial<TraceStyle>): void;
+    setStyle(options: TraceStyleOptions): void;
     setVisible(visible: boolean): void;
     private moveMarker;
     private updateReading;

package/dist/lib/traces/SmithMarker.js

@@ -54,8 +54,8 @@ export class SmithMarker extends SmithShape {
             .attr('pointer-events', 'none')
             .attr('aria-hidden', 'true');
         for (const [stroke, width] of [
-            ['var(--smithkit-marker-focusHaloColor)', 5],
-            ['var(--smithkit-marker-focusColor)', 2.5],
+            ['var(--smithkit-marker-focus-halo)', 5],
+            ['var(--smithkit-marker-focus-color)', 2.5],
         ]) {
             this.focusRing
                 .append('circle')
@@ -67,17 +67,17 @@ export class SmithMarker extends SmithShape {
         this.triangle = g
             .append('polygon')
             .attr('stroke', 'none')
-            .attr('fill', 'var(--smithkit-marker-outlineColor)');
+            .attr('fill', 'var(--smithkit-marker-outline-color)');
         this.inner = g.append('polygon').attr('stroke', 'none').attr('fill', color);
         this.text = g
             .append('text')
             .attr('pointer-events', 'none')
             .attr('aria-hidden', 'true')
-            .attr('font-family', 'var(--smithkit-fontFamily)')
+            .attr('font-family', 'var(--smithkit-text-fontFamily)')
             .attr('font-weight', 'normal')
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
-            .attr('fill', 'var(--smithkit-marker-textColor)')
+            .attr('fill', 'var(--smithkit-marker-text-color)')
             .text(marker.toString());
         this.zoom(1);
         const drag = d3

package/dist/lib/traces/TraceRenderer.d.ts

@@ -1,6 +1,6 @@
 import { SmithGroup } from '../svg/SmithGroup.js';
 import { SmithScaler } from '../svg/SmithScaler.js';
-import type { TraceStyle } from '../measurements.js';
+import type { TraceStyle, TraceStyleOptions } from '../measurements.js';
 import { TraceBuffer } from './TraceBuffer.js';
 export interface TraceTransform {
     x: number;
@@ -19,7 +19,7 @@ export declare class TraceRenderer {
     private group;
     private lineDetail;
     private lineIndices;
-    constructor(data: TraceBuffer, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, style?: Partial<TraceStyle>);
+    constructor(data: TraceBuffer, color: string, transform: TraceTransform, container: SmithGroup, scaler: SmithScaler, style?: TraceStyleOptions);
     private drawTrace;
     private selectLineIndices;
     private linePath;
@@ -35,7 +35,7 @@ export declare class TraceRenderer {
     private zoomDataPoints;
     setColor(color: string): void;
     get Style(): TraceStyle;
-    setStyle(options: Partial<TraceStyle>): void;
+    setStyle(options: TraceStyleOptions): void;
     private redraw;
     setVisible(visible: boolean): void;
     update(data: TraceBuffer): void;

package/dist/lib/traces/TraceRenderer.js

@@ -21,9 +21,8 @@ export class TraceRenderer {
         this.scaler = scaler;
         this.style = {
             mode: style.mode ?? 'points',
-            lineWidth: style.lineWidth ?? 2,
-            pointRadius: style.pointRadius ?? 2,
-            lineTolerancePx: style.lineTolerancePx ?? 0,
+            line: { width: style.line?.width ?? 2, tolerancePx: style.line?.tolerancePx ?? 0 },
+            point: { radius: style.point?.radius ?? 2 },
         };
         this.group = this.drawTrace(data).attr('pointer-events', 'none');
         container.append(this.group);
@@ -43,7 +42,7 @@ export class TraceRenderer {
                 .attr('d', this.linePath(this.lineIndices))
                 .attr('fill', 'none')
                 .attr('stroke', this.color)
-                .attr('stroke-width', this.style.lineWidth)
+                .attr('stroke-width', this.style.line.width)
                 .attr('vector-effect', 'non-scaling-stroke')
                 .attr('stroke-linejoin', 'round')
                 .attr('stroke-linecap', 'round');
@@ -54,14 +53,14 @@ export class TraceRenderer {
         return group;
     }
     selectLineIndices() {
-        if (this.style.lineTolerancePx === 0) {
+        if (this.style.line.tolerancePx === 0) {
             return;
         }
         this.lineDetail ??= new TraceLineDetail(this.data);
         const unitsToPixels = Math.max(Math.abs(this.scaler.x(1) - this.scaler.x(0)), Math.abs(this.scaler.y(1) - this.scaler.y(0))) *
             this.transform.k *
             this.viewportScale;
-        return this.lineDetail.select(this.style.lineTolerancePx / unitsToPixels);
+        return this.lineDetail.select(this.style.line.tolerancePx / unitsToPixels);
     }
     linePath(indices) {
         // Simplified paths retain numeric precision even at high zoom. Full paths keep
@@ -105,9 +104,9 @@ export class TraceRenderer {
     renderPoints(group, data) {
         const visible = [];
         const cells = new Set();
-        const cellSize = Math.max(0.5, this.style.pointRadius) / this.viewportScale;
+        const cellSize = Math.max(0.5, this.style.point.radius) / this.viewportScale;
         const extent = this.scaler.x(1);
-        const margin = this.style.pointRadius / this.viewportScale;
+        const margin = this.style.point.radius / this.viewportScale;
         const firstCell = Math.floor(-margin / cellSize);
         const columns = Math.floor((extent + margin) / cellSize) - firstCell + 1;
         for (let i = 0; i < data.length; i++) {
@@ -130,7 +129,7 @@ export class TraceRenderer {
             .join('circle')
             .attr('cx', (index) => this.scaler.x(data.real(index)))
             .attr('cy', (index) => this.scaler.y(data.imaginary(index)))
-            .attr('r', this.style.pointRadius / (this.transform.k * this.viewportScale));
+            .attr('r', this.style.point.radius / (this.transform.k * this.viewportScale));
     }
     setViewportScale(scale) {
         if (scale === this.viewportScale || !Number.isFinite(scale) || scale <= 0) {
@@ -153,7 +152,7 @@ export class TraceRenderer {
             this.renderPoints(this.group, this.data);
         }
         else {
-            this.group.Element.selectAll('circle').attr('r', this.style.pointRadius / (k * this.viewportScale));
+            this.group.Element.selectAll('circle').attr('r', this.style.point.radius / (k * this.viewportScale));
         }
     }
     setColor(color) {
@@ -162,19 +161,21 @@ export class TraceRenderer {
         this.group.Element.select('.trace-line').attr('stroke', color);
     }
     get Style() {
-        return { ...this.style };
+        return { ...this.style, line: { ...this.style.line }, point: { ...this.style.point } };
     }
     setStyle(options) {
         const next = {
             mode: options.mode ?? this.style.mode,
-            lineWidth: options.lineWidth ?? this.style.lineWidth,
-            pointRadius: options.pointRadius ?? this.style.pointRadius,
-            lineTolerancePx: options.lineTolerancePx ?? this.style.lineTolerancePx,
+            line: {
+                width: options.line?.width ?? this.style.line.width,
+                tolerancePx: options.line?.tolerancePx ?? this.style.line.tolerancePx,
+            },
+            point: { radius: options.point?.radius ?? this.style.point.radius },
         };
         if (next.mode === this.style.mode &&
-            next.lineWidth === this.style.lineWidth &&
-            next.pointRadius === this.style.pointRadius &&
-            next.lineTolerancePx === this.style.lineTolerancePx) {
+            next.line.width === this.style.line.width &&
+            next.point.radius === this.style.point.radius &&
+            next.line.tolerancePx === this.style.line.tolerancePx) {
             return;
         }
         const modeChanged = next.mode !== this.style.mode;
@@ -183,7 +184,7 @@ export class TraceRenderer {
             this.redraw();
         }
         else {
-            this.group.Element.select('.trace-line').attr('stroke-width', next.lineWidth);
+            this.group.Element.select('.trace-line').attr('stroke-width', next.line.width);
             this.zoomDataPoints();
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smithkit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Framework-independent, interactive Smith chart library for JavaScript and TypeScript",
   "type": "module",
   "scripts": {
@@ -57,6 +57,7 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "rxjs": "7.8.2",
+    "shiki": "4.5.0",
     "typedoc": "0.28.20",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "typescript-eslint": "^8.71.0",