rosek86 · Oct 14, 2026 · Oct 14, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased — next minor
+
+- **Breaking:** group grid/circle styles and appearance overrides by visual element (`line`, `text`, `point`, `focus`, and scale subgroups). Replace flat style keys, preserve nested partial updates, and allow independent Q/VSWR theme widths. See the [migration guide](docs/migration-next.md).
+- Allow `new Smith(target, options?)` to configure and mount a chart with one call, accepting the same CSS selector or HTMLElement as `draw()`. Keep deferred mounting with `new Smith(options)`.
+
 ## 0.6.0 — 2026-10-14
 
 - Record native Firefox 114 and Safari 26.6 verification. Describe browser compatibility through completed tests, separately from compilation targets.

diff --git a/README.md b/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.

diff --git a/demo/main.ts b/demo/main.ts
@@ -127,18 +127,17 @@ function demoAppearance(theme: SmithAppearance['theme']): SmithAppearance {
       ? {
           overrides: {
             background: '#191c20',
-            fontFamily: 'Arial, sans-serif',
-            grid: { stroke: '#727984', textColor: '#c7cbd1' },
-            boundary: { stroke: '#9da3ad' },
+            text: { fontFamily: 'Arial, sans-serif' },
+            grid: { line: { color: '#727984' }, text: { color: '#c7cbd1' } },
+            boundary: { color: '#9da3ad' },
             scales: {
-              stroke: '#727984',
-              boundaryColor: '#9da3ad',
-              textColor: '#b5bcc5',
-              valueColor: '#e4e7eb',
-              indicatorColor: '#e9ac59',
-              indicatorOutline: '#191c20',
+              line: { color: '#727984' },
+              boundary: { color: '#9da3ad' },
+              text: { color: '#b5bcc5' },
+              value: { color: '#e4e7eb' },
+              indicator: { color: '#e9ac59', outline: '#191c20' },
             },
-            cursor: { pointColor: '#a0bce5', impedanceColor: '#a0bce5' },
+            cursor: { point: { color: '#a0bce5' }, impedance: { color: '#a0bce5' } },
           },
         }
       : {}),

diff --git a/docs/api-review.md b/docs/api-review.md
@@ -1,6 +1,6 @@
 # Public API review and compatibility policy
 
-Reviewed against **0.5.0**, including compact trace input, optional line simplification, and Touchstone reflection I/O,
+Reviewed against **0.6.0 and the next minor API changes**, including grouped visual styles, optional constructor mounting, compact trace input, line simplification, and Touchstone reflection I/O,
 including the installed integration examples and the subsequent React/Angular
 lifecycle verification. Version 0.3.0 used positional constructor arguments,
 interactive defaults, and an automatic marker. See [migration to 0.4](migration-0.4.md).
