smithkit 0.5.0 → 0.7.0

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]);
             }
         }
     }
@@ -149,13 +164,10 @@ export class Smith {
         }
     }
     /** Export the current mounted view as standalone SVG with its configured background. */
-    toSvg(options) {
+    toSvg(options = {}) {
         this.assertAlive();
         this.validateExportOptions(options);
-        const source = this.renderer.toSvg(options?.lineDetail ?? 'full');
-        if (options === undefined) {
-            return source;
-        }
+        const source = this.renderer.toSvg(options.lineDetail ?? 'full');
         const sources = [source];
         if (options.scales) {
             sources.push(options.scales.toSvg({ readout: options.scaleReadout }));
@@ -179,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. */
@@ -290,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.`);
             }
@@ -442,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/grid/SmithGridLayer.js

@@ -31,7 +31,9 @@ export class SmithGridLayer extends ConstCircles {
             const label = GridGeometry.label(kind, tick.definition);
             const text = new SmithText(this.scaler.point(label.point), label.text, {
                 rotate: label.rotate,
-                dx: this.scaler.r(label.dx).toString(),
+                // Keep the zero clear of the opposite grid's high-value labels even
+                // when minimum font sizing or browser font metrics enlarge it.
+                dx: real && tick.definition.point.r === 0 ? '0.9em' : this.scaler.r(label.dx).toString(),
                 dy: this.scaler.r(label.dy).toString(),
                 textAnchor: label.textAnchor,
                 dominantBaseline: label.dominantBaseline,

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';