--- a/light9/fade/Light9EffectFader.ts	Fri Jun 02 16:19:56 2023 -0700
+++ b/light9/fade/Light9EffectFader.ts	Fri Jun 02 17:34:24 2023 -0700
@@ -1,3 +1,4 @@
+import debug from "debug";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { NamedNode, Quad } from "n3";
@@ -8,6 +9,8 @@
 import { Literal } from "n3";
 export { Light9Fader } from "./Light9Fader";
 
+const log = debug("efffader")
+
 //////////////////////////////////////
 const RETURN_URI = new NamedNode("");
 const RETURN_FLOAT = 1;
@@ -36,7 +39,7 @@
   baseName: string,
   pred2: NamedNode,
   newObjLiteral: Literal
-) {}
+) { }
 
 function maybeUriValue(graph: SyncedGraph, s: NamedNode, p: NamedNode): NamedNode | undefined {
   try {
@@ -62,7 +65,7 @@
 
 //////////////////////////////////////
 class EffectFader {
-  constructor(public uri: NamedNode) {}
+  constructor(public uri: NamedNode) { }
   column: string = "unset";
   effect?: NamedNode;
   effectAttr?: NamedNode; // :strength
@@ -90,6 +93,7 @@
       return html`...`;
     }
     return html`
+      <div><resource-display .uri=${this.uri}></resource-display>
       <light9-fader .value=${this.conf.value} @change=${this.onSliderInput}></light9-fader>
       <div>${this.conf.value.toPrecision(3)}</div>
       <div>effect <edit-choice nounlink .uri=${this.conf.effect} @edited=${this.onEffectChange}></edit-choice></div>
@@ -130,41 +134,38 @@
   }
 
   private compileValue(graph: SyncedGraph, conf: EffectFader) {
-    //  external graph change -> conf.value
+    // external graph change -> conf.value
     const U = graph.U();
     conf.value = get2Step(RETURN_FLOAT, graph, this.uri, U(":setting"), U(":value"));
+    // since conf attrs aren't watched as property:
+    this.requestUpdate()
   }
 
   onSliderInput(ev: CustomEvent) {
     // slider user input -> graph
+    if (this.conf === undefined) return;
+    this.conf.value = ev.detail.value
+    this.writeValueToGraph()
+  }
+
+  writeValueToGraph() {
+    // this.value -> graph
     if (this.graph === undefined) {
       return;
     }
     const U = this.graph.U();
-    // const prev = this.value;
-    // const v: number = ev.detail.value;
-    // this.value = parseFloat(v.toPrecision(3)); // rewrite pls
-    // if (this.value == prev) {
-    //   return;
-    // }
-    // if (!this.setting) {
-    //   throw new Error("can't make new settings yet");
-    // }
-
     if (this.conf === undefined) {
       return;
     }
-    let patch = new Patch([], []);
-    let settingNode: NamedNode;
-    const valueTerm = this.graph.LiteralRoundedFloat(ev.detail.value);
-    try {
-      settingNode = this.graph.uriValue(this.uri, U(":setting"));
-    } catch (e) {
-      settingNode = this.graph.nextNumberedResource(U(":fadeset"));
-      patch = patch.update(new Patch([], [new Quad(this.conf.uri, U(":setting"), settingNode, this.ctx)]));
+    if (this.conf.value === undefined) {
+      log(`value of ${this.uri} is undefined`)
+      return;
     }
-    patch = patch.update(this.graph.getObjectPatch(settingNode, this.graph.Uri(":value"), valueTerm, this.ctx));
-    this.graph.applyAndSendPatch(patch);
+    log('writeValueToGraph', this.conf.value)
+    const valueTerm = this.graph.LiteralRoundedFloat(this.conf.value);
+    const settingNode = this.graph.uriValue(this.uri, U(":setting"));
+    this.graph.patchObject(settingNode, this.graph.Uri(":value"), valueTerm, this.ctx);
+
   }
 
   onEffectChange(ev: CustomEvent) {

--- a/light9/fade/Light9Fader.ts	Fri Jun 02 16:19:56 2023 -0700
+++ b/light9/fade/Light9Fader.ts	Fri Jun 02 17:34:24 2023 -0700
@@ -46,10 +46,13 @@
   protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.update(changedProperties);
     if (changedProperties.has("value")) {
-      this.value= clamp(this.value, 0, 1)
-      this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+      
     }
   }
+  valueChangedFromUi() {
+    this.value= clamp(this.value, 0, 1)
+    this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+  }
 
   protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.updated(_changedProperties);
@@ -77,6 +80,7 @@
       ev.stopPropagation();
       if (ev.buttons == 1) {
         this.value = this.sliderValue(ev.offsetY);
+        this.valueChangedFromUi()
         this.drag = new Drag(ev.clientY, this.value);
       } else if (ev.buttons == 2) {
         // RMB in trough
@@ -91,6 +95,7 @@
     this.addEventListener("wheel", (ev: WheelEvent) => {
       ev.preventDefault();
       this.value += ev.deltaY / 120 * -.05;
+      this.valueChangedFromUi()
     });
 
     const maybeDrag = (ev: MouseEvent) => {
@@ -116,10 +121,12 @@
       // unmute
       this.value = this.unmutedValue;
     }
+    this.valueChangedFromUi()
   }
   onMouseDrag(dy: number) {
     if (this.drag === undefined) throw "unexpected";
     this.value = this.drag.startDragValue - dy / this.troughHeight;
+    this.valueChangedFromUi()
   }
 
   onMouseUpAnywhere() {