creo 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,354 +1,177 @@
-// src/structures/list.ts
-var $next = Symbol("next");
-var $prev = Symbol("prev");
-var $owner = Symbol("owner");
-
-class ListNode {
-  [$owner];
-  [$next];
-  [$prev];
-  v;
-  constructor(node, prev = null, next = null, list) {
-    this[$prev] = prev;
-    this[$next] = next;
-    this[$owner] = list;
-    this.v = node;
-  }
-  isFirst() {
-    return this[$prev] == null;
-  }
-  isLast() {
-    return this[$next] == null;
-  }
-  delete() {
-    this[$owner]?.delete(this);
-  }
-  clearFields() {
-    this[$next] = null;
-    this[$prev] = null;
-    this[$owner] = null;
-  }
-  insertNext(value) {
-    const owner = this[$owner];
-    if (!owner) {
-      throw new Error("The item is detached from DataContainer");
-    }
-    return owner.insertNext(this, value);
-  }
-  insertPrev(value) {
-    const owner = this[$owner];
-    if (!owner) {
-      throw new Error("The item is detached from DataContainer");
-    }
-    return owner.insertPrev(this, value);
-  }
-  getNext() {
-    return this[$next];
-  }
-  getPrev() {
-    return this[$prev];
-  }
-  getList() {
-    return this[$owner];
+// src/internal/internal_view.ts
+var F_PENDING = 1;
+var F_DIRTY = 1 << 1;
+var F_MOVED = 1 << 2;
+var F_PRIMITIVE = 1 << 3;
+var F_TEXT_CONTENT = 1 << 4;
+var F_DISPOSED = 1 << 5;
+function hasScStructuralChange(prev, next) {
+  const prevLen = prev?.length ?? 0;
+  const nextLen = next?.length ?? 0;
+  if (prevLen === 0 && nextLen === 0)
+    return false;
+  if (!prev || !next)
+    return true;
+  if (prev.length !== next.length)
+    return true;
+  for (let i = 0;i < next.length; i++) {
+    if (next[i].viewFn !== prev[i].viewFn)
+      return true;
+    if (next[i].userKey !== prev[i].userKey)
+      return true;
   }
+  return false;
 }
 
-class InternalList {
-  #head;
-  #tail;
-  #size = 0;
-  #cursorNode;
-  #cursorIndex = -1;
-  #invalidateCursor() {
-    this.#cursorNode = null;
-    this.#cursorIndex = -1;
-  }
-  insertStart(value) {
-    const node = new ListNode(value, null, this.#head, this);
-    if (this.#head != null) {
-      this.#head[$prev] = node;
-    } else {
-      this.#tail = node;
-    }
-    this.#head = node;
-    this.#size++;
-    this.#invalidateCursor();
-    return this.#head;
-  }
-  delete(node) {
-    const n = node;
-    const prev = n[$prev];
-    const next = n[$next];
-    if (next) {
-      next[$prev] = prev;
-    }
-    if (prev) {
-      prev[$next] = next;
-    }
-    if (node === this.#head) {
-      this.#head = next;
-    }
-    if (node === this.#tail) {
-      this.#tail = prev;
-    }
-    n.clearFields();
-    this.#size--;
-    this.#invalidateCursor();
-  }
-  at(n) {
-    if (n < 0)
-      n = this.#size + n;
-    if (n < 0 || n >= this.#size)
-      return;
-    let current;
-    let pos;
-    const distFromHead = n;
-    const distFromTail = this.#size - 1 - n;
-    const distFromCursor = this.#cursorNode != null ? Math.abs(n - this.#cursorIndex) : Infinity;
-    if (distFromCursor <= distFromHead && distFromCursor <= distFromTail) {
-      current = this.#cursorNode;
-      pos = this.#cursorIndex;
-    } else if (distFromHead <= distFromTail) {
-      current = this.#head;
-      pos = 0;
-    } else {
-      current = this.#tail;
-      pos = this.#size - 1;
-    }
-    while (pos < n && current != null) {
-      current = current[$next];
-      pos++;
-    }
-    while (pos > n && current != null) {
-      current = current[$prev];
-      pos--;
-    }
-    if (current != null) {
-      this.#cursorNode = current;
-      this.#cursorIndex = pos;
-    }
-    return current;
-  }
-  get size() {
-    return this.#size;
-  }
-  clear() {
-    this.#head = null;
-    this.#tail = null;
-    this.#size = 0;
-    this.#invalidateCursor();
-  }
-  first() {
-    return this.#head;
-  }
-  last() {
-    return this.#tail;
-  }
-  insertEnd(value) {
-    const node = new ListNode(value, this.#tail, null, this);
-    if (this.#tail != null) {
-      this.#tail[$next] = node;
-    } else {
-      this.#head = node;
-    }
-    this.#tail = node;
-    this.#size++;
-    return this.#tail;
-  }
-  insertNext(ref, value) {
-    const r = ref;
-    if (r[$owner] != this) {
-      throw new TypeError("The reference node does not belong to the current list");
-    }
-    const node = new ListNode(value, r, r[$next], this);
-    if (r[$next]) {
-      r[$next][$prev] = node;
-    } else {
-      this.#tail = node;
-    }
-    r[$next] = node;
-    this.#size++;
-    this.#invalidateCursor();
-    return node;
-  }
-  insertPrev(ref, value) {
-    const r = ref;
-    if (r[$owner] != this) {
-      throw new TypeError("The reference node does not belong to the current list");
-    }
-    const node = new ListNode(value, r[$prev], r, this);
-    if (r[$prev]) {
-      r[$prev][$next] = node;
-    } else {
-      this.#head = node;
-    }
-    r[$prev] = node;
-    this.#size++;
-    this.#invalidateCursor();
-    return node;
+// src/public/primitive.ts
+var $primitive = Symbol("primitive");
+
+// src/internal/orchestrator.ts
+class Orchestrator {
+  #currentEngine;
+  setCurrentEngine(engine) {
+    this.#currentEngine = engine;
   }
-  *[Symbol.iterator]() {
-    let current = this.#head;
-    while (current) {
-      const next = current[$next];
-      yield current;
-      current = next;
-    }
+  currentEngine() {
+    return this.#currentEngine;
   }
 }
+var orchestrator = new Orchestrator;
 
-// src/structures/indexed_list.ts
-class IndexedList {
-  #list = new InternalList;
-  #map = new Map;
-  push(item) {
-    const existing = this.#map.get(item);
-    if (existing)
-      return existing;
-    const node = this.#list.insertEnd(item);
-    this.#map.set(item, node);
-    return node;
-  }
-  unshift(item) {
-    if (this.#map.has(item))
-      return;
-    const node = this.#list.insertStart(item);
-    this.#map.set(item, node);
-  }
-  insertAfter(ref, item) {
-    if (this.#map.has(item))
-      return;
-    const refNode = this.#map.get(ref);
-    if (!refNode) {
-      this.push(item);
-      return;
-    }
-    const node = refNode.insertNext(item);
-    this.#map.set(item, node);
-  }
-  delete(item) {
-    const node = this.#map.get(item);
-    if (!node)
-      return;
-    this.#map.delete(item);
-    node.delete();
-  }
-  has(item) {
-    return this.#map.has(item);
-  }
-  get length() {
-    return this.#map.size;
-  }
-  first() {
-    return this.#list.first()?.v;
-  }
-  last() {
-    return this.#list.last()?.v;
-  }
-  getNode(item) {
-    return this.#map.get(item);
-  }
-  at(index) {
-    return this.#list.at(index)?.v;
-  }
-  upsert(pos, item) {
-    const existing = this.#list.at(pos);
-    if (!existing) {
-      return this.push(item);
-    }
-    this.#map.delete(existing.v);
-    existing.v = item;
-    this.#map.set(item, existing);
-    return existing;
-  }
-  swap(a, b) {
-    const nodeA = this.#map.get(a);
-    const nodeB = this.#map.get(b);
-    if (!nodeA || !nodeB)
-      return;
-    nodeA.v = b;
-    nodeB.v = a;
-    this.#map.set(a, nodeB);
-    this.#map.set(b, nodeA);
-  }
-  clear() {
-    this.#list.clear();
-    this.#map.clear();
-  }
-  *[Symbol.iterator]() {
-    for (const node of this.#list) {
-      yield node.v;
-    }
+// src/public/view.ts
+function view(body) {
+  return (props, slot) => {
+    orchestrator.currentEngine().view(body, props, slot, maybeGetUserKey(props));
+  };
+}
+function maybeGetUserKey(params) {
+  if (params != null && typeof params === "object" && "key" in params && params.key != null && (typeof params.key === "string" || typeof params.key === "number")) {
+    return params.key;
   }
 }
 
-// src/internal/engine.ts
-class Engine {
-  renderer;
-  dirty = new IndexedList;
-  #scheduler;
-  #renderScheduled = false;
-  #collector;
-  constructor(renderer, scheduler) {
-    this.renderer = renderer;
-    this.#scheduler = scheduler ?? "scheduler" in globalThis ? (cb) => window.scheduler.postTask(cb) : (cb) => queueMicrotask(cb);
-  }
-  disposeView(view) {
-    this.dirty.delete(view);
-  }
-  schedule() {
-    if (this.#renderScheduled) {
-      return;
-    }
-    this.#renderScheduled = true;
-    this.#scheduler(() => {
-      this.#renderScheduled = false;
-      this.render();
-    });
-  }
-  markDirty(view) {
-    this.dirty.push(view);
-    this.schedule();
-  }
-  pendingView(view) {
-    this.#collector?.(view);
-  }
-  collect(slot) {
-    const list = [];
-    const prev = this.#collector;
-    this.#collector = list.push.bind(list);
-    slot();
-    this.#collector = prev;
-    return list;
-  }
-  #rendering = false;
-  render() {
-    if (this.#rendering)
-      return;
-    this.#rendering = true;
-    try {
-      const cbs = [];
-      while (this.dirty.length > 0) {
-        const view = this.dirty.first();
-        const isNew = view.renderRef == null;
-        if (!isNew)
-          view.onUpdateBefore();
-        this.renderer.render(view);
-        if (view.dirty) {
-          view.reconsile();
-          cbs.push(isNew ? view.onMount : view.onUpdateAfter);
-          view.dirty = false;
-        }
-        this.dirty.delete(view);
-      }
-      for (const cb of cbs) {
-        cb();
-      }
-    } finally {
-      this.#rendering = false;
+// src/public/primitives/primitives.ts
+function html(tag) {
+  const fn = ({
+    slot
+  }) => ({
+    render() {
+      slot();
     }
-  }
+  });
+  fn[$primitive] = tag;
+  return view(fn);
+}
+var textViewFn = Object.assign(() => ({ render() {} }), { [$primitive]: "text" });
+function text(content) {
+  orchestrator.currentEngine().view(textViewFn, content, null, null);
 }
+var div = html("div");
+var span = html("span");
+var section = html("section");
+var article = html("article");
+var aside = html("aside");
+var nav = html("nav");
+var header = html("header");
+var footer = html("footer");
+var main = html("main");
+var p = html("p");
+var h1 = html("h1");
+var h2 = html("h2");
+var h3 = html("h3");
+var h4 = html("h4");
+var h5 = html("h5");
+var h6 = html("h6");
+var pre = html("pre");
+var code = html("code");
+var em = html("em");
+var strong = html("strong");
+var small = html("small");
+var br = html("br");
+var hr = html("hr");
+var a = html("a");
+var blockquote = html("blockquote");
+var label = html("label");
+var ul = html("ul");
+var ol = html("ol");
+var li = html("li");
+var table = html("table");
+var thead = html("thead");
+var tbody = html("tbody");
+var tfoot = html("tfoot");
+var tr = html("tr");
+var th = html("th");
+var td = html("td");
+var form = html("form");
+var button = html("button");
+var input = html("input");
+var textarea = html("textarea");
+var select = html("select");
+var option = html("option");
+var fieldset = html("fieldset");
+var legend = html("legend");
+var img = html("img");
+var video = html("video");
+var audio = html("audio");
+var canvas = html("canvas");
+var source = html("source");
+var details = html("details");
+var summary = html("summary");
+var dialog = html("dialog");
+var menu = html("menu");
+var iframe = html("iframe");
+var embed = html("embed");
+var object = html("object");
+var picture = html("picture");
+var portal = html("portal");
+var svg = html("svg");
+var script = html("script");
+var noscript = html("noscript");
+var template = html("template");
+var slot = html("slot");
+var address = html("address");
+var hgroup = html("hgroup");
+var search = html("search");
+var abbr = html("abbr");
+var b = html("b");
+var bdi = html("bdi");
+var bdo = html("bdo");
+var cite = html("cite");
+var data = html("data");
+var dfn = html("dfn");
+var i = html("i");
+var kbd = html("kbd");
+var mark = html("mark");
+var q = html("q");
+var rp = html("rp");
+var rt = html("rt");
+var ruby = html("ruby");
+var s = html("s");
+var samp = html("samp");
+var sub = html("sub");
+var sup = html("sup");
+var time = html("time");
+var u = html("u");
+var varEl = html("var");
+var wbr = html("wbr");
+var del = html("del");
+var ins = html("ins");
+var caption = html("caption");
+var colgroup = html("colgroup");
+var col = html("col");
+var datalist = html("datalist");
+var optgroup = html("optgroup");
+var output = html("output");
+var progress = html("progress");
+var meter = html("meter");
+var figure = html("figure");
+var figcaption = html("figcaption");
+var dd = html("dd");
+var dl = html("dl");
+var dt = html("dt");
+var track = html("track");
+var map = html("map");
+var area = html("area");
 
 // src/public/state.ts
 class State {
@@ -415,8 +238,8 @@ class Store {
     };
   }
   #notify() {
-    for (const sub of this.#subscribers) {
-      sub();
+    for (const sub2 of this.#subscribers) {
+      sub2();
     }
   }
 }
@@ -430,382 +253,584 @@ var store = {
 };
 
 // src/functional/shallow_equal.ts
-function shallowEqual(a, b) {
-  if (a === b)
+function shallowEqual(a2, b2) {
+  if (a2 === b2)
     return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+  if (typeof a2 !== "object" || a2 === null || typeof b2 !== "object" || b2 === null) {
     return false;
   }
-  const keysA = Object.keys(a);
-  if (keysA.length !== Object.keys(b).length)
-    return false;
-  for (let i = 0;i < keysA.length; i++) {
-    const key = keysA[i];
-    if (!Object.is(a[key], b[key])) {
+  let countA = 0;
+  for (const key in a2) {
+    countA++;
+    if (!Object.is(a2[key], b2[key]))
       return false;
+  }
+  let countB = 0;
+  for (const _ in b2)
+    countB++;
+  return countA === countB;
+}
+
+// src/functional/lis.ts
+function lis(arr) {
+  const len = arr.length;
+  if (len === 0)
+    return new Set;
+  const tails = [];
+  const prev = new Array(len).fill(-1);
+  for (let i2 = 0;i2 < len; i2++) {
+    if (arr[i2] < 0)
+      continue;
+    const val = arr[i2];
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (arr[tails[mid]] < val)
+        lo = mid + 1;
+      else
+        hi = mid;
     }
+    if (lo > 0)
+      prev[i2] = tails[lo - 1];
+    tails[lo] = i2;
+  }
+  const result = new Set;
+  if (tails.length === 0)
+    return result;
+  let idx = tails[tails.length - 1];
+  for (let k = tails.length - 1;k >= 0; k--) {
+    result.add(idx);
+    idx = prev[idx];
   }
-  return true;
+  return result;
 }
 
-// src/internal/internal_view.ts
-class View {
-  viewFn;
-  engine;
-  parent;
-  userKey;
-  renderRef;
-  props;
-  slotChildren;
-  body;
-  virtualDom;
-  keyToIndex;
-  dirty = true;
-  moved = false;
-  quickRerender = true;
-  #unsubscribe = [];
-  constructor(viewFn, initialProps, slot, engine, parent, userKey) {
-    this.viewFn = viewFn;
-    this.engine = engine;
-    this.parent = parent;
-    this.userKey = userKey;
-    this.props = initialProps;
-    this.body = viewFn({
-      props: () => this.props,
-      use: (storeOrInitial) => {
-        if (!isStore(storeOrInitial)) {
-          return new State(storeOrInitial, this.markDirty);
+// src/internal/engine.ts
+class Engine {
+  renderer;
+  #dirtyQueue = new Set;
+  #collector;
+  #collectFor;
+  #scheduler;
+  #renderScheduled = false;
+  #rendering = false;
+  constructor(renderer, scheduler) {
+    this.renderer = renderer;
+    this.#scheduler = scheduler ?? ((cb) => queueMicrotask(cb));
+    renderer.engine = this;
+  }
+  newView(viewFn, parent, props, slot2, userKey) {
+    const res = {
+      viewFn,
+      userKey,
+      props,
+      slot: slot2,
+      body: null,
+      sc: null,
+      renderRef: null,
+      flags: F_PENDING | (viewFn[$primitive] != null ? F_PRIMITIVE : 0),
+      children: null,
+      keyToView: null,
+      unsubscribe: null,
+      parent,
+      scHost: null
+    };
+    if (slot2) {
+      const slotFn = typeof slot2 === "string" ? this.#stringSlot(slot2) : slot2;
+      res.sc = this.#collect(slotFn, [], res);
+    }
+    return res;
+  }
+  view(viewFn, props, slot2, userKey) {
+    const view2 = this.newView(viewFn, this.#collectFor, props, slot2, userKey);
+    this.#collector?.push(view2);
+    return view2;
+  }
+  views(views) {
+    if (views)
+      this.#collector?.push(...views);
+  }
+  initViewBody(view2) {
+    if (!(view2.flags & F_PENDING))
+      return;
+    view2.flags &= ~F_PENDING;
+    if (view2.flags & F_PRIMITIVE) {
+      const engine = this;
+      view2.body = {
+        render() {
+          engine.views(view2.sc);
         }
-        const s = storeOrInitial;
-        this.#unsubscribe.push(this.markDirty);
-        return s;
+      };
+      return;
+    }
+    view2.body = view2.viewFn({
+      props: () => view2.props,
+      use: (storeOrState) => {
+        if (!isStore(storeOrState)) {
+          return new State(storeOrState, () => this.markDirty(view2));
+        }
+        const s2 = storeOrState;
+        const unsub = s2.subscribe(() => this.markDirty(view2));
+        if (!view2.unsubscribe)
+          view2.unsubscribe = [];
+        view2.unsubscribe.push(unsub);
+        return s2;
       },
       slot: () => {
-        if (!this.slotChildren) {
+        if (!view2.sc)
           return;
-        }
-        for (const child of this.slotChildren) {
-          this.engine.pendingView(child);
+        view2.scHost = this.#collectFor ?? view2;
+        for (const child of view2.sc) {
+          child.parent = this.#collectFor ?? view2;
+          this.#collector?.push(child);
         }
       }
     });
-    this.slotChildren = slot && this.engine.collect(slot);
-    this.markDirty();
   }
-  markDirty = () => {
-    this.dirty = true;
-    this.engine.markDirty(this);
-  };
-  markMove() {
-    this.moved = true;
-    this.engine.markDirty(this);
+  createRoot(children, props) {
+    orchestrator.setCurrentEngine(this);
+    const view2 = this.newView(({ slot: slot2 }) => ({
+      render() {
+        slot2();
+      }
+    }), null, props, children, null);
+    this.markDirty(view2);
+    return view2;
   }
-  shouldUpdate(nextProps) {
-    if (this.body.shouldUpdate) {
-      return this.body.shouldUpdate(nextProps);
+  markDirty(view2) {
+    if (view2.flags & F_DISPOSED)
+      return;
+    if (view2.flags & F_DIRTY) {
+      return;
     }
-    return !shallowEqual(this.props, nextProps);
+    view2.flags |= F_DIRTY;
+    this.#dirtyQueue.add(view2);
+    this.schedule();
   }
-  onMount = () => {
-    this.quickRerender = false;
-    this.body.onMount?.();
-  };
-  onUpdateBefore() {
-    this.body.onUpdateBefore?.();
+  markMoved(view2) {
+    if (view2.flags & F_DISPOSED)
+      return;
+    if (view2.flags & F_MOVED) {
+      return;
+    }
+    view2.flags |= F_MOVED;
+    this.#dirtyQueue.add(view2);
+    this.schedule();
   }
-  onUpdateAfter = () => {
-    this.quickRerender = false;
-    this.body.onUpdateBefore?.();
-  };
-  nextProps(nextProps, nextSlot) {
-    const prevChildren = this.slotChildren;
-    this.slotChildren = nextSlot && this.engine.collect(nextSlot);
-    if (this.shouldUpdate(nextProps) || hasNewChildren(prevChildren, this.slotChildren)) {
-      this.markDirty();
-      this.props = nextProps;
+  schedule() {
+    if (this.#renderScheduled)
+      return;
+    this.#renderScheduled = true;
+    this.#scheduler(() => {
+      this.#renderScheduled = false;
+      this.render();
+    });
+  }
+  #collect(render, collector, parent) {
+    const before = this.#collector;
+    const beforeParent = this.#collectFor;
+    this.#collector = collector;
+    this.#collectFor = parent;
+    render();
+    this.#collector = before;
+    this.#collectFor = beforeParent;
+    return collector;
+  }
+  #stringSlot(content) {
+    return () => {
+      this.view(textViewFn, content, null, null);
+    };
+  }
+  nextProps(view2, nextProps, nextSlot, preCollectedSc) {
+    const prevSc = view2.sc;
+    view2.slot = nextSlot;
+    if (preCollectedSc) {
+      for (const child of preCollectedSc)
+        child.parent = view2;
+      view2.sc = preCollectedSc;
+    } else {
+      if (nextSlot) {
+        const slotFn = typeof nextSlot === "string" ? this.#stringSlot(nextSlot) : nextSlot;
+        view2.sc = this.#collect(slotFn, [], view2);
+      } else {
+        view2.sc = null;
+      }
+    }
+    const structChanged = hasScStructuralChange(prevSc, view2.sc);
+    const shouldUpdate = view2.body?.shouldUpdate ? view2.body.shouldUpdate(nextProps) : !shallowEqual(view2.props, nextProps);
+    if (shouldUpdate || structChanged) {
+      view2.props = nextProps;
+      this.markDirty(view2);
+    } else if (view2.sc && view2.scHost?.children) {
+      this.#propagateScProps(view2);
+    } else if (view2.sc && prevSc) {
+      for (let i2 = 0;i2 < view2.sc.length; i2++) {
+        if (view2.sc[i2].props !== prevSc[i2].props) {
+          this.markDirty(view2);
+          break;
+        }
+      }
     }
   }
-  reconsile() {
-    const children = this.engine.collect(this.body.render);
-    if (!this.virtualDom && children.length === 0)
+  #propagateScProps(owner) {
+    const host = owner.scHost;
+    const sc = owner.sc;
+    if (!host?.children || !sc)
       return;
-    if (!this.virtualDom)
-      this.virtualDom = new IndexedList;
-    this.quickRerender = true;
-    const vdom = this.virtualDom;
-    for (let i = 0;i < children.length; i++) {
-      const pending = children[i];
-      const expectedNext = vdom.at(i);
-      if (pending.userKey == null) {
-        if (expectedNext?.viewFn === pending.viewFn) {
-          this.quickRerender = false;
-          expectedNext.nextProps(pending.props, pending.slot);
-        } else {
-          if (expectedNext) {
-            if (expectedNext.userKey)
-              this.keyToIndex?.delete(expectedNext.userKey);
-            expectedNext[Symbol.dispose]();
+    if (host.keyToView) {
+      for (const item of sc) {
+        if (item.userKey != null) {
+          const live = host.keyToView.get(item.userKey);
+          if (live && live.viewFn === item.viewFn) {
+            this.nextProps(live, item.props, item.slot);
           }
-          vdom.upsert(i, new View(pending.viewFn, pending.props, pending.slot, this.engine, this, null));
         }
-      } else {
-        const matchedIndex = this.keyToIndex?.get(pending.userKey);
-        const matched = matchedIndex != null ? vdom.at(matchedIndex) : null;
-        if (matched && matched.viewFn === pending.viewFn) {
-          this.quickRerender = false;
-          matched.nextProps(pending.props, pending.slot);
-          if (expectedNext != null) {
-            if (matched !== expectedNext) {
-              matched.markMove();
-              expectedNext.markMove();
-              vdom.swap(matched, expectedNext);
-              if (this.keyToIndex) {
-                if (matched.userKey != null)
-                  this.keyToIndex.set(matched.userKey, i);
-                if (expectedNext.userKey != null)
-                  this.keyToIndex.set(expectedNext.userKey, matchedIndex);
-              }
-            }
-          } else {
-            matched.markMove();
-            vdom.upsert(i, matched);
-            if (this.keyToIndex && matched.userKey != null) {
-              this.keyToIndex.set(matched.userKey, i);
-            }
-          }
-        } else {
-          if (expectedNext) {
-            if (expectedNext.userKey)
-              this.keyToIndex?.delete(expectedNext.userKey);
-            expectedNext[Symbol.dispose]();
-          }
-          vdom.upsert(i, new View(pending.viewFn, pending.props, pending.slot, this.engine, this, pending.userKey));
-          if (!this.keyToIndex)
-            this.keyToIndex = new Map;
-          this.keyToIndex.set(pending.userKey, i);
+      }
+    } else {
+      const len = Math.min(sc.length, host.children.length);
+      for (let i2 = 0;i2 < len; i2++) {
+        const live = host.children[i2];
+        if (live.viewFn === sc[i2].viewFn) {
+          this.nextProps(live, sc[i2].props, sc[i2].slot);
         }
       }
     }
-    if (children.length < vdom.length) {
-      for (let i = vdom.length;i >= children.length; i--) {
-        const removed = vdom.at(i);
-        if (removed) {
-          if (removed.userKey)
-            this.keyToIndex?.delete(removed.userKey);
-          removed[Symbol.dispose]();
-          vdom.delete(removed);
+  }
+  reconcile(view2) {
+    let pendingChildren = null;
+    if (view2.body?.render) {
+      pendingChildren = this.#collect(view2.body.render, [], view2);
+    }
+    if (pendingChildren == null || pendingChildren.length === 0) {
+      if (view2.children)
+        for (const child of view2.children)
+          this.dispose(child);
+      return;
+    }
+    if (view2.children == null) {
+      view2.children = pendingChildren;
+      for (const child of pendingChildren) {
+        this.initViewBody(child);
+        this.markDirty(child);
+        if (child.userKey != null) {
+          if (!view2.keyToView)
+            view2.keyToView = new Map;
+          view2.keyToView.set(child.userKey, child);
         }
       }
+      return;
+    }
+    const hasKeys = pendingChildren.some((c) => c.userKey != null);
+    if (hasKeys) {
+      this.#reconcileKeyed(view2, view2.children, pendingChildren);
+    } else {
+      this.#reconcileNonKeyed(view2, view2.children, pendingChildren);
     }
   }
-  [Symbol.dispose]() {
-    if (this.virtualDom) {
-      for (const child of this.virtualDom) {
-        child[Symbol.dispose]();
+  #reconcileNonKeyed(view2, oldChildren, pending) {
+    const oldLen = oldChildren.length;
+    const newLen = pending.length;
+    const minLen = Math.min(oldLen, newLen);
+    for (let i2 = 0;i2 < minLen; i2++) {
+      const old = oldChildren[i2];
+      const pend = pending[i2];
+      this.#patchOrReplace(view2, oldChildren, i2, old, pend);
+    }
+    for (let i2 = oldLen;i2 < newLen; i2++) {
+      oldChildren[i2] = pending[i2];
+      this.initViewBody(pending[i2]);
+      this.markDirty(pending[i2]);
+    }
+    for (let i2 = newLen;i2 < oldLen; i2++) {
+      this.dispose(oldChildren[i2]);
+    }
+    oldChildren.length = newLen;
+  }
+  #reconcileKeyed(view2, oldChildren, pending) {
+    let i2 = 0;
+    let oldEnd = oldChildren.length - 1;
+    let newEnd = pending.length - 1;
+    while (i2 <= oldEnd && i2 <= newEnd) {
+      const oldView = oldChildren[i2];
+      const pendView = pending[i2];
+      if (oldView.userKey !== pendView.userKey)
+        break;
+      this.#patchOrReplace(view2, oldChildren, i2, oldView, pendView);
+      i2++;
+    }
+    while (oldEnd >= i2 && newEnd >= i2) {
+      const oldView = oldChildren[oldEnd];
+      const pendView = pending[newEnd];
+      if (oldView.userKey !== pendView.userKey)
+        break;
+      this.#patchOrReplace(view2, oldChildren, oldEnd, oldView, pendView);
+      oldEnd--;
+      newEnd--;
+    }
+    if (i2 > oldEnd) {
+      for (let j = i2;j <= newEnd; j++) {
+        this.initViewBody(pending[j]);
+        this.markDirty(pending[j]);
+        if (pending[j].userKey != null) {
+          if (!view2.keyToView)
+            view2.keyToView = new Map;
+          view2.keyToView.set(pending[j].userKey, pending[j]);
+        }
       }
+      view2.children = [
+        ...oldChildren.slice(0, i2),
+        ...pending.slice(i2, newEnd + 1),
+        ...oldChildren.slice(i2, oldEnd + 1)
+      ];
+      return;
     }
-    this.engine.renderer.unmount(this);
-    this.engine.disposeView(this);
-  }
-}
-function hasNewChildren(prev, next) {
-  const prevLen = prev?.length ?? 0;
-  const nextLen = next?.length ?? 0;
-  if (prevLen === 0 && nextLen === 0)
-    return false;
-  if (!prev || !next)
-    return true;
-  if (prev.length !== next.length)
-    return true;
-  for (let i = 0;i < next.length; i++) {
-    if (next[i].viewFn !== prev[i].viewFn)
-      return true;
-    if (next[i].userKey !== prev[i].userKey)
-      return true;
-    if (next[i].props !== prev[i].props)
-      return true;
+    if (i2 > newEnd) {
+      for (let j = i2;j <= oldEnd; j++) {
+        this.dispose(oldChildren[j]);
+      }
+      view2.children = [
+        ...oldChildren.slice(0, i2),
+        ...oldChildren.slice(oldEnd + 1)
+      ];
+      return;
+    }
+    const newKeyToIndex = new Map;
+    for (let j = i2;j <= newEnd; j++) {
+      const key = pending[j].userKey;
+      if (key != null)
+        newKeyToIndex.set(key, j);
+    }
+    const middleLen = newEnd - i2 + 1;
+    const newIdxToOldIdx = new Array(middleLen).fill(-1);
+    const matched = new Set;
+    for (let j = i2;j <= oldEnd; j++) {
+      const oldView = oldChildren[j];
+      const key = oldView.userKey;
+      if (key != null && newKeyToIndex.has(key)) {
+        const newIdx = newKeyToIndex.get(key);
+        newIdxToOldIdx[newIdx - i2] = j;
+        matched.add(j);
+      }
+    }
+    for (let j = i2;j <= oldEnd; j++) {
+      if (!matched.has(j)) {
+        this.dispose(oldChildren[j]);
+      }
+    }
+    const stable = lis(newIdxToOldIdx);
+    const newChildren = new Array(middleLen);
+    for (let j = middleLen - 1;j >= 0; j--) {
+      const newIdx = i2 + j;
+      const pendView = pending[newIdx];
+      if (newIdxToOldIdx[j] === -1) {
+        this.initViewBody(pendView);
+        this.markDirty(pendView);
+        if (pendView.userKey != null) {
+          if (!view2.keyToView)
+            view2.keyToView = new Map;
+          view2.keyToView.set(pendView.userKey, pendView);
+        }
+        newChildren[j] = pendView;
+      } else {
+        const oldView = oldChildren[newIdxToOldIdx[j]];
+        this.#patchOrReplace(view2, oldChildren, newIdxToOldIdx[j], oldView, pendView);
+        if (!stable.has(j)) {
+          this.markMoved(oldView);
+        }
+        newChildren[j] = oldView;
+      }
+    }
+    const head = oldChildren.slice(0, i2);
+    const tail = oldChildren.slice(oldEnd + 1);
+    view2.children = [...head, ...newChildren, ...tail];
   }
-  return false;
-}
-
-// src/internal/orchestrator.ts
-class Orchestrator {
-  #currentEngine;
-  setCurrentEngine(engine) {
-    this.#currentEngine = engine;
+  #patchOrReplace(parent, oldChildren, idx, oldView, pendView) {
+    if (oldView.viewFn === pendView.viewFn) {
+      this.nextProps(oldView, pendView.props, pendView.slot, pendView.sc);
+    } else {
+      this.dispose(oldView);
+      oldChildren[idx] = pendView;
+      this.initViewBody(pendView);
+      this.markDirty(pendView);
+      if (pendView.userKey != null) {
+        if (!parent.keyToView)
+          parent.keyToView = new Map;
+        parent.keyToView.set(pendView.userKey, pendView);
+      }
+    }
   }
-  currentEngine() {
-    return this.#currentEngine;
+  dispose(view2) {
+    const isPrimitiveWithDom = view2.flags & F_PRIMITIVE && view2.renderRef;
+    if (view2.children) {
+      for (const child of view2.children) {
+        if (isPrimitiveWithDom) {
+          this.#disposeVirtual(child);
+        } else {
+          this.dispose(child);
+        }
+      }
+    }
+    if (view2.unsubscribe)
+      for (const unsub of view2.unsubscribe)
+        unsub();
+    if (view2.userKey != null)
+      view2.parent?.keyToView?.delete(view2.userKey);
+    this.renderer.unmount(view2);
+    this.#dirtyQueue.delete(view2);
+    view2.flags |= F_DISPOSED;
+    view2.flags &= ~(F_DIRTY | F_MOVED);
+  }
+  #disposeVirtual(view2) {
+    if (view2.children) {
+      for (const child of view2.children)
+        this.#disposeVirtual(child);
+    }
+    if (view2.unsubscribe)
+      for (const unsub of view2.unsubscribe)
+        unsub();
+    if (view2.userKey != null)
+      view2.parent?.keyToView?.delete(view2.userKey);
+    view2.renderRef = undefined;
+    this.#dirtyQueue.delete(view2);
+    view2.flags |= F_DISPOSED;
+    view2.flags &= ~(F_DIRTY | F_MOVED);
+  }
+  render() {
+    if (this.#rendering)
+      return;
+    orchestrator.setCurrentEngine(this);
+    this.#rendering = true;
+    try {
+      const cbs = [];
+      for (const view2 of this.#dirtyQueue) {
+        if (view2.flags & F_DISPOSED)
+          continue;
+        this.initViewBody(view2);
+        const isNew = !view2.renderRef;
+        if (!isNew)
+          view2.body?.onUpdateBefore?.();
+        if (view2.flags & F_DIRTY) {
+          this.reconcile(view2);
+          this.renderer.render(view2);
+          view2.flags &= ~F_DIRTY;
+          view2.flags &= ~F_MOVED;
+          if (isNew && view2.body?.onMount) {
+            const b2 = view2.body;
+            cbs.push(() => b2.onMount());
+          } else if (!isNew && view2.body?.onUpdateAfter) {
+            const b2 = view2.body;
+            cbs.push(() => b2.onUpdateAfter());
+          }
+        } else {
+          this.renderer.render(view2);
+          view2.flags &= ~F_MOVED;
+        }
+      }
+      this.#dirtyQueue.clear();
+      orchestrator.setCurrentEngine(null);
+      this.#rendering = false;
+      for (const cb of cbs)
+        cb();
+    } catch (e) {
+      orchestrator.setCurrentEngine(null);
+      this.#rendering = false;
+      throw e;
+    }
   }
 }
-var orchestrator = new Orchestrator;
 
 // src/public/app.ts
-function createApp(slot, renderer, options) {
+function createApp(slot2, renderer, options) {
   return {
     mount(props) {
       const engine = new Engine(renderer, options?.scheduler);
-      orchestrator.setCurrentEngine(engine);
-      new View(() => ({ render() {
-        slot();
-      } }), props ?? {}, null, engine, null, null);
+      engine.createRoot(slot2, props ?? {});
       engine.render();
       return { engine };
     }
   };
 }
-// src/public/view.ts
-function view(body) {
-  return (props, slot) => {
-    orchestrator.currentEngine().pendingView({
-      viewFn: body,
-      props,
-      slot,
-      userKey: maybeGetUserKey(props)
-    });
-  };
+// src/render/html_render.ts
+function isEventProp(key) {
+  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
 }
-function maybeGetUserKey(params) {
-  if (params != null && typeof params === "object" && "key" in params && params.key != null && (typeof params.key === "string" || typeof params.key === "number")) {
-    return params.key;
+var DOM_EVENT = {
+  Click: "click",
+  Dblclick: "dblclick",
+  PointerDown: "pointerdown",
+  PointerUp: "pointerup",
+  PointerMove: "pointermove",
+  Input: "input",
+  Change: "change",
+  KeyDown: "keydown",
+  KeyUp: "keyup",
+  Focus: "focus",
+  Blur: "blur"
+};
+var $EV = Symbol.for("creo.ev");
+var containerState = new WeakMap;
+function getState(container) {
+  let state = containerState.get(container);
+  if (!state) {
+    state = {
+      counts: new Map,
+      handler(e) {
+        const domEvent = e.type;
+        let dom = e.target;
+        while (dom && dom !== container) {
+          const evObj = dom[$EV];
+          if (evObj) {
+            const handler = evObj[domEvent];
+            if (handler) {
+              handler(mapEventData(domEvent, e));
+              if (e.cancelBubble)
+                return;
+            }
+          }
+          dom = dom.parentElement;
+        }
+      }
+    };
+    containerState.set(container, state);
   }
+  return state;
 }
-// src/public/primitive.ts
-var $primitive = Symbol("primitive");
-// src/public/primitives/primitives.ts
-function html(tag) {
-  const fn = ({
-    slot
-  }) => ({
-    render() {
-      slot();
-    }
-  });
-  fn[$primitive] = tag;
-  return view(fn);
+function ensureDelegated(container, domEvent) {
+  const state = getState(container);
+  const count = state.counts.get(domEvent) ?? 0;
+  if (count === 0) {
+    container.addEventListener(domEvent, state.handler);
+  }
+  state.counts.set(domEvent, count + 1);
+}
+function removeDelegated(container, domEvent) {
+  const state = getState(container);
+  const count = state.counts.get(domEvent) ?? 0;
+  if (count <= 1) {
+    state.counts.delete(domEvent);
+    container.removeEventListener(domEvent, state.handler);
+  } else {
+    state.counts.set(domEvent, count - 1);
+  }
+}
+function mapEventData(domEvent, e) {
+  let data2;
+  if (domEvent === "click" || domEvent === "dblclick" || domEvent === "pointerdown" || domEvent === "pointerup" || domEvent === "pointermove") {
+    const pe = e;
+    data2 = { x: pe.clientX, y: pe.clientY };
+  } else if (domEvent === "input" || domEvent === "change") {
+    data2 = { value: e.target.value };
+  } else if (domEvent === "keydown" || domEvent === "keyup") {
+    const ke = e;
+    data2 = { key: ke.key, code: ke.code };
+  } else {
+    data2 = {};
+  }
+  data2.stopPropagation = () => e.stopPropagation();
+  data2.preventDefault = () => e.preventDefault();
+  return data2;
 }
-var text = html("text");
-var div = html("div");
-var span = html("span");
-var section = html("section");
-var article = html("article");
-var aside = html("aside");
-var nav = html("nav");
-var header = html("header");
-var footer = html("footer");
-var main = html("main");
-var p = html("p");
-var h1 = html("h1");
-var h2 = html("h2");
-var h3 = html("h3");
-var h4 = html("h4");
-var h5 = html("h5");
-var h6 = html("h6");
-var pre = html("pre");
-var code = html("code");
-var em = html("em");
-var strong = html("strong");
-var small = html("small");
-var br = html("br");
-var hr = html("hr");
-var a = html("a");
-var blockquote = html("blockquote");
-var label = html("label");
-var ul = html("ul");
-var ol = html("ol");
-var li = html("li");
-var table = html("table");
-var thead = html("thead");
-var tbody = html("tbody");
-var tfoot = html("tfoot");
-var tr = html("tr");
-var th = html("th");
-var td = html("td");
-var form = html("form");
-var button = html("button");
-var input = html("input");
-var textarea = html("textarea");
-var select = html("select");
-var option = html("option");
-var fieldset = html("fieldset");
-var legend = html("legend");
-var img = html("img");
-var video = html("video");
-var audio = html("audio");
-var canvas = html("canvas");
-var source = html("source");
-var details = html("details");
-var summary = html("summary");
-var dialog = html("dialog");
-var menu = html("menu");
-var iframe = html("iframe");
-var embed = html("embed");
-var object = html("object");
-var picture = html("picture");
-var portal = html("portal");
-var svg = html("svg");
-var script = html("script");
-var noscript = html("noscript");
-var template = html("template");
-var slot = html("slot");
-var address = html("address");
-var hgroup = html("hgroup");
-var search = html("search");
-var abbr = html("abbr");
-var b = html("b");
-var bdi = html("bdi");
-var bdo = html("bdo");
-var cite = html("cite");
-var data = html("data");
-var dfn = html("dfn");
-var i = html("i");
-var kbd = html("kbd");
-var mark = html("mark");
-var q = html("q");
-var rp = html("rp");
-var rt = html("rt");
-var ruby = html("ruby");
-var s = html("s");
-var samp = html("samp");
-var sub = html("sub");
-var sup = html("sup");
-var time = html("time");
-var u = html("u");
-var varEl = html("var");
-var wbr = html("wbr");
-var del = html("del");
-var ins = html("ins");
-var caption = html("caption");
-var colgroup = html("colgroup");
-var col = html("col");
-var datalist = html("datalist");
-var optgroup = html("optgroup");
-var output = html("output");
-var progress = html("progress");
-var meter = html("meter");
-var figure = html("figure");
-var figcaption = html("figcaption");
-var dd = html("dd");
-var dl = html("dl");
-var dt = html("dt");
-var track = html("track");
-var map = html("map");
-var area = html("area");
-// src/render/html_render.ts
-var DOM_EVENT = {
-  click: "click",
-  dblclick: "dblclick",
-  pointerDown: "pointerdown",
-  pointerUp: "pointerup",
-  pointerMove: "pointermove",
-  input: "input",
-  change: "change",
-  keyDown: "keydown",
-  keyUp: "keyup",
-  focus: "focus",
-  blur: "blur"
-};
-var SKIP_PROPS = new Set(["key"]);
 var DOM_PROPERTIES = new Set([
   "value",
   "checked",
@@ -815,52 +840,62 @@ var DOM_PROPERTIES = new Set([
 
 class HtmlRender {
   container;
+  engine;
   constructor(container) {
     this.container = container;
   }
   render(view2) {
-    const ref = view2.renderRef;
-    if (!ref) {
-      const node = this.buildDom(view2);
-      const parent = view2.parent;
-      if (!parent) {
-        this.container.appendChild(node);
-      } else {
-        const parentNode = this.getParentDomNode(parent);
-        if (parentNode) {
-          parentNode.insertBefore(node, this.fastInsertionPoint(parent, view2));
+    if (!view2.renderRef) {
+      if (view2.flags & F_PRIMITIVE) {
+        const parentNode = this.findParentDom(view2);
+        const refNode = this.findInsertionPoint(view2);
+        const tag = view2.viewFn[$primitive];
+        if (tag === "text") {
+          const textNode = document.createTextNode(String(view2.props));
+          view2.renderRef = { element: textNode, prevProps: null };
+          parentNode.insertBefore(textNode, refNode);
+        } else {
+          const element = document.createElement(tag);
+          const props = view2.props;
+          const domRef = { element, prevProps: null };
+          view2.renderRef = domRef;
+          this.setAttributes(element, props);
+          if (view2.children?.length === 1) {
+            const child = view2.children[0];
+            if (child.flags & F_PRIMITIVE && child.viewFn[$primitive] === "text") {
+              element.textContent = String(child.props);
+              child.renderRef = { element, prevProps: null };
+              child.flags |= F_TEXT_CONTENT;
+            }
+          }
+          parentNode.insertBefore(element, refNode);
         }
-      }
-      const newRef = view2.renderRef;
-      if (newRef?.kind === "primitive" && newRef.element instanceof HTMLElement && view2.props?.autofocus) {
-        newRef.element.focus();
+      } else {
+        view2.renderRef = true;
       }
       return;
     }
-    if (view2.moved) {
-      view2.moved = false;
-      if (view2.parent) {
-        const expectedStart = this.fastInsertionPoint(view2.parent, view2);
-        const firstDom = this.getFirstDomNode(view2);
-        if (firstDom && firstDom !== expectedStart) {
-          const parentNode = this.getParentDomNode(view2.parent);
-          if (parentNode) {
-            if (ref.kind === "primitive") {
-              parentNode.insertBefore(ref.element, expectedStart);
-            } else {
-              if (view2.virtualDom) {
-                for (const child of view2.virtualDom) {
-                  this.moveDomNodes(child, parentNode, expectedStart);
-                }
-              }
-              parentNode.insertBefore(ref.endComment, expectedStart);
-            }
-          }
-        }
+    if (view2.flags & F_MOVED) {
+      const parentNode = this.findParentDom(view2);
+      const refNode = this.findInsertionPoint(view2);
+      if (view2.flags & F_PRIMITIVE) {
+        const ref2 = view2.renderRef;
+        parentNode.insertBefore(ref2.element, refNode);
+      } else {
+        this.moveDomNodes(view2, parentNode, refNode);
       }
     }
-    if (ref.kind !== "primitive")
+    if (!(view2.flags & F_PRIMITIVE))
+      return;
+    const ref = view2.renderRef;
+    if (view2.flags & F_TEXT_CONTENT) {
+      const parentEl = ref.element;
+      const nextText = String(view2.props);
+      if (parentEl.textContent !== nextText) {
+        parentEl.textContent = nextText;
+      }
       return;
+    }
     if (ref.element instanceof Text) {
       const nextText = String(view2.props);
       if (ref.element.textContent !== nextText) {
@@ -870,74 +905,70 @@ class HtmlRender {
     }
     const nextProps = view2.props;
     if (!ref.prevProps) {
-      this.setAttributes(ref, ref.element, nextProps);
-    } else {
-      this.diffAttributes(ref, ref.element, ref.prevProps, nextProps);
+      this.setAttributes(ref.element, nextProps);
+    } else if (ref.prevProps !== nextProps) {
+      this.diffAttributes(ref.element, ref.prevProps, nextProps);
     }
-    ref.prevProps = { ...nextProps };
+    ref.prevProps = nextProps;
   }
   unmount(view2) {
-    this.removeDomNodes(view2);
+    if (view2.flags & F_PRIMITIVE) {
+      this.removeDomNodes(view2);
+    }
     view2.renderRef = undefined;
   }
-  buildDom(view2) {
-    const tag = view2.viewFn[$primitive];
-    if (tag != null) {
-      if (tag === "text") {
-        const textNode = document.createTextNode(String(view2.props));
-        const ref2 = {
-          kind: "primitive",
-          element: textNode,
-          prevProps: null,
-          listeners: null
-        };
-        view2.renderRef = ref2;
-        return textNode;
+  findParentDom(view2) {
+    let parent = view2.parent;
+    while (parent) {
+      if (parent.flags & F_PRIMITIVE) {
+        const ref = parent.renderRef;
+        if (ref && ref.element instanceof HTMLElement)
+          return ref.element;
       }
-      const element = document.createElement(tag);
-      const props = view2.props;
-      const ref = {
-        kind: "primitive",
-        element,
-        prevProps: null,
-        listeners: null
-      };
-      view2.renderRef = ref;
-      this.setAttributes(ref, element, props);
-      return element;
+      parent = parent.parent;
     }
-    const endComment = document.createComment("");
-    view2.renderRef = {
-      kind: "composite",
-      endComment
-    };
-    return endComment;
+    return this.container;
   }
-  isEventProp(key, value) {
-    return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z" && typeof value === "function";
+  findInsertionPoint(view2) {
+    const parent = view2.parent;
+    if (!parent?.children)
+      return null;
+    const children = parent.children;
+    if (children[children.length - 1] === view2) {
+      return this.#parentEndAnchor(parent);
+    }
+    const idx = children.indexOf(view2);
+    for (let i2 = idx + 1;i2 < children.length; i2++) {
+      const dom = this.getFirstDomNode(children[i2]);
+      if (dom)
+        return dom;
+    }
+    return this.#parentEndAnchor(parent);
   }
-  eventPropToCreoName(prop) {
-    return prop[2].toLowerCase() + prop.slice(3);
+  #parentEndAnchor(parent) {
+    if (parent.flags & F_PRIMITIVE)
+      return null;
+    return this.findInsertionPoint(parent);
   }
-  setAttributes(ref, element, props) {
+  setAttributes(element, props) {
     for (const key in props) {
       const value = props[key];
-      if (SKIP_PROPS.has(key) || value == null)
+      if (key === "key" || value == null)
         continue;
-      if (this.isEventProp(key, value)) {
-        this.bindEvent(ref, element, key, value);
+      if (isEventProp(key)) {
+        this.bindEvent(element, key, value);
         continue;
       }
       this.setAttribute(element, key, value);
     }
   }
-  diffAttributes(ref, element, prev, next) {
-    for (const key of Object.keys(prev)) {
-      if (SKIP_PROPS.has(key))
+  diffAttributes(element, prev, next) {
+    for (const key in prev) {
+      if (key === "key")
         continue;
       if (!(key in next) || next[key] == null) {
-        if (this.isEventProp(key, prev[key])) {
-          this.unbindEvent(ref, element, key);
+        if (isEventProp(key)) {
+          this.unbindEvent(element, key);
         } else {
           this.removeAttribute(element, key);
         }
@@ -945,54 +976,39 @@ class HtmlRender {
     }
     for (const key in next) {
       const value = next[key];
-      if (SKIP_PROPS.has(key) || value == null)
+      if (key === "key" || value == null)
         continue;
       if (prev[key] === value)
         continue;
-      if (this.isEventProp(key, value)) {
-        this.unbindEvent(ref, element, key);
-        this.bindEvent(ref, element, key, value);
+      if (isEventProp(key)) {
+        const creoName = key.slice(2);
+        const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+        const evObj = element[$EV];
+        if (evObj) {
+          evObj[domEvent] = value;
+        } else {
+          this.bindEvent(element, key, value);
+        }
       } else {
         this.setAttribute(element, key, value);
       }
     }
   }
-  bindEvent(ref, element, prop, handler) {
-    const creoEvent = this.eventPropToCreoName(prop);
-    const domEvent = DOM_EVENT[creoEvent] ?? creoEvent.toLowerCase();
-    const wrapped = (e) => {
-      const data2 = this.mapEventData(creoEvent, e);
-      data2.stopPropagation = () => e.stopPropagation();
-      data2.preventDefault = () => e.preventDefault();
-      handler(data2);
-    };
-    if (!ref.listeners)
-      ref.listeners = new Map;
-    ref.listeners.set(prop, wrapped);
-    element.addEventListener(domEvent, wrapped);
-  }
-  unbindEvent(ref, element, prop) {
-    const wrapped = ref.listeners?.get(prop);
-    if (!wrapped)
-      return;
-    const creoEvent = this.eventPropToCreoName(prop);
-    const domEvent = DOM_EVENT[creoEvent] ?? creoEvent.toLowerCase();
-    element.removeEventListener(domEvent, wrapped);
-    ref.listeners.delete(prop);
-  }
-  mapEventData(creoEvent, e) {
-    if (creoEvent === "click" || creoEvent === "dblclick" || creoEvent.startsWith("pointer")) {
-      const pe = e;
-      return { x: pe.clientX, y: pe.clientY };
-    }
-    if (creoEvent === "input" || creoEvent === "change") {
-      return { value: e.target.value };
-    }
-    if (creoEvent.startsWith("key")) {
-      const ke = e;
-      return { key: ke.key, code: ke.code };
+  bindEvent(element, prop, handler) {
+    const creoName = prop.slice(2);
+    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+    const evObj = element[$EV] ?? (element[$EV] = {});
+    evObj[domEvent] = handler;
+    ensureDelegated(this.container, domEvent);
+  }
+  unbindEvent(element, prop) {
+    const creoName = prop.slice(2);
+    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+    const evObj = element[$EV];
+    if (evObj) {
+      delete evObj[domEvent];
     }
-    return {};
+    removeDelegated(this.container, domEvent);
   }
   setAttribute(element, key, value) {
     if (key === "class") {
@@ -1002,11 +1018,10 @@ class HtmlRender {
     } else if (DOM_PROPERTIES.has(key)) {
       element[key] = value;
     } else if (typeof value === "boolean") {
-      if (value) {
+      if (value)
         element.setAttribute(key, "");
-      } else {
+      else
         element.removeAttribute(key);
-      }
     } else {
       element.setAttribute(key, String(value));
     }
@@ -1022,94 +1037,52 @@ class HtmlRender {
       element.removeAttribute(key);
     }
   }
-  fastInsertionPoint(parent, view2) {
-    const vdom = parent.virtualDom;
-    if (vdom && vdom.length > 0) {
-      const node = vdom.getNode(view2);
-      if (node) {
-        if (node.isLast() || parent.quickRerender) {
-          const ref2 = parent.renderRef;
-          if (ref2?.kind === "composite") {
-            return ref2.endComment;
-          } else {
-            return null;
-          }
-        }
-        const prev = node.getPrev();
-        if (prev) {
-          const prevRef = prev.v.renderRef;
-          if (prevRef) {
-            return (prevRef.kind === "composite" ? prevRef.endComment : prevRef.element).nextSibling;
-          }
-          let cur = prev.getPrev();
-          while (cur) {
-            const curRef = cur.v.renderRef;
-            if (curRef) {
-              return (curRef.kind === "composite" ? curRef.endComment : curRef.element).nextSibling;
-            }
-            cur = cur.getPrev();
-          }
-        }
-      }
-    }
-    const ref = parent.renderRef;
-    if (!ref)
-      return null;
-    return ref.kind === "composite" ? ref.endComment : ref.element.firstChild;
-  }
-  getParentDomNode(parent) {
-    const ref = parent.renderRef;
-    if (!ref)
+  getFirstDomNode(view2) {
+    if (!view2.renderRef)
       return null;
-    if (ref.kind === "primitive") {
-      return ref.element;
+    if (view2.flags & F_PRIMITIVE)
+      return view2.renderRef.element;
+    if (view2.children) {
+      for (const child of view2.children) {
+        const dom = this.getFirstDomNode(child);
+        if (dom)
+          return dom;
+      }
     }
-    return ref.endComment.parentNode;
+    return null;
   }
   moveDomNodes(view2, parentNode, insertBefore) {
-    const ref = view2.renderRef;
-    if (!ref)
+    if (!view2.renderRef)
       return;
-    if (ref.kind === "primitive") {
-      parentNode.insertBefore(ref.element, insertBefore);
-    } else {
-      if (view2.virtualDom) {
-        for (const child of view2.virtualDom) {
-          this.moveDomNodes(child, parentNode, insertBefore);
-        }
-      }
-      parentNode.insertBefore(ref.endComment, insertBefore);
-    }
-  }
-  getFirstDomNode(view2) {
-    const ref = view2.renderRef;
-    if (!ref)
-      return null;
-    if (ref.kind === "primitive")
-      return ref.element;
-    if (view2.virtualDom) {
-      for (const child of view2.virtualDom) {
-        const node = this.getFirstDomNode(child);
-        if (node)
-          return node;
+    if (view2.flags & F_PRIMITIVE) {
+      parentNode.insertBefore(view2.renderRef.element, insertBefore);
+    } else if (view2.children) {
+      for (const child of view2.children) {
+        this.moveDomNodes(child, parentNode, insertBefore);
       }
     }
-    return ref.endComment;
   }
   removeDomNodes(view2) {
     const ref = view2.renderRef;
-    if (!ref)
-      return;
-    if (ref.kind === "primitive") {
-      ref.element.parentNode?.removeChild(ref.element);
+    if (!ref || !(view2.flags & F_PRIMITIVE))
       return;
+    const evObj = ref.element[$EV];
+    if (evObj) {
+      for (const domEvent in evObj) {
+        removeDelegated(this.container, domEvent);
+      }
+      delete ref.element[$EV];
     }
-    ref.endComment.parentNode?.removeChild(ref.endComment);
+    ref.element.parentNode?.removeChild(ref.element);
   }
 }
 // src/render/json_render.ts
 class JsonRender {
   root;
+  engine;
+  constructor() {
+    this.root = null;
+  }
   render(view2) {
     const existing = view2.renderRef;
     if (!existing) {
@@ -1118,23 +1091,25 @@ class JsonRender {
         this.root = node;
         return;
       }
-      const parentNode2 = view2.parent.renderRef;
-      if (parentNode2) {
-        parentNode2.children.push(node);
+      const parentNode = view2.parent.renderRef;
+      if (parentNode) {
+        const idx = view2.parent.children ? view2.parent.children.indexOf(view2) : -1;
+        if (idx >= 0 && idx < parentNode.children.length) {
+          parentNode.children.splice(idx, 0, node);
+        } else {
+          parentNode.children.push(node);
+        }
       }
       return;
     }
-    const parentNode = view2.parent?.renderRef;
-    if (parentNode) {
-      const oldIdx = parentNode.children.indexOf(existing);
-      if (oldIdx !== -1) {
-        const nextSibling = this.getNextSibling(view2);
-        const nextNode = nextSibling?.renderRef;
-        const expectedIdx = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
-        if (oldIdx !== expectedIdx && oldIdx !== expectedIdx - 1) {
+    if (view2.parent) {
+      const parentNode = view2.parent.renderRef;
+      if (parentNode) {
+        const oldIdx = parentNode.children.indexOf(existing);
+        const targetIdx = view2.parent.children ? view2.parent.children.indexOf(view2) : -1;
+        if (oldIdx !== -1 && targetIdx !== -1 && oldIdx !== targetIdx) {
           parentNode.children.splice(oldIdx, 1);
-          const insertIdx = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
-          parentNode.children.splice(insertIdx, 0, existing);
+          parentNode.children.splice(Math.min(targetIdx, parentNode.children.length), 0, existing);
         }
       }
     }
@@ -1143,16 +1118,15 @@ class JsonRender {
   }
   unmount(view2) {
     const childNode = view2.renderRef;
-    const parentNode = view2.parent?.renderRef;
-    if (parentNode && childNode) {
+    if (!childNode || !view2.parent)
+      return;
+    const parentNode = view2.parent.renderRef;
+    if (parentNode) {
       const idx = parentNode.children.indexOf(childNode);
       if (idx !== -1)
         parentNode.children.splice(idx, 1);
     }
   }
-  getNextSibling(view2) {
-    return view2.parent?.virtualDom?.getNode(view2)?.getNext()?.v;
-  }
   buildNode(view2) {
     const tag = view2.viewFn[$primitive];
     const props = tag === "text" ? { content: view2.props } : { ...view2.props };
@@ -1180,52 +1154,84 @@ var VOID_TAGS = new Set([
   "col",
   "wbr"
 ]);
+var DOM_PROPERTIES2 = new Set(["value", "checked", "selected", "indeterminate"]);
+function isEventProp2(key) {
+  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 
-class StringRender {
-  rootView;
+class HtmlStringRender {
+  root = null;
+  engine;
   render(view2) {
     if (!view2.parent) {
-      this.rootView = view2;
+      this.root = view2;
     }
   }
   unmount(_view) {}
   renderToString() {
-    if (!this.rootView)
+    if (!this.root)
       return "";
-    return this.buildString(this.rootView);
+    return this.buildString(this.root);
   }
-  buildString(view2) {
-    const tag = view2.viewFn[$primitive];
+  buildString(rec) {
+    const tag = rec.viewFn[$primitive];
     if (tag != null) {
       if (tag === "text") {
-        return `${view2.props}`;
+        return escapeHtml(String(rec.props));
       }
+      const attrs = this.buildAttrs(rec.props);
       if (VOID_TAGS.has(tag)) {
-        return this.buildVoidTag(tag, view2);
+        return `<${tag}${attrs}>`;
       }
-      return `<${tag}>${this.buildChildren(view2)}</${tag}>`;
+      return `<${tag}${attrs}>${this.buildChildren(rec)}</${tag}>`;
     }
-    return this.buildChildren(view2);
-  }
-  buildVoidTag(tag, view2) {
-    const props = view2.props;
-    let attrs = "";
-    if (props.src)
-      attrs += ` src="${props.src}"`;
-    if (props.alt)
-      attrs += ` alt="${props.alt}"`;
-    return `<${tag}${attrs} />`;
-  }
-  buildChildren(view2) {
+    return this.buildChildren(rec);
+  }
+  buildAttrs(props) {
     let result = "";
-    if (view2.virtualDom) {
-      for (const child of view2.virtualDom) {
-        result += this.buildString(child);
+    for (const key in props) {
+      const value = props[key];
+      if (key === "key" || value == null)
+        continue;
+      if (isEventProp2(key))
+        continue;
+      if (DOM_PROPERTIES2.has(key))
+        continue;
+      if (key === "style") {
+        let css = String(value);
+        css = css.trim();
+        if (css && !css.endsWith(";"))
+          css += ";";
+        result += ` style="${escapeAttr(css)}"`;
+        continue;
+      }
+      if (typeof value === "boolean") {
+        if (value)
+          result += ` ${key}=""`;
+      } else {
+        const attrName = key === "class" ? "class" : key;
+        result += ` ${attrName}="${escapeAttr(String(value))}"`;
       }
     }
     return result;
   }
+  buildChildren(rec) {
+    if (!rec.children)
+      return "";
+    let result = "";
+    for (const child of rec.children) {
+      result += this.buildString(child);
+    }
+    return result;
+  }
 }
+var StringRender = HtmlStringRender;
 // src/functional/maybe.ts
 function just(maybe, errorMessage) {
   if (maybe == null) {
@@ -1365,9 +1371,10 @@ export {
   Store,
   State,
   JsonRender,
+  HtmlStringRender,
   HtmlRender,
   Engine,
   $primitive
 };
 
-//# debugId=3A0F56854FC011F464756E2164756E21
+//# debugId=68581B5762BB1F1C64756E2164756E21