diff --git a/ase/properties.cc b/ase/properties.cc
index e85286b7..27bd0a82 100644
--- a/ase/properties.cc
+++ b/ase/properties.cc
@@ -98,7 +98,7 @@ JSONIPC_INHERIT (LambdaPropertyImpl, Property);
 void
 LambdaPropertyImpl::notify()
 {
-  emit_event ("change", identifier());
+  emit_notify (identifier());
 }
 
 Value
@@ -204,7 +204,7 @@ void
 Bag::on_events (const String &eventselector, const EventHandler &eventhandler)
 {
   for (auto p : props)
-    connections.push_back (p->on_event ("change", eventhandler));
+    connections.push_back (p->on_event (eventselector, eventhandler));
 }
 
 } // Properties
diff --git a/ase/server.cc b/ase/server.cc
index 616fc51f..a2059625 100644
--- a/ase/server.cc
+++ b/ase/server.cc
@@ -94,7 +94,7 @@ Preferences::access_properties (const EventHandler &eventhandler)
   bag += Text (&plugin_path, _("Plugin Path"), "", STANDARD + "searchpath",
                _("Search path of directories, seperated by \";\", used to find plugins. This path "
                  "is searched for in addition to the standard plugin location on this system."));
-  bag.on_events ("change", eventhandler);
+  bag.on_events ("notify", eventhandler);
   return bag.props;
 }
 
diff --git a/ui/Makefile.mk b/ui/Makefile.mk
index bd1c8641..77daad5e 100644
--- a/ui/Makefile.mk
+++ b/ui/Makefile.mk
@@ -336,7 +336,7 @@ $>/.tscheck.done: ui/types.d.ts ui/tsconfig.json $(ui/tscheck.deps) ui/Makefile.
 	$(QECHO) RUN tscheck
 	$Q cp ui/tsconfig.json ui/types.d.ts $>/ui/
 	@ # tsc *.js needs to find node_modules/ in the directory hierarchy ("moduleResolution": "node")
-	-$Q cd $>/ && node_modules/.bin/tsc -p ui/tsconfig.json --pretty false |& ../misc/colorize.sh
+	-$Q cd $>/ && node_modules/.bin/tsc -p ui/tsconfig.json $${INSIDE_EMACS:+--pretty false}
 	$Q touch $@
 $>/ui/.build2-stamp: $>/.tscheck.done
 tscheck: $>/node_modules/.npm.done
