@manyducks.co/dolla 0.78.1 → 1.0.0

package/lib/index.js

@@ -286,8 +286,20 @@ var DebugHub = class {
         if (hubOptions.info === false || isString(hubOptions.info) && hubOptions.info !== hubOptions.mode || !match(name)) {
           return noOp;
         } else {
-          const label = `%c${name}`;
-          return _console.info.bind(_console, label, `color:${hash(label)};font-weight:bold`);
+          let label = `%c${name}`;
+          if (options.id) {
+            label += ` %c[uid: %c${options.id}%c]`;
+          } else {
+            label += `%c%c%c`;
+          }
+          return _console.info.bind(
+            _console,
+            label,
+            `color:${hash(label)};font-weight:bold`,
+            `color:#777`,
+            `color:#aaa`,
+            `color:#777`
+          );
         }
       },
       get log() {
@@ -295,8 +307,20 @@ var DebugHub = class {
         if (hubOptions.log === false || isString(hubOptions.log) && hubOptions.log !== hubOptions.mode || !match(name)) {
           return noOp;
         } else {
-          const label = `%c${name}`;
-          return _console.log.bind(_console, label, `color:${hash(label)};font-weight:bold`);
+          let label = `%c${name}`;
+          if (options.id) {
+            label += ` %c[uid: %c${options.id}%c]`;
+          } else {
+            label += `%c%c%c`;
+          }
+          return _console.log.bind(
+            _console,
+            label,
+            `color:${hash(label)};font-weight:bold`,
+            `color:#777`,
+            `color:#aaa`,
+            `color:#777`
+          );
         }
       },
       get warn() {
@@ -304,8 +328,20 @@ var DebugHub = class {
         if (hubOptions.warn === false || isString(hubOptions.warn) && hubOptions.warn !== hubOptions.mode || !match(name)) {
           return noOp;
         } else {
-          const label = `%c${name}`;
-          return _console.warn.bind(_console, label, `color:${hash(label)};font-weight:bold`);
+          let label = `%c${name}`;
+          if (options.id) {
+            label += ` %c[uid: %c${options.id}%c]`;
+          } else {
+            label += `%c%c%c`;
+          }
+          return _console.warn.bind(
+            _console,
+            label,
+            `color:${hash(label)};font-weight:bold`,
+            `color:#777`,
+            `color:#aaa`,
+            `color:#777`
+          );
         }
       },
       get error() {
@@ -313,8 +349,20 @@ var DebugHub = class {
         if (hubOptions.error === false || isString(hubOptions.error) && hubOptions.error !== hubOptions.mode || !match(name)) {
           return noOp;
         } else {
-          const label = `%c${name}`;
-          return _console.error.bind(_console, label, `color:${hash(label)};font-weight:bold`);
+          let label = `%c${name}`;
+          if (options.id) {
+            label += ` %c[uid: %c${options.id}%c]`;
+          } else {
+            label += `%c%c%c`;
+          }
+          return _console.error.bind(
+            _console,
+            label,
+            `color:${hash(label)};font-weight:bold`,
+            `color:#777`,
+            `color:#aaa`,
+            `color:#777`
+          );
         }
       }
     };
@@ -385,6 +433,106 @@ function makeMatcher(pattern) {
   };
 }
 
+// src/nodes/cond.ts
+var Conditional = class {
+  node;
+  endNode;
+  $predicate;
+  stopCallback;
+  thenContent;
+  elseContent;
+  connectedContent = [];
+  appContext;
+  elementContext;
+  initialUpdateHappened = false;
+  previousValue;
+  constructor(config) {
+    this.$predicate = config.$predicate;
+    this.thenContent = config.thenContent ? toMarkup(config.thenContent) : void 0;
+    this.elseContent = config.elseContent ? toMarkup(config.elseContent) : void 0;
+    this.appContext = config.appContext;
+    this.elementContext = config.elementContext;
+    if (this.appContext.mode === "development") {
+      this.node = document.createComment("Conditional");
+      this.endNode = document.createComment("/Conditional");
+    } else {
+      this.node = document.createTextNode("");
+      this.endNode = document.createTextNode("");
+    }
+  }
+  get connected() {
+    return this.node.parentNode != null;
+  }
+  connect(parent2, after) {
+    if (!this.connected) {
+      parent2.insertBefore(this.node, after?.nextSibling ?? null);
+      if (this.appContext.mode === "development") {
+        parent2.insertBefore(this.endNode, this.node.nextSibling);
+      }
+      this.stopCallback = this.$predicate.watch((value) => {
+        if (!this.initialUpdateHappened || value && !this.previousValue || !value && this.previousValue) {
+          this.update(value);
+          this.initialUpdateHappened = true;
+          this.previousValue = value;
+        }
+      });
+    }
+  }
+  disconnect() {
+    if (this.stopCallback) {
+      this.stopCallback();
+      this.stopCallback = void 0;
+    }
+    for (const handle of this.connectedContent) {
+      handle.disconnect();
+    }
+    this.connectedContent = [];
+    if (this.connected) {
+      this.node.parentNode?.removeChild(this.node);
+      this.endNode.parentNode?.removeChild(this.endNode);
+    }
+  }
+  update(value) {
+    for (const handle of this.connectedContent) {
+      handle.disconnect();
+    }
+    this.connectedContent = [];
+    if (this.node.parentNode == null) {
+      return;
+    }
+    if (value && this.thenContent) {
+      this.connectedContent = renderMarkupToDOM(this.thenContent, this);
+    } else if (!value && this.elseContent) {
+      this.connectedContent = renderMarkupToDOM(this.elseContent, this);
+    }
+    for (let i = 0; i < this.connectedContent.length; i++) {
+      const handle = this.connectedContent[i];
+      const previous = this.connectedContent[i - 1]?.node ?? this.node;
+      handle.connect(this.node.parentNode, previous);
+    }
+    if (this.appContext.mode === "development") {
+      this.node.textContent = `Conditional (${value ? "truthy" : "falsy"})`;
+    }
+  }
+  async setChildren(children) {
+  }
+};
+
+// node_modules/nanoid/index.browser.js
+var nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+  byte &= 63;
+  if (byte < 36) {
+    id += byte.toString(36);
+  } else if (byte < 62) {
+    id += (byte - 26).toString(36).toUpperCase();
+  } else if (byte > 62) {
+    id += "-";
+  } else {
+    id += "_";
+  }
+  return id;
+}, "");
+
 // src/utils.ts
 function isPlainObject(value) {
   return value != null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.getPrototypeOf({});
@@ -393,6 +541,9 @@ function deepEqual(one, two) {
   if (one === two) {
     return true;
   }
+  if (isSignal(one) || isSignal(two)) {
+    return false;
+  }
   if (isPlainObject(one) && isPlainObject(two)) {
     const keysOne = Object.keys(one);
     const keysTwo = Object.keys(two);
@@ -449,333 +600,282 @@ function omit(keys, object) {
   return process2(object);
 }
 
-// src/state.ts
-var UNOBSERVED = Symbol("Unobserved");
-var OBSERVE = Symbol("Observe");
-function isReadable(value) {
-  return value != null && typeof value === "object" && typeof value[OBSERVE] === "function" && typeof value.get === "function";
-}
-function isWritable(value) {
-  return isReadable(value) && typeof value.set === "function" && typeof value.update === "function";
-}
-function $$(initialValue, config) {
-  if (config) {
-    return proxy(initialValue, config);
-  } else {
-    return writable(initialValue);
+// src/signals.ts
+function isSignal(value) {
+  if (value == null || typeof value !== "object") {
+    return false;
   }
+  if (typeof value["get"] !== "function") {
+    return false;
+  }
+  if (typeof value["watch"] !== "function") {
+    return false;
+  }
+  return true;
 }
-function $(...args) {
-  if (args.length > 1) {
-    const callback = args.pop();
-    const readables = args.flat().map(readable);
-    return computed(...readables, callback);
-  } else {
-    return readable(args[0]);
+function isSettableSignal(value) {
+  if (value == null || typeof value !== "object") {
+    return false;
+  }
+  if (typeof value["set"] !== "function") {
+    return false;
+  }
+  if (typeof value["get"] !== "function") {
+    return false;
+  }
+  if (typeof value["watch"] !== "function") {
+    return false;
   }
+  return true;
 }
-function readable(value) {
-  if (isWritable(value)) {
-    return {
-      get: value.get,
-      [OBSERVE]: value[OBSERVE]
-    };
+function designalify(value) {
+  if (isSignal(value)) {
+    return value.get();
+  } else {
+    return value;
   }
-  if (isReadable(value)) {
+}
+function signalify(value) {
+  if (isSignal(value)) {
     return value;
+  } else {
+    return createStaticSignal(value);
   }
+}
+function signal(initialValue, options) {
+  return createSignal(initialValue, options);
+}
+signal.settable = createSettableSignal;
+signal.toSettable = createSettableSignalFrom;
+signal.createSetter = createSignalSetter;
+function createSettableSignal(initialValue, options) {
+  const [$value, setValue] = signal(initialValue, options);
   return {
-    get: () => value,
-    [OBSERVE]: (callback) => {
-      callback(value);
-      return function stop() {
-      };
-    }
+    get: $value.get,
+    watch: $value.watch,
+    set: setValue
   };
 }
-function computed(...args) {
-  const compute = args.pop();
-  if (typeof compute !== "function") {
-    throw new TypeError(`Final argument must be a function. Got ${typeOf(compute)}: ${compute}`);
-  }
-  if (args.length < 1) {
-    throw new Error(`Must pass at least one value before the callback function.`);
-  }
-  const readables = args;
-  const observers = [];
-  let stopCallbacks = [];
-  let isObserving = false;
-  let observedValues = [];
-  let valuesChanged = [];
-  let latestComputedValue = UNOBSERVED;
-  let computedStopCallback;
-  function updateValue() {
-    if (!valuesChanged.some((x) => x)) {
-      return;
-    }
-    const computedValue = compute(...observedValues);
-    if (isReadable(computedValue)) {
-      if (computedStopCallback) {
-        computedStopCallback();
-      }
-      computedStopCallback = computedValue[OBSERVE]((current) => {
-        latestComputedValue = current;
-        for (const callback of observers) {
-          callback(current);
-        }
-      });
-    } else if (!deepEqual(computedValue, latestComputedValue)) {
-      if (computedStopCallback) {
-        computedStopCallback();
-        computedStopCallback = void 0;
-      }
-      latestComputedValue = computedValue;
-      for (const callback of observers) {
-        callback(computedValue);
-      }
-    }
-    for (let i = 0; i < observedValues.length; i++) {
-      valuesChanged[i] = false;
-    }
-  }
-  function startObserving() {
-    if (isObserving)
-      return;
-    for (let i = 0; i < readables.length; i++) {
-      const readable2 = readables[i];
-      stopCallbacks.push(
-        observe(readable2, (value) => {
-          if (!deepEqual(observedValues[i], value)) {
-            observedValues[i] = value;
-            valuesChanged[i] = true;
-            if (isObserving) {
-              updateValue();
-            }
-          }
-        })
-      );
-    }
-    observedValues = readables.map((x) => x.get());
-    for (let i = 0; i < observedValues.length; i++) {
-      valuesChanged[i] = true;
-    }
-    isObserving = true;
-    updateValue();
-  }
-  function stopObserving() {
-    isObserving = false;
-    for (const callback of stopCallbacks) {
-      callback();
+function createSettableSignalFrom(signal2, setter) {
+  return {
+    get: signal2.get,
+    watch: signal2.watch,
+    set: setter
+  };
+}
+function createSignalSetter(signal2, callback) {
+  return function setValue(nextOrCallback) {
+    const previous = signal2.get();
+    let next;
+    if (typeof nextOrCallback === "function") {
+      next = nextOrCallback(previous);
+    } else {
+      next = nextOrCallback;
     }
-    stopCallbacks = [];
-  }
+    callback(next, previous);
+  };
+}
+function createStaticSignal(value) {
   return {
-    get: () => {
-      if (isObserving) {
-        return latestComputedValue;
-      } else {
-        return compute(...readables.map((x) => x.get()));
-      }
+    get() {
+      return value;
     },
-    [OBSERVE]: (callback) => {
-      if (!isObserving) {
-        startObserving();
+    watch(callback, options = {}) {
+      if (!options.lazy) {
+        callback(value);
       }
-      callback(latestComputedValue);
-      observers.push(callback);
       return function stop() {
-        observers.splice(observers.indexOf(callback), 1);
-        if (observers.length === 0) {
-          stopObserving();
-        }
       };
     }
   };
 }
-function writable(value) {
-  if (isWritable(value)) {
-    return value;
+function createSignal(initialValue, options) {
+  let currentValue = initialValue;
+  let watchers = [];
+  function notify() {
+    for (const watcher of watchers) {
+      watcher(currentValue);
+    }
   }
-  if (isReadable(value)) {
-    throw new TypeError(`Failed to convert Readable into a Writable; can't add write access to a read-only value.`);
+  function equal(next, previous) {
+    if (options?.equality) {
+      return options.equality(next, previous);
+    } else {
+      return deepEqual(next, previous);
+    }
   }
-  const observers = [];
-  let currentValue = value;
-  return {
-    // ----- Readable ----- //
-    get: () => currentValue,
-    [OBSERVE]: (callback) => {
-      observers.push(callback);
-      function stop() {
-        observers.splice(observers.indexOf(callback), 1);
-      }
-      callback(currentValue);
-      return stop;
-    },
-    // ----- Writable ----- //
-    set: (newValue) => {
-      if (!deepEqual(currentValue, newValue)) {
-        const previousValue = currentValue;
-        currentValue = newValue;
-        for (const callback of observers) {
-          callback(currentValue, previousValue);
-        }
-      }
+  const $value = {
+    get() {
+      return designalify(currentValue);
     },
-    update: (callback) => {
-      const newValue = callback(currentValue);
-      if (!deepEqual(currentValue, newValue)) {
-        const previousValue = currentValue;
-        currentValue = newValue;
-        for (const callback2 of observers) {
-          callback2(currentValue, previousValue);
-        }
+    watch(callback, options2) {
+      watchers.push(callback);
+      if (!options2?.lazy) {
+        callback($value.get());
       }
+      return function stop() {
+        watchers.splice(watchers.indexOf(callback), 1);
+      };
     }
   };
-}
-function proxy(source, config) {
-  if (!isReadable(source)) {
-    throw new TypeError(`Proxy source must be a Readable.`);
-  }
-  return {
-    // ----- Readable ----- //
-    get: () => config.get(),
-    [OBSERVE]: (callback) => {
-      let lastComputedValue = UNOBSERVED;
-      return observe(source, (_) => {
-        const computedValue = config.get();
-        if (!deepEqual(computedValue, lastComputedValue)) {
-          callback(computedValue);
-          lastComputedValue = computedValue;
-        }
-      });
-    },
-    // ----- Writable ----- //
-    set: (value) => {
-      config.set(value);
-    },
-    update: (callback) => {
-      config.set(callback(config.get()));
+  function setValue(next) {
+    let value;
+    if (typeof next === "function") {
+      value = next(currentValue);
+    } else {
+      value = next;
+    }
+    if (!equal(value, currentValue)) {
+      currentValue = value;
+      notify();
     }
-  };
-}
-function observe(...args) {
-  const callback = args.pop();
-  const readables = args.flat().map(readable);
-  if (readables.length === 0) {
-    throw new TypeError(`Expected at least one readable.`);
-  }
-  if (readables.length > 1) {
-    return computed(...readables, callback)[OBSERVE](() => null);
-  } else {
-    return readables[0][OBSERVE](callback);
   }
+  return [$value, setValue];
 }
-function unwrap(value) {
-  if (isReadable(value)) {
-    return value.get();
-  }
-  return value;
-}
-
-// src/nodes/cond.ts
-var Conditional = class {
-  node;
-  endNode;
-  $predicate;
-  stopCallback;
-  thenContent;
-  elseContent;
-  connectedContent = [];
-  appContext;
-  elementContext;
-  initialUpdateHappened = false;
-  constructor(config) {
-    this.$predicate = config.$predicate;
-    this.thenContent = config.thenContent ? toMarkup(config.thenContent) : void 0;
-    this.elseContent = config.elseContent ? toMarkup(config.elseContent) : void 0;
-    this.appContext = config.appContext;
-    this.elementContext = config.elementContext;
-    if (this.appContext.mode === "development") {
-      this.node = document.createComment("Conditional");
-      this.endNode = document.createComment("/Conditional");
+var EMPTY = Symbol("EMPTY");
+function derive(signals, fn, options) {
+  signals = signals.map((s) => {
+    if (isSignal(s)) {
+      return s;
     } else {
-      this.node = document.createTextNode("");
-      this.endNode = document.createTextNode("");
+      return createStaticSignal(s);
+    }
+  });
+  let previousSourceValues = new Array(signals.length).fill(EMPTY, 0, signals.length);
+  let currentValue;
+  let watchers = [];
+  let watching = false;
+  let stoppers = [];
+  let stopWatchingCurrentValue;
+  let rawCurrentValue;
+  function notify(value = getCurrentValue()) {
+    for (const watcher of watchers) {
+      watcher(value);
+    }
+  }
+  function equal(next, previous) {
+    if (options?.equality) {
+      return options.equality(next, previous);
+    } else {
+      return deepEqual(next, previous);
     }
   }
-  get connected() {
-    return this.node.parentNode != null;
-  }
-  connect(parent2, after) {
-    if (!this.connected) {
-      parent2.insertBefore(this.node, after?.nextSibling ?? null);
-      if (this.appContext.mode === "development") {
-        parent2.insertBefore(this.endNode, this.node.nextSibling);
+  function update() {
+    const sourceValues = signals.map((s) => s.get());
+    for (let i = 0; i < signals.length; i++) {
+      if (!equal(sourceValues[i], previousSourceValues[i])) {
+        setCurrentValue(fn(...sourceValues));
+        previousSourceValues = sourceValues;
+        break;
       }
-      this.stopCallback = observe(this.$predicate, (current, previous) => {
-        if (!this.initialUpdateHappened || current && !previous || !current && previous) {
-          this.update(current);
-          this.initialUpdateHappened = true;
-        }
-      });
     }
   }
-  disconnect() {
-    if (this.stopCallback) {
-      this.stopCallback();
-      this.stopCallback = void 0;
+  function getCurrentValue() {
+    if (!watching) {
+      update();
     }
-    for (const handle of this.connectedContent) {
-      handle.disconnect();
+    rawCurrentValue = designalify(currentValue);
+    return rawCurrentValue;
+  }
+  function setCurrentValue(value) {
+    if (value === currentValue) {
+      return;
     }
-    this.connectedContent = [];
-    if (this.connected) {
-      this.node.parentNode?.removeChild(this.node);
-      this.endNode.parentNode?.removeChild(this.endNode);
+    if (stopWatchingCurrentValue) {
+      stopWatchingCurrentValue();
+      stopWatchingCurrentValue = void 0;
+    }
+    currentValue = value;
+    rawCurrentValue = designalify(value);
+    if (isSignal(value)) {
+      if (watching) {
+        stopWatchingCurrentValue = value.watch((current) => {
+          const raw = designalify(current);
+          if (!equal(raw, rawCurrentValue)) {
+            rawCurrentValue = raw;
+            notify(raw);
+          }
+        });
+      }
     }
   }
-  update(value) {
-    for (const handle of this.connectedContent) {
-      handle.disconnect();
+  function startWatchingSources() {
+    let startingSourceValues = [...previousSourceValues];
+    for (let i = 0; i < signals.length; i++) {
+      const signal2 = signals[i];
+      stoppers.push(
+        signal2.watch((next) => {
+          const previous = previousSourceValues[i];
+          previousSourceValues[i] = next;
+          if (watching && !equal(next, previous)) {
+            setCurrentValue(fn(...previousSourceValues));
+            notify(designalify(currentValue));
+          }
+        })
+      );
     }
-    this.connectedContent = [];
-    if (this.node.parentNode == null) {
-      return;
+    watching = true;
+    for (let i = 0; i < signals.length; i++) {
+      if (!equal(previousSourceValues[i], startingSourceValues[i])) {
+        setCurrentValue(fn(...previousSourceValues));
+        notify(designalify(currentValue));
+        break;
+      }
     }
-    if (value && this.thenContent) {
-      this.connectedContent = renderMarkupToDOM(this.thenContent, this);
-    } else if (!value && this.elseContent) {
-      this.connectedContent = renderMarkupToDOM(this.elseContent, this);
+  }
+  function stopWatchingSources() {
+    for (const stop of stoppers) {
+      stop();
     }
-    for (let i = 0; i < this.connectedContent.length; i++) {
-      const handle = this.connectedContent[i];
-      const previous = this.connectedContent[i - 1]?.node ?? this.node;
-      handle.connect(this.node.parentNode, previous);
+    stoppers = [];
+    if (stopWatchingCurrentValue) {
+      stopWatchingCurrentValue();
+      stopWatchingCurrentValue = void 0;
     }
-    if (this.appContext.mode === "development") {
-      this.node.textContent = `Conditional (${value ? "truthy" : "falsy"})`;
+    watching = false;
+  }
+  const $value = {
+    get() {
+      return getCurrentValue();
+    },
+    watch(callback, options2) {
+      if (!watching) {
+        startWatchingSources();
+      }
+      watchers.push(callback);
+      if (!options2?.lazy) {
+        callback(getCurrentValue());
+      }
+      return function stop() {
+        watchers.splice(watchers.indexOf(callback), 1);
+        if (watching && watchers.length === 0) {
+          stopWatchingSources();
+        }
+      };
     }
+  };
+  return $value;
+}
+function watch(signals, fn) {
+  if (signals.length === 0) {
+    throw new TypeError(`Expected at least one signal.`);
   }
-  async setChildren(children) {
+  if (signals.some((s) => !isSignal(s))) {
+    throw new TypeError(`All values must be signals`);
   }
-};
-
-// node_modules/nanoid/index.browser.js
-var nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
-  byte &= 63;
-  if (byte < 36) {
-    id += byte.toString(36);
-  } else if (byte < 62) {
-    id += (byte - 26).toString(36).toUpperCase();
-  } else if (byte > 62) {
-    id += "-";
+  signals = signals.map((s) => {
+    if (isSignal(s)) {
+      return s;
+    } else {
+      return createStaticSignal(s);
+    }
+  });
+  if (signals.length > 1) {
+    return derive(signals, fn).watch(() => null);
   } else {
-    id += "_";
+    return signals[0].watch(fn);
   }
-  return id;
-}, "");
+}
 
 // src/nodes/html.ts
 var isCamelCaseEventName = (key) => /^on[A-Z]/.test(key);
@@ -806,12 +906,10 @@ var HTML = class {
       this.node.dataset.uniqueId = this.uniqueId;
     }
     if (props.ref) {
-      if (isWritable(props.ref)) {
-        props.ref.set(this.node);
-      } else if (isFunction(props.ref)) {
-        props.ref(this.node);
+      if (isRef(props.ref)) {
+        props.ref.node = this.node;
       } else {
-        throw new Error("Expected an instance of Ref. Got: " + props.ref);
+        throw new Error("Expected ref to be a Ref object. Got: " + props.ref);
       }
     }
     this.props = {
@@ -878,11 +976,11 @@ var HTML = class {
   applyProps(element, props) {
     const render = this.appContext.stores.get("render").instance?.exports;
     const attachProp = (value, callback, updateKey) => {
-      if (isReadable(value)) {
+      if (isSignal(value)) {
         this.stopCallbacks.push(
-          observe(value, (value2) => {
+          value.watch((current) => {
             render.update(() => {
-              callback(value2);
+              callback(current);
             }, updateKey);
           })
         );
@@ -912,22 +1010,37 @@ var HTML = class {
       } else if (key === "eventListeners") {
         const values = value;
         for (const name in values) {
-          const listener = isReadable(value) ? (e) => value.get()(e) : value;
+          const listener = isSignal(value) ? (e) => value.get()(e) : value;
           element.addEventListener(name, listener);
           this.stopCallbacks.push(() => {
             element.removeEventListener(name, listener);
           });
         }
+      } else if (key === "onClickOutside" || key === "onclickoutside") {
+        const listener = (e) => {
+          if (this.canClickAway && !element.contains(e.target)) {
+            if (isSignal(value)) {
+              value.get()(e);
+            } else {
+              value(e);
+            }
+          }
+        };
+        const options = { capture: true };
+        window.addEventListener("click", listener, options);
+        this.stopCallbacks.push(() => {
+          window.removeEventListener("click", listener, options);
+        });
       } else if (key === "$$value") {
-        if (!isWritable(value)) {
-          throw new TypeError(`$$value property must be a Writable. Got: ${value} (${typeof value})`);
+        if (!isSettableSignal(value)) {
+          throw new TypeError(`$$value attribute must be a settable signal. Got: ${value}`);
         }
         attachProp(
           value,
           (current) => {
             element.value = String(current);
           },
-          this.getUpdateKey("prop", "value")
+          this.getUpdateKey("attr", "value")
         );
         const listener = (e) => {
           const updated = toTypeOf(value.get(), e.currentTarget.value);
@@ -937,24 +1050,9 @@ var HTML = class {
         this.stopCallbacks.push(() => {
           element.removeEventListener("input", listener);
         });
-      } else if (key === "onClickOutside" || key === "onclickoutside") {
-        const listener = (e) => {
-          if (this.canClickAway && !element.contains(e.target)) {
-            if (isReadable(value)) {
-              value.get()(e);
-            } else {
-              value(e);
-            }
-          }
-        };
-        const options = { capture: true };
-        window.addEventListener("click", listener, options);
-        this.stopCallbacks.push(() => {
-          window.removeEventListener("click", listener, options);
-        });
       } else if (isCamelCaseEventName(key)) {
         const eventName = key.slice(2).toLowerCase();
-        const listener = isReadable(value) ? (e) => value.get()(e) : value;
+        const listener = isSignal(value) ? (e) => value.get()(e) : value;
         element.addEventListener(eventName, listener);
         this.stopCallbacks.push(() => {
           element.removeEventListener(eventName, listener);
@@ -1075,9 +1173,9 @@ var HTML = class {
       element.style.cssText = "";
     } else if (typeof styles === "string") {
       element.style.cssText = styles;
-    } else if (isReadable(styles)) {
+    } else if (isSignal(styles)) {
       let unapply;
-      const stop = observe(styles, (current) => {
+      const stop = styles.watch((current) => {
         render.update(
           () => {
             if (isFunction(unapply)) {
@@ -1096,8 +1194,8 @@ var HTML = class {
       for (const key in styles) {
         const value = styles[key];
         const setProperty = key.startsWith("--") ? (key2, value2) => value2 == null ? element.style.removeProperty(key2) : element.style.setProperty(key2, value2) : (key2, value2) => element.style[key2] = value2 ?? "";
-        if (isReadable(value)) {
-          const stop = observe(value, (current) => {
+        if (isSignal(value)) {
+          const stop = value.watch((current) => {
             render.update(
               () => {
                 if (current != null) {
@@ -1132,9 +1230,9 @@ var HTML = class {
   applyClasses(element, classes, stopCallbacks) {
     const render = this.appContext.stores.get("render").instance?.exports;
     const classStopCallbacks = [];
-    if (isReadable(classes)) {
+    if (isSignal(classes)) {
       let unapply;
-      const stop = observe(classes, (current) => {
+      const stop = classes.watch((current) => {
         render.update(
           () => {
             if (isFunction(unapply)) {
@@ -1152,8 +1250,8 @@ var HTML = class {
       const mapped = getClassMap(classes);
       for (const name in mapped) {
         const value = mapped[name];
-        if (isReadable(value)) {
-          const stop = observe(value, (current) => {
+        if (isSignal(value)) {
+          const stop = value.watch((current) => {
             render.update(() => {
               if (current) {
                 element.classList.add(name);
@@ -1220,7 +1318,7 @@ var Observer = class {
   get connected() {
     return this.node.parentNode != null;
   }
-  constructor({ readables, renderFn, appContext, elementContext }) {
+  constructor({ signals, renderFn, appContext, elementContext }) {
     this.appContext = appContext;
     this.elementContext = elementContext;
     this.renderFn = renderFn;
@@ -1231,7 +1329,7 @@ var Observer = class {
       start: () => {
         if (_stop != null)
           return;
-        _stop = observe(readables, (...values) => {
+        _stop = watch(signals, (...values) => {
           const rendered = this.renderFn(...values);
           if (!isRenderable(rendered)) {
             console.error(rendered);
@@ -1330,7 +1428,7 @@ var Outlet = class {
   connect(parent2, after) {
     if (!this.connected) {
       parent2.insertBefore(this.node, after?.nextSibling ?? null);
-      this.stopCallback = observe(this.$children, (children) => {
+      this.stopCallback = this.$children.watch((children) => {
         this.update(children);
       });
     }
@@ -1417,7 +1515,9 @@ function initView(config) {
     stores: /* @__PURE__ */ new Map(),
     parent: config.elementContext
   };
-  const $$children = $$(renderMarkupToDOM(config.children ?? [], { appContext, elementContext }));
+  const [$children, setChildren] = signal(
+    renderMarkupToDOM(config.children ?? [], { appContext, elementContext })
+  );
   let isConnected = false;
   const stopObserverCallbacks = [];
   const connectedCallbacks = [];
@@ -1426,7 +1526,7 @@ function initView(config) {
   const beforeDisconnectCallbacks = [];
   const uniqueId = nanoid();
   const ctx = {
-    get uniqueId() {
+    get uid() {
       return uniqueId;
     },
     name: config.view.name ?? "anonymous",
@@ -1473,28 +1573,47 @@ function initView(config) {
     beforeDisconnect(callback) {
       beforeDisconnectCallbacks.push(callback);
     },
+    onMount(callback) {
+      connectedCallbacks.push(callback);
+    },
+    onUnmount(callback) {
+      disconnectedCallbacks.push(callback);
+    },
     crash(error) {
       config.appContext.crashCollector.crash({ error, componentName: ctx.name });
     },
-    observe(...args) {
-      const callback = args.pop();
+    watch(signals, callback) {
       if (isConnected) {
-        const stop = observe(args, callback);
+        const stop = watch(signals, callback);
         stopObserverCallbacks.push(stop);
+        return stop;
       } else {
+        let stop;
+        let stopped = false;
         connectedCallbacks.push(() => {
-          const stop = observe(args, callback);
-          stopObserverCallbacks.push(stop);
+          if (!stopped) {
+            stop = watch(signals, callback);
+            stopObserverCallbacks.push(stop);
+          }
         });
+        return function stop2() {
+          if (stop2 != null) {
+            stopped = true;
+            stop2();
+          }
+        };
       }
     },
     outlet() {
-      return m("$outlet", { $children: $($$children) });
+      return m("$outlet", { $children });
     }
   };
   const debugChannel = appContext.debugHub.channel({
     get name() {
       return ctx.name;
+    },
+    get id() {
+      return uniqueId;
     }
   });
   Object.defineProperties(ctx, Object.getOwnPropertyDescriptors(debugChannel));
@@ -1528,9 +1647,9 @@ function initView(config) {
       rendered = getRenderHandle(renderMarkupToDOM(m("$node", { value: result }), { appContext, elementContext }));
     } else if (isMarkup(result) || isArrayOf(isMarkup, result)) {
       rendered = getRenderHandle(renderMarkupToDOM(result, { appContext, elementContext }));
-    } else if (isReadable(result)) {
+    } else if (isSignal(result)) {
       rendered = getRenderHandle(
-        renderMarkupToDOM(m("$observer", { readables: [result], renderFn: (x) => x }), { appContext, elementContext })
+        renderMarkupToDOM(m("$observer", { signals: [result], renderFn: (x) => x }), { appContext, elementContext })
       );
     } else {
       console.warn(result, config);
@@ -1590,7 +1709,7 @@ function initView(config) {
       }
     },
     async setChildren(children) {
-      $$children.set(children);
+      setChildren(children);
     }
   };
   return handle;
@@ -1627,7 +1746,7 @@ var Repeat = class {
   connect(parent2, after) {
     if (!this.connected) {
       parent2.insertBefore(this.node, after?.nextSibling ?? null);
-      this.stopCallback = observe(this.$items, (value) => {
+      this.stopCallback = this.$items.watch((value) => {
         this._update(Array.from(value));
       });
     }
@@ -1675,21 +1794,23 @@ var Repeat = class {
     for (const potential of potentialItems) {
       const connected = this.connectedItems.find((item) => item.key === potential.key);
       if (connected) {
-        connected.$$value.set(potential.value);
-        connected.$$index.set(potential.index);
+        connected.setValue(potential.value);
+        connected.setIndex(potential.index);
         newItems[potential.index] = connected;
       } else {
-        const $$value = $$(potential.value);
-        const $$index = $$(potential.index);
+        const [$value, setValue] = signal(potential.value);
+        const [$index, setIndex] = signal(potential.index);
         newItems[potential.index] = {
           key: potential.key,
-          $$value,
-          $$index,
+          $value,
+          setValue,
+          $index,
+          setIndex,
           handle: initView({
             view: RepeatItemView,
             appContext: this.appContext,
             elementContext: this.elementContext,
-            props: { $value: $($$value), $index: $($$index), renderFn: this.renderFn }
+            props: { $value, $index, renderFn: this.renderFn }
           })
         };
       }
@@ -1724,8 +1845,8 @@ var Text = class {
   }
   async connect(parent2, after = null) {
     if (!this.connected) {
-      if (isReadable(this.value)) {
-        this.stopCallback = observe(this.value, (value) => {
+      if (isSignal(this.value)) {
+        this.stopCallback = this.value.watch((value) => {
           this.update(value);
         });
       } else {
@@ -1776,9 +1897,9 @@ function toMarkup(renderables) {
     if (isString(x) || isNumber(x)) {
       return m("$text", { value: x });
     }
-    if (isReadable(x)) {
+    if (isSignal(x)) {
       return m("$observer", {
-        readables: [x],
+        signals: [x],
         renderFn: (x2) => x2
       });
     }
@@ -1787,6 +1908,9 @@ function toMarkup(renderables) {
   });
 }
 function m(type, props, ...children) {
+  if (props != null) {
+    _assertPropTypes(props);
+  }
   return {
     [MARKUP]: true,
     type,
@@ -1794,8 +1918,27 @@ function m(type, props, ...children) {
     children: toMarkup(children)
   };
 }
+function _assertPropTypes(props) {
+  if (props.ref) {
+    if (!isRef(props.ref)) {
+      console.warn(props.ref);
+      throw new TypeError(`Prop 'ref' must be a Ref object. Got: ${props.ref}`);
+    }
+  }
+  for (const key in props) {
+    if (key.startsWith("$$")) {
+      if (!isSettableSignal(props[key])) {
+        throw new TypeError(`Prop '${key}' is named as a SettableSignal but value is not. Got: ${props[key]}`);
+      }
+    } else if (key.startsWith("$")) {
+      if (!isSignal(props[key])) {
+        throw new TypeError(`Prop '${key}' is named as a Signal but value is not. Got: ${props[key]}`);
+      }
+    }
+  }
+}
 function cond(predicate, thenContent, elseContent) {
-  const $predicate = $(predicate);
+  const $predicate = signalify(predicate);
   return m("$cond", {
     $predicate,
     thenContent,
@@ -1803,12 +1946,34 @@ function cond(predicate, thenContent, elseContent) {
   });
 }
 function repeat(items, keyFn, renderFn) {
-  const $items = $(items);
+  const $items = signalify(items);
   return m("$repeat", { $items, keyFn, renderFn });
 }
 function portal(content, parent2) {
   return m("$portal", { content, parent: parent2 });
 }
+function ref() {
+  const [$node, setNode] = signal();
+  return {
+    get: $node.get,
+    watch: $node.watch,
+    get node() {
+      return $node.get();
+    },
+    set node(node) {
+      setNode(node);
+    }
+  };
+}
+function isRef(value) {
+  if (value == null || typeof value !== "object") {
+    return false;
+  }
+  if (!value.hasOwnProperty("node")) {
+    return false;
+  }
+  return true;
+}
 var NodeHandle = class {
   node;
   get connected() {
@@ -1874,7 +2039,7 @@ function renderMarkupToDOM(markup, ctx) {
         case "$observer": {
           const attrs = item.props;
           return new Observer({
-            readables: attrs.readables,
+            signals: attrs.signals,
             renderFn: attrs.renderFn,
             appContext: ctx.appContext,
             elementContext: ctx.elementContext
@@ -1950,7 +2115,7 @@ function getRenderHandle(handles) {
   };
 }
 function isRenderable(value) {
-  return value == null || value === false || typeof value === "string" || typeof value === "number" || isMarkup(value) || isReadable(value) || isArrayOf(isRenderable, value);
+  return value == null || value === false || typeof value === "string" || typeof value === "number" || isMarkup(value) || isSignal(value) || isArrayOf(isRenderable, value);
 }
 
 // src/store.ts
@@ -2010,17 +2175,26 @@ function initStore(config) {
     crash(error) {
       config.appContext.crashCollector.crash({ error, componentName: ctx.name });
     },
-    observe(...args) {
-      const callback = args.pop();
-      const readables = args.flat();
+    watch(signals, callback) {
       if (isConnected) {
-        const stop = observe(readables, callback);
+        const stop = watch(signals, callback);
         stopObserverCallbacks.push(stop);
+        return stop;
       } else {
+        let stop;
+        let stopped = false;
         connectedCallbacks.push(() => {
-          const stop = observe(readables, callback);
-          stopObserverCallbacks.push(stop);
+          if (!stopped) {
+            stop = watch(signals, callback);
+            stopObserverCallbacks.push(stop);
+          }
         });
+        return function() {
+          if (stop != null) {
+            stopped = true;
+            stop();
+          }
+        };
       }
     }
   };
@@ -2087,27 +2261,27 @@ function initStore(config) {
 // src/stores/document.ts
 function DocumentStore(ctx) {
   ctx.name = "dolla/document";
-  const $$title = $$(document.title);
-  const $$visibility = $$(document.visibilityState);
-  const $$orientation = $$("landscape");
-  const $$colorScheme = $$("light");
-  ctx.observe($$title, (current) => {
+  const [$title, setTitle] = signal(document.title);
+  const [$visibility, setVisibility] = signal(document.visibilityState);
+  const [$orientation, setOrientation] = signal("landscape");
+  const [$colorScheme, setColorScheme] = signal("light");
+  ctx.watch([$title], (current) => {
     document.title = current;
   });
   const onVisibilityChange = () => {
-    $$visibility.set(document.visibilityState);
+    setVisibility(document.visibilityState);
   };
   const onFocus = () => {
-    $$visibility.set("visible");
+    setVisibility("visible");
   };
   const landscapeQuery = window.matchMedia("(orientation: landscape)");
   function onOrientationChange(e) {
-    $$orientation.set(e.matches ? "landscape" : "portrait");
+    setOrientation(e.matches ? "landscape" : "portrait");
   }
   onOrientationChange(landscapeQuery);
   const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
   function onColorChange(e) {
-    $$colorScheme.set(e.matches ? "dark" : "light");
+    setColorScheme(e.matches ? "dark" : "light");
   }
   onColorChange(colorSchemeQuery);
   ctx.onConnected(function() {
@@ -2123,10 +2297,11 @@ function DocumentStore(ctx) {
     window.removeEventListener("focus", onFocus);
   });
   return {
-    $$title,
-    $visibility: $($$visibility),
-    $orientation: $($$orientation),
-    $colorScheme: $($$colorScheme)
+    $title,
+    setTitle,
+    $visibility,
+    $orientation,
+    $colorScheme
   };
 }
 
@@ -3255,11 +3430,11 @@ function RouterStore(ctx) {
   ctx.onConnected(() => {
     ctx.info("Routes registered:", routes);
   });
-  const $$pattern = $$(null);
-  const $$path = $$("");
-  const $$params = $$({});
-  const $$query = $$(parseQueryParams(window.location.search));
-  ctx.observe($$query, (current) => {
+  const [$pattern, setPattern] = signal(null);
+  const [$path, setPath] = signal("");
+  const [$params, setParams] = signal({});
+  const [$query, setQuery] = signal(parseQueryParams(window.location.search));
+  ctx.watch([$query], (current) => {
     const params = new URLSearchParams();
     for (const key in current) {
       params.set(key, String(current[key]));
@@ -3290,13 +3465,13 @@ function RouterStore(ctx) {
   const onRouteChange = async ({ location }) => {
     if (location.search !== lastQuery) {
       lastQuery = location.search;
-      $$query.set(parseQueryParams(location.search));
+      setQuery(parseQueryParams(location.search));
     }
     const matched = matchRoutes(routes, location.pathname);
     if (!matched) {
-      $$pattern.set(null);
-      $$path.set(location.pathname);
-      $$params.set({
+      setPattern(null);
+      setPath(location.pathname);
+      setParams({
         wildcard: location.pathname
       });
       return;
@@ -3365,10 +3540,10 @@ function RouterStore(ctx) {
         throw new TypeError(`Redirect must either be a path string or a function.`);
       }
     } else {
-      $$path.set(matched.path);
-      $$params.set(matched.params);
-      if (matched.pattern !== $$pattern.get()) {
-        $$pattern.set(matched.pattern);
+      setPath(matched.path);
+      setParams(matched.params);
+      if (matched.pattern !== $pattern.get()) {
+        setPattern(matched.pattern);
         const layers = matched.meta.layers;
         for (let i = 0; i < layers.length; i++) {
           const matchedLayer = layers[i];
@@ -3415,19 +3590,20 @@ function RouterStore(ctx) {
     /**
      * The currently matched route pattern, if any.
      */
-    $pattern: $($$pattern),
+    $pattern,
     /**
      * The current URL path.
      */
-    $path: $($$path),
+    $path,
     /**
      * The current named path params.
      */
-    $params: $($$params),
+    $params,
     /**
      * The current query params. Changes to this object will be reflected in the URL.
      */
-    $$query,
+    $query,
+    setQuery,
     /**
      * Navigate backward. Pass a number of steps to hit the back button that many times.
      */
@@ -3541,10 +3717,10 @@ function LanguageStore(ctx) {
     }
     return cache.get(config.name);
   }
-  const $$isLoaded = $$(false);
-  const $$language = $$();
-  const $$translation = $$();
-  const $noLanguageValue = $("[NO LANGUAGE SET]");
+  const [$loaded, setLoaded] = signal(false);
+  const [$language, _setLanguage] = signal();
+  const [$translation, setTranslation] = signal();
+  const [$noLanguageValue] = signal("[NO LANGUAGE SET]");
   const translationCache = [];
   function getCached(key, values) {
     for (const entry of translationCache) {
@@ -3597,8 +3773,8 @@ function LanguageStore(ctx) {
     const lang = languages.get(realTag);
     try {
       const translation = await getTranslation(lang);
-      $$translation.set(translation);
-      $$language.set(realTag);
+      setTranslation(translation);
+      _setLanguage(realTag);
       ctx.info("set language to " + realTag);
     } catch (error) {
       if (error instanceof Error) {
@@ -3607,11 +3783,11 @@ function LanguageStore(ctx) {
     }
   }
   setLanguage(ctx.options.defaultLanguage ?? "auto").then(() => {
-    $$isLoaded.set(true);
+    setLoaded(true);
   });
   return {
     loaded: new Promise((resolve2, reject) => {
-      const stop = observe($$isLoaded, (isLoaded) => {
+      const stop = $loaded.watch((isLoaded) => {
         if (isLoaded) {
           setTimeout(() => {
             stop();
@@ -3620,8 +3796,8 @@ function LanguageStore(ctx) {
         }
       });
     }),
-    $isLoaded: $($$isLoaded),
-    $currentLanguage: $($$language),
+    $isLoaded: $loaded,
+    $currentLanguage: $language,
     supportedLanguages: [...languages.keys()],
     setLanguage,
     /**
@@ -3631,7 +3807,7 @@ function LanguageStore(ctx) {
          * @param values - A map of {{placeholder}} names and the values to replace them with.
          */
     translate(key, values) {
-      if (!$$language.get()) {
+      if (!$language.get()) {
         return $noLanguageValue;
       }
       const cached = getCached(key, values);
@@ -3639,16 +3815,16 @@ function LanguageStore(ctx) {
         return cached;
       }
       if (values) {
-        const readableValues = {};
+        const signalValues = {};
         for (const [key2, value] of Object.entries(values)) {
-          if (isReadable(value)) {
-            readableValues[key2] = value;
+          if (isSignal(value)) {
+            signalValues[key2] = value;
           }
         }
-        const readableEntries = Object.entries(readableValues);
+        const readableEntries = Object.entries(signalValues);
         if (readableEntries.length > 0) {
           const readables = readableEntries.map((x) => x[1]);
-          const $merged = $([$$translation, ...readables], (t, ...entryValues) => {
+          const $merged = derive([$translation, ...readables], (t, ...entryValues) => {
             const entries = entryValues.map((_, i) => readableEntries[i]);
             const mergedValues = {
               ...values
@@ -3664,7 +3840,7 @@ function LanguageStore(ctx) {
           return $merged;
         }
       }
-      const $replaced = $($$translation, (t) => {
+      const $replaced = derive([$translation], (t) => {
         let result = resolve(t, key) || `[NO TRANSLATION: ${key}]`;
         if (values) {
           result = replaceMustaches(result, values);
@@ -3869,7 +4045,7 @@ function DialogStore(ctx) {
   container.style.bottom = "0";
   container.style.left = "0";
   container.style.zIndex = "99999";
-  const $$dialogs = $$([]);
+  const [$dialogs, setDialogs] = signal([]);
   let activeDialogs = [];
   function dialogChangedCallback() {
     if (activeDialogs.length > 0) {
@@ -3882,7 +4058,7 @@ function DialogStore(ctx) {
       }
     }
   }
-  ctx.observe($$dialogs, (dialogs) => {
+  ctx.watch([$dialogs], (dialogs) => {
     render.update(() => {
       let removed = [];
       let added = [];
@@ -3924,7 +4100,7 @@ function DialogStore(ctx) {
     }
   });
   function open(view, props) {
-    const $$open = $$(true);
+    const $$open = signal.settable(true);
     let dialog;
     let transitionInCallback;
     let transitionOutCallback;
@@ -3934,12 +4110,14 @@ function DialogStore(ctx) {
       elementContext,
       props: {
         ...props,
-        $$open,
-        transitionIn: (callback) => {
-          transitionInCallback = callback;
-        },
-        transitionOut: (callback) => {
-          transitionOutCallback = callback;
+        dialog: {
+          $$open,
+          transitionIn: (callback) => {
+            transitionInCallback = callback;
+          },
+          transitionOut: (callback) => {
+            transitionOutCallback = callback;
+          }
         }
       }
     });
@@ -3953,16 +4131,16 @@ function DialogStore(ctx) {
         return transitionOutCallback;
       }
     };
-    $$dialogs.update((current) => {
+    setDialogs((current) => {
       return [...current, dialog];
     });
-    const stopObserver = observe($$open, (value) => {
+    const stopObserver = $$open.watch((value) => {
       if (!value) {
         closeDialog();
       }
     });
     function closeDialog() {
-      $$dialogs.update((current) => {
+      setDialogs((current) => {
         return current.filter((x) => x !== dialog);
       });
       dialog = void 0;
@@ -3975,8 +4153,6 @@ function DialogStore(ctx) {
   };
 }
 export {
-  $,
-  $$,
   App,
   DialogStore,
   Fragment,
@@ -3985,12 +4161,17 @@ export {
   RouterStore,
   StoreScope,
   cond,
-  isReadable,
-  isWritable,
+  derive,
+  designalify,
+  isRef,
+  isSettableSignal,
+  isSignal,
   m,
-  observe,
   portal,
+  ref,
   repeat,
-  unwrap
+  signal,
+  signalify,
+  watch
 };
 //# sourceMappingURL=index.js.map