@@ -39,9 +39,9 @@ const chart = new Smith({
   grid: {
     detail: 'standard',
     labelsVisible: true,
-    style: { majorWidth: 1.5 },
+    style: { line: { majorWidth: 1.5 } },
     layers: {
-      resistance: { style: { stroke: '#60a5fa' } },
+      resistance: { style: { line: { color: '#60a5fa' } } },
       conductance: { visible: true, detail: 'basic' },
     },
   },
@@ -71,6 +71,13 @@ and cursor tracking run. A marker's appearance does not create that marker.
 Traces and markers are added separately with `addTrace()` and `addMarker()`.
 Report options belong to each export call, not the chart constructor.
 
+Visual styles group line settings under `line` and labels under `text`. Theme
+overrides use the same grouping, with `point`, `indicator`, `value`, and `focus`
+for their respective elements. Nested style patches preserve omitted siblings.
+The optional first constructor argument mounts into a CSS selector or HTMLElement;
+`new Smith(options)` remains available for deferred `draw()`. The target is not a
+configuration field and cannot be changed through `setOptions()`.
+
 `setOptions(SmithOptions)` applies the same grouped schema as a patch. Omitted and
 `undefined` fields retain their current values, including nested fields. Empty
 groups are no-ops. Within each call, shared grid settings precede per-layer overrides;

diff --git a/docs/api/smithkit.api.md b/docs/api/smithkit.api.md
@@ -27,7 +27,7 @@ export interface CircleLayer {
     // (undocumented)
     removeValue(value: number): void;
     // (undocumented)
-    setStyle(style: Partial<CircleStyle>): void;
+    setStyle(style: CircleStyleOptions): void;
     setValues(values: readonly number[]): void;
     // (undocumented)
     setVisible(visible: boolean): void;
@@ -36,7 +36,7 @@ export interface CircleLayer {
 // @public (undocumented)
 export interface CircleLayerOptions {
     // (undocumented)
-    style?: Partial<CircleStyle>;
+    style?: CircleStyleOptions;
     values?: readonly number[];
     visible?: boolean;
 }
@@ -52,8 +52,16 @@ export interface CircleOptions {
 // @public (undocumented)
 export interface CircleStyle {
     // (undocumented)
-    stroke: string;
-    strokeWidth: number;
+    line: {
+        color: string;
+        width: number;
+    };
+}
+
+// @public (undocumented)
+export interface CircleStyleOptions {
+    // (undocumented)
+    line?: Partial<CircleStyle['line']>;
 }
 
 // @public (undocumented)
@@ -270,7 +278,7 @@ export interface GridLayer {
     setDetail(detail: GridDetail): void;
     setLabelsVisible(visible: boolean): void;
     // (undocumented)
-    setStyle(style: Partial<GridStyle>): void;
+    setStyle(style: GridStyleOptions): void;
     // (undocumented)
     setVisible(visible: boolean): void;
 }
@@ -282,7 +290,7 @@ export interface GridLayerOptions {
     // (undocumented)
     labelsVisible?: boolean;
     // (undocumented)
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
     // (undocumented)
     visible?: boolean;
 }
@@ -299,20 +307,31 @@ export interface GridOptions {
         susceptance?: GridLayerOptions;
     };
     // (undocumented)
-    style?: Partial<GridStyle>;
+    style?: GridStyleOptions;
 }
 
 // @public (undocumented)
 export interface GridStyle {
-    majorWidth: number;
-    minorWidth: number;
     // (undocumented)
-    stroke: string;
+    line: {
+        color: string;
+        majorWidth: number;
+        minorWidth: number;
+    };
     // (undocumented)
-    textColor: string;
+    text: {
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+    };
+}
+
+// @public
+export interface GridStyleOptions {
     // (undocumented)
-    textFontFamily: string;
-    textFontSize: number;
+    line?: Partial<GridStyle['line']>;
+    // (undocumented)
+    text?: Partial<GridStyle['text']>;
 }
 
 // @public (undocumented)
@@ -432,6 +451,7 @@ export interface ScaleImageExportOptions extends ImageExportOptions {
 // @public (undocumented)
 export class Smith {
     constructor(options?: SmithOptions);
+    constructor(target: string | HTMLElement, options?: SmithOptions);
     addMarker(traceId: string, sampleIndex?: number): string | undefined;
     addTrace(values: TraceSamples, options?: TraceOptions): string;
     // (undocumented)
@@ -603,60 +623,103 @@ export interface SmithTheme {
     background: string;
     // (undocumented)
     boundary: {
-        stroke: string;
+        color: string;
         width: number;
     };
     // (undocumented)
     circles: {
-        q: string;
-        vswr: string;
-        width: number;
+        q: {
+            color: string;
+            width: number;
+        };
+        vswr: {
+            color: string;
+            width: number;
+        };
     };
     // (undocumented)
     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;
+        };
     };
     // (undocumented)
-    fontFamily: string;
-    // (undocumented)
     grid: {
-        stroke: string;
-        textColor: string;
-        majorWidth: number;
-        minorWidth: number;
-        fontSize: number;
+        line: {
+            color: string;
+            majorWidth: number;
+            minorWidth: number;
+        };
+        text: {
+            color: string;
+            fontSize: number;
+        };
     };
     // (undocumented)
     marker: {
-        outlineColor: string;
-        textColor: string;
-        focusColor: string;
-        focusHaloColor: string;
+        outline: {
+            color: string;
+        };
+        text: {
+            color: string;
+        };
+        focus: {
+            color: string;
+            halo: string;
+        };
     };
     // (undocumented)
     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;
+        };
     };
     // (undocumented)
-    traceColors: readonly string[];
+    text: {
+        fontFamily: string;
+    };
+    // (undocumented)
+    traces: {
+        colors: readonly string[];
+    };
 }
 
-// @public (undocumented)
+// @public
 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];
+    };
 };
 
 // @public