muigui 0.0.12 → 0.0.14

package/README.md

@@ -1,15 +1,11 @@
-# muigui
-
-# NOT READY for USE
-
-<!---
-
-<img src="./images/muigui.png" style="max-width: 640px">
+# muigui (⍺)
 
 A simple Web UI library.
 
+[See docs here](https://muigui.org)
+
 muigui is a simple UI library in the spirit of
-[dat.gui](https://github.com/dataarts/dat.gui) and/or [lil-gui](https://github.com/georgealways/).
+[dat.gui](https://github.com/dataarts/dat.gui) and/or [lil-gui](https://github.com/georgealways/) and [tweakpane](https://cocopon.github.io/tweakpane/)
 
 ## Usage
 
@@ -28,66 +24,377 @@ Then
 ```js
 const s = {
   someNumber: 123,
-  someString: "hello",
-  someOption: "dog",
+  someString: 'hello',
+  someOption: 'dog',
   someColor: '#ED3281',
   someFunction: () => console.log('called')
 };
 
 const gui = new GUI();
 gui.add(s, 'someNumber', 0, 200);  // range 0 to 200
-gui.add(s, 'someString);
-gui.add(s, 'someOption, ['cat', 'bird', 'dog']);
+gui.add(s, 'someString');
+gui.add(s, 'someOption', ['cat', 'bird', 'dog']);
 gui.addColor(s, 'someColor');
 gui.add(s, 'someFunction');
 ```
 
 produces
 
-<img src="./images/muigui-screenshot.png" style="max-width: 275px">
+<img src="./images/muigui-screenshot.png" style="max-width: 250px">
 
-or a shorter version
+## Why
 
-```js
-const s = {
-  someNumber: 123,
-  someString: "hello",
-  someOption: "dog",
-  someColor: '#ED3281',
-  someFunction: () => console.log('called')
-};
+So, to be honest, I like [tweakpane](https://cocopon.github.io/tweakpane/) and
+I didn't know about it when I started this library. That said, I've looked
+into using tweakpane and it doesn't meet my needs as of v4.0.0. Examples below
+
+* ## Simpler
+  
+  I wanted certain things to be simpler. For example, in dat.gui/lil.gui/tweakpane, if I wanted
+  to store radians in code but show degrees in the UI I had to jump through
+  hoops. I could either, store degrees and convert 😢
+
+  ```js
+  const settings = {
+    angle: 45,
+  };
+  gui.add(settings, 'angle', -360, 360);
+
+  ...
+     const rotation = settings.angle * Math.PI / 180
+  ```
+
+  That's bad IMO. I shouldn't have to refactor my code to fit the GUI.
+
+  I can make some proxy class that presents degrees to the GUI
+  and stores them in radians like this
+
+  ```js
+  class DegRadHelper {
+    constructor( obj, prop ) {
+      this.obj = obj;
+      this.prop = prop;
+    }
+    get value() {
+      return this.obj[this.prop] * 180 / Math.PI;
+    }
+    set value(v) {
+      this.obj[this.prop] = v * Math.PI / 180;
+    }
+  }
+  const settings = {
+    angle: Math.PI * 0.5,
+  };
+  gui.add(new DegRadHelper(settings, 'angle'), 'value', -360, 360);
+  ```
+
+  But that looks poor to use. What is `'value'`?? 😭
+
+  So, muigui handles that slightly nicer in the form of converters.
+
+  ```js
+  const settings = {
+    angle: Math.PI * 0.5,
+  };
+  const degToRad = d => d * Math.PI / 180;
+  const radToDeg = r => r * 180 / Math.PI;
+  gui.add(s, 'angleRad', {
+    min: -360, max: 360,
+    converters: {
+      to: radToDeg,
+      from: v => [true, degToRad(v)],
+    }});
+  ```
+
+  Typically I'll pull out the settings like this
+
+  ```js
+  const degToRad = d => d * Math.PI / 180;
+  const radToDeg = r => r * 180 / Math.PI;
+  const radToDegSettings {
+    min: -360, max: 360,
+    converters: {
+      to: radToDeg,
+      from: v => [true, degToRad(v)],
+    }});
+  ```
+
+  And then I can use it like this
+
+  ```js
+  const settings = {
+    angle: Math.PI * 0.5,
+    rotation: Math.PI * 0.25,
+  };
+  gui.add(s, 'angleRad', radToDegSettings);
+  gui.add(s, 'rotation', radToDegSettings);
+  ```
+
+  You provide converters where `to` converts to the form the UI wants
+  and `from` converts back. The reason `from` returns a tuple is that
+  it's used to convert the text and gives you a chance to say the text
+  does not match the required format in which case you return `[false]`
+
+  Other examples of simpler: Want a drop-down for numbers?
+
+  ```js
+  const settings = { speed: 1 }
+
+  // tweakpane
+  pane.addBinding(settings, speed, {
+    options: {
+      slow: 0,
+      medium: 1,
+      fast: 2,
+    }
+  })
+
+  // muigui
+  gui.add(settings, 'speed', ['slow', 'medium', 'fast']);
+  ```
+
+  Want a drop-down for strings
+
+  ```js
+  const settings = { alphaMode: 'opaque' }
+
+  // tweakpane
+  pane.addBindng(settings, 'alphaMode', {
+    options: {
+      'opaque': 'opaque',
+      'premultiplied': 'premultiplied',
+    }
+  });
+
+  // muigui
+  gui.add(settings, 'alphaMode', ['opaque', 'premultiplied']);
+  ```
+
+  Of course you can also pass in key/value settings like tweakpane.
+
+* ## Color formats and storage
+
+  I often work with WebGL and WebGPU. The most common colors are in an array or a typedArray
+  
+  ```js
+  const uniforms = {
+    color1: [1, 0.5, 0.25],                   // orange
+    color2: new Float32Array([0, 1, 1]);      // cyan
+    color3: new Uint8Array([0, 128, 0, 128]); // transparent green
+  }
+  ```
+
+  Neither dat.gui, lil.gui, nor tweakpane can edit these AFAICT. (2023)
+  You'd have to jump
+  through the hoops like the `DegRadHelper` example above but it's not
+  that easy because, if you're showing the value textually
+  then you want that value to be the one you want to show the user,
+  not the value the editor wants.
+
+  This is still an issue in muigui where it uses the browser's built
+  in color editor in parts. That editor might show 0-255 values but if it's
+  editing 0 to 1 values it'd be nice if the editor showed 0 to 1 values.
+
+  muigui does handle this in the text part of it's color display. If you
+  ask it to edit 0 to 1 values it shows 0 to 1 values in the text part.
+  The reason you need the text part is so you can copy and paste colors
 
-const options = {
-  someNumber: [1, 200],   // range 0 to 200
-  someOption: ['cat', 'bird', 'dog'],
-}
+  muigui also edits hsl colors. By that I don't mean the editor can
+  switch to an HSL editor, I mean the actual value that comes out
+  is `hsl(hue, sat, luminance)` and not some RGB value. Like the number
+  conversions, it would be easy to add `hsv`, `hsb`, maybe `labch` etc...
+
+* ## More Use Cases
+
+  In some projects, I'd end up writing a small
+  app with an HTML form and then have to write all the code to parse
+  the form and I'd be thinking "It would be so nice if I could use
+  the same API as dat.gui 🙁
+
+  So, I thought I'd try to write a library that handled that case.
+
+I also wanted to explore various things though many of them
+have not made it into muigui yet.
+
+* ## PropertyGrid
+
+  I'm sure the first app to do this was something from the 60s or 70s
+  in Smalltalk or something but my first experience was C#. In C#
+  the UI library had a `PropertyGrid` which you could pass any class
+  and with would auto-magically make UI to edit the public fields
+  of that class. If you've ever used Unity, it's the same. You declare
+  a class and it immediately shows a UI for all of its public properties.
+
+  That's easier in a typed language than a more loose language like
+  JavaScript.
+
+  I'm still experimenting with ideas but it sure would be nice to
+  get that for JS. Just give it an object and get a UI. You can
+  then customize later.
+
+  To be more concrete. Here's some code to setup a GUI
+  
+  ```js
+  const s = {
+    someNumber: 123,
+    someString: 'hello',
+    someOption: 'dog',
+    someColor: '#ED3281',
+    someFunction: () => console.log('called')
+  };
+
+  const gui = new GUI();
+  gui.add(s, 'someNumber', 0, 200);  // range 0 to 200
+  gui.add(s, 'someString');
+  gui.add(s, 'someOption', ['cat', 'bird', 'dog']);
+  gui.addColor(s, 'someColor');
+  gui.add(s, 'someFunction');
+  ```
+
+  I'd really like it to be this
+
+  ```js
+  const s = {
+    someNumber: 123,
+    someString: 'hello',
+    someOption: 'dog',
+    someColor: '#ED3281',
+    someFunction: () => console.log('called')
+  };
+
+  const gui = new GUI();
+  gui.add(s);
+  ```
+
+  At the moment that won't work. `someNumber` could only become
+  a `TextNumber` because there's no range. `someOption` would
+  only become a `Text` because there's no info that it's an enum.
+  `someColor` would become a `Text` because there's no info that
+  it's a color. So in the end only 2 of the 5 would work without
+  having to provide more info.
+
+  It's not clear in JS that adding that info would be a win
+  for keeping it simple but it sure would be nice.
+
+* ## Modularity
+
+  Ideally I'd like it to be easy to make UIs based on collections
+  of parts. A simple example might be a 3 component vector
+  editor that is the combination of 3 number editors.
+
+  I'm still experimenting. While muigui has components that
+  do this I'm not happy with the API ergonomics yet.
+
+  Similarly I'd like to more easily split layout so it's trivial
+  to layout sub components. Again, still experimenting.
+
+* ## Don't over specialize
+
+  This might be ranty, but I find libraries that try to do too much,
+  frustrating. In this case, it would
+  be a library that graphs data for you. The problem
+  with this functionality is that there is no end to
+  the number of features that will be requested.
+
+  You start with "graph an array of numbers".
+  Then you'll be asked to be able to supply a range.
+  Then you'll be asked to allow more than one array
+  for the graph.
+  You'll next be asked to let you specify a different
+  color for each array. Next you'll be asked to draw
+  axes, in different colors, with different units,
+  and labels. Then you'll be asked to have an option
+  to fill under the graph. Etc, etc, etc... forever.
+
+  In this case, It's arguably better to provide
+  a canvas and let the developer write their
+  own graphing code. Maybe provide an example or
+  a simple helper for the simplest case.
+
+  They can even choose when to update vs having to
+  choose an interval.
+
+  Let's compare
+
+  ```js
+  // tweakpane
+  const pane = new Pane();
+  pane.addBinding(PARAMS, 'wave', {
+    readonly: true,
+    view: 'graph',
+    min: -1,
+    max: +1,
+  });
+
+  // muigui
+  const gui = new GUI();
+  helpers.graph(gui.addCanvas('wave'), waveData, {
+    min: -1,
+    max: +1,
+  });
+  ```
+
+  It wasn't any harder to use, but the fact that we
+  just returned a canvas and left the rest outside
+  the library made it way more flexible.
+
+  This problem of providing too specialized a solution
+  is endemic throughout the library ecosystem of pretty much
+  every language.
+
+  There's a balance, but in general, if you need
+  to add more and more options then it was probably the
+  wrong solution. It's better to provide the
+  building blocks.
+
+## No Save/Restore
+
+The problem with save/restore in lil.gui etc is it assumes the data
+I want to edit can be serialized to JSON
+
+Just as the simplest example I can think of
+
+```js
+const material = new THREE.MeshBasicMaterial();
 
 const gui = new GUI();
-gui.add(s, options);
+gui.addColor(material, 'color');
 ```
 
-## What
+It makes no sense to save/restore here. I'm editing a three.js material.
+If I wanted to serialize anything I'd serialize the material.
 
-It is not a general purpose library for every type of GUI.
-Rather, it is a small, easy to use library for small apps.
-Basically I liked how simple it was to use dat.gui to add
-a few sliders and options to a demo.
+Otherwise I can just save the stuff I passed to the GUI.
 
-I thought I'd try to make a CSS/DOM based UI standard elements
-only and then require CSS to style it and see how far I got.
+```js
+  const s = {
+    someNumber: 123,
+    someString: 'hello',
+    someOption: 'dog',
+    someColor: '#ED3281',
+  };
 
-### Not invented here syndrome
+  // save
+  const str = JSON.stringify(s);
 
-It's possible this already exists but if so I couldn't find it.
-Most UI libraries seem to be giant and require a build step.
-I wanted something hopefully not too big and something I could
-easily add to any example with 1 file (or 2 if you add CSS).
+  // restore
+  Object.assign(s, JSON.parse(str));
+  gui.updateDisplay(); 
+```
 
-## muigui - wat?
+In other words, the serialization is too specialized. It's trivial
+to call `JSON.stringify` on data that serializable. No need to put
+serialization in the GUI. Note: I get that you might want to save
+some hidden gui state like whether or not a folder is expanded.
+You still run into the issue though that the data being edited
+might not be easily serializable so you'd have to find another solution.
 
-https://user-images.githubusercontent.com/234804/177000460-3449c2dd-da94-4119-903f-cc7460b46e7b.mp4
+## Future
 
--->
+I'm under sure how much time I'll continue to put into this.
+I get the feeling other people are far more motivated to make
+UIs. Maybe if I'm lucky they'll take some inspiration from
+the thoughts above and I'll find they've covered it all.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "A Simple GUI",
   "main": "muigui.js",
   "module": "src/muigui.js",
@@ -45,7 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "chokidar": "^3.5.3",
-    "eslint": "^8.20.0",
+    "eslint": "^8.54.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-one-variable-per-var": "^0.0.3",
     "eslint-plugin-optional-comma-spacing": "0.0.4",

package/src/controllers/Button.js

@@ -26,6 +26,9 @@ export default class Button extends Controller {
         }));
     this.setOptions({name: property, ...options});
   }
+  name(name) {
+    this.#buttonElem.textContent = name;
+  }
   setOptions(options) {
     copyExistingProperties(this.#options, options);
     const {name} = this.#options;

package/src/controllers/Canvas.js

@@ -5,8 +5,8 @@ import LabelController from './LabelController.js';
 export default class Canvas extends LabelController {
   #canvasElem;
 
-  constructor() {
-    super('muigui-canvas');
+  constructor(name) {
+    super('muigui-canvas', name);
     this.#canvasElem = this.add(
       new ElementView('canvas', 'muigui-canvas'),
     ).domElement;

package/src/controllers/ColorChooser.js

@@ -16,7 +16,6 @@ export default class ColorChooser extends PopDownController {
   #colorView;
   #textView;
   #to;
-  #setKnobHelper;
 
   constructor(object, property, options = {}) {
     super(object, property, 'muigui-color-chooser');
@@ -28,20 +27,22 @@ export default class ColorChooser extends PopDownController {
     this.addTop(this.#textView);
     this.addBottom(this.#colorView);
     // WTF! FIX!
-    this.#setKnobHelper = () => {
-      if (this.#to) {
-        const hex6Or8 = this.#to(this.getValue());
-        const hsl = rgbUint8ToHsl(hexToUint8RGB(hex6Or8));
-        hsl[2] = (hsl[2] + 50) % 100;
-        const hex = uint8RGBToHex(hslToRgbUint8(hsl));
-        this.setKnobColor(`${hex6Or8.substring(0, 7)}FF`, hex);
-      }
-    };
+    this.___setKnobHelper = true;
     this.updateDisplay();
   }
+  #setKnobHelper() {
+    if (this.#to) {
+      const hex6Or8 = this.#to(this.getValue());
+      const alpha = hex6Or8.length === 9 ? hex6Or8.substring(7, 9) : 'FF';
+      const hsl = rgbUint8ToHsl(hexToUint8RGB(hex6Or8));
+      hsl[2] = (hsl[2] + 50) % 100;
+      const hex = uint8RGBToHex(hslToRgbUint8(hsl));
+      this.setKnobColor(`${hex6Or8.substring(0, 7)}${alpha}`, hex);
+    }
+  }
   updateDisplay() {
     super.updateDisplay();
-    if (this.#setKnobHelper) {
+    if (this.___setKnobHelper) {
       this.#setKnobHelper();
     }
   }

package/src/controllers/Folder.js

@@ -11,6 +11,7 @@ export default class Folder extends Container {
       type: 'button',
       onClick: () => this.toggleOpen(),
     }, [this.#labelElem]));
+    this.pushContainer(new Container('muigui-open-container'));
     this.pushContainer(new Container());
     this.name(name);
     this.open();

package/src/controllers/PopDownController.js

@@ -54,7 +54,10 @@ export default class PopDownController extends ValueController {
     }));
     this.#checkboxElem = checkboxElem;
     this.#valuesView = this.#top.add(new ElementView('div', 'muigui-pop-down-values'));
-    this.#bottom = this.add(new ElementView('div', 'muigui-pop-down-bottom'));
+    const container = new ElementView('div', 'muigui-pop-down-bottom muigui-open-container');
+    this.#bottom = new ElementView('div');
+    container.add(this.#bottom);
+    this.add(container);
     this.setOptions(options);
   }
   setKnobColor(bgCssColor/*, fgCssColor*/) {

package/src/controllers/Text.js

@@ -3,7 +3,7 @@ import ValueController from './ValueController.js';
 
 export default class Text extends ValueController {
   constructor(object, property) {
-    super(object, property, 'muigui-checkbox');
+    super(object, property, 'muigui-text');
     this.add(new TextView(this));
     this.updateDisplay();
   }

package/src/controllers/TextNumber.js

@@ -11,7 +11,7 @@ export default class TextNumber extends ValueController {
   #step;
 
   constructor(object, property, options = {}) {
-    super(object, property, 'muigui-checkbox');
+    super(object, property, 'muigui-text-number');
     this.#textView = this.add(new NumberView(this, options));
     this.updateDisplay();
   }

package/src/controllers/create-controller.js

@@ -24,6 +24,9 @@ export function createController(object, property, ...args) {
   if (Array.isArray(arg1)) {
     return new Select(object, property, {keyValues: arg1});
   }
+  if (arg1 && arg1.keyValues) {
+    return new Select(object, property, {keyValues: arg1.keyValues});
+  }
 
   const t = typeof object[property];
   switch (t) {

package/src/esm.ts

@@ -9,4 +9,12 @@ export { default as Slider } from './controllers/Slider.js';
 export { default as TextNumber } from './controllers/TextNumber.js';
 export { default as Vec2 } from './controllers/Vec2.js';
 
+import {graph} from './libs/graph.js';
+import {monitor} from './libs/monitor.js';
+
+export const helpers = {
+  graph,
+  monitor,
+};
+
 export default GUI;

package/src/libs/color-utils.js

@@ -583,6 +583,50 @@ export const colorFormatConverters = {
       to: v => Array.from(v).map(v => f3(v)).join(', '),
     },
   },
+  'float-hsv': {
+    color: {
+      from: v => [true, rgbFloatToHSV01(hexToFloatRGB(v))],
+      to: v => hsv01ToRGBFloat(floatRGBToHex(v)),
+    },
+    text: {
+      from: strTo3Floats,
+      // need Array.from because map of Float32Array makes a Float32Array
+      to: v => Array.from(v).map(v => f3(v)).join(', '),
+    },
+  },
+  'float-hsva': {
+    color: {
+      from: v => [true, rgbaFloatToHSVA01(hexToFloatRGB(v))],
+      to: v => hsva01ToRGBAFloat(floatRGBToHex(v)),
+    },
+    text: {
+      from: strTo4Floats,
+      // need Array.from because map of Float32Array makes a Float32Array
+      to: v => Array.from(v).map(v => f3(v)).join(', '),
+    },
+  },
+  //'float-hsl': {
+  //  color: {
+  //    from: v => [true, rgbFloatToHsl01(hexToFloatRGB(v))],
+  //    to: v => hsl01ToRGBFloat(floatRGBToHex(v)),
+  //  },
+  //  text: {
+  //    from: strTo3Floats,
+  //    // need Array.from because map of Float32Array makes a Float32Array
+  //    to: v => Array.from(v).map(v => f3(v)).join(', '),
+  //  },
+  //},
+  //'float-hsla': {
+  //  color: {
+  //    from: v => [true, hexToFloatRGBA(v)],
+  //    to: floatRGBAToHex,
+  //  },
+  //  text: {
+  //    from: strTo4Floats,
+  //    // need Array.from because map of Float32Array makes a Float32Array
+  //    to: v => Array.from(v).map(v => f3(v)).join(', '),
+  //  },
+  //},
   'object-rgb': {
     color: {
       from: v => [true, hexToObjectRGB(v)],

package/src/libs/graph.js

@@ -0,0 +1,42 @@
+const darkColors = {
+  main: '#ddd',
+};
+const lightColors = {
+  main: '#333',
+};
+
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+
+let colors;
+let isDarkMode;
+
+function update() {
+  isDarkMode = darkMatcher.matches;
+  colors = isDarkMode ? darkColors : lightColors;
+}
+darkMatcher.addEventListener('change', update);
+update();
+
+export function graph(canvas, data, {
+    min = -1,
+    max = 1,
+    interval = 16,
+    color,
+  }) {
+  const ctx = canvas.getContext('2d');
+
+  function render() {
+    const {width, height} = canvas;
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    const range = max - min;
+    for (let i = 0; i < data.length; ++i) {
+      const x = i * width / data.length;
+      const y = (data[i] - min) * height / range;
+      ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = color || colors.main;
+    ctx.stroke();
+  }
+  setInterval(render, interval);
+}

package/src/libs/monitor.js

@@ -0,0 +1,5 @@
+export function monitor(label, object, property, {interval = 200} = {}) {
+  setInterval(() => {
+    label.text(JSON.stringify(object[property], null, 2));
+  }, interval);
+}

package/src/muigui.js

@@ -61,6 +61,10 @@ export class GUIFolder extends Folder {
   addLabel(text) {
     return this.addController(new Label(text));
   }
+  addButton(name, fn) {
+    const o = {fn};
+    return this.add(o, 'fn').name(name);
+  }
 }
 
 class MuiguiElement extends HTMLElement {
@@ -73,7 +77,7 @@ class MuiguiElement extends HTMLElement {
 customElements.define('muigui-element', MuiguiElement);
 
 const baseStyleSheet = new CSSStyleSheet();
-baseStyleSheet.replaceSync(css.default);
+//baseStyleSheet.replaceSync(css.default);
 const userStyleSheet = new CSSStyleSheet();
 
 function makeStyleSheetUpdater(styleSheet) {
@@ -100,6 +104,11 @@ function makeStyleSheetUpdater(styleSheet) {
 const updateBaseStyle = makeStyleSheetUpdater(baseStyleSheet);
 const updateUserStyle = makeStyleSheetUpdater(userStyleSheet);
 
+function getTheme(name) {
+  const { include, css: cssStr } = css.themes[name];
+  return `${include.map(m => css[m]).join('\n')} : css.default}\n${cssStr || ''}`;
+}
+
 export class GUI extends GUIFolder {
   static converters = converters;
   static mapRange = mapRange;
@@ -131,13 +140,14 @@ export class GUI extends GUIFolder {
     }
     if (parent) {
       const muiguiElement = createElem('muigui-element');
-      muiguiElement.shadowRoot.adoptedStyleSheets = [baseStyleSheet, userStyleSheet, this.#localStyleSheet];
+      muiguiElement.shadowRoot.adoptedStyleSheets = [this.#localStyleSheet, baseStyleSheet, userStyleSheet];
       muiguiElement.shadow.appendChild(this.domElement);
       parent.appendChild(muiguiElement);
     }
     if (title) {
       this.title(title);
     }
+    this.#localStyleSheet.replaceSync(css.default);
     this.domElement.classList.add('muigui', 'muigui-colors');
   }
   setStyle(css) {
@@ -155,8 +165,11 @@ export class GUI extends GUIFolder {
   static getUserStyleSheet() {
     return userStyleSheet;
   }
+  setTheme(name) {
+    this.setStyle(getTheme(name));
+  }
   static setTheme(name) {
-    GUI.setBaseStyles(`${css.default}\n${css.themes[name] || ''}`);
+    GUI.setBaseStyles(getTheme(name));
   }
 }
 

package/src/styles/muigui.css.js

@@ -10,16 +10,24 @@ export default {
   --menu-bg-color: #f8f8f8;
   --menu-sep-color: #bbb;
   --hover-bg-color: #999;
-  --focus-color: #68C;
-  --range-color: #888888;
+  --focus-color: #8BF;
+  --range-color: #AAA;
   --invalid-color: #FF0000;
   --selected-color: rgb(255, 255, 255, 0.9);
 
   --button-bg-color: var(--value-bg-color);
 
+  --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);
+  --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICM0NDQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);
+  --image-checkerboard: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDA0MDQwOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0PgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjODA4MDgwOyIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwJSIgaGVpZ2h0PSI1MCUiPjwvcmVjdD4KICA8cmVjdCBzdHlsZT0iZmlsbDogIzgwODA4MDsiIHg9IjUwJSIgeT0iNTAlIiB3aWR0aD0iNTAlIiBoZWlnaHQ9IjUwJSI+PC9yZWN0Pgo8L3N2Zz4=);
+
   --range-left-color: var(--value-color);
   --range-right-color: var(--value-bg-color); 
   --range-right-hover-color: var(--hover-bg-color);
+  --button-image: 
+    linear-gradient(
+      rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2)
+    );
 
   color: var(--color);
   background-color: var(--bg-color);
@@ -36,7 +44,7 @@ export default {
     --menu-bg-color: #080808;
     --menu-sep-color: #444444;
     --hover-bg-color: #666666;
-    --focus-color: #88AAFF;
+    --focus-color: #458; /*#88AAFF*/;
     --range-color: #888888;
     --invalid-color: #FF6666;
     --selected-color: rgba(255, 255, 255, 0.3);
@@ -46,9 +54,15 @@ export default {
     --range-left-color: var(--value-color);
     --range-right-color: var(--value-bg-color); 
     --range-right-hover-color: var(--hover-bg-color);
+    --button-image: linear-gradient(
+        rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)
+      );
 
     color: var(--color);
     background-color: var(--bg-color);
+
+    --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);
+    --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICNEREQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);
   }
 }
 
@@ -57,7 +71,6 @@ export default {
   --label-width: 45%;
   --number-width: 40%;
 
-
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
   --font-size: 11px;
   --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;
@@ -150,6 +163,9 @@ export default {
   min-width: 0;
   min-height: var(--line-height);
 }
+.muigui-root {
+  z-index: 1;
+}
 .muigui-root,
 .muigui-menu {
   display: flex;
@@ -174,8 +190,7 @@ export default {
   color: var(--color);
   background-color: var(--menu-bg-color);
   min-height: var(--line-height);
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
+  padding: 0.2em;
   cursor: pointer;
   border-radius: var(--border-radius);
 }
@@ -196,7 +211,7 @@ export default {
 .muigui-controller>*:nth-child(1) {
   flex: 1 0 var(--label-width);
   min-width: 0;
-  white-space: pre;
+  /* white-space: pre; why?? */
 }
 .muigui-controller>label:nth-child(1) {
   place-content: center start;
@@ -238,32 +253,41 @@ export default {
 /* fix! */
 .muigui-open>button>label::before,
 .muigui-closed>button>label::before {
+  content: "X";
+  color: rgba(0, 0, 0, 0);
+  background-color: var(--range-color);
+  border-radius: 0.2em;
   width: 1.25em;
-  height: var(--line-height);
+  margin-right: 0.25em;
+  height: 1.25em; /*var(--line-height);*/
   display: inline-grid;
   place-content: center start;
   pointer-events: none;
 }
 .muigui-open>button>label::before {
-  content: "ⓧ"; /*"▼";*/
+  background-image: var(--image-open);
 }
 .muigui-closed>button>label::before {
-  content: "⨁"; /*"▶";*/
+  background-image: var(--image-closed);
 }
-.muigui-open>*:nth-child(2) {
-  transition: max-height 0.2s ease-out,
-              opacity 0.5s ease-out;
-  max-height: 100vh;
+
+.muigui-open>.muigui-open-container {
+  transition: all 0.1s ease-out;
   overflow: auto;
-  opacity: 1;
+  height: 100%;
 }
-
-.muigui-closed>*:nth-child(2) {
-  transition: max-height 0.2s ease-out,
-              opacity 1s;
-  max-height: 0;
-  opacity: 0;
+.muigui-closed>.muigui-open-container {
+  transition: all 0.1s ease-out;
   overflow: hidden;
+  min-height: 0;
+}
+.muigui-open>.muigui-open-container>* {
+  transition: all 0.1s ease-out;
+  margin-top: 0px;
+}
+.muigui-closed>.muigui-open-container>* {
+  transition: all 0.1s ease-out;
+  margin-top: -100%;
 }
 
 /* ---- popdown ---- */
@@ -275,8 +299,12 @@ export default {
 .muigui-value>*:nth-child(1).muigui-pop-down-top {
   flex: 0;
 }
-.muigui-pop-down-bottom {
+.muigui-closed .muigui-pop-down-bottom {
+  max-height: 0;
+}
 
+.muigui-value .muigui-pop-down-bottom {
+  margin: 0;
 }
 
 .muigui-pop-down-values {
@@ -298,6 +326,10 @@ export default {
   width: auto;
   color: var(--value-color);
   background-color: var(--value-bg-color);
+  background-image: var(--image-checkerboard);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+
   cursor: pointer;
 
   display: grid;
@@ -389,14 +421,16 @@ export default {
 
 .muigui-button {
   display: grid;
-
+  padding: 2px 0 2px 0;
 }
 .muigui-button button {
   border: none;
   color: var(--value-color);
   background-color: var(--button-bg-color);
+  background-image: var(--button-image);
   cursor: pointer;
   place-content: center center;
+  height: var(--line-height);
 }
 
 /* ------ [ color ] ------ */
@@ -608,9 +642,9 @@ export default {
   border-bottom: 1px solid rgba(0,0,0,0.2);
   border-right: 1px solid rgba(0,0,0,0.2);
   background-color: var(--range-color);
-  margin-top: calc((var(--line-height) - 2px) / -2);
-  width: calc(var(--line-height) - 2px);
-  height: calc(var(--line-height) - 2px);
+  margin-top: calc((var(--line-height) - 6px) / -2);
+  width: calc(var(--line-height) - 6px);
+  height: calc(var(--line-height) - 6px);
 }
 
 .muigui-range input[type=range]::-webkit-slider-runnable-track {
@@ -694,8 +728,14 @@ export default {
 
 `,
 themes: {
-  default: '',
-  float: `
+  default: {
+    include: ['default'],
+    css: `
+    `,
+  },
+  float: {
+    include: ['default'],
+    css: `
   :root {
     color-scheme: light dark,
   }
@@ -752,5 +792,57 @@ themes: {
     --range-color: rgba(0, 0, 0, 0.125);
   }
 `,
+  },
+  form: {
+    include: [],
+    css: `
+    .muigui {
+      --width: 100%;
+      --label-width: 45%;
+      --number-width: 40%;
+    }
+    .muigui-root>button {
+      display: none;
+    }
+    .muigui-controller {
+      margin-top: 1em;
+    }
+    .muigui-label-controller {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      margin-top: 1em;
+    }
+    .muigui-label-controller:has(.muigui-checkbox) {
+      flex-direction: row;
+    }
+    .muigui-value {
+      display: flex;
+      align-items: stretch;
+    }
+    .muigui-value>* {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .muigui-controller>*:nth-child(1) {
+      flex: 1 0 var(--label-width);
+      min-width: 0;
+      white-space: pre;
+    }
+    .muigui-controller>label:nth-child(1) {
+      place-content: center start;
+      display: inline-grid;
+      overflow: hidden;
+    }
+    .muigui-controller>*:nth-child(2) {
+      flex: 1 1 75%;
+      min-width: 0;
+    }
+  `,
+  },
+  none: {
+    include: [],
+    css: '',
+  },
 },
 };

package/src/views/NumberView.js

@@ -22,15 +22,22 @@ export default class NumberView extends EditView {
     const wheelHelper = createWheelHelper();
     super(createElem('input', {
       type: 'number',
-      onInput: () => this.#handleInput(setValue, true),
-      onChange: () => this.#handleInput(setFinalValue, false),
+      onInput: () => {
+        this.#handleInput(setValue, true);
+      },
+      onChange: () => {
+        this.#handleInput(setFinalValue, false);
+      },
       onWheel: e => {
         e.preventDefault();
         const {min, max, step} = this.#options;
         const delta = wheelHelper(e, step);
         const v = parseFloat(this.domElement.value);
         const newV = clamp(stepify(v + delta, v => v, step), min, max);
-        setter.setValue(newV);
+        const [valid, outV] = this.#from(newV);
+        if (valid) {
+          setter.setValue(outV);
+        }
       },
     }));
     this.setOptions(options);

package/src/views/TextView.js

@@ -16,8 +16,12 @@ export default class TextView extends EditView {
     const setFinalValue = setter.setFinalValue.bind(setter);
     super(createElem('input', {
       type: 'text',
-      onInput: () => this.#handleInput(setValue, true),
-      onChange: () => this.#handleInput(setFinalValue, false),
+      onInput: () => {
+        this.#handleInput(setValue, true);
+      },
+      onChange: () => {
+        this.#handleInput(setFinalValue, false);
+      },
     }));
     this.setOptions(options);
   }