ctrl-fx 0.1.0 → 0.1.2

package/dist/chunk-BDTTV33M.js

@@ -0,0 +1,4050 @@
+import {
+  containerEventTypes,
+  eventTypes,
+  foldNode,
+  getId,
+  isNodeGroup,
+  nodeGroup,
+  nodeId
+} from "./chunk-EKBLRHWK.js";
+import {
+  ResponseBody,
+  emptyLocation,
+  emptyPath,
+  eq,
+  exhaustivenessCheck,
+  failure,
+  filterNot,
+  formatLocation,
+  internalLocationFromLocation,
+  isEffect,
+  makeEffects,
+  parseAllQueryParams,
+  parseFragment,
+  parseInternalLocation,
+  parsePath,
+  pure,
+  stringToInt,
+  success,
+  taskId
+} from "./chunk-OSIRHKDB.js";
+import {
+  dbVersion,
+  run,
+  run2
+} from "./chunk-XICUXW4T.js";
+import {
+  __publicField
+} from "./chunk-PKBMQBKP.js";
+
+// src/internal/locutils.ts
+function currentLocation(window2) {
+  return {
+    protocol: filterNot(window2.location.protocol?.trim(), (p) => p.length <= 0),
+    hostname: filterNot(window2.location.hostname?.trim(), (h) => h.length <= 0),
+    port: window2.location.port ? stringToInt(window2.location.port.trim()) : void 0,
+    path: window2.location.pathname ? parsePath(window2.location.pathname) : emptyPath,
+    queryParams: window2.location.search?.trim() ? parseAllQueryParams(window2.location.search?.trim()) : [],
+    fragment: window2.location.hash ? parseFragment(window2.location.hash) : void 0
+  };
+}
+
+// src/internal/eventmgr.ts
+function toNativeEventType(type) {
+  return type === "textinput" ? "input" : type;
+}
+function makeEventTypeKeyedRecord(eventTypes2, defaultValue) {
+  const record = {};
+  for (const eventType of eventTypes2) {
+    record[eventType] = defaultValue();
+  }
+  return record;
+}
+function makeListenerCounts(eventTypes2) {
+  return makeEventTypeKeyedRecord(eventTypes2, () => ({
+    regular: 0,
+    capture: 0
+  }));
+}
+function updateListenerChangeMap(map, eventType, capture) {
+  const existing = map.get(eventType);
+  if (existing) {
+    if (capture) {
+      existing.capture = true;
+    } else {
+      existing.regular = true;
+    }
+  } else {
+    map.set(eventType, {
+      capture,
+      regular: !capture
+    });
+  }
+}
+function adjustCountsAndGetListenerTypesToRemoveAndAdd(counts, oldListeners, newListeners) {
+  const countDiffs = {};
+  oldListeners.forEach((listener) => {
+    const capture = listener.options && listener.options.capture ? true : false;
+    const totals = countDiffs[listener._type];
+    const currDiff = capture ? totals?.capture : totals?.regular;
+    const newDiff = currDiff ? currDiff - 1 : -1;
+    if (totals) {
+      if (capture) {
+        totals.capture = newDiff;
+      } else {
+        totals.regular = newDiff;
+      }
+    } else {
+      countDiffs[listener._type] = {
+        regular: capture ? 0 : newDiff,
+        capture: capture ? newDiff : 0
+      };
+    }
+  });
+  const allNewEvents = /* @__PURE__ */ new Map();
+  newListeners.forEach((listener) => {
+    const capture = listener.options && listener.options.capture ? true : false;
+    const totals = countDiffs[listener._type];
+    const currDiff = capture ? totals?.capture : totals?.regular;
+    const newDiff = currDiff ? currDiff + 1 : 1;
+    if (totals) {
+      if (capture) {
+        totals.capture = newDiff;
+      } else {
+        totals.regular = newDiff;
+      }
+    } else {
+      countDiffs[listener._type] = {
+        regular: capture ? 0 : newDiff,
+        capture: capture ? newDiff : 0
+      };
+    }
+    updateListenerChangeMap(allNewEvents, listener._type, capture);
+  });
+  const toAdd = /* @__PURE__ */ new Map();
+  const toRemove = /* @__PURE__ */ new Map();
+  for (const [k, v] of Object.entries(countDiffs)) {
+    const tpe = k;
+    const diffTotals = v;
+    const currCount = counts[tpe];
+    currCount.capture = currCount.capture + diffTotals.capture;
+    currCount.regular = currCount.regular + diffTotals.regular;
+    if (currCount.capture === 0) {
+      if (diffTotals.capture < 0) {
+        updateListenerChangeMap(toRemove, tpe, true);
+      }
+    } else if (currCount.capture > 0) {
+      if (diffTotals.capture === currCount.capture) {
+        updateListenerChangeMap(toAdd, tpe, true);
+      }
+    } else {
+      throw new Error(
+        "EventListener counts out of sync (this indicates a ctrl-fx framework bug)"
+      );
+    }
+    if (currCount.regular === 0) {
+      if (diffTotals.regular < 0) {
+        updateListenerChangeMap(toRemove, tpe, false);
+      }
+    } else if (currCount.regular > 0) {
+      if (diffTotals.regular === currCount.regular) {
+        updateListenerChangeMap(toAdd, tpe, false);
+      }
+    } else {
+      throw new Error(
+        "EventListener counts out of sync (this indicates a ctrl-fx framework bug)"
+      );
+    }
+  }
+  return { toRemove, toAdd, allNewEvents };
+}
+var EventManagerDelegate = class {
+  constructor(window2, runEffect) {
+    __publicField(this, "window");
+    __publicField(this, "runEffect");
+    this.window = window2;
+    this.runEffect = runEffect;
+  }
+  runListeners(ev, listeners) {
+    if (listeners.length) {
+      const listener = listeners[0];
+      if (toNativeEventType(listener.listener._type) === ev.type.toLowerCase() && (ev.eventPhase !== 1 || listener.listener.options.capture)) {
+        this.runListener(listener, ev, (keepGoing) => {
+          if (keepGoing) {
+            this.runListeners(ev, listeners.slice(1));
+          } else {
+            return;
+          }
+        });
+      } else {
+        this.runListeners(ev, listeners.slice(1));
+      }
+    } else {
+      return;
+    }
+  }
+  runListener(listenerAndNode, ev, onComplete) {
+    let effect;
+    const listener = listenerAndNode.listener;
+    switch (listener._type) {
+      case "focus":
+      case "blur": {
+        effect = listener.effect;
+        break;
+      }
+      case "change": {
+        let value = "";
+        let checked = false;
+        if (ev.target && "tagName" in ev.target) {
+          switch (ev.target.tagName) {
+            case "INPUT": {
+              value = ev.target.value;
+              checked = ev.target.checked;
+              break;
+            }
+            case "SELECT":
+            case "TEXTAREA": {
+              value = ev.target.value;
+              break;
+            }
+          }
+        }
+        const changeData = { value, checked };
+        effect = listener.effect(changeData);
+        break;
+      }
+      case "click":
+      case "dblclick":
+      case "mouseenter":
+      case "mouseleave":
+      case "submit": {
+        effect = listener.effect;
+        break;
+      }
+      case "mousemove": {
+        assertMouseMoveEvent(ev);
+        const mouseMoveData = {
+          clientX: ev.clientX,
+          clientY: ev.clientY,
+          pageX: ev.pageX,
+          pageY: ev.pageY,
+          movementX: ev.movementX,
+          movementY: ev.movementY
+        };
+        effect = listener.effect(mouseMoveData);
+        break;
+      }
+      case "wheel": {
+        assertWheelEvent(ev);
+        const wheelData = {
+          deltaX: ev.deltaX,
+          deltaY: ev.deltaY,
+          deltaZ: ev.deltaZ,
+          deltaMode: ev.deltaMode
+        };
+        effect = listener.effect(wheelData);
+        break;
+      }
+      case "scroll":
+      case "scrollend": {
+        const owningNode = listenerAndNode.owningNode;
+        const scrollData = owningNode._type === "InternalElementNode" ? {
+          scrollTop: owningNode.realNode.scrollTop,
+          scrollLeft: owningNode.realNode.scrollLeft
+        } : { scrollTop: 0, scrollLeft: 0 };
+        effect = listener.effect(scrollData);
+        break;
+      }
+      //console.log(ev.target && 'tagName' in ev.target && ev.target.tagName === 'INPUT')
+      case "textinput": {
+        let textState;
+        if (ev.target && "tagName" in ev.target) {
+          switch (ev.target.tagName) {
+            case "INPUT":
+            case "TEXTAREA": {
+              textState = {
+                value: ev.target.value,
+                selectionStart: ev.target.selectionStart,
+                selectionEnd: ev.target.selectionEnd
+              };
+              break;
+            }
+            case "DIV": {
+              textState = {
+                value: ev.target.innerText,
+                selectionStart: 0,
+                selectionEnd: 0
+              };
+              break;
+            }
+            default: {
+              textState = {
+                value: "",
+                selectionStart: 0,
+                selectionEnd: 0
+              };
+            }
+          }
+        } else {
+          textState = {
+            value: "",
+            selectionStart: 0,
+            selectionEnd: 0
+          };
+        }
+        effect = listener.effect(textState);
+        break;
+      }
+      case "touchmove":
+      case "touchstart":
+      case "touchend":
+      case "touchcancel": {
+        assertTouchEvent(ev);
+        const touchData = [];
+        for (let i = 0; i < ev.touches.length; i++) {
+          touchData.push({
+            clientX: ev.touches[i].clientX,
+            clientY: ev.touches[i].clientY,
+            pageX: ev.touches[i].pageX,
+            pageY: ev.touches[i].pageY
+          });
+        }
+        effect = listener.effect(touchData);
+        break;
+      }
+      case "keydown":
+      case "keyup": {
+        assertKeyEvent(ev);
+        const keyData = { key: ev.key, code: ev.code };
+        effect = listener.effect(keyData);
+        break;
+      }
+      case "resize": {
+        const dimensions = {
+          width: this.window.innerWidth,
+          height: this.window.innerHeight
+        };
+        effect = listener.onChange(dimensions);
+        break;
+      }
+      case "popstate":
+      case "locationchange": {
+        const loc = internalLocationFromLocation(currentLocation(this.window));
+        effect = listener.onChange(loc);
+        break;
+      }
+      case "visibilitychange": {
+        const state = this.window.document.visibilityState;
+        effect = listener.onChange(state);
+        break;
+      }
+      case "online":
+      case "offline": {
+        effect = listener.effect;
+        break;
+      }
+      case "custom": {
+        effect = listener.effect(ev.detail);
+        break;
+      }
+      default:
+        exhaustivenessCheck(listener);
+    }
+    this.runEffect(effect, listenerAndNode.owningNode, (result) => {
+      if (result !== void 0) {
+        if (result.preventDefault) {
+          ev.preventDefault();
+        }
+        if (result.stopPropagation) {
+          ev.stopImmediatePropagation();
+          onComplete(false);
+        } else {
+          onComplete(true);
+        }
+      } else {
+        onComplete(true);
+      }
+    });
+  }
+};
+function assertMouseMoveEvent(event) {
+  if (!("clientX" in event)) {
+    throw new Error("Event is not a mousemove event");
+  }
+}
+function assertWheelEvent(event) {
+  if (!("deltaX" in event)) {
+    throw new Error("Event is not a wheel event");
+  }
+}
+function assertTouchEvent(event) {
+  if (!(event.type.toLowerCase().startsWith("touch") && "touches" in event)) {
+    throw new Error("Event is not a touch event");
+  }
+}
+function assertKeyEvent(event) {
+  if (!(event.type.toLowerCase().startsWith("key") && "key" in event && "code" in event)) {
+    throw new Error("Event is not a key event");
+  }
+}
+var ContainerEventManagerDelegate = class extends EventManagerDelegate {
+  constructor(window2, runEffect) {
+    super(window2, runEffect);
+    __publicField(this, "nodeLookupByEvent", makeEventTypeKeyedRecord(
+      containerEventTypes,
+      () => /* @__PURE__ */ new Set()
+    ));
+    __publicField(this, "eventListeners", /* @__PURE__ */ new Map());
+    __publicField(this, "windowEventListener", (event) => {
+      this.onEvent(event);
+    });
+    __publicField(this, "windowCaptureEventListener", (event) => {
+      this.onEvent(event);
+    });
+    __publicField(this, "documentEventListener", (event) => {
+      this.onEvent(event);
+    });
+    __publicField(this, "documentCaptureEventListener", (event) => {
+      this.onEvent(event);
+    });
+    __publicField(this, "counts");
+    this.counts = makeListenerCounts(containerEventTypes);
+  }
+  onEvent(event) {
+    const eventType = event.type;
+    const nodeSet = this.nodeLookupByEvent[eventType];
+    if (!nodeSet) {
+      return;
+    }
+    const listenersToRun = [];
+    for (const node of nodeSet) {
+      const listeners = this.eventListeners.get(node);
+      if (listeners) {
+        listeners.forEach((listener) => {
+          if (listener._type === eventType && (event.eventPhase !== 1 || listener.options.capture)) {
+            listenersToRun.push({ listener, owningNode: node });
+          }
+        });
+      }
+    }
+    this.runListeners(event, listenersToRun);
+    if (eventType === "popstate") {
+      this.window.dispatchEvent(new Event("locationchange"));
+    }
+  }
+  setContainerListeners(node) {
+    if (node.containerListeners.length === 0) {
+      this.removeContainerListeners(node);
+      return;
+    }
+    const existingListeners = this.eventListeners.get(node);
+    const passive = node.containerListeners.reduce(
+      (acc, listener) => acc && (listener.options.passive ? true : false),
+      true
+    );
+    const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(
+      this.counts,
+      existingListeners || [],
+      node.containerListeners
+    );
+    containerEventTypes.forEach((ev) => {
+      if (adjustments.allNewEvents.has(ev)) {
+        this.nodeLookupByEvent[ev].add(node);
+      } else {
+        this.nodeLookupByEvent[ev].delete(node);
+      }
+    });
+    if (node.containerListeners.length > 0) {
+      this.eventListeners.set(node, [...node.containerListeners]);
+    } else {
+      this.eventListeners.delete(node);
+    }
+    this.processAdjustments(adjustments, passive);
+  }
+  processAdjustments(adjustments, passive) {
+    for (const [ev, changes] of adjustments.toAdd) {
+      switch (ev) {
+        case "resize":
+        case "popstate":
+        case "locationchange":
+        case "online":
+        case "offline": {
+          if (changes.capture) {
+            this.window.addEventListener(ev, this.windowCaptureEventListener, {
+              capture: true,
+              passive
+            });
+          }
+          if (changes.regular) {
+            this.window.addEventListener(ev, this.windowEventListener, {
+              capture: false,
+              passive
+            });
+          }
+          break;
+        }
+        case "keydown":
+        case "keyup":
+        case "visibilitychange": {
+          if (changes.capture) {
+            this.window.document.addEventListener(
+              ev,
+              this.documentCaptureEventListener,
+              { capture: true, passive }
+            );
+          }
+          if (changes.regular) {
+            this.window.document.addEventListener(
+              ev,
+              this.documentEventListener,
+              { capture: false, passive }
+            );
+          }
+          break;
+        }
+        default: {
+          exhaustivenessCheck(ev);
+        }
+      }
+    }
+  }
+  removeContainerListeners(node) {
+    const existingListeners = this.eventListeners.get(node);
+    if (!existingListeners) {
+      return;
+    }
+    const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(
+      this.counts,
+      existingListeners,
+      []
+    );
+    this.processAdjustments(adjustments, false);
+    existingListeners.forEach((listener) => {
+      this.nodeLookupByEvent[listener._type].delete(node);
+    });
+    this.eventListeners.delete(node);
+  }
+};
+var ElementEventManagerDelegate = class extends EventManagerDelegate {
+  constructor(window2, runEffect) {
+    super(window2, runEffect);
+    __publicField(this, "listeners", /* @__PURE__ */ new Map());
+    __publicField(this, "customHandlers", /* @__PURE__ */ new Map());
+  }
+  setElementListeners(node) {
+    const standardListeners = node.eventListeners.filter(
+      (l) => l._type !== "custom"
+    );
+    const customListeners = node.eventListeners.filter(
+      (l) => l._type === "custom"
+    );
+    this.updateCustomListeners(node, customListeners);
+    if (standardListeners.length === 0) {
+      this.removeStandardListeners(node);
+      return;
+    }
+    let listenerInfo = this.listeners.get(node);
+    if (!listenerInfo) {
+      const that = this;
+      listenerInfo = {
+        counts: makeListenerCounts(eventTypes),
+        listeners: [],
+        realListener(event) {
+          const listeners = that.listeners.get(node)?.listeners;
+          if (listeners) {
+            that.runListeners(
+              event,
+              listeners.map((listener) => ({
+                listener,
+                owningNode: node
+              }))
+            );
+          }
+        }
+      };
+      this.listeners.set(node, listenerInfo);
+    }
+    const passive = standardListeners.reduce(
+      (acc, listener) => acc && (listener.options.passive ? true : false),
+      true
+    );
+    const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(
+      listenerInfo.counts,
+      listenerInfo.listeners,
+      standardListeners
+    );
+    listenerInfo.listeners = [...standardListeners];
+    for (const [tpe, info] of adjustments.toAdd) {
+      const domType = toNativeEventType(tpe);
+      if (info.regular) {
+        node.realNode.addEventListener(domType, listenerInfo.realListener, {
+          capture: false,
+          passive
+        });
+      }
+      if (info.capture) {
+        node.realNode.addEventListener(domType, listenerInfo.realListener, {
+          capture: true,
+          passive
+        });
+      }
+    }
+    for (const [tpe, info] of adjustments.toRemove) {
+      const domType = toNativeEventType(tpe);
+      if (info.regular) {
+        node.realNode.removeEventListener(domType, listenerInfo.realListener, false);
+      }
+      if (info.capture) {
+        node.realNode.removeEventListener(domType, listenerInfo.realListener, true);
+      }
+    }
+  }
+  updateCustomListeners(node, customListeners) {
+    const existingHandlers = this.customHandlers.get(node) ?? /* @__PURE__ */ new Map();
+    const byName = /* @__PURE__ */ new Map();
+    for (const l of customListeners) {
+      const arr = byName.get(l.eventName) ?? [];
+      arr.push(l);
+      byName.set(l.eventName, arr);
+    }
+    for (const [name, { realListener }] of existingHandlers) {
+      if (!byName.has(name)) {
+        node.realNode.removeEventListener(name, realListener, false);
+        existingHandlers.delete(name);
+      }
+    }
+    for (const [name, listeners] of byName) {
+      const existing = existingHandlers.get(name);
+      if (existing) {
+        existing.listeners = listeners;
+      } else {
+        const that = this;
+        const info = { listeners, realListener: null };
+        info.realListener = (ev) => {
+          const detail = ev.detail;
+          for (const l of info.listeners) {
+            that.runEffect(l.effect(detail), node, (result) => {
+              if (result?.stopPropagation) ev.stopImmediatePropagation();
+              if (result?.preventDefault) ev.preventDefault();
+            });
+          }
+        };
+        existingHandlers.set(name, info);
+        node.realNode.addEventListener(name, info.realListener, {
+          capture: false,
+          passive: false
+        });
+      }
+    }
+    if (existingHandlers.size > 0) {
+      this.customHandlers.set(node, existingHandlers);
+    } else {
+      this.customHandlers.delete(node);
+    }
+  }
+  removeStandardListeners(node) {
+    const listenerInfo = this.listeners.get(node);
+    if (!listenerInfo) {
+      return;
+    }
+    for (const [eventType, info] of Object.entries(listenerInfo.counts)) {
+      const domType = toNativeEventType(eventType);
+      if (info.regular) {
+        node.realNode.removeEventListener(
+          domType,
+          listenerInfo.realListener,
+          false
+        );
+      }
+      if (info.capture) {
+        node.realNode.removeEventListener(
+          domType,
+          listenerInfo.realListener,
+          true
+        );
+      }
+    }
+    this.listeners.delete(node);
+  }
+};
+var EventManager = class {
+  constructor(window2, runEffect) {
+    __publicField(this, "containerDelegate");
+    __publicField(this, "elementDelegate");
+    this.containerDelegate = new ContainerEventManagerDelegate(
+      window2,
+      runEffect
+    );
+    this.elementDelegate = new ElementEventManagerDelegate(window2, runEffect);
+  }
+  setContainerListeners(node) {
+    this.containerDelegate.setContainerListeners(node);
+  }
+  setElementListeners(node) {
+    this.elementDelegate.setElementListeners(node);
+  }
+};
+
+// src/internal/taskreg.ts
+var TaskRegistry = class {
+  constructor() {
+    __publicField(this, "tasks", {});
+  }
+  set(taskId2, cleanup) {
+    this.tasks[taskId2] = cleanup;
+  }
+  cancel(taskId2) {
+    const cleanup = this.tasks[taskId2];
+    if (cleanup) cleanup();
+    delete this.tasks[taskId2];
+  }
+  remove(taskId2) {
+    delete this.tasks[taskId2];
+  }
+  cancelAll() {
+    for (const cleanup of Object.values(this.tasks)) {
+      cleanup();
+    }
+    this.tasks = {};
+  }
+};
+
+// src/internal/vdom.ts
+function rootNode(realNode) {
+  return {
+    _type: "RootNode",
+    realNode,
+    prepend(node) {
+      addNewChild(this, node, "left");
+    },
+    append(node) {
+      addNewChild(this, node, "right");
+    }
+  };
+}
+function componentNode(component, nodeId2) {
+  return {
+    _type: "ComponentNode",
+    component,
+    nodeId: nodeId2,
+    state: { _type: "Uninitialized" },
+    containerListeners: [],
+    componentEventListeners: [],
+    before(node) {
+      moveNodeNextTo(node, this, "left");
+    },
+    after(node) {
+      moveNodeNextTo(node, this, "right");
+    },
+    prepend(node) {
+      addNewChild(this, node, "left");
+    },
+    append(node) {
+      addNewChild(this, node, "right");
+    }
+  };
+}
+function viewNode(view) {
+  return {
+    _type: "ViewNode",
+    nodeId: view.nodeId,
+    params: view.params,
+    containerListeners: [],
+    after(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "right");
+    },
+    before(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "left");
+    },
+    prepend(node) {
+      addNewChild(this, node, "left");
+    },
+    append(node) {
+      addNewChild(this, node, "right");
+    }
+  };
+}
+function internalTextNode(document, text) {
+  return {
+    _type: "InternalTextNode",
+    text,
+    realNode: document.createTextNode(text),
+    after(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "right");
+    },
+    before(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "left");
+    }
+  };
+}
+function internalElementNode(document, tag, nodeId2, attrs, eventListeners, props = []) {
+  const realNode = document.createElement(tag);
+  attrs.forEach((a) => {
+    realNode.setAttribute(a.name, a.value ? a.value : "");
+  });
+  props.forEach((p) => {
+    ;
+    realNode[p.name] = p.value;
+  });
+  return {
+    _type: "InternalElementNode",
+    tag,
+    nodeId: nodeId2,
+    attrs,
+    props,
+    eventListeners,
+    realNode,
+    after(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "right");
+    },
+    before(nodeToMove) {
+      moveNodeNextTo(nodeToMove, this, "left");
+    },
+    prepend(node) {
+      addNewChild(this, node, "left");
+    },
+    append(node) {
+      addNewChild(this, node, "right");
+    }
+  };
+}
+function detach(node, leaveRealNodeAttached = false) {
+  const origPrevSibling = node.prevSibling;
+  const origNextSibling = node.nextSibling;
+  if (!origPrevSibling) {
+    if (node.parent) {
+      node.parent.firstChild = origNextSibling;
+    }
+  }
+  if (origPrevSibling) {
+    origPrevSibling.nextSibling = origNextSibling;
+  }
+  if (origNextSibling) {
+    origNextSibling.prevSibling = origPrevSibling;
+  }
+  if (!leaveRealNodeAttached) {
+    switch (node._type) {
+      case "InternalElementNode":
+      case "InternalTextNode": {
+        node.realNode.remove();
+        break;
+      }
+      case "ComponentNode":
+      case "ViewNode":
+        break;
+      default:
+        exhaustivenessCheck(node);
+    }
+  }
+  node.prevSibling = void 0;
+  node.nextSibling = void 0;
+  node.parent = void 0;
+}
+function moveNodeNextTo(nodeToMove, anchorNode, direction) {
+  detach(nodeToMove, true);
+  switch (direction) {
+    case "right": {
+      nodeToMove.nextSibling = anchorNode.nextSibling;
+      anchorNode.nextSibling = nodeToMove;
+      nodeToMove.prevSibling = anchorNode;
+      if (nodeToMove.nextSibling) {
+        nodeToMove.nextSibling.prevSibling = nodeToMove;
+      }
+      break;
+    }
+    case "left": {
+      nodeToMove.prevSibling = anchorNode.prevSibling;
+      anchorNode.prevSibling = nodeToMove;
+      nodeToMove.nextSibling = anchorNode;
+      if (nodeToMove.prevSibling) {
+        nodeToMove.prevSibling.nextSibling = nodeToMove;
+      } else if (anchorNode.parent) {
+        anchorNode.parent.firstChild = nodeToMove;
+      }
+      break;
+    }
+    default: {
+      exhaustivenessCheck(direction);
+    }
+  }
+  nodeToMove.parent = anchorNode.parent;
+  const realNodesToMove = realNodesFor(nodeToMove);
+  let realAnchorNode = getRealAnchorNode(anchorNode, direction);
+  realNodesToMove.forEach((node) => {
+    switch (direction) {
+      case "right": {
+        if (!realAnchorNode) {
+          const realParent = realParentNode(anchorNode);
+          if (realParent) {
+            realParent.append(node);
+          }
+        } else {
+          realAnchorNode.after(node);
+        }
+        realAnchorNode = node;
+        break;
+      }
+      case "left": {
+        if (!realAnchorNode) {
+          const realParent = realParentNode(anchorNode);
+          if (realParent) {
+            realParent.prepend(node);
+          }
+        } else {
+          realAnchorNode.before(node);
+        }
+        realAnchorNode = node;
+        break;
+      }
+      default: {
+        exhaustivenessCheck(direction);
+      }
+    }
+  });
+}
+function addNewChild(parent, child, position) {
+  detach(child, true);
+  child.parent = parent;
+  if (position === "left") {
+    child.nextSibling = parent.firstChild;
+    parent.firstChild = child;
+  } else {
+    if (parent.firstChild) {
+      const curLastChild = lastNode(parent.firstChild);
+      curLastChild.nextSibling = child;
+      child.prevSibling = curLastChild;
+    } else {
+      parent.firstChild = child;
+    }
+  }
+  const realChildNodes = realNodesFor(child);
+  if (parent._type === "RootNode") {
+    if (position === "left") {
+      parent.realNode.prepend(...realChildNodes);
+    } else {
+      parent.realNode.append(...realChildNodes);
+    }
+    return;
+  }
+  if (parent._type === "InternalElementNode") {
+    if (position === "left") {
+      parent.realNode.prepend(...realChildNodes);
+    } else {
+      parent.realNode.append(...realChildNodes);
+    }
+    return;
+  }
+  const realSibling = getRealSibling(parent, position);
+  if (realSibling) {
+    if (position === "left") {
+      realSibling.realNode.before(...realChildNodes);
+    } else {
+      realSibling.realNode.after(...realChildNodes);
+    }
+  } else {
+    const realParent = realParentNode(parent);
+    if (realParent) {
+      if (position === "left") {
+        realParent.prepend(...realChildNodes);
+      } else {
+        realParent.append(...realChildNodes);
+      }
+    }
+  }
+}
+function realNodesFor(node) {
+  switch (node._type) {
+    case "InternalElementNode":
+    case "InternalTextNode": {
+      return [node.realNode];
+    }
+    case "ComponentNode":
+    case "ViewNode": {
+      const realNodes = [];
+      let next = node.firstChild;
+      while (next) {
+        realNodes.push(...realNodesFor(next));
+        next = next.nextSibling;
+      }
+      return realNodes;
+    }
+    default: {
+      exhaustivenessCheck(node);
+    }
+  }
+}
+function getRealAnchorNode(anchorNode, insertionDirection) {
+  let curInitialNodeForLevel = anchorNode;
+  while (curInitialNodeForLevel) {
+    let curNode = curInitialNodeForLevel;
+    while (curNode) {
+      if (curNode._type === "InternalTextNode" || curNode._type === "InternalElementNode") {
+        return curNode.realNode;
+      }
+      let curChild = insertionDirection === "right" ? curNode.firstChild ? lastNode(curNode.firstChild) : null : curNode.firstChild;
+      while (curChild) {
+        if (curChild._type === "InternalElementNode" || curChild._type === "InternalTextNode") {
+          return curChild.realNode;
+        }
+        curChild = insertionDirection === "right" ? curChild.prevSibling : curChild.nextSibling;
+      }
+      curNode = insertionDirection === "right" ? curNode.prevSibling : curNode.nextSibling;
+    }
+    switch (curInitialNodeForLevel.parent?._type) {
+      case "InternalElementNode":
+      case "RootNode":
+        return void 0;
+      case "ComponentNode":
+      case "ViewNode": {
+        curInitialNodeForLevel = curInitialNodeForLevel.parent;
+      }
+    }
+  }
+  return void 0;
+}
+function lastNode(node) {
+  let result = node;
+  while (result.nextSibling) {
+    result = result.nextSibling;
+  }
+  return result;
+}
+function realParentNode(node) {
+  return realClosestAncestor(node)?.realNode;
+}
+function realClosestAncestor(node) {
+  const parent = node.parent;
+  if (!parent) {
+    return void 0;
+  }
+  switch (parent._type) {
+    case "InternalElementNode":
+      return parent;
+    case "ComponentNode":
+      return realClosestAncestor(parent);
+    case "RootNode":
+      return parent;
+    case "ViewNode":
+      return realClosestAncestor(parent);
+  }
+}
+function getRealSibling(node, position) {
+  let startNodeForCurrentLevel = node;
+  while (startNodeForCurrentLevel) {
+    const sibling = position === "left" ? startNodeForCurrentLevel.prevSibling : startNodeForCurrentLevel.nextSibling;
+    if (sibling) {
+      const realSibling = getRealSiblingLookingLaterally(sibling, position);
+      if (realSibling) {
+        return realSibling;
+      }
+    }
+    const parent = startNodeForCurrentLevel.parent;
+    if (!parent) {
+      return void 0;
+    }
+    switch (parent._type) {
+      case "InternalElementNode":
+      case "RootNode": {
+        return void 0;
+      }
+      case "ComponentNode":
+      case "ViewNode": {
+        startNodeForCurrentLevel = parent;
+        continue;
+      }
+      default:
+        exhaustivenessCheck(parent);
+    }
+  }
+  return void 0;
+}
+function getRealSiblingLookingLaterally(nextNode, position) {
+  while (nextNode) {
+    switch (nextNode._type) {
+      case "InternalElementNode":
+      case "InternalTextNode":
+        return nextNode;
+      case "ComponentNode":
+      case "ViewNode":
+        if (nextNode.firstChild) {
+          const child = position === "left" ? lastNode(nextNode.firstChild) : nextNode.firstChild;
+          const rslt = getRealSiblingLookingLaterally(child, position);
+          if (rslt) {
+            return rslt;
+          }
+        }
+        nextNode = position === "left" ? nextNode.prevSibling : nextNode.nextSibling;
+        continue;
+    }
+  }
+  return void 0;
+}
+function updateText(node, newText) {
+  if (node.text === newText) {
+    return;
+  }
+  node.text = newText;
+  node.realNode.nodeValue = newText;
+}
+function updateAttrs(node, newAttrs) {
+  const newAttrsMap = new Map(newAttrs.map((a) => [a.name, a]));
+  node.attrs.forEach((oldAttr) => {
+    const newAttr = newAttrsMap.get(oldAttr.name);
+    if (newAttr) {
+      if (newAttr.value || oldAttr.value) {
+        if (newAttr.value !== oldAttr.value) {
+          node.realNode.setAttribute(
+            newAttr.name,
+            newAttr.value ? newAttr.value : ""
+          );
+        }
+      }
+    } else {
+      node.realNode.removeAttribute(oldAttr.name);
+    }
+  });
+  node.attrs = newAttrs;
+}
+function updateProps(node, newProps) {
+  const newPropsMap = new Map(newProps.map((p) => [p.name, p.value]));
+  node.props.forEach((oldProp) => {
+    if (!newPropsMap.has(oldProp.name)) {
+      ;
+      node.realNode[oldProp.name] = void 0;
+    }
+  });
+  newProps.forEach((p) => {
+    ;
+    node.realNode[p.name] = p.value;
+  });
+  node.props = newProps;
+}
+function closestComponentPath(node) {
+  const closestForParent = node.parent && node.parent._type !== "RootNode" ? closestComponentPath(node.parent) : void 0;
+  switch (node._type) {
+    case "InternalElementNode":
+    case "InternalTextNode":
+    case "ViewNode":
+      return closestForParent;
+    case "ComponentNode":
+      return componentPath(node.nodeId, closestForParent);
+  }
+}
+
+// src/internal/cmpmgr.ts
+function manageComponent(component, mountId, window2, interpreter, styleRegistry) {
+  const mountNode = window2.document.getElementById(mountId);
+  if (!mountNode) {
+    throw new Error(
+      `Cannot attach component tree. Root node with id ${mountId} not found`
+    );
+  }
+  const mgr = new ComponentManager(
+    component,
+    mountNode,
+    window2,
+    interpreter,
+    styleRegistry
+  );
+  return {
+    dispatchEffect: (effect) => mgr.dispatchEffect(effect)
+  };
+}
+var ComponentManager = class {
+  constructor(component, mountNode, window2, interpreter, styleRegistry, onRootEvent, alreadyMountedPaths) {
+    __publicField(this, "rootCompPath");
+    __publicField(this, "components", {});
+    __publicField(this, "removedComponents", {});
+    // Mirrors `components` but for view()/fixedView() subtrees, which have no
+    // state of their own but still need stable identity so their onRender
+    // effects don't refire whenever an ancestor element is rebuilt (or, via
+    // alreadyMountedPaths, whenever a fresh ComponentManager remounts them).
+    // Keyed the same way as components: nodeId + enclosing *component* path
+    // (nesting through another view doesn't add a path segment).
+    __publicField(this, "views", {});
+    __publicField(this, "addedComponents", []);
+    __publicField(this, "pendingRenderEffects", []);
+    __publicField(this, "interpreter");
+    __publicField(this, "window");
+    __publicField(this, "document");
+    __publicField(this, "eventManager");
+    __publicField(this, "taskRegistry", new TaskRegistry());
+    __publicField(this, "styleRegistry");
+    __publicField(this, "onRootEvent");
+    // Paths that were already mounted (and had their onRender effects fired)
+    // by some earlier, unrelated ComponentManager instance -- e.g. a prior
+    // `.run()` call in ctrl-fx/testing, which mounts a fresh ComponentManager
+    // each time but wants onRender to still behave as if the component tree
+    // had persisted. Suppresses re-queueing onRender effects for those paths
+    // without affecting real first-time mounts.
+    __publicField(this, "alreadyMountedPaths");
+    this.window = window2;
+    this.document = this.window.document;
+    this.interpreter = interpreter;
+    this.styleRegistry = styleRegistry;
+    this.onRootEvent = onRootEvent;
+    this.alreadyMountedPaths = alreadyMountedPaths ?? /* @__PURE__ */ new Set();
+    this.eventManager = new EventManager(
+      this.window,
+      (effect, node, onResult) => {
+        const componentPath2 = closestComponentPath(node);
+        if (componentPath2) {
+          this.runEffect(effect, componentPath2, onResult);
+        }
+      }
+    );
+    const rootCompPath = componentPath(nodeId("__root_component"));
+    this.rootCompPath = rootCompPath;
+    const compNode = componentNode(component, rootCompPath.nodeId);
+    const root = rootNode(mountNode);
+    root.append(compNode);
+    this.components[componentPath(compNode.nodeId, void 0).format()] = compNode;
+    this.injectComponentCss(component);
+    const initStateEffect = component.initialState(component.params);
+    this.runEffect(initStateEffect, rootCompPath, (state) => {
+      this.renderComponent(rootCompPath, state);
+    });
+  }
+  injectComponentCss(component) {
+    if (!component.css) return;
+    const css = typeof component.css === "function" ? component.css(component.params) : component.css;
+    this.styleRegistry.injectStyle(css);
+  }
+  getRootState() {
+    return this.components[this.rootCompPath.format()]?.state ?? {
+      _type: "Uninitialized"
+    };
+  }
+  /** Paths of components (past their initial render) and views currently mounted. */
+  getMountedPaths() {
+    const componentPaths = Object.entries(this.components).filter(([, node]) => node.state._type === "Ready").map(([path]) => path);
+    return /* @__PURE__ */ new Set([...componentPaths, ...Object.keys(this.views)]);
+  }
+  dispatchEffect(effect) {
+    this.runEffect(effect, this.rootCompPath, () => {
+    });
+  }
+  destroy() {
+    this.taskRegistry.cancelAll();
+  }
+  runEffect(effect, componentPath2, f) {
+    const that = this;
+    this.interpreter(
+      effect,
+      {
+        onComplete: f,
+        onFireEvent: (event) => {
+          const component = this.components[componentPath2.format()];
+          if (component) {
+            const parentCompPath = componentPath2.parentComponentPath;
+            if (parentCompPath) {
+              component.componentEventListeners.forEach((listener) => {
+                const effect2 = listener(event);
+                this.runEffect(effect2, parentCompPath, () => {
+                });
+              });
+            } else {
+              this.onRootEvent?.(event);
+            }
+          }
+        },
+        getState: () => {
+          return that.components[componentPath2.format()].state.value;
+        },
+        setState: (state) => {
+          that.renderComponent(componentPath2, state);
+        }
+      },
+      this.taskRegistry
+    );
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  renderComponent(componentPath2, state) {
+    const component = this.components[componentPath2.format()];
+    if (!component) {
+      return;
+    }
+    if (component.state._type === "Ready" && eq(component.state.value, state)) {
+      return;
+    }
+    const isInitialMount = component.state._type === "Uninitialized";
+    const wasAlreadyMounted = this.alreadyMountedPaths.has(componentPath2.format());
+    component.state = { _type: "Ready", value: state };
+    const newNodeGroup = component.component.view(
+      state,
+      component.component.params
+    );
+    if (isInitialMount && !wasAlreadyMounted && newNodeGroup.renderEffects.length > 0) {
+      this.pendingRenderEffects.push({
+        path: componentPath2,
+        effects: newNodeGroup.renderEffects
+      });
+    }
+    component.containerListeners = newNodeGroup.containerListeners;
+    this.eventManager.setContainerListeners(component);
+    const oldNodes = component.firstChild;
+    this.compareNodeSequences(
+      oldNodes,
+      newNodeGroup.nodes,
+      component,
+      componentPath2
+    );
+    const added = this.addedComponents.splice(0);
+    added.forEach((childPath) => {
+      const cNode = this.components[childPath.format()];
+      if (cNode) {
+        const initEffect = cNode.component.initialState(cNode.component.params);
+        this.runEffect(initEffect, childPath, (state2) => {
+          this.renderComponent(childPath, state2);
+        });
+      }
+    });
+    const pending = this.pendingRenderEffects.splice(0);
+    pending.forEach(({ path, effects }) => {
+      effects.forEach((effect) => this.runEffect(effect, path, () => {
+      }));
+    });
+  }
+  compareNodeSequences(oldNodes, newNodes, parent, ancestorComponentPath) {
+    const mutNewNodes = [...newNodes];
+    while (mutNewNodes.length > 0) {
+      const newNode = mutNewNodes.shift();
+      const correspondingOldNode = this.findCorrespondingOldNode(
+        newNode,
+        oldNodes,
+        ancestorComponentPath
+      );
+      if (correspondingOldNode) {
+        if (correspondingOldNode !== oldNodes) {
+          oldNodes?.before(correspondingOldNode);
+        }
+        this.compareNodes(correspondingOldNode, newNode, ancestorComponentPath);
+        oldNodes = correspondingOldNode.nextSibling;
+      } else {
+        const newInternalNode = this.convertNodeToInternalNode(
+          newNode,
+          ancestorComponentPath
+        );
+        if (oldNodes) {
+          oldNodes.before(newInternalNode);
+        } else {
+          parent.append(newInternalNode);
+        }
+      }
+    }
+    let oldNode = oldNodes;
+    while (oldNode) {
+      const next = oldNode.nextSibling;
+      this.removeNode(oldNode, ancestorComponentPath);
+      oldNode = next;
+    }
+  }
+  removeNode(oldNode, ancestorComponentPath) {
+    detach(oldNode);
+    const that = this;
+    function removeNodeRecords(node, ancestorComponentPath2) {
+      switch (node._type) {
+        case "InternalTextNode":
+          return;
+        case "InternalElementNode": {
+          that.eventManager.setElementListeners(node);
+          return;
+        }
+        case "ViewNode": {
+          that.eventManager.setContainerListeners(node);
+          const viewPath = componentPath(
+            node.nodeId,
+            ancestorComponentPath2
+          ).format();
+          delete that.views[viewPath];
+          return;
+        }
+        case "ComponentNode": {
+          that.eventManager.setContainerListeners(node);
+          const compPath = componentPath(
+            node.nodeId,
+            ancestorComponentPath2
+          ).format();
+          delete that.components[compPath];
+          that.removedComponents[compPath] = node;
+          return;
+        }
+      }
+    }
+    foldTree(
+      oldNode,
+      ancestorComponentPath,
+      void 0,
+      (node, ancestorComponentId) => {
+        removeNodeRecords(node, ancestorComponentId);
+      }
+    );
+  }
+  compareNodes(oldNode, newNode, ancestorComponentPath) {
+    const parent = oldNode.parent;
+    const removeOldAndAddNew = () => {
+      const nextSibling = oldNode.nextSibling;
+      this.removeNode(oldNode, ancestorComponentPath);
+      const newInternalNode = this.convertNodeToInternalNode(
+        newNode,
+        ancestorComponentPath
+      );
+      if (nextSibling) {
+        nextSibling.after(newInternalNode);
+      } else if (parent) {
+        parent.append(newInternalNode);
+      }
+    };
+    const that = this;
+    foldNode(newNode, {
+      onText(text) {
+        if (oldNode._type !== "InternalTextNode") {
+          removeOldAndAddNew();
+          return;
+        }
+        updateText(oldNode, text);
+      },
+      onVoidElement(elem) {
+        if (oldNode._type !== "InternalElementNode" || oldNode.tag !== elem.tag) {
+          removeOldAndAddNew();
+          return;
+        }
+        updateAttrs(oldNode, elem.attrs);
+        updateProps(oldNode, elem.props);
+        if (oldNode.eventListeners.length > 0 || elem.eventListeners.length > 0) {
+          oldNode.eventListeners = elem.eventListeners;
+          that.eventManager.setElementListeners(oldNode);
+        }
+      },
+      onNonVoidElement(elem) {
+        if (oldNode._type !== "InternalElementNode" || oldNode.tag !== elem.tag) {
+          removeOldAndAddNew();
+          return;
+        }
+        updateAttrs(oldNode, elem.attrs);
+        updateProps(oldNode, elem.props);
+        if (oldNode.eventListeners.length > 0) {
+          oldNode.eventListeners = elem.eventListeners;
+          that.eventManager.setElementListeners(oldNode);
+        }
+        that.compareNodeSequences(
+          oldNode.firstChild,
+          elem.children,
+          oldNode,
+          ancestorComponentPath
+        );
+      },
+      onView(view) {
+        if (oldNode._type !== "ViewNode" || !oldNode.nodeId.eq(view.nodeId)) {
+          removeOldAndAddNew();
+          return;
+        }
+        if (eq(oldNode.params, view.params)) {
+          return;
+        }
+        const newNodeGroup = view.nodes(view.params);
+        oldNode.params = view.params;
+        oldNode.containerListeners = newNodeGroup.containerListeners;
+        that.eventManager.setContainerListeners(oldNode);
+        that.compareNodeSequences(
+          oldNode.firstChild,
+          newNodeGroup.nodes,
+          oldNode,
+          ancestorComponentPath
+        );
+      },
+      onComponent(comp) {
+        if (oldNode._type !== "ComponentNode" || !oldNode.nodeId.eq(comp.nodeId)) {
+          removeOldAndAddNew();
+          return;
+        }
+        if (oldNode.state._type === "Ready") {
+          if (oldNode.componentEventListeners.length > 0 || comp.componentEventListeners.length > 0) {
+            oldNode.componentEventListeners = comp.componentEventListeners;
+            that.eventManager.setContainerListeners(oldNode);
+          }
+          if (eq(oldNode.component.params, comp.component.params)) {
+            oldNode.component = comp.component;
+          } else {
+            that.injectComponentCss(comp.component);
+            const newNodeGroup = comp.component.view(
+              oldNode.state.value,
+              comp.component.params
+            );
+            oldNode.containerListeners = newNodeGroup.containerListeners;
+            that.eventManager.setContainerListeners(oldNode);
+            oldNode.component = comp.component;
+            that.compareNodeSequences(
+              oldNode.firstChild,
+              newNodeGroup.nodes,
+              oldNode,
+              componentPath(comp.nodeId, ancestorComponentPath)
+            );
+          }
+        } else {
+          oldNode.component = comp.component;
+        }
+      }
+    });
+  }
+  convertNodeToInternalNode(node, ancestorComponentId) {
+    const that = this;
+    return foldNode(node, {
+      onText(text) {
+        return internalTextNode(that.document, text);
+      },
+      onVoidElement(elem) {
+        const internalElem = internalElementNode(
+          that.document,
+          elem.tag,
+          elem.nodeId,
+          elem.attrs,
+          elem.eventListeners,
+          elem.props
+        );
+        if (elem.eventListeners.length > 0) {
+          that.eventManager.setElementListeners(internalElem);
+        }
+        return internalElem;
+      },
+      onNonVoidElement(elem) {
+        const internalElement = internalElementNode(
+          that.document,
+          elem.tag,
+          elem.nodeId,
+          elem.attrs,
+          elem.eventListeners,
+          elem.props
+        );
+        if (elem.eventListeners.length > 0) {
+          that.eventManager.setElementListeners(internalElement);
+        }
+        elem.children.forEach((childNode) => {
+          internalElement.append(
+            that.convertNodeToInternalNode(childNode, ancestorComponentId)
+          );
+        });
+        return internalElement;
+      },
+      onView(view) {
+        const viewId = componentPath(view.nodeId, ancestorComponentId).format();
+        const existingView = that.views[viewId];
+        if (existingView) {
+          detach(existingView);
+          that.compareNodes(existingView, view, ancestorComponentId);
+          return existingView;
+        }
+        const vNode = viewNode(view);
+        const nodeGroup2 = view.nodes(view.params);
+        vNode.params = view.params;
+        vNode.containerListeners = nodeGroup2.containerListeners;
+        nodeGroup2.nodes.forEach((childNode) => {
+          vNode.append(
+            that.convertNodeToInternalNode(childNode, ancestorComponentId)
+          );
+        });
+        that.eventManager.setContainerListeners(vNode);
+        that.views[viewId] = vNode;
+        if (!that.alreadyMountedPaths.has(viewId) && nodeGroup2.renderEffects.length > 0) {
+          that.pendingRenderEffects.push({
+            path: ancestorComponentId,
+            effects: nodeGroup2.renderEffects
+          });
+        }
+        return vNode;
+      },
+      onComponent(comp) {
+        const compId = componentPath(comp.nodeId, ancestorComponentId).format();
+        const existingComp = that.components[compId];
+        if (existingComp) {
+          detach(existingComp);
+          that.compareNodes(existingComp, comp, ancestorComponentId);
+          return existingComp;
+        }
+        const cNode = componentNode(comp.component, comp.nodeId);
+        if (comp.componentEventListeners.length > 0) {
+          cNode.componentEventListeners = comp.componentEventListeners;
+          that.eventManager.setContainerListeners(cNode);
+        }
+        that.injectComponentCss(comp.component);
+        that.components[compId] = cNode;
+        that.addedComponents.push(
+          componentPath(comp.nodeId, ancestorComponentId)
+        );
+        return cNode;
+      }
+    });
+  }
+  //   private compareNodes(
+  //     oldNode: InternalNode,
+  //     newNode: Node<unknown, unknown>,
+  //     parent: RealElement,
+  //     prevSibling: RealNode | null,
+  //     ancestorComponentId: ComponentId
+  //   ): RealNode | null {
+  //     if (typeof (newNode) === 'string') {
+  //       if (oldNode._type === 'InternalTextNode') {
+  //         if (oldNode.text !== newNode) {
+  //           oldNode.realNode.nodeValue = newNode
+  //         }
+  //         return oldNode.realNode
+  //       }
+  //       this.removeNode(oldNode)
+  //       return this.addNode1(newNode, parent, prevSibling, ancestorComponentId)
+  //     }
+  //     switch (newNode._type) {
+  //       case 'Element': {
+  //         if (
+  //           oldNode._type === 'InternalElementNode' &&
+  //           newNode.tag === oldNode.tag
+  //         ) {
+  //           this.compareElements(oldNode, newNode)
+  //           return oldNode.realNode
+  //         } else {
+  //           this.removeNode(oldNode)
+  //           return this.addNode1(newNode, parent, prevSibling, ancestorComponentId)
+  //         }
+  //       }
+  //       case 'Component': {
+  //         return todo()
+  //       }
+  //       case 'View': {
+  //         return todo()
+  //       }
+  //     }
+  //   }
+  /**
+   * Return an old node that can be compared to `newNode`.
+   *
+   * If the old node represent the same node as `newNode`, return it.
+   *
+   * If the same node isn't found, return the first node if it is `comparable`,
+   * otherwise return undefined. (We don't move nodes if they are comparable but
+   * not the same).
+   */
+  findCorrespondingOldNode(newNode, oldNodes, ancestorComponentPath) {
+    if (typeof newNode !== "string" && newNode._type === "Component") {
+      const registeredComponent = this.components[componentPath(newNode.nodeId, ancestorComponentPath).format()];
+      if (registeredComponent) {
+        return registeredComponent;
+      }
+    }
+    if (typeof newNode !== "string" && newNode._type === "View") {
+      const registeredView = this.views[componentPath(newNode.nodeId, ancestorComponentPath).format()];
+      if (registeredView) {
+        return registeredView;
+      }
+    }
+    let next = oldNodes;
+    while (next) {
+      if (getNodesRelationship(next, newNode) === "same") {
+        return next;
+      }
+      next = next.nextSibling;
+    }
+    if (oldNodes) {
+      if (getNodesRelationship(oldNodes, newNode) === "comparable") {
+        return oldNodes;
+      }
+    }
+    return void 0;
+  }
+};
+function getNodesRelationship(oldNode, newNode) {
+  if (typeof newNode === "string") {
+    return oldNode._type === "InternalTextNode" ? "comparable" : "unrelated";
+  }
+  if (oldNode._type === "InternalTextNode") {
+    return "unrelated";
+  }
+  switch (newNode._type) {
+    case "Element": {
+      if (oldNode._type === "InternalElementNode") {
+        if (newNode.nodeId) {
+          if (oldNode.nodeId) {
+            return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+          }
+        } else if (oldNode.nodeId) {
+          return "unrelated";
+        }
+        const oldId = getId(oldNode.attrs);
+        const newId = getId(newNode.attrs);
+        if (newId) {
+          if (oldId) {
+            return oldId === newId ? "same" : "unrelated";
+          } else {
+            return "unrelated";
+          }
+        } else if (oldId) {
+          return "unrelated";
+        }
+        return oldNode.tag === newNode.tag ? "comparable" : "unrelated";
+      } else {
+        return "unrelated";
+      }
+    }
+    case "View":
+      if (oldNode._type === "ViewNode") {
+        return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+      } else {
+        return "unrelated";
+      }
+    case "Component":
+      if (oldNode._type === "ComponentNode") {
+        return newNode.nodeId.eq(oldNode.nodeId) ? "same" : "unrelated";
+      } else {
+        return "unrelated";
+      }
+  }
+}
+function foldTree(root, ancestorComponentPath, init, f) {
+  let acc = init;
+  function visit(n, ancestorComponentPath2, moveThroushSiblings) {
+    acc = f(n, ancestorComponentPath2, acc);
+    switch (n._type) {
+      case "InternalTextNode": {
+        break;
+      }
+      case "InternalElementNode":
+      case "ViewNode": {
+        if (n.firstChild) {
+          visit(n.firstChild, ancestorComponentPath2, true);
+        }
+        break;
+      }
+      case "ComponentNode": {
+        if (n.firstChild) {
+          visit(
+            n.firstChild,
+            componentPath(n.nodeId, ancestorComponentPath2),
+            true
+          );
+        }
+        break;
+      }
+      default: {
+        exhaustivenessCheck(n);
+      }
+    }
+    if (moveThroushSiblings) {
+      let next = n.nextSibling;
+      while (next) {
+        visit(next, ancestorComponentPath2, false);
+        next = next.nextSibling;
+      }
+    }
+  }
+  visit(root, ancestorComponentPath, false);
+  return acc;
+}
+
+// src/internal/styleregistry.ts
+function realStyleRegistry() {
+  const injected = /* @__PURE__ */ new Set();
+  return {
+    injectStyle(css) {
+      if (injected.has(css)) return;
+      injected.add(css);
+      const el = globalThis.document.createElement("style");
+      el.textContent = css;
+      globalThis.document.head.appendChild(el);
+    }
+  };
+}
+function noopStyleRegistry() {
+  return {
+    injectStyle(_css) {
+    }
+  };
+}
+
+// src/db/testdb.ts
+function serializeIdbKey(key) {
+  if (key instanceof Date) return key.toISOString();
+  return JSON.stringify(key);
+}
+var TestDatabaseData = class {
+  constructor(databases) {
+    __publicField(this, "_databases");
+    this._databases = databases;
+  }
+  records(db, store) {
+    return [...this._databases.get(db)?.get(store)?.records.values() ?? []];
+  }
+  getByKey(db, store, key) {
+    return this._databases.get(db)?.get(store)?.records.get(serializeIdbKey(key));
+  }
+  size(db, store) {
+    return this._databases.get(db)?.get(store)?.records.size ?? 0;
+  }
+  hasDatabase(db) {
+    return this._databases.has(db);
+  }
+  hasStore(db, store) {
+    return this._databases.get(db)?.has(store) ?? false;
+  }
+};
+
+// src/scroll.ts
+function scrollElementError(selector) {
+  return { _type: "ScrollElementError", cause: "ElementNotFound", selector };
+}
+
+// src/internal/testinginterpreter.ts
+function seededRandom(callIndex) {
+  let h = callIndex + 1 | 0;
+  h = Math.imul(h ^ h >>> 16, 73244475);
+  h = Math.imul(h ^ h >>> 16, 73244475);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+function snapshotTestData(acc) {
+  return {
+    window: {
+      alerts: [...acc.window.alerts],
+      confirms: [...acc.window.confirms],
+      confirmResponses: [...acc.window.confirmResponses],
+      prompts: [...acc.window.prompts],
+      promptResponses: [...acc.window.promptResponses]
+    },
+    navigator: { appBadgeOperations: [...acc.navigator.appBadgeOperations] },
+    clipboard: {
+      content: acc.clipboard.content,
+      writes: [...acc.clipboard.writes]
+    },
+    document: { title: acc.document.title },
+    http: { interactions: [...acc.http.interactions] },
+    clock: { calls: [...acc.clock.calls] },
+    random: { calls: [...acc.random.calls] },
+    console: { logs: [...acc.console.logs] },
+    db: new TestDatabaseData(
+      new Map(
+        [...acc.db.databases.entries()].map(([dbName, db]) => [
+          dbName,
+          new Map(
+            [...db.stores.entries()].map(([storeName, store]) => [
+              storeName,
+              {
+                keyPath: store.keyPath,
+                records: new Map(store.records),
+                autoIncrementCounter: store.autoIncrementCounter
+              }
+            ])
+          )
+        ])
+      )
+    ),
+    storage: {
+      local: new Map(acc.storage.local),
+      session: new Map(acc.storage.session)
+    },
+    navigation: {
+      locationHistory: [...acc.navigation.locationHistory]
+    },
+    scroll: {
+      windowScrolls: [...acc.scroll.windowScrolls],
+      elementScrolls: [...acc.scroll.elementScrolls]
+    },
+    downloads: [...acc.downloads],
+    broadcasts: {
+      sent: [...acc.broadcasts.sent]
+    },
+    custom: acc.custom
+  };
+}
+var TestScheduler = class {
+  constructor() {
+    __publicField(this, "virtualNow", 0);
+    __publicField(this, "pending", []);
+  }
+  schedule(task, taskCallbacks, tskId, initialDelayInMillis, repeatIntervalInMillis) {
+    this.pending.push({
+      task,
+      taskCallbacks,
+      taskId: tskId,
+      nextFireAtMillis: this.virtualNow + initialDelayInMillis,
+      repeatIntervalInMillis
+    });
+  }
+  cancel(tskId) {
+    this.pending = this.pending.filter((t) => t.taskId !== tskId);
+  }
+  advance(ms, acc, broadcastReg, window2, config) {
+    const targetTime = this.virtualNow + ms;
+    while (true) {
+      const next = this.pending.filter((t) => t.nextFireAtMillis <= targetTime).sort((a, b) => a.nextFireAtMillis - b.nextFireAtMillis)[0];
+      if (!next) break;
+      this.virtualNow = next.nextFireAtMillis;
+      if (next.repeatIntervalInMillis !== void 0) {
+        next.nextFireAtMillis = this.virtualNow + next.repeatIntervalInMillis;
+      } else {
+        this.pending = this.pending.filter((t) => t !== next);
+      }
+      testingInterpreter(
+        next.task,
+        next.taskCallbacks,
+        new TaskRegistry(),
+        acc,
+        broadcastReg,
+        this,
+        window2,
+        config
+      );
+    }
+    this.virtualNow = targetTime;
+  }
+};
+var BroadcastChannelRegistry = class {
+  constructor() {
+    __publicField(this, "channels", /* @__PURE__ */ new Map());
+  }
+  subscribe(channel, handler, tskId, callbacks) {
+    if (!this.channels.has(channel)) this.channels.set(channel, []);
+    this.channels.get(channel).push({ handler, taskId: tskId, callbacks });
+  }
+  unsubscribe(tskId) {
+    for (const [ch, subs] of this.channels) {
+      this.channels.set(ch, subs.filter((s) => s.taskId !== tskId));
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  deliver(channel, message, acc, broadcastReg, scheduler, window2, config) {
+    const subs = this.channels.get(channel) ?? [];
+    for (const sub of subs) {
+      testingInterpreter(
+        sub.handler(message),
+        {
+          ...sub.callbacks,
+          onComplete() {
+          }
+        },
+        new TaskRegistry(),
+        acc,
+        broadcastReg,
+        scheduler,
+        window2,
+        config
+      );
+    }
+  }
+};
+function makeTestingInterpreter(initialData, window2, config) {
+  const acc = {
+    window: {
+      alerts: [...initialData.window.alerts],
+      confirms: [...initialData.window.confirms],
+      confirmResponses: [...initialData.window.confirmResponses],
+      prompts: [...initialData.window.prompts],
+      promptResponses: [...initialData.window.promptResponses]
+    },
+    navigator: {
+      appBadgeOperations: [...initialData.navigator.appBadgeOperations]
+    },
+    clipboard: {
+      content: initialData.clipboard.content,
+      writes: [...initialData.clipboard.writes]
+    },
+    document: { title: initialData.document.title },
+    http: { interactions: [...initialData.http.interactions] },
+    clock: { calls: [...initialData.clock.calls] },
+    random: { calls: [...initialData.random.calls] },
+    console: { logs: [...initialData.console.logs] },
+    storage: {
+      local: new Map(initialData.storage.local),
+      session: new Map(initialData.storage.session)
+    },
+    navigation: {
+      locationHistory: [...initialData.navigation.locationHistory]
+    },
+    scroll: {
+      windowScrolls: [...initialData.scroll.windowScrolls],
+      elementScrolls: [...initialData.scroll.elementScrolls]
+    },
+    downloads: [...initialData.downloads],
+    broadcasts: {
+      sent: [...initialData.broadcasts.sent]
+    },
+    db: {
+      databases: new Map(
+        [...initialData.db._databases.entries()].map(([dbName, dbSnap]) => [
+          dbName,
+          {
+            stores: new Map(
+              [...dbSnap.entries()].map(([storeName, storeSnap]) => [
+                storeName,
+                {
+                  keyPath: storeSnap.keyPath,
+                  records: new Map(storeSnap.records),
+                  autoIncrementCounter: storeSnap.autoIncrementCounter
+                }
+              ])
+            )
+          }
+        ])
+      )
+    },
+    uuidSequence: [],
+    custom: initialData.custom
+  };
+  const scheduler = new TestScheduler();
+  const broadcastReg = new BroadcastChannelRegistry();
+  const interpreter = (effect, callbacks, taskRegistry) => {
+    testingInterpreter(effect, callbacks, taskRegistry, acc, broadcastReg, scheduler, window2, config);
+  };
+  return {
+    interpreter,
+    getData: () => snapshotTestData(acc),
+    advanceTime: (ms) => scheduler.advance(ms, acc, broadcastReg, window2, config),
+    fireBroadcast: (channel, message) => broadcastReg.deliver(channel, message, acc, broadcastReg, scheduler, window2, config)
+  };
+}
+function testingInterpreter(effect, callbacks, taskRegistry, acc, broadcastReg, scheduler, window2, config) {
+  switch (effect._type) {
+    case "Return": {
+      callbacks.onComplete(effect.value);
+      return;
+    }
+    case "FlatMap": {
+      testingInterpreter(
+        effect.effect,
+        {
+          ...callbacks,
+          onComplete(result) {
+            testingInterpreter(
+              effect.next(result),
+              callbacks,
+              taskRegistry,
+              acc,
+              broadcastReg,
+              scheduler,
+              window2,
+              config
+            );
+          }
+        },
+        taskRegistry,
+        acc,
+        broadcastReg,
+        scheduler,
+        window2,
+        config
+      );
+      return;
+    }
+    case "Suspend": {
+      switch (effect.operation._type) {
+        case "Alert": {
+          acc.window.alerts.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "Confirm": {
+          const response = acc.window.confirmResponses.shift() ?? false;
+          acc.window.confirms.push({
+            message: effect.operation.input,
+            response
+          });
+          callbacks.onComplete(response);
+          return;
+        }
+        case "Prompt": {
+          const response = acc.window.promptResponses.shift() ?? null;
+          acc.window.prompts.push({
+            message: effect.operation.input.message,
+            default: effect.operation.input.default,
+            response
+          });
+          callbacks.onComplete(response);
+          return;
+        }
+        case "GetNotificationPermission": {
+          callbacks.onComplete(permission("default"));
+          return;
+        }
+        case "RequestNotificationPermission": {
+          callbacks.onComplete(permission("granted"));
+          return;
+        }
+        case "GetLocation": {
+          const history2 = acc.navigation.locationHistory;
+          callbacks.onComplete(
+            history2.length > 0 ? history2[history2.length - 1] : emptyLocation
+          );
+          return;
+        }
+        case "Async": {
+          testingInterpreter(
+            effect.operation.input.effect,
+            {
+              ...callbacks,
+              onComplete() {
+                callbacks.onComplete(void 0);
+              }
+            },
+            taskRegistry,
+            acc,
+            broadcastReg,
+            scheduler,
+            window2,
+            config
+          );
+          return;
+        }
+        case "CancelTask": {
+          scheduler.cancel(effect.operation.input);
+          broadcastReg.unsubscribe(effect.operation.input);
+          taskRegistry.remove(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ClearAppBadge": {
+          acc.navigator.appBadgeOperations.push({ _type: "ClearAppBadge" });
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SetAppBadge": {
+          acc.navigator.appBadgeOperations.push({
+            _type: "SetAppBadge",
+            count: effect.operation.input
+          });
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SetDocumentTitle": {
+          acc.document.title = effect.operation.input;
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ReadClipboard": {
+          callbacks.onComplete(success(acc.clipboard.content));
+          return;
+        }
+        case "WriteClipboard": {
+          acc.clipboard.content = effect.operation.input;
+          acc.clipboard.writes.push(effect.operation.input);
+          callbacks.onComplete(success(void 0));
+          return;
+        }
+        case "Download": {
+          acc.downloads.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "PostBroadcastMessage": {
+          acc.broadcasts.sent.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SubscribeToBroadcastChannel": {
+          const { channel, handler, taskId: tskIdInput } = effect.operation.input;
+          const tskId = tskIdInput ?? taskId(generateUuid());
+          if (tskIdInput) {
+            broadcastReg.unsubscribe(tskIdInput);
+          }
+          broadcastReg.subscribe(channel, handler, tskId, callbacks);
+          callbacks.onComplete(tskId);
+          return;
+        }
+        case "ScrollWindow": {
+          acc.scroll.windowScrolls.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ScrollElement": {
+          const { selector, options } = effect.operation.input;
+          const el = window2.document.querySelector(selector);
+          if (el === null) {
+            callbacks.onComplete(failure(scrollElementError(selector)));
+          } else {
+            el.scrollTo(options);
+            acc.scroll.elementScrolls.push({ selector, options });
+            callbacks.onComplete(success(void 0));
+          }
+          return;
+        }
+        case "FireEvent": {
+          callbacks.onFireEvent(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "GetState": {
+          callbacks.onComplete(callbacks.getState());
+          return;
+        }
+        case "GetTime": {
+          const callIndex = acc.clock.calls.length;
+          const scripted = config?.clock.values ?? [];
+          const value = callIndex < scripted.length ? scripted[callIndex] : /* @__PURE__ */ new Date(0);
+          acc.clock.calls.push(value);
+          callbacks.onComplete(value);
+          return;
+        }
+        case "GetRandom": {
+          const callIndex = acc.random.calls.length;
+          const scripted = config?.random.values ?? [];
+          const value = callIndex < scripted.length ? scripted[callIndex] : seededRandom(callIndex);
+          acc.random.calls.push(value);
+          callbacks.onComplete(value);
+          return;
+        }
+        case "Log": {
+          acc.console.logs.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "MakeHttpRequest": {
+          const request = effect.operation.input;
+          const handler = config?.http.handler ?? (() => {
+            throw new Error("No HTTP handler configured in TestConfig.");
+          });
+          let result;
+          try {
+            result = handler(request, acc.http.interactions);
+          } catch (err) {
+            result = failure({
+              _type: "RequestError",
+              cause: "UnexpectedError",
+              message: err instanceof Error ? err.message : `Unexpected request error: ${err}`
+            });
+          }
+          acc.http.interactions.push({ request, response: result });
+          callbacks.onComplete(result);
+          return;
+        }
+        case "Product": {
+          let resultA = "__ctrl_fx_unset_result";
+          let resultB = "__ctrl_fx_unset_result";
+          testingInterpreter(
+            effect.operation.input[0],
+            {
+              ...callbacks,
+              onComplete(a) {
+                resultA = a;
+                if (resultB !== "__ctrl_fx_unset_result") {
+                  callbacks.onComplete([resultA, resultB]);
+                }
+              }
+            },
+            taskRegistry,
+            acc,
+            broadcastReg,
+            scheduler,
+            window2,
+            config
+          );
+          testingInterpreter(
+            effect.operation.input[1],
+            {
+              ...callbacks,
+              onComplete(b) {
+                resultB = b;
+                if (resultA !== "__ctrl_fx_unset_result") {
+                  callbacks.onComplete([resultA, resultB]);
+                }
+              }
+            },
+            taskRegistry,
+            acc,
+            broadcastReg,
+            scheduler,
+            window2,
+            config
+          );
+          return;
+        }
+        case "ScheduleTask": {
+          const tskId = effect.operation.input.taskId ?? taskId(generateUuid());
+          if (effect.operation.input.taskId) {
+            scheduler.cancel(effect.operation.input.taskId);
+          }
+          scheduler.schedule(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            effect.operation.input.task,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            { ...callbacks, onComplete() {
+            } },
+            tskId,
+            effect.operation.input.initialDelayInMillis,
+            effect.operation.input.repeatIntervalInMillis
+          );
+          callbacks.onComplete(tskId);
+          return;
+        }
+        case "SetTimeout": {
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "PushState": {
+          acc.navigation.locationHistory.push(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ReplaceState": {
+          if (acc.navigation.locationHistory.length > 0) {
+            acc.navigation.locationHistory[acc.navigation.locationHistory.length - 1] = effect.operation.input;
+          } else {
+            acc.navigation.locationHistory.push(effect.operation.input);
+          }
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "Go": {
+          const delta = effect.operation.input;
+          const newLen = acc.navigation.locationHistory.length + delta;
+          if (newLen > 0) {
+            acc.navigation.locationHistory.length = newLen;
+          }
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "GenerateUuid": {
+          const uuidLen = acc.uuidSequence.length;
+          const nextUuid = uuidFromString(`${uuidLen}`);
+          acc.uuidSequence.push(nextUuid);
+          callbacks.onComplete(nextUuid);
+          return;
+        }
+        case "GetStorageItem": {
+          const store = acc.storage[effect.operation.input.storage];
+          callbacks.onComplete(
+            store.get(effect.operation.input.key) ?? null
+          );
+          return;
+        }
+        case "SetStorageItem": {
+          acc.storage[effect.operation.input.storage].set(
+            effect.operation.input.key,
+            effect.operation.input.value
+          );
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "RemoveStorageItem": {
+          acc.storage[effect.operation.input.storage].delete(
+            effect.operation.input.key
+          );
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ClearStorage": {
+          acc.storage[effect.operation.input.storage].clear();
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "OpenDatabase": {
+          const { db, setup } = effect.operation.input;
+          if (!acc.db.databases.has(db)) {
+            const mutableDb = { stores: /* @__PURE__ */ new Map() };
+            acc.db.databases.set(db, mutableDb);
+            run2(setup(dbVersion(0)), makeSetupInterpreter(mutableDb), (_r) => {
+              callbacks.onComplete(success(void 0));
+            });
+          } else {
+            callbacks.onComplete(success(void 0));
+          }
+          return;
+        }
+        case "RunDbTransaction": {
+          const { db, effect: dbEffect } = effect.operation.input;
+          const mutableDb = acc.db.databases.get(db);
+          if (!mutableDb) {
+            callbacks.onComplete(
+              failure({
+                _type: "UnexpectedError",
+                message: `Database '${db}' is not open`
+              })
+            );
+            return;
+          }
+          run(dbEffect, makeDbInterpreter(mutableDb), (_r) => {
+            callbacks.onComplete(success(void 0));
+          });
+          return;
+        }
+        case "UpdateState": {
+          callbacks.setState(effect.operation.input(callbacks.getState()));
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "CustomEffect": {
+          const { args, test } = effect.operation.input;
+          const result = test(args, acc.custom);
+          acc.custom = result.data;
+          callbacks.onComplete(result.out);
+          return;
+        }
+        default: {
+          exhaustivenessCheck(effect.operation);
+        }
+      }
+      break;
+    }
+    default: {
+      exhaustivenessCheck(effect);
+    }
+  }
+}
+function makeSetupInterpreter(mutableDb) {
+  return (op, onComplete) => {
+    switch (op._type) {
+      case "CreateObjectStore": {
+        mutableDb.stores.set(op.objectStore, {
+          keyPath: op.keyPath,
+          records: /* @__PURE__ */ new Map(),
+          autoIncrementCounter: 1
+        });
+        onComplete(void 0);
+        return;
+      }
+      case "CreateIndex": {
+        onComplete(void 0);
+        return;
+      }
+      case "DeleteObjectStore": {
+        mutableDb.stores.delete(op.objectStore);
+        onComplete(void 0);
+        return;
+      }
+      case "DeleteIndex": {
+        onComplete(void 0);
+        return;
+      }
+      case "GetObjectStoreNames": {
+        onComplete([...mutableDb.stores.keys()]);
+        return;
+      }
+      case "GetIndexNames": {
+        onComplete([]);
+        return;
+      }
+      case "RunDbEffect": {
+        run(
+          op.effect,
+          makeDbInterpreter(mutableDb),
+          (_r) => onComplete(void 0)
+        );
+        return;
+      }
+    }
+  };
+}
+function makeDbInterpreter(mutableDb) {
+  return (op, onComplete) => {
+    switch (op._type) {
+      case "Add":
+      case "Put": {
+        const store = requireStore(mutableDb, op.objectStore);
+        store.records.set(extractKey(op.value, store), op.value);
+        onComplete(void 0);
+        return;
+      }
+      case "Get": {
+        const store = requireStore(mutableDb, op.objectStore);
+        onComplete(store.records.get(serializeIdbKey(op.key)));
+        return;
+      }
+      case "GetAll": {
+        const store = requireStore(mutableDb, op.objectStore);
+        onComplete([...store.records.values()]);
+        return;
+      }
+      case "Delete": {
+        const store = requireStore(mutableDb, op.objectStore);
+        store.records.delete(serializeIdbKey(op.key));
+        onComplete(void 0);
+        return;
+      }
+      case "Count": {
+        const store = requireStore(mutableDb, op.objectStore);
+        onComplete(store.records.size);
+        return;
+      }
+    }
+  };
+}
+function requireStore(mutableDb, storeName) {
+  const store = mutableDb.stores.get(storeName);
+  if (!store) throw new Error(`Object store '${storeName}' not found`);
+  return store;
+}
+function extractKey(value, store) {
+  const { keyPath } = store;
+  switch (keyPath._type) {
+    case "AutoIncrement":
+      return String(store.autoIncrementCounter++);
+    case "Manual": {
+      if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        throw new Error(`Cannot extract key '${keyPath.value}' from non-object`);
+      }
+      return JSON.stringify(value[keyPath.value]);
+    }
+    case "Multi": {
+      if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        throw new Error("Cannot extract compound key from non-object");
+      }
+      const obj = value;
+      return JSON.stringify(
+        [keyPath.first, keyPath.second, ...keyPath.rest].map((f) => obj[f])
+      );
+    }
+  }
+}
+
+// src/internal/testing.ts
+var Node = class {
+  constructor() {
+    __publicField(this, "previousSibling", null);
+    __publicField(this, "nextSibling", null);
+    __publicField(this, "parentNode", null);
+  }
+  remove() {
+    if (this.previousSibling) {
+      this.previousSibling.nextSibling = this.nextSibling;
+    } else {
+      if (this.parentNode) {
+        this.parentNode.firstChild = this.nextSibling;
+      }
+    }
+    if (this.nextSibling) {
+      this.nextSibling.previousSibling = this.previousSibling;
+    }
+    this.parentNode = null;
+  }
+  insertBefore(node) {
+    const newNode = typeof node === "string" ? new TextNode(node) : node;
+    newNode.remove();
+    if (this.previousSibling) {
+      this.previousSibling.nextSibling = newNode;
+      newNode.previousSibling = this.previousSibling;
+    } else {
+      if (this.parentNode) {
+        this.parentNode.firstChild = newNode;
+      }
+    }
+    newNode.nextSibling = this;
+    newNode.parentNode = this.parentNode;
+    this.previousSibling = newNode;
+    return newNode;
+  }
+  insertAfter(node) {
+    const newNode = typeof node === "string" ? new TextNode(node) : node;
+    newNode.remove();
+    if (this.nextSibling) {
+      this.nextSibling.previousSibling = newNode;
+      newNode.nextSibling = this.nextSibling;
+    }
+    newNode.previousSibling = this;
+    newNode.parentNode = this.parentNode;
+    this.nextSibling = newNode;
+    return newNode;
+  }
+  before(...nodes) {
+    let current = this;
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      current = current.insertBefore(nodes[i]);
+    }
+  }
+  after(...nodes) {
+    let current = this;
+    for (let i = 0; i < nodes.length; i++) {
+      current = current.insertAfter(nodes[i]);
+    }
+  }
+};
+var TextNode = class extends Node {
+  constructor(nodeValue) {
+    super();
+    __publicField(this, "nodeValue");
+    this.nodeValue = nodeValue;
+  }
+};
+var ElementNode = class _ElementNode extends Node {
+  constructor(tagName) {
+    super();
+    __publicField(this, "tagName");
+    __publicField(this, "attributes", {});
+    __publicField(this, "firstChild", null);
+    __publicField(this, "scrollTop", 0);
+    __publicField(this, "scrollLeft", 0);
+    __publicField(this, "eventListeners", []);
+    this.tagName = tagName;
+  }
+  scrollTo(options) {
+    if (options.top !== void 0) this.scrollTop = options.top;
+    if (options.left !== void 0) this.scrollLeft = options.left;
+  }
+  removeAttribute(name) {
+    delete this.attributes[name];
+  }
+  setAttribute(name, value) {
+    this.attributes[name] = value;
+  }
+  lastChild() {
+    let child = this.firstChild;
+    while (child && child.nextSibling) {
+      child = child.nextSibling;
+    }
+    return child;
+  }
+  append(...nodes) {
+    if (nodes.length === 0) {
+      return;
+    }
+    let last = this.lastChild();
+    if (!last) {
+      this.firstChild = nodes[0];
+      this.firstChild.parentNode = this;
+      nodes = nodes.slice(1);
+      last = this.firstChild;
+    }
+    last.after(...nodes);
+  }
+  prepend(...nodes) {
+    if (this.firstChild) {
+      this.firstChild.before(...nodes);
+    } else {
+      this.append(...nodes);
+    }
+  }
+  addEventListener(type, listener, options) {
+    this.eventListeners.push({
+      type,
+      listener,
+      options
+    });
+  }
+  removeEventListener(type, listener, useCapture) {
+    this.eventListeners = this.eventListeners.filter((el) => {
+      return !(el.type === type && el.listener === listener && (useCapture ? el.options.capture : !el.options.capture));
+    });
+  }
+  matchesSelector(selector) {
+    const parts = parseSelector(selector);
+    return matchesSelectorSequence(this, parts);
+  }
+  traverseAndCollect(selector, result) {
+    if (this.matchesSelector(selector)) {
+      result.push(this);
+    }
+    let child = this.firstChild;
+    while (child) {
+      if (child instanceof _ElementNode) {
+        child.traverseAndCollect(selector, result);
+      }
+      child = child.nextSibling;
+    }
+  }
+  querySelector(selector) {
+    const results = this.querySelectorAll(selector);
+    return results.length > 0 ? results[0] : null;
+  }
+  querySelectorAll(selector) {
+    const result = [];
+    this.traverseAndCollect(selector, result);
+    return result;
+  }
+};
+var Document = class {
+  constructor() {
+    __publicField(this, "head", this.createElement("head"));
+    __publicField(this, "body", this.createElement("body"));
+    __publicField(this, "visibilityState", "visible");
+    __publicField(this, "documentEventListeners", []);
+  }
+  createTextNode(text) {
+    return new TextNode(text);
+  }
+  getElementById(id) {
+    return this.body.querySelector("#" + id);
+  }
+  querySelector(selector) {
+    return this.body.querySelector(selector);
+  }
+  createElement(tag) {
+    return new ElementNode(tag);
+  }
+  addEventListener(type, listener, options) {
+    this.documentEventListeners.push({ type, listener, options });
+  }
+  removeEventListener(type, listener, useCapture) {
+    this.documentEventListeners = this.documentEventListeners.filter(
+      (el) => !(el.type === type && el.listener === listener && (useCapture ? el.options.capture : !el.options.capture))
+    );
+  }
+};
+var Window = class {
+  constructor() {
+    __publicField(this, "document", new Document());
+    __publicField(this, "innerWidth", 1024);
+    __publicField(this, "innerHeight", 768);
+    __publicField(this, "location", {
+      protocol: "http",
+      hostname: "localhost",
+      port: "8080",
+      pathname: "/",
+      search: "",
+      hash: ""
+    });
+    __publicField(this, "eventListeners", []);
+  }
+  addEventListener(type, listener, options) {
+    this.eventListeners.push({
+      type,
+      listener,
+      options
+    });
+  }
+  removeEventListener(type, listener, useCapture) {
+    this.eventListeners = this.eventListeners.filter((el) => {
+      return !(el.type === type && el.listener === listener && (useCapture ? el.options.capture : !el.options.capture));
+    });
+  }
+};
+function serializeElement(elem) {
+  const attrs = Object.entries(elem.attributes).map(
+    ([name, value]) => ({ name, value })
+  );
+  const childNodes = [];
+  let child = elem.firstChild;
+  while (child) {
+    if (child instanceof TextNode) {
+      childNodes.push(child.nodeValue);
+    } else if (child instanceof ElementNode) {
+      childNodes.push(serializeElement(child));
+    }
+    child = child.nextSibling;
+  }
+  return { tag: elem.tagName, attrs, childNodes };
+}
+function serializeDom(doc) {
+  return {
+    head: serializeElement(doc.head),
+    body: serializeElement(doc.body)
+  };
+}
+function dispatchClick(element) {
+  const syntheticEvent = {
+    type: "click",
+    target: null,
+    eventPhase: 2,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopImmediatePropagation() {
+      this.propagationStopped = true;
+    }
+  };
+  for (const entry of element.eventListeners) {
+    if (entry.type === "click") {
+      entry.listener(syntheticEvent);
+      if (syntheticEvent.propagationStopped) {
+        break;
+      }
+    }
+  }
+}
+function dispatchSubmit(element) {
+  const syntheticEvent = {
+    type: "submit",
+    target: null,
+    eventPhase: 2,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopImmediatePropagation() {
+      this.propagationStopped = true;
+    }
+  };
+  for (const entry of element.eventListeners) {
+    if (entry.type === "submit") {
+      entry.listener(syntheticEvent);
+      if (syntheticEvent.propagationStopped) {
+        break;
+      }
+    }
+  }
+}
+function dispatchCustomEvent(element, eventName, detail) {
+  const syntheticEvent = {
+    type: eventName,
+    detail,
+    target: null,
+    eventPhase: 2,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopImmediatePropagation() {
+      this.propagationStopped = true;
+    }
+  };
+  for (const entry of element.eventListeners) {
+    if (entry.type === eventName) {
+      entry.listener(syntheticEvent);
+      if (syntheticEvent.propagationStopped) {
+        break;
+      }
+    }
+  }
+}
+function dispatchTextInput(element, value) {
+  const syntheticEvent = {
+    type: "input",
+    target: { tagName: "INPUT", value, selectionStart: value.length, selectionEnd: value.length },
+    eventPhase: 2,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopImmediatePropagation() {
+      this.propagationStopped = true;
+    }
+  };
+  for (const entry of element.eventListeners) {
+    if (entry.type === "input") {
+      entry.listener(syntheticEvent);
+      if (syntheticEvent.propagationStopped) {
+        break;
+      }
+    }
+  }
+}
+function querySelectorAllInApp(window2, selector) {
+  const appRoot = window2.document.getElementById("app");
+  if (!appRoot) return [];
+  const results = [];
+  let child = appRoot.firstChild;
+  while (child) {
+    if (child instanceof ElementNode) {
+      results.push(...child.querySelectorAll(selector));
+    }
+    child = child.nextSibling;
+  }
+  return results;
+}
+function makeWindow() {
+  const win = new Window();
+  const root = win.document.createElement("div");
+  root.setAttribute("id", "app");
+  win.document.body.append(root);
+  return win;
+}
+var TestableComponentImpl = class _TestableComponentImpl {
+  constructor(component, state, config, data, dom, window2, mountedPaths) {
+    __publicField(this, "config");
+    __publicField(this, "data");
+    __publicField(this, "dom");
+    __publicField(this, "_component");
+    __publicField(this, "state");
+    __publicField(this, "_window");
+    // Component paths already mounted by a previous ComponentManager in this
+    // chain of .run() calls. Each .run() mounts a fresh ComponentManager (the
+    // DOM/scheduler/subscriptions don't persist), so without this, onRender
+    // effects would fire again on every chained .run() even though, from the
+    // test's perspective, the component was already mounted.
+    __publicField(this, "_mountedPaths");
+    this._component = component;
+    this.state = state;
+    this.config = config;
+    this.data = data;
+    this.dom = dom;
+    this._window = window2;
+    this._mountedPaths = mountedPaths;
+  }
+  withConfig(config) {
+    return new _TestableComponentImpl(
+      this._component,
+      this.state,
+      config,
+      this.data,
+      this.dom,
+      this._window,
+      this._mountedPaths
+    );
+  }
+  withData(data) {
+    return new _TestableComponentImpl(
+      this._component,
+      this.state,
+      this.config,
+      data,
+      this.dom,
+      this._window,
+      this._mountedPaths
+    );
+  }
+  run(...interactions) {
+    const win = makeWindow();
+    const { interpreter, getData, advanceTime: advanceTime2, fireBroadcast } = makeTestingInterpreter(
+      this.data,
+      win,
+      this.config
+    );
+    const currentState = this.state;
+    const wrappedComponent = {
+      ...this._component,
+      initialState: (_params) => pure(currentState)
+    };
+    const appNode = win.document.getElementById("app");
+    const mgr = new ComponentManager(
+      wrappedComponent,
+      appNode,
+      win,
+      interpreter,
+      noopStyleRegistry(),
+      void 0,
+      this._mountedPaths
+    );
+    for (const interaction of interactions) {
+      if ("_type" in interaction) {
+        switch (interaction._type) {
+          case "AdvanceTime":
+            advanceTime2(interaction.milliseconds);
+            break;
+          case "ReceiveBroadcast":
+            fireBroadcast(interaction.channel, interaction.message);
+            break;
+          case "FireCustomEvent": {
+            const qs = interaction.selector;
+            const cssSelector = qs.selector;
+            const results = win.document.body.querySelectorAll(cssSelector);
+            results.forEach(
+              (el) => dispatchCustomEvent(el, interaction.eventName, interaction.detail)
+            );
+            break;
+          }
+          case "Submit": {
+            const qs = interaction.selector;
+            const cssSelector = qs.selector;
+            const results = win.document.body.querySelectorAll(cssSelector);
+            results.forEach((el) => dispatchSubmit(el));
+            break;
+          }
+          case "TextInput": {
+            const qs = interaction.selector;
+            const cssSelector = qs.selector;
+            const results = win.document.body.querySelectorAll(cssSelector);
+            results.forEach((el) => dispatchTextInput(el, interaction.value));
+            break;
+          }
+          default:
+            exhaustivenessCheck(interaction);
+        }
+      } else {
+        switch (interaction.type) {
+          case "Click": {
+            const qs = interaction.selector;
+            const cssSelector = qs.selector;
+            const results = win.document.body.querySelectorAll(cssSelector);
+            switch (qs._type) {
+              case "ExactlyOne":
+                if (results.length !== 1)
+                  throw new Error(
+                    `Expected exactly one element matching '${cssSelector}', found ${results.length}`
+                  );
+                break;
+              case "OneOrMore":
+                if (results.length === 0)
+                  throw new Error(
+                    `Expected at least one element matching '${cssSelector}', found 0`
+                  );
+                break;
+              case "ZeroOrOne":
+                if (results.length > 1)
+                  throw new Error(
+                    `Expected zero or one element matching '${cssSelector}', found ${results.length}`
+                  );
+                break;
+              case "ZeroOrMore":
+                break;
+              default:
+                exhaustivenessCheck(qs);
+            }
+            results.forEach((el) => dispatchClick(el));
+            break;
+          }
+          default:
+            exhaustivenessCheck(interaction.type);
+        }
+      }
+    }
+    const stateAfter = mgr.getRootState();
+    const newState = stateAfter._type === "Ready" ? stateAfter.value : currentState;
+    return new _TestableComponentImpl(
+      this._component,
+      newState,
+      this.config,
+      getData(),
+      serializeDom(win.document),
+      win,
+      mgr.getMountedPaths()
+    );
+  }
+  find(selector) {
+    return querySelectorAllInApp(this._window, selector).map(serializeElement);
+  }
+  findOne(selector) {
+    const results = querySelectorAllInApp(this._window, selector);
+    if (results.length !== 1)
+      throw new Error(
+        `findOne('${selector}'): expected 1 element, found ${results.length}`
+      );
+    return serializeElement(results[0]);
+  }
+  findOneOrMore(selector) {
+    const results = querySelectorAllInApp(this._window, selector);
+    if (results.length === 0)
+      throw new Error(
+        `findOneOrMore('${selector}'): expected at least 1 element, found 0`
+      );
+    return results.map(serializeElement);
+  }
+  findMaybeOne(selector) {
+    const results = querySelectorAllInApp(this._window, selector);
+    if (results.length > 1)
+      throw new Error(
+        `findMaybeOne('${selector}'): expected 0 or 1 elements, found ${results.length}`
+      );
+    return results.length === 0 ? void 0 : serializeElement(results[0]);
+  }
+};
+function testableComponent(component, config, data) {
+  const initialData = data || newTestData();
+  const win = makeWindow();
+  const { interpreter, getData } = makeTestingInterpreter(
+    initialData,
+    win,
+    config
+  );
+  const appNode = win.document.getElementById("app");
+  const mgr = new ComponentManager(
+    component,
+    appNode,
+    win,
+    interpreter,
+    noopStyleRegistry()
+  );
+  const stateAfter = mgr.getRootState();
+  const currentState = stateAfter._type === "Ready" ? stateAfter.value : void 0;
+  return new TestableComponentImpl(
+    component,
+    currentState,
+    config,
+    getData(),
+    serializeDom(win.document),
+    win,
+    mgr.getMountedPaths()
+  );
+}
+function parseSelector(selector) {
+  const parts = selector.trim().split(/\s+/);
+  return parts.map(parsePart);
+}
+function parsePart(part) {
+  const attrs = {};
+  const classes = [];
+  let tag = void 0;
+  if (part.startsWith("#")) {
+    attrs["id"] = part.substring(1);
+    return { tag, classes, attrs };
+  }
+  if (part.startsWith(".")) {
+    classes.push(part.substring(1));
+    return { tag, classes, attrs };
+  }
+  const attrRegex = /\[([^\]=]+)=([^\]]+)\]/g;
+  let match;
+  while ((match = attrRegex.exec(part)) !== null) {
+    attrs[match[1]] = match[2];
+  }
+  const withoutAttrs = part.replace(attrRegex, "").trim();
+  const dotParts = withoutAttrs.split(".");
+  tag = dotParts[0] || void 0;
+  classes.push(...dotParts.slice(1));
+  return { tag, classes, attrs };
+}
+function matchesPart(element, part) {
+  if (part.tag && element.tagName.toLowerCase() !== part.tag.toLowerCase()) {
+    return false;
+  }
+  for (const cls of part.classes) {
+    const elementClasses = (element.attributes["class"] || "").split(/\s+/);
+    if (!elementClasses.includes(cls)) {
+      return false;
+    }
+  }
+  for (const [attr2, value] of Object.entries(part.attrs)) {
+    if (element.attributes[attr2] !== value) {
+      return false;
+    }
+  }
+  return true;
+}
+function matchesSelectorSequence(element, parts) {
+  if (parts.length === 0) return true;
+  if (!matchesPart(element, parts[parts.length - 1])) {
+    return false;
+  }
+  if (parts.length === 1) return true;
+  let ancestor = element.parentNode;
+  for (let i = parts.length - 2; i >= 0; i--) {
+    let found = false;
+    while (ancestor) {
+      if (matchesPart(ancestor, parts[i])) {
+        found = true;
+        ancestor = ancestor.parentNode;
+        break;
+      }
+      ancestor = ancestor.parentNode;
+    }
+    if (!found) return false;
+  }
+  return true;
+}
+
+// src/internal/index.ts
+function componentPath(id, parentComponentPath) {
+  return {
+    parentComponentPath,
+    nodeId: typeof id === "string" ? nodeId(id) : id,
+    format() {
+      return formatComponentPath(this);
+    }
+  };
+}
+function formatComponentPath(path) {
+  const parentStr = path.parentComponentPath ? formatComponentPath(path.parentComponentPath) : "";
+  return parentStr + "/" + encodeURIComponent(path.nodeId.value);
+}
+function generateUuid() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  } else {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c == "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+}
+function testComponent(component, config, data) {
+  return testableComponent(component, config ?? defaultTestConfig(), data);
+}
+
+// src/clipboard.ts
+function clipboardError(cause, message) {
+  return { _type: "ClipboardError", cause, message };
+}
+
+// src/internal/clipboard.ts
+function writeClipboard(text, callback) {
+  if (!globalThis.navigator?.clipboard?.writeText) {
+    callback(
+      failure(clipboardError("NotSupported", "Clipboard API not available"))
+    );
+    return;
+  }
+  globalThis.navigator.clipboard.writeText(text).then(() => callback(success(void 0))).catch((err) => callback(failure(toClipboardError(err))));
+}
+function readClipboard(callback) {
+  if (!globalThis.navigator?.clipboard?.readText) {
+    callback(
+      failure(clipboardError("NotSupported", "Clipboard API not available"))
+    );
+    return;
+  }
+  globalThis.navigator.clipboard.readText().then((text) => callback(success(text))).catch((err) => callback(failure(toClipboardError(err))));
+}
+function toClipboardError(err) {
+  if (err instanceof DOMException && err.name === "NotAllowedError") {
+    return clipboardError("NotAllowed", err.message);
+  } else if (err instanceof Error) {
+    return clipboardError("UnexpectedError", err.message);
+  } else {
+    return clipboardError("UnexpectedError", `Unexpected clipboard error: ${err}`);
+  }
+}
+
+// src/db/errors.ts
+function unexpectedError(params) {
+  return {
+    _type: "UnexpectedError",
+    cause: params.cause,
+    message: params.message
+  };
+}
+function notFoundError(cause) {
+  return { _type: "NotFoundError", cause };
+}
+function constraintError(cause) {
+  return { _type: "ConstraintError", cause };
+}
+
+// src/internal/dbmgr.ts
+var DbManager = class {
+  constructor() {
+    __publicField(this, "openDatabases", /* @__PURE__ */ new Map());
+  }
+  open(db, version, setup, callback) {
+    const idbFactory = globalThis.indexedDB;
+    if (!idbFactory) {
+      return callback(
+        failure(unexpectedError({ message: "IndexedDB not supported" }))
+      );
+    }
+    const openRequest = idbFactory.open(db, version);
+    openRequest.onblocked = (_event) => {
+      window.alert(
+        "A database upgrade is blocked. Please close other tabs with this app."
+      );
+    };
+    let upgradeError = void 0;
+    openRequest.onupgradeneeded = (versionChangeEvent) => {
+      const idbDb = openRequest.result;
+      const tx = openRequest.transaction;
+      if (!tx) {
+        console.warn("Expected idb transaction to be non-null during upgrade");
+        return;
+      }
+      const oldVersion = dbVersion(versionChangeEvent.oldVersion);
+      const effect = setup(oldVersion);
+      try {
+        run2(effect, setupInterpreter(idbDb, tx), (_result) => {
+        });
+      } catch (err) {
+        if (err instanceof Error) upgradeError = err;
+        throw err;
+      }
+    };
+    openRequest.onerror = (event) => {
+      if (upgradeError instanceof DOMException) {
+        if (upgradeError.name === "ConstraintError") {
+          return callback(failure(constraintError(upgradeError)));
+        }
+        if (upgradeError.name === "NotFoundError") {
+          return callback(failure(notFoundError(upgradeError)));
+        }
+      }
+      return callback(
+        failure(
+          unexpectedError({
+            message: extractMessage(event),
+            cause: upgradeError
+          })
+        )
+      );
+    };
+    openRequest.onsuccess = (_event) => {
+      this.openDatabases.set(db, openRequest.result);
+      callback(success(void 0));
+    };
+  }
+  runTransaction(db, objectStores, mode, effect, callback) {
+    const idbDb = this.openDatabases.get(db);
+    if (!idbDb) {
+      return callback(
+        failure(unexpectedError({ message: `Database '${db}' is not open` }))
+      );
+    }
+    const tx = idbDb.transaction([...objectStores], mode);
+    let txError = null;
+    tx.onerror = (_event) => {
+      txError = tx.error;
+    };
+    tx.onabort = (_event) => {
+      if (txError !== null) {
+        if (txError.name === "ConstraintError") {
+          return callback(failure(constraintError(txError)));
+        }
+        if (txError.name === "NotFoundError") {
+          return callback(failure(notFoundError(txError)));
+        }
+        return callback(failure(unexpectedError({ cause: txError })));
+      }
+      return callback(
+        failure(unexpectedError({ message: "Transaction aborted" }))
+      );
+    };
+    tx.oncomplete = (_event) => {
+      callback(success(void 0));
+    };
+    run(effect, dbInterpreter(tx), (_result) => {
+    });
+  }
+};
+function setupInterpreter(db, tx) {
+  return (op, onComplete) => {
+    switch (op._type) {
+      case "CreateObjectStore": {
+        db.createObjectStore(op.objectStore, objectStoreKeyOptions(op.keyPath));
+        onComplete(void 0);
+        return;
+      }
+      case "CreateIndex": {
+        const store = tx.objectStore(op.objectStore);
+        store.createIndex(op.index, indexKeyPathValue(op.keyPath), {
+          unique: op.unique
+        });
+        onComplete(void 0);
+        return;
+      }
+      case "DeleteObjectStore": {
+        db.deleteObjectStore(op.objectStore);
+        onComplete(void 0);
+        return;
+      }
+      case "DeleteIndex": {
+        const store = tx.objectStore(op.objectStore);
+        store.deleteIndex(op.index);
+        onComplete(void 0);
+        return;
+      }
+      case "GetObjectStoreNames": {
+        onComplete(Array.from(db.objectStoreNames));
+        return;
+      }
+      case "GetIndexNames": {
+        const store = tx.objectStore(op.objectStore);
+        onComplete(Array.from(store.indexNames));
+        return;
+      }
+      case "RunDbEffect": {
+        run(
+          op.effect,
+          dbInterpreter(tx),
+          (_result) => onComplete(void 0)
+        );
+        return;
+      }
+    }
+  };
+}
+function dbInterpreter(tx) {
+  return (op, onComplete) => {
+    switch (op._type) {
+      case "Add": {
+        const req = tx.objectStore(op.objectStore).add(op.value);
+        req.onsuccess = () => onComplete(void 0);
+        return;
+      }
+      case "Put": {
+        const req = tx.objectStore(op.objectStore).put(op.value);
+        req.onsuccess = () => onComplete(void 0);
+        return;
+      }
+      case "Get": {
+        const req = tx.objectStore(op.objectStore).get(op.key);
+        req.onsuccess = () => onComplete(req.result ?? void 0);
+        return;
+      }
+      case "GetAll": {
+        const req = tx.objectStore(op.objectStore).getAll();
+        req.onsuccess = () => onComplete(req.result);
+        return;
+      }
+      case "Delete": {
+        const req = tx.objectStore(op.objectStore).delete(op.key);
+        req.onsuccess = () => onComplete(void 0);
+        return;
+      }
+      case "Count": {
+        const req = tx.objectStore(op.objectStore).count();
+        req.onsuccess = () => onComplete(req.result);
+        return;
+      }
+    }
+  };
+}
+function objectStoreKeyOptions(keyPath) {
+  switch (keyPath._type) {
+    case "AutoIncrement":
+      return { keyPath: keyPath.value, autoIncrement: true };
+    case "Manual":
+      return { keyPath: keyPath.value, autoIncrement: false };
+    case "Multi":
+      return {
+        keyPath: [keyPath.first, keyPath.second, ...keyPath.rest],
+        autoIncrement: false
+      };
+  }
+}
+function indexKeyPathValue(keyPath) {
+  switch (keyPath._type) {
+    case "SingleIndex":
+      return keyPath.value;
+    case "MultiIndex":
+      return [keyPath.first, keyPath.second, ...keyPath.rest];
+  }
+}
+function extractMessage(event) {
+  const m = event.message;
+  if (typeof m === "string") return m;
+  if (m != null) return `${m}`;
+  return void 0;
+}
+
+// src/internal/net.ts
+function makeHttpRequest(request, callback) {
+  console.log("About to fetch " + request.uri);
+  globalThis.fetch(request.uri, {
+    method: request.method,
+    headers: request.headers,
+    body: request.body
+  }).catch((err) => handleError(err, callback)).then((response) => {
+    if (response) {
+      response.arrayBuffer().catch((err) => handleError(err, callback)).then((ab) => {
+        if (ab) {
+          callback(
+            success({
+              status: response.status,
+              headers: convertHeaders(response.headers),
+              body: new ResponseBody(ab)
+            })
+          );
+        }
+      });
+    }
+  });
+}
+function handleError(err, callback) {
+  if (err instanceof DOMException && err.name === "AbortError") {
+    callback(
+      failure({
+        _type: "RequestError",
+        cause: "RequestAborted",
+        message: err.message
+      })
+    );
+  } else if (err instanceof TypeError) {
+    callback(
+      failure({
+        _type: "RequestError",
+        cause: "NetworkFailure",
+        message: err.message
+      })
+    );
+  } else if (err instanceof Error) {
+    callback(
+      failure({
+        _type: "RequestError",
+        cause: "UnexpectedError",
+        message: err.message
+      })
+    );
+  } else {
+    callback(
+      failure({
+        _type: "RequestError",
+        cause: "UnexpectedError",
+        message: `Unexpected request error: ${err}`
+      })
+    );
+  }
+}
+function convertHeaders(headers) {
+  const result = {};
+  for (const [key, value] of headers) {
+    result[key] = value;
+  }
+  return result;
+}
+
+// src/internal/dominterpreter.ts
+var dbManager = new DbManager();
+function domInterpreter(effect, callbacks, taskRegistry) {
+  switch (effect._type) {
+    case "Return": {
+      callbacks.onComplete(effect.value);
+      return;
+    }
+    case "FlatMap": {
+      domInterpreter(
+        effect.effect,
+        {
+          ...callbacks,
+          onComplete(result) {
+            domInterpreter(effect.next(result), callbacks, taskRegistry);
+          }
+        },
+        taskRegistry
+      );
+      return;
+    }
+    case "Suspend": {
+      switch (effect.operation._type) {
+        case "Alert": {
+          globalThis.window.alert(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "Confirm": {
+          callbacks.onComplete(
+            globalThis.window.confirm(effect.operation.input)
+          );
+          return;
+        }
+        case "Prompt": {
+          callbacks.onComplete(
+            globalThis.window.prompt(
+              effect.operation.input.message,
+              effect.operation.input.default
+            )
+          );
+          return;
+        }
+        case "GetNotificationPermission": {
+          callbacks.onComplete(
+            permission(globalThis.Notification.permission)
+          );
+          return;
+        }
+        case "RequestNotificationPermission": {
+          globalThis.Notification.requestPermission().then((perm) => {
+            callbacks.onComplete(permission(perm));
+          });
+          return;
+        }
+        case "GetLocation": {
+          const loc = globalThis.window.location;
+          callbacks.onComplete(
+            parseInternalLocation(loc.pathname + loc.search + loc.hash)
+          );
+          return;
+        }
+        case "Async": {
+          const { effect: innerEffect, delayInMillis } = effect.operation.input;
+          setTimeout(() => {
+            domInterpreter(
+              innerEffect,
+              { ...callbacks, onComplete() {
+              } },
+              taskRegistry
+            );
+          }, delayInMillis);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "CancelTask": {
+          taskRegistry.cancel(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ClearAppBadge": {
+          if (globalThis.navigator.clearAppBadge) {
+            globalThis.navigator.clearAppBadge();
+          }
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SetAppBadge": {
+          if (globalThis.navigator.setAppBadge) {
+            globalThis.navigator.setAppBadge(effect.operation.input);
+          }
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SetDocumentTitle": {
+          globalThis.document.title = effect.operation.input;
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "FireEvent": {
+          callbacks.onFireEvent(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "GetState": {
+          callbacks.onComplete(callbacks.getState());
+          return;
+        }
+        case "GetTime": {
+          callbacks.onComplete(/* @__PURE__ */ new Date());
+          return;
+        }
+        case "GetRandom": {
+          callbacks.onComplete(Math.random());
+          return;
+        }
+        case "MakeHttpRequest": {
+          makeHttpRequest(
+            effect.operation.input,
+            (result) => callbacks.onComplete(result)
+          );
+          return;
+        }
+        case "Log": {
+          console.log(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "Product": {
+          let resultA = "__ctrl_fx_unset_result";
+          let resultB = "__ctrl_fx_unset_result";
+          domInterpreter(
+            effect.operation.input[0],
+            {
+              ...callbacks,
+              onComplete(a) {
+                resultA = a;
+                if (resultB !== "__ctrl_fx_unset_result") {
+                  callbacks.onComplete([resultA, resultB]);
+                }
+              }
+            },
+            taskRegistry
+          );
+          domInterpreter(
+            effect.operation.input[1],
+            {
+              ...callbacks,
+              onComplete(b) {
+                resultB = b;
+                if (resultA !== "__ctrl_fx_unset_result") {
+                  callbacks.onComplete([resultA, resultB]);
+                }
+              }
+            },
+            taskRegistry
+          );
+          return;
+        }
+        case "ScheduleTask": {
+          let tskId;
+          if (effect.operation.input.taskId) {
+            taskRegistry.cancel(effect.operation.input.taskId);
+            tskId = effect.operation.input.taskId;
+          }
+          if (effect.operation.input.repeatIntervalInMillis === void 0) {
+            const timerId = globalThis.setTimeout(() => {
+              domInterpreter(
+                effect.operation.input.task,
+                { ...callbacks, onComplete() {
+                } },
+                taskRegistry
+              );
+            }, effect.operation.input.initialDelayInMillis);
+            tskId ||= taskId(generateUuid());
+            taskRegistry.set(tskId, () => clearTimeout(timerId));
+          } else if (effect.operation.input.initialDelayInMillis === effect.operation.input.repeatIntervalInMillis) {
+            const timerId = globalThis.setInterval(() => {
+              domInterpreter(
+                effect.operation.input.task,
+                { ...callbacks, onComplete() {
+                } },
+                taskRegistry
+              );
+            }, effect.operation.input.repeatIntervalInMillis);
+            tskId ||= taskId(generateUuid());
+            taskRegistry.set(tskId, () => clearInterval(timerId));
+          } else {
+            tskId ||= taskId(generateUuid());
+            const timerId = globalThis.setTimeout(() => {
+              domInterpreter(
+                effect.operation.input.task,
+                {
+                  ...callbacks,
+                  onComplete() {
+                    const newTimerId = globalThis.setInterval(() => {
+                      domInterpreter(
+                        effect.operation.input.task,
+                        { ...callbacks, onComplete() {
+                        } },
+                        taskRegistry
+                      );
+                    }, effect.operation.input.repeatIntervalInMillis);
+                    taskRegistry.set(tskId, () => clearInterval(newTimerId));
+                  }
+                },
+                taskRegistry
+              );
+            }, effect.operation.input.initialDelayInMillis);
+            taskRegistry.set(tskId, () => clearTimeout(timerId));
+          }
+          callbacks.onComplete(tskId);
+          return;
+        }
+        case "SetTimeout": {
+          setTimeout(() => {
+            callbacks.onComplete(void 0);
+          }, effect.operation.input);
+          return;
+        }
+        case "PushState": {
+          const url = formatLocation(effect.operation.input);
+          history.pushState(null, "", url);
+          window.dispatchEvent(new Event("locationchange"));
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ReplaceState": {
+          const url = formatLocation(effect.operation.input);
+          history.replaceState(null, "", url);
+          window.dispatchEvent(new Event("locationchange"));
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "Go": {
+          history.go(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "GetStorageItem": {
+          const store = effect.operation.input.storage === "local" ? localStorage : sessionStorage;
+          callbacks.onComplete(store.getItem(effect.operation.input.key));
+          return;
+        }
+        case "SetStorageItem": {
+          const store = effect.operation.input.storage === "local" ? localStorage : sessionStorage;
+          store.setItem(
+            effect.operation.input.key,
+            effect.operation.input.value
+          );
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "RemoveStorageItem": {
+          const store = effect.operation.input.storage === "local" ? localStorage : sessionStorage;
+          store.removeItem(effect.operation.input.key);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ClearStorage": {
+          const store = effect.operation.input.storage === "local" ? localStorage : sessionStorage;
+          store.clear();
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "OpenDatabase": {
+          const { db, version, setup } = effect.operation.input;
+          dbManager.open(db, version, setup, (result) => {
+            callbacks.onComplete(result);
+          });
+          return;
+        }
+        case "RunDbTransaction": {
+          const {
+            db,
+            objectStores,
+            mode,
+            effect: dbEffect
+          } = effect.operation.input;
+          dbManager.runTransaction(db, objectStores, mode, dbEffect, (result) => {
+            callbacks.onComplete(result);
+          });
+          return;
+        }
+        case "UpdateState": {
+          callbacks.setState(effect.operation.input(callbacks.getState()));
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "GenerateUuid": {
+          callbacks.onComplete(generateUuid());
+          return;
+        }
+        case "ReadClipboard": {
+          readClipboard((result) => callbacks.onComplete(result));
+          return;
+        }
+        case "WriteClipboard": {
+          writeClipboard(
+            effect.operation.input,
+            (result) => callbacks.onComplete(result)
+          );
+          return;
+        }
+        case "Download": {
+          const { filename, content, contentType } = effect.operation.input;
+          const blob = new Blob([content], { type: contentType });
+          const url = URL.createObjectURL(blob);
+          const a = globalThis.document.createElement("a");
+          a.href = url;
+          a.download = filename;
+          globalThis.document.body.appendChild(a);
+          a.click();
+          globalThis.document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "PostBroadcastMessage": {
+          const bc = new BroadcastChannel(effect.operation.input.channel);
+          bc.postMessage(effect.operation.input.message);
+          bc.close();
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "SubscribeToBroadcastChannel": {
+          const { channel, handler, taskId: tskIdInput } = effect.operation.input;
+          const tskId = tskIdInput ?? taskId(generateUuid());
+          const bc = new BroadcastChannel(channel);
+          bc.onmessage = (event) => {
+            domInterpreter(
+              handler(event.data),
+              { ...callbacks, onComplete() {
+              } },
+              taskRegistry
+            );
+          };
+          taskRegistry.set(tskId, () => bc.close());
+          callbacks.onComplete(tskId);
+          return;
+        }
+        case "ScrollWindow": {
+          globalThis.window.scrollTo(effect.operation.input);
+          callbacks.onComplete(void 0);
+          return;
+        }
+        case "ScrollElement": {
+          const { selector, options } = effect.operation.input;
+          const el = globalThis.document.querySelector(selector);
+          if (el === null) {
+            callbacks.onComplete(failure(scrollElementError(selector)));
+          } else {
+            el.scrollTo(options);
+            callbacks.onComplete(success(void 0));
+          }
+          return;
+        }
+        case "CustomEffect": {
+          const { args, f } = effect.operation.input;
+          const result = f(args);
+          if (result instanceof Promise) {
+            result.then((out) => callbacks.onComplete(out));
+          } else {
+            callbacks.onComplete(result);
+          }
+          return;
+        }
+        default:
+          exhaustivenessCheck(effect.operation);
+      }
+      break;
+    }
+    default:
+      exhaustivenessCheck(effect);
+  }
+}
+
+// src/index.ts
+function isState(effectOrState) {
+  return !isEffect(effectOrState);
+}
+function toComponent(app, initialState) {
+  const { pure: pure2 } = makeEffects();
+  const initialStateEffect = isState(initialState) ? pure2(initialState) : initialState;
+  const adjustedApp = (state) => {
+    const nodeOrNodeGroup = app(state);
+    if (isNodeGroup(nodeOrNodeGroup)) {
+      return nodeOrNodeGroup;
+    } else {
+      return nodeGroup(nodeOrNodeGroup);
+    }
+  };
+  return {
+    _type: "Component",
+    params: void 0,
+    view: adjustedApp,
+    initialState() {
+      return initialStateEffect;
+    }
+  };
+}
+function manageApplication(app, initialState, mountId = "app") {
+  const component = toComponent(app, initialState);
+  return manageComponent(
+    component,
+    mountId,
+    globalThis.window,
+    domInterpreter,
+    realStyleRegistry()
+  );
+}
+function permission(value) {
+  return {
+    value,
+    isGranted() {
+      return value === "granted";
+    },
+    isDefault() {
+      return value === "default";
+    },
+    isDenied() {
+      return value === "denied";
+    }
+  };
+}
+function uuidFromString(input) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash << 5) - hash + input.charCodeAt(i) | 0;
+  }
+  const hex = (hash >>> 0).toString(16).padStart(8, "0");
+  const repeated = hex.repeat(4);
+  return [
+    repeated.slice(0, 8),
+    repeated.slice(8, 12),
+    repeated.slice(12, 16),
+    repeated.slice(16, 20),
+    repeated.slice(20, 32)
+  ].join("-");
+}
+
+// src/testing.ts
+var clearAppBadge = {
+  _type: "ClearAppBadge"
+};
+function setAppBadge(count) {
+  return { _type: "SetAppBadge", count };
+}
+function appBadgeCount(operations) {
+  if (operations.length > 0) {
+    const op = operations[operations.length - 1];
+    switch (op._type) {
+      case "ClearAppBadge":
+        return 0;
+      case "SetAppBadge":
+        return op.count;
+    }
+  } else {
+    return 0;
+  }
+}
+function defaultTestConfig() {
+  return {
+    http: {
+      handler: (_request, _prior) => {
+        throw new Error("No HTTP handler configured in TestConfig.");
+      }
+    },
+    clock: {
+      values: []
+    },
+    random: {
+      values: []
+    }
+  };
+}
+function newTestData(custom) {
+  return {
+    window: {
+      alerts: [],
+      confirms: [],
+      confirmResponses: [],
+      prompts: [],
+      promptResponses: []
+    },
+    navigator: {
+      appBadgeOperations: []
+    },
+    clipboard: {
+      content: "",
+      writes: []
+    },
+    document: {
+      title: null
+    },
+    http: {
+      interactions: []
+    },
+    clock: {
+      calls: []
+    },
+    random: {
+      calls: []
+    },
+    console: {
+      logs: []
+    },
+    db: new TestDatabaseData(/* @__PURE__ */ new Map()),
+    storage: {
+      local: /* @__PURE__ */ new Map(),
+      session: /* @__PURE__ */ new Map()
+    },
+    navigation: {
+      locationHistory: []
+    },
+    scroll: {
+      windowScrolls: [],
+      elementScrolls: []
+    },
+    downloads: [],
+    broadcasts: {
+      sent: []
+    },
+    custom: custom ?? {}
+  };
+}
+function click(selector) {
+  return {
+    type: "Click",
+    selector
+  };
+}
+function advanceTime(milliseconds) {
+  return {
+    _type: "AdvanceTime",
+    milliseconds
+  };
+}
+function receiveBroadcast(channel, message) {
+  return { _type: "ReceiveBroadcast", channel, message };
+}
+function fireCustomEvent(selector, eventName, detail) {
+  return { _type: "FireCustomEvent", selector, eventName, detail };
+}
+function submit(selector) {
+  return { _type: "Submit", selector };
+}
+function textInput(selector, value) {
+  return { _type: "TextInput", selector, value };
+}
+function attr(name, value) {
+  return { name, value };
+}
+function testComponent2(component, config, data) {
+  return testComponent(component, config, data);
+}
+function testApplication(app, initialState, config, data) {
+  const component = toComponent(app, initialState);
+  return testComponent2(component, config, data);
+}
+function one(selector) {
+  return {
+    _type: "OneOrMore",
+    selector
+  };
+}
+
+export {
+  TestDatabaseData,
+  clearAppBadge,
+  setAppBadge,
+  appBadgeCount,
+  defaultTestConfig,
+  newTestData,
+  click,
+  advanceTime,
+  receiveBroadcast,
+  fireCustomEvent,
+  submit,
+  textInput,
+  attr,
+  testComponent2 as testComponent,
+  testApplication,
+  one,
+  ComponentManager,
+  realStyleRegistry,
+  domInterpreter,
+  isState,
+  toComponent,
+  manageApplication,
+  permission,
+  uuidFromString
+};