diff --git a/ui/b/basics.js b/ui/b/basics.js
new file mode 100644
index 00000000..8a32e7c0
--- /dev/null
+++ b/ui/b/basics.js
@@ -0,0 +1,78 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { JsExtract } from '../little.js';
+import * as Util from '../util.js';
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+
+h-flex {
+  display: flex; flex-basis: auto; flex-direction: row;
+  flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
+h-flex[inline] { display: inline-flex; }
+
+v-flex {
+  display: flex; flex-basis: auto; flex-direction: column;
+  flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
+v-flex[inline] { display: inline-flex; }
+
+c-grid { display: grid; }
+c-grid[inline] { display: inline-grid; }
+`;
+
+/** # PUSH-BUTTON - wrapper for an ordinary HTMLElement */
+class PushButton extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('push-button', PushButton);
+
+// Util.add_style_sheet (this, STYLE_URL);
+
+/** # B-HFLEX
+ * Horizontal [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) container element.
+ */
+class HFlex extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('h-flex', HFlex);
+
+/** # B-VFLEX
+ * Vertical [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) container element.
+ */
+class VFlex extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('v-flex', VFlex);
+
+/** # B-CGRID
+ * Simple [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) container element.
+ * See also [Grid Container](https://www.w3.org/TR/css-grid-1/#grid-containers)
+ * [Grid visual cheatsheet](http://grid.malven.co/)
+ */
+class CGrid extends HTMLElement {
+  constructor() { super(); }
+  connectedCallback()
+  {
+    // LitCompnent: super.connectedCallback();
+    Util.add_style_sheet (this, STYLE_URL);
+  }
+}
+customElements.define ('c-grid', CGrid);
diff --git a/ui/b/choice.vue b/ui/b/choice.vue
deleted file mode 100644
index c2a40a35..00000000
--- a/ui/b/choice.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->
-
-<docs>
-  # B-CHOICE
-  This element provides a choice popup to choose from a set of options.
-  It supports the Vue
-  [v-model](https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model)
-  protocol by emitting an `input` event on value changes and accepting inputs via the `value` prop.
-  ## Props:
-  *value*
-  : Integer, the index of the choice value to be displayed.
-  *choices*
-  : List of choices: `[ { icon, label, blurb }... ]`
-  ## Events:
-  *update:value (value)*
-  : Value change notification event, the first argument is the new value.
-</docs>
-
-<style lang="scss">
-.b-choice {
-  display: flex; position: relative;
-  margin: 0;
-  white-space: nowrap;
-  user-select: none;
-  &.b-choice-big {
-    justify-content: left; text-align: left;
-    padding: .1em 0;
-  }
-  &.b-choice-small {
-    justify-content: center; text-align: center;
-    padding: 0;
-  }
-  .b-fed-object &.b-choice {
-    text-align: left;
-    justify-content: left; text-align: left;
-    padding: 0;
-    flex: 1 1 auto;
-  }
-  .-nick {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 1em; flex: 1 1 auto;
-  }
-  .-arrow {
-    flex: 0 0 auto; width: 1em;
-    margin: 0 0 0 .3em;
-  }
-  &.b-choice-small .-arrow {
-    display: none;
-  }
-  .b-choice-current {
-    align-self: center;
-    padding-left: 0.3em;
-    width: 100%;
-    margin: 0;
-    white-space: nowrap; overflow: hidden;
-    .b-choice-big & {
-      flex-grow: 1;
-      justify-content: space-between;
-      padding: $b-button-radius 0 $b-button-radius .5em;
-    }
-    .b-choice-small & {
-      width: 100%; height: 1.33em;
-      justify-content: center;
-      padding: 2px;
-    }
-    @include b-style-outset();
-  }
-}
-.b-choice-contextmenu {
-  .b-choice-label { display: block; white-space: pre-line; }
-  .b-choice-line1,
-  .b-choice-line2 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-secondary; }
-  .b-choice-line3 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-notice; }
-  .b-choice-line4 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-warning; }
-  .b-menuitem {
-    &:focus, &.active, &:active {
-      .b-choice-line1, .b-choice-line2, .b-choice-line3,
-      .b-choice-line4 { filter: $b-style-fg-filter; } //* adjust to inverted menuitem */
-    } }
-  .b-menuitem {
-    white-space: pre-line;
-  }
-}
-</style>
-
-<template>
-  <h-flex class="b-choice" ref="bchoice" :class="classlist" :data-tip="data_tip()"
-	  @click="popup_menu ($event)" @mousedown="popup_menu ($event)" @keydown="keydown" >
-    <h-flex class="b-choice-current" ref="pophere" tabindex="0" >
-      <span class="-nick">{{ nick() }}</span>
-      <span class="-arrow" > ⬍ <!-- ▼ ▽ ▾ ▿ ⇕ ⬍ ⇳ --> </span>
-    </h-flex>
-    <b-contextmenu class="b-choice-contextmenu" ref="cmenu" :activate.prop="activate" >
-      <b-menutitle v-if="title" > {{ title }} </b-menutitle>
-
-      <b-menuitem v-for="e in mchoices" :uri="e.uri" :key="e.uri" :ic="e.icon" >
-	<span class="b-choice-label" :class='e.labelclass' v-if="e.label"   > {{ e.label }}
-	  <!--span >{{ '[' + e.ident + ']' }}</span--> </span>
-	<span class="b-choice-line1" :class='e.line1class' v-if="e.blurb"   > {{ e.blurb }} </span>
-	<span class="b-choice-line2" :class='e.line2class' v-if="e.line2"   > {{ e.line2 }} </span>
-	<span class="b-choice-line3" :class='e.line3class' v-if="e.notice"  > {{ e.notice }} </span>
-	<span class="b-choice-line4" :class='e.line4class' v-if="e.warning" > {{ e.warning }} </span>
-      </b-menuitem>
-    </b-contextmenu>
-  </h-flex>
-</template>
-
-<script>
-import * as Util from "../util.js";
-
-export default {
-  sfc_template,
-  props: { value:   { default: false },
-	   title:   { type: String, },
-	   small:   { default: false },
-	   indexed: { default: false },
-	   prop:    { default: null, },
-	   choices: { default: [] }, },
-  emits: { 'update:value': null, },
-  data: () => ({
-    value_: 0,
-  }),
-  computed: {
-    classlist() {
-      return this.small ? 'b-choice-small' : 'b-choice-big';
-    },
-    ivalue() {
-      if (this.indexed)
-	return this.value >>> 0;
-      for (let i = 0; i < this.mchoices.length; i++)
-	if (this.mchoices[i].uri == this.value)
-	  return i;
-      return 999e99;
-    },
-    mchoices() {
-      const mchoices = [];
-      for (let i = 0; i < this.choices.length; i++) {
-	const c = Object.assign ({}, this.choices[i]);
-	c.uri = this.indexed ? i : c.uri || c.ident;
-	mchoices.push (c);
-      }
-      return mchoices;
-    }, },
-  beforeUnmount () {
-    window.removeEventListener ('pointerup', this.pointerup);
-  },
-  methods: {
-    dom_update() {
-      if (!this.$el) // we need a second Vue.render() call for DOM alterations
-	return this.$forceUpdate();
-      this.value_ = this.value;
-    },
-    data_tip() {
-      const n = this.ivalue;
-      let tip = "**CLICK** Select Choice";
-      if (!this.prop?.label_ || !this.mchoices || n >= this.mchoices.length)
-	return tip;
-      const c = this.mchoices[n];
-      let val = "**" + this.prop.label_ + "** ";
-      val += c.label;
-      return val + " " + tip;
-    },
-    nick() {
-      const n = this.ivalue;
-      if (!this.mchoices || n >= this.mchoices.length)
-	return "";
-      const c = this.mchoices[n];
-      return c.label ? c.label : '';
-    },
-    activate (uri) {
-      // close popup to remove focus guards
-      this.$refs.cmenu.close();
-      this.$emit ('update:value', uri);
-    },
-    popup_menu (event)
-    {
-      this.$refs.pophere.focus();
-      this.$refs.cmenu.popup (event, { origin: this.$refs.pophere });
-    },
-    keydown (event)
-    {
-      if (this.$refs.cmenu.open)
-	return;
-      // allow selection changes with UP/DOWN while menu is closed
-      if (event.keyCode == Util.KeyCode.DOWN || event.keyCode == Util.KeyCode.UP)
-	{
-	  event.preventDefault();
-	  event.stopPropagation();
-	  let n = this.ivalue;
-	  if (this.mchoices)
-	    {
-	      n += event.keyCode == Util.KeyCode.DOWN ? +1 : -1;
-	      if (n >= 0 && n < this.mchoices.length)
-		this.$emit ('update:value', this.mchoices[n].uri);
-	    }
-	}
-      else if (event.keyCode == Util.KeyCode.ENTER)
-	this.popup_menu (event);
-    },
-  },
-};
-
-</script>
diff --git a/ui/b/choiceinput.js b/ui/b/choiceinput.js
new file mode 100644
index 00000000..ccae4e4a
--- /dev/null
+++ b/ui/b/choiceinput.js
@@ -0,0 +1,256 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { LitComponent, html, nothing, JsExtract, live, docs, ref } from '../little.js';
+import * as Util from '../util.js';
+
+/** # B-CHOICE
+ * This element provides a choice popup to choose from a set of options.
+ * It supports the Vue
+ * [v-model](https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model)
+ * protocol by emitting an `input` event on value changes and accepting inputs via the `value` prop.
+ * ## Props:
+ * *value*
+ * : Integer, the index of the choice value to be displayed.
+ * *choices*
+ * : List of choices: `[ { icon, label, blurb }... ]`
+ * ## Events:
+ * *valuechange*
+ * : Value change notification event.
+ */
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+b-choiceinput {
+  display: flex;
+  flex-basis: auto;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  align-content: stretch;
+  position: relative;
+  margin: 0;
+  white-space: nowrap;
+  user-select: none;
+  &.b-choice-big {
+    justify-content: left; text-align: left;
+    padding: .1em 0;
+  }
+  &.b-choice-small {
+    justify-content: center; text-align: center;
+    padding: 0;
+  }
+  b-objecteditor &.b-choice {
+    text-align: left;
+    justify-content: left; text-align: left;
+    padding: 0;
+    flex: 1 1 auto;
+  }
+  .-nick {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 1em; flex: 1 1 auto;
+  }
+  .-arrow {
+    flex: 0 0 auto; width: 1em;
+    margin: 0 0 0 .3em;
+  }
+  &.b-choice-small .-arrow {
+    display: none;
+  }
+  .b-choice-current {
+    align-self: center;
+    padding-left: 0.3em;
+    width: 100%;
+    margin: 0;
+    white-space: nowrap; overflow: hidden;
+    .b-choice-big & {
+      flex-grow: 1;
+      justify-content: space-between;
+      padding: $b-button-radius 0 $b-button-radius .5em;
+    }
+    .b-choice-small & {
+      width: 100%; height: 1.33em;
+      justify-content: center;
+      padding: 2px;
+    }
+    @include b-style-outset();
+  }
+}
+.b-choiceinput-contextmenu {
+  .b-choice-label { display: block; white-space: pre-line; }
+  .b-choice-line1,
+  .b-choice-line2 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-secondary; }
+  .b-choice-line3 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-notice; }
+  .b-choice-line4 { display: block; white-space: pre-line; font-size: 90%; color: $b-style-fg-warning; }
+  .b-menuitem {
+    &:focus, &.active, &:active {
+      .b-choice-line1, .b-choice-line2, .b-choice-line3,
+      .b-choice-line4 { filter: $b-style-fg-filter; } //* adjust to inverted menuitem */
+    } }
+  .b-menuitem {
+    white-space: pre-line;
+  }
+}
+`;
+
+
+// <HTML/>
+const HTML = (t, d) =>  html`
+  <h-flex class="b-choice-current" ${ref (h => t.pophere = h)} tabindex="0" >
+    <span class="-nick">${t.nick()}</span>
+    <span class="-arrow" > ⬍ <!-- ▼ ▽ ▾ ▿ ⇕ ⬍ ⇳ --> </span>
+  </h-flex>
+`;
+const CONTEXTMENU_HTML = (t) =>  html`
+  <b-contextmenu class="b-choiceinput-contextmenu" ${ref (h => t.cmenu = h)}
+    @activate=${e => t.activate (e.detail.uri)} @close=${e => t.need_cmenu = false} >
+    <b-menutitle style=${!t.title ? 'display:none' : ''}> ${t.title} </b-menutitle>
+    ${ t.mchoices().map ((c, index) => CONTEXTMENU_ITEM (t, c) )}
+  </b-contextmenu>
+`;
+const CONTEXTMENU_ITEM = (t, c) => html`
+  <b-menuitem uri=${c.uri} ic=${c.icon} >
+    <span class="b-choice-label ${c.labelclass}" > ${ c.label } </span>
+    <span class="b-choice-line1 ${c.line1class}" > ${ c.blurb } </span>
+    <span class="b-choice-line2 ${c.line2class}" > ${ c.line2 } </span>
+    <span class="b-choice-line3 ${c.line3class}" > ${ c.notice } </span>
+    <span class="b-choice-line4 ${c.line4class}" > ${ c.warning } </span>
+  </b-menuitem>
+`;
+
+// <SCRIPT/>
+class BChoiceInput extends LitComponent {
+  render()
+  {
+    return [
+      HTML (this),
+      !this.need_cmenu ? nothing : CONTEXTMENU_HTML (this),
+    ];
+  }
+  createRenderRoot()
+  {
+    Util.add_style_sheet (this, STYLE_URL);
+    return this;
+  }
+  static properties = {
+    value:	{ type: String, },
+    title:	{ type: String, },
+    small:	{ type: Boolean, },
+    prop:	{ type: Object, },
+    choices:	{ type: Array },
+    need_cmenu: { state: true }, // internal
+  };
+  constructor() {
+    super();
+    Util.define_reactive (this, {
+      value_: { value: '' },	//     this.value_ = '';
+    });
+    this.value = '';
+    this.small = false;
+    this.prop = null;
+    this.choices = [];
+    this.need_cmenu = false;
+    this.cmenu = null;
+    this.pophere = null;
+    const this_popup_menu = this.popup_menu.bind (this);
+    this.addEventListener ('click', this_popup_menu);
+    this.addEventListener ('mousedown', this_popup_menu);
+    this.addEventListener ('keydown', this.keydown.bind (this));
+  }
+  updated (changed_props)
+  {
+    if (changed_props.has ('small')) {
+      this.classList.remove (this.small ? 'b-choice-big' : 'b-choice-small');
+      this.classList.add (!this.small ? 'b-choice-big' : 'b-choice-small');
+    }
+    if (changed_props.has ('value'))
+      this.value_ = this.value; // may cause re-render
+    this.setAttribute ('data-tip', this.data_tip());
+  }
+  mchoices()
+  {
+    const mchoices = [];
+    for (let i = 0; i < this.choices.length; i++) {
+      const c = Object.assign ({}, this.choices[i]);
+      c.uri = c.uri || c.ident;
+      mchoices.push (c);
+    }
+    return mchoices;
+  }
+  index()
+  {
+    const mchoices = this.mchoices();
+    for (let i = 0; i < mchoices.length; i++)
+      if (mchoices[i].uri == this.value_)
+	return i;
+    for (let i = 0; i < mchoices.length; i++)
+      if (mchoices[i].ident == this.value_)
+	return i;
+    return 999e99;
+  }
+  data_tip()
+  {
+    const mchoices = this.mchoices();
+    const index = this.index();
+    let tip = "**CLICK** Select Choice";
+    if (!this.prop?.label_ || !mchoices || index >= mchoices.length)
+      return tip;
+    const c = mchoices[index];
+    let val = "**" + this.prop.label_ + "** ";
+    val += c.label;
+    return val + " " + tip;
+  }
+  nick()
+  {
+    const mchoices = this.mchoices();
+    const index = this.index();
+    if (!mchoices || index >= mchoices.length)
+      return "";
+    const c = mchoices[index];
+    return c.label ? c.label : '';
+  }
+  activate (uri)
+  {
+    if (this.cmenu) {
+      // close popup to remove focus guards
+      this.cmenu.close();
+      this.need_cmenu = false;
+    }
+    this.value_ = uri;
+    this.value = this.value_; // becomes Event.target.value
+    this.dispatchEvent (new Event ('valuechange', { composed: true }));
+  }
+  popup_menu (event)
+  {
+    if (!this.cmenu) { // force synchronous rendering to create this.cmenu
+      this.need_cmenu = true; // does this.requestUpdate();
+      this.performUpdate();
+    }
+    this.pophere.focus();
+    this.cmenu.popup (event, { origin: this.pophere });
+  }
+  keydown (event)
+  {
+    if (this.cmenu?.open)
+      return;
+    // allow selection changes with UP/DOWN while menu is closed
+    if (event.keyCode == Util.KeyCode.DOWN || event.keyCode == Util.KeyCode.UP)
+      {
+	event.preventDefault();
+	event.stopPropagation();
+	const mchoices = this.mchoices();
+	let index = this.index();
+	if (mchoices) {
+	  index += event.keyCode == Util.KeyCode.DOWN ? +1 : -1;
+	  if (index >= 0 && index < mchoices.length)
+	    this.activate (mchoices[index].uri);
+	}
+      }
+    else if (event.keyCode == Util.KeyCode.ENTER)
+      this.popup_menu (event);
+  }
+}
+customElements.define ('b-choiceinput', BChoiceInput);
diff --git a/ui/b/fed-number.vue b/ui/b/fed-number.vue
deleted file mode 100644
index bd025e4d..00000000
--- a/ui/b/fed-number.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->
-
-<docs>
-  # B-FED-NUMBER
-  A field-editor for integer or floating point number ranges.
-  The input `value` will be constrained to take on an amount between `min` and `max` inclusively.
-  ## Properties:
-  *value*
-  : Contains the number being edited.
-  *min*
-  : The minimum amount that `value` can take on.
-  *max*
-  : The maximum amount that `value` can take on.
-  *step*
-  : A useful amount for stepwise increments.
-  *allowfloat*
-  : Unless this setting is `true`, numbers are constrained to integer values.
-  *readonly*
-  : Make this component non editable for the user.
-  ## Events:
-  *input*
-  : This event is emitted whenever the value changes through user input or needs to be constrained.
-</docs>
-
-<style lang="scss">
-  .b-fed-number        {
-    display: flex; justify-content: flex-end;
-    input[type='number'] {
-      text-align: right;
-      outline-width: 0; border: none;
-      @include b-style-number-input;
-    }
-    input[type='range'] {
-      margin: auto 1em auto 0;
-      @include b-style-hrange-input;
-      flex: 1 1 auto;  /* grow beyond minimum width */
-      max-width: 50%;  /* avoid excessive sizes */
-      width: 1.5em;    /* minimum width */
-    }
-  }
-</style>
-
-<template>
-  <label class="b-fed-number tabular-nums">
-    <input ref="slidertype" v-if="withslider" type="range" :tabindex="CONFIG.slidertabindex"
-	   :min="fmin()" :max="fmax()" :step="slidersteps()" :disabled="readonly"
-	   :value="value" @input="emit_input_value ($event.target.value)" >
-    <input ref="numbertype" type="number" :style="numberstyle()"
-	   :min="fmin()" :max="fmax()" :step="fstep()" :readonly="readonly"
-	   :value="value" @input="emit_input_value ($event.target.value)" title="" >
-  </label>
-</template>
-
-<script>
-import * as Util from "../util.js";
-
-export default {
-  sfc_template,
-  // https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
-  props: {
-    value:	{ type: [ String, Number ], },
-    allowfloat:	{ type: Boolean, default: false, },
-    min:	{ type: [ String, Number ], default: -Number.MAX_SAFE_INTEGER, },
-    max:	{ type: [ String, Number ], default: +Number.MAX_SAFE_INTEGER, },
-    step:	{ type: [ String, Number ], default: 1, },
-    readonly:	{ type: Boolean, default: false, },
-  },
-  emits: { input: null, },
-  data() { return {
-    withslider:	true,
-  }; },
-  watch: {
-    value: function (val, old) {		// enforce constrain() on *outside* changes
-      const constrainedvalue = this.constrain (val);
-      if (val != constrainedvalue) {
-	const expected = String (constrainedvalue);
-	if (expected != String (this.value))
-	  this.emit_input_value (this.value);	// enforce constrain()
-      }
-    },
-  },
-  methods: {
-    emit_input_value (inputvalue) {		// emit 'input' with constrained value
-      const constrainedvalue = this.constrain (inputvalue);
-      const expected = String (constrainedvalue);
-      if (this.$refs.numbertype && String (this.$refs.numbertype.value) != expected)
-	this.$refs.numbertype.value = expected;
-      if (this.$refs.slidertype && String (this.$refs.slidertype.value) != expected)
-	this.$refs.slidertype.value = expected;
-      if (String (this.value) != expected)
-	this.$emit ('input', constrainedvalue);
-    },
-    constrain (v) {
-      v = parseFloat (v);
-      if (isNaN (v))
-	v = 0;
-      if (!this.allowfloat)			// use v|0 to cast to int
-	v = 0 | (v > 0 ? v + 0.5 : v - 0.5);
-      return Util.clamp (v, this.fmin(), this.fmax());
-    },
-    fmin()  { return parseFloat (this.min); },
-    fmax()  { return parseFloat (this.max); },
-    fstep() { return parseFloat (this.step); },
-    slidersteps() {				// aproximate slider steps to slider pixels
-      if (!this.allowfloat)
-	return 1;				// use integer stepping for slider
-      // slider float stepping, should roughly amount to the granularity the slider offers in pixels
-      const sliderlength = 250;			// uneducated approximation of maximum slider length
-      const delta = Math.abs (this.fmax() - this.fmin());
-      if (delta > 0)
-	{
-	  const l10 = Math.log (10);
-	  const deltalog = Math.log (delta / sliderlength) / l10;
-	  const steps = Math.pow (10, Math.floor (deltalog));
-	  return steps;
-	}
-      return 0.1;				// float fallback
-    },
-    numberstyle() {				// determine width for numeric inputs
-      const l10 = Math.log (10);
-      const minimum = 123456;			// minimum number of digits always representable
-      const delta = Math.max (minimum, Math.abs (this.fmax()), Math.abs (this.fmin()),
-			      Math.abs (this.fmax() - this.fmin())) + (this.fmin() < 0);
-      const digits = Math.log (Math.max (delta, 618)) / l10;
-      const em2digit = 0.9;
-      const width = 0.5 + Math.ceil (digits * em2digit + 1); // margin + digits + spin-arrows
-      return `width: 100%; max-width: ${width}em; min-width: 2em`;
-    },
-  },
-};
-</script>
diff --git a/ui/b/fed-object.vue b/ui/b/fed-object.vue
deleted file mode 100644
index cf69d0c5..00000000
--- a/ui/b/fed-object.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->
-
-<docs>
-  # B-FED-OBJECT
-  A field-editor for object input.
-  A copy of the input value is edited, update notifications are provided via
-  an `input` event.
-  ## Properties:
-  *value*
-  : Object with properties to be edited.
-  *readonly*
-  : Make this component non editable for the user.
-  *debounce*
-  : Delay in milliseconds for `input` event notifications.
-  ## Events:
-  *input*
-  : This event is emitted whenever the value changes through user input or needs to be constrained.
-</docs>
-
-<style lang="scss">
-  .b-fed-object		{
-    .b-fed-object-clear	{
-      -font-size: 1.1em; // @include b-font-weight-bolder();
-      color: #888; background: none; padding: 0 0 0 0.5em; margin: 0;
-      outline: none; border: 1px solid rgba(0,0,0,0); border-radius: $b-button-radius;
-      &:hover			{ color: #eb4; }
-      &:active			{ color: #3bf; }
-
-    }
-    > * { //* avoid visible overflow for worst-case resizing */
-      min-width: 0;
-      overflow-wrap: break-word;
-    }
-    .-group {
-      align-items: center;
-      margin-top: 0.5em;
-      &:first-child { margin-top: 0; }
-      white-space: nowrap;
-      .-label { text-overflow: ellipsis; overflow: hidden; @include b-font-weight-bold(); }
-    }
-    .-flabel {
-      padding: 0 0.1em 0 0;
-      min-width: 3em;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    .-field {
-      justify-self: flex-end;
-      justify-content: space-between;
-      white-space: nowrap;
-      max-width: 32em;
-      width: 50vw;
-    }
-    .-value {
-      width: 100%;
-    }
-  }
-</style>
-
-<!-- field = [ ident, iscomponent, label, attrs, o, handler ] -->
-<template>
-  <c-grid class="b-fed-object" style="grid-gap: 0.6em 0.5em;">
-    <template v-for="group in gprops" :key="'group-' + group.name" >
-
-      <h-flex class="-group" style="grid-column: 1 / span 3" >
-	<span class="-label" style="flex-grow: 0;" v-if="group.name" >{{ group.name }}</span>
-	<hr style="flex-grow: 1; margin-left: 0.5em; min-width: 5em" v-if="group.name" />
-      </h-flex>
-
-      <template v-for="prop in group.props" :key="'fed-' + prop.ident_" >
-	<span class="-flabel" style="grid-column: 1" :data-bubble="prop.blurb_"
-	>{{ prop.label_ }}</span>
-	<h-flex class="-field" style="grid-column: 2 / span 2" >
-	  <span class="-value" style="text-align: right" :data-bubble="prop.blurb_" >
-	    <component :is="prop.ctype_" v-bind="prop.attrs_" :class="'b-fed-object--' + prop.ident_"
-					 :value="prop.fetch_()" @input="prop.apply_" v-if="prop.ctype_.startsWith ('b-fed-')" ></component>
-	    <b-textinput v-bind="prop.attrs_" :class="'b-fed-object--' + prop.ident_"
-			 :value="prop.fetch_()" @input="prop.apply_ ($event.target.value)"
-			 v-if="prop.ctype_ === 'b-textinput'" ></b-textinput>
-	    <b-choice v-bind="prop.attrs_" :class="'b-fed-object--' + prop.ident_"
-		      :value="prop.fetch_()" @update:value="prop.apply_ ($event)" :choices="prop.value_.choices"
-		      v-if="prop.ctype_ === 'b-choice'" ></b-choice>
-	  </span>
-	  <span>
-	    <span class="b-fed-object-clear" @click="prop.reset()" > ⊗  </span></span>
-	</h-flex>
-      </template>
-
-    </template>
-  </c-grid>
-</template>
-
-<script>
-import * as Util from '../util.js';
-
-async function list_fields (proplist) {
-  const disconnectors = [];
-  const groups = {}, attrs = {
-    min: 0, max: 0, step: 0,
-    readonly: false,
-    allowfloat: true,
-  };
-  const pending_xprops = [];
-  for (const prop of proplist)
-    {
-      const augment = async xprop => {
-	if (!xprop.attrs_)
-	  xprop.attrs_ = attrs;
-	if (this.augment)
-	  await this.augment (xprop);
-      };
-      pending_xprops.push (Util.extend_property (prop, cb => disconnectors.push (cb), augment));
-    }
-  for (const pending_prop of pending_xprops)
-    {
-      const xprop = await pending_prop;
-      if (!groups[xprop.group_])
-	groups[xprop.group_] = [];
-      groups[xprop.group_].push (xprop);
-    }
-  const grouplist = []; // [ { name, props: [richprop, ...] }, ... ]
-  for (const k of Object.keys (groups))
-    {
-      grouplist.push ({ name: k, props: groups[k] });
-      for (const xprop of groups[k])
-	{
-	  let ctype = '';	// component type
-	  if (xprop.hints_.search (/:range:/) >= 0)
-	    {
-	      ctype = 'b-fed-number';
-	      if ((xprop.min_ | xprop.max_) != 0)
-		xprop.attrs_ = Object.assign ({}, xprop.attrs_, { min: xprop.min_, max: xprop.max_ });
-	    }
-	  else if (xprop.hints_.search (/:bool:/) >= 0)
-	    ctype = 'b-fed-switch';
-	  else if (xprop.has_choices_)
-	    ctype = 'b-choice';
-	  else
-	    ctype = 'b-textinput';
-	  xprop.ctype_ = ctype;
-	  Object.freeze (xprop);
-	}
-      Object.freeze (groups[k]);
-    }
-  this.replace_disconnectors (disconnectors);
-  this.fetchingprops = false;
-  return Object.freeze (grouplist);
-}
-
-function data () {
-  const data = {
-    gprops: { default: [], getter: c => this.list_fields (this.value), },
-    fetchingprops: true,
-  };
-  return this.observable_from_getters (data, () => this.value);
-}
-
-export default {
-  sfc_template,
-  data,
-  props: {
-    readonly:	{ default: false, },
-    augment:    { type: Function, },
-    debounce:	{ default: 0, },
-    value:	{ required: true, },
-    default:	{},
-  },
-  inject: { b_dialog_resizers: { default: [] }, },
-  emits: { input: null, },
-  mounted () {
-    this.resizing = () => this.fetchingprops;
-    this.b_dialog_resizers.push (this.resizing);
-  },
-  unmounted() {
-    this.replace_disconnectors();
-    Util.array_remove (this.b_dialog_resizers, this.resizing);
-  },
-  methods: {
-    list_fields,
-    replace_disconnectors (new_disconnectors) {
-      if (this.disconnectors)
-	while (this.disconnectors.length)
-	  this.disconnectors.pop().call();
-      this.disconnectors = new_disconnectors;
-    },
-    apply_field (fieldname, value) {
-      const o = this.object;
-      o[fieldname] = value;
-      if (this.emit_update_ == undefined)
-	this.emit_update_ = Util.debounce (() => this.$emit ('input', this.object),
-					   { wait: this.debounce,
-					     restart: true,
-					   });
-      this.emit_update_();
-    },
-  },
-};
-</script>
diff --git a/ui/b/fed-switch.vue b/ui/b/fed-switch.vue
deleted file mode 100644
index 7280388f..00000000
--- a/ui/b/fed-switch.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->
-
-<docs>
-  # B-FED-SWITCH
-  A field-editor switch to change between on and off.
-  ## Properties:
-  *value*
-  : Contains a boolean indicating whether the switch is on or off.
-  *readonly*
-  : Make this component non editable for the user.
-  ## Events:
-  *input*
-  : This event is emitted whenever the value changes through user input or needs to be constrained.
-</docs>
-
-<style lang="scss">
-  .b-fed-switch        { position: relative; display: inline-block; width: 2.6em; height: 1.4em;
-    input               { opacity: 0; width: 0; height: 0;
-      &:focus   + .b-fed-switch-trough		{ box-shadow: $b-focus-box-shadow; }
-      &:checked + .b-fed-switch-trough         { background-color: $b-switch-active; /*cursor: ew-resize;*/ }
-      &:checked + .b-fed-switch-trough::before	{ opacity: 1; /* checkmark */ }
-      &:checked + .b-fed-switch-trough .b-fed-switch-knob { transform: translateX(1.2em); }
-    }
-  }
-  .b-fed-switch-knob	{ position: absolute; height: 1em; width: 1em; left: 0.2em; bottom: 0.2em;
-    content: ""; transition: .3s; background-color: $b-switch-knob; border-radius: $b-button-radius;
-  }
-  .b-fed-switch-trough { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-    transition: .3s; background-color: $b-switch-inactive; border-radius: $b-button-radius;
-    &::before		{ position: absolute; top: 0.1em; left: 0.3em;
-      font-size: 1em; text-transform: none; text-decoration: none !important; speak: none;
-      content: "\2713"; transition: .3s; color: $b-switch-knob; opacity: 0;
-    }
-  }
-</style>
-
-<template>
-  <label class="b-fed-switch">
-    <input ref="checkboxtype" type="checkbox" :disabled="readonly"
-	   :checked="value" @change="emit_input_value ($event.target.checked)" >
-    <span class="b-fed-switch-trough"><span class="b-fed-switch-knob"></span></span>
-  </label>
-</template>
-
-<script>
-export default {
-  sfc_template,
-  props: {
-    value:	{ type: [ String, Number, Boolean ], },
-    readonly:	{ type: Boolean, default: false, },
-  },
-  emits: { input: null, },
-  watch: {
-    value: function (val, old) {		// enforce constrain() on *outside* changes
-      const constrainedvalue = this.constrain (val);
-      if (this.value != constrainedvalue)
-	this.emit_input_value (this.value);	// enforce constrain()
-    },
-  },
-  methods: {
-    emit_input_value (inputvalue) {		// emit 'input' with constrained value
-      const constrainedvalue = this.constrain (inputvalue);
-      const expected = String (constrainedvalue);
-      if (this.$refs.checkboxtype && String (this.$refs.checkboxtype.checked) != expected)
-	this.$refs.checkboxtype.checked = expected;
-      if (String (this.value) != expected)
-	this.$emit ('input', constrainedvalue);
-    },
-    constrain (v) {
-      if (typeof (v) != "string")
-	return !!v;
-      if (v.length < 1)
-	return false;
-      if (v[0] == 'f' || v[0] == 'F' || v[0] == 'n' || v[0] == 'N')
-	return false;
-      return true;
-    },
-  },
-};
-</script>
diff --git a/ui/b/numberinput.js b/ui/b/numberinput.js
new file mode 100644
index 00000000..4a3f389a
--- /dev/null
+++ b/ui/b/numberinput.js
@@ -0,0 +1,157 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { LitComponent, html, JsExtract, live, docs, ref } from '../little.js';
+import * as Util from '../util.js';
+
+/** # B-FED-NUMBER
+ * A field-editor for integer or floating point number ranges.
+ * The input `value` will be constrained to take on an amount between `min` and `max` inclusively.
+ * ## Properties:
+ * *value*
+ * : Contains the number being edited.
+ * *min*
+ * : The minimum amount that `value` can take on.
+ * *max*
+ * : The maximum amount that `value` can take on.
+ * *step*
+ * : A useful amount for stepwise increments.
+ * *allowfloat*
+ * : Unless this setting is `true`, numbers are constrained to integer values.
+ * *readonly*
+ * : Make this component non editable for the user.
+ * ## Events:
+ * *valuechange*
+ * : This event is emitted whenever the value changes through user input or needs to be constrained.
+ */
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+b-numberinput {
+  display: flex; justify-content: flex-end;
+  label {
+    display: flex; justify-content: flex-end;
+    flex-grow: 1;
+  }
+  input[type='range'] {
+    flex-grow: 1;
+    margin: auto 1em auto 0;
+    @include b-style-hrange-input;
+    flex: 1 1 auto;  /* grow beyond minimum width */
+    max-width: 50%;  /* avoid excessive sizes */
+    width: 1.5em;    /* minimum width */
+  }
+  input[type='number'] {
+    text-align: right;
+    outline-width: 0; border: none;
+    @include b-style-number-input;
+  }
+}
+`;
+
+// <HTML/>
+const HTML = t =>
+html`
+<label class="tabular-nums">
+  <input ${ref (h => t.slidertype = h)} type="range"
+         tabindex=${CONFIG.slidertabindex} min=${t.min} max=${t.max}
+         step=${t.slidersteps()} ?disabled=${t.readonly}
+         .value=${t.value} @input=${e => t.emit_input_value (e.target.value)} >
+  <input ${ref (h => t.numbertype = h)} type="number" style=${t.numberstyle()}
+         min=${t.min} max=${t.max} step=${t.step} ?readonly=${t.readonly}
+         .value=${t.value} @input=${e => t.emit_input_value (e.target.value)} >
+</label>
+`;
+
+// <SCRIPT/>
+class BNumberInput extends LitComponent {
+  render() { return HTML (this); }
+  createRenderRoot()
+  {
+    Util.add_style_sheet (this, STYLE_URL);
+    return this;
+  }
+  static properties = {
+    value:	{ type: [String, Number] },
+    allowfloat:	{ type: Boolean, },
+    readonly:	{ type: Boolean, },
+    min:	{ type: Number, },
+    max:	{ type: Number, },
+    step:	{ type: Number, },
+  };
+  constructor() {
+    super();
+    this.value = 0;
+    this.allowfloat = false;
+    this.readonly = false;
+    this.min = -Number.MAX_SAFE_INTEGER;
+    this.max = +Number.MAX_SAFE_INTEGER;
+    this.step = 1;
+    this.slidertype = null;
+    this.numbertype = null;
+  }
+  updated (changed_props)
+  {
+    if (changed_props.has ('value')) {
+      // enforce constrain() on *outside* changes
+      const constrainedvalue = this.constrain (this.value);
+      if (this.value != constrainedvalue) {
+	const expected = String (constrainedvalue);
+	if (expected != String (this.value))
+	  this.emit_input_value (this.value);   // enforce constrain()
+      }
+    }
+  }
+  constrain (v)
+  {
+    v = parseFloat (v);
+    if (isNaN (v))
+      v = 0;
+    if (!this.allowfloat)                       // use v|0 to cast to int
+      v = 0 | (v > 0 ? v + 0.5 : v - 0.5);
+    return Util.clamp (v, this.min, this.max);
+  }
+  slidersteps()                                 // aproximate slider steps to slider pixels
+  {
+    if (!this.allowfloat)
+      return 1;                                 // use integer stepping for slider
+    // slider float stepping, should roughly amount to the granularity the slider offers in pixels
+    const sliderlength = 250;                   // uneducated approximation of maximum slider length
+    const delta = Math.abs (this.max - this.min);
+    if (delta > 0)
+      {
+        const l10 = Math.log (10);
+        const deltalog = Math.log (delta / sliderlength) / l10;
+        const steps = Math.pow (10, Math.floor (deltalog));
+        return steps;
+      }
+    return 0.1;                                 // float fallback
+  }
+  numberstyle()                                 // determine width for numeric inputs
+  {
+    const l10 = Math.log (10);
+    const minimum = 123456;                     // minimum number of digits always representable
+    const delta = Math.max (minimum, Math.abs (this.max), Math.abs (this.min),
+                            Math.abs (this.max - this.min)) + Number (this.min < 0);
+    const digits = Math.log (Math.max (delta, 618)) / l10;
+    const em2digit = 0.9;
+    const width = 0.5 + Math.ceil (digits * em2digit + 1); // margin + digits + spin-arrows
+    return `width: 100%; max-width: ${width}em; min-width: 2em`;
+  }
+  emit_input_value (inputvalue)                 // emit 'input' with constrained value
+  {
+    const constrainedvalue = this.constrain (inputvalue);
+    const expected = String (constrainedvalue);
+    if (this.numbertype && String (this.numbertype.value) != expected)
+      this.numbertype.value = expected;
+    if (this.slidertype && String (this.slidertype.value) != expected)
+      this.slidertype.value = expected;
+    if (String (this.value) != expected) {
+      this.value = constrainedvalue; // becomes Event.target.value
+      this.dispatchEvent (new Event ('valuechange', { composed: true }));
+    }
+  }
+}
+customElements.define ('b-numberinput', BNumberInput);
diff --git a/ui/b/objecteditor.js b/ui/b/objecteditor.js
new file mode 100644
index 00000000..2a748390
--- /dev/null
+++ b/ui/b/objecteditor.js
@@ -0,0 +1,201 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { LitComponent, html, JsExtract, live, docs, ref } from '../little.js';
+import * as Util from '../util.js';
+
+/** # B-OBJECTEDITOR
+ * A field-editor for object input.
+ * A copy of the input value is edited, update notifications are provided via
+ * an `input` event.
+ * ## Properties:
+ * *value*
+ * : Object with properties to be edited.
+ * *readonly*
+ * : Make this component non editable for the user.
+ * ## Events:
+ * *input*
+ * : This event is emitted whenever the value changes through user input or needs to be constrained.
+ */
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+b-objecteditor {
+  display: grid;
+  grid-gap: 0.6em 0.5em;
+  .b-objecteditor-clear {
+    -font-size: 1.1em; // @include b-font-weight-bolder();
+    color: #888; background: none; padding: 0 0 0 0.5em; margin: 0;
+    outline: none; border: 1px solid rgba(0,0,0,0); border-radius: $b-button-radius;
+    &:hover			{ color: #eb4; }
+    &:active			{ color: #3bf; }
+  }
+  > * {
+    /* avoid visible overflow for worst-case resizing */
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+  .b-objecteditor-group {
+    align-items: center;
+    margin-top: 0.5em;
+    &:first-child { margin-top: 0; }
+    white-space: nowrap;
+    .b-objecteditor-label { text-overflow: ellipsis; overflow: hidden; @include b-font-weight-bold(); }
+  }
+  .b-objecteditor-flabel {
+    padding: 0 0.1em 0 0;
+    min-width: 3em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .b-objecteditor-field {
+    justify-self: flex-end;
+    justify-content: space-between;
+    white-space: nowrap;
+    max-width: 32em;
+    width: 50vw;
+  }
+  .b-objecteditor-value {
+    width: 100%;
+  }
+}
+`;
+
+// <HTML/>
+const GROUP_HTML = (t, group) =>  html`
+<h-flex class="b-objecteditor-group" style="grid-column: 1 / span 3" >
+  <span class="b-objecteditor-label" style="flex-grow: 0;" >${group.name}</span>
+  <hr style="flex-grow: 1; margin-left: 0.5em; min-width: 5em"></hr>
+</h-flex>
+`;
+const PROP_HTML = (t, prop, INPUT_TAG) =>  html`
+<span class="b-objecteditor-flabel" style="grid-column: 1" data-bubble=${prop.blurb_} >${prop.label_}</span>
+<h-flex class="b-objecteditor-field" style="grid-column: 2 / span 2" >
+  <span class="b-objecteditor-value" data-bubble=${prop.blurb_} style="text-align: right" >
+    ${INPUT_TAG}
+  </span>
+  <span><span class="b-objecteditor-clear" @click=${e => prop.reset()} > ⊗  </span></span>
+</h-flex>
+`;
+const NUMBER_HTML = (t, prop) => html`
+  <b-numberinput class=${'b-objecteditor--' + prop.ident_}
+    value=${prop.value_.val} @valuechange=${e => prop.apply_ (e.target.value)}
+    min=${prop.min_} max=${prop.max_}
+    ></b-numberinput>`;
+const TEXT_HTML = (t, prop) => html`
+  <b-textinput class=${'b-objecteditor--' + prop.ident_}
+    value=${prop.value_.val} @valuechange=${e => prop.apply_ (e.target.value)}
+    ></b-textinput>`;
+const SWITCH_HTML = (t, prop) => html`
+  <b-switchinput class=${'b-objecteditor--' + prop.ident_}
+    ?value=${prop.value_.val} @valuechange=${e => prop.apply_ (e.target.value)}
+    ></b-switchinput>
+`;
+const CHOICE_HTML = (t, prop) => html`
+  <b-choiceinput class=${'b-objecteditor--' + prop.ident_}
+    value=${prop.value_.val} @valuechange=${e => prop.apply_ (e.target.value)}
+    title=${prop.title_} .choices=${prop.value_.choices}
+    ></b-choiceinput>`;
+
+// <SCRIPT/>
+class BObjectEditor extends LitComponent {
+  render()
+  {
+    const content = [];
+    for (const group of this.gprops) {
+      content.push (GROUP_HTML (this, group));
+      for (const prop of group.props) {
+	const component_html = prop.component_html_ (this, prop);
+	content.push (PROP_HTML (this, prop, component_html));
+      }
+    }
+    return content;
+  }
+  createRenderRoot()
+  {
+    Util.add_style_sheet (this, STYLE_URL);
+    return this;
+  }
+  static properties = {
+    readonly:	{ type: Boolean, },
+    augment:    { type: Function, },
+    value:	{ type: Array, },
+    gprops:     { state: true }, // internal
+  };
+  constructor() {
+    super();
+    this.readonly = false;
+    this.augment = null;
+    this.value = [];
+    this.gprops = [];
+  }
+  replace_disconnectors (new_disconnectors)
+  {
+    if (this.disconnectors)
+      while (this.disconnectors.length)
+	this.disconnectors.pop().call();
+    this.disconnectors = new_disconnectors;
+  }
+  updated (changed_props)
+  {
+    if (changed_props.has ('value')) {
+      const async_fetch = async () => {
+	this.gprops = await this.list_fields_ (this.value);
+      };
+      async_fetch();
+    }
+  }
+  async list_fields_ (proplist)
+  {
+    const disconnectors = [];
+    const groups = {};
+    const pending_xprops = [];
+    for (const prop of proplist)
+      {
+	const augment = async xprop => {
+	  if (this.augment)
+	    await this.augment (xprop);
+	};
+	pending_xprops.push (Util.extend_property (prop, cb => disconnectors.push (cb), augment));
+      }
+    for (const pending_prop of pending_xprops)
+      {
+	const xprop = await pending_prop;
+	if (!groups[xprop.group_])
+	  groups[xprop.group_] = [];
+	groups[xprop.group_].push (xprop);
+      }
+    const grouplist = []; // [ { name, props: [richprop, ...] }, ... ]
+    for (const k of Object.keys (groups))
+      {
+	grouplist.push ({ name: k, props: groups[k] });
+	for (const xprop of groups[k])
+	  {
+	    let component_html;	// component type
+	    if (xprop.hints_.search (/:range:/) >= 0)
+	      component_html = NUMBER_HTML;
+	    else if (xprop.hints_.search (/:bool:/) >= 0)
+	      component_html = SWITCH_HTML;
+	    else if (xprop.has_choices_)
+	      component_html = CHOICE_HTML;
+	    else
+	      component_html = TEXT_HTML;
+	    xprop.component_html_ = component_html;
+	    console.log (xprop.ident_, xprop.fetch_());
+	  }
+	Object.freeze (groups[k]);
+      }
+    this.replace_disconnectors (disconnectors);
+    return grouplist;
+  }
+  disconnectedCallback()
+  {
+    super.disconnectedCallback();
+    // release property change notifiers
+    this.replace_disconnectors();
+  }
+}
+customElements.define ('b-objecteditor', BObjectEditor);
diff --git a/ui/b/preferencesdialog.vue b/ui/b/preferencesdialog.vue
index 3c78bab5..9bd42644 100644
--- a/ui/b/preferencesdialog.vue
+++ b/ui/b/preferencesdialog.vue
@@ -19,7 +19,8 @@
     <template v-slot:header>
       <div>Anklang Preferences</div>
     </template>
-    <b-fed-object class="b-preferencesdialog-fed" ref="fedobject" :value="proplist" :augment="augment" @input="value_changed" debounce=75 />
+    <b-objecteditor class="b-preferencesdialog-fed" ref="fedobject" :value="proplist" :augment="augment" >
+    </b-objecteditor>
     <template v-slot:footer>
       <div><button autofocus @click="$emit ('update:shown', false)" > Close </button></div>
     </template>
@@ -32,7 +33,7 @@ import * as Util from "../util.js";
 async function augment_property (xprop) {
   if (xprop.has_choices_)
     {
-      Object.assign (xprop.attrs_, { title: xprop.label_ + " Selection" });
+      Object.assign (xprop, { title_: xprop.label_ + " Selection" });
       for (let i = 0; i < xprop.value_.choices.length; i++)
 	{
 	  const c = xprop.value_.choices[i];
@@ -118,13 +119,6 @@ export default {
   },
   methods: {
     augment (p) { return augment_property.call (this, p); },
-    async value_changed (po) {
-      const prefs = await Ase.server.get_prefs();
-      Util.assign_forin (prefs, po);
-      await Ase.server.set_prefs (prefs);
-      if (this.prefrefresh)
-	this.prefrefresh();
-    },
   },
 };
 </script>
diff --git a/ui/b/pro-input.vue b/ui/b/pro-input.vue
index 181a926f..ed55733e 100644
--- a/ui/b/pro-input.vue
+++ b/ui/b/pro-input.vue
@@ -33,9 +33,9 @@
   <v-flex class="b-pro-input tabular-nums" :data-bubble="bubble()" >
     <b-toggle class="b-pro-input-toggle" v-if="type() == 'toggle'" label=""
 	      :value="get_num()" @update:value="set_num ($event)" />
-    <b-choice class="b-pro-input-choice" v-if="type() == 'choice'" small="1" indexed="1"
-	      :prop="prop" :choices="choices"
-	      :value="get_index()" @update:value="set_index ($event)" />
+    <b-choiceinput class="b-pro-input-choice" v-if="type() == 'choice'" small="1" indexed="1"
+		   :prop="prop" :choices="choices"
+		   :value="get_ident()" @valuechange="set_index ($event.target.index())" />
     <span   class="b-pro-input-span" v-if="labeled && !!nick">{{ nick }}</span>
   </v-flex>
 </template>
@@ -143,6 +143,13 @@ export default {
       const max = this.choices.length - 1;
       return this.vnum * max;
     },
+    get_ident() {
+      if (this.choices === undefined || this.choices.length < 1)
+	return '';
+      const max = this.choices.length - 1;
+      const n = 0| this.vnum * max;
+      return n < this.choices.length ? this.choices[n].ident : '';
+    },
     is_bidir() {
       this.bidir_ = this.hints.search (/:bidir:/) >= 0;
       return this.bidir_;
diff --git a/ui/b/switchinput.js b/ui/b/switchinput.js
new file mode 100644
index 00000000..861e3bbd
--- /dev/null
+++ b/ui/b/switchinput.js
@@ -0,0 +1,121 @@
+// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
+// @ts-check
+
+import { LitComponent, html, JsExtract, live, docs, ref } from '../little.js';
+import * as Util from '../util.js';
+
+/** # B-SWITCHINPUT
+ * A field-editor switch to change between on and off.
+ * ## Properties:
+ * *value*
+ * : Contains a boolean indicating whether the switch is on or off.
+ * *readonly*
+ * : Make this component non editable for the user.
+ * ## Events:
+ * *valuechange*
+ * : This event is emitted whenever the value changes through user input or needs to be constrained.
+ */
+
+// <STYLE/>
+const STYLE_URL = await JsExtract.css_url (import.meta);
+JsExtract.scss`
+@import 'mixins.scss';
+b-switchinput label {
+  position: relative; display: inline-block; width: 2.6em; height: 1.4em;
+  input {
+    opacity: 0; width: 0; height: 0;
+    &:focus   + .b-switchinput-trough                     { box-shadow: $b-focus-box-shadow; }
+    &:checked + .b-switchinput-trough                     { background-color: $b-switch-active; /*cursor: ew-resize;*/ }
+    &:checked + .b-switchinput-trough::before             { opacity: 1; /* checkmark */ }
+    &:checked + .b-switchinput-trough .b-switchinput-knob { transform: translateX(1.2em); }
+  }
+  .b-switchinput-knob {
+    position: absolute; height: 1em; width: 1em; left: 0.2em; bottom: 0.2em;
+    content: ""; transition: .3s; background-color: $b-switch-knob; border-radius: $b-button-radius;
+  }
+  .b-switchinput-trough {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+    transition: .3s; background-color: $b-switch-inactive; border-radius: $b-button-radius;
+    &::before {
+      position: absolute; top: 0.1em; left: 0.3em;
+      font-size: 1em; text-transform: none; text-decoration: none !important; speak: none;
+      content: "\2713"; transition: .3s; color: $b-switch-knob; opacity: 0;
+    }
+  }
+}
+`;
+
+// <HTML/>
+const HTML = t =>
+html`
+<label @keydown=${t.keydown} >
+  <input ${ref (h => t.checkboxtype = h)} type="checkbox" ?disabled=${t.readonly}
+         .checked=${!!t.value} @change=${e => t.emit_input_value (e.target.checked)} >
+  <span class="b-switchinput-trough"><span class="b-switchinput-knob"></span></span>
+</label>
+`; // use .checked - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
+
+// <SCRIPT/>
+const BOOL_ATTRIBUTE = { type: Boolean, reflect: true };  // sync attribute with property
+class BSwitchInput extends LitComponent {
+  render() { return HTML (this); }
+  createRenderRoot()
+  {
+    Util.add_style_sheet (this, STYLE_URL);
+    return this;
+  }
+  input_element = null;
+  static properties = {
+    value:	BOOL_ATTRIBUTE,
+    readonly:	{ type: Boolean, },
+  };
+  constructor() {
+    super();
+    this.checkboxtype = null;
+    this.value = false;
+    this.readonly = false;
+  }
+  updated (changed_props)
+  {
+    if (changed_props.has ('value')) {
+      // enforce constrain() on *outside* changes
+      const boolvalue = this.constrain (this.value);
+      if (this.value != boolvalue)
+	this.emit_input_value (boolvalue);
+    }
+  }
+  constrain (v)
+  {
+    if (typeof (v) === "string") {
+      if (v.length < 1 || v[0] == 'f' || v[0] == 'F' || v[0] == 'n' || v[0] == 'N')
+	return false;
+      return true;
+    }
+    return !!v;
+  }
+  emit_input_value (inputvalue)           // emit 'input' with constrained value
+  {
+    const boolvalue = this.constrain (inputvalue);
+    if (this.value != boolvalue) {
+      this.value = boolvalue; // becomes Event.target.value
+      this.dispatchEvent (new Event ('valuechange', { composed: true }));
+    }
+  }
+  keydown (event)
+  {
+    // allow selection changes with LEFT/RIGHT/UP/DOWN
+    if (event.keyCode == Util.KeyCode.LEFT || event.keyCode == Util.KeyCode.UP)
+      {
+	event.preventDefault();
+	event.stopPropagation();
+	this.checkboxtype.checked == false || this.checkboxtype.click();
+      }
+    else if (event.keyCode == Util.KeyCode.RIGHT || event.keyCode == Util.KeyCode.DOWN)
+      {
+	event.preventDefault();
+	event.stopPropagation();
+	this.checkboxtype.checked == true || this.checkboxtype.click();
+      }
+  }
+}
+customElements.define ('b-switchinput', BSwitchInput);
diff --git a/ui/b/textinput.js b/ui/b/textinput.js
index 05643ecd..eadc3f2b 100644
--- a/ui/b/textinput.js
+++ b/ui/b/textinput.js
@@ -15,7 +15,7 @@ import * as Util from '../util.js';
  * : Make this component non editable for the user.
  *
  * ## Events:
- * *input*
+ * *valuechange*
  * : This event is emitted whenever the value changes through user input or needs to be constrained.
  */
 
@@ -68,7 +68,7 @@ class BTextInput extends LitComponent {
     const constrainedvalue = this.constrain (this.input_element.value);
     if (constrainedvalue !== this.value) {
       this.value = constrainedvalue; // becomes Event.target.value
-      this.dispatchEvent (new Event ('input', { composed: true }));
+      this.dispatchEvent (new Event ('valuechange', { composed: true }));
     }
   }
   constrain (txt) {
diff --git a/ui/b/tracklist.js b/ui/b/tracklist.js
index f90ba3ca..0f12685b 100644
--- a/ui/b/tracklist.js
+++ b/ui/b/tracklist.js
@@ -54,7 +54,7 @@ $scroll-shadow-inset: 7px;
   position: absolute; top: 0; left: 0; height: 200%;
   width: calc(100% + 200px); margin-left: -100px;
   // add inner box-shadow to indicate scrolling borders
-  z-index: 999; pointer-events: none; user-select: none;
+  z-index: 1; pointer-events: none; user-select: none;
   box-shadow: black 0 0 $scroll-shadow-inset 0px inset;
 }
 `;
diff --git a/ui/little.js b/ui/little.js
index 6778990c..b81be1bd 100644
--- a/ui/little.js
+++ b/ui/little.js
@@ -4,7 +4,7 @@
 import * as Wrapper from './wrapper.js';
 
 // Export supported Lit constructs
-export { noChange, render, html, css, unsafeCSS } from 'lit';
+export { noChange, nothing, render, html, css, unsafeCSS } from 'lit';
 export { ref } from 'lit/directives/ref';
 export { live } from 'lit/directives/live';
 export { repeat } from 'lit/directives/repeat';
diff --git a/ui/startup.js b/ui/startup.js
index a2c61209..123c567e 100644
--- a/ui/startup.js
+++ b/ui/startup.js
@@ -2,6 +2,7 @@
 "use strict";
 
 import './browserified.js';	// provides require() and browserified modules
+import './b/basics.js';		// Register basic components first
 import { LitComponent, html, css, docs, lit_update_all } from '../little.js';
 
 // Global CONFIG
@@ -29,46 +30,6 @@ import { create_app } from './b/app.js';
 // load Script host
 import * as Script from './script.js';
 
-// Custom Elements
-class PushButton extends HTMLElement {
-  constructor() { super(); }
-}
-customElements.define ('push-button', PushButton);
-
-// == HFlex ==
-class HFlex extends LitComponent {
-  static styles = [ css`
-    :host { display: flex; flex-basis: auto; flex-direction: row;
-            flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
-    :host[inline] { display: inline-flex; }
-  ` ];
-  render() { return html`<slot></slot>`; }
-}
-customElements.define ('h-flex', HFlex);
-
-// == VFlex ==
-class VFlex extends LitComponent {
-  static styles = [ css`
-    :host { display: flex; flex-basis: auto; flex-direction: column;
-            flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
-    :host[inline] { display: inline-flex; }
-  ` ];
-  render() { return html`<slot></slot>`; }
-}
-customElements.define ('v-flex', VFlex);
-
-// == CGrid ==
-class CGrid extends LitComponent {
-  // Container for grid layouting, see: https://www.w3.org/TR/css-grid-1/#grid-containers
-  // visual cheatsheet: http://grid.malven.co/
-  static styles = [ css`
-    :host { display: grid; }
-    :host[inline] { display: inline-grid; }
-  ` ];
-  render() { return html`<slot></slot>`; }
-}
-customElements.define ('c-grid', CGrid);
-
 const Jsonapi = {
   jstrigger_counter: 100000 * (10 + (0 | 89 * Math.random())),
   jstrigger_map: {},
diff --git a/ui/types.d.ts b/ui/types.d.ts
index 07079656..ecb6e83e 100644
--- a/ui/types.d.ts
+++ b/ui/types.d.ts
@@ -9,7 +9,9 @@ declare global {
   var Ase: any;
   var Data: any;
   var Shell: any;
+  var CONFIG: any;
   var __DEV__: bool;
+  var debug: Function;
 }
 
 export {};
diff --git a/ui/util.js b/ui/util.js
index c0fae295..c4b9149e 100644
--- a/ui/util.js
+++ b/ui/util.js
@@ -2,6 +2,7 @@
 'use strict';
 
 import * as Kbd from './kbd.js';
+import * as Wrapper from './wrapper.js';
 
 // == Compat fixes ==
 class FallbackResizeObserver {
@@ -890,6 +891,11 @@ const empty_list = Object.freeze ([]);
  */
 export async function extend_property (prop, disconnector = undefined, augment = undefined) {
   prop = await prop;
+  if (prop.update_ && prop.fetch_) {
+    // already extended
+    await prop.update_();
+    return prop;
+  }
   const xprop = {
     hints_: prop.hints(),
     ident_: prop.identifier(),
@@ -904,7 +910,7 @@ export async function extend_property (prop, disconnector = undefined, augment =
     max_: prop.get_max(),
     step_: prop.get_step(),
     has_choices_: false,
-    value_: Vue.reactive ({ val: undefined, num: 0, text: '', choices: empty_list }),
+    value_: undefined, // define_reactive()
     apply_: prop.set_value.bind (prop),
     fetch_: () => xprop.is_numeric_ ? xprop.value_.num : xprop.value_.text,
     update_: async () => {
@@ -912,12 +918,15 @@ export async function extend_property (prop, disconnector = undefined, augment =
       const choices = xprop.has_choices_ ? await xprop.choices() : empty_list;
       const value_ = { val: await val, num: undefined, text: await text, choices };
       value_.num = (value_.val - xprop.min_) / (xprop.max_ - xprop.min_);
-      Object.assign (xprop.value_, value_);
+      xprop.value_ = value_;
       if (augment)
 	await augment (xprop);
     },
     __proto__: prop,
   };
+  Wrapper.define_reactive (xprop, {
+    value_: { val: undefined, num: 0, text: '', choices: empty_list },
+  });
   if (disconnector)
     disconnector (xprop.on ('notify', _ => xprop.update_()));
   await object_await_values (xprop);	// ensure xprop.hints_ is valid
@@ -1244,16 +1253,19 @@ export function setup_shield_element (shield, containee, closer, capture_escape
   return undo_shield;
 }
 
+/** Stop (immediate) propagation and prevent default handler for an event. */
+export function fullstop (event)
+{
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  return true;
+}
+
 /** Use capturing to swallow any `type` events until `timeout` has passed */
 export function swallow_event (type, timeout = 0) {
-  const preventandstop = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-    return true;
-  };
-  document.addEventListener (type, preventandstop, true);
-  setTimeout (() => document.removeEventListener (type, preventandstop, true), timeout);
+  document.addEventListener (type, fullstop, true);
+  setTimeout (() => document.removeEventListener (type, fullstop, true), timeout);
 }
 
 /// Prevent default or any propagation for a possible event.
diff --git a/x11test/play-notes.json b/x11test/play-notes.json
index 974a22be..efa14e2a 100644
--- a/x11test/play-notes.json
+++ b/x11test/play-notes.json
@@ -1,274 +1,290 @@
 {
-  "title": "Play Notes",
-  "steps": [
-    {
-      "type": "setViewport",
-      "width": 1356,
-      "height": 1052,
-      "deviceScaleFactor": 1,
-      "isMobile": false,
-      "hasTouch": false,
-      "isLandscape": false
-    },
-    {
-      "type": "navigate",
-      "url": "http://127.0.0.1:1777/",
-      "assertedEvents": [
+    "title": "Recording 6/27/2023 at 3:31:02 AM",
+    "steps": [
         {
-          "type": "navigation",
-          "url": "http://127.0.0.1:1777/",
-          "title": "Untitled – Anklang"
+            "type": "setViewport",
+            "width": 1459,
+            "height": 1052,
+            "deviceScaleFactor": 1,
+            "isMobile": false,
+            "hasTouch": false,
+            "isLandscape": false
+        },
+        {
+            "type": "navigate",
+            "url": "http://127.0.0.1:1777/",
+            "assertedEvents": [
+                {
+                    "type": "navigation",
+                    "url": "http://127.0.0.1:1777/",
+                    "title": "Untitled – Anklang"
+                }
+            ]
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "h-flex.b-menubar > b-buttonbar:nth-of-type(1) > push-button:nth-of-type(1)"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/b-buttonbar[1]/push-button[1]"
+                ],
+                [
+                    "pierce/h-flex.b-menubar > b-buttonbar:nth-of-type(1) > push-button:nth-of-type(1)"
+                ]
+            ],
+            "offsetY": 14.199999809265137,
+            "offsetX": 29.199999809265137
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "h-flex.b-menubar > b-buttonbar:nth-of-type(1) > push-button:nth-of-type(1)"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/b-buttonbar[1]/push-button[1]"
+                ],
+                [
+                    "pierce/h-flex.b-menubar > b-buttonbar:nth-of-type(1) > push-button:nth-of-type(1)"
+                ]
+            ],
+            "offsetY": 52.19999980926514,
+            "offsetX": 103.19999980926514
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "span:nth-of-type(1) > b-icon:nth-of-type(1) > i"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[3]/span[1]/b-icon[1]/i"
+                ],
+                [
+                    "pierce/span:nth-of-type(1) > b-icon:nth-of-type(1) > i"
+                ],
+                [
+                    "text/equalizer"
+                ]
+            ],
+            "offsetY": 16.824951171875,
+            "offsetX": 10.25
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-more",
+                    "v-flex"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[2]/h-flex/b-more",
+                    "xpath//v-flex"
+                ],
+                [
+                    "pierce/b-more",
+                    "pierce/v-flex"
+                ]
+            ],
+            "offsetY": 60.6875,
+            "offsetX": 5.6875
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "aria/BlepSynth"
+                ],
+                [
+                    "li:nth-of-type(4) > ul div"
+                ],
+                [
+                    "xpath///*[@id=\"g-devicepanelcmenu\"]/div/ul/li[4]/ul/li/span/div"
+                ],
+                [
+                    "pierce/li:nth-of-type(4) > ul div"
+                ]
+            ],
+            "offsetY": 10.64996337890625,
+            "offsetX": 40.69999694824219
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "span:nth-of-type(1) > b-icon:nth-of-type(2) > i"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[3]/span[1]/b-icon[2]/i"
+                ],
+                [
+                    "pierce/span:nth-of-type(1) > b-icon:nth-of-type(2) > i"
+                ],
+                [
+                    "text/queue_music"
+                ]
+            ],
+            "offsetY": 7.824951171875,
+            "offsetX": 6.4375
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "v-flex"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/v-flex"
+                ],
+                [
+                    "pierce/b-piano-roll",
+                    "pierce/v-flex"
+                ]
+            ],
+            "offsetY": 6.824981689453125,
+            "offsetX": 53
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "v-flex"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/v-flex"
+                ],
+                [
+                    "pierce/b-piano-roll",
+                    "pierce/v-flex"
+                ]
+            ],
+            "offsetY": 104.82498168945312,
+            "offsetX": 56
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "canvas.-notes_canvas"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/canvas[3]"
+                ],
+                [
+                    "pierce/canvas.-notes_canvas"
+                ]
+            ],
+            "offsetY": 314.4749755859375,
+            "offsetX": 21
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "canvas.-notes_canvas"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/canvas[3]"
+                ],
+                [
+                    "pierce/canvas.-notes_canvas"
+                ]
+            ],
+            "offsetY": 278.4749755859375,
+            "offsetX": 65
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "canvas.-notes_canvas"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/canvas[3]"
+                ],
+                [
+                    "pierce/canvas.-notes_canvas"
+                ]
+            ],
+            "offsetY": 249.4749755859375,
+            "offsetX": 107
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "b-piano-roll",
+                    "canvas.-notes_canvas"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
+                    "xpath//c-grid/canvas[3]"
+                ],
+                [
+                    "pierce/canvas.-notes_canvas"
+                ]
+            ],
+            "offsetY": 315.4749755859375,
+            "offsetX": 149
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "push-button:nth-of-type(4) i"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/h-flex/b-playcontrols/b-buttonbar/push-button[4]/b-icon/i"
+                ],
+                [
+                    "pierce/push-button:nth-of-type(4) i"
+                ]
+            ],
+            "offsetY": 19.399999618530273,
+            "offsetX": 4.125
+        },
+        {
+            "type": "click",
+            "target": "main",
+            "selectors": [
+                [
+                    "push-button:nth-of-type(3) > b-icon"
+                ],
+                [
+                    "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/h-flex/b-playcontrols/b-buttonbar/push-button[3]/b-icon"
+                ],
+                [
+                    "pierce/push-button:nth-of-type(3) > b-icon"
+                ]
+            ],
+            "offsetY": 16.399999618530273,
+            "offsetX": 2.71246337890625,
+            "duration": 2210
         }
-      ]
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-menubar.-row1.-col123 > span:nth-child(1) > push-button:nth-child(1) > div > b-icon:nth-child(2) > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/span[1]/push-button[1]/div/b-icon[2]/i"
-        ]
-      ],
-      "offsetY": 17,
-      "offsetX": 28
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#g-filemenu > b-menuitem:nth-child(1)",
-          "button > span.menulabel"
-        ],
-        [
-          "xpath///*[@id=\"g-filemenu\"]/b-menuitem[1]",
-          "xpath//button/span[1]"
-        ]
-      ],
-      "offsetY": 1,
-      "offsetX": 1
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-statusbar.-row9.-col123 > span:nth-child(1) > b-icon:nth-child(1) > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[3]/span[1]/b-icon[1]/i"
-        ]
-      ],
-      "offsetY": 1,
-      "offsetX": 8
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-devicepanel.-row3.-col2 > h-flex > b-more",
-          "v-flex"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[2]/h-flex/b-more",
-          "xpath//v-flex"
-        ]
-      ],
-      "offsetY": 76.78125,
-      "offsetX": 14.171875
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "aria/BlepSynth"
-        ],
-        [
-          "#g-devicepanelcmenu > div > ul > li:nth-child(4) > ul > li > span > div"
-        ],
-        [
-          "xpath///*[@id=\"g-devicepanelcmenu\"]/div/ul/li[4]/ul/li/span/div"
-        ]
-      ],
-      "offsetY": 13.796875,
-      "offsetX": 55
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-statusbar.-row9.-col123 > span:nth-child(1) > b-icon:nth-child(2) > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[3]/span[1]/b-icon[2]/i"
-        ]
-      ],
-      "offsetY": 8,
-      "offsetX": 17.21875
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "c-grid > v-flex > b-icon > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath//c-grid/v-flex/b-icon/i"
-        ]
-      ],
-      "offsetY": 4,
-      "offsetX": 4.1875
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "#g-pianotoolmenu > b-menuitem:nth-child(3)",
-          "button > span.kbdspan"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath///*[@id=\"g-pianotoolmenu\"]/b-menuitem[3]",
-          "xpath//button/span[2]"
-        ]
-      ],
-      "offsetY": 1,
-      "offsetX": 1
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "c-grid > canvas.-col2.-row2.-notes_canvas"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath//c-grid/canvas[3]"
-        ]
-      ],
-      "offsetY": 294.8125,
-      "offsetX": 21
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "c-grid > canvas.-col2.-row2.-notes_canvas"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath//c-grid/canvas[3]"
-        ]
-      ],
-      "offsetY": 238.8125,
-      "offsetX": 71
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "c-grid > canvas.-col2.-row2.-notes_canvas"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath//c-grid/canvas[3]"
-        ]
-      ],
-      "offsetY": 292.8125,
-      "offsetX": 107
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > b-piano-roll",
-          "c-grid > canvas.-col2.-row2.-notes_canvas"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/b-piano-roll",
-          "xpath//c-grid/canvas[3]"
-        ]
-      ],
-      "offsetY": 225.8125,
-      "offsetX": 148
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-menubar.-row1.-col123 > h-flex > span > push-button:nth-child(4) > b-icon > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/h-flex/span/push-button[4]/b-icon/i"
-        ]
-      ],
-      "offsetY": 21,
-      "offsetX": 14.46875,
-      "duration": 50
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-menubar.-row1.-col123"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]"
-        ]
-      ],
-      "offsetY": 2,
-      "offsetX": 349,
-      "duration": 50
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-menubar.-row1.-col123 > h-flex > span > push-button:nth-child(3) > b-icon > i"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]/h-flex/span/push-button[3]/b-icon/i"
-        ]
-      ],
-      "offsetY": 1,
-      "offsetX": 11.65625,
-      "duration": 2000
-    },
-    {
-      "type": "click",
-      "target": "main",
-      "selectors": [
-        [
-          "#b-app > c-grid > h-flex.b-menubar.-row1.-col123"
-        ],
-        [
-          "xpath///*[@id=\"b-app\"]/c-grid/h-flex[1]"
-        ]
-      ],
-      "offsetY": 23,
-      "offsetX": 284,
-      "duration": 50
-    }
-  ]
+    ]
 }