@stanko/ctrls 0.4.5 → 0.4.7

package/README.md

@@ -4,16 +4,16 @@ Minimal library for controlling parameters, designed specifically for algorithmi
 
 [![Multiple Ctrls screenshots, on light and dark backgrounds](https://muffinman.io/ctrls/ctrls.png)](https://muffinman.io/ctrls/)
 
-## Made for algorithmic art
+## Made for algorithmic/generative art
 
-I built Ctrls for my [algorithmic art projects](https://muffinman.io/art/). By default, the state is saved in the URL, which lets you navigate history and share links easily. Along with standard components like checkboxes and ranges, it includes two especially useful for generative work: RNG seed and easing. These not only let you adjust parameters but also expose functions (rng and easing) you can call directly.
+I built Ctrls for my [art projects](https://muffinman.io/art/). By default, the state is saved in the URL, which lets you navigate history and share links easily. Along with standard components like checkboxes and ranges, it includes two especially useful for generative work: RNG seed and easing. These not only let you adjust parameters but also expose functions (rng and easing) you can call directly.
 
-Play with the live example above or check the older version in my [Space Invaders generator](https://muffinman.io/invaders/).
+Play with the live example above or check older versions I used for [Space Invaders generator](https://muffinman.io/invaders/) and [Moon Phases](http://muffinman.io/moon/).
 
 ## Features
 
 - Minimal API
-- Six components : RNG seed, easing, boolean, radio, range and dual range
+- Eight components : RNG seed, easing, boolean, radio, range, dual range, file and custom HTML
 - Fully typed, including dynamic typings for controlled properties
 - Light and dark themes included, theming via CSS variables
 
@@ -429,7 +429,7 @@ downloadButton.addEventListener('click', () => {
 
 <div class="example">
 
-```json
+```js
 {
   "type": "html",
   "name": "download",
@@ -466,7 +466,7 @@ Check [the source file](https://github.com/Stanko/ctrls/blob/dev/src/scss/_ctrls
 
 ## Why?
 
-You might ask why I made another library when [dat.GUI](https://github.com/dataarts/dat.gui) and [TweakPane](https://tweakpane.github.io/docs/) already exist. Both target general use cases with extensive options and elaborate APIs, while I wanted something smaller and easier to adapt for [my algorithmic drawings](https://muffinman.io/art/).
+You might ask why I made another library when [dat.GUI](https://github.com/dataarts/dat.gui) and [TweakPane](https://tweakpane.github.io/docs/) already exist. Both target general use cases with extensive options and elaborate APIs, while I wanted something smaller and easier to adapt for [my generative drawings](https://muffinman.io/art/).
 
 I first hacked together a crude library with no plans to release it. Over time I polished it, ported it to TypeScript, and realized it could be useful to others. The code is solid, though I would love to add a few more features.
 

package/dist/ctrls.css

@@ -347,12 +347,17 @@
 }
 
 .ctrls__controls-inner {
+  display: grid;
+  gap: 0.5rem;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
 }
 .ctrls__controls-inner > *:last-child:not(:first-child) {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.ctrls__controls-inner > *:first-child:not(:last-child) {
+  margin-top: 0.25rem;
 }
 
 .ctrls__drawer {
@@ -386,7 +391,7 @@
 }
 
 .ctrls__group {
-  margin: 0.25rem 0.5rem;
+  margin-inline: 0.5rem;
   border: 1px solid var(--ctrls-border);
   border-radius: var(--ctrls-radius);
   overflow: hidden;
@@ -399,14 +404,26 @@
   grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
 }
 
+.ctrls__group-controls-inner {
+  display: grid;
+  gap: 0.5rem;
+}
+.ctrls__group-controls-inner > *:first-child {
+  margin-top: 0.25rem;
+}
+.ctrls__group-controls-inner > *:last-child {
+  margin-bottom: 0.25rem;
+}
+
 .ctrls__control {
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   display: grid;
   grid-template-columns: var(--ctrls-label-width) minmax(0, 1fr);
   align-items: center;
 }
 .ctrls__control:hover {
   background: var(--ctrls-hover-bg);
+  box-shadow: 0 0 0 0.25rem var(--ctrls-hover-bg);
 }
 .ctrls__control:hover .ctrls__control-label {
   color: var(--ctrls-theme);
@@ -416,7 +433,7 @@
 }
 
 .ctrls__control-no-label {
-  padding: 0.25rem 0.5rem 0.25rem calc(var(--ctrls-label-width) + 0.5rem);
+  padding: 0 0.5rem 0 calc(var(--ctrls-label-width) + 0.5rem);
 }
 
 .ctrls__control-label {

package/dist/ctrls.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA,YACE;EAGF;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
+{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AAgDF;EACE;IA5CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACA;IAEA;IAGA;IAGA;;;AASF;EAjDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EAEA;EAGA;EAGA;;;AAeF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;EACA,YACE;EAGF;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;;;AAIA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;;AAIE;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAON;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAKF;EAIE;;AAEA;EACE;;AAPJ;EAUE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAON;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;AAAA;EAEE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}

package/dist/utils/get-drawer.js

@@ -3,8 +3,11 @@ export const getDrawer = (className = "", children = [], toggleButton, isCollaps
     const inner = dom.div(`ctrls__drawer-inner ${className}-inner`, {
         children,
     });
+    console.log(children.length);
+    const duration = Math.min(Math.max(children.length * 75, 300), 750);
     const outer = dom.div(`ctrls__drawer ${className}`, {
         children: [inner],
+        style: `transition-duration: ${duration}ms`,
     });
     if (isCollapsed) {
         outer.classList.add("ctrls__drawer--collapsed");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "type": "module",
   "scripts": {
     "test": "vitest",