lfocomp 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -5,6 +5,24 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.1.1] - 2026-03-28
+
+### Fixed
+- LFO widget param sliders overflowing their containers (`min-width: 0` on grid cells)
+- LFO widgets too narrow (~213 px) on typical viewports — panel moved above main grid, each widget now ~343 px
+- `destroyLFO` now removes incoming LFO-chain routes as well as outgoing ones
+- `ModIndicator._reposition` crash due to undefined `badge` variable
+- Arc canvas height mismatch between construction and draw path
+- `pointercancel` during drag left SVG wire overlay in the DOM
+- Color-cycling underflow (`LFO_COLORS[-1] === undefined`) when label provided but color omitted on first `createLFO` call
+- Stale `ModIndicator` badges persisting after routes deleted externally — `_pruneDeadRoutes()` runs each tick
+- Escape key in click-to-type param editor no longer commits the value
+
+### Added
+- LFO widget params split into two visual groups: Rate/Depth (primary) and Phase/Offs./Jitter/Skew (secondary)
+- 91-test suite across three files: `engine.test.js`, `widget.test.js`, `comp.test.js`
+- Coverage thresholds in `vitest.config.js` (60 % lines/functions, 50 % branches)
+
 ## [0.1.0] - 2026-03-28
 
 ### Added
@@ -20,5 +38,6 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - Log-scaled rate slider (0.01 Hz – 10 Hz)
 - Zero runtime dependencies
 
-[Unreleased]: https://github.com/KUSH42/lfocomp/compare/v0.1.0...HEAD
+[Unreleased]: https://github.com/KUSH42/lfocomp/compare/v0.1.1...HEAD
+[0.1.1]: https://github.com/KUSH42/lfocomp/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/KUSH42/lfocomp/releases/tag/v0.1.0

package/README.md

