aberdeen 1.18.1 → 1.19.0

package/{dist-docs/assets/aberdeen/aberdeen.js → dist/src/aberdeen.dev.js}

@@ -101,6 +101,7 @@ class ReverseSortedSet {
 // src/aberdeen.ts
 var sortedQueue;
 var runQueueDepth = 0;
+var freezeCount = 0;
 var topRedrawScope;
 var survivingEl;
 function recordSideEffect(scope, type, key, value) {
@@ -115,7 +116,10 @@ function undoSideEffects(el, se) {
         value ? el.classList.add(key) : el.classList.remove(key);
         break;
       case 1 /* Style */:
-        el.style[key] = value == null ? "" : value;
+        if (key[0] === "-" && key[1] === "-")
+          value ? el.style.setProperty(key, value) : el.style.removeProperty(key);
+        else
+          el.style[key] = value == null ? "" : value;
         break;
       case 2 /* Prop */:
         el[key] = value;
@@ -142,6 +146,8 @@ function queue(runner) {
   sortedQueue.add(runner);
 }
 function runQueue() {
+  if (freezeCount)
+    return;
   let time = Date.now();
   while (sortedQueue) {
     const runner = sortedQueue.fetchLast();
@@ -157,6 +163,17 @@ function runQueue() {
   if (time > 9)
     console.debug(`Aberdeen queue took ${time}ms`);
 }
+function freeze() {
+  freezeCount++;
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    if (!--freezeCount)
+      runQueue();
+  };
+}
 function arrayToStr(parts) {
   let result = "";
   for (const part of parts) {
@@ -245,6 +262,7 @@ class ContentScope extends Scope {
     if (!this.changes) {
       this.changes = new Map;
       queue(this);
+      dev?.schedule(this, index, oldData, newData, new Error);
     }
     let targetDelta = this.changes.get(target);
     if (!targetDelta) {
@@ -302,6 +320,7 @@ class ChainedScope extends ContentScope {
     }
     if (!useParentCleaners)
       currentScope.cleaners.push(this);
+    dev?.create(this, currentScope, new Error);
   }
   getPrecedingNode() {
     return findLastNodeInPrevSiblings(this.prevSibling);
@@ -321,6 +340,7 @@ class RegularScope extends ChainedScope {
   redraw() {
     const savedScope = currentScope;
     currentScope = this;
+    dev?.render(this);
     try {
       this.renderer();
     } catch (e) {
@@ -347,6 +367,7 @@ class MountScope extends ContentScope {
     this.el = el;
     this.renderer = renderer;
     this.svg = el.namespaceURI === "http://www.w3.org/2000/svg";
+    dev?.create(this, currentScope, new Error);
     const oldTopRedrawScope = topRedrawScope;
     topRedrawScope = this;
     this.redraw();
@@ -451,6 +472,7 @@ class OnEachScope extends Scope {
     this.prevSibling = currentScope.getChildPrevSibling();
     currentScope.lastChild = this;
     currentScope.cleaners.push(this);
+    dev?.create(this, currentScope, new Error);
     if (target instanceof Array) {
       for (let i = 0;i < target.length; i++) {
         new OnEachItemScope(this, i, false);
@@ -481,8 +503,10 @@ class OnEachScope extends Scope {
     this.changedIndexes = new Map;
     for (const index of indexes.keys()) {
       const oldScope = this.byIndex.get(index);
-      if (oldScope)
+      if (oldScope) {
         oldScope.remove();
+        dev?.delete(oldScope);
+      }
       if (this.target instanceof Set || this.target instanceof Map ? this.target.has(index) : (index in this.target)) {
         new OnEachItemScope(this, index, true);
       } else {
@@ -524,6 +548,7 @@ class OnEachItemScope extends ContentScope {
     this.svg = currentScope.svg;
     this.parent.byIndex.set(this.itemIndex, this);
     this.lastChild = this;
+    dev?.create(this, this.parent, new Error);
     if (topRedraw)
       topRedrawScope = this;
     this.redraw();
@@ -582,6 +607,7 @@ class OnEachItemScope extends ContentScope {
     }
     const savedScope = currentScope;
     currentScope = this;
+    dev?.render(this);
     let sortKey;
     try {
       if (this.parent.makeSortKey) {
@@ -626,15 +652,31 @@ class OnEachItemScope extends ContentScope {
 function addNode(el, node) {
   if (el !== currentScope.el) {
     el.appendChild(node);
+    dev?.node(currentScope, node, false);
     return;
   }
   const parentEl = currentScope.el;
   const prevNode = currentScope.getInsertAfterNode();
   parentEl.insertBefore(node, prevNode ? prevNode.nextSibling : parentEl.firstChild);
   currentScope.lastChild = node;
+  dev?.node(currentScope, node, true);
 }
 var ROOT_SCOPE = new RootScope;
 var currentScope = ROOT_SCOPE;
+var dev;
+function _setDev(hooks) {
+  dev = hooks;
+  if (!hooks)
+    return;
+  const childScopes = (scope) => scope instanceof OnEachScope ? [...scope.byIndex.values()] : scope.cleaners.filter((c) => c instanceof Scope);
+  const replay = (scope, parent) => {
+    hooks.create(scope, parent, undefined);
+    for (const child of childScopes(scope))
+      replay(child, scope);
+  };
+  for (const child of childScopes(ROOT_SCOPE))
+    replay(child, ROOT_SCOPE);
+}
 function leakScope(func) {
   const savedScope = currentScope;
   currentScope = new RootScope;
@@ -652,6 +694,8 @@ var peeking = 0;
 function subscribe(target, index, observer = currentScope) {
   if (observer === ROOT_SCOPE || peeking)
     return;
+  if (observer === currentScope)
+    dev?.read(currentScope, target, index);
   let byTarget = subscribers.get(target);
   if (!byTarget)
     subscribers.set(target, byTarget = new Map);
@@ -1250,7 +1294,7 @@ function setSpacingCssVars(base = 1, unit = "rem") {
     cssVars[i] = 2 ** (i - 3) * base + unit;
   }
 }
-var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$([\w-]+)/g;
+var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^|[\s(,])\$([\w-]+)/g;
 var DIGIT_FIRST = /^\d/;
 function cssVarRef(value) {
   if (value.indexOf("$") < 0)
@@ -1557,12 +1601,22 @@ function insertCss(style) {
   const prefix = `.AbdStl${++cssCount}`;
   const css = typeof style === "string" ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
   if (css) {
-    let cnt = cssSnippetCount++;
-    cssSnippets[cnt] = css;
-    clean(() => delete cssSnippets[cnt]);
+    const cnt = cssSnippetCount++;
+    const key = arrayToStr([currentScope.prio, cnt]);
+    cssSnippets[key] = css;
+    clean(() => delete cssSnippets[key]);
   }
   return prefix;
 }
+function insertGlobalCss(style) {
+  const css = objectToCss(style, "");
+  if (css) {
+    const cnt = cssSnippetCount++;
+    const key = arrayToStr([currentScope.prio, cnt]);
+    cssSnippets[key] = css;
+    clean(() => delete cssSnippets[key]);
+  }
+}
 var cssSnippets = proxy({});
 var cssSnippetCount = 0;
 function combinePrefixSelector(prefix, key) {
@@ -1634,14 +1688,6 @@ function styleStringToCss(styleStr, selector) {
   return props ? `${selector}{${props}}
 ` : "";
 }
-function insertGlobalCss(style) {
-  const css = objectToCss(style, "");
-  if (css) {
-    let cnt = cssSnippetCount++;
-    cssSnippets[cnt] = css;
-    clean(() => delete cssSnippets[cnt]);
-  }
-}
 var CSS_SHORT = {
   m: "margin",
   mt: "margin-top",
@@ -1687,16 +1733,27 @@ function applyArg(el, key, value) {
       list.remove(...classes);
   } else if (key[0] === "$") {
     key = key.substring(1);
+    if (key[0] === "$")
+      key = "--" + key.substring(1);
     const val = value == null || value === false ? "" : typeof value === "string" ? cssVarRef(value) : String(value);
     const expanded = CSS_SHORT[key] || key;
     const style = el.style;
     const setOwn = el === currentScope.el;
     const props = typeof expanded === "string" ? [expanded] : expanded;
     for (const prop of props) {
-      const cm = toCamel(prop);
-      if (setOwn)
-        recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
-      style[cm] = val;
+      if (prop[0] === "-" && prop[1] === "-") {
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, prop, style.getPropertyValue(prop));
+        if (val === "")
+          style.removeProperty(prop);
+        else
+          style.setProperty(prop, val);
+      } else {
+        const cm = toCamel(prop);
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
+        style[cm] = val;
+      }
     }
   } else if (value == null) {} else if (key in SPECIAL_PROPS) {
     SPECIAL_PROPS[key](el, value);
@@ -1924,6 +1981,7 @@ var aberdeen_default = Object.assign(A, {
   derive,
   disableCreateDestroy,
   dump,
+  freeze,
   insertCss,
   insertGlobalCss,
   invertString,
@@ -1945,6 +2003,721 @@ var aberdeen_default = Object.assign(A, {
   unmountAll,
   unproxy
 });
+
+// src/devtools.ts
+var devtools_default = aberdeen_default;
+var tool;
+function activate() {
+  if (tool)
+    return;
+  try {
+    Error.stackTraceLimit = 50;
+  } catch {}
+  const t = new DevTools;
+  tool = t;
+  _setDev(t);
+}
+var TYPES = {
+  RegularScope: { label: "scope", color: "#34d399" },
+  MountScope: { label: "mount", color: "#60a5fa" },
+  OnEachScope: { label: "onEach", color: "#c084fc" },
+  OnEachItemScope: { label: "item", color: "#f472b6" },
+  ResultScope: { label: "derive", color: "#fbbf24" },
+  SetArgScope: { label: "attr", color: "#94a3b8" },
+  RootScope: { label: "root", color: "#64748b" }
+};
+var typeInfo = (t) => TYPES[t] || { label: t, color: "#cbd5e1" };
+var STYLE = `
+/* Whole overlay tree is click-through (pointer-events inherits); only the dialog opts in. */
+:host { all: initial; position: fixed; top: 0; left: 0; pointer-events: none; }
+* { box-sizing: border-box; font-family: ui-monospace, monospace; }
+
+.box { position: fixed; pointer-events: none; border-radius: 2px; z-index: 2147483000; }
+.box.parent { border: 2px dotted #f59e0b; background: rgba(245,158,11,.06); }
+.box.child  { border: 2px solid #34d399; background: rgba(52,211,153,.10); }
+
+.dlg {
+	position: fixed; left: 16px; top: 16px; width: 660px; max-width: 95vw; height: 480px; max-height: 90vh;
+	background: #1e1b2e; color: #ede9fe; border: 1px solid #6d28d9; border-radius: 8px;
+	box-shadow: 0 10px 36px rgba(0,0,0,.6); display: flex; flex-direction: column;
+	font-size: 12px; pointer-events: auto; z-index: 2147483600; /* above the highlight boxes */
+}
+.hd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
+	padding: 6px 6px 6px 12px; border-bottom: 1px solid #4c1d95; cursor: move; user-select: none; }
+.hd .title { font-weight: bold; color: #c4b5fd; }
+.hd .x { cursor: pointer; color: #c4b5fd; padding: 2px 8px; border-radius: 4px; }
+.hd .x:hover { background: #6d28d9; color: #fff; }
+.cols { display: flex; flex: 1; min-height: 0; }
+.left { width: 56%; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #4c1d95; }
+.right { width: 44%; overflow: auto; padding: 8px 10px; }
+
+.menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #2e2a40; }
+.menu button { font: inherit; background: #2e2a40; color: #ddd6fe; border: 1px solid #4c1d95;
+	border-radius: 5px; padding: 3px 8px; cursor: pointer; }
+.menu button:hover { background: #6d28d9; }
+.menu button.on { background: #6d28d9; color: #fff; }
+
+.tree { flex: 1; overflow: auto; padding: 4px 0; }
+.node { white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 1px 8px; cursor: pointer; }
+.node:hover { background: #312a4a; }
+.node.sel { background: #4c1d95; }
+.node .tw { width: 12px; color: #94a3b8; text-align: center; flex: none; }
+.badge { flex: none; font-size: 10px; padding: 0 5px; border-radius: 3px; color: #0b0a12; font-weight: bold; }
+.node .loc { color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; }
+.node .t { color: #8b82a8; flex: none; }
+
+.right h4 { margin: 0 0 6px; color: #c4b5fd; font-size: 12px; }
+.right .row { margin-bottom: 3px; }
+.right .k { color: #94a3b8; }
+.sec { color: #a78bfa; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
+	margin: 12px 0 5px; border-bottom: 1px solid #3a3450; padding-bottom: 3px; }
+.loclink { color: #93c5fd; cursor: pointer; text-decoration: underline dotted; }
+.loclink:hover { color: #c4d9ff; }
+.logbtn { font: inherit; font-size: 10px; background: #2e2a40; color: #ddd6fe; border: 1px solid #4c1d95;
+	border-radius: 4px; padding: 0 6px; cursor: pointer; }
+.logbtn:hover { background: #6d28d9; }
+.stack { white-space: pre-wrap; color: #cbd5e1; font-size: 11px; line-height: 1.5; margin-top: 2px;
+	border-left: 2px solid #3a3450; padding-left: 6px; }
+.muted { color: #64748b; }
+.reads .key { color: #fbbf24; } .reads .val { color: #93c5fd; }
+.empty { color: #64748b; padding: 16px; text-align: center; white-space: pre-line; line-height: 1.5; }
+`;
+var lastPos;
+
+class DevTools {
+  root = { id: 0, scope: null, type: "RootScope", parent: undefined, children: [], createdTime: 0, renderCount: 0, topNodes: [] };
+  scopeMap = new WeakMap;
+  pending = new WeakMap;
+  nodeMap = new WeakMap;
+  elOwner = new WeakMap;
+  origin = -1;
+  nextId = 1;
+  host = document.createElement("div");
+  shadow;
+  overlay;
+  dlg;
+  treeEl;
+  rightEl;
+  menuEl;
+  mode = "tree";
+  selectedId;
+  collapsed = new Set;
+  recentSince = 0;
+  boxes = [];
+  thaw;
+  altPressed = false;
+  rebuildScheduled = false;
+  lastX = -1;
+  lastY = -1;
+  constructor() {
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = STYLE;
+    this.shadow.appendChild(style);
+    this.overlay = eln("div");
+    this.shadow.appendChild(this.overlay);
+    this.buildDialog();
+    document.body.appendChild(this.host);
+    this.positionDialog();
+    this.renderEmptyDetails();
+    window.addEventListener("keydown", this.onKeyDown, true);
+    window.addEventListener("keyup", this.onKeyUp, true);
+    window.addEventListener("blur", this.onBlur, true);
+    window.addEventListener("pointermove", this.onPointerMove, true);
+    window.addEventListener("scroll", this.reposition, true);
+    window.addEventListener("resize", this.reposition, true);
+  }
+  destroy() {
+    this.savePos();
+    window.removeEventListener("keydown", this.onKeyDown, true);
+    window.removeEventListener("keyup", this.onKeyUp, true);
+    window.removeEventListener("blur", this.onBlur, true);
+    window.removeEventListener("pointermove", this.onPointerMove, true);
+    window.removeEventListener("scroll", this.reposition, true);
+    window.removeEventListener("resize", this.reposition, true);
+    this.clearBoxes();
+    if (this.thaw)
+      this.thaw();
+    this.host.remove();
+    tool = undefined;
+    _setDev(undefined);
+  }
+  stamp() {
+    const now = performance.now();
+    if (this.origin < 0)
+      this.origin = now;
+    return now - this.origin;
+  }
+  create(scope, parentScope, err) {
+    const parent = this.scopeMap.get(parentScope) || this.root;
+    const d = {
+      id: ++this.nextId,
+      scope,
+      type: scope.constructor.name,
+      parent,
+      children: [],
+      el: scope.el instanceof Element ? scope.el : undefined,
+      createdTime: err ? this.stamp() : undefined,
+      createError: err,
+      renderCount: 0,
+      topNodes: []
+    };
+    this.scopeMap.set(scope, d);
+    parent.children.push(d);
+    if (d.el)
+      this.elOwner.set(d.el, d);
+    this.scheduleRebuild();
+  }
+  render(scope) {
+    const d = this.scopeMap.get(scope);
+    if (!d)
+      return;
+    d.children.length = 0;
+    d.topNodes = [];
+    d.subs = [];
+    const p = this.pending.get(scope);
+    if (p) {
+      d.renderTime = this.stamp();
+      d.renderCount++;
+      d.renderError = p.error;
+      d.renderChange = p.change;
+      this.pending.delete(scope);
+    }
+    this.scheduleRebuild();
+  }
+  schedule(scope, index, oldData, newData, err) {
+    this.pending.set(scope, { change: { index, oldData, newData }, error: err });
+  }
+  node(scope, node, top) {
+    const d = this.scopeMap.get(scope);
+    if (!d)
+      return;
+    this.nodeMap.set(node, d);
+    if (top)
+      d.topNodes.push(node);
+  }
+  read(scope, target, index) {
+    const d = this.scopeMap.get(scope);
+    if (d) {
+      d.subs ||= [];
+      if (d.subs.length < 500)
+        d.subs.push([target, index]);
+    }
+  }
+  delete(scope) {
+    const d = this.scopeMap.get(scope);
+    if (!d)
+      return;
+    if (d.parent) {
+      const i = d.parent.children.indexOf(d);
+      if (i >= 0)
+        d.parent.children.splice(i, 1);
+    }
+    this.scopeMap.delete(scope);
+    this.scheduleRebuild();
+  }
+  buildDialog() {
+    this.dlg = eln("div", "dlg");
+    const hd = eln("div", "hd");
+    hd.appendChild(eln("div", "title", "Aberdeen dev tools"));
+    const x = eln("div", "x", "✕");
+    x.addEventListener("click", () => this.destroy());
+    hd.appendChild(x);
+    this.dlg.appendChild(hd);
+    this.setupDrag(hd);
+    const cols = eln("div", "cols");
+    const left = eln("div", "left");
+    this.menuEl = eln("div", "menu");
+    this.treeEl = eln("div", "tree");
+    left.appendChild(this.menuEl);
+    left.appendChild(this.treeEl);
+    this.rightEl = eln("div", "right");
+    cols.appendChild(left);
+    cols.appendChild(this.rightEl);
+    this.dlg.appendChild(cols);
+    this.shadow.appendChild(this.dlg);
+    this.buildMenu();
+  }
+  positionDialog() {
+    const m = 16;
+    const w = this.dlg.offsetWidth, h = this.dlg.offsetHeight;
+    const left = lastPos ? lastPos.left : Math.max(m, window.innerWidth - w - m);
+    const top = lastPos ? lastPos.top : Math.max(m, window.innerHeight - h - m);
+    this.dlg.style.left = left + "px";
+    this.dlg.style.top = top + "px";
+  }
+  savePos() {
+    lastPos = { left: this.dlg.offsetLeft, top: this.dlg.offsetTop };
+  }
+  buildMenu() {
+    this.menuEl.textContent = "";
+    const btn = (label, on, fn) => {
+      const b = eln("button", on ? "on" : undefined, label);
+      b.addEventListener("click", () => {
+        fn();
+        this.buildMenu();
+      });
+      this.menuEl.appendChild(b);
+    };
+    btn("Tree", this.mode === "tree", () => {
+      this.mode = "tree";
+      this.rebuild();
+    });
+    btn("Recent", this.mode === "recent", () => {
+      this.mode = "recent";
+      this.rebuild();
+    });
+    btn("Freeze", !!this.thaw, () => {
+      if (this.thaw) {
+        this.thaw();
+        this.thaw = undefined;
+      } else
+        this.thaw = aberdeen_default.freeze();
+    });
+    if (this.mode === "recent")
+      btn("Clear", false, () => {
+        this.recentSince = this.lastEventTime();
+        this.rebuild();
+      });
+    this.menuEl.appendChild(eln("span", "muted", "  Alt-hover an element to select its scope"));
+  }
+  lastEventTime() {
+    let max = 0;
+    const walk = (d) => {
+      if (d.renderTime != null && d.renderTime > max)
+        max = d.renderTime;
+      d.children.forEach(walk);
+    };
+    this.root.children.forEach(walk);
+    return max;
+  }
+  scheduleRebuild() {
+    if (this.rebuildScheduled)
+      return;
+    this.rebuildScheduled = true;
+    requestAnimationFrame(() => {
+      this.rebuildScheduled = false;
+      this.rebuild();
+    });
+  }
+  rebuild() {
+    const scrollTop = this.treeEl.scrollTop;
+    this.treeEl.textContent = "";
+    if (this.mode === "tree") {
+      for (const child of this.root.children)
+        this.renderNode(child, 0);
+      if (!this.root.children.length)
+        this.treeEl.appendChild(eln("div", "empty", "No live scopes yet."));
+    } else {
+      this.renderRecent();
+    }
+    this.treeEl.scrollTop = scrollTop;
+    const d = this.selectedId != null ? this.findScope(this.selectedId) : undefined;
+    if (d) {
+      this.renderDetails(d);
+      this.highlight(d);
+    } else {
+      this.selectedId = undefined;
+      this.clearBoxes();
+      this.renderEmptyDetails();
+    }
+  }
+  renderEmptyDetails() {
+    if (this.rightEl.firstElementChild?.classList.contains("empty"))
+      return;
+    this.rightEl.textContent = "";
+    this.rightEl.appendChild(eln("div", "empty", `No scope selected.
+
+Click a scope in the tree — or hold Alt and hover an element on the page to select the scope that drew it.`));
+  }
+  renderRecent() {
+    const all = [];
+    const walk = (d) => {
+      if (d.renderTime != null && d.renderTime > this.recentSince)
+        all.push(d);
+      d.children.forEach(walk);
+    };
+    this.root.children.forEach(walk);
+    all.sort((x, y) => y.renderTime - x.renderTime);
+    if (!all.length) {
+      this.treeEl.appendChild(eln("div", "empty", "No re-renders observed yet."));
+      return;
+    }
+    for (const d of all.slice(0, 60)) {
+      const row = eln("div", "node" + (d.id === this.selectedId ? " sel" : ""));
+      row.dataset.id = String(d.id);
+      row.style.paddingLeft = "8px";
+      const info = typeInfo(d.type);
+      const badge = eln("span", "badge", info.label);
+      badge.style.background = info.color;
+      row.appendChild(badge);
+      row.appendChild(eln("span", "loc", d.renderChange ? changeSummary(d.renderChange) : appFrame(d.createError) || d.type));
+      row.appendChild(eln("span", "t", ms(d.renderTime, 0)));
+      row.addEventListener("click", () => this.select(d));
+      row.addEventListener("pointerenter", () => this.highlight(d));
+      row.addEventListener("pointerleave", () => this.highlight(this.selectedId != null ? this.findScope(this.selectedId) : undefined));
+      this.treeEl.appendChild(row);
+    }
+  }
+  renderNode(d, depth) {
+    const row = eln("div", "node" + (d.id === this.selectedId ? " sel" : ""));
+    row.dataset.id = String(d.id);
+    row.style.paddingLeft = 8 + depth * 14 + "px";
+    const hasKids = d.children.length > 0;
+    const tw = eln("div", "tw", hasKids ? this.collapsed.has(d.id) ? "▸" : "▾" : "");
+    if (hasKids)
+      tw.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.collapsed.has(d.id))
+          this.collapsed.delete(d.id);
+        else
+          this.collapsed.add(d.id);
+        this.rebuild();
+      });
+    row.appendChild(tw);
+    const info = typeInfo(d.type);
+    const badge = eln("span", "badge", info.label);
+    badge.style.background = info.color;
+    row.appendChild(badge);
+    row.appendChild(eln("span", "loc", appFrame(d.createError) || (d.createError === undefined ? "(pre-open)" : "(internal)")));
+    if (d.createdTime != null)
+      row.appendChild(eln("span", "t", ms(d.createdTime, 0)));
+    row.addEventListener("click", () => this.select(d));
+    row.addEventListener("pointerenter", () => this.highlight(d));
+    row.addEventListener("pointerleave", () => this.highlight(this.selectedId != null ? this.findScope(this.selectedId) : undefined));
+    this.treeEl.appendChild(row);
+    if (hasKids && !this.collapsed.has(d.id))
+      for (const c of d.children)
+        this.renderNode(c, depth + 1);
+  }
+  findScope(id, node = this.root) {
+    if (node.id === id)
+      return node;
+    for (const c of node.children) {
+      const r = this.findScope(id, c);
+      if (r)
+        return r;
+    }
+    return;
+  }
+  select(d) {
+    this.selectedId = d ? d.id : undefined;
+    for (const el of this.treeEl.querySelectorAll(".node.sel"))
+      el.classList.remove("sel");
+    if (!d) {
+      this.renderEmptyDetails();
+      this.clearBoxes();
+      return;
+    }
+    const row = this.treeEl.querySelector(`.node[data-id="${d.id}"]`);
+    if (row) {
+      row.classList.add("sel");
+      row.scrollIntoView({ block: "nearest" });
+    }
+    this.renderDetails(d);
+    this.highlight(d);
+  }
+  renderDetails(d) {
+    const r = this.rightEl;
+    r.textContent = "";
+    const info = typeInfo(d.type);
+    const head = eln("h4");
+    const badge = eln("span", "badge", info.label);
+    badge.style.background = info.color;
+    head.appendChild(badge);
+    head.appendChild(document.createTextNode(" " + d.type));
+    r.appendChild(head);
+    r.appendChild(kv("owned nodes", String(d.topNodes.length)));
+    r.appendChild(kv("child scopes", String(d.children.length)));
+    if (d.type === "OnEachItemScope" && d.scope)
+      r.appendChild(renderItemValue(d.scope));
+    if (d.subs && d.subs.length)
+      r.appendChild(this.renderReads(d));
+    r.appendChild(section("Creation"));
+    r.appendChild(kv("time", d.createdTime != null ? ms(d.createdTime) : "unknown"));
+    r.appendChild(stackRow("stack", d.createError, "unknown"));
+    if (!d.createError)
+      r.appendChild(eln("div", "muted", "Reload with ?abdev=1 to capture creation stacks."));
+    r.appendChild(section("Last trigger"));
+    if (d.renderTime != null) {
+      r.appendChild(kv("time", ms(d.renderTime) + " (" + d.renderCount + "×)"));
+      if (d.renderChange)
+        r.appendChild(kv("change", changeSummary(d.renderChange)));
+      r.appendChild(stackRow("stack", d.renderError, "(no application frame)"));
+    } else {
+      r.appendChild(eln("div", "muted", "not triggered yet"));
+    }
+  }
+  renderReads(d) {
+    const wrap = eln("div", "row reads");
+    wrap.appendChild(eln("div", "k", "observing:"));
+    const groups = new Map;
+    for (const [obj, key] of d.subs) {
+      let s = groups.get(obj);
+      if (!s)
+        groups.set(obj, s = new Set);
+      s.add(key);
+    }
+    if (!groups.size) {
+      wrap.appendChild(eln("div", "muted", "(none)"));
+      return wrap;
+    }
+    let n = 0;
+    for (const [obj, keys] of groups) {
+      if (n++ > 16) {
+        wrap.appendChild(eln("div", "muted", "…"));
+        break;
+      }
+      const line = eln("div");
+      line.appendChild(document.createTextNode("{ "));
+      let first = true;
+      for (const k of [...keys].slice(0, 16)) {
+        if (!first)
+          line.appendChild(document.createTextNode(", "));
+        first = false;
+        line.appendChild(eln("span", "key", readKey(k)));
+        if (typeof k !== "symbol") {
+          line.appendChild(document.createTextNode("="));
+          let v;
+          try {
+            v = obj[k];
+          } catch {
+            v = "?";
+          }
+          line.appendChild(eln("span", "val", preview(v)));
+        }
+      }
+      line.appendChild(document.createTextNode(" }"));
+      wrap.appendChild(line);
+    }
+    return wrap;
+  }
+  highlight(d) {
+    this.clearBoxes();
+    if (!d)
+      return;
+    if (d.el instanceof Element)
+      this.box(d.el.getBoundingClientRect(), "parent");
+    for (const n of d.topNodes)
+      if (n instanceof Element)
+        this.box(n.getBoundingClientRect(), "child");
+    for (const c of d.children)
+      this.box(regionRect(c), "child");
+  }
+  box(rect, kind) {
+    if (!rect || !rect.width && !rect.height)
+      return;
+    const b = eln("div", "box " + kind);
+    Object.assign(b.style, { left: rect.left + "px", top: rect.top + "px", width: rect.width + "px", height: rect.height + "px" });
+    this.overlay.appendChild(b);
+    this.boxes.push(b);
+  }
+  clearBoxes() {
+    for (const b of this.boxes)
+      b.remove();
+    this.boxes.length = 0;
+  }
+  reposition = () => {
+    const d = this.selectedId != null ? this.findScope(this.selectedId) : undefined;
+    if (d)
+      this.highlight(d);
+  };
+  overUI(t) {
+    return !(t instanceof Node) || t === this.host || this.host.contains(t);
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Alt") {
+      this.altPressed = true;
+      this.resolveAt(this.lastX, this.lastY);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this.destroy();
+    }
+  };
+  onKeyUp = (e) => {
+    if (e.key === "Alt")
+      this.altPressed = false;
+  };
+  onBlur = () => {
+    this.altPressed = false;
+  };
+  onPointerMove = (e) => {
+    this.lastX = e.clientX;
+    this.lastY = e.clientY;
+    if (this.altPressed)
+      this.resolveAt(this.lastX, this.lastY);
+  };
+  resolveAt(x, y) {
+    if (x < 0)
+      return;
+    const target = document.elementFromPoint(x, y);
+    if (!target || this.overUI(target))
+      return;
+    let node = target;
+    let d;
+    while (node) {
+      d = (node instanceof Element ? this.elOwner.get(node) : undefined) || this.nodeMap.get(node);
+      if (d)
+        break;
+      node = node.parentNode;
+    }
+    if (d && d.id !== this.selectedId)
+      this.select(d);
+  }
+  setupDrag(handle) {
+    let sx = 0, sy = 0, ox = 0, oy = 0, down = false;
+    handle.addEventListener("pointerdown", (e) => {
+      if (e.target.classList.contains("x"))
+        return;
+      down = true;
+      sx = e.clientX;
+      sy = e.clientY;
+      ox = this.dlg.offsetLeft;
+      oy = this.dlg.offsetTop;
+      handle.setPointerCapture(e.pointerId);
+    });
+    handle.addEventListener("pointermove", (e) => {
+      if (!down)
+        return;
+      this.dlg.style.left = Math.max(0, Math.min(window.innerWidth - 80, ox + e.clientX - sx)) + "px";
+      this.dlg.style.top = Math.max(0, Math.min(window.innerHeight - 24, oy + e.clientY - sy)) + "px";
+    });
+    handle.addEventListener("pointerup", () => {
+      down = false;
+      this.savePos();
+    });
+  }
+}
+function eln(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls)
+    e.className = cls;
+  if (text != null)
+    e.textContent = text;
+  return e;
+}
+function kv(k, v) {
+  const row = eln("div", "row");
+  row.appendChild(eln("span", "k", k + ": "));
+  row.appendChild(document.createTextNode(v));
+  return row;
+}
+function section(title) {
+  return eln("div", "sec", title);
+}
+function stackRow(label, err, emptyMsg) {
+  const row = eln("div", "row");
+  row.appendChild(eln("span", "k", label + ": "));
+  const full = formatStack(err && err.stack);
+  if (!full) {
+    row.appendChild(eln("span", "muted", emptyMsg));
+    return row;
+  }
+  const link = eln("span", "loclink", appFrame(err) || "(internal)");
+  const pre = eln("div", "stack");
+  pre.textContent = full;
+  pre.style.display = "none";
+  link.addEventListener("click", () => {
+    pre.style.display = pre.style.display ? "" : "none";
+  });
+  row.appendChild(link);
+  row.appendChild(pre);
+  return row;
+}
+function readKey(k) {
+  if (typeof k !== "symbol")
+    return String(k);
+  return k.description === "any" ? "*" : k.description === "mapSize" ? "size" : k.description || "?";
+}
+function changeSummary(c) {
+  return `${readKey(c.index)}: ${preview(c.oldData)} → ${preview(c.newData)}`;
+}
+function renderItemValue(scope) {
+  const target = scope.parent?.target;
+  const idx = scope.itemIndex;
+  const isSet = target instanceof Set;
+  const value = isSet ? idx : target instanceof Map ? target.get(idx) : target ? target[idx] : undefined;
+  const wrap = eln("div", "row");
+  if (!isSet)
+    wrap.appendChild(kv("key", String(idx)));
+  const line = eln("div");
+  line.appendChild(eln("span", "k", "value: "));
+  line.appendChild(eln("span", "val", preview(value)));
+  const btn = eln("button", "logbtn", "to console");
+  btn.addEventListener("click", () => console.log(value));
+  line.appendChild(document.createTextNode(" "));
+  line.appendChild(btn);
+  wrap.appendChild(line);
+  return wrap;
+}
+function ms(t, dp = 1) {
+  return "+" + t.toLocaleString(undefined, { minimumFractionDigits: dp, maximumFractionDigits: dp }) + "ms";
+}
+function preview(v) {
+  if (v === null)
+    return "null";
+  if (typeof v === "string")
+    return JSON.stringify(v.length > 30 ? v.slice(0, 30) + "…" : v);
+  if (typeof v === "object")
+    return Array.isArray(v) ? `[${v.length}]` : "{…}";
+  if (typeof v === "function")
+    return "fn";
+  return String(v);
+}
+function deepNodes(d, out = []) {
+  for (const n of d.topNodes)
+    out.push(n);
+  for (const c of d.children)
+    deepNodes(c, out);
+  return out;
+}
+function regionRect(d) {
+  let l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
+  for (const n of deepNodes(d)) {
+    if (!(n instanceof Element))
+      continue;
+    const q = n.getBoundingClientRect();
+    if (!q.width && !q.height)
+      continue;
+    l = Math.min(l, q.left);
+    t = Math.min(t, q.top);
+    r = Math.max(r, q.right);
+    b = Math.max(b, q.bottom);
+  }
+  if (l === Infinity)
+    return;
+  return new DOMRect(l, t, r - l, b - t);
+}
+function appFrame(err) {
+  const s = formatStack(err && err.stack);
+  if (!s)
+    return "";
+  const first = s.split(`
+`)[0];
+  const m = first.match(/([^\/\\(]+):(\d+):\d+\)?$/);
+  return m ? `${m[1]}:${m[2]}` : first.replace(/^at\s+/, "");
+}
+function formatStack(stack) {
+  if (!stack)
+    return "";
+  const origin = location.protocol + "//" + location.host;
+  return stack.split(`
+`).map((l) => l.trim().split(origin).join("")).filter((l) => (l.startsWith("at ") || l.includes("@")) && !/aberdeen(\.dev)?\.[jt]s|devtools\.[jt]s/.test(l)).join(`
+`);
+}
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  if (/[?&]abdev=1\b/.test(location.search))
+    activate();
+  window.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.altKey && e.code === "KeyA") {
+      e.preventDefault();
+      if (tool)
+        tool.destroy();
+      else
+        activate();
+    }
+  });
+}
 export {
   withEmitHandler,
   unproxy,
@@ -1966,17 +2739,19 @@ export {
   invertString,
   insertGlobalCss,
   insertCss,
+  freeze,
   dump,
   disableCreateDestroy,
   derive,
   defaultEmitHandler,
-  aberdeen_default as default,
+  devtools_default as default,
   darkMode,
   cssVars,
   count,
   copy,
   clone,
   clean,
+  _setDev,
   OPAQUE,
   NO_COPY,
   MAP_SIZE_SYMBOL,
@@ -1985,5 +2760,5 @@ export {
   A
 };
 
-//# debugId=FD73580ACB58CF9D64756E2164756E21
-//# sourceMappingURL=aberdeen.js.map
+//# debugId=5E581450DD669A5F64756E2164756E21
+//# sourceMappingURL=aberdeen.dev.js.map