smithkit 0.1.0 → 0.1.1

package/README.md

@@ -20,29 +20,15 @@ interactive SVG Smith charts, RF calculations, and S11 measurement exploration.
 
 ## Installation
 
-After publication, install the first release, **0.1.0**, with:
+Install from npm:
 
 ```sh
-npm install smithkit@0.1.0
+npm install smithkit
 ```
 
-Until publication, build and install an archive from source:
-
-```sh
-git clone https://github.com/rosek86/smithkit.git
-cd smithkit
-npm ci
-npm pack
-```
-
-Install the resulting archive in your application:
-
-```sh
-npm install /path/to/smithkit/smithkit-0.1.0.tgz
-```
-
-Building requires Node.js 24 or later. Browser applications need SVG, ES2022,
-and an ESM-compatible build tool. No library stylesheet is required.
+Browser applications need SVG, ES2022, and an ESM-compatible build tool.
+No library stylesheet is required. To build the library from source, see
+[Contributing](https://github.com/rosek86/smithkit/blob/main/CONTRIBUTING.md).
 
 For a complete application using the installed package, see the
 [standalone integration example](https://github.com/rosek86/smithkit/tree/main/examples/basic).

package/dist/lib/Smith.js

@@ -123,6 +123,17 @@ export class Smith {
         this.container.append(cursorContainer);
         this.container.append(this.dataContainer);
         this.container.append(this.markerContainer);
+        const labels = new SmithGroup().attr('data-layer', 'labels').attr('pointer-events', 'none');
+        for (const [name, layer] of [
+            ['conductance', this.constConductance],
+            ['susceptance', this.constSusceptance],
+            ['resistance', this.constResistance],
+            ['reactance', this.constReactance],
+        ]) {
+            labels.append(layer.labels.attr('data-label-layer', name));
+        }
+        labels.append(this.peripheralScaleRenderer.labels);
+        this.container.append(labels);
         const assertAlive = () => this.assertAlive();
         this.layers = {
             resistance: gridLayer(this.constResistance, assertAlive),

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

@@ -41,6 +41,8 @@ export declare abstract class ConstCircles {
     showMinor(): void;
     hideMinor(): void;
     protected build(): SmithGroup;
+    /** Mount labels separately so every grid line is painted before any label. */
+    get labels(): SmithGroup;
     draw(): SmithGroup;
     setDrawOptions(opts: ConstCirclesDrawOptions): void;
     set Stroke(stroke: string);

package/dist/lib/draw/ConstCircles.js

@@ -12,17 +12,19 @@ export class ConstCircles {
     }
     visibility(visible) {
         if (visible) {
-            this.container.show();
+            this.show();
         }
         else {
-            this.container.hide();
+            this.hide();
         }
     }
     show() {
         this.container.show();
+        this.texts.show();
     }
     hide() {
         this.container.hide();
+        this.texts.hide();
     }
     displayMinor(display) {
         if (display) {
@@ -39,7 +41,12 @@ export class ConstCircles {
         this.minor.hide();
     }
     build() {
-        return this.container.append(this.minor).append(this.major).append(this.texts).hide();
+        this.texts.hide();
+        return this.container.append(this.minor).append(this.major).hide();
+    }
+    /** Mount labels separately so every grid line is painted before any label. */
+    get labels() {
+        return this.texts;
     }
     draw() {
         return this.container;

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

@@ -2,9 +2,12 @@ import type { Complex } from '../complex/Complex.js';
 import { SmithGroup } from '../draw/SmithGroup.js';
 /** Peripheral rulers in the chart's 500-unit coordinate system. */
 export declare class SmithPeripheralScales extends SmithGroup {
+    readonly labels: SmithGroup;
     private readonly scales;
     private readonly axes;
     constructor();
+    show(): SmithGroup;
+    hide(): SmithGroup;
     /** Connect to the same cursor or marker data as the independent parameter scales. */
     update(gamma: Complex | null): void;
 }

package/dist/lib/scales/SmithPeripheralScales.js

@@ -10,6 +10,9 @@ function point(radius, degrees) {
 }
 /** Peripheral rulers in the chart's 500-unit coordinate system. */
 export class SmithPeripheralScales extends SmithGroup {
+    labels = new SmithGroup()
+        .attr('data-label-layer', 'peripheral-scales')
+        .attr('pointer-events', 'none');
     scales = peripheralScales();
     axes = this.Element.attr('data-layer', 'peripheral-scales')
         .attr('pointer-events', 'none')
@@ -21,7 +24,13 @@ export class SmithPeripheralScales extends SmithGroup {
         .attr('aria-label', (scale) => scale.title);
     constructor() {
         super();
+        const labelAxes = this.labels.Element.selectAll('g')
+            .data(this.scales)
+            .join('g')
+            .attr('data-label-scale', (scale) => scale.id)
+            .nodes();
         this.axes.each(function (scale, index) {
+            const labelAxis = select(labelAxes[index]);
             const axis = select(this);
             const radius = firstRadius + index * ringSpacing;
             const captionAngle = scale.unit === 'λ' ? 180 : 0;
@@ -53,7 +62,7 @@ export class SmithPeripheralScales extends SmithGroup {
                 if (major && captionDistance > 25) {
                     const [x, y] = point(radius + 8, angle);
                     const rotation = angle >= 0 ? 90 - angle : -90 - angle;
-                    axis
+                    labelAxis
                         .append('text')
                         .attr('x', x)
                         .attr('y', y)
@@ -81,7 +90,7 @@ export class SmithPeripheralScales extends SmithGroup {
                     ? 'WAVELENGTHS TOWARD GENERATOR →'
                     : '← WAVELENGTHS TOWARD LOAD'
                 : scale.title.toUpperCase();
-            axis
+            labelAxis
                 .append('text')
                 .attr('class', 'peripheral-caption')
                 .attr('text-anchor', 'middle')
@@ -104,6 +113,14 @@ export class SmithPeripheralScales extends SmithGroup {
                 .attr('stroke-width', 1);
         });
     }
+    show() {
+        this.labels.show();
+        return super.show();
+    }
+    hide() {
+        this.labels.hide();
+        return super.hide();
+    }
     /** Connect to the same cursor or marker data as the independent parameter scales. */
     update(gamma) {
         const valid = gamma !== null && Number.isFinite(gamma.abs()) && gamma.abs() <= 1;

package/dist/lib/scales/SmithScales.js

@@ -24,7 +24,8 @@ export class SmithScales {
         .style('width', '100%')
         .style('height', 'auto');
     constructor() {
-        this.axes
+        const labels = this.axes.append('g').attr('data-role', 'labels').attr('pointer-events', 'none');
+        labels
             .append('text')
             .attr('x', this.start)
             .attr('y', 12)
@@ -32,7 +33,7 @@ export class SmithScales {
             .attr('font-size', 12)
             .attr('fill', '#334155')
             .text((scale) => scale.title);
-        this.axes
+        labels
             .append('text')
             .attr('class', 'scale-value')
             .attr('x', this.start)
@@ -55,12 +56,18 @@ export class SmithScales {
         const length = this.length;
         this.axes.each(function (scale) {
             const ticks = select(this)
-                .selectAll('g')
+                .selectAll('g.scale-tick')
                 .data(scale.values)
                 .join('g')
+                .attr('class', 'scale-tick')
                 .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`);
             ticks.append('line').attr('y2', 5).attr('stroke', '#64748b').attr('stroke-width', 1);
-            ticks
+            select(this)
+                .select('[data-role=labels]')
+                .selectAll('g')
+                .data(scale.values)
+                .join('g')
+                .attr('transform', (value) => `translate(${start + length * scale.position(value)},36)`)
                 .append('text')
                 .attr('y', 17)
                 .attr('font-size', 10)
@@ -79,6 +86,7 @@ export class SmithScales {
             .attr('fill', '#dc2626')
             .attr('stroke', 'white')
             .attr('stroke-width', 1);
+        labels.raise();
         this.axes.append('title').text((scale) => scale.description ?? scale.title);
     }
     draw(target) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smithkit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Framework-independent, interactive Smith chart library for JavaScript and TypeScript",
   "type": "module",
   "scripts": {