@@ -7,7 +7,7 @@
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![zero dependencies](https://img.shields.io/badge/dependencies-0-brightgreen.svg)]()
 [![ES modules](https://img.shields.io/badge/module-ESM-f7df1e.svg)]()
-[![npm](https://img.shields.io/badge/npm-not%20yet%20published-lightgrey.svg)]()
+[![npm](https://img.shields.io/npm/v/lfocomp.svg)](https://www.npmjs.com/package/lfocomp)
 
 **[Live demo](https://kush42.github.io/lfo.html)**
 
@@ -35,7 +35,7 @@ lfocomp is one import, three files, and you're live.
 
 ## Install
 
-### npm *(coming soon)*
+### npm
 ```bash
 npm install lfocomp
 ```

package/lfo-ui.js

@@ -149,10 +149,17 @@ const CSS = `
   gap: 5px;
 }
 
+.lfo-params-secondary {
+  border-top: 1px solid #2a2a3e;
+  padding-top: 5px;
+  margin-top: 4px;
+}
+
 .lfo-param-group {
   display: flex;
   flex-direction: column;
   gap: 3px;
+  min-width: 0;
 }
 
 .lfo-param-group label {
@@ -770,18 +777,21 @@ export class LFOWidget {
     canvasRow.appendChild(shapesEl);
     root.appendChild(canvasRow);
 
-    // Param sliders — 3-row × 2-col grid (rate, depth, phase, offset, jitter, skew)
-    const params = document.createElement('div');
-    params.className = 'lfo-params';
-
-    this._rateInput   = this._addParam(params, 'Rate',   0.01, 10, 1, 0.01, 'baseRate',  v => `${v.toFixed(2)}Hz`, 'log');
-    this._depthInput  = this._addParam(params, 'Depth',  0,    1,  1,   0.01, 'baseDepth', v => `${Math.round(v * 100)}%`);
-    this._phaseInput  = this._addParam(params, 'Phase',  0,    1,  0,   0.01, 'phase',     v => `${Math.round(v * 360)}°`);
-    this._offsetInput = this._addParam(params, 'Offs.',  -1,   1,  0,   0.01, 'offset',    v => v.toFixed(2));
-    this._jitterInput = this._addParam(params, 'Jitter', 0,    1,  0,   0.01, 'jitter',    v => `${Math.round(v * 100)}%`);
-    this._skewInput   = this._addParam(params, 'Skew',   0,    1,  0.5, 0.01, 'skew',      v => `${Math.round((v - 0.5) * 200)}%`);
-
-    root.appendChild(params);
+    // Param sliders — two groups: primary (rate, depth) and secondary (phase, offset, jitter, skew)
+    const params1 = document.createElement('div');
+    params1.className = 'lfo-params';
+    this._rateInput  = this._addParam(params1, 'Rate',  0.01, 10, 1,   0.01, 'baseRate',  v => `${v.toFixed(2)}Hz`, 'log');
+    this._depthInput = this._addParam(params1, 'Depth', 0,    1,  1,   0.01, 'baseDepth', v => `${Math.round(v * 100)}%`);
+
+    const params2 = document.createElement('div');
+    params2.className = 'lfo-params lfo-params-secondary';
+    this._phaseInput  = this._addParam(params2, 'Phase',  0,  1,   0,   0.01, 'phase',  v => `${Math.round(v * 360)}°`);
+    this._offsetInput = this._addParam(params2, 'Offs.',  -1, 1,   0,   0.01, 'offset', v => v.toFixed(2));
+    this._jitterInput = this._addParam(params2, 'Jitter', 0,  1,   0,   0.01, 'jitter', v => `${Math.round(v * 100)}%`);
+    this._skewInput   = this._addParam(params2, 'Skew',   0,  1,   0.5, 0.01, 'skew',   v => `${Math.round((v - 0.5) * 200)}%`);
+
+    root.appendChild(params1);
+    root.appendChild(params2);
 
     // Connect handle
     const handle = this._handle = document.createElement('div');

package/lfo.js

@@ -617,10 +617,17 @@ const CSS = `
   gap: 5px;
 }
 
+.lfo-params-secondary {
+  border-top: 1px solid #2a2a3e;
+  padding-top: 5px;
+  margin-top: 4px;
+}
+
 .lfo-param-group {
   display: flex;
   flex-direction: column;
   gap: 3px;
+  min-width: 0;
 }
 
 .lfo-param-group label {
@@ -1238,18 +1245,21 @@ class LFOWidget {
     canvasRow.appendChild(shapesEl);
     root.appendChild(canvasRow);
 
-    // Param sliders — 3-row × 2-col grid (rate, depth, phase, offset, jitter, skew)
-    const params = document.createElement('div');
-    params.className = 'lfo-params';
-
-    this._rateInput   = this._addParam(params, 'Rate',   0.01, 10, 1, 0.01, 'baseRate',  v => `${v.toFixed(2)}Hz`, 'log');
-    this._depthInput  = this._addParam(params, 'Depth',  0,    1,  1,   0.01, 'baseDepth', v => `${Math.round(v * 100)}%`);
-    this._phaseInput  = this._addParam(params, 'Phase',  0,    1,  0,   0.01, 'phase',     v => `${Math.round(v * 360)}°`);
-    this._offsetInput = this._addParam(params, 'Offs.',  -1,   1,  0,   0.01, 'offset',    v => v.toFixed(2));
-    this._jitterInput = this._addParam(params, 'Jitter', 0,    1,  0,   0.01, 'jitter',    v => `${Math.round(v * 100)}%`);
-    this._skewInput   = this._addParam(params, 'Skew',   0,    1,  0.5, 0.01, 'skew',      v => `${Math.round((v - 0.5) * 200)}%`);
-
-    root.appendChild(params);
+    // Param sliders — two groups: primary (rate, depth) and secondary (phase, offset, jitter, skew)
+    const params1 = document.createElement('div');
+    params1.className = 'lfo-params';
+    this._rateInput  = this._addParam(params1, 'Rate',  0.01, 10, 1,   0.01, 'baseRate',  v => `${v.toFixed(2)}Hz`, 'log');
+    this._depthInput = this._addParam(params1, 'Depth', 0,    1,  1,   0.01, 'baseDepth', v => `${Math.round(v * 100)}%`);
+
+    const params2 = document.createElement('div');
+    params2.className = 'lfo-params lfo-params-secondary';
+    this._phaseInput  = this._addParam(params2, 'Phase',  0,  1,   0,   0.01, 'phase',  v => `${Math.round(v * 360)}°`);
+    this._offsetInput = this._addParam(params2, 'Offs.',  -1, 1,   0,   0.01, 'offset', v => v.toFixed(2));
+    this._jitterInput = this._addParam(params2, 'Jitter', 0,  1,   0,   0.01, 'jitter', v => `${Math.round(v * 100)}%`);
+    this._skewInput   = this._addParam(params2, 'Skew',   0,  1,   0.5, 0.01, 'skew',   v => `${Math.round((v - 0.5) * 200)}%`);
+
+    root.appendChild(params1);
+    root.appendChild(params2);
 
     // Connect handle
     const handle = this._handle = document.createElement('div');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lfocomp",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Ableton-style LFO modulation component — wire LFOs to any HTML input by drag-and-drop",
   "type": "module",
   "main": "./lfo-comp